/* story.css — the shared Homepage Story look (#4300): the prototype's story.css plus the home page's newer
   portal rules, and the chrome every page adds (skip link, mobile menu, form states, footer). Every page loads
   fonts.css → story.css → pages/<page>.css. Do not remove prototype rules; extend them at the end. */
/* Single dark world on purpose. Site chrome uses the live site's tokens; the app windows use VERA's Veronica Glass tokens,
   so they read as our real product. */
:root{
  --bg:oklch(0.13 0.012 250); --bg-2:oklch(0.16 0.014 250);
  --line:oklch(0.32 0.018 250 / .7); --line-dim:oklch(0.32 0.018 250 / .35);
  --fg:oklch(0.97 0.005 250); --fg-2:oklch(0.78 0.010 250); --fg-3:oklch(0.70 0.012 250);
  --accent:oklch(0.72 0.20 252); --accent-hi:oklch(0.80 0.22 252);
  --warm:oklch(0.72 0.19 35); --good:oklch(0.78 0.16 165);
  --serif:'Source Serif 4','Source Serif 4 fallback','Source Serif Pro',Georgia,serif; --sans:'IBM Plex Sans','IBM Plex Sans fallback',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  /* VERA app (Veronica Glass) */
  --v-bg:#0d0d1a; --v-card:#121828; --v-card2:#1a2338; --v-recess:#0e1422; --v-border:#1f2a42; --v-border-hi:#36527a;
  --v-cyan:#00e0ff; --v-steel:#6b9fd4; --v-text:#e6edf7; --v-text2:#94a3b8; --v-text3:#64748b;
  --v-amber:#fbbf24; --v-emerald:#34d399; --v-red:#f87171; --v-magenta:#ff2d95;
  --ui:'Inter',system-ui,sans-serif; --ui-mono:'JetBrains Mono',ui-monospace,monospace;
  --gut:max(16px,5vw); color-scheme:dark;
}
/* #4310 T9: until the web faces arrive, text sets in local faces scaled to their widths, so a phone hero (its copy
   is bottom-anchored) wraps the same lines before and after the swap and does not jump (CLS). Values swept on the
   five story heroes at 320–768 px; Times/Liberation/DejaVu Serif already match within 0.3 %. local() only. */
@font-face{font-family:'Source Serif 4 fallback';src:local('Georgia');size-adjust:93%}
@font-face{font-family:'IBM Plex Sans fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:99%}
*{box-sizing:border-box}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);margin:0;overflow-x:hidden}
a{color:inherit}

.bar{position:fixed;z-index:20;top:0;left:0;right:0;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gut) 14px;
  display:flex;align-items:center;gap:24px;background:linear-gradient(180deg,oklch(0.13 0.012 250 / .9),transparent)}
.bar img{height:34px;width:auto;display:block}
/* once the page scrolls, a frosted backing fades in behind the bar so the story never shows through the nav
   (chrome.js toggles .is-scrolled); at the very top the bar stays clear over the hero */
.bar::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:oklch(0.13 0.012 250 / .74);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid oklch(0.32 0.018 250 / .55);box-shadow:0 10px 30px -18px oklch(0 0 0 / .8)}
.bar.is-scrolled::before{opacity:1}
@media (prefers-reduced-motion:reduce){.bar::before{transition:none}}
.bar nav{display:flex;gap:22px;margin-left:auto;font:500 13px var(--sans);color:var(--fg-2)}
.bar nav a{text-decoration:none}.bar nav a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:11px 16px;border-radius:6px;border:1px solid var(--line);color:var(--fg);background:oklch(0.19 0.014 250 / .6);cursor:pointer}
.btn.primary{background:var(--accent);border-color:transparent;color:oklch(0.15 0.03 252)}
.btn.primary:hover{background:var(--accent-hi)}
@media (max-width:820px){.bar nav{display:none}.bar .btn{margin-left:auto}}
.demo{position:fixed;z-index:30;top:calc(env(safe-area-inset-top,0px) + 70px);right:var(--gut);font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-3);border:1px solid var(--line);border-radius:999px;padding:5px 10px;background:oklch(0.13 0.012 250 / .7)}

.hud{position:fixed;z-index:15;pointer-events:none;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);transition:opacity .4s}
.hud.tl{left:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
.hud.tr{right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);text-align:right}
.hud b{color:var(--fg);font-weight:500}
.hud .rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warm);margin-right:8px;vertical-align:1px}
.ruler{position:fixed;z-index:15;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);width:min(320px,40vw);height:14px;pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 8px);opacity:.8;transition:opacity .4s}
.ruler i{position:absolute;top:-8px;width:0;height:0;border:5px solid transparent;border-top-color:var(--accent);transform:translateX(-5px);left:0}
body.past .hud,body.past .ruler{opacity:0}
@media (max-width:820px){.ruler,.hud{display:none}}

/* ---------- story ---------- */
main{position:relative;z-index:5}
.hero{min-height:118svh;display:flex;align-items:flex-start;padding-inline:var(--gut);padding-top:calc(24svh + env(safe-area-inset-top,0px))}
.hero .copy{max-width:min(600px,48vw);display:grid;gap:18px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi);display:flex;gap:12px;align-items:center}
.eyebrow .n{color:var(--fg-3)}
.ch .eyebrow{font:500 clamp(14px,1.15vw,17px) var(--mono);letter-spacing:.1em;color:var(--fg);margin-bottom:18px;gap:14px}
.ch .eyebrow .n{display:inline-grid;place-items:center;min-width:2.6em;height:2em;padding:0 .6em;border-radius:999px;
  border:1px solid oklch(0.72 0.20 252 / .45);background:oklch(0.72 0.20 252 / .12);color:var(--accent-hi);font-weight:600}
.ch .eyebrow::after{content:"";flex:0 1 120px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;margin:0;text-wrap:balance}
h1{font-size:clamp(42px,6.2vw,88px);line-height:1.02}
h1 em{font-style:italic;color:var(--accent-hi)}
.lede{color:var(--fg-2);margin:0;font-size:clamp(15px,1.3vw,18px);max-width:52ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
@media (max-width:820px){.hero{align-items:flex-end;padding-top:0;padding-bottom:14svh}.hero .copy{max-width:100%}}

/* hero intro (headline sweep + VERA mark) runs while .hero has .play; it's cleared when the hero leaves view so it replays on return */
.hero:not(.play) *,.hero:not(.play) *::after{animation:none!important}
/* hero headline sweeps in letter by letter; the rest of the copy follows */
.fly .w{display:inline-block;white-space:nowrap}
.fly .ch-l{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px)}
.play .fly .ch-l{animation:letterin .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--k) * 28ms)}
/* chapter + section heads: eyebrow, stat and lede fade in around the headline's fly-in */
.flyhead .eyebrow,.flyhead .stat,.flyhead .lede,.flyhead .k{opacity:0}
.flyhead.play .eyebrow,.flyhead.play .k{animation:fadein .6s ease forwards}
.flyhead.play .stat{animation:fadein .6s ease .1s forwards}
.flyhead.play .lede{animation:fadein .9s ease .9s forwards}
@keyframes letterin{60%{opacity:1;filter:blur(0);color:#cfe9ff;text-shadow:0 0 18px rgba(95,184,255,.8)}100%{opacity:1;transform:none;filter:blur(0)}}
.hero .copy>:not(h1){opacity:0;animation:fadein .8s ease forwards}
.hero .copy>.eyebrow{animation-delay:.05s}
.hero .copy>.lede{animation-delay:1.5s}
.hero .copy>.ctas{animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){.fly .ch-l,.flyhead *,.hero .copy>*{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}}

/* VERA mark (ported from the reel's VeraMark): chrome letters slam in, an outline traces them, one glint sweeps across */
.hero{position:relative}
.hero .copy{position:relative;z-index:2}
.markbox{position:absolute;z-index:1;right:max(16px,6vw);top:calc(50% - 9svh);transform:translateY(-50%);display:grid;justify-items:center;gap:22px;pointer-events:none;perspective:1000px}
.mark{display:flex;gap:.1em;font:700 clamp(60px,8.4vw,140px)/1 'Syncopate','Arial Black',sans-serif;transform:rotateY(-16deg) rotateX(7deg);transform-style:preserve-3d}
.mark .L{position:relative;opacity:0;animation:slam .95s cubic-bezier(.2,1.35,.35,1) forwards;animation-delay:calc(.3s + var(--i) * .11s)}
@keyframes slam{0%{opacity:0;transform:translateY(var(--y)) scale(2.4);filter:blur(18px)}35%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
.mark span{display:block}
.mark .glow{position:absolute;inset:0;color:#00e0ff;filter:blur(30px);opacity:0;animation:glowin 1.6s ease forwards;animation-delay:calc(.9s + var(--i) * .11s)}
@keyframes glowin{to{opacity:.42}}
.mark .depth{position:absolute;inset:0;color:#0b2049;text-shadow:1px 1px 0 #0b2049,2px 2px 0 #0b2049,3px 3px 0 #0b2049,4px 4px 0 #0b2049,5px 5px 0 #0b2049,6px 6px 0 #0b2049,7px 7px 0 #0b2049,8px 8px 0 #0b2049,9px 9px 0 #0b2049}
.mark .chrome{position:relative;background:linear-gradient(180deg,#ffffff 0%,#cfe9ff 38%,#5fb8ff 52%,#0a2a5c 56%,#7fd8ff 78%,#ffffff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.mark .sweep{position:absolute;inset:0;color:transparent;-webkit-background-clip:text;background-clip:text;mix-blend-mode:screen;
  background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 50%,transparent 60%);background-size:300% 100%;background-position:120% 0;background-repeat:no-repeat;
  animation:glint 1.3s cubic-bezier(.45,0,.2,1) forwards;animation-delay:calc(2.5s + var(--i) * .07s)}
@keyframes glint{to{background-position:-20% 0}}
.mark svg{position:absolute;left:0;top:0;width:1.1em;height:1.1em;overflow:visible}
.mark svg text{fill:none;stroke:#00e0ff;stroke-width:2.2px;stroke-dasharray:1600;stroke-dashoffset:1600;filter:drop-shadow(0 0 6px #00e0ff);
  animation:trace 1.7s ease-in-out forwards,traceout 1.2s ease forwards;animation-delay:calc(1.1s + var(--i) * .08s),3.4s}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes traceout{to{opacity:.28}}
.marktag{font:500 12px var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--fg-2)}
.marktag>*{display:inline-block;opacity:0;transform:translateY(6px);animation:tagin .8s ease forwards;animation-delay:calc(2.9s + var(--j) * .55s)}
@keyframes tagin{to{opacity:1;transform:none}}
.marktag b{color:var(--accent-hi);font-weight:500}
@keyframes fadein{to{opacity:1}}
@media (max-width:820px){.markbox{right:auto;left:50%;top:15svh;transform:translateX(-50%);opacity:.75}.marktag{font-size:10px;letter-spacing:.16em;white-space:nowrap}.mark{transform:none;font-size:clamp(52px,16vw,96px)}}
@media (prefers-reduced-motion:reduce){.mark .L,.mark .glow,.mark .sweep,.mark svg text,.marktag>*{animation:none!important}.mark .L,.marktag>*{opacity:1}.mark .glow{opacity:.42}.mark svg text{stroke-dashoffset:0;opacity:.28}}

.ch{padding-inline:var(--gut);padding-block:16svh 10svh;max-width:1320px;margin-inline:auto}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 64px;align-items:end;margin-bottom:44px}
.head h2{font-size:clamp(34px,4vw,56px);line-height:1.05}
.head .lede{font-size:clamp(16px,1.45vw,20px);color:var(--fg-2)}
.stat{font:500 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.stat b{font:500 clamp(40px,4.4vw,64px)/.9 var(--mono);letter-spacing:-.04em;color:var(--fg);text-transform:none}
.foot{font:400 11px var(--mono);letter-spacing:.06em;color:var(--fg-3);margin:18px 0 0}
@media (max-width:820px){.head{grid-template-columns:minmax(0,1fr);margin-bottom:28px}}

/* stage: a fixed-size composition scaled to the column, with Linear-style edge fades */
.stage{position:relative;width:100%}
.art{position:absolute;left:0;top:0;width:1200px;height:580px;transform-origin:0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%),linear-gradient(180deg,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 90%,transparent 100%),linear-gradient(180deg,#000 80%,transparent 100%);mask-composite:intersect}

/* ---------- VERA app windows ---------- */
.win{position:absolute;background:var(--v-card);border:1px solid var(--v-border);border-radius:12px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);font:13px/1.45 var(--ui);color:var(--v-text);
}
.win.back{opacity:.55;filter:saturate(.8)}
.tb{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid var(--v-border);background:rgba(14,20,34,.6)}
.tb .app{font:700 11px var(--ui-mono);letter-spacing:.14em;color:var(--v-cyan)}
.tb .t{font-weight:600;font-size:13px}
.tb .s{color:var(--v-text3);font-size:12px}
.tb .ctl{margin-left:auto;display:flex;gap:12px;color:var(--v-text3);font-size:12px;letter-spacing:.2em}
.pad{padding:16px 18px}
.lbl{font:600 10px var(--ui-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--v-text3)}
.mono{font-family:var(--ui-mono)}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--ui);padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.c{color:var(--v-cyan);background:rgba(0,224,255,.10)} .chip.g{color:var(--v-emerald);background:rgba(52,211,153,.12)}
.chip.a{color:var(--v-amber);background:rgba(251,191,36,.12)} .chip.s{color:var(--v-steel);background:rgba(107,159,212,.13)}
.chip.m{color:#9aa7bd;background:rgba(148,163,184,.10)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.dot.live{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.sep{height:1px;background:var(--v-border);margin:12px 0}

/* step reveal: [data-at] elements start hidden and get .on at their time */
.rv{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.rv.on{opacity:1;transform:none}
.rv.slide{transform:translateX(-14px)} .rv.slide.on{transform:none}
.rv.pop{transform:scale(.96)} .rv.pop.on{transform:none}

/* intake */
.feed .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:11px 18px;border-bottom:1px solid var(--v-border)}
.feed .row .n{font-weight:600}
.feed .row .d{color:var(--v-text2);font-size:12px}
.feed .row.sel{background:linear-gradient(90deg,rgba(0,224,255,.10),transparent);box-shadow:inset 2px 0 0 var(--v-cyan)}
.checks{display:grid;gap:2px;margin-top:6px}
.ck{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed rgba(31,42,66,.9)}
.ck .ic{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--v-border-hi);position:relative}
.ck .ic::after{content:"";position:absolute;inset:3px;border-radius:50%;border:2px solid var(--v-cyan);border-right-color:transparent;animation:spin .8s linear infinite;opacity:0}
.ck.run .ic::after{opacity:1}
.ck.ok .ic{border-color:var(--v-emerald);background:rgba(52,211,153,.15)}
.ck.ok .ic::after{content:"✓";animation:none;opacity:1;border:0;inset:0;display:grid;place-items:center;color:var(--v-emerald);font:700 11px var(--ui)}
.ck .v{color:var(--v-text2);font:12px var(--ui-mono)}
@keyframes spin{to{transform:rotate(360deg)}}
.beam{position:absolute;inset:0;pointer-events:none}
.beam path{fill:none;stroke:url(#bg1);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1s ease}
.beam.on path{stroke-dashoffset:0}
.log div{display:flex;gap:10px;font-size:12px;color:var(--v-text2);padding:3px 0}
.log time{font:11px var(--ui-mono);color:var(--v-text3);min-width:62px}

/* map */
.mapwin canvas{display:block}
.drv{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--v-border)}
.drv .n{font-weight:600;font-size:13px}.drv .d{grid-column:2/-1;color:var(--v-text2);font-size:11.5px}
.drv .eta{font:600 12px var(--ui-mono)}
.counter{font:600 34px/1 var(--ui-mono);letter-spacing:-.02em}

/* police */
.dept{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:11px 0;border-bottom:1px solid var(--v-border)}
.dept .n{font-weight:600}.dept .why{grid-column:1/-1;color:var(--v-text2);font-size:12px}
.bar2{grid-column:1/-1;height:5px;border-radius:3px;background:var(--v-recess);overflow:hidden}
.bar2 i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,var(--v-steel),var(--v-cyan));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
.wave{display:flex;align-items:center;gap:3px;height:56px;margin:10px 0 6px}
.wave i{flex:1;background:linear-gradient(180deg,var(--v-cyan),#3b7bff);border-radius:2px;height:12%;opacity:.85}
.wave.live i{animation:wv .9s ease-in-out infinite}
@keyframes wv{0%,100%{height:14%}50%{height:var(--h,70%)}}
.kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:7px 12px;font-size:12.5px}
.kv dt{color:var(--v-text3)}.kv dd{margin:0}
.note{font-size:13px;line-height:1.6;color:var(--v-text);min-height:150px}
.caret{display:inline-block;width:7px;height:15px;background:var(--v-cyan);vertical-align:-2px;margin-left:2px;animation:pulse 1s steps(2) infinite}

/* pay */
table.audit{width:100%;border-collapse:collapse;font-size:12.5px}
.audit th{font:600 10px var(--ui-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v-text3);text-align:right;padding:8px 6px;border-bottom:1px solid var(--v-border)}
.audit th:first-child,.audit td:first-child{text-align:left}
.audit td{padding:10px 6px;text-align:right;border-bottom:1px solid rgba(31,42,66,.7);font-family:var(--ui-mono);font-variant-numeric:tabular-nums}
.audit td:first-child{font-family:var(--ui)}
.audit td.ap{color:var(--v-emerald);font-weight:700}
.audit tr.flag td{background:rgba(251,191,36,.06)}.audit tr.flag td.ap{color:var(--v-amber)}
.audit tfoot td{border:0;font-weight:700;font-size:14px}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 6px}
.step{border-top:2px solid var(--v-border);padding-top:8px;font-size:12px;color:var(--v-text3);transition:color .4s,border-color .4s}
.step b{display:block;color:inherit;font-size:12.5px}
.step.on{border-color:var(--v-emerald);color:var(--v-text)}
.step.on b{color:var(--v-emerald)}
.clock{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--v-text2)}
.clock .trk{flex:1;height:6px;border-radius:3px;background:var(--v-recess);position:relative;overflow:hidden}
.clock .trk i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--v-cyan),var(--v-emerald));transition:width 1.4s ease}
.pays .p{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(31,42,66,.8);font-size:12.5px}
.pays .p .amt{font:700 13px var(--ui-mono);color:var(--v-emerald)}
.pays .p.new{background:linear-gradient(90deg,rgba(52,211,153,.12),transparent);margin-inline:-18px;padding-inline:18px}
.big{font:700 38px/1 var(--ui-mono);letter-spacing:-.02em}

/* close-out */
.grid{display:grid;grid-template-columns:48px repeat(5,minmax(0,1fr));gap:6px;font-size:11.5px}
.grid .h{color:var(--v-text3);text-align:center;font:600 10px var(--ui-mono);letter-spacing:.08em}
.grid .t{color:var(--v-text3);font:10.5px var(--ui-mono);align-self:center}
.grid .c{height:34px;border-radius:6px;border:1px solid var(--v-border);background:var(--v-recess);transition:all .35s}
.grid .c.bk{background:repeating-linear-gradient(135deg,rgba(148,163,184,.10) 0 5px,transparent 5px 10px)}
.grid .c.hov{border-color:var(--v-steel)}
.grid .c.sel{border-color:var(--v-cyan);background:rgba(0,224,255,.16);box-shadow:0 0 0 3px rgba(0,224,255,.12),0 0 24px rgba(0,224,255,.25)}
.dstack{position:absolute;left:800px;top:40px;width:280px;display:flex;flex-direction:column;gap:16px;z-index:3}
.doc{position:relative;background:#151d30;border:1px solid var(--v-border-hi);border-radius:10px;padding:16px 18px;box-shadow:0 30px 70px rgba(0,0,0,.55);font:12.5px/1.45 var(--ui);color:var(--v-text)}
.doc h4{margin:0 0 2px;font-size:14px}.doc .no{font:11px var(--ui-mono);color:var(--v-text3)}
.doc .kv{margin-top:10px;grid-template-columns:90px minmax(0,1fr)}
.rail{position:absolute;left:90px;width:990px;top:430px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));font:12.5px var(--ui);color:var(--v-text2)}
.rail div{position:relative;padding-top:18px;transition:color .4s}
.rail div::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--v-border)}
.rail div::after{content:"";position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;background:var(--v-bg);border:2px solid var(--v-border-hi);transition:all .4s}
.rail div.on{color:var(--v-text)}
.rail div.on::before{background:linear-gradient(90deg,var(--v-emerald),var(--v-cyan))}
.rail div.on::after{border-color:var(--v-emerald);background:var(--v-emerald);box-shadow:0 0 12px rgba(52,211,153,.6)}

/* ---------- after the story ---------- */
.after{position:relative;z-index:6;background:linear-gradient(180deg,oklch(0.13 0.012 250 / .55),oklch(0.13 0.012 250 / .78));border-top:1px solid var(--line)}

/* synth perspective grid: fixed behind everything, dim, its floor rolls toward the viewer as you scroll */
.bggrid{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.6}
.bggrid .sky{position:absolute;inset:0;background:
  radial-gradient(60% 22% at 50% 62%,rgba(70,130,255,.16),transparent 70%),
  linear-gradient(180deg,transparent 0%,transparent 55%,rgba(40,90,200,.07) 62%,transparent 63%)}
.bggrid .horizon{position:absolute;left:0;right:0;top:62%;height:1px;background:linear-gradient(90deg,transparent,rgba(120,190,255,.45) 30%,rgba(120,190,255,.45) 70%,transparent)}
.bggrid .floor{position:absolute;left:-60%;right:-60%;top:62%;height:140%;transform-origin:50% 0;transform:perspective(360px) rotateX(74deg);
  background-image:linear-gradient(rgba(110,180,255,.30) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(110,180,255,.30) 1.5px,transparent 1.5px);
  background-size:72px 72px;background-position:50% var(--gy,0px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 70%,transparent 100%)}
.bggrid .ceil{position:absolute;left:-60%;right:-60%;bottom:38%;height:140%;transform-origin:50% 100%;transform:perspective(360px) rotateX(-74deg);opacity:.35;
  background-image:linear-gradient(90deg,rgba(110,180,255,.30) 1.5px,transparent 1.5px);background-size:72px 72px;background-position:50% 0;
  -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 25%,transparent 80%);mask-image:linear-gradient(0deg,transparent 0,#000 25%,transparent 80%)}
@media (max-width:820px){.bggrid{opacity:.45}.bggrid .floor,.bggrid .ceil{background-size:48px 48px}}
.sec{max-width:1180px;margin-inline:auto;padding-inline:var(--gut);padding-block:96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;border-bottom:1px solid var(--line-dim)}
.sec h3{font:400 clamp(28px,3vw,40px)/1.1 var(--serif);margin:0;text-wrap:balance}
.sec .k{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin-bottom:14px}
.rows{display:grid}
.srow{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;padding-block:18px;border-top:1px solid var(--line-dim)}
.srow:last-child{border-bottom:1px solid var(--line-dim)}
.srow{position:relative;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 140ms)}
.srow::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),transparent);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 140ms + 120ms)}
.srow .id{transition:color .6s;transition-delay:calc(var(--i) * 140ms + 300ms)}
.in .srow{opacity:1;transform:none}.in .srow::before{transform:scaleX(1)}.in .srow .id{color:var(--accent-hi)}
.srow:hover{background:linear-gradient(90deg,oklch(0.72 0.20 252 / .06),transparent 70%)}
.srow .id{font:500 12px var(--mono);color:var(--fg-3);letter-spacing:.08em}
.srow .t{font-weight:500}
.srow .d{color:var(--fg-3);font-size:14px;grid-column:2}
.srow .tag{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);text-align:right}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line-dim);border:1px solid var(--line-dim);border-radius:8px;overflow:hidden}
.nums div{background:var(--bg);padding:22px}
.nums b{display:block;font:500 clamp(26px,2.5vw,38px)/1 var(--mono);letter-spacing:-.04em;white-space:nowrap}
.nums span{display:block;margin-top:10px;font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.nums b{font-variant-numeric:tabular-nums}
.nums div{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i) * 110ms)}
.nums.in div{opacity:1;transform:none}
.portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.portal{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--bg-2);display:grid;gap:10px;text-decoration:none}
.portal:hover{border-color:var(--accent)}
#portals{grid-template-columns:minmax(0,1fr);gap:32px}
.netlink{grid-column:2}
@media (max-width:820px){.netlink{grid-column:1}}
#portals h3{max-width:22ch}
.portal{align-content:start}
.portal .go{white-space:nowrap;margin-top:auto}
.portal .k{margin:0}.portal p{margin:0;color:var(--fg-3);font-size:14px}
.portal .go{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-hi)}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
label{display:grid;gap:6px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
input,select{font:15px var(--sans);color:var(--fg);background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:11px 12px;width:100%}
form .full{grid-column:1/-1}
.sent{grid-column:1/-1;color:var(--good);font:500 12px var(--mono);letter-spacing:.08em}
footer{max-width:1180px;margin-inline:auto;padding-inline:var(--gut);padding-block:40px 64px;display:flex;flex-wrap:wrap;gap:16px 32px;font:400 12px var(--mono);color:var(--fg-3)}
@media (max-width:820px){
  .sec{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:64px}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portals,form{grid-template-columns:minmax(0,1fr)}
  .srow{grid-template-columns:minmax(0,1fr)}.srow .id{display:none}.srow .d,.srow .tag{grid-column:1;text-align:left}
}
@media (prefers-reduced-motion:reduce){.srow,.nums div,.srow::before{transition:none!important}.dot.live,.caret,.wave.live i,.ck .ic::after{animation:none}}

/* ---------- polished controls: glass fields + lit pill buttons (shared by every page) ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;height:44px;padding:0 20px;border-radius:999px;gap:10px;font:600 11.5px var(--mono);letter-spacing:.12em;
  color:var(--fg);border:1px solid oklch(0.85 0.04 250 / .16);
  background:linear-gradient(180deg,oklch(1 0 0 / .09),oklch(1 0 0 / .025));
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .14),inset 0 -1px 0 oklch(0 0 0 / .25),0 10px 28px -14px oklch(0 0 0 / .8);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,border-color .25s ease,background .25s ease,color .25s ease}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,oklch(1 0 0 / .22) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-1px);border-color:oklch(0.85 0.06 250 / .3);background:linear-gradient(180deg,oklch(1 0 0 / .13),oklch(1 0 0 / .04))}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0);box-shadow:inset 0 1px 0 oklch(1 0 0 / .1),inset 0 -1px 0 oklch(0 0 0 / .2),0 4px 12px -8px oklch(0 0 0 / .8)}
.btn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.btn.primary{color:oklch(0.17 0.04 255);border-color:oklch(0.9 0.08 240 / .55);
  background:radial-gradient(120% 140% at 50% -20%,oklch(0.93 0.08 230) 0%,transparent 55%),linear-gradient(180deg,oklch(0.82 0.15 245),oklch(0.66 0.20 255));
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .65),inset 0 -2px 6px oklch(0.35 0.15 265 / .45),0 1px 0 oklch(0 0 0 / .35),0 12px 30px -10px oklch(0.70 0.20 252 / .75),0 0 0 1px oklch(0.55 0.18 255 / .35)}
.btn.primary:hover{background:radial-gradient(120% 140% at 50% -20%,oklch(0.96 0.07 230) 0%,transparent 55%),linear-gradient(180deg,oklch(0.86 0.15 245),oklch(0.70 0.20 255));
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .7),inset 0 -2px 6px oklch(0.35 0.15 265 / .4),0 1px 0 oklch(0 0 0 / .35),0 16px 36px -10px oklch(0.72 0.20 252 / .9),0 0 0 1px oklch(0.6 0.18 255 / .4)}
.bar .btn{height:40px;padding:0 18px}
input:not([type=checkbox]):not([type=radio]),select,textarea{height:48px;padding:0 16px;border-radius:14px;font:15px var(--sans);color:var(--fg);
  border:1px solid oklch(0.85 0.04 250 / .14);
  background:linear-gradient(180deg,oklch(1 0 0 / .055),oklch(1 0 0 / .018));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .08),inset 0 -1px 0 oklch(0 0 0 / .3),0 8px 24px -16px oklch(0 0 0 / .9);
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease}
textarea{height:auto;min-height:120px;padding:14px 16px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--fg-3)}
input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:oklch(0.85 0.05 250 / .24)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:oklch(0.80 0.16 248 / .75);
  background:linear-gradient(180deg,oklch(1 0 0 / .08),oklch(1 0 0 / .03));
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .1),0 0 0 4px oklch(0.72 0.20 252 / .16),0 10px 28px -14px oklch(0.72 0.20 252 / .45)}
select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fb4d6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"),linear-gradient(180deg,oklch(1 0 0 / .055),oklch(1 0 0 / .018));
  background-repeat:no-repeat;background-position:right 16px center,0 0;background-size:16px 16px,auto}
select option{background:oklch(0.17 0.014 250);color:var(--fg)}
form label{gap:8px}
label.cb{border-radius:14px!important;border:1px solid oklch(0.85 0.04 250 / .14)!important;background:linear-gradient(180deg,oklch(1 0 0 / .055),oklch(1 0 0 / .018))!important;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .08);transition:border-color .25s ease,background .25s ease}
label.cb:has(:checked){border-color:oklch(0.80 0.16 248 / .7)!important;background:linear-gradient(180deg,oklch(0.72 0.20 252 / .16),oklch(0.72 0.20 252 / .05))!important}
@media (prefers-reduced-motion:reduce){.btn,.btn::after,input,select,textarea{transition:none}.btn:hover::after{transform:translateX(-120%)}}
/* the same solid fill as the reduced-transparency block at the end of the file (DESIGN.md, Glass system, Fallbacks) */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.btn:not(.primary),.bar__toggle,.demo,input:not([type=checkbox]):not([type=radio]),select,textarea{background-color:oklch(0.2 0.016 250)}}
/* nav: the headline serif, small — elegant chrome, hairline under the current page */
.bar nav{gap:30px;font:400 15.5px/1 var(--serif);font-optical-sizing:auto;letter-spacing:.01em;color:var(--fg-2)}
.bar nav a{position:relative;padding-block:6px;transition:color .3s ease,text-shadow .3s ease}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;border-radius:1px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent-hi),transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.bar nav a:hover{color:var(--fg);text-shadow:0 0 18px oklch(0.80 0.22 252 / .45)}
.bar nav a:hover::after,.bar nav a[aria-current="page"]::after{transform:none}
.bar nav a[aria-current="page"]{color:var(--fg);font-style:italic}
@media (max-width:1100px){.bar nav{gap:20px;font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.bar nav a,.bar nav a::after{transition:none}}

/* ---------- chrome (#4301 T0): skip link, logo link, Menu button + panel, nav sign-in ---------- */
.skip-link{position:fixed;z-index:60;left:var(--gut);top:-80px;padding:12px 18px;border-radius:999px;background:var(--accent);color:oklch(0.15 0.03 252);
  font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{top:calc(env(safe-area-inset-top,0px) + 12px);outline:2px solid var(--fg);outline-offset:3px}
.bar__logo{display:inline-flex;align-items:center;min-height:44px;border-radius:8px}
.bar__logo:focus-visible,.bar nav a:focus-visible,.bar__toggle:focus-visible,footer a:focus-visible,.portal:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.bar__toggle{display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px;margin-left:auto;border-radius:999px;cursor:pointer;
  font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);border:1px solid oklch(0.85 0.04 250 / .16);
  background:linear-gradient(180deg,oklch(1 0 0 / .09),oklch(1 0 0 / .025))}
.bar__toggle::before{content:"";width:14px;height:8px;border-block:1.5px solid currentColor;transition:height .25s ease}
.bar__toggle[aria-expanded="true"]::before{height:1.5px;border-bottom:0}
/* the CTA and each nav link stay one line: a squeezed flex item clipped "Get notified →" and wrapped "For agents" (#4308 T7) */
.bar__cta{white-space:nowrap;flex-shrink:0}
.bar nav a{white-space:nowrap}
@media (max-width:820px){
  .bar{gap:12px}
  .bar .bar__cta{margin-left:0}
  .bar__toggle{display:inline-flex}
  .bar nav{position:absolute;left:var(--gut);right:var(--gut);top:calc(100% - 4px);display:none;flex-direction:column;gap:0;padding:8px;border-radius:18px;
    font-size:17px;border:1px solid oklch(0.85 0.04 250 / .16);background:oklch(0.15 0.014 250);
    box-shadow:inset 0 1px 0 oklch(1 0 0 / .08),0 30px 60px -20px oklch(0 0 0 / .8)}
  .bar nav.is-open{display:flex}
  .bar nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px}
  .bar nav a::after{display:none}
  .bar nav a+a{border-top:1px solid var(--line-dim)}
  .bar nav a[aria-current="page"]{background:oklch(1 0 0 / .06)}
}
@media (max-width:420px){.bar .bar__cta{padding:0 14px;letter-spacing:.08em}.bar img{height:28px}}

/* ---------- forms (I4): fields, inline errors and the idle → invalid | sending → sent | error states ---------- */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form>noscript,.form .form__next,.form__status,.form__submit,.form__done{grid-column:1/-1}
.field{display:grid;gap:8px;align-content:start}
.field__label{display:block}
.field__opt{color:var(--fg-3);text-transform:none;letter-spacing:.02em}
.field__error{margin:0;font:500 12px/1.4 var(--sans);color:oklch(0.80 0.15 25)}
.field__error[hidden]{display:none}
[aria-invalid="true"]{border-color:oklch(0.72 0.18 25 / .85)!important}
.form__next{margin:0;font:400 14px/1.5 var(--sans);color:var(--fg-2)}
.form__next a,.form__status a,.form__done a{color:var(--accent-hi)}
.form__status{margin:0;min-height:1.4em;font:500 13px/1.5 var(--sans);color:var(--fg-2)}
.form__status:empty{min-height:0}
.form[data-state="invalid"] .form__status,.form[data-state="error"] .form__status{color:oklch(0.82 0.13 40)}
.form__submit .btn[disabled]{opacity:.55;cursor:not-allowed}
.form__submit .btn[aria-busy="true"]{cursor:progress}
.form__done{display:none;gap:12px;padding:24px;border:1px solid oklch(0.78 0.16 165 / .4);border-radius:14px;background:oklch(0.78 0.16 165 / .06)}
.form__done:focus{outline:none}.form__done:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
.form__done-title{margin:0;font:400 24px/1.2 var(--serif);color:var(--fg)}
.form__done p{margin:0;color:var(--fg-2)}
.form__done .btn{justify-self:start}
.form[data-state="sent"]>:not(.form__done){display:none}
.form[data-state="sent"] .form__done{display:grid}
@media (max-width:820px){.form{grid-template-columns:minmax(0,1fr)}}

/* ---------- footer (C7): one line, real links, fine print ---------- */
.footer{position:relative;z-index:6;max-width:none;margin:0;padding:0;display:block;background:oklch(0.13 0.012 250 / .78)}
.footer__in{max-width:1180px;margin-inline:auto;padding-inline:var(--gut);padding-block:40px 64px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:baseline}
.footer__links{display:flex;flex-wrap:wrap;gap:4px 24px}
.footer__links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--fg-2)}
.footer__links a:hover{color:var(--fg)}
.footer__fine{flex-basis:100%;margin:0;color:var(--fg-3);font:400 11px/1.5 var(--mono);letter-spacing:.04em}
.footer__fine+.footer__fine{margin-top:-10px}

/* reduced motion: stages jump to their end state (the prototype left the score bars, pay clock, rail and slot
   transitions running) */
@media (prefers-reduced-motion:reduce){.stage *,.stage *::before,.stage *::after{transition:none!important}.bar__toggle::before{transition:none}}

/* WCAG AA (#4301 T0): the VERA windows' tertiary text (#64748b) measured 3.0–4.2:1 on the window cards; this
   tint keeps the hierarchy and clears 4.5:1 on every card surface */
:root{--v-text3:#8391a6}
/* every link and control shows the same focus ring */
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
/* the release form and condition report titles inside the close-out stage are mock UI, not page headings */
.doc .doc__t{margin:0 0 2px;font-size:14px;font-weight:700}
/* 44px targets (WCAG 2.5.8 / PRODUCT.md): the prototype's bar button was 40px tall */
.bar .btn{height:44px}
/* fields keep the prototype's glow and also get the site-wide 2px ring */
input:not([type=checkbox]):not([type=radio]):focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
/* the open menu panel sits above the "Illustrative data" pill */
.bar:has(nav.is-open){z-index:40}

/* Until the engine boots (story.js sets html.story), or if it never arrives (blocked, failed, JS off), every
   reveal shows its final state and each stage keeps a fixed height and scrolls inside itself instead of spilling
   its unscaled 1200px art over the next heading. The hidden-until-played states above only apply once booted. */
html:not(.story) :is(.rv,[data-at],.flyhead .eyebrow,.flyhead .stat,.flyhead .lede,.flyhead .k,.srow,.nums div){opacity:1!important;transform:none!important;filter:none!important}
html:not(.story) .srow::before{transform:scaleX(1)}
html:not(.story) .beam path{stroke-dashoffset:0}
html:not(.story) .stage{overflow-x:auto;overflow-y:hidden;height:580px}
html:not(.story) .stage[data-h="600"]{height:600px}
html:not(.story) .art{-webkit-mask-image:none;mask-image:none}
/* the HUD only means something while the engine drives it */
html:not(.story) :is(.hud,.ruler){display:none}
/* in-page jumps and focused fields land below the fixed bar and the "Illustrative data" pill */
html{scroll-padding-top:104px}
/* on phones the pill sits at the top of the page and scrolls away with it instead of covering the copy */
@media (max-width:820px){.demo{position:absolute}}

/* ---------- form states (#4306 T5): what idle → invalid | sending → sent | error looks like ---------- */
/* the red edge comes from the forms (I4) block's [aria-invalid] rule; focused, an invalid field swaps the accent
   glow for a red ring so the problem still reads while it is being fixed */
.field :is(input,select,textarea)[aria-invalid="true"]:focus{
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .1),0 0 0 4px oklch(0.70 0.18 25 / .2)}
.field__error::before{content:"! " / "";font-weight:700}
/* sending: the controls go quiet while the button says "Sending…"; the 11px labels stay at full strength (AA) */
.form[data-state="sending"] .field :is(input,select,textarea){opacity:.72;transition:opacity .2s ease}
/* error: the fallback (phone + email) sits in a tinted box with underlined links */
.form[data-state="error"] .form__status{padding:12px 16px;border:1px solid oklch(0.72 0.17 25 / .45);border-radius:14px;background:oklch(0.62 0.17 25 / .08)}
.form__status a,.form__done a{text-decoration:underline;text-underline-offset:2px}
.form__done-title::before{content:"✓ " / "";color:oklch(0.80 0.15 165)}
@media (prefers-reduced-motion:reduce){.form[data-state="sending"] .field :is(input,select,textarea){transition:none}}

/* reduced transparency (DESIGN.md, Glass system, Fallbacks): nothing is frosted and every glass control gets the same solid
   fill as the no-backdrop-filter fallback, so its label never depends on what scrolls behind it (#4308 T7); last in the
   file so it outranks every glass rule above */
@media (prefers-reduced-transparency:reduce){
  .bar::before{background:oklch(0.13 0.012 250)}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .btn:not(.primary),.bar__toggle,.demo,input:not([type=checkbox]):not([type=radio]),select,textarea{background-color:oklch(0.2 0.016 250)}
}