/* Integration page: the homepage's type scale, surfaces and conversation shapes. */
.ix-page { --ix-line:rgba(0,63,53,.16); --ix-muted:#516c61; }
.ix-page .container { width:min(1240px,calc(100% - 48px)); }
.ix-page :is(h1,h2,h3,p) { margin-top:0; }
#wesal-integrations .ix-page :is(h1,h2,h3) { font-weight:700; letter-spacing:0; line-height:1.5; }
#wesal-integrations .ix-page h1 { font-size:clamp(2rem,3.6vw,3.5rem); margin:0; }
#wesal-integrations .ix-page h2 { font-size:clamp(1.875rem,3vw,2.625rem); margin:0; }
.ix-page button { font:inherit; cursor:pointer; }
.ix-page :is(button,a,summary):focus-visible { outline:3px solid #009e68; outline-offset:5px; }
.ix-page section[id],.ix-demo { scroll-margin-top:110px; }
.ix-kicker { display:flex; align-items:center; gap:10px; color:#003f35; font-size:.875rem; font-weight:500; margin:0 0 16px; }
.ix-kicker::before { content:""; width:24px; height:2px; background:currentColor; }
.ix-hero { padding:148px 0 52px; background:#e9eed4; }
.ix-hero-grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; }
.ix-hero h1 em { font-style:normal; color:#009e68; }
.ix-intent-path { display:flex; align-items:center; gap:14px; margin-top:25px; font-size:.9375rem; color:#365b4e; }
.ix-intent-path i { font-style:normal; color:#009e68; }
.ix-hero-copy { max-width:490px; }
.ix-hero-copy p { font-size:1.0625rem; line-height:1.95; color:#365b4e; margin:0 0 24px; }
.ix-link { display:inline-flex; gap:20px; align-items:center; min-height:44px; border-bottom:1px solid rgba(0,63,53,.35); font-size:.9375rem; font-weight:500; color:#003f35; }
.ix-link:hover { color:#009e68; }
.ix-section { padding:60px 0; background:#fff; }
.ix-heading { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); align-items:end; gap:64px; margin-bottom:30px; }
.ix-heading>p { font-size:1.0625rem; line-height:1.95; color:var(--ix-muted); max-width:510px; margin:0 0 4px; }
.ix-map-section h2 span { background:linear-gradient(transparent 70%,#c4e970 70%,#c4e970 94%,transparent 94%); padding-inline:.04em; }
.ix-map { background:#f5f7ec; border:1px solid var(--ix-line); border-radius:28px 28px 6px 28px; padding:28px; }
.ix-map-label { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 22px; margin-bottom:20px; font-size:.875rem; }
.ix-map-label>span { color:var(--ix-muted); }
.ix-channels,.ix-systems { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.ix-channel,.ix-system { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; min-width:0; padding:16px 10px; border:1px solid var(--ix-line); border-radius:16px 16px 4px 16px; background:#fff; color:#003f35; transition:background .2s,border-color .2s; }
.ix-channel strong,.ix-system strong { font-size:.9375rem; font-weight:500; }
.ix-channel-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#e9eed4; }
.ix-channel-icon svg { width:24px; height:24px; }
.ix-channel:hover,.ix-system:hover { background:#e9eed4; border-color:#009e68; }
.ix-channel[aria-pressed="true"],.ix-system[aria-pressed="true"] { background:#003f35; color:#fff; border-color:#003f35; }
.ix-channel[aria-pressed="true"] .ix-channel-icon { background:#c4e970; color:#003f35; }
.ix-system { min-height:60px; }
.ix-system strong { font-size:1.125rem; }
.ix-connections { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; height:30px; }
.ix-connections i { position:relative; justify-self:center; width:1px; height:100%; background:#adc9b9; }
.ix-connections i.is-selected { width:2px; background:#009e68; }
.ix-connections i.is-selected::after { content:""; position:absolute; left:-2px; width:6px; height:9px; border-radius:5px; background:#009e68; animation:ix-packet 2.8s linear infinite; }
@keyframes ix-packet { 0% {top:0;opacity:0} 15%,85% {opacity:1} 100% {top:calc(100% - 9px);opacity:0} }
.ix-hub { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); align-items:center; gap:34px; padding:26px 34px; border-radius:22px 22px 4px 22px; background:#003f35; color:#fff; }
.ix-hub-brand { display:grid; gap:10px; }
.ix-hub-brand img { width:130px; height:auto; }
.ix-hub-brand>span { font-size:.875rem; color:#c3d8ce; }
.ix-hub-process { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; border-inline-start:1px solid rgba(137,227,180,.3); padding-inline-start:34px; }
.ix-hub-process>span { display:grid; gap:5px; color:#e9eed4; font-size:.875rem; }
.ix-hub-process b { color:#c4e970; font-size:1.0625rem; font-weight:500; }
.ix-examples { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin:24px 0 18px; font-size:.875rem; }
.ix-examples>span { color:#516c61; margin-inline-end:6px; }
.ix-examples button { min-height:44px; padding:8px 14px; background:#fff; color:#003f35; border:1px solid var(--ix-line); border-radius:12px 12px 3px 12px; font-size:.875rem; }
.ix-examples button:hover,.ix-examples button[aria-pressed="true"] { background:#e9eed4; border-color:#003f35; }
.ix-demo { border:1px solid #003f35; border-radius:28px 28px 6px 28px; background:#89e3b4; padding:14px; }
.ix-demo-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:8px 10px 18px; }
.ix-demo-top h3 { font-size:1.125rem; margin:0; }
.ix-demo-label { font-size:.875rem; font-weight:500; color:#003f35; }
.ix-demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-radius:20px 20px 4px 20px; overflow:hidden; background:#fff; }
.ix-conversation { padding:28px; background:#f5f7ec; }
.ix-small-label { display:block; margin-bottom:18px; font-size:.875rem; color:#516c61; }
.ix-message { font-size:1rem; line-height:1.9; padding:16px 18px; margin-bottom:18px; max-width:94%; }
.ix-user { background:#fff; border:1px solid var(--ix-line); border-radius:16px 4px 16px 16px; }
.ix-reply-label { display:block; font-size:.875rem; color:#365b4e; text-align:left; margin-bottom:6px; }
.ix-reply { background:#d9f4e5; color:#003f35; border-radius:4px 16px 16px 16px; margin-inline-start:auto; }
.ix-result { display:grid; gap:6px; padding-top:16px; border-top:1px solid var(--ix-line); font-size:.9375rem; }
.ix-result>span { color:#516c61; font-size:.875rem; }
.ix-result strong { font-weight:500; }
.ix-execution { padding:28px 34px; }
.ix-steps { list-style:none; margin:0; padding:0; counter-reset:ix-step; display:grid; gap:24px; }
.ix-steps li { position:relative; display:grid; gap:5px; padding-inline-start:40px; counter-increment:ix-step; }
.ix-steps li::before { content:counter(ix-step,decimal-leading-zero); position:absolute; inset-inline-start:0; color:#009e68; font-size:.875rem; font-weight:700; }
.ix-steps b { font-size:1rem; }
.ix-steps span { font-size:.9375rem; color:#516c61; line-height:1.85; }
.ix-demo-foot { margin:0; padding:16px 10px 2px; font-size:.875rem; line-height:1.85; color:#003f35; }
.ix-directory-section { background:#003f35; color:#fff; }
.ix-directory-section :is(.ix-kicker,.ix-heading>p) { color:#e9eed4; }
.ix-directory-section h2 span { color:#c4e970; }
.ix-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 52px; }
.ix-directory article { display:grid; grid-template-columns:76px minmax(0,1fr); gap:22px; align-items:center; padding:26px 0; border-top:1px solid rgba(137,227,180,.3); }
.ix-product { display:grid; place-items:center; width:76px; height:68px; border:1px solid rgba(137,227,180,.35); border-radius:18px 18px 4px 18px; background:rgba(137,227,180,.08); color:#c4e970; font-size:1.35rem; font-weight:700; }
.ix-directory h3 { margin:0 0 8px; font-size:1.125rem; color:#fff; }
.ix-directory p { margin:0; color:#c3d8ce; font-size:1rem; line-height:1.85; }
.ix-faq-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:80px; }
.ix-faq-intro { max-width:410px; color:#516c61; font-size:1rem; line-height:1.95; margin:22px 0 18px; }
.ix-faq details { border-bottom:1px solid var(--ix-line); }
.ix-faq details:first-child { border-top:1px solid var(--ix-line); }
.ix-faq summary { display:flex; gap:20px; justify-content:space-between; align-items:center; cursor:pointer; list-style:none; min-height:74px; padding-block:20px; font-size:1rem; font-weight:500; }
.ix-faq summary::-webkit-details-marker { display:none; }
.ix-faq summary::after { content:"+"; font-size:1.5rem; font-weight:400; }
.ix-faq details[open] summary::after { content:"−"; }
.ix-faq details p { color:#516c61; font-size:1rem; line-height:1.95; margin:0 0 24px; }
.ix-faq a { text-decoration:underline; text-underline-offset:4px; color:#003f35; }
.ix-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:980px) {
 .ix-hero-grid,.ix-heading { gap:36px; }
 .ix-map { padding:22px; }
 .ix-channel strong { font-size:.875rem; }
 .ix-hub { gap:24px; padding:24px; }
 .ix-hub-process { gap:16px; padding-inline-start:24px; }
 .ix-directory { gap:0 30px; }
 .ix-faq-grid { gap:44px; }
}
@media(max-width:700px) {
 .ix-page .container { width:calc(100% - 32px); }
 .ix-hero { padding:126px 0 40px; }
 .ix-hero-grid,.ix-heading,.ix-faq-grid { grid-template-columns:minmax(0,1fr); gap:26px; }
 .ix-hero-copy { max-width:none; }
 .ix-hero-copy p,.ix-heading>p { font-size:1rem; }
 .ix-section { padding-block:44px; }
 .ix-heading { margin-bottom:24px; gap:18px; }
 .ix-map { padding:18px 14px; border-radius:24px 24px 5px 24px; }
 .ix-channels,.ix-systems { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
 .ix-channel { flex-direction:row; gap:8px; padding:12px 7px; }
 .ix-channel:last-child,.ix-system:last-child { grid-column:1/-1; }
 .ix-channel-icon { width:29px; height:29px; flex-shrink:0; }
 .ix-channel-icon svg { width:20px; height:20px; }
 .ix-system { min-height:50px; padding:10px; }
 .ix-connections { display:flex; justify-content:center; height:24px; }
 .ix-connections i { display:none; }
 .ix-connections i.is-selected { display:block; }
 .ix-hub { grid-template-columns:minmax(0,1fr); padding:24px 16px; gap:20px; }
 .ix-hub-brand { justify-items:center; }
 .ix-hub-brand img { width:112px; }
 .ix-hub-process { border-inline-start:0; border-top:1px solid rgba(137,227,180,.3); padding:18px 0 0; gap:8px; text-align:center; }
 .ix-hub-process b { font-size:1rem; }
 .ix-examples>span { width:100%; }
 .ix-examples button { flex:1 1 auto; }
 .ix-demo { padding:10px; border-radius:24px 24px 5px 24px; }
 .ix-demo-top { padding:8px 6px 16px; }
 .ix-demo-top h3 { font-size:1rem; }
 .ix-demo-grid { grid-template-columns:minmax(0,1fr); }
 .ix-conversation,.ix-execution { padding:22px 18px; }
 .ix-message { max-width:100%; }
 .ix-directory { grid-template-columns:minmax(0,1fr); gap:0; }
 .ix-directory article { grid-template-columns:64px minmax(0,1fr); gap:18px; }
 .ix-product { width:64px; height:60px; }
 .ix-faq-grid { gap:32px; }
}
@media(prefers-reduced-motion:reduce) {
 .ix-connections i.is-selected::after { animation:none; }
 .ix-channel,.ix-system { transition:none; }
}