/* Showday — marketing site · Switchboard language
   Graphite canvas, white surfaces lifted by shadow, ink, one signal amber.
   Geist for words, Geist Mono for every number. Radii nest 22 → 12 → 8. */

:root{
  color-scheme:light;
  --bg:#f3f4f5; --surface:#fff; --well:#f7f8f9; --tick:#e3e5e8;
  --ink:#121416; --ink-2:#5b6168; --muted:#7a8088;
  --border:rgba(12,14,18,.07); --border-2:rgba(12,14,18,.13);
  --accent:#ff7a1a; --accent-hover:#f06a0a; --accent-soft:#ffe9d9; --accent-ink:#b34a00; --on-accent:#121416;
  --ok:#0f9f68; --ok-soft:#ddf4ea; --ok-ink:#0c7a50;
  --warn:#c98a00; --warn-soft:#fbf0d2; --warn-ink:#916300;
  --danger:#dc3e44; --danger-soft:#fbe0e1; --danger-ink:#c4232a;
  --wait:#2a86d6; --wait-soft:#ddedfb; --wait-ink:#216bac;
  --inert:#858b93; --inert-soft:#eceef0; --inert-ink:#656b72;
  --sh-sm:0 0 0 1px rgba(12,14,18,.05),0 1px 2px -1px rgba(12,14,18,.06),0 2px 4px 0 rgba(12,14,18,.035);
  --sh-hover:0 0 0 1px rgba(12,14,18,.08),0 1px 2px -1px rgba(12,14,18,.08),0 4px 10px 0 rgba(12,14,18,.06);
  --sh-panel:0 0 0 1px rgba(12,14,18,.06),0 24px 60px -18px rgba(12,14,18,.28),0 2px 6px rgba(12,14,18,.05);
  --glass:rgba(243,244,245,.78);

  /* The console / studio is always dark: an instrument, not a page. */
  --c-bg:#0e0f12; --c-surface:#16171b; --c-well:#1c1d22; --c-tick:#2a2c31;
  --c-ink:#f1f2f3; --c-ink-2:#a2a7ad; --c-muted:#6f757c; --c-border:rgba(255,255,255,.08);
  --c-accent:#ff8a33;

  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1); --ease-icon:cubic-bezier(.2,0,0,1);
  --sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --nav-h:64px;
  --gut:24px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0b0c0e; --surface:#141518; --well:#1a1b1f; --tick:#26282d;
    --ink:#f1f2f3; --ink-2:#a2a7ad; --muted:#7c828a;
    --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.13);
    --accent:#ff8a33; --accent-hover:#ff9a4d; --accent-soft:#3a2412; --accent-ink:#ffb27a;
    --ok:#2fc58a; --ok-soft:#10301f; --ok-ink:#5fdcaa;
    --warn:#e7b53a; --warn-soft:#33290d; --warn-ink:#f0c766;
    --danger:#f0666b; --danger-soft:#3a1416; --danger-ink:#f58c90;
    --wait:#56a8f0; --wait-soft:#112a40; --wait-ink:#86c0f5;
    --inert:#8c929a; --inert-soft:#212328; --inert-ink:#a2a7ad;
    --sh-sm:0 0 0 1px rgba(255,255,255,.07); --sh-hover:0 0 0 1px rgba(255,255,255,.12);
    --sh-panel:0 0 0 1px rgba(255,255,255,.09),0 30px 70px -20px rgba(0,0,0,.8);
    --glass:rgba(11,12,14,.74);
    --c-bg:#111215; --c-surface:#18191d; --c-well:#1e1f24;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0c0e; --surface:#141518; --well:#1a1b1f; --tick:#26282d;
  --ink:#f1f2f3; --ink-2:#a2a7ad; --muted:#7c828a;
  --border:rgba(255,255,255,.07); --border-2:rgba(255,255,255,.13);
  --accent:#ff8a33; --accent-hover:#ff9a4d; --accent-soft:#3a2412; --accent-ink:#ffb27a;
  --ok:#2fc58a; --ok-soft:#10301f; --ok-ink:#5fdcaa;
  --warn:#e7b53a; --warn-soft:#33290d; --warn-ink:#f0c766;
  --danger:#f0666b; --danger-soft:#3a1416; --danger-ink:#f58c90;
  --wait:#56a8f0; --wait-soft:#112a40; --wait-ink:#86c0f5;
  --inert:#8c929a; --inert-soft:#212328; --inert-ink:#a2a7ad;
  --sh-sm:0 0 0 1px rgba(255,255,255,.07); --sh-hover:0 0 0 1px rgba(255,255,255,.12);
  --sh-panel:0 0 0 1px rgba(255,255,255,.09),0 30px 70px -20px rgba(0,0,0,.8);
  --glass:rgba(11,12,14,.74);
  --c-bg:#111215; --c-surface:#18191d; --c-well:#1e1f24;
}

/* ───────── base ───────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:500;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{display:block}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--muted)}
.nowrap{white-space:nowrap}
::selection{background:var(--accent-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gut)}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500}
.link{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* press: every clickable */
.press{transition:transform 160ms var(--ease-out),background-color 150ms ease,color 150ms ease,box-shadow 150ms ease}
.press:active{transform:scale(.96)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding-inline:16px;border-radius:12px;font-size:14.5px;font-weight:500;white-space:nowrap}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ease-out)}
.btn:hover svg{transform:translateX(2px)}
.btn-lg{height:48px;padding-inline:20px;font-size:15.5px;border-radius:14px}
.btn-accent{background:var(--accent);color:var(--on-accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:var(--surface);box-shadow:var(--sh-sm)}
.btn-ghost:hover{box-shadow:var(--sh-hover)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{background:color-mix(in oklab,var(--ink) 86%,var(--bg))}

/* chips */
.chip{display:inline-flex;align-items:center;gap:7px;height:26px;padding-inline:10px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;
  background:var(--c-soft);color:var(--c-ink);transition:background-color 300ms var(--ease-out),color 300ms var(--ease-out)}
.chip i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;transition:background-color 300ms var(--ease-out)}
.chip-ok{--c:var(--ok);--c-soft:var(--ok-soft);--c-ink:var(--ok-ink)}
.chip-wait{--c:var(--wait);--c-soft:var(--wait-soft);--c-ink:var(--wait-ink)}
.chip-warn{--c:var(--warn);--c-soft:var(--warn-soft);--c-ink:var(--warn-ink)}
.chip-danger{--c:var(--danger);--c-soft:var(--danger-soft);--c-ink:var(--danger-ink)}
.chip-inert{--c:var(--inert);--c-soft:var(--inert-soft);--c-ink:var(--inert-ink)}

/* live dot */
.live{position:relative;display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.live::after{content:"";position:absolute;inset:-3px;border-radius:inherit;background:inherit;opacity:.35;animation:ping 1.8s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.3);opacity:0}}

/* tick meter */
.meter{display:flex;gap:3px;height:22px}
.meter i{flex:1;min-width:1px;border-radius:2px;background:var(--tick);transform-origin:bottom;transition:background-color 260ms var(--ease-out),transform 420ms var(--ease-out)}
.meter i.on{background:var(--c,var(--accent))}

/* entrance */
.rise{animation:rise 700ms var(--ease-out) both;animation-delay:calc(var(--i,0)*70ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

.sample-tag{position:absolute;right:16px;bottom:-24px;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.sample-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ───────── nav ───────── */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);background:var(--glass);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--border)}
.nav-in{max-width:1240px;margin-inline:auto;padding-inline:var(--gut);height:var(--nav-h);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.tile{width:34px;height:34px;border-radius:10px;background:#121416;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tile svg{width:21px;height:21px;fill:none;stroke:#ff7a1a;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.brand-t{font-weight:500;font-size:16px;letter-spacing:-.015em}
.nav-links{display:flex;gap:2px;margin-left:12px}
.nav-links a{padding:7px 11px;border-radius:9px;font-size:14px;color:var(--ink-2);transition:color 150ms ease,background-color 150ms ease}
.nav-links a:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.nav-signin{font-size:14px;color:var(--ink-2);padding:8px 10px;border-radius:9px;transition:color 150ms ease,background-color 150ms ease}
.nav-signin:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
.nav.on-dark .nav-signin{color:#a2a7ad}
.icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--ink-2)}
.icon-btn:hover{color:var(--ink);background:color-mix(in oklab,var(--ink) 6%,transparent)}
.swap{position:relative;width:19px;height:19px}
.swap svg{position:absolute;inset:0;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity 300ms var(--ease-icon),transform 300ms var(--ease-icon),filter 300ms var(--ease-icon)}
.swap .moon{opacity:0;transform:scale(.25);filter:blur(4px)}
:root[data-mode="dark"] .swap .sun{opacity:0;transform:scale(.25);filter:blur(4px)}
:root[data-mode="dark"] .swap .moon{opacity:1;transform:none;filter:none}
.nav-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.nav-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}

/* channel rail */
.rail{position:fixed;left:max(10px,calc((100vw - 1240px)/2 - 44px));top:50%;z-index:40;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity 400ms var(--ease-out)}
.rail.show{opacity:1}
.rail-in{display:flex;flex-direction:column;gap:6px}
.rail span{font-family:var(--mono);font-size:10px;color:var(--muted);width:28px;height:20px;display:grid;place-items:center;border-radius:6px;transition:color 200ms ease,background-color 200ms ease}
.rail span.on{color:var(--on-accent);background:var(--accent)}
.rail span.done{color:var(--ink-2)}

/* ───────── hero ───────── */
.hero{padding-top:calc(var(--nav-h) + 56px);padding-bottom:40px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:48px;align-items:center}
.display{font-size:clamp(44px,5.5vw,78px);line-height:.98;letter-spacing:-.045em;margin-top:22px}
.display .dot{color:var(--accent)}
.lead{font-size:clamp(17px,1.5vw,19px);line-height:1.55;color:var(--ink-2);margin-top:24px;max-width:50ch}
.lead b{color:var(--ink);font-weight:500}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:13.5px;color:var(--ink-2)}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts i{width:14px;height:14px;border-radius:50%;background:var(--ok-soft);position:relative;flex:none}
.hero-facts i::after{content:"";position:absolute;left:4.5px;top:3px;width:3.5px;height:6px;border:solid var(--ok);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}

/* console */
.console{position:relative;background:var(--c-bg);color:var(--c-ink);border-radius:26px;box-shadow:var(--sh-panel),inset 0 0 0 1px rgba(255,255,255,.06);overflow:hidden}
.console-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;box-shadow:inset 0 -1px 0 var(--c-border);font-size:10.5px;letter-spacing:.09em;color:var(--c-muted)}
.console-sample{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.console-sample::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-accent)}
.console-body{padding:16px;display:grid;gap:12px}
.hc-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-border);transition:transform 500ms var(--ease-out),opacity 500ms var(--ease-out)}
.hc-row .hc-k{grid-row:1/3;font-size:10px;color:var(--c-muted);letter-spacing:.06em;padding-right:4px;border-right:1px solid var(--c-border);height:100%;display:flex;align-items:center}
.hc-name{font-weight:500;font-size:15px}
.hc-sub{grid-column:2;font-size:11px;color:var(--c-muted)}
.hc-state{grid-row:1/3;grid-column:3}
.console .chip-wait{--c-soft:#112a40;--c-ink:#86c0f5;--c:#56a8f0}
.console .chip-ok{--c-soft:#10301f;--c-ink:#5fdcaa;--c:#2fc58a}
.console .chip-inert{--c-soft:#212328;--c-ink:#a2a7ad;--c:#8c929a}
.hc-row.enter{animation:rowIn 620ms var(--ease-out) both}
@keyframes rowIn{from{opacity:0;transform:translateY(-14px) scale(.98);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.hc-strips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.strip{position:relative;display:grid;gap:3px;padding:10px 11px 12px;border-radius:12px;background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-border);font-size:13px;font-weight:500;transition:box-shadow 300ms var(--ease-out),background-color 300ms var(--ease-out)}
.strip-k{font-size:9.5px;color:var(--c-muted);letter-spacing:.08em;font-weight:400}
.strip-v{font-size:10px;color:var(--c-muted);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip .led{position:absolute;top:11px;right:11px;width:6px;height:6px;border-radius:50%;background:var(--c-tick);transition:background-color 250ms ease,box-shadow 250ms ease}
.strip.on{background:color-mix(in oklab,var(--c-accent) 9%,var(--c-surface));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-accent) 45%,transparent)}
.strip.on .led{background:var(--c-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--c-accent) 22%,transparent)}
.strip.done .led{background:#2fc58a}
.strip.done{background:var(--c-surface)}
.hc-scope{position:relative;height:104px;border-radius:14px;background:var(--c-well);box-shadow:inset 0 0 0 1px var(--c-border);overflow:hidden}
.hc-scope canvas,.cl-scope canvas{position:absolute;inset:0;width:100%;height:100%}
.hc-scope-lab{position:absolute;inset:10px 12px auto;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;color:var(--c-muted)}
.hc-tx{display:grid;gap:6px;font-size:13.5px;min-height:62px}
.hc-tx p{display:grid;grid-template-columns:52px 1fr;gap:8px}
.hc-tx p span:first-child{font-size:10px;letter-spacing:.08em;color:var(--c-muted);padding-top:3px}
.hc-tx p:last-child span:last-child{color:var(--c-ink-2)}
.hc-gate{display:grid;gap:10px;padding:12px 14px;border-radius:14px;background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-border)}
.hc-gate .meter{height:14px;--tick:var(--c-tick)}
.hc-gate-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.hc-slot{font-size:10.5px;letter-spacing:.06em;color:var(--c-muted)}
.hc-tap{display:inline-flex;align-items:center;height:30px;padding-inline:14px;border-radius:9px;background:#1f2a35;color:#86c0f5;font-size:13px;font-weight:500;transition:transform 160ms var(--ease-out),background-color 250ms ease,color 250ms ease}
.hc-tap.tap{transform:scale(.94)}
.hc-tap.done{background:#10301f;color:#5fdcaa}

/* signal path */
.path{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:56px;border-radius:22px;background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.path li{position:relative;padding:16px 16px 18px;display:grid;gap:3px;align-content:start;font-size:13px}
.path li+li{box-shadow:inset 1px 0 0 var(--border)}
.path b{font-weight:500;font-size:14px}
.path span{color:var(--muted);font-size:12.5px;line-height:1.4}
.path li::before{content:"";display:block;width:100%;height:3px;border-radius:2px;background:var(--tick);margin-bottom:10px}
.path li.on::before{background:var(--ok)}
.path li.on b{color:var(--ok-ink)}

/* ───────── chapters (scrollytelling) ───────── */
.ch{position:relative;padding-block:72px 40px}
.ch-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.ch-head{padding-top:4vh;margin-bottom:6vh}
.ch-head h2{font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.035em;margin-top:14px}
.ch-n{display:inline-grid;place-items:center;height:20px;padding-inline:6px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:10.5px;letter-spacing:.04em}
.step{min-height:56vh;display:flex;align-items:center;padding-block:4vh}
.step:last-child{min-height:72vh}
.step p{font-size:clamp(17px,1.45vw,19.5px);line-height:1.6;color:var(--ink-2);max-width:42ch;opacity:.32;transform:translateY(4px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out),color 420ms var(--ease-out)}
.step.is-on p{opacity:1;transform:none}
.step b{color:var(--ink);font-weight:500}
.step em{font-style:normal;color:var(--ink);background:color-mix(in oklab,var(--accent) 16%,transparent);border-radius:4px;padding:0 3px}
.ch-stage{position:sticky;top:calc(var(--nav-h) + 24px);height:calc(100vh - var(--nav-h) - 48px);height:calc(100svh - var(--nav-h) - 48px);display:flex;align-items:center;justify-content:center}
.stage{position:relative;width:100%;max-width:640px;background:var(--surface);border-radius:26px;box-shadow:var(--sh-panel);padding:22px;transform-origin:center center}

/* dark studio chapter */
.ch-dark{background:var(--c-bg);color:var(--c-ink);border-radius:36px;margin-inline:clamp(0px,1.4vw,18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.ch-dark .step p{color:var(--c-ink-2)}
.ch-dark .step b{color:var(--c-ink)}
.ch-dark .eyebrow{color:var(--c-muted)}
.ch-dark .stage{background:var(--c-surface);color:var(--c-ink);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -20px rgba(0,0,0,.7)}
.ch-dark .k,.ch-dark .dim{color:var(--c-muted)}
.ch-dark .sample-tag{color:var(--c-muted)}

/* 01 problem sheet */
.sheet-bar{display:flex;align-items:center;gap:12px;padding:0 4px 14px;font-size:11.5px;color:var(--muted)}
.sheet-bar .dots{display:flex;gap:5px}
.sheet-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--tick)}
.sheet-count{margin-left:auto}
.sheet-count b{color:var(--ink);font-weight:500}
.sheet{border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;font-size:13.5px}
.sr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;align-items:center;gap:10px;padding:0 14px;height:42px;box-shadow:inset 0 -1px 0 var(--border);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out),background-color 400ms ease,height 500ms var(--ease-out)}
.sr:last-child{box-shadow:none}
.sr.sh{height:34px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.sr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr .age{font-size:12px;color:var(--ink-2);transition:color 300ms ease}
.sr em{font-style:normal;display:inline-flex;align-items:center;height:22px;padding-inline:8px;border-radius:6px;font-size:12px;font-weight:500}
.tag-b{background:var(--wait-soft);color:var(--wait-ink)}
.tag-n{color:var(--muted)}
.tag-ok{background:var(--ok-soft);color:var(--ok-ink)}
.tag-warn{background:var(--warn-soft);color:var(--warn-ink)}
.tag-wait{background:var(--wait-soft);color:var(--wait-ink)}
.stage-sheet .sr.ghost{height:0;opacity:0;overflow:hidden}
.stage-sheet[data-at="1"] .sr.ghost,.stage-sheet[data-at="2"] .sr.ghost,.stage-sheet[data-at="3"] .sr.ghost{height:42px;opacity:1}
.stage-sheet[data-at="1"] .sr .age,.stage-sheet[data-at="2"] .sr .age,.stage-sheet[data-at="3"] .sr .age{color:var(--danger-ink)}
.stage-sheet .tag-b{transition:background-color 400ms ease,color 400ms ease,box-shadow 400ms ease}
.stage-sheet[data-at="2"] .tag-b{box-shadow:0 0 0 2px color-mix(in oklab,var(--warn) 55%,transparent)}
.stage-sheet[data-at="3"] .tag-b{background:var(--inert-soft);color:var(--muted);text-decoration:line-through}
.pb-day{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);display:grid;gap:10px;font-size:10.5px;letter-spacing:.06em;color:var(--muted);opacity:.35;transition:opacity 500ms var(--ease-out)}
.stage-sheet[data-at="3"] .pb-day{opacity:1}
.pb-cal{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pb-slot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;background:var(--surface);box-shadow:var(--sh-sm);font-family:var(--sans);font-size:13.5px;letter-spacing:0;color:var(--ink)}
.pb-slot em{font-style:normal;font-size:11px;color:var(--danger-ink);opacity:0;transform:translateX(-4px);transition:opacity 400ms var(--ease-out) 200ms,transform 400ms var(--ease-out) 200ms}
.stage-sheet[data-at="3"] .pb-slot em{opacity:1;transform:none}
.stage-sheet[data-at="3"] .pb-slot{background:color-mix(in oklab,var(--danger) 6%,var(--surface))}

/* 02 arrive */
.ar-row{display:grid;gap:12px;padding:16px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);animation:none}
.ar-src{font-size:10px;letter-spacing:.09em;color:var(--muted);display:flex;align-items:center;gap:8px}
.ar-src::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ok)}
.ar-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ar-fields>div{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--surface);box-shadow:var(--sh-sm);font-size:14px;min-width:0}
.ar-fields .k{font-size:9.5px}
.ph{position:relative;display:block;height:21px}
.ph s,.ph b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:500;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out),filter 420ms var(--ease-out)}
.ph s{color:var(--danger-ink);text-decoration-color:transparent;transition-property:opacity,transform,filter,text-decoration-color}
.ph b{opacity:0;transform:translateY(6px);filter:blur(3px);color:var(--ok-ink)}
.stage-arrive:not([data-at="0"]) .ph s{opacity:0;transform:translateY(-6px);filter:blur(3px)}
.stage-arrive:not([data-at="0"]) .ph b{opacity:1;transform:none;filter:none}
.stage-arrive[data-at="1"] .ar-phone{box-shadow:var(--sh-sm),0 0 0 2px color-mix(in oklab,var(--ok) 45%,transparent)}
.checks{display:grid;gap:6px;margin-top:14px}
.checks li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;height:40px;padding-inline:12px;border-radius:11px;font-size:14px;background:var(--well);color:var(--muted);transition:color 300ms ease,background-color 300ms ease,box-shadow 300ms ease}
.checks .r{font-size:11px;color:var(--muted)}
.ck{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--border-2);position:relative;transition:background-color 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.ck::after{content:"";position:absolute;left:6.4px;top:3.6px;width:4px;height:8px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg) scale(.4);opacity:0;transition:transform 300ms var(--ease-out),opacity 200ms ease}
.checks li.on{color:var(--ink);background:var(--surface);box-shadow:var(--sh-sm)}
.checks li.on .ck{background:var(--ok);box-shadow:none}
.checks li.on .ck::after{opacity:1;transform:rotate(45deg) scale(1)}
.checks li.warn.on .ck{background:var(--warn)}
.checks li.warn.on .ck::after{border:0;width:2px;height:8px;left:8px;top:3.5px;background:#fff;transform:none;border-radius:1px}
.checks li.warn.on{box-shadow:var(--sh-sm),inset 3px 0 0 var(--warn)}
.checks li.warn.on .r{color:var(--warn-ink)}
.ar-out{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:11.5px;opacity:.3;transition:opacity 400ms ease}
.stage-arrive[data-at="3"] .ar-out{opacity:1}

/* 03 call */
.cl-top{display:grid;grid-template-columns:auto 1fr;gap:12px}
.cl-window{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--c-well);box-shadow:inset 0 0 0 1px var(--c-border)}
.dial{width:66px;height:66px}
.dial-track{fill:none;stroke:var(--c-tick);stroke-width:7}
.dial-platform{fill:none;stroke:#3a3c42;stroke-width:7;stroke-linecap:round}
.dial-account{fill:none;stroke:var(--c-accent);stroke-width:7;stroke-linecap:round}
.dial-hand{stroke:var(--c-ink);stroke-width:2.4;stroke-linecap:round;transform-origin:60px 60px;transition:transform 900ms var(--ease-out)}
.dial-pin{fill:var(--c-ink)}
.cl-window-t{display:grid;gap:1px}
.cl-window-t span{font-size:9.5px;letter-spacing:.08em;color:var(--c-muted)}
.cl-window-t b{font-size:16px;font-weight:500}
.cl-queue{display:grid;gap:8px;align-content:center;padding:10px 14px;border-radius:14px;background:var(--c-well);box-shadow:inset 0 0 0 1px var(--c-border);font-size:10px;letter-spacing:.06em}
.q{display:flex;gap:4px;height:18px}
.q i{flex:1;border-radius:3px;background:var(--c-tick);transition:background-color 300ms ease,transform 300ms var(--ease-out)}
.q i.go{background:var(--c-accent)}
.q i.done{background:#3a3c42}
.cl-scope{position:relative;height:112px;margin-top:12px;border-radius:14px;background:var(--c-well);box-shadow:inset 0 0 0 1px var(--c-border);overflow:hidden;opacity:.4;transition:opacity 500ms ease}
.stage-call:not([data-at="0"]) .cl-scope{opacity:1}
.cl-scope-lab{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.08em;color:var(--c-muted)}
.cl-scope-lab .dim{margin-left:auto}
.cl-tx{display:grid;gap:8px;margin-top:12px;font-size:14px;min-height:150px}
.cl-tx p{display:grid;grid-template-columns:52px 1fr;gap:10px;opacity:0;transform:translateY(6px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.cl-tx p span:first-child{font-size:10px;letter-spacing:.08em;color:var(--c-muted);padding-top:3px}
.cl-tx p.ld span:last-child{color:var(--c-ink-2)}
.cl-tx p.on{opacity:1;transform:none}
.cl-fields{display:grid;grid-template-columns:.85fr .7fr .9fr 1.55fr;gap:8px;margin-top:12px}
.cl-fields>div{display:grid;gap:3px;padding:10px 11px;border-radius:12px;background:var(--c-well);box-shadow:inset 0 0 0 1px var(--c-border);font-size:13px;min-width:0;opacity:.35;transition:opacity 400ms ease,box-shadow 400ms ease,background-color 400ms ease}
.cl-fields .k{font-size:9px}
.cl-fields b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-fields>div.on{opacity:1;background:color-mix(in oklab,var(--c-accent) 8%,var(--c-well));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c-accent) 40%,transparent)}

/* 04 two questions */
.tw-lanes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tw-lane{display:grid;gap:10px;align-content:start}
.tw-lane .k{font-size:9.5px;line-height:1.4}
.tw-list{display:grid;gap:5px}
.tw-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:6px 11px;border-radius:10px;background:var(--well);font-size:13px;transition:background-color 300ms ease,box-shadow 300ms ease,opacity 300ms ease}
.tw-list li em{font-style:normal;font-size:10.5px;color:var(--muted);white-space:nowrap}
.tw-list li em.free{color:var(--ok-ink)}
.tw-list .chip{height:22px;font-size:11px;padding-inline:8px}
.tw-out li{flex-wrap:wrap}
.stage-two[data-at="0"] .tw-list li{opacity:.55}
.stage-two[data-at="0"] .tw-list li.hit{opacity:1;background:var(--surface);box-shadow:var(--sh-sm),0 0 0 1.5px var(--accent)}
.stage-two[data-at="1"] [data-r="0"],.stage-two[data-at="1"] [data-r="1"]{background:var(--ok-soft)}
.stage-two[data-at="1"] [data-r="0"] em,.stage-two[data-at="1"] [data-r="1"] em{font-weight:500}
.stage-two[data-at="2"] [data-r="5"]{background:var(--warn-soft);box-shadow:inset 3px 0 0 var(--warn)}
.stage-two[data-at="2"] [data-r="5"] em{color:var(--warn-ink);font-weight:500}
.tw-rates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;padding:14px;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);opacity:.4;transition:opacity 400ms ease,box-shadow 400ms ease}
.stage-two[data-at="3"] .tw-rates{opacity:1;box-shadow:inset 0 0 0 1px var(--border),0 0 0 1.5px var(--accent)}
.tw-rate{display:grid;gap:8px}
.tw-rate-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px}
.tw-rate-h b{font-weight:500}
.tw-rate-h span{font-size:10.5px}
.tw-rate .meter{height:26px}
.tw-note{grid-column:1/-1;font-size:10px;letter-spacing:.04em}

/* 05 gate */
.ch-gate{background:linear-gradient(180deg,transparent,color-mix(in oklab,var(--ok) 5%,transparent) 50%,transparent)}
.stage-gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:18px;align-items:center;padding:20px}
.phone{border-radius:30px;padding:10px;background:#121416;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 50px -20px rgba(0,0,0,.5)}
.ph-top{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;color:#f1f2f3}
.ph-top b{display:block;font-size:13.5px;font-weight:500}
.ph-top div span{display:block;font-size:11px;color:#8b9097}
.ph-av{width:32px;height:32px;border-radius:50%;background:#23262b;display:grid;place-items:center;font-size:11px;font-weight:600;color:#ffb27a;flex:none}
.ph-chat{border-radius:22px;padding:12px 10px;background:#e9e4dc;display:flex;flex-direction:column;gap:7px;min-height:420px}
:root[data-mode="dark"] .ph-chat{background:#1b1d1f}
.bub{position:relative;max-width:88%;padding:8px 10px 6px;border-radius:12px 12px 12px 3px;background:#fff;color:#121416;font-size:13px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom left;transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
:root[data-mode="dark"] .bub{background:#23262b;color:#eceef0}
.bub small{display:block;text-align:right;font-size:9.5px;color:#8b9097;margin-top:2px}
.bub.out{align-self:flex-end;border-radius:12px 12px 3px 12px;background:#d7f5c9;transform-origin:bottom right}
:root[data-mode="dark"] .bub.out{background:#124232}
.bub.rem .rem-k{display:block;font-size:9px;letter-spacing:.08em;color:#b34a00;margin-bottom:2px}
:root[data-mode="dark"] .bub.rem .rem-k{color:#ffb27a}
.bub-acts{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
.act{display:grid;place-items:center;height:32px;border-radius:8px;background:#f4f6f8;color:#216bac;font-weight:500;font-size:13px;transition:transform 180ms var(--ease-out),background-color 250ms ease,color 250ms ease}
:root[data-mode="dark"] .act{background:#2c3036;color:#86c0f5}
.act-confirm.tapped{transform:scale(.94);background:#d4e7f8}
.bub-acts.used .act{opacity:.45}
.stage-gate .bub[data-b="0"]{opacity:1;transform:none}
.stage-gate:not([data-at="0"]) .bub[data-b="1"],.stage-gate:not([data-at="0"]) .bub[data-b="2"]{opacity:1;transform:none}
.stage-gate[data-at="2"] .bub.rem,.stage-gate[data-at="3"] .bub.rem{opacity:1;transform:none}
.stage-gate .bub[data-b="2"]{transition-delay:250ms}
.stage-gate .bub[data-b="4"]{transition-delay:200ms}
.gt-status{display:grid;gap:12px;align-content:center}
.gt-state{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.gt-state .chip{height:32px;font-size:14px;padding-inline:13px}
.gt-state .mono{font-size:12px}
.gt-status .meter{height:26px}
.gt-log{display:grid;gap:3px;font-size:11.5px}
.gt-log li{display:grid;grid-template-columns:40px 1fr;gap:8px;padding:6px 8px;border-radius:8px;color:var(--muted);transition:color 300ms ease,background-color 300ms ease}
.gt-log li span{color:var(--muted)}
.gt-log li.on{color:var(--ink);background:var(--well)}
.gt-log li.stop.on{color:var(--danger-ink);background:var(--danger-soft)}

/* 06 again */
.stage-again .k{display:block;margin-bottom:18px}
.ladder{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding-top:4px}
.ld-track{position:absolute;left:calc(100%/12);right:calc(100%/12);top:24px;height:3px;border-radius:2px;background:var(--tick);overflow:hidden}
.ld-track i{display:block;height:100%;width:100%;background:var(--wait);transform-origin:left;transform:scaleX(0)}
.ld-node{position:relative;display:grid;justify-items:center;gap:10px;text-align:center}
.ld-node b{order:-1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:500;background:var(--surface);box-shadow:var(--sh-sm),inset 0 0 0 1.5px var(--border-2);transition:background-color 300ms ease,color 300ms ease,box-shadow 300ms ease,transform 400ms var(--ease-out)}
.ld-node span{font-size:11px;color:var(--muted)}
.ld-node.on b{background:var(--wait);color:#fff;box-shadow:0 0 0 4px var(--wait-soft);transform:scale(1.04)}
.ld-node.night b{box-shadow:var(--sh-sm),inset 0 0 0 1.5px var(--border-2),0 0 0 0 transparent}
.ld-night{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-top:22px;font-size:11px;color:var(--muted);opacity:.3;transition:opacity 400ms ease}
.stage-again[data-at="1"] .ld-night,.stage-again[data-at="2"] .ld-night,.stage-again[data-at="3"] .ld-night{opacity:1}
.ld-night-bar{position:relative;height:28px;border-radius:8px;background:repeating-linear-gradient(135deg,color-mix(in oklab,var(--ink) 9%,transparent) 0 1px,transparent 1px 6px),var(--well);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden}
.ld-night-bar i{position:absolute;right:0;top:0;bottom:0;width:22%;background:color-mix(in oklab,var(--wait) 20%,var(--surface));box-shadow:inset 2px 0 0 var(--wait)}
.ld-night-bar em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:10.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.ld-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:18px}
.ldb{display:grid;gap:3px;padding:12px;border-radius:12px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);font-size:13px;opacity:.35;transform:translateY(4px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out),box-shadow 400ms ease}
.ldb .k{font-size:9px;margin:0;line-height:1.35}
.ldb b{font-weight:500;font-size:14.5px}
.ldb .dim{font-size:12px}
.ldb.on{opacity:1;transform:none;background:var(--surface);box-shadow:var(--sh-sm),inset 0 3px 0 var(--wait)}
.ldb.warn.on{box-shadow:var(--sh-sm),inset 0 3px 0 var(--warn)}
.ldb.ok.on{box-shadow:var(--sh-sm),inset 0 3px 0 var(--ok)}
.ldb.danger.on{box-shadow:var(--sh-sm),inset 0 3px 0 var(--danger)}

/* 07 human */
.hu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.hu-head b{font-weight:500;font-size:16px}
.hu-list{display:grid;gap:6px}
.hu-list li{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--surface);box-shadow:var(--sh-sm);font-size:13px;overflow:hidden;
  transition:opacity 450ms var(--ease-out),transform 450ms var(--ease-out),max-height 450ms var(--ease-out),padding 450ms var(--ease-out),margin 450ms var(--ease-out),box-shadow 300ms ease;max-height:90px}
.hu-list li b{font-weight:500;font-size:13.5px}
.hu-list li p{color:var(--ink-2);margin-top:1px;line-height:1.4}
.hu-av{width:34px;height:34px;border-radius:50%;background:var(--well);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ink-2)}
.hu-act{font-size:11px;padding:6px 9px;border-radius:8px;background:var(--warn-soft);color:var(--warn-ink);white-space:nowrap}
.hu-tag{font-size:10px;color:var(--muted);white-space:nowrap}
.hu-auto{background:var(--well)!important;box-shadow:inset 0 0 0 1px var(--border)!important}
.hu-auto p{text-decoration:line-through;text-decoration-color:transparent;transition:text-decoration-color 300ms ease}
.stage-human[data-at="1"] .hu-auto p,.stage-human[data-at="2"] .hu-auto p{text-decoration-color:var(--muted)}
.stage-human[data-at="2"] .hu-auto{opacity:0;transform:translateX(24px);max-height:0;padding-block:0;margin-top:-6px}
.hu-noout{display:grid;gap:8px;margin-top:12px;padding:12px;border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);font-size:11px;opacity:.35;transition:opacity 400ms ease,box-shadow 400ms ease}
.stage-human[data-at="2"] .hu-noout{opacity:1;box-shadow:inset 0 0 0 1px var(--border),0 0 0 1.5px var(--ok)}
.hu-pills{display:flex;gap:6px;flex-wrap:wrap}
.hu-pills span{font-size:13px;padding:5px 10px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-sm)}

/* 08 sheet written back */
.sheet-wide .sr{grid-template-columns:.9fr 1.05fr .75fr 1.6fr 34px}
.sheet-wide .sr .sum{color:var(--ink-2);font-size:12.5px}
.sheet-wide .rec{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface);box-shadow:var(--sh-sm);font-size:9px;color:var(--accent-ink)}
.sheet-wide .rec.dim{background:none;box-shadow:none;color:var(--muted)}
.stage-sheet2 .sr[data-w] > span:not(:first-child){opacity:0;transform:translateX(-6px);transition:opacity 400ms var(--ease-out),transform 400ms var(--ease-out)}
.stage-sheet2 .sr[data-w].on > span{opacity:1;transform:none}
.stage-sheet2 .sr[data-w].on > span:nth-child(3){transition-delay:60ms}
.stage-sheet2 .sr[data-w].on > span:nth-child(4){transition-delay:120ms}
.stage-sheet2 .sr[data-w].on > span:nth-child(5){transition-delay:180ms}
.nb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.nb div{padding:10px 12px;border-radius:11px;background:var(--well);font-size:12.5px;color:var(--ink-2);opacity:.35;transition:opacity 400ms ease}
.nb s{text-decoration-color:transparent;transition:text-decoration-color 400ms ease}
.stage-sheet2[data-at="1"] .nb div,.stage-sheet2[data-at="2"] .nb div{opacity:1}
.stage-sheet2[data-at="1"] .nb s,.stage-sheet2[data-at="2"] .nb s{text-decoration-color:var(--danger)}
.tl{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);opacity:.35;transition:opacity 400ms ease}
.stage-sheet2[data-at="2"] .tl{opacity:1}
.tl ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.tl li{display:grid;gap:2px;font-size:12px;position:relative;padding-top:14px}
.tl li i{position:absolute;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--c)}
.tl li i::after{content:"";position:absolute;left:12px;right:-100px;top:3.5px;height:1px;background:var(--border-2)}
.tl li:last-child i::after{display:none}
.tl li .mono{font-size:10.5px;color:var(--muted)}
.tl ol{overflow:hidden}

/* ───────── generic sections ───────── */
.sec{padding-block:120px 40px}
.sec-h{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:40px}
.sec-h h2{font-size:clamp(32px,4vw,54px);line-height:1.02;letter-spacing:-.04em;margin-top:14px}
.sec-h h2 .dim{color:var(--muted)}
.sec-h>p{font-size:17px;color:var(--ink-2);max-width:54ch}
.card{background:var(--surface);border-radius:22px;box-shadow:var(--sh-sm)}

/* packs */
.swap-h .noun{display:inline-block;color:var(--accent-ink);position:relative}
.swap-h .noun.out{animation:nounOut 260ms var(--ease-out) both}
.swap-h .noun.in{animation:nounIn 420ms var(--ease-out) both}
@keyframes nounOut{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
@keyframes nounIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pack{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:22px;background:var(--surface);box-shadow:var(--sh-sm);transition:box-shadow 200ms ease,transform 300ms var(--ease-out)}
.pack:hover{box-shadow:var(--sh-hover);transform:translateY(-2px)}
.pack.lit{box-shadow:var(--sh-hover),0 0 0 1.5px var(--accent)}
.pack-h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.pack-h .chip{height:22px;font-size:11px}
.pack h3{font-size:21px;letter-spacing:-.02em}
.pack p{font-size:14px;color:var(--ink-2);flex:1}
.pack q{quotes:none;margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--well);font-size:12.5px;color:var(--ink-2)}
.packs-foot{margin-top:22px;color:var(--ink-2)}

/* pricing */
.price-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px}
.price-gauge{padding:22px;display:flex;flex-direction:column}
.card-h{display:flex;justify-content:space-between;gap:12px;font-size:10.5px}
.card-h .dim{font-size:10.5px}
.gauge{width:100%;max-width:420px;margin:18px auto 0}
.gauge text{font-family:var(--mono)}
.gauge-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:auto;padding-top:14px}
.price-facts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price-facts li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:22px;align-content:start}
.pf-i{width:10px;height:10px;border-radius:3px;background:var(--c);margin-top:7px}
.price-facts b{font-weight:500;font-size:16.5px;letter-spacing:-.01em;line-height:1.3;display:block}
.price-facts p{font-size:14px;color:var(--ink-2);margin-top:6px}
.price-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px;font-size:14px}

/* rules */
.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:22px;background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.rule{padding:26px 24px;display:grid;gap:6px;align-content:start;box-shadow:inset -1px 0 0 var(--border),inset 0 -1px 0 var(--border)}
.rule-n{font-size:11px;color:var(--accent-ink);margin-bottom:8px}
.rule b{font-weight:500;font-size:17px;letter-spacing:-.01em;line-height:1.3}
.rule p{font-size:14px;color:var(--ink-2)}
.rules-foot{margin-top:16px;font-size:12px;max-width:90ch}

/* candour */
.candour{position:relative;padding:clamp(28px,5vw,64px);border-radius:32px;background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.candour h2{font-size:clamp(34px,5vw,68px);line-height:1;letter-spacing:-.045em;margin-top:16px;max-width:16ch}
.candour-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;max-width:980px}
.candour-grid p{font-size:17px;color:var(--ink-2)}
.candour-strike{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.candour-strike span{font-size:14px;padding:7px 12px;border-radius:10px;background:var(--well);color:var(--muted);position:relative}
.candour-strike span::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:var(--danger);transform:scaleX(var(--s,0));transform-origin:left;transition:transform 600ms var(--ease-out);transition-delay:calc(var(--k,0)*90ms)}
.candour.struck .candour-strike span{--s:1}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:start}
.faq-side{position:sticky;top:calc(var(--nav-h) + 32px)}
.faq-side h2{font-size:clamp(32px,4vw,54px);letter-spacing:-.04em;margin-block:14px 12px}
.faq{border-radius:22px;background:var(--surface);box-shadow:var(--sh-sm);overflow:hidden}
.faq details{box-shadow:inset 0 -1px 0 var(--border)}
.faq details:last-child{box-shadow:none}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-size:16.5px;font-weight:500;letter-spacing:-.01em;transition:background-color 150ms ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:color-mix(in oklab,var(--ink) 3%,transparent)}
.faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:7px;background:var(--well) no-repeat center/12px 12px;
  background-image:linear-gradient(var(--ink-2),var(--ink-2)),linear-gradient(var(--ink-2),var(--ink-2));background-size:10px 1.5px,1.5px 10px;transition:transform 300ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{overflow:hidden}
.faq-a p{padding:0 22px 20px;color:var(--ink-2);max-width:68ch}
.faq-a b{color:var(--ink);font-weight:500}
.faq-a em{font-style:normal;color:var(--ink)}

/* talk */
.sec-talk{padding-bottom:96px}
.talk{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);padding:clamp(22px,4vw,48px);border-radius:32px;background:var(--c-bg);color:var(--c-ink);box-shadow:var(--sh-panel),inset 0 0 0 1px rgba(255,255,255,.06)}
.talk-l h2{font-size:clamp(30px,3.6vw,48px);line-height:1.04;letter-spacing:-.04em;margin-top:14px}
.eyebrow.on-dark{color:var(--c-muted)}
.next{display:grid;gap:4px;margin-top:32px}
.next li{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px 0;box-shadow:inset 0 1px 0 var(--c-border)}
.next .mono{font-size:11px;color:var(--c-accent);padding-top:3px}
.next b{font-weight:500;font-size:16px}
.next p{color:var(--c-ink-2);font-size:14px;margin-top:3px}
.talk-note{font-size:11px;color:var(--c-muted);margin-top:18px}

.form{position:relative;background:var(--surface);color:var(--ink);border-radius:24px;padding:22px;display:grid;gap:16px;align-content:start}
.form-h{display:flex;justify-content:space-between;align-items:center}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f{display:grid;gap:6px;min-width:0;border:0;margin:0;padding:0}
.f>span,.f legend{font-size:13px;font-weight:500;color:var(--ink);padding:0}
.f .opt{font-style:normal;font-weight:400;color:var(--muted);font-size:12px;margin-left:4px}
.f input,.f textarea{width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--well);border:0;border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--border);transition:box-shadow 150ms ease,background-color 150ms ease;resize:vertical}
.f textarea{min-height:88px}
.f input::placeholder,.f textarea::placeholder{color:color-mix(in oklab,var(--muted) 80%,transparent)}
.f input:hover,.f textarea:hover{box-shadow:inset 0 0 0 1px var(--border-2)}
.f input:focus,.f textarea:focus{outline:none;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px color-mix(in oklab,var(--accent) 16%,transparent)}
.f.bad input,.f.bad textarea{box-shadow:inset 0 0 0 1.5px var(--danger)}
.err{font-style:normal;font-size:12px;color:var(--danger-ink);min-height:0}
.err:empty{display:none}
.seg-f legend{margin-bottom:8px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;height:36px;padding-inline:13px;border-radius:10px;background:var(--well);box-shadow:inset 0 0 0 1px var(--border);font-size:13.5px;color:var(--ink-2);cursor:pointer;transition:background-color 150ms ease,color 150ms ease,box-shadow 150ms ease,transform 160ms var(--ease-out)}
.seg label:hover span{color:var(--ink);box-shadow:inset 0 0 0 1px var(--border-2)}
.seg label:active span{transform:scale(.96)}
.seg input:checked+span{background:var(--ink);color:var(--bg);box-shadow:none}
.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.seg-sm span{height:34px;font-size:13px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;font-size:13.5px;color:var(--ink-2);cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:1px 0 0;border-radius:6px;background:var(--well);box-shadow:inset 0 0 0 1.5px var(--border-2);display:grid;place-items:center;cursor:pointer;transition:background-color 150ms ease}
.consent input::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px) scale(.4);opacity:0;transition:transform 200ms var(--ease-out),opacity 150ms ease}
.consent input:checked{background:var(--ok);box-shadow:none}
.consent input:checked::after{opacity:1;transform:rotate(45deg) translate(-1px,-1px) scale(1)}
.form-go{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-msg{font-size:13.5px;color:var(--danger-ink)}
#submitBtn{position:relative;min-width:170px}
#submitBtn .spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in oklab,var(--on-accent) 30%,transparent);border-top-color:var(--on-accent);animation:spin 700ms linear infinite}
#submitBtn.busy .lbl{opacity:.6}
#submitBtn.busy .spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.form-done{position:absolute;inset:0;border-radius:24px;background:var(--surface);padding:28px;display:grid;align-content:center;gap:14px;animation:rise 600ms var(--ease-out) both}
.form-done[hidden]{display:none}
.fd-row{display:flex;justify-content:space-between;align-items:center}
.form-done h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.05}
.form-done p{color:var(--ink-2);max-width:44ch}
.form-done .meter{height:26px}
.fd-ref{font-size:11.5px}

/* footer */
.foot{padding-block:56px 40px;box-shadow:inset 0 1px 0 var(--border)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-desc{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap}
.foot-cols div{display:grid;gap:9px;align-content:start;font-size:14px}
.foot-cols a{color:var(--ink-2);transition:color 150ms ease}
.foot-cols a:hover{color:var(--ink)}
.foot-cols .k{margin-bottom:4px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:20px;box-shadow:inset 0 1px 0 var(--border);font-size:12.5px;color:var(--muted)}
.foot-base .mono{font-size:11px}

/* ───────── theme transition ───────── */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-fade::view-transition-old(root){animation:vtFade 420ms var(--ease-out) both}
:root.vt-fade::view-transition-new(root){animation:none}
@keyframes vtFade{to{opacity:0}}
.no-transition *,.no-transition *::before,.no-transition *::after{transition:none!important}

/* ───────── responsive ───────── */
@media (max-width:1100px){
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .console{max-width:640px}
  .path{grid-template-columns:repeat(4,minmax(0,1fr))}
  .path li:nth-child(5){box-shadow:inset 0 1px 0 var(--border)}
  .path li:nth-child(n+5){box-shadow:inset 1px 0 0 var(--border),inset 0 1px 0 var(--border)}
  .path li:nth-child(5){box-shadow:inset 0 1px 0 var(--border)}
  .ch-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px}
  .rail{display:none}
  .packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-grid,.talk{grid-template-columns:1fr}
}
@media (max-width:860px){
  :root{--gut:16px;--nav-h:58px}
  .hero{padding-top:calc(var(--nav-h) + 36px)}
  .display{font-size:clamp(42px,12vw,64px)}
  .path{grid-template-columns:1fr 1fr;margin-top:36px}
  .path li{box-shadow:inset 0 -1px 0 var(--border)!important}
  .path li:nth-child(odd){box-shadow:inset 0 -1px 0 var(--border),inset -1px 0 0 var(--border)!important}
  .path li:last-child{grid-column:1/-1}

  /* scrollytelling: graphic pinned on top, cards scroll over the lower part */
  .ch{padding-block:48px 24px}
  .ch-grid{display:block}
  .ch-head{padding-top:0;margin-bottom:20px}
  .ch-stage{position:sticky;top:calc(var(--nav-h) + 10px);height:auto;z-index:3;margin-bottom:0;display:block}
  /* cards slide under the pinned stage; this masks the strip above it */
  /* Masks only the strip between the nav and the pinned stage (and the stage's
     own sides). It must not reach further up, or it paints over the chapter heading. */
  .ch-stage::before{content:"";position:absolute;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));top:-12px;height:calc(12px + 40%);background:var(--bg);z-index:-1}
  .ch-dark .ch-stage::before{background:var(--c-bg)}
  .stage{max-width:none;padding:14px;border-radius:20px}
  .ch-text{display:contents}
  .ch-head{position:relative;z-index:2}
  .ch-grid>.ch-text>.step{position:relative;z-index:1}
  .ch .wrap.ch-grid{display:flex;flex-direction:column;align-items:stretch}
  .ch-head{order:0}
  .ch-stage{order:1}
  .step{order:2;min-height:auto;padding-block:0;margin-top:34vh;display:block}
  .step:first-of-type{margin-top:6vh}
  .step:last-child{min-height:auto;margin-bottom:20vh}
  .step p,.step.is-on p{opacity:var(--fade,1);transform:none;max-width:none;font-size:16px;transition:none;padding:16px 18px;border-radius:18px;background:var(--surface);box-shadow:var(--sh-panel)}
  .ch-dark .step p{background:#202126;color:var(--c-ink-2)}
  .ch-dark{margin-inline:0;border-radius:28px}

  .sec{padding-block:80px 24px}
  .sec-h{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .packs,.price-facts,.rules,.candour-grid,.faq-grid,.fgrid{grid-template-columns:1fr}
  .faq-side{position:static}
  .faq-grid{gap:20px}
  .rule{box-shadow:inset 0 -1px 0 var(--border)}
  .form{padding:18px}
  .talk{border-radius:28px;padding:18px}
}
@media (max-width:560px){
  .nav-cta{height:36px;padding-inline:12px;font-size:13.5px}
  .nav-signin{padding:8px 6px;font-size:13.5px}
  .hero-cta .btn{flex:1 1 100%}
  .console-body{padding:12px;gap:10px}
  .hc-strips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-scope{height:80px}
  .hc-row{padding:10px 12px}
  .hc-row .hc-k{display:none}
  .hc-row{grid-template-columns:1fr auto}
  .hc-sub{grid-column:1}
  .hc-state{grid-column:2}
  /* mobile stage trims: keep the one thing each chapter is about */
  .pb-day{display:none}
  .stage-sheet[data-at="3"] .pb-day{display:grid}
  .stage-sheet[data-at="3"] .sheet .sr:nth-child(n+5){display:none}
  .sr{height:36px;font-size:12.5px;padding:0 10px;gap:6px}
  .sr.sh{height:28px;font-size:9px}
  .sr .age{font-size:11px}
  .stage-sheet[data-at="1"] .sr.ghost,.stage-sheet[data-at="2"] .sr.ghost,.stage-sheet[data-at="3"] .sr.ghost{height:36px}
  .sheet-bar{padding-bottom:10px}
  .ar-fields{grid-template-columns:1fr 1fr}
  .ar-fields>div{padding:8px 10px;font-size:13px}
  .ar-row{padding:12px;gap:8px}
  .checks li{height:34px;font-size:13px}
  .checks .r{display:none}
  .ar-out .dim{display:none}
  .cl-top{grid-template-columns:1fr}
  .cl-queue{display:none}
  .dial{width:52px;height:52px}
  .cl-scope{height:72px}
  .cl-tx{min-height:118px;font-size:13px}
  .cl-tx p{grid-template-columns:46px 1fr}
  .cl-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl-fields>div[data-f="3"]{display:none}
  .stage-call[data-at="3"] .cl-fields{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
  .stage-call[data-at="3"] .cl-fields>div[data-f="3"]{display:grid}
  .stage-call[data-at="3"] .cl-fields>div[data-f="0"],.stage-call[data-at="3"] .cl-fields>div[data-f="1"]{display:none}
  .stage-call[data-at="2"] .cl-tx [data-l="0"],.stage-call[data-at="2"] .cl-tx [data-l="1"],
  .stage-call[data-at="3"] .cl-tx [data-l="0"],.stage-call[data-at="3"] .cl-tx [data-l="1"]{display:none}
  .cl-tx{min-height:96px}
  .cl-window{padding:8px 12px 8px 8px}
  .console-top>.mono{display:none}
  .pb-slot{flex-direction:column;align-items:flex-start;gap:2px}
  .ph-chat{height:auto;min-height:0}
  .stage-gate[data-at="0"] .bub:not([data-b="0"]),.stage-gate[data-at="1"] .bub.rem,
  .stage-gate[data-at="2"] .bub[data-b="0"],.stage-gate[data-at="3"] .bub[data-b="0"],
  .stage-gate[data-at="2"] .bub[data-b="1"],.stage-gate[data-at="3"] .bub[data-b="1"]{display:none}
  .tw-lanes{grid-template-columns:1fr}
  .stage-two[data-at="3"] .tw-lanes,.stage-two:not([data-at="3"]) .tw-rates{display:none}
  .stage-two .tw-lane:nth-child(2){display:none}
  .stage-two[data-at="0"] .tw-lane:nth-child(2){display:grid}
  .stage-two[data-at="0"] .tw-lane:first-child{display:none}
  .tw-rates{margin-top:0;grid-template-columns:1fr}
  .stage-gate{grid-template-columns:1fr;gap:10px;padding:12px}
  .phone{border-radius:24px;padding:8px}
  .ph-top{padding:6px 8px 8px}
  .gt-log{display:none}
  .gt-state{flex-direction:row;align-items:center;justify-content:space-between}
  .gt-status .meter{height:16px}
  .ladder{gap:2px}
  .ld-node b{width:34px;height:34px;font-size:12px}
  .ld-track{top:17px}
  .ld-node span{font-size:9.5px}
  .ld-branches{grid-template-columns:1fr 1fr}
  .ld-night{font-size:10px}
  .hu-list li{grid-template-columns:28px 1fr;padding:8px 10px}
  .hu-av{width:28px;height:28px;font-size:10px}
  .hu-act,.hu-tag{display:none}
  .hu-list li p{font-size:12px}
  .sheet-wide .sr{grid-template-columns:.9fr 1.2fr .8fr}
  .sheet-wide .sr>span:nth-child(4),.sheet-wide .sr>span:nth-child(5){display:none}
  .nb{grid-template-columns:1fr 1fr}
  .tl{display:none}
  .stage-sheet2 .sheet-count{display:none}
  .ld-night-bar em{font-size:9px}
  .stage-sheet2[data-at="2"] .tl{display:block}
  .stage-sheet2[data-at="2"] .nb{display:none}
  .tl ol{grid-template-columns:1fr 1fr}
  .tl li i::after{display:none}
  .price-facts li{padding:18px}
  .foot-cols{gap:32px}
}

/* reduced motion: final states, no travel */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .step p{opacity:1;transform:none}
}

/* nav over the dark studio */
.nav{transition:background-color 300ms ease,box-shadow 300ms ease,color 300ms ease}
.nav.on-dark{background:rgba(14,15,18,.72);box-shadow:0 1px 0 rgba(255,255,255,.06);color:#f1f2f3}
.nav.on-dark .nav-links a,.nav.on-dark .icon-btn{color:#a2a7ad}
.nav.on-dark .nav-links a:hover,.nav.on-dark .icon-btn:hover{color:#f1f2f3;background:rgba(255,255,255,.07)}

/* ───────── texture ─────────
   Studio grain: a still noise tile stepped through a few offsets, plus a soft
   edge falloff, so the dark chapters read as a physical room, not flat #0E0F12.
   Pure CSS; no GPU library. */
.ch-dark,.talk{position:relative;isolation:isolate}
.ch-dark::before,.talk::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.42) 100%)}
.ch-dark::after,.talk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}17%{background-position:-43px 61px}33%{background-position:71px -29px}50%{background-position:-88px -97px}67%{background-position:23px 112px}83%{background-position:104px 38px}100%{background-position:0 0}}

/* Signal desk: a faint LED field behind the hero that ripples under the cursor.
   Desktop + fine pointer only; app.js leaves it unpainted everywhere else. */
.hero{position:relative}
.hero>.wrap{position:relative;z-index:1}
.hero-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 900ms var(--ease-out);
  -webkit-mask-image:radial-gradient(75% 70% at 50% 42%,#000 35%,transparent 100%);mask-image:radial-gradient(75% 70% at 50% 42%,#000 35%,transparent 100%)}
.hero-field.on{opacity:1}
@media (prefers-reduced-motion:reduce){.ch-dark::after,.talk::after{animation:none}}