/* Solution pages (/solutions/<slug>), on top of site.css + customers.css */
.cs:has(.sl-hero){padding-top:28px}
.sl-crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mut)}
.sl-crumb a{color:var(--acc-2);text-decoration:none}.sl-crumb b{font-weight:500;color:var(--ink)}
.sl-kick{margin:0 0 18px;font:12px var(--mono);color:var(--mut);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.soft{color:#8b8a84}
.sl-sub{margin:12px 0 0;font-size:16.5px;line-height:1.55;color:var(--mut);max-width:38em}

/* hero */
.sl-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center;padding:36px 0 64px}
.sl-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.sl-badge{font-size:12.5px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.sl-hero h1{margin:0;font:500 clamp(32px,4.4vw,52px)/1.06 var(--serif);letter-spacing:-.03em}
.sl-lead{margin:20px 0 0;font-size:17.5px;line-height:1.55;color:var(--mut);max-width:34em}
.sl-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sl-card{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:18px;box-shadow:0 30px 60px -40px rgba(20,20,15,.35)}
.sl-card-h{display:flex;align-items:center;gap:10px;padding:4px 4px 14px;font-size:14px;font-weight:500}
.sl-card-h .lu{width:18px;height:18px;color:var(--acc)}
.sl-live{margin-left:auto;font:11px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--acc-2);display:flex;align-items:center;gap:6px}
.sl-live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px var(--acc-soft);animation:slpulse 1.8s ease-in-out infinite}
@keyframes slpulse{50%{opacity:.4}}
.sl-chat{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:14px;background:#fff;border:1px solid var(--line);min-height:220px}
.sl-chat p{margin:0;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.45;max-width:86%}
.sl-ai{background:var(--acc-soft);align-self:flex-start;border-top-left-radius:4px}
.sl-me{background:var(--ink);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.sl-sys{align-self:center;background:none!important;padding:2px 0!important;font:12px var(--mono)!important;color:var(--mut);text-align:center}

/* logos */
.sl-logos{padding:36px 0;border-top:1px solid var(--line)}

/* sections */
.sl-sec{border-top:1px solid var(--line);padding:72px 0}
.sl-sec h2{margin:0;font:500 clamp(26px,3vw,36px)/1.15 var(--serif);letter-spacing:-.02em;max-width:22em}

/* features: list on the left, conversation on the right */
.sl-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:stretch}
.sl-acc{margin-top:28px;border-top:1px solid var(--line)}
.sl-acc-it{border-bottom:1px solid var(--line)}
.sl-acc-it button{display:flex;align-items:center;gap:12px;width:100%;padding:18px 0;border:0;background:none;font:500 15.5px var(--sans);color:#9a9892;cursor:pointer;text-align:left}
.sl-acc-it button .lu{width:20px;height:20px;flex:none}
.sl-acc-it.on button{color:var(--ink)}
.sl-acc-it p{display:none;margin:-6px 0 20px 32px;font-size:15px;line-height:1.55;color:var(--mut)}
.sl-acc-it.on p{display:block}
.sl-feat-r{position:relative;border-radius:18px;background:var(--panel);border:1px solid var(--line);padding:28px;display:grid;align-items:center;min-height:340px}
.sl-pane{display:none}.sl-pane.on{display:block;animation:slin .35s var(--ease)}
@keyframes slin{from{opacity:0;transform:translateY(6px)}}

/* built for real calls */
.sl-built-h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:start}
.sl-facts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.sl-facts li{display:grid;grid-template-columns:22px auto 1fr;gap:10px;align-items:center;font-size:14px;color:var(--mut)}
.sl-facts .lu{width:20px;height:20px;color:var(--ink)}.sl-facts b{font-size:16px;font-weight:600;color:var(--ink)}
.sl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:44px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.sl-c{padding:28px;border-left:1px solid var(--line)}.sl-c:first-child{border-left:0}
.sl-c h3{margin:22px 0 6px;font:600 16px/1.3 var(--sans)}.sl-c p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}
.sl-vis{height:132px;border-radius:12px;background:var(--panel);display:flex;align-items:center;justify-content:center;gap:6px;padding:16px}
.sl-vis-know span{font-size:12px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.sl-vis-hand span{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-weight:600;font-size:13px}
.sl-vis-hand .a{background:var(--acc);color:#fff}.sl-vis-hand .b{background:var(--ink);color:#fff}
.sl-vis-hand .line{width:90px;height:2px;border-radius:0;background:repeating-linear-gradient(90deg,var(--acc) 0 8px,transparent 8px 14px)}

/* review */
.sl-calls{margin-top:36px;padding:28px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.sl-calls-h{max-width:720px;margin:0 auto;padding:14px 18px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;font-weight:500;font-size:14px}
.sl-row{max-width:720px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:14px 18px;background:#fff;border:1px solid var(--line);border-top-color:#f0efea;font-size:14px}
.sl-row:last-child{border-radius:0 0 12px 12px}
.sl-row b{font-weight:500}.sl-row span{font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--mut)}
.sl-row span.ok{color:var(--acc-2);border-color:#cfe3d4;background:var(--acc-soft)}.sl-row span.warn{color:#9a6a1c;border-color:#eddcbc;background:#fbf4e6}
.sl-row time{font:12.5px var(--mono);color:var(--mut)}

/* steps */
.sl-steps-h{display:flex;align-items:center;justify-content:space-between;gap:20px}
.sl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:36px}
.sl-step{padding:26px;border:1px solid var(--line);border-radius:16px;background:#fff}
.sl-num{font:13px var(--mono);color:var(--mut)}
.sl-step h3{margin:12px 0 8px;font:600 16.5px/1.3 var(--sans)}.sl-step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--mut)}

/* related */
.sl-rels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.sl-rel{display:grid;gap:6px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit;text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.sl-rel:hover{border-color:#cfcdc5;transform:translateY(-2px)}
.sl-rel .lu{width:20px;height:20px;margin-bottom:8px}.sl-rel b{font-weight:500}.sl-rel span{font-size:14px;color:var(--mut)}

@media (max-width:980px){.sl-hero,.sl-feat{grid-template-columns:1fr;gap:36px}.sl-built-h{grid-template-columns:1fr}
  .sl-cards,.sl-steps,.sl-rels{grid-template-columns:1fr}.sl-c{border-left:0;border-top:1px solid var(--line)}.sl-c:first-child{border-top:0}}
@media (max-width:620px){.sl-sec{padding:52px 0}.sl-hero{padding:24px 0 44px}.sl-feat-r{padding:16px;min-height:0}.sl-calls{padding:12px}
  .sl-row{grid-template-columns:1fr auto}.sl-row span{grid-row:2;justify-self:start}.sl-steps-h{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.sl-live:before,.sl-pane.on{animation:none}}

/* ===== animated illustrations (solutions.js adds .in when a section scrolls into view) ===== */
@keyframes slrise{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
:root{--out:cubic-bezier(.25,1,.5,1);--expo:cubic-bezier(.16,1,.3,1)}   /* back.out(1.4) and expo.out, as in NullMotion */
@keyframes sllevel{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes sldot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* hero: header waveform + conversation that plays line by line */
.sl-wave{display:inline-flex;align-items:center;gap:2px;height:16px;margin-left:6px}
.sl-wave i{display:block;width:3px;height:100%;border-radius:2px;background:var(--acc);transform-origin:center;animation:sllevel 1s ease-in-out infinite}
.sl-wave i:nth-child(2){animation-delay:-.6s}.sl-wave i:nth-child(3){animation-delay:-.3s}.sl-wave i:nth-child(4){animation-delay:-.8s}.sl-wave i:nth-child(5){animation-delay:-.45s}
.sl-play p:not(.on){display:none}
.sl-play p.on{animation:slrise .5s var(--out) both}
.sl-typ{display:none;gap:4px;align-self:flex-start;padding:12px 14px!important;background:var(--acc-soft);border-radius:12px;border-top-left-radius:4px}
.sl-typ.on{display:flex}
.sl-typ i{width:6px;height:6px;border-radius:50%;background:#7c9a87;animation:sldot 1s infinite}.sl-typ i:nth-child(2){animation-delay:.15s}.sl-typ i:nth-child(3){animation-delay:.3s}

/* features: progress line on the open item, bubbles slide in on switch */
.sl-acc-it{position:relative}
.sl-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--ink)}
.sl-feat.in .sl-acc-it.on .sl-prog{animation:slgrow 6s linear forwards}
.sl-feat.paused .sl-acc-it.on .sl-prog{animation-play-state:paused}
@keyframes slgrow{to{width:100%}}
.sl-pane.on .sl-chat p{animation:slrise .5s var(--out) both}
.sl-pane.on .sl-chat p:nth-child(2){animation-delay:.7s}.sl-pane.on .sl-chat p:nth-child(3){animation-delay:1.4s}

/* answering hours: a week, team in the day (dark), AI the rest (green), a "now" line sweeping through */
.sl-vis-hours{flex-direction:column;gap:10px}
.sl-vis-hours .hrs{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%;height:70px}
.sl-vis-hours .hrs i{position:relative;display:block;border-radius:6px;background:linear-gradient(to bottom,var(--acc) 0 33%,#2b2a27 33% 70%,var(--acc) 70%)}
.sl-vis-hours .hrs i:nth-child(n+6){background:var(--acc)}
.sl-vis-hours .hrs b{position:absolute;bottom:-17px;left:0;right:0;text-align:center;font:600 9.5px var(--mono);color:var(--mut)}
.sl-vis-hours .now{position:absolute;left:-4px;right:-4px;top:0;height:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18),0 0 10px rgba(255,255,255,.9);opacity:0}
.in .sl-vis-hours .now{animation:slsweep 5s ease-in-out infinite}
@keyframes slsweep{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}
.sl-vis-hours .key{display:flex;gap:14px;margin-top:14px;font-size:11px;color:var(--mut)}
.sl-vis-hours .key span{display:flex;align-items:center;gap:5px}.sl-vis-hours .key span:before{content:"";width:9px;height:9px;border-radius:3px}
.k-ai:before{background:var(--acc)}.k-tm:before{background:#2b2a27}

/* knows your business: topics light up in turn, then a live lookup */
.sl-vis-know{flex-direction:column;gap:12px;flex-wrap:nowrap}
.sl-vis-know .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.in .sl-vis-know .chips span{animation:slchip 6s infinite}
.sl-vis-know .chips span:nth-child(2){animation-delay:1.5s!important}.sl-vis-know .chips span:nth-child(3){animation-delay:3s!important}.sl-vis-know .chips span:nth-child(4){animation-delay:4.5s!important}
@keyframes slchip{0%,22%,100%{background:#fff;color:inherit;border-color:var(--line)}4%,18%{background:var(--ink);color:#fff;border-color:var(--ink)}}
.sl-vis-know .look{display:flex;white-space:nowrap;align-items:center;gap:7px;font-size:11.5px;padding:6px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);opacity:0}
.in .sl-vis-know .look{animation:sllook 6s infinite}
.sl-vis-know .look i{width:12px;height:12px;border-radius:50%;border:2px solid var(--acc);border-top-color:transparent;animation:slspin .8s linear infinite}
@keyframes slspin{to{transform:rotate(360deg)}}
@keyframes sllook{0%,10%{opacity:0;transform:translateY(4px)}18%,88%{opacity:1;transform:none}100%{opacity:0}}

/* hands over: a dot travels from the AI to a colleague, who lights up, then the summary appears */
.sl-vis-hand{flex-direction:column;gap:12px}
.sl-vis-hand .ppl{display:flex;align-items:center;gap:6px}
.sl-vis-hand .line{position:relative;display:block;width:96px;height:2px;background:repeating-linear-gradient(90deg,#bfd6c5 0 6px,transparent 6px 11px)}
.sl-vis-hand .line i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--acc);opacity:0}
.in .sl-vis-hand .line i{animation:sltravel 3.2s var(--ease) infinite}
@keyframes sltravel{0%{left:0;opacity:0}10%{opacity:1}55%{left:calc(100% - 10px);opacity:1}62%,100%{left:calc(100% - 10px);opacity:0}}
.in .sl-vis-hand .b{animation:slring 3.2s infinite}
@keyframes slring{0%,55%{box-shadow:0 0 0 0 rgba(76,167,95,0)}62%{box-shadow:0 0 0 6px rgba(76,167,95,.35)}85%,100%{box-shadow:0 0 0 12px rgba(76,167,95,0)}}
.sl-vis-hand .sum{font-size:11.5px;padding:5px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);opacity:0}
.in .sl-vis-hand .sum{animation:slsum 3.2s infinite}
@keyframes slsum{0%,60%{opacity:0;transform:translateY(4px)}70%,92%{opacity:1;transform:none}100%{opacity:0}}

/* calls list: rows slide in, the first one is live and then resolves */
.sl-rev .sl-row,.sl-rev .sl-calls-h{opacity:0}
.sl-rev.in .sl-calls-h{animation:slrise .5s var(--ease) both}
.sl-rev.in .sl-row{animation:slrise .6s var(--expo) both}
.sl-rev.in .sl-row:nth-child(3){animation-delay:.13s}.sl-rev.in .sl-row:nth-child(4){animation-delay:.26s}.sl-rev.in .sl-row:nth-child(5){animation-delay:.39s}
.sl-live-row span.live{color:#b4452f;border-color:#efd0c8;background:#fdf1ee;display:inline-flex;align-items:center;gap:5px}
.sl-live-row span.live:before{content:"";width:6px;height:6px;border-radius:50%;background:#d0553a;animation:slpulse 1s infinite}

/* steps: cards rise in turn, each with a small moving picture */
.sl-steps-s .sl-step{opacity:0}
.sl-steps-s.in .sl-step{animation:slrise .7s var(--expo) both}
.sl-steps-s.in .sl-step:nth-child(2){animation-delay:.15s}.sl-steps-s.in .sl-step:nth-child(3){animation-delay:.3s}
.sl-svis{height:96px;margin:-6px -6px 18px;border-radius:12px;background:var(--panel);display:grid;place-items:center;overflow:hidden}
.sv-doc{display:grid;gap:7px;width:62%}
.sv-doc i{display:block;height:7px;border-radius:4px;background:#d9d7cf;width:0}
.in .sv-doc i{animation:sltype 4s ease-out infinite}
.sv-doc i:nth-child(2){animation-delay:.4s!important}.sv-doc i:nth-child(3){animation-delay:.8s!important}.sv-doc i:nth-child(4){animation-delay:1.2s!important;max-width:60%}
@keyframes sltype{0%{width:0}25%,85%{width:100%}100%{width:100%;opacity:0}}
.sv-plug{display:flex;align-items:center;gap:6px;font-size:10.5px}
.sv-plug .dev{padding:6px 8px;border-radius:8px;background:#fff;border:1px solid var(--line)}
.sv-plug .wire{position:relative;width:52px;height:2px;background:#cfcdc5;overflow:hidden}
.sv-plug .wire i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--acc) 0 8px,transparent 8px 16px);background-size:16px 2px}
.in .sv-plug .wire i{animation:slflow .8s linear infinite}
@keyframes slflow{to{background-position:16px 0}}
.sv-code{display:flex;align-items:center;font:11px var(--mono);padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--line);max-width:88%}
.sv-code code{display:inline-block;overflow:hidden;white-space:nowrap;width:0}
.in .sv-code code{animation:slcode 4s steps(28) infinite}
@keyframes slcode{0%{width:0}55%,90%{width:24ch}100%{width:24ch}}
.sv-code .cur{width:2px;height:13px;background:var(--ink);margin-left:2px;animation:slblink 1s steps(1) infinite}
@keyframes slblink{50%{opacity:0}}
.sv-test{display:flex;align-items:center;gap:12px}
.sv-test .play{position:relative;width:36px;height:36px;border-radius:50%;background:var(--acc)}
.sv-test .play:after{content:"";position:absolute;left:14px;top:11px;border:7px solid transparent;border-left:11px solid #fff;border-right:0}
.in .sv-test .play{animation:slring 2s infinite}
.sv-test .bars{display:flex;align-items:center;gap:3px;height:28px}
.sv-test .bars i{display:block;width:4px;height:100%;border-radius:2px;background:var(--ink);transform:scaleY(.3)}
.in .sv-test .bars i{animation:sllevel 1.1s ease-in-out infinite}
.sv-test .bars i:nth-child(2n){animation-delay:-.4s!important}.sv-test .bars i:nth-child(3n){animation-delay:-.7s!important}

@media (prefers-reduced-motion:reduce){
  .sl-play p{display:block!important;animation:none!important}.sl-typ{display:none!important}
  .sl-wave i,.sl-prog,.sl-pane.on .sl-chat p,.sl-vis-hours .now,.sl-vis-know .chips span,.sl-vis-know .look,.sl-vis-hand *,.sv-doc i,.sv-plug .wire i,.sv-code code,.sv-test *{animation:none!important}
  .sl-rev .sl-row,.sl-rev .sl-calls-h,.sl-steps-s .sl-step,.sl-vis-know .look,.sl-vis-hand .sum{opacity:1!important}
  .sv-doc i{width:100%}.sv-code code{width:24ch}.sl-wave i{transform:scaleY(.6)}}

/* ===== feature scenes (solutions_scenes.py): replay each time a pane opens ===== */
.sc{display:flex;flex-direction:column;gap:10px;max-width:440px;width:100%;margin:0 auto}
.sc .b{margin:0;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;max-width:86%}
.sc .b.ai{background:#fff;border:1px solid var(--line);align-self:flex-start;border-top-left-radius:4px}
.sc .b.me{background:var(--ink);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.sc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.sc-h b{font-size:15px}.sc-h span{font-size:12px;color:var(--mut)}
.sc-tag{align-self:flex-start;font-size:12px;padding:5px 10px;border-radius:999px;background:var(--acc-soft);color:var(--acc-2);font-weight:500}
.sc .av{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:600}
@keyframes scpop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
@keyframes scfade{from{opacity:0}to{opacity:1}}
.sl-pane.on .sc>*{animation:scpop .55s var(--out) both}
.sl-pane.on .sc>*:nth-child(2){animation-delay:.5s}.sl-pane.on .sc>*:nth-child(3){animation-delay:1.3s}
.sl-pane.on .sc>*:nth-child(4){animation-delay:2.1s}.sl-pane.on .sc>*:nth-child(5){animation-delay:2.9s}.sl-pane.on .sc>*:nth-child(6){animation-delay:3.6s}

/* calendar: slots appear, 3:00 gets picked, booked card + SMS */
.sc-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-slots span{padding:10px 0;text-align:center;border-radius:10px;background:#fff;border:1px solid var(--line);font:500 13.5px var(--sans)}
.sc-slots span.gone{color:#c3c1b9;text-decoration:line-through;background:transparent}
.sl-pane.on .sc-slots span{animation:scpop .4s var(--out) both}
.sl-pane.on .sc-slots span:nth-child(2){animation-delay:.6s}.sl-pane.on .sc-slots span:nth-child(3){animation-delay:.7s}.sl-pane.on .sc-slots span:nth-child(4){animation-delay:.8s}.sl-pane.on .sc-slots span:nth-child(5){animation-delay:.9s}.sl-pane.on .sc-slots span:nth-child(6){animation-delay:1s}
.sl-pane.on .sc-slots .pick{animation:scpop .4s var(--out) .8s both,scpick .5s var(--expo) 1.6s forwards}
@keyframes scpick{to{background:var(--acc);border-color:var(--acc);color:#fff;transform:scale(1.06);box-shadow:0 10px 24px -10px rgba(76,167,95,.8)}}
.sc-ok{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13.5px}
.sc-ok i{width:22px;height:22px;border-radius:50%;background:var(--acc);position:relative;flex:none}
.sc-ok i:after{content:"";position:absolute;left:7px;top:4px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sc-sms{align-self:flex-end;max-width:80%;padding:9px 12px;border-radius:12px;background:var(--acc-soft);font-size:12.5px;border-top-right-radius:4px}
.sl-pane.on .sc-cal .sc-ok{animation-delay:2.2s}.sl-pane.on .sc-cal .sc-sms{animation-delay:3s}

/* languages: chips light up one by one, conversation switches to Arabic */
.sc-langs{display:flex;flex-wrap:wrap;gap:6px}.sc-langs span{font-size:12px;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.sl-pane.on .sc-langs span{animation:sclang 6s 1s infinite}
.sc-langs span:nth-child(2){animation-delay:2s!important}.sc-langs span:nth-child(3){animation-delay:3s!important}.sc-langs span:nth-child(4){animation-delay:4s!important}.sc-langs span:nth-child(5){animation-delay:5s!important}.sc-langs span:nth-child(6){animation-delay:6s!important}
@keyframes sclang{0%,16%,100%{background:#fff;color:inherit;border-color:var(--line)}3%,13%{background:var(--ink);color:#fff;border-color:var(--ink)}}
.sc-switch{align-self:center;display:flex;align-items:center;gap:8px;font:600 11px var(--mono);color:var(--mut)}
.sc-switch i{position:relative;width:34px;height:18px;border-radius:999px;background:#e3e2dc}
.sc-switch i:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sl-pane.on .sc-switch i{animation:scsw .4s 2.6s forwards}.sl-pane.on .sc-switch i:after{animation:scknob .4s var(--expo) 2.6s forwards}
@keyframes scsw{to{background:var(--acc)}}@keyframes scknob{to{left:18px}}
.sl-pane.on .sc-lang .b:nth-of-type(3){animation-delay:2.7s}.sl-pane.on .sc-lang .b:nth-of-type(4){animation-delay:3.4s}.sl-pane.on .sc-lang .sc-switch{animation-delay:2.4s}

/* reminder call: rings, steps tick through, short conversation */
.sc-call{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.sc-call b{display:block;font-size:14px}.sc-call small{font-size:12px;color:var(--mut)}
.sc-call .ring{position:relative;margin-left:auto;width:30px;height:30px;border-radius:50%;background:var(--acc)}
.sc-call .ring i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:scring 1.4s ease-out infinite}.sc-call .ring i+i{animation-delay:.7s}
@keyframes scring{from{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}
.sc-steps{display:flex;list-style:none;margin:0;padding:0;gap:6px}
.sc-steps li{flex:1;text-align:center;font-size:11.5px;padding:6px 0;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--mut)}
.sl-pane.on .sc-steps li{animation:scstep .3s forwards}.sl-pane.on .sc-steps li:nth-child(1){animation-delay:.8s}.sl-pane.on .sc-steps li:nth-child(2){animation-delay:1.8s}.sl-pane.on .sc-steps li:nth-child(3){animation-delay:3.4s}
@keyframes scstep{to{background:var(--ink);color:#fff;border-color:var(--ink)}}
.sl-pane.on .sc-bell .b:nth-of-type(1){animation-delay:2s}.sl-pane.on .sc-bell .b:nth-of-type(2){animation-delay:2.8s}

/* order / booking tracker: lookup, then the timeline fills */
.sc-h .scan{color:var(--acc-2)}
.sl-pane.on .sc-h .scan{animation:scscan 1.6s steps(1) forwards}
@keyframes scscan{0%{opacity:1}99%{opacity:1}100%{opacity:0}}
.sc-line{list-style:none;margin:0;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--line);display:grid;gap:12px}
.sc-line li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#b0aea6}
.sc-line i{width:14px;height:14px;border-radius:50%;border:2px solid #d7d5cd;flex:none}
.sl-pane.on .sc-line li{animation:scdone .3s forwards}.sl-pane.on .sc-line li:nth-child(1){animation-delay:1s}.sl-pane.on .sc-line li:nth-child(2){animation-delay:1.4s}.sl-pane.on .sc-line li:nth-child(3){animation-delay:1.8s}.sl-pane.on .sc-line li:nth-child(4){animation:none}
.sl-pane.on .sc-line li i{animation:scdot .3s forwards}.sl-pane.on .sc-line li:nth-child(1) i{animation-delay:1s}.sl-pane.on .sc-line li:nth-child(2) i{animation-delay:1.4s}.sl-pane.on .sc-line li:nth-child(3) i{animation:scdot .3s 1.8s forwards,slpulse 1.2s 2.2s infinite}.sl-pane.on .sc-line li:nth-child(4) i{animation:none}
@keyframes scdone{to{color:var(--ink)}}@keyframes scdot{to{background:var(--acc);border-color:var(--acc)}}
.sl-pane.on .sc-track .b{animation-delay:2.4s}

/* hand-over: caller → AI → colleague, summary card */
.sc-nodes{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0}
.sc-nodes .n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-weight:600;font-size:13px}
.sc-nodes .me{background:#fff;border:1px solid var(--line)}.sc-nodes .ai{background:var(--acc);color:#fff}.sc-nodes .st{background:var(--ink);color:#fff}
.sc-nodes .w{position:relative;width:60px;height:2px;background:repeating-linear-gradient(90deg,#c9d9cd 0 6px,transparent 6px 11px)}
.sc-nodes .w i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--acc);opacity:0}
.sl-pane.on .sc-nodes .w i{animation:scgo .9s var(--expo) .6s forwards}.sl-pane.on .sc-nodes .w2 i{animation-delay:1.6s}
@keyframes scgo{0%{left:0;opacity:1}100%{left:calc(100% - 10px);opacity:1}}
.sl-pane.on .sc-nodes .st{animation:slring 1.6s 2.4s 2}
.sc-card{padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line)}.sc-card small{display:block;font-size:11.5px;color:var(--mut)}.sc-card b{font-size:13.5px;font-weight:500}
.sl-pane.on .sc-hand .sc-card{animation-delay:2.2s}.sl-pane.on .sc-hand .sc-tag{animation-delay:3s}

/* outbound list: rows drop in, statuses resolve */
.sc-out .r{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13.5px}
.sc-out .r b{font-weight:500}.sc-out em{margin-left:auto;font-style:normal;font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--panel);color:var(--mut)}
.sc-out em.ok{background:var(--acc-soft);color:var(--acc-2)}.sc-out em.warn{background:#fbf4e6;color:#9a6a1c}.sc-out em.live{background:#fdf1ee;color:#b4452f}
.sl-pane.on .sc-out em.live{animation:slpulse 1s infinite}

/* stock: product card, counter ticks down when reserved */
.sc-prod{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.sc-prod .img{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#cfe3d4,#8fc39c)}
.sc-prod b{display:block;font-size:14px}.sc-prod small{font-size:12px;color:var(--acc-2)}
.sc-prod .cnt{margin-left:auto;font:600 22px var(--serif);width:28px;height:30px;overflow:hidden;position:relative}
.sc-prod .cnt i{font-style:normal;position:absolute;inset:0;text-align:center}
.sl-pane.on .sc-prod .cnt i{animation:sccount 3s forwards}
@keyframes sccount{0%,85%{transform:none;opacity:1}90%{transform:translateY(-100%);opacity:0}91%{transform:translateY(100%)}100%{transform:none;opacity:1}}
.sl-pane.on .sc-stock .sc-tag{animation-delay:2.9s}

/* info: tiles flip in */
.sc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc-tiles div{padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line)}.sc-tiles small{display:block;font-size:11px;color:var(--mut)}.sc-tiles b{font-size:13px;font-weight:500}
.sl-pane.on .sc-tiles div{animation:scflip .5s var(--expo) both;transform-origin:top}
.sl-pane.on .sc-tiles div:nth-child(1){animation-delay:.7s}.sl-pane.on .sc-tiles div:nth-child(2){animation-delay:.85s}.sl-pane.on .sc-tiles div:nth-child(3){animation-delay:1s}.sl-pane.on .sc-tiles div:nth-child(4){animation-delay:1.15s}
@keyframes scflip{from{opacity:0;transform:rotateX(-70deg)}to{opacity:1;transform:none}}
.sl-pane.on .sc-tiles div:nth-child(1){box-shadow:0 0 0 2px var(--acc)}

/* after hours: night card, urgent alert pulses, team alerted */
.sc-night .sky{position:relative;padding:18px;border-radius:14px;background:linear-gradient(160deg,#1d2433,#2c3550);color:#fff;overflow:hidden}
.sc-night .sky b{display:block;font:500 26px var(--serif)}.sc-night .sky small{font-size:12px;opacity:.7}
.sc-night .moon{position:absolute;right:18px;top:16px;width:26px;height:26px;border-radius:50%;box-shadow:-7px 4px 0 0 #f5e7b8}
.sc-alert{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:#fff;border:1px solid #efd0c8;font-size:13.5px}
.sc-alert i{width:10px;height:10px;border-radius:50%;background:#d0553a;animation:slpulse 1s infinite;flex:none}
.sl-pane.on .sc-night .sc-alert{animation-delay:1s}.sl-pane.on .sc-night .sc-tag{animation-delay:2s}

@media (prefers-reduced-motion:reduce){.sl-pane.on .sc *,.sl-pane.on .sc>*{animation:none!important;opacity:1!important}
  .sc-slots .pick{background:var(--acc);color:#fff}.sc-line li{color:var(--ink)}}

/* ===== framed layout (side rules, hatched divider bands, edge-to-edge panels) ===== */
.cs:has(.sl-frame){padding:0 var(--pad) 0}
.sl-frame{border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--bg)}
.sl-frame>.sl-crumb{padding:24px 48px 0}
.sl-frame .sl-hero{padding:28px 48px 56px;gap:48px}
.sl-frame .sl-sec{border-top:0;padding:64px 48px}
.sl-frame .sl-logos{border-top:0;padding:32px 48px}
.sl-sep{height:14px;margin:0 calc(50% - 50vw);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.045) 6px 7px)}

/* hero: live voice orb on a dotted panel, captions play under it, button opens the real agent */
.sl-orbp{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:36px 24px 24px;border:1px solid var(--line);border-radius:4px;
  background:radial-gradient(circle,rgba(0,0,0,.07) 1px,transparent 1.3px) 0 0/14px 14px,var(--panel);min-height:420px}
.sl-orb{position:relative;width:190px;height:190px;border-radius:50%;filter:saturate(1.1)}
.sl-orb i,.sl-orb b{position:absolute;inset:0;border-radius:50%}
.sl-orb i{background:conic-gradient(from var(--a,0deg),#4ca75f,#9fe0b0,#2f8a6e,#b8e8c4,#4ca75f);animation:slorb 9s linear infinite;filter:blur(1px)}
.sl-orb b{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 46%),radial-gradient(circle at 70% 78%,rgba(20,60,40,.35),transparent 55%);
  animation:slbreath 4s ease-in-out infinite}
.sl-orbp.speak .sl-orb{animation:slspeak .5s ease-in-out infinite alternate}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes slorb{to{--a:360deg}}
@keyframes slbreath{50%{transform:scale(1.03)}}
@keyframes slspeak{from{transform:scale(1)}to{transform:scale(1.045)}}
.sl-cap{display:flex;flex-direction:column;gap:8px;width:100%;max-width:400px;min-height:118px;justify-content:flex-end}
.sl-cap p{margin:0;padding:8px 12px;border-radius:12px;font-size:13.5px;line-height:1.45;max-width:88%}
.sl-cap .sl-ai{background:#fff;border:1px solid var(--line)}
.sl-talk{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:500 14px var(--sans);color:var(--ink);cursor:pointer;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.3);transition:transform .2s var(--expo),box-shadow .2s}
.sl-talk:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.sl-talk .lu{width:16px;height:16px;color:var(--acc)}

/* features: left list, right half is a full-height tinted panel */
.sl-frame .sl-feat{padding:0;gap:0}
.sl-frame .sl-feat-l{padding:64px 48px}
.sl-frame .sl-feat-r{border:0;border-left:1px solid var(--line);border-radius:0;padding:40px;min-height:100%}

/* built-for band: header, then three edge-to-edge cells */
.sl-frame .sl-cards{margin:48px -48px -64px;border-radius:0;border-left:0;border-right:0;border-bottom:0}
.sl-ct{margin:0 0 14px;text-align:center;font:12px var(--mono);color:var(--mut)}
.sl-frame .sl-vis{border-radius:6px}

/* tool call line inside scenes */
.sc-tool{display:flex;align-items:center;gap:8px;align-self:center;font-size:12px;color:var(--mut)}
.sc-tool svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sc-tool code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}

@media (max-width:980px){.sl-frame>.sl-crumb,.sl-frame .sl-hero,.sl-frame .sl-sec,.sl-frame .sl-feat-l,.sl-frame .sl-logos{padding-left:24px;padding-right:24px}
  .sl-frame .sl-feat-r{border-left:0;border-top:1px solid var(--line);padding:28px 20px}.sl-frame .sl-cards{margin:40px -24px -64px}}
@media (max-width:620px){.cs:has(.sl-frame){padding:0}.sl-frame{border:0}.sl-frame>.sl-crumb,.sl-frame .sl-hero,.sl-frame .sl-sec,.sl-frame .sl-feat-l,.sl-frame .sl-logos{padding-left:16px;padding-right:16px}
  .sl-orbp{min-height:0;padding:28px 14px 18px}.sl-orb{width:150px;height:150px}.sl-frame .sl-cards{margin:36px -16px -52px}.sl-frame .sl-sec{padding-top:52px;padding-bottom:52px}}
@media (prefers-reduced-motion:reduce){.sl-orb i,.sl-orb b,.sl-orbp.speak .sl-orb{animation:none}}