
/* ===== HiveSilo v4 shell: the custody line ===== */
:root{
  --paper:#F5F4F1; --panel:#EFEDE8; --sheet:#FFFFFF;
  --ink:#181C21; --ink-2:#464D53; --ink-3:#787E84;
  --line:#DDD9D0; --line-2:#E8E5DE;
  --accent:#5B47CF; --accent-deep:#46389F; --accent-soft:#EEEBFB;
  --ok:#1E7A55; --ok-soft:#E4F1EA;
  --night:#14102B; --night-2:#1C1638;
  --shadow:0 1px 2px rgba(24,28,33,.05),0 18px 44px -26px rgba(40,32,88,.32);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Archivo','Inter','Helvetica Neue',Arial,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
html{scrollbar-width:thin;scrollbar-color:#B9B3A6 var(--paper)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:#B9B3A6;border-radius:99px;border:2px solid var(--paper)}
::-webkit-scrollbar-track{background:var(--paper)}
input,textarea{caret-color:var(--accent)}
a{color:inherit;text-decoration:none}
h1,h2,h3{text-wrap:balance;margin:0}
p{text-wrap:pretty}
.num{font-variant-numeric:tabular-nums}

/* type roles */
.display{font-weight:800;font-stretch:122%;letter-spacing:-.025em;line-height:.98}
.h2{font-size:clamp(2.15rem,3.8vw,3.3rem);font-weight:760;font-stretch:114%;letter-spacing:-.022em;line-height:1.02}
.lede{font-size:1.0625rem;line-height:1.62;color:var(--ink-2);max-width:64ch}

/* controls: pill radius on controls only, 14px on sheets */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:620;white-space:nowrap;transition:transform .15s var(--ease-out),box-shadow .25s var(--ease-out),border-color .2s ease,color .2s ease;cursor:pointer}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-fill{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.btn-fill:hover{box-shadow:0 4px 10px -4px rgba(70,56,159,.5),0 16px 34px -14px rgba(70,56,159,.55),0 0 42px -6px rgba(122,99,240,.5)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line);font-weight:540}
.btn-ghost:hover{color:var(--ink);border-color:#A9A294}
.btn-white{background:#fff;color:var(--accent-deep);border:1px solid #fff}
.btn-white:hover{box-shadow:0 6px 14px -6px rgba(0,0,0,.4),0 20px 44px -18px rgba(0,0,0,.5),0 0 46px -6px rgba(183,169,255,.45)}
.btn-ghost-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.38);font-weight:540}
.btn-ghost-w:hover{border-color:#fff}
.btn svg{flex:none}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:2rem;height:64px;padding:0 clamp(1.25rem,4vw,3rem);background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-2)}
.nav-brand{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.brand-mark{display:inline-block;width:22px;height:22px;flex:none;background:conic-gradient(from 45deg,#6B57E8,#2BB8A6,#6B57E8);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);box-shadow:0 0 0 1px rgba(16,18,24,.12) inset}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;font-weight:520;color:var(--ink-2);transition:color .18s ease}
.nav-links a:hover{color:var(--ink)}
.nav .btn{height:42px;padding:0 20px;font-size:14px}
.nav{transition:background .35s ease,border-color .35s ease}
.nav.on-dark{background:linear-gradient(180deg,rgba(13,10,31,.78),rgba(13,10,31,.34) 72%,rgba(13,10,31,0));backdrop-filter:blur(9px);border-bottom-color:transparent}
.nav.on-dark .nav-brand{color:#F5F3EE}
.nav.on-dark .nav-links a{color:rgba(245,243,238,.72)}
.nav.on-dark .nav-links a:hover{color:#fff}
/* real-site nav: hover dropdowns */
.nav-links{gap:26px}
.nav-dd{position:relative}
.nav-dd>a{display:inline-flex;align-items:center;gap:5px}
.nav-dd>a::after{content:"";border-left:4px solid transparent;border-right:4px solid transparent;border-top:4.5px solid currentColor;opacity:.55}
.nav-dd::before{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.nav-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,6px);min-width:264px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .25s var(--ease-out),visibility .2s;z-index:30}
.nav-dd:hover .nav-menu,.nav-dd:focus-within .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-menu a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:520;color:var(--ink-2);white-space:nowrap}
.nav-menu a:hover{background:var(--panel);color:var(--ink)}
.nav.on-dark .nav-menu{background:#14102B;border-color:rgba(183,169,255,.22)}
.nav.on-dark .nav-menu a{color:rgba(245,243,238,.75)}
.nav.on-dark .nav-menu a:hover{background:rgba(255,255,255,.07);color:#fff}
@media (max-width:1180px){.nav-links{gap:18px}.nav-links>a:nth-child(2){display:none}}

/* hero: the vault, lit */
.hero{position:relative;min-height:100dvh;display:grid;align-content:center;overflow:hidden;background:#0D0A1F;color:#F5F3EE}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(52% 68% at 64% 44%,rgba(96,70,235,.30),transparent 64%),
  radial-gradient(30% 42% at 20% 84%,rgba(53,36,140,.24),transparent 70%),
  radial-gradient(26% 32% at 86% 10%,rgba(46,180,126,.10),transparent 70%);pointer-events:none}
.hero-field{position:absolute;inset:0}
.hero-field canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-scrim{position:absolute;inset:0;background:
  linear-gradient(94deg,rgba(13,10,31,.93) 0%,rgba(13,10,31,.76) 30%,rgba(13,10,31,.20) 54%,rgba(13,10,31,0) 68%),
  linear-gradient(180deg,rgba(13,10,31,.5) 0%,transparent 16%,transparent 78%,rgba(13,10,31,.62) 100%);pointer-events:none}
.hero-copy{position:relative;z-index:2;padding:0 clamp(1.25rem,5vw,4.5rem);max-width:1520px;width:100%;margin-inline:auto}
.hero-kick{display:inline-flex;align-items:center;gap:11px;font-size:.78rem;font-weight:640;letter-spacing:.15em;text-transform:uppercase;color:#B7A9FF;margin:0 0 1.5rem}
.hero-kick::before{content:"";width:28px;height:1px;background:linear-gradient(90deg,#43D69A,#8F7BFF);flex:none}
.hero h1{font-size:clamp(2.9rem,5.4vw,5.3rem);max-width:22ch;color:#F5F3EE;text-shadow:0 2px 70px rgba(13,10,31,.9)}
.hero-body{margin-top:.85rem;font-size:1.0625rem;line-height:1.62;color:rgba(245,243,238,.66);max-width:46ch}
.hero-ctas{display:flex;align-items:center;gap:14px;margin-top:2.5rem;flex-wrap:wrap}
/* hero instrument strip */
.hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:stretch;border-top:1px solid rgba(245,243,238,.10);background:rgba(13,10,31,.42);backdrop-filter:blur(10px);padding:0 clamp(1.25rem,5vw,4.5rem);opacity:0;animation:stripIn 1s var(--ease-out) 1.2s forwards;flex-wrap:wrap}
/* laser edge: a light streak sweeps the strip's top hairline */
.hero-strip::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(183,169,255,.95) 45%,rgba(122,223,182,.9) 55%,transparent) no-repeat;background-size:240px 1px;background-position:-240px 0;animation:laserSweep 7s ease-in-out 2.2s infinite;pointer-events:none}
@keyframes laserSweep{0%{background-position:-240px 0}55%{background-position:calc(100% + 240px) 0}100%{background-position:calc(100% + 240px) 0}}
@media (prefers-reduced-motion: reduce){.hero-strip::before{animation:none;display:none}}
@keyframes stripIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hs-note{display:flex;align-items:center;font-size:.68rem;font-weight:620;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,243,238,.38);padding:16px clamp(1rem,2.4vw,2.2rem) 16px 0}
.hs-cell{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:13px clamp(1rem,2.4vw,2.2rem) 15px;border-left:1px solid rgba(245,243,238,.08)}
.hs-cell b{font-size:1.24rem;font-weight:760;font-stretch:114%;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:#F5F3EE}
.hs-cell span{font-size:.67rem;font-weight:620;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,238,.45)}
.hs-live{margin-left:auto;display:flex;align-items:center;gap:.55rem;align-self:center;font-size:.8rem;font-weight:650;color:#43D69A;white-space:nowrap;padding-left:1rem}
.hs-live svg{display:block}
.hs-live .ring{stroke:#43D69A;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-dasharray:44;stroke-dashoffset:44;animation:ringdraw 1s cubic-bezier(.16,1,.3,1) 1.9s forwards}
.hs-live .tick{stroke:#43D69A;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;animation:ringdraw .45s ease 2.7s forwards}
/* drawn annotations: the instrument explains itself */
.hero-ann{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;font-size:.66rem;font-weight:640;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,243,238,.55);opacity:0;animation:annIn 1.1s ease 1.9s forwards;pointer-events:none;white-space:nowrap}
@keyframes annIn{to{opacity:1}}
.hero-ann i{display:block;height:1px;width:52px;flex:none}
.ann-core{left:56%;top:59%;transform:translate(-50%,0);flex-direction:column;gap:5px;text-align:center;letter-spacing:.24em;color:rgba(245,243,238,.48)}
.ann-core em{font-style:normal;color:rgba(245,243,238,.72)}
.ann-core .uh{color:rgba(122,223,182,.85);letter-spacing:.14em;margin-top:3px}
.ann-lanes{right:2.5%;top:25%}
.ann-lanes i{background:linear-gradient(90deg,rgba(67,214,154,.55),rgba(67,214,154,0))}
.ann-lanes span{color:rgba(122,223,182,.75)}
@media (max-width:1080px){.hero-ann{display:none}}

/* the silo dial: turns with scroll */
.dial{position:absolute;left:56%;top:46%;width:calc(min(100vh,100vw)*.547);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.dial svg{display:block;width:100%;height:100%;overflow:visible}
.dt,.dt2{stroke:rgba(245,243,238,.26);stroke-width:.22}
.dt-mj{stroke:#8F7BFF;stroke-width:.42;opacity:.95}
.dt2-mj{stroke:rgba(245,243,238,.5);stroke-width:.3}
.dial-rim{fill:none;stroke:rgba(245,243,238,.09);stroke-width:.18}
.dial-ok{fill:none;stroke:#43D69A;stroke-width:.7;stroke-linecap:round;opacity:.95}
.dial-idx{fill:#B7A9FF}
.dial-r1,.dial-r2{transform-origin:50% 50%;transform-box:view-box}
@supports (animation-timeline: scroll()){
  .dial-r1{animation:dialTurn linear both;animation-timeline:scroll(root);animation-range:0% 34%}
  .dial-r2{animation:dialTurnB linear both;animation-timeline:scroll(root);animation-range:0% 34%}
}
@supports not (animation-timeline: scroll()){
  .dial-r1{animation:dialDrift 110s linear infinite}
  .dial-r2{animation:dialDriftB 150s linear infinite}
}
@keyframes dialTurn{to{transform:rotate(210deg)}}
@keyframes dialTurnB{to{transform:rotate(-140deg)}}
@keyframes dialDrift{to{transform:rotate(360deg)}}
@keyframes dialDriftB{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion: reduce){.dial-r1,.dial-r2{animation:none}}

/* entrance (the one authored moment) */
@keyframes wordIn{from{opacity:0;filter:blur(8px);transform:translateY(12px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
.w{display:inline-block;opacity:0;animation:wordIn .9s cubic-bezier(.22,.61,.36,1) forwards}
.w1{animation-delay:.1s}.w2{animation-delay:.16s}.w3{animation-delay:.22s}.w4{animation-delay:.28s}
@keyframes maskUp{from{transform:translateY(112%)}to{transform:translateY(0)}}
.mask{overflow:hidden}
.mask>*{display:block;transform:translateY(112%);animation:maskUp .9s var(--ease-out) forwards}
.mask>.hero-ctas{display:flex}
.d4>*{animation-delay:.05s}.d5>*{animation-delay:.5s}.d6>*{animation-delay:.62s}.d7>*{animation-delay:.76s}
@keyframes ringdraw{to{stroke-dashoffset:0}}

/* movements */
.mv{position:relative}
.wrapx{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.mv-head{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.mv-head .lede{margin-top:1.1rem}

/* rhythm: generous quiet between movements, tight inside groups */
.q-lg{padding-block:clamp(7rem,13vh,10.5rem) clamp(4.5rem,8vh,6.5rem)}
.q-md{padding-block:clamp(5rem,9vh,7rem) clamp(4rem,7vh,5.5rem)}

/* the custody line */
.linewrap{position:relative}
#cline{position:absolute;top:0;bottom:0;left:clamp(22px,4.5vw,58px);width:2px;background:var(--accent);opacity:.85;transform-origin:top;pointer-events:none;z-index:2}
@supports (animation-timeline: view()) {
  #cline{animation:clineGrow linear both;animation-timeline:view();animation-range:cover 0% cover 92%}
  @keyframes clineGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
.rail-tick{position:absolute;top:clamp(3.2rem,5.5vh,4.4rem);left:clamp(22px,4.5vw,58px);display:flex;align-items:center;gap:12px;pointer-events:none;z-index:2;transform:translateY(-50%)}
.rail-tick i{display:block;width:14px;height:2px;background:var(--line);transition:background .3s ease}
.rail-tick span{font-size:12.5px;font-weight:560;color:var(--ink-3);letter-spacing:.005em;opacity:.85;transition:color .3s ease}
.rail-tick.live i{background:var(--accent)}
.rail-tick.live span{color:var(--accent)}
.theater .rail-tick span{color:rgba(245,244,241,.55)}
.theater .rail-tick.live span{color:#B7A9FF}
.theater .rail-tick i{background:rgba(245,244,241,.25)}
.theater .rail-tick.live i{background:#B7A9FF}
#cline-end{position:absolute;bottom:-13px;left:calc(clamp(22px,4.5vw,58px) - 12px);z-index:2;pointer-events:none}
#cline-end .ring{stroke:var(--accent);stroke-width:1.8;fill:var(--paper);stroke-linecap:round}
#cline-end .tick{stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion: reduce){#cline{animation:none;transform:none}}
@media (max-width:1080px){#cline,.rail-tick,#cline-end{display:none}}
/* signal in the wire: a slow light pulse travels the custody line */
#cline::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(122,223,182,.95) 50%,transparent 100%) no-repeat;background-size:100% 130px;background-position:0 -130px;animation:clinePulse 8.5s linear infinite}
@keyframes clinePulse{0%{background-position:0 -130px}70%{background-position:0 calc(100% + 130px)}100%{background-position:0 calc(100% + 130px)}}
@media (prefers-reduced-motion: reduce){#cline::after{animation:none;display:none}}

/* pipeline movement */
.mid-cta{display:flex;align-items:center;gap:18px;margin-top:2.4rem;flex-wrap:wrap}
.mid-cta .lead{font-size:1.05rem;font-weight:620;color:var(--ink)}

/* theater */
.theater{background:var(--night);color:var(--paper)}
.theater-head{padding:clamp(6rem,12vh,9rem) 0 clamp(3.5rem,7vh,5rem)}
.theater-head .h2{color:var(--paper);max-width:16ch}
.theater-head .lede{color:rgba(245,244,241,.66)}
.theater-exit{height:clamp(4rem,9vh,7rem)}

/* bento */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a a b" "c d b" "e f f";gap:16px;margin-top:3rem}
.cell{border-radius:14px;padding:28px 26px;display:flex;flex-direction:column;gap:10px;min-height:170px;transition:transform .3s var(--ease-out),border-color .3s ease,box-shadow .3s ease}
.cell:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cell-sheet:hover{border-color:rgba(91,71,207,.35)}
.cell .t{font-size:1.14rem;font-weight:680;font-stretch:106%;letter-spacing:-.012em}
.cell p{margin:0;font-size:.95rem;line-height:1.58;color:var(--ink-2)}
.cell-sheet{background:var(--sheet);border:1px solid var(--line)}
.cell-accent{background:var(--accent-soft)}
.cell-accent p{color:#3E3760}
.cell-panel{background:var(--panel)}
.cell-a{grid-area:a;justify-content:flex-end;min-height:230px}
.cell-a .t{font-size:1.45rem}
.cell-b{grid-area:b;justify-content:space-between}
.cell-c{grid-area:c}.cell-d{grid-area:d}.cell-e{grid-area:e}
.cell-f{grid-area:f;flex-direction:row;align-items:center;gap:26px}
.cell-f .t{flex:none;max-width:11ch}
.cell-f p{max-width:52ch}
.bigseal{align-self:center;margin-top:12px}
.bigseal .ring2{stroke:var(--ok);stroke-width:2;fill:none;stroke-linecap:round}
.bigseal .tick2{stroke:var(--ok);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cell-b .verified{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:650;color:var(--ok)}

/* results: the meter wall */
.stat-ledger{max-width:1160px;margin:3.2rem auto 0;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.stat-row{position:relative;display:block;padding:2.3rem 0 2rem}
.stat-row::before{content:"";position:absolute;left:0;top:0;height:1px;width:100%;background:var(--line);transform-origin:left}
.stat-row:last-child::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line)}
.sthead{display:grid;grid-template-columns:minmax(210px,360px) 1fr;gap:1rem 3rem;align-items:baseline}
.stat-row .n{font-size:clamp(3rem,5.2vw,4.8rem);font-weight:800;font-stretch:122%;letter-spacing:-.025em;line-height:.95;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.stat-row .n .u{color:var(--accent)}
.stat-row p{margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink-2);max-width:52ch}
/* full-width row instruments */
.siw{display:block;width:100%;height:auto;margin-top:1.5rem;overflow:visible}
.siw .tr{stroke:var(--line);stroke-width:1.3;fill:none}
.siw .trf{fill:var(--line-2);stroke:var(--line);stroke-width:1}
.siw .tk{stroke:#B9B3A6;stroke-width:1.1}
.siw .lab{font-family:'Archivo','Inter',Arial,sans-serif;font-size:11.5px;font-weight:650;fill:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.siw .lab-ok{fill:var(--ok)}
.siw .lab-br{fill:var(--accent)}
.si-g .fl{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:750;stroke-dashoffset:0}
.si-g .zone{fill:rgba(30,122,85,.10)}
.si-g .zbr{stroke:var(--ok);stroke-width:1.4;fill:none}
.si-g .mk{fill:var(--accent);stroke:#fff;stroke-width:1.5;transform:translateX(750px)}
.si-m .win{fill:var(--ok);opacity:.9;transform-box:fill-box;transform-origin:left center}
.si-t .tl{stroke-width:2.6;stroke-linecap:butt;stroke-dasharray:14 8;fill:none}
.si-t .t1{stroke:var(--accent)}
.si-t .t2{stroke:#9D8CFF}
.si-t .t3{stroke:var(--ok)}
.si-t .tclip{transform-box:view-box;transform-origin:left center}
.si-c .seg{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:333;stroke-dashoffset:0}
.si-c .seg2{stroke:#9D8CFF;stroke-dasharray:627}
.si-c .node{fill:var(--sheet);stroke:var(--accent);stroke-width:1.8}
.si-c .node-ok{fill:var(--ok-soft);stroke:var(--ok)}
.si-c .ntick{stroke:var(--ok);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* armed by JS only when motion is allowed; play cascades the wall in */
#results.arm .stat-row{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .85s var(--ease-out)}
#results.arm .stat-row::before{transform:scaleX(0);transition:transform 1.1s var(--ease-out)}
#results.arm .sr2{transition-delay:.14s}#results.arm .sr3{transition-delay:.28s}#results.arm .sr4{transition-delay:.42s}
#results.arm .sr2::before{transition-delay:.14s}#results.arm .sr3::before{transition-delay:.28s}#results.arm .sr4::before{transition-delay:.42s}
#results.arm .si-g .fl{stroke-dashoffset:750;transition:stroke-dashoffset 1.7s var(--ease-out) .45s}
#results.arm .si-g .mk{transform:translateX(0);transition:transform 1.7s var(--ease-out) .45s}
#results.arm .si-g .zone,#results.arm .si-g .zbr,#results.arm .si-g .zlab{opacity:0;transition:opacity .6s ease 1.9s}
#results.arm .si-m .win{transform:scaleX(0);transition:transform 1.4s var(--ease-out) .6s}
#results.arm .si-m .wbr{opacity:0;transition:opacity .6s ease 1.8s}
#results.arm .si-t .tclip{transform:scaleX(0);transition:transform 1.9s var(--ease-out) .55s}
#results.arm .si-c .seg{stroke-dashoffset:333;transition:stroke-dashoffset .9s var(--ease-out) .6s}
#results.arm .si-c .seg2{stroke-dashoffset:627;transition:stroke-dashoffset 1.2s var(--ease-out) 1.4s}
#results.arm .si-c .n1{opacity:0;transition:opacity .5s ease 1.4s}
#results.arm .si-c .n2{opacity:0;transition:opacity .5s ease 2.5s}
#results.play .stat-row{opacity:1;transform:none}
#results.play .stat-row::before{transform:scaleX(1)}
#results.play .si-g .fl{stroke-dashoffset:0}
#results.play .si-g .mk{transform:translateX(750px)}
#results.play .si-g .zone,#results.play .si-g .zbr,#results.play .si-g .zlab{opacity:1}
#results.play .si-m .win{transform:scaleX(1)}
#results.play .si-m .wbr{opacity:1}
#results.play .si-t .tclip{transform:scaleX(1)}
#results.play .si-c .seg,#results.play .si-c .seg2{stroke-dashoffset:0}
#results.play .si-c .n1,#results.play .si-c .n2{opacity:1}

/* rollout day ledger */
.day-ledger{max-width:1160px;margin:3rem auto 0;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.day-row{display:grid;grid-template-columns:130px 1fr;gap:1rem 2.6rem;border-top:1px solid var(--line);padding:1.6rem 0 1.8rem}
.day-row .d{font-weight:720;font-stretch:112%;font-size:1.08rem;color:var(--accent);font-variant-numeric:tabular-nums}
.day-row p{margin:0;color:var(--ink-2);font-size:1.03rem;line-height:1.6;max-width:58ch}
.day-row:last-child{border-bottom:1px solid var(--line)}
.gov-line{max-width:1160px;margin:2.2rem auto 0;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.gov-line p{margin:0;font-size:.97rem;line-height:1.6;color:var(--ink-3);max-width:66ch}

/* rollout: the horizontal passage — full-bleed slides, the whole site travels right */
.hpass-wrap{position:relative}
.hpass-sticky{position:sticky;top:0;height:100dvh;overflow:hidden;background:linear-gradient(160deg,#F6F4FB 0%,#F2EFF9 100%);border-block:1px solid rgba(91,71,207,.14)}
/* the traveling sky: the room's light journeys with the story */
.hp-ground{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hp-ground i{position:absolute;width:84vw;height:84vh;border-radius:50%;filter:blur(52px);will-change:transform,opacity}
.gnd1{left:-20vw;top:-26vh;background:radial-gradient(closest-side,rgba(112,128,255,.8),rgba(126,138,240,.3) 55%,transparent 76%);opacity:.7}
.gnd2{left:16vw;top:10vh;background:radial-gradient(closest-side,rgba(146,96,255,.78),rgba(188,124,255,.26) 58%,transparent 76%);opacity:.45}
.gnd3{right:-26vw;top:-10vh;background:radial-gradient(closest-side,rgba(38,206,142,.82),rgba(122,223,182,.28) 55%,transparent 76%);opacity:.12}
.hp-ground::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");opacity:.05}
.hpass-sticky::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(91,71,207,.08)}
#rollout.static .hp-ground i{filter:blur(60px)}
.hpass-clip{height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 36px,#000 148px,#000 calc(100% - 90px),rgba(0,0,0,.15) 100%);mask-image:linear-gradient(90deg,transparent 36px,#000 148px,#000 calc(100% - 90px),rgba(0,0,0,.15) 100%)}
.hpass-track{display:flex;align-items:stretch;height:100%;will-change:transform}
#rollout.static .hpass-clip{height:auto;-webkit-mask-image:none;mask-image:none}
.hslide{position:relative;flex:none;width:100vw;height:100%;display:flex;align-items:center;border-left:1px solid rgba(91,71,207,.10)}
.hslide:first-child{border-left:0}
.hp-body{position:relative;z-index:1;max-width:1160px;width:100%;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.hp-kick{display:block;font-size:.78rem;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:1.2rem}
.hp-day{font-size:clamp(3.2rem,7.5vw,6.5rem);font-weight:800;font-stretch:122%;letter-spacing:-.025em;line-height:.95;margin:0;color:var(--ink);text-wrap:balance}
.hp-sub{display:block;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:700;font-stretch:108%;letter-spacing:-.014em;margin-top:1.2rem}
.hp-body p{margin:.8rem 0 0;font-size:1.05rem;line-height:1.62;color:var(--ink-2);max-width:52ch}
.hp-list{list-style:none;margin:1.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.hp-list li{position:relative;padding-left:27px;font-size:.97rem;font-weight:550;color:var(--ink-2)}
.hp-list li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;border:1.5px solid var(--ok)}
.hp-list li::after{content:"";position:absolute;left:4px;top:6.5px;width:8px;height:4.5px;border-left:1.5px solid var(--ok);border-bottom:1.5px solid var(--ok);transform:rotate(-45deg)}
.hp-ghost{position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-size:clamp(14rem,27vw,25rem);font-weight:800;font-stretch:122%;line-height:1;color:transparent;background:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.3) 55%,rgba(255,255,255,.07) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(70,56,159,.3);filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 18px 36px rgba(70,56,159,.22));pointer-events:none;user-select:none}
.hslide-ok .hp-ghost{-webkit-text-stroke-color:rgba(30,122,85,.35);filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 18px 36px rgba(30,122,85,.26))}
.hp-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#rollout.static .hp-bg{display:none}
/* THE WIRE: the page's custody line turns horizontal and becomes the timeline.
   A signal-head rides at viewport center; the traveled wire burns lit behind it;
   each stage is a port that docks as the light reaches it. */
.hpass-track{position:relative}
.hp-spine{position:absolute;left:0;top:62%;height:0;width:100%;pointer-events:none}
.sp-base{position:absolute;top:-1px;height:2px;left:0;width:0;background:repeating-linear-gradient(90deg,rgba(91,71,207,.26) 0 10px,transparent 10px 22px);border-radius:2px}
.sp-lit{position:absolute;top:-2px;height:4px;left:0;width:0;overflow:hidden;background:linear-gradient(90deg,rgba(91,71,207,.35),#6C55E8 calc(100% - 420px),#8F7BFF calc(100% - 70px),#B7A9FF 100%);border-radius:4px;box-shadow:0 0 22px -2px rgba(108,85,232,.75),0 0 60px -6px rgba(108,85,232,.4)}
.sp-lit::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.3) 26px 34px);opacity:.5;animation:wireFlow 1.1s linear infinite}
@keyframes wireFlow{to{background-position:34px 0}}
.sp-head{position:absolute;top:0;left:0;width:0;height:0}
.sp-head::before{content:"";position:absolute;left:-208px;top:-3px;width:200px;height:6px;background:linear-gradient(90deg,transparent,rgba(183,169,255,.85));border-radius:6px;filter:blur(1px)}
.sp-head::after{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(122,99,240,.95),0 0 34px 8px rgba(122,99,240,.85),0 0 90px 22px rgba(122,99,240,.4);animation:headBreath 2.2s ease-in-out infinite}
@keyframes headBreath{50%{box-shadow:0 0 0 4px rgba(122,99,240,.95),0 0 46px 12px rgba(122,99,240,.95),0 0 110px 30px rgba(122,99,240,.55)}}
@media (prefers-reduced-motion: reduce){.sp-lit::after,.sp-head::after{animation:none}}
/* body anatomy: title above the wire, deliverables hang beneath the port */
.hp-body{--hpx:clamp(1.25rem,5vw,4rem)}
.hslide .hp-body{position:absolute;inset:0;padding-inline:var(--hpx)}
.hslide-intro .hp-body{position:relative;inset:auto}
.hp-above{position:absolute;left:var(--hpx);right:var(--hpx);bottom:calc(38% + 46px)}
.hp-above .hp-kick{margin-bottom:1rem}
.hp-above .hp-day{font-size:clamp(3rem,6.5vw,5.6rem)}
.hp-above .hp-sub{margin-top:.9rem}
.hp-node{position:absolute;left:var(--hpx);top:62%;transform:translate(-6px,-50%);width:34px;height:34px;z-index:2}
.hp-node svg{display:block;width:100%;height:100%;overflow:visible}
.hp-node .nr{fill:#F3F0FB;stroke:#B9AEF0;stroke-width:2;transition:stroke .35s ease,fill .35s ease,stroke-width .35s ease}
.hp-node .nt{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18;stroke-dashoffset:18}
.hp-node.on .nr{stroke:#6C55E8;stroke-width:2.6;filter:drop-shadow(0 0 12px rgba(108,85,232,.9))}
.hp-node.done .nr{fill:var(--ok);stroke:var(--ok)}
.hp-node.done .nt{transition:stroke-dashoffset .45s ease .12s;stroke-dashoffset:0}
.hp-node.done svg{animation:portPop .5s var(--ease-out)}
@keyframes portPop{0%{transform:scale(1)}40%{transform:scale(1.32)}100%{transform:scale(1)}}
.hp-node::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(30,122,85,.7);opacity:0;transform:scale(.6);pointer-events:none}
.hp-node.done::after{animation:portBurst .8s ease-out}
@keyframes portBurst{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.5)}}
.hp-node.done~.hp-below::before{background:linear-gradient(180deg,rgba(30,122,85,.55),rgba(30,122,85,.06))}
.hp-ghost{transition:opacity .5s ease,filter .6s ease;opacity:.9}
.hslide.live .hp-ghost{opacity:1;-webkit-text-stroke-color:rgba(91,71,207,.45);filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 24px 48px rgba(70,56,159,.34))}
.hslide-ok.live .hp-ghost{-webkit-text-stroke-color:rgba(30,122,85,.5);filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) drop-shadow(0 24px 48px rgba(30,122,85,.34))}
@media (prefers-reduced-motion: reduce){.hp-node.done svg,.hp-node.done::after{animation:none}}
.hp-below{position:absolute;left:var(--hpx);right:var(--hpx);top:calc(62% + 44px)}
.hp-below::before{content:"";position:absolute;left:10px;top:-38px;height:30px;width:1px;background:linear-gradient(180deg,rgba(91,71,207,.4),rgba(91,71,207,.08))}
.hp-below p{margin:0}
.hp-below .hp-list{margin-top:1.2rem}
/* ===== v21: THE BLUEPRINT AT NIGHT — the custody drawing on the light table ===== */
#arch-mv{
  --line:rgba(245,243,238,.17);--line-2:rgba(245,243,238,.08);
  --tx:#F5F3EE;--tx-2:rgba(245,243,238,.74);--tx-3:rgba(245,243,238,.5);
  --ind:#8F7BFF;--ind-deep:#B7A9FF;--ind-soft:rgba(143,123,255,.16);
  --ok:#43D69A;--ok-soft:rgba(67,214,154,.12);--warn:#FF6B74;
  --card:#120E28;--card-2:rgba(255,255,255,.03);
  --ink:#F5F3EE;--ink-2:rgba(245,243,238,.74);--ink-3:rgba(245,243,238,.5);
  --accent:#8F7BFF;--accent-deep:#B7A9FF;--sheet:#120E28;
  color:#F5F3EE;
  background:
    radial-gradient(rgba(245,244,241,.045) 1px,transparent 1px),
    radial-gradient(46% 60% at 74% 22%,rgba(96,70,235,.2),transparent 66%),
    radial-gradient(30% 44% at 12% 88%,rgba(53,36,140,.18),transparent 70%),
    #0D0A1F;
  background-size:26px 26px,auto,auto,auto;
  border-block:1px solid rgba(183,169,255,.16);
  margin-block:clamp(2rem,4vh,3rem)}
#arch-mv .draw-card{background:rgba(10,8,24,.5);border-color:rgba(183,169,255,.22);box-shadow:0 34px 80px -34px rgba(0,0,0,.65)}
#arch-mv .sc-node,#arch-mv .sc-frame,#arch-mv .sc-chip{fill:#14102B}
#arch-mv #engrid path{stroke:rgba(245,243,238,.06)}
#arch-mv rect[fill="#fff"]{fill:#0D0A1F}
#arch-mv .sc-coord{fill:rgba(245,243,238,.35)}
#arch-mv .sc-dim{stroke:rgba(245,243,238,.35)}
#arch-mv .sc-dimarr{fill:rgba(245,243,238,.35)}
#arch-mv .sc-busline{stroke:#8F7BFF;filter:drop-shadow(0 0 7px rgba(143,123,255,.55))}
#arch-mv .sc-frame{stroke:#B7A9FF;filter:drop-shadow(0 0 14px rgba(143,123,255,.3))}
#arch-mv .sc-port{filter:drop-shadow(0 0 10px rgba(143,123,255,.5))}
#arch-mv .sc-flowanim{opacity:.5}
#arch-mv .draw-card.run .sc-flowanim{opacity:1}
#arch-mv .rail-tick span{color:rgba(245,243,238,.55)}
#arch-mv .rail-tick i{background:rgba(245,243,238,.25)}
#arch-mv .rail-tick.live span{color:#B7A9FF}
#arch-mv .rail-tick.live i{background:#B7A9FF}
/* light-on-dark type compensation: small text gets size + brightness back */
#arch-mv .sc-sub{font-size:11.5px;fill:rgba(245,243,238,.8)}
#arch-mv .sc-chiptx{font-size:10px}
#arch-mv .sc-lab{fill:rgba(245,243,238,.58)}
#arch-mv .sc-lab-ok{fill:var(--ok)}
#arch-mv .sc-lab-br{fill:var(--ind)}
#arch-mv .sc-lab-warn{fill:var(--warn)}
#arch-mv .figcap{color:rgba(245,243,238,.62)}
#arch-mv .tb-k{fill:rgba(245,243,238,.55)}
#arch-mv .blk-lede{color:rgba(245,243,238,.74)}

/* ===== v19: THE NIGHT CHART — the rollout joins the vault's night family ===== */
#rollout .hpass-sticky{
  --line:rgba(245,243,238,.15);--line-2:rgba(245,243,238,.07);
  --ink:#F5F3EE;--ink-2:rgba(245,243,238,.72);--ink-3:rgba(245,243,238,.5);
  --accent:#8F7BFF;--accent-deep:#B7A9FF;--ok:#43D69A;--ok-soft:rgba(67,214,154,.12);
  --sheet:rgba(10,8,24,.55);--panel:rgba(255,255,255,.04);
  color:#F5F3EE;
  background:
    radial-gradient(rgba(245,244,241,.05) 1px,transparent 1px),
    radial-gradient(52% 68% at 70% 30%,rgba(96,70,235,.24),transparent 64%),
    radial-gradient(30% 42% at 16% 80%,rgba(53,36,140,.2),transparent 70%),
    #0D0A1F;
  background-size:26px 26px,auto,auto,auto;
  border-block:1px solid rgba(183,169,255,.16)}
#rollout .gnd1{background:radial-gradient(closest-side,rgba(96,80,235,.5),rgba(96,80,235,.12) 55%,transparent 76%)}
#rollout .gnd2{background:radial-gradient(closest-side,rgba(146,96,255,.44),rgba(146,96,255,.1) 58%,transparent 76%)}
#rollout .gnd3{background:radial-gradient(closest-side,rgba(43,205,143,.42),rgba(43,205,143,.1) 55%,transparent 76%)}
#rollout .hp-ghost{background:linear-gradient(180deg,rgba(183,169,255,.3),rgba(183,169,255,.06) 68%,transparent);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgba(183,169,255,.36);filter:drop-shadow(0 0 28px rgba(122,99,240,.35))}
#rollout .hslide.live .hp-ghost{-webkit-text-stroke-color:rgba(203,192,255,.55);filter:drop-shadow(0 0 44px rgba(122,99,240,.55))}
#rollout .hslide-ok .hp-ghost,#rollout .hslide-ok.live .hp-ghost{-webkit-text-stroke-color:rgba(67,214,154,.45);filter:drop-shadow(0 0 40px rgba(67,214,154,.45))}
#rollout .hp-sub{background:linear-gradient(92deg,#7ADFB6 0%,#B7A9FF 60%,#8F7BFF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
#rollout .sp-base{background:repeating-linear-gradient(90deg,rgba(245,243,238,.3) 0 10px,transparent 10px 22px)}
#rollout .hp-node .nr{fill:#14102B;stroke:#8F7BFF}
#rollout .hp-node.on .nr{stroke:#C6BAF2}
#rollout .hp-node.done .nr{fill:var(--ok);stroke:var(--ok)}
#rollout .hslide{border-left-color:rgba(183,169,255,.1)}
#rollout .hslide-ok{background:linear-gradient(120deg,transparent 30%,rgba(67,214,154,.1))}
#rollout .hpass-rail .bar{background:rgba(245,243,238,.16)}
#rollout .hp-below::before{background:linear-gradient(180deg,rgba(143,123,255,.5),rgba(143,123,255,.08))}
#rollout .hp-node.done~.hp-below::before{background:linear-gradient(180deg,rgba(67,214,154,.6),rgba(67,214,154,.08))}
#rollout .hp-stat b{color:#43D69A}
#rollout.static .hp-spine,#rollout.static .hp-node{display:none}
#rollout.static .hslide .hp-body{position:relative;inset:auto}
#rollout.static .hp-above,#rollout.static .hp-below{position:static}
#rollout.static .hp-below::before{display:none}
@media (max-height:780px){
  .hp-above{bottom:calc(38% + 26px)}
  .hp-below{top:calc(62% + 30px)}
  .hp-below::before{top:-26px;height:20px}
  .hp-above .hp-day{font-size:clamp(2.6rem,5.5vw,4.4rem)}
  .hp-below .hp-list{margin-top:.9rem;gap:.45rem}
}
/* the closer */
.hp-close{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem);margin-top:1.6rem;flex-wrap:wrap}
.hslide-ok .hp-below{top:calc(62% + 32px)}
.hslide-ok .hp-list{margin-top:.9rem;gap:.45rem}
.hp-stat{display:flex;flex-direction:column;gap:2px}
.hp-stat b{font-size:clamp(1.7rem,2.5vw,2.3rem);font-weight:800;font-stretch:122%;letter-spacing:-.02em;line-height:1;color:var(--ok)}
.hp-stat span{font-size:.72rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hp-close .btn{flex:none}
.hslide-ok .hp-kick,.hslide-ok .hp-day{color:var(--ok)}
.hslide-ok{background:linear-gradient(120deg,transparent 30%,rgba(30,122,85,.07))}
.hp-cue{display:inline-flex;align-items:center;gap:11px;margin-top:2.6rem;font-size:.8rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hp-cue i{display:block;width:46px;height:1px;background:var(--ink-3);position:relative}
.hp-cue i::after{content:"";position:absolute;right:0;top:-3.5px;border-left:6px solid var(--ink-3);border-top:4px solid transparent;border-bottom:4px solid transparent}
.hpass-rail{position:absolute;left:0;right:0;bottom:clamp(1.4rem,4vh,2.4rem);max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.hpass-rail .bar{position:relative;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hpass-rail .bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--accent)}
.hp-stops{display:flex;justify-content:space-between;margin-top:10px}
.hp-stops span{font-size:.72rem;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);transition:color .3s ease}
.hp-stops span.on{color:var(--accent)}
#rollout.static .hpass-wrap{height:auto!important}
#rollout.static .hpass-sticky{position:static;height:auto;padding-block:clamp(3rem,6vh,4.5rem) 0}
#rollout.static .hpass-track{flex-direction:column;transform:none!important;height:auto}
#rollout.static .hslide{width:100%;height:auto;border-left:0;border-top:1px solid var(--line-2);padding-block:2.4rem}
#rollout.static .hslide:first-child{border-top:0}
#rollout.static .hp-ghost,#rollout.static .hpass-rail,#rollout.static .hp-cue{display:none}

/* bento stat lines */
.cell-stat{font-size:1.55rem;font-weight:780;font-stretch:118%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-accent .cell-stat{color:var(--accent-deep)}

/* fit */
.fit-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.fit-list{border-top:1px solid var(--line);padding-top:1.4rem;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 2rem}
.fit-list span{font-size:1rem;color:var(--ink-2);line-height:1.5}
.fit-list .cap{grid-column:1/-1;font-size:.85rem;font-weight:650;color:var(--ink-3);margin-bottom:.3rem}
.fit-12 span{display:flex;align-items:baseline;gap:10px}
.fit-12 span b{color:var(--accent);font-weight:750;font-variant-numeric:tabular-nums;font-size:.78rem;letter-spacing:.04em;flex:none}
.fit-12 .cap{display:block;color:var(--accent-deep);font-size:.9rem;letter-spacing:.02em}
.excl{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:32px 36px;margin-top:3.4rem}
.excl .t{font-size:1.35rem;font-weight:700;font-stretch:108%;letter-spacing:-.014em}
.excl p{margin:.4rem 0 0;font-size:.98rem;line-height:1.55;color:var(--ink-2);max-width:52ch}

/* proof */
.proof{background:var(--panel)}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem 3.5rem;max-width:920px;margin:3rem auto 0}
.proof-grid .item .t{font-size:1.05rem;font-weight:680}
.proof-grid .item p{margin:.35rem 0 0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.proof-cta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:3.2rem;flex-wrap:wrap}
.proof-cta .lead{font-size:1rem;color:var(--ink-2)}
.pull{border-top:1px solid var(--line);max-width:820px;margin:3.6rem auto 0;padding-top:2.6rem}
.pull p{margin:0;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.42;font-weight:540;letter-spacing:-.012em;text-align:center}

/* close */
.close{background:var(--night-2);color:#fff;text-align:center;padding:clamp(7rem,14vh,11rem) clamp(1.25rem,5vw,3rem) clamp(5.5rem,10vh,8rem);position:relative;overflow:hidden}
.close::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;background:radial-gradient(46% 60% at 50% 42%,rgba(91,71,207,.34),transparent 70%);pointer-events:none}
.close h2{position:relative;font-size:clamp(3rem,6vw,5.2rem);max-width:14ch;margin-inline:auto;color:#fff}
.close .lede{position:relative;color:rgba(255,255,255,.78);margin:1.6rem auto 0;text-align:center}
.close-ctas{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:2.6rem;flex-wrap:wrap}
.close-fine{position:relative;display:block;margin-top:2.2rem;font-size:.85rem;color:rgba(255,255,255,.55)}

/* floating contact: always one click away */
.fab-cta{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vh,1.6rem);z-index:30;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .35s ease,transform .45s var(--ease-out);box-shadow:0 6px 16px -6px rgba(70,56,159,.55),0 22px 44px -16px rgba(70,56,159,.45)}
.fab-cta.show{opacity:1;pointer-events:auto;transform:none}
@media (max-width:720px){.fab-cta{height:46px;padding:0 18px;font-size:13.5px}}

/* contact popup: the real site's modal */
.cmodal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow:auto;background:rgba(16,12,36,.6);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s}
.cmodal.open{opacity:1;visibility:visible;pointer-events:auto;backdrop-filter:blur(4px)}
.cm-card{background:#fff;border-radius:18px;max-width:640px;width:100%;padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 30px 80px -20px rgba(20,16,43,.45);transform:translateY(14px);transition:transform .3s var(--ease-out);position:relative}
.cmodal.open .cm-card{transform:none}
.cm-x{position:absolute;right:16px;top:12px;background:none;border:0;font:inherit;font-size:22px;color:var(--ink-3);cursor:pointer;line-height:1;padding:6px}
.cm-x:hover{color:var(--ink)}
.cm-kick{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ok)}
.cm-card h3{font-size:clamp(1.35rem,2.4vw,1.65rem);font-weight:740;font-stretch:106%;letter-spacing:-.015em;margin:.5rem 0 0}
.cm-sub{margin:.6rem 0 1.4rem;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.cm-sub a{color:var(--ok);font-weight:600}
.cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.cm-f{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.cm-f label{font-size:.9rem;font-weight:650}
.cm-f label i{font-style:normal;font-weight:400;color:var(--ink-3);font-size:.8rem}
.cm-f input,.cm-f select,.cm-f textarea{font:inherit;font-size:.95rem;background:#FAF9F7;border:1px solid var(--line);border-radius:10px;padding:.65rem .8rem;color:var(--ink)}
.cm-f input:focus,.cm-f select:focus,.cm-f textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.cm-f textarea{min-height:110px;resize:vertical}
.cm-consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;line-height:1.55;color:var(--ink);margin:.3rem 0 1.2rem}
.cm-consent input{margin-top:3.5px}
.cm-consent a{color:var(--accent);text-decoration:underline}
.cm-send{width:100%;justify-content:center}
.cm-fine{margin:.9rem 0 0;text-align:center;font-size:.8rem;color:var(--ink-3)}
@media (max-width:560px){.cm-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.cmodal,.cm-card{transition:none}}

/* footer: the real site's column footer */
.bigfoot{border-top:1px solid var(--line);padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,4vw,3rem) 0}
.bf-grid{max-width:1160px;margin-inline:auto;display:grid;grid-template-columns:minmax(220px,1.6fr) 1fr 1fr 1.2fr 1fr;gap:2.5rem 3rem}
.bf-brand .l{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700}
.bf-brand p{margin:1rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-2);max-width:34ch}
.bf-brand .tc{display:inline-block;margin-top:1rem;font-size:.85rem;font-weight:600;color:var(--accent)}
.bf-brand .tc:hover{color:var(--accent-deep)}
.bf-h{display:block;font-size:.72rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.bf-col a{display:block;font-size:.9rem;color:var(--ink-2);padding:.32rem 0;line-height:1.4}
.bf-col a:hover{color:var(--ink)}
.bf-bottom{max-width:1160px;margin:3rem auto 0;border-top:1px solid var(--line-2);padding:1.6rem 0 2rem}
.bf-bottom p{margin:0 0 .8rem;font-size:.8rem;line-height:1.6;color:var(--ink-3)}
.bf-legal{display:flex;gap:.5rem 1.2rem;flex-wrap:wrap}
.bf-legal a{font-size:.8rem;color:var(--ink-3)}
.bf-legal a:hover{color:var(--ink)}
@media (max-width:1080px){.bf-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bf-grid{grid-template-columns:1fr}}

/* footer */
.foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:30px clamp(1.25rem,4vw,3rem);border-top:1px solid var(--line);flex-wrap:wrap}
.foot .l{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700}
.foot .addr{font-size:12.5px;color:var(--ink-3);font-weight:400;margin-left:12px}
.foot .r{display:flex;align-items:center;gap:22px}
.foot .r a{font-size:13.5px;color:var(--ink-3)}
.foot .r a:hover{color:var(--ink)}
.foot .r span{font-size:12.5px;color:var(--ink-3)}

/* responsive */
@media (max-width:1080px){
  .nav-links{display:none}
  .fit-grid{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr 1fr;grid-template-areas:"a a" "b c" "d e" "f f"}
}
@media (max-width:720px){
  .hero h1{font-size:clamp(2.2rem,10vw,2.8rem)}
  .hero h1 span{white-space:normal!important}
  .btn{height:48px;padding:0 20px;font-size:14px}
  .sthead{grid-template-columns:1fr;gap:.5rem}
  .stat-row .n{font-size:2.6rem}
  .cell-stat{white-space:normal}
  .day-row{grid-template-columns:1fr;gap:.3rem}
  .hero-scrim{background:linear-gradient(180deg,rgba(13,10,31,.9) 0%,rgba(13,10,31,.74) 55%,rgba(13,10,31,.4) 100%)}
  .hero-strip{position:relative;margin-top:3rem}
  .hs-note{display:none}
  .hs-cell:first-of-type{border-left:0;padding-left:0}
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e" "f"}
  .proof-grid{grid-template-columns:1fr}
  .excl{flex-direction:column;align-items:flex-start}
  .cell-f{flex-direction:column;align-items:flex-start;gap:10px}
  .cell-f .t{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .w,.mask>*{animation:none;opacity:1;transform:none;filter:none}
  html{scroll-behavior:auto}
}


/* ===== block 2 ===== */


:root{
  --gnd:#F5F4F1; --card:#FFFFFF; --card-2:#FAF9F7; --inkwell:#ECEBE6;
  --tx:#191D22; --tx-2:#474D53; --tx-3:#787E84;
  --ind:#5B47CF; --ind-deep:#46389F; --ind-soft:#EEEBFB;
  --warn:#B03038;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --measure:64ch;
}
.scene-stats b,[data-count]{font-variant-numeric:tabular-nums}
/* base rules the draw extract lost: bars scale from their own baseline, port dots hide until run */
.crm-bar{transform-box:fill-box;transform-origin:50% 100%}
.pd{visibility:hidden}
@supports not (offset-path: path("M0 0 L1 1")){.draw-card.run .pd{visibility:hidden}}
@keyframes rise{to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ringdraw{to{stroke-dashoffset:0}}
@keyframes scflow{to{stroke-dashoffset:-16}}
@keyframes ecg{0%{stroke-dashoffset:100}55%{stroke-dashoffset:0}70%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes crmbar{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
@keyframes pdt{0%{offset-distance:0%;opacity:0}10%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}


:root{
  --gnd:#F4F3F0; --card:#FFFFFF; --card-2:#FAF9F7; --inkwell:#ECEBE6;
  --tx:#191D22; --tx-2:#474D53; --tx-3:#787E84;
  --line:#DCDAD3; --line-2:#E8E6E0;
  --ind:#5B47CF; --ind-deep:#46389F; --ind-soft:#EEEBFB;
  --ok:#1E7A55; --ok-soft:#E4F1EA;
  --warn:#B03038;
  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --measure:64ch;
  --shadow:0 1px 2px rgba(25,29,34,.05),0 10px 30px -18px rgba(25,29,34,.18);
}


.kick{font-size:.82rem;font-weight:650;color:var(--ind);letter-spacing:.01em}

.chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;color:var(--tx-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.32rem .85rem}

.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}

  .fade-late{opacity:0;animation:fadeup .9s ease .5s forwards}


/* boundary scene */
.scene-card{margin-top:clamp(2.2rem,5vw,3.4rem);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}

.scene-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-2);flex-wrap:wrap}

.scene-head .t{font-weight:700;font-size:1.02rem}

.scene-legend{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.8rem;font-weight:550;color:var(--tx-2)}

.scene-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:.4rem;vertical-align:0}

.scene-stats{position:absolute;top:12px;left:14px;display:flex;gap:1.1rem;font-size:.72rem;color:var(--tx-3);background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:8px;padding:.38rem .8rem;flex-wrap:wrap}

.scene-stats b{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums}

.scene-stages{position:absolute;inset-inline:0;bottom:8px;height:26px;pointer-events:none}

.scene-stages span{position:absolute;transform:translateX(-50%);font-size:.7rem;font-weight:650;color:var(--tx-3);white-space:nowrap;text-align:center}

.scene-stages span::before{content:"";display:block;width:1px;height:6px;background:var(--line);margin:0 auto 2px}
.scene-stages{display:none}
.scene-stats{gap:.7rem;font-size:.68rem}

.scene-wrap{position:relative;height:clamp(280px,38vw,380px)}

.scene-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.scene-cap{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;padding:1rem 1.4rem;border-top:1px solid var(--line-2);font-size:.85rem;color:var(--tx-2)}

.scene-cap .mid{font-weight:650;color:var(--ind);text-align:center}

.scene-cap .r{text-align:right}
.scene-cap{grid-template-columns:1fr;text-align:left}
.scene-cap .r,.scene-cap .mid{text-align:left}

.scene-verify{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:999px;padding:.4rem .95rem;font-size:.8rem;font-weight:650;color:var(--ok)}

.scene-verify svg{display:block}

.scene-verify .ring{stroke:var(--ok);stroke-width:1.8;fill:none;stroke-linecap:round}

  .scene-verify .ring{stroke-dasharray:44;stroke-dashoffset:44;animation:ringdraw 1s cubic-bezier(.16,1,.3,1) 1.1s forwards}

  .scene-verify .tick{stroke-dasharray:16;stroke-dashoffset:16;animation:ringdraw .45s ease 1.9s forwards}

.blk-head .kick{display:block;margin-bottom:.7rem}

.mod-top .chip{font-size:.72rem;padding:.22rem .7rem;color:var(--ok);background:var(--ok-soft);border-color:transparent}

.cert-plate .kick{display:block;margin-bottom:.8rem}

.role .kick{font-size:.8rem}


/* reveal system */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}

.rv.in{opacity:1;transform:none}
.rv{opacity:1;transform:none;transition:none}


/* sections */
section.blk{padding-block:clamp(3.2rem,7vw,5.4rem)}

section.blk-alt{background:var(--card-2);border-block:1px solid var(--line-2)}

.blk-head{margin-bottom:2.2rem;max-width:860px}

.blk-head .kick{display:block;margin-bottom:.7rem}

.blk-head h2{font-size:clamp(2.15rem,3.8vw,3.3rem);font-weight:760;font-stretch:114%;letter-spacing:-.022em;line-height:1.02}

.blk-lede{max-width:var(--measure);color:var(--tx-2);font-size:1.08rem;margin-top:1rem}


/* drawing */
.draw-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:clamp(.8rem,2.5vw,1.6rem)}

.draw-scroll{overflow-x:auto}

.draw-scroll svg{display:block;min-width:780px;width:100%;height:auto}

.sc-name{font-family:var(--sans);font-weight:700;font-stretch:106%;font-size:15px;fill:var(--tx);letter-spacing:-.01em}

.sc-sub{font-family:var(--sans);font-size:11px;fill:var(--tx-2)}

.sc-lab{font-family:var(--sans);font-size:10px;font-weight:650;fill:var(--tx-3);letter-spacing:.07em;text-transform:uppercase}

.sc-lab-ok{fill:var(--ok)}

.sc-lab-br{fill:var(--ind)}

.sc-lab-warn{fill:var(--warn)}

.sc-zone{fill:var(--card-2);stroke:var(--line);stroke-width:1}

.sc-node{fill:#fff;stroke:var(--line);stroke-width:1.1}

.sc-node-strong{stroke:var(--tx-2);stroke-width:1.7}

.sc-nodehead{stroke:var(--line-2);stroke-width:1}

.sc-frame{fill:#fff;stroke:var(--ind);stroke-width:1.7}

.sc-frame-in{fill:none;stroke:var(--ind);stroke-width:.6;opacity:.55}

.sc-rivet{fill:none;stroke:var(--ind);stroke-width:1}

.sc-glyph{stroke:var(--tx-2);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

.sc-glyph-br{stroke:var(--ind)}

.sc-glyph-ok{stroke:var(--ok)}

.sc-flowbase{stroke:var(--line);stroke-width:1.2;fill:none}

.sc-arrhead{fill:var(--tx-2)}

.sc-busline{stroke:var(--tx-2);stroke-width:2.4;fill:none}

.sc-port{fill:var(--ind-soft);stroke:var(--ind);stroke-width:1.2}

.sc-chip{fill:#fff;stroke:var(--line);stroke-width:1;rx:6}

.sc-chiptx{font-family:var(--sans);font-size:9.5px;font-weight:650;fill:var(--tx-2)}

.sc-chiptx-br{fill:var(--ind)}

.sc-flowanim{fill:none;stroke-width:1.5;stroke-dasharray:4 12;stroke-linecap:round;opacity:.3}

.sc-flow-sig{stroke:var(--ind)}

.sc-flow-res{stroke:var(--ok)}

  .draw-card.run .sc-flowanim{opacity:.95;animation:scflow 1.5s linear infinite}

.sc-corner{stroke:var(--line);stroke-width:1;fill:none}
/* sheet craft: thesis line, grid references, dimension, draft-on-view */
.sc-thesis{font-family:var(--sans);font-size:11.5px;font-weight:650;fill:var(--ind-deep)}
.sc-coord{font-family:var(--sans);font-size:8.5px;font-weight:600;fill:#B9B3A6;letter-spacing:.08em}
.sc-dim{stroke:#B9B3A6;stroke-width:1;fill:none}
.sc-dimarr{fill:#B9B3A6}
.sc-dr{stroke-dasharray:1;stroke-dashoffset:1}
.draw-card.drawn .sc-dr{animation:scdraw 1s cubic-bezier(.16,1,.3,1) forwards}
.draw-card.drawn .drB{animation-delay:.25s}
.draw-card.drawn .drC{animation-delay:.55s}
@keyframes scdraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){
  .sc-dr{stroke-dashoffset:0}
  .draw-card.drawn .sc-dr{animation:none}
}

  .draw-card.run .ecg-trace{animation:ecg 3.4s linear infinite}

  .draw-card.run .crm-bar1{animation:crmbar 4.6s ease-in-out infinite}

  .draw-card.run .crm-bar2{animation:crmbar 5.8s ease-in-out infinite .7s}

  .draw-card.run .crm-bar3{animation:crmbar 3.9s ease-in-out infinite 1.3s}

    .draw-card.run .pd{visibility:visible}

    .draw-card.run .pd1{offset-path:path("M248 205 L375 205");animation:pdt 7s linear infinite}

    .draw-card.run .pd2{offset-path:path("M645 205 L758 205");animation:pdt 7s linear infinite 3.5s}

    .draw-card.run .pd3{offset-path:path("M508 314 L508 500");animation:pdt 6s linear infinite 1s}

    .draw-card.run .pd4{offset-path:path("M548 500 L548 314");animation:pdt 6s linear infinite 4s}

.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}


.kick{font-size:.82rem;font-weight:650;color:var(--ind);letter-spacing:.01em}


/* reveal system */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1)}

.rv.in{opacity:1;transform:none}
.rv{opacity:1;transform:none;transition:none}

.statusband .wrap{display:flex;gap:.6rem 1rem;flex-wrap:wrap;align-items:center;padding-block:.9rem}


/* sections */
section.blk{padding-block:clamp(3.2rem,7vw,5.4rem)}

section.blk-alt{background:var(--card-2);border-block:1px solid var(--line-2)}

.blk-head{margin-bottom:2.2rem;max-width:860px}

.blk-head .kick{display:block;margin-bottom:.7rem}

.blk-head h2{font-size:clamp(2.15rem,3.8vw,3.3rem);font-weight:760;font-stretch:114%;letter-spacing:-.022em;line-height:1.02}

.blk-lede{max-width:var(--measure);color:var(--tx-2);font-size:1.08rem;margin-top:1rem}

.sc-zone{fill:var(--card-2);stroke:var(--line);stroke-width:1}

.sc-busline{stroke:var(--tx-2);stroke-width:2.4;fill:none}

.sc-port{fill:var(--ind-soft);stroke:var(--ind);stroke-width:1.2}

.tb-line{stroke:var(--line);stroke-width:1}

.tb-k{font-family:var(--sans);font-size:9px;font-weight:650;fill:var(--tx-3);letter-spacing:.06em;text-transform:uppercase}

.tb-v{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--tx)}

.cert-plate .kick{display:block;margin-bottom:.8rem}

.role .kick{font-size:.8rem}

.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

.lg-id i{background:#3A4045}
.lg-sig i{background:var(--ind)}
.lg-int i{background:var(--ok)}
.lg-bot i{background:transparent;border:1.5px solid var(--warn);width:7px;height:7px}

.statusband .wrap{display:flex;gap:.6rem 1rem;flex-wrap:wrap;align-items:center;padding-block:.9rem}

.figcap{font-size:.88rem;color:var(--tx-3);max-width:72ch;margin:1.2rem auto .4rem;text-align:center}

.ecg-base{fill:none;stroke:var(--line);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

.ecg-trace{fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}

  .draw-card.run .ecg-trace{animation:ecg 3.4s linear infinite}

/* the five acts: an automatic mini film of one session being scored */
.film{position:relative;padding:0 clamp(1.25rem,4vw,3rem) clamp(3rem,6vh,4.5rem)}
.film-stage{position:relative;max-width:1280px;margin-inline:auto;display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4rem);align-items:center;background:radial-gradient(rgba(245,244,241,.05) 1px,transparent 1px),radial-gradient(120% 140% at 72% 40%,#1C1638 0%,#120E28 58%);background-size:22px 22px,auto;border:1px solid rgba(245,243,238,.09);border-radius:20px;padding:clamp(2rem,4vw,3.5rem);min-height:clamp(560px,68vh,700px);overflow:hidden}
.film-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 60% at 74% 38%,rgba(91,71,207,.15),transparent 70%);pointer-events:none}
.film-copy{position:relative;display:grid;align-content:center}
.fc{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s var(--ease-out)}
.fnum{font-size:.7rem;font-weight:650;letter-spacing:.22em;text-transform:uppercase;color:#8F7BFF;display:block;margin-bottom:.9rem}
.fc h3{font-size:clamp(1.7rem,2.6vw,2.5rem);font-weight:760;font-stretch:112%;letter-spacing:-.02em;line-height:1.04;margin:0;color:var(--paper);text-wrap:balance}
.fc p{color:rgba(245,244,241,.62);font-size:1.03rem;line-height:1.6;max-width:36ch;margin:1rem 0 0}
.film[data-act="1"] .fc1,.film[data-act="2"] .fc2,.film[data-act="3"] .fc3,.film[data-act="4"] .fc4,.film[data-act="5"] .fc5{opacity:1;transform:none}
.film-rail{position:relative;display:flex;flex-direction:column;gap:11px;margin-top:2.4rem;z-index:2}
.fr{display:flex;align-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:rgba(245,244,241,.42);font-size:.8rem;font-weight:600;letter-spacing:.04em;text-align:left;transition:color .3s ease}
.fr:hover{color:rgba(245,244,241,.75)}
.fr i{position:relative;display:block;width:60px;height:2px;background:rgba(245,244,241,.14);border-radius:2px;overflow:hidden;flex:none}
.fr i::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:#8F7BFF}
.fr.on{color:var(--paper)}
.fr.on i::after{animation:frFill 5.6s linear forwards}
.fr.done i::after{transform:scaleX(1);background:rgba(143,123,255,.45)}
@keyframes frFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.film-scenes{position:relative;display:grid;min-height:420px}
.scene{grid-area:1/1;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s ease,transform .7s var(--ease-out);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem}
.film[data-act="1"] .fsc1,.film[data-act="2"] .fsc2,.film[data-act="3"] .fsc3,.film[data-act="4"] .fsc4,.film[data-act="5"] .fsc5{opacity:1;transform:none;transition-delay:.12s}
.scap{font-size:.78rem;color:rgba(245,244,241,.45);letter-spacing:.04em;text-align:center}
.zchip{font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#7ADFB6;border:1px solid rgba(122,223,182,.35);border-radius:999px;padding:.2rem .6rem;white-space:nowrap}
/* act 1: the session card */
.scard{width:min(460px,100%);background:rgba(10,8,24,.66);border:1px solid rgba(143,123,255,.22);border-radius:14px;padding:18px 22px;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.sc1-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:12px;border-bottom:1px solid rgba(245,243,238,.09);font-size:.82rem;color:rgba(245,244,241,.55)}
.sc1-top b{color:var(--paper);font-weight:650}
.sigrow{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:9px 0;border-bottom:1px dashed rgba(245,243,238,.07);font-size:.88rem;color:rgba(245,244,241,.8);opacity:0;transform:translateX(-10px)}
.sigrow b{color:#7ADFB6;font-weight:650;font-variant-numeric:tabular-nums;flex:none}
.film[data-act="1"] .sigrow{animation:sigIn .5s var(--ease-out) forwards}
.film[data-act="1"] .sg1{animation-delay:.45s}
.film[data-act="1"] .sg2{animation-delay:.85s}
.film[data-act="1"] .sg3{animation-delay:1.25s}
.film[data-act="1"] .sg4{animation-delay:1.65s}
.film[data-act="1"] .sg5{animation-delay:2.05s}
@keyframes sigIn{to{opacity:1;transform:none}}
.sc1-foot{display:flex;justify-content:space-between;padding-top:12px;font-size:.8rem;color:rgba(245,244,241,.5)}
.sc1-foot b{color:var(--paper);font-variant-numeric:tabular-nums}
/* act 2: the bot gate */
.gatewrap{position:relative;width:min(500px,100%);height:250px}
.gline{position:absolute;left:52%;top:4%;bottom:4%;width:0;border-left:2px dashed rgba(230,86,96,.5)}
.glab{position:absolute;left:52%;top:-6px;transform:translateX(-50%);font-size:.66rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:rgba(230,86,96,.8);white-space:nowrap}
.gchip{position:absolute;left:0;display:flex;gap:.6rem;align-items:center;background:rgba(10,8,24,.72);border:1px solid rgba(143,123,255,.25);border-radius:10px;padding:.55rem .85rem;font-size:.8rem;color:rgba(245,244,241,.82);white-space:nowrap;opacity:0}
.gchip b{font-weight:650;font-variant-numeric:tabular-nums}
.g1{top:16%}.gbot{top:44%}.g3{top:72%}
.gbot{border-color:rgba(230,86,96,.4)}
.gbot b{color:#E67078}
.film[data-act="2"] .g1{animation:gPass 3.4s linear .3s infinite}
.film[data-act="2"] .g3{animation:gPass 3.4s linear 1.7s infinite}
.film[data-act="2"] .gbot{animation:gBurn 3.4s linear .9s infinite}
@keyframes gPass{0%{transform:translateX(0);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateX(430px);opacity:0}}
@keyframes gBurn{0%{transform:translateX(0);opacity:0}10%{opacity:1}42%{transform:translateX(200px) scale(1);opacity:1}52%{transform:translateX(212px) scale(1.04);opacity:1}62%{transform:translateX(216px) scale(.5);opacity:.5}70%,100%{transform:translateX(216px) scale(0);opacity:0}}
/* act 3: the probability dial */
.pwrap{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.pdial{width:min(320px,72vw);height:auto;overflow:visible}
.pt{stroke:rgba(245,243,238,.12);stroke-width:6;fill:none;stroke-linecap:round}
.pf{stroke:#8F7BFF;stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.film[data-act="3"] .pf{animation:pSweep 2.3s var(--ease-out) .4s forwards}
@keyframes pSweep{to{stroke-dashoffset:13}}
.pv{font-size:46px;font-weight:800;fill:#F5F3EE;text-anchor:middle}
.pl{font-size:10.5px;font-weight:650;fill:rgba(245,244,241,.5);text-anchor:middle;letter-spacing:.14em;text-transform:uppercase}
.fam{display:flex;gap:6px}
.fam i{width:24px;height:6px;border-radius:3px;background:rgba(245,243,238,.12)}
.film[data-act="3"] .fam i{animation:famOn .35s ease forwards}
.film[data-act="3"] .fam i:nth-child(1){animation-delay:.7s}
.film[data-act="3"] .fam i:nth-child(2){animation-delay:.85s}
.film[data-act="3"] .fam i:nth-child(3){animation-delay:1s}
.film[data-act="3"] .fam i:nth-child(4){animation-delay:1.15s}
.film[data-act="3"] .fam i:nth-child(5){animation-delay:1.3s}
.film[data-act="3"] .fam i:nth-child(6){animation-delay:1.45s}
.film[data-act="3"] .fam i:nth-child(7){animation-delay:1.6s}
.film[data-act="3"] .fam i:nth-child(8){animation-delay:1.75s}
.film[data-act="3"] .fam i:nth-child(9){animation-delay:1.9s}
@keyframes famOn{to{background:#8F7BFF}}
.bchip{font-size:.78rem;font-weight:650;letter-spacing:.06em;color:#7ADFB6;border:1px solid rgba(122,223,182,.4);background:rgba(122,223,182,.08);border-radius:999px;padding:.35rem .9rem;opacity:0}
.film[data-act="3"] .bchip{animation:sigIn .5s var(--ease-out) 2.3s forwards}
/* act 4: the seal */
.sealwrap{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem);width:min(560px,100%);justify-content:center}
.idcard{background:rgba(10,8,24,.72);border:1px solid rgba(146,156,178,.3);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;flex:none}
.idrow{display:flex;align-items:center;gap:12px;font-size:.74rem;color:rgba(245,244,241,.5)}
.idrow span{width:38px}
.idrow i{display:block;height:8px;border-radius:2px;background:repeating-linear-gradient(90deg,rgba(146,156,178,.55) 0 6px,rgba(146,156,178,.18) 6px 8px);width:88px}
.idrow .w2{width:110px}.idrow .w3{width:70px}.idrow .w4{width:96px}
.film[data-act="4"] .idcard{animation:idSeal 4.4s var(--ease-out) .5s infinite}
@keyframes idSeal{0%{transform:translateX(0) scale(1);opacity:1}38%{transform:translateX(46px) scale(.72);opacity:.85}52%,88%{transform:translateX(84px) scale(.3);opacity:0}100%{transform:translateX(0) scale(1);opacity:1}}
.lockring{width:130px;height:130px;flex:none;overflow:visible}
.lr{fill:rgba(10,8,24,.5);stroke:#8F7BFF;stroke-width:2;stroke-dasharray:100;stroke-dashoffset:0}
.film[data-act="4"] .lr{animation:lockDraw 1.4s var(--ease-out) .3s both}
@keyframes lockDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.lk rect{fill:none;stroke:#F5F3EE;stroke-width:2}
.lk path{fill:none;stroke:#F5F3EE;stroke-width:2}
.film[data-act="4"] .lk{animation:lkPop .5s var(--ease-out) 2s both}
@keyframes lkPop{from{opacity:0;transform:scale(.6);transform-origin:60px 62px}to{opacity:1;transform:scale(1)}}
.laneout{display:flex;align-items:center;gap:10px;flex:none}
.laneout i{display:block;width:clamp(40px,7vw,90px);height:1px;background:linear-gradient(90deg,rgba(122,223,182,.6),rgba(122,223,182,.05))}
.stoken{font-size:.9rem;font-weight:750;color:#7ADFB6;border:1px solid rgba(122,223,182,.45);border-radius:8px;padding:.35rem .6rem;font-variant-numeric:tabular-nums;opacity:0}
.film[data-act="4"] .stoken{animation:tokOut 4.4s linear .5s infinite}
@keyframes tokOut{0%,46%{opacity:0;transform:translateX(-16px)}56%{opacity:1}86%{opacity:1;transform:translateX(26px)}100%{opacity:0;transform:translateX(40px)}}
/* act 5: the CRM row */
.crmcard{width:min(560px,100%);background:rgba(10,8,24,.72);border:1px solid rgba(143,123,255,.22);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.crmhead{padding:12px 18px;border-bottom:1px solid rgba(245,243,238,.09);font-size:.78rem;color:rgba(245,244,241,.55)}
.crmrow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:16px 8px}
.cc{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;opacity:0;transform:translateY(8px)}
.cc span{font-size:.62rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,244,241,.4)}
.cc b{font-size:1.05rem;font-weight:750;color:var(--paper);font-variant-numeric:tabular-nums}
.cc .okx,.crmprev .okx{color:#7ADFB6}
.film[data-act="5"] .cc{animation:sigIn .45s var(--ease-out) forwards}
.film[data-act="5"] .cc:nth-child(1){animation-delay:.4s}
.film[data-act="5"] .cc:nth-child(2){animation-delay:.6s}
.film[data-act="5"] .cc:nth-child(3){animation-delay:.8s}
.film[data-act="5"] .cc:nth-child(4){animation-delay:1s}
.film[data-act="5"] .cc:nth-child(5){animation-delay:1.2s}
.crmfoot{display:flex;align-items:center;gap:.5rem;padding:11px 18px;border-top:1px solid rgba(245,243,238,.09);font-size:.76rem;font-weight:600;color:#7ADFB6}
.crmfoot svg{display:block}
.crmfoot .ring{stroke:#43D69A;stroke-width:1.8;fill:none;stroke-linecap:round}
.crmfoot .tick{stroke:#43D69A;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* stage atmosphere: dust canvas, act-change light sweep, wandering glow */
.film-air{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.film-sweep{position:absolute;inset:0;pointer-events:none;z-index:3;background:linear-gradient(105deg,transparent 42%,rgba(200,190,255,.09) 50%,transparent 58%);transform:translateX(-130%)}
.film.live[data-act="1"] .film-sweep{animation:sweep1 1.7s ease .05s both}
.film.live[data-act="2"] .film-sweep{animation:sweep2 1.7s ease .05s both}
.film.live[data-act="3"] .film-sweep{animation:sweep3 1.7s ease .05s both}
.film.live[data-act="4"] .film-sweep{animation:sweep4 1.7s ease .05s both}
.film.live[data-act="5"] .film-sweep{animation:sweep5 1.7s ease .05s both}
.film.static .film-sweep{animation:none}
@keyframes sweep1{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes sweep2{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes sweep3{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes sweep4{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes sweep5{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
.film-stage::after{content:"";position:absolute;inset:-15%;background:radial-gradient(28% 34% at 52% 46%,rgba(96,70,235,.15),transparent 70%);pointer-events:none;transition:transform 1.8s var(--ease-out),opacity 1.8s ease;transform:translate(8%,-8%)}
.film[data-act="2"] .film-stage::after{transform:translate(-14%,2%);opacity:.85}
.film[data-act="3"] .film-stage::after{transform:translate(8%,-2%) scale(1.18)}
.film[data-act="4"] .film-stage::after{transform:translate(0,9%);opacity:.55}
.film[data-act="5"] .film-stage::after{transform:translate(17%,-5%)}
.film-copy{z-index:2}
.film-scenes{z-index:2}
/* act 1 depth: one card of thousands, with the feed flowing in */
.scstack{position:relative}
.scstack .scard{position:relative;z-index:1}
.scstack::before,.scstack::after{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid rgba(143,123,255,.13);background:rgba(10,8,24,.45)}
.scstack::before{transform:translate(15px,-15px) scale(.985)}
.scstack::after{transform:translate(30px,-30px) scale(.968);opacity:.55}
.sigfeed{position:absolute;left:-98px;top:50%;width:90px;height:0;border-top:1px dashed rgba(143,123,255,.25);z-index:1}
.sigfeed i{position:absolute;top:-2.5px;left:0;width:4px;height:4px;border-radius:50%;background:#8F7BFF;opacity:0}
.film[data-act="1"] .sigfeed i{animation:feedDot 1.8s linear infinite}
.film[data-act="1"] .sigfeed i:nth-child(2){animation-delay:.6s}
.film[data-act="1"] .sigfeed i:nth-child(3){animation-delay:1.2s}
@keyframes feedDot{0%{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(88px);opacity:0}}
/* act 3 evidence chips */
.pev{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.pev span{font-size:.7rem;font-weight:600;color:rgba(245,244,241,.6);border:1px solid rgba(245,243,238,.16);border-radius:999px;padding:.26rem .65rem;opacity:0}
.film[data-act="3"] .pev span{animation:sigIn .4s var(--ease-out) forwards}
.film[data-act="3"] .pev span:nth-child(1){animation-delay:1.35s}
.film[data-act="3"] .pev span:nth-child(2){animation-delay:1.55s}
.film[data-act="3"] .pev span:nth-child(3){animation-delay:1.75s}
/* act 5 ghost ledger rows: a flow of leads, not a one-off */
.crmprev{display:grid;grid-template-columns:repeat(5,1fr);padding:9px 8px;opacity:.38;border-top:1px dashed rgba(245,243,238,.09)}
.crmprev b{font-size:.8rem;font-weight:600;color:rgba(245,244,241,.75);text-align:center;font-variant-numeric:tabular-nums}
.crmprev.p2{opacity:.2}
/* connectors: the everything wall — slow, quiet drift */
.conn-band{display:flex;flex-direction:column;gap:14px;max-width:1160px;margin:3rem auto 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 96px,#000 calc(100% - 96px),transparent);mask-image:linear-gradient(90deg,transparent,#000 96px,#000 calc(100% - 96px),transparent)}
.conn-row{overflow:hidden}
.conn-track{display:flex;width:max-content;animation:connScroll var(--cdur,80s) linear infinite}
.conn-row.rev .conn-track{animation-direction:reverse}
.conn-g{display:flex;flex:none}
.conn-g .chip{margin-right:12px;flex:none;white-space:nowrap;padding-left:.45rem}
.chip .lg{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:6px;background:var(--c,#5B47CF);color:var(--tc,#fff);font-size:9px;font-weight:750;font-style:normal;letter-spacing:0;flex:none}
.chip .lg3{font-size:6.8px;letter-spacing:-.02em}
@keyframes connScroll{to{transform:translateX(-50%)}}
.conn-note{max-width:1160px;margin:1.8rem auto 0;padding-inline:clamp(1.25rem,4vw,2.5rem);font-size:.9rem;color:var(--ink-3)}
@media (prefers-reduced-motion: reduce){
  .conn-track{animation:none;width:auto;flex-wrap:wrap;row-gap:12px;padding-inline:clamp(1.25rem,4vw,2.5rem)}
  .conn-g{flex-wrap:wrap;row-gap:12px}
  .conn-dup{display:none}
  .conn-band{-webkit-mask-image:none;mask-image:none}
}
/* feedback engines: tiered offline conversions + AdBrain */
.fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:3rem}
.fb-card{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:12px;transition:transform .3s var(--ease-out),border-color .3s ease,box-shadow .3s ease}
.fb-card:hover{transform:translateY(-3px);border-color:rgba(91,71,207,.35);box-shadow:var(--shadow)}
.fb-card .t{font-size:1.14rem;font-weight:680;font-stretch:106%;letter-spacing:-.012em}
.fb-card p{margin:0;font-size:.95rem;line-height:1.58;color:var(--ink-2)}
.fb-card svg{width:100%;height:auto;overflow:visible;margin-block:.4rem}
.fb-lab{font-family:'Archivo','Inter',Arial,sans-serif;font-size:10.5px;font-weight:650;fill:var(--ink-3);letter-spacing:.05em;text-transform:uppercase}
.fb-lab-ok{fill:var(--ok)}
.fb-name{font-family:'Archivo','Inter',Arial,sans-serif;font-size:13px;font-weight:700;fill:var(--ink)}
.fb-sub{font-family:'Archivo','Inter',Arial,sans-serif;font-size:10px;fill:var(--ink-3)}
.fb-node{fill:#fff;stroke:var(--line);stroke-width:1.1}
.fb-node-t{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.1}
.fb-port{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.2}
.fb-base{fill:none;stroke:var(--line);stroke-width:1.2}
.fb-arr{fill:var(--ink-2)}
.fb-flow{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 12;stroke-linecap:round;opacity:.3}
.fb-card.run .fb-flow{opacity:.95;animation:scflow 1.5s linear infinite}
.fb-up{fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-hist{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-dasharray:430;stroke-dashoffset:0}
.fb-card.run .ab-hist{animation:abdraw 1.6s var(--ease-out) both}
@keyframes abdraw{from{stroke-dashoffset:430}to{stroke-dashoffset:0}}
.ab-cone{opacity:0;transition:opacity .8s ease 1.1s}
.fb-card.run .ab-cone{opacity:1}
.ab-conef{fill:rgba(91,71,207,.07)}
.ab-proj{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:6 6;stroke-linecap:round}
.ab-edge{fill:none;stroke:rgba(91,71,207,.35);stroke-width:1;stroke-dasharray:3 6}
.ab-now{stroke:var(--line);stroke-width:1;stroke-dasharray:2 4}
@media (max-width:1080px){.fb-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){
  .fb-flow,.fb-card.run .fb-flow{animation:none;opacity:.7}
  .fb-card.run .ab-hist{animation:none}
  .ab-cone{opacity:1;transition:none}
}
/* static fallback */
.film.static .fc{position:static;grid-area:auto;opacity:1;transform:none;margin-bottom:1.4rem}
.film.static .film-copy{align-content:start}
.film.static .scene{display:none}
.film.static .fsc5{display:flex;opacity:1;transform:none}
.film.static .cc{opacity:1;transform:none}
@media (max-width:1080px){
  .film{padding-inline:clamp(.9rem,3vw,3rem)}
  .film-stage{grid-template-columns:1fr;gap:2rem;min-height:0;padding:1.7rem 1.25rem}
  .film-copy,.film-scenes,.scene{min-width:0}
  .film-scenes{min-height:340px}
  .fc p{max-width:none}
  .scap{max-width:100%}
  .sealwrap{flex-wrap:wrap}
  .crmrow{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:12px 0}
}

/* ===== kit extras: sub-page primitives ===== */
main{display:block}
.page-head{padding:clamp(3.5rem,8vh,5.5rem) clamp(1.25rem,4vw,2.5rem) clamp(2.2rem,5vh,3.5rem)}
.page-head .wrapin{max-width:1160px;margin-inline:auto}
.page-head h1{font-size:clamp(2.6rem,4.6vw,4rem);font-weight:790;font-stretch:118%;letter-spacing:-.024em;line-height:1.02;margin:0;max-width:26ch;text-wrap:balance}
.page-head .lede{margin-top:1.2rem}
.night-band{
  --line:rgba(245,243,238,.17);--line-2:rgba(245,243,238,.08);
  --tx:#F5F3EE;--tx-2:rgba(245,243,238,.74);--tx-3:rgba(245,243,238,.5);
  --ind:#8F7BFF;--ind-deep:#B7A9FF;--ind-soft:rgba(143,123,255,.16);
  --ok:#43D69A;--ok-soft:rgba(67,214,154,.12);--warn:#FF6B74;
  --card:#120E28;--card-2:rgba(255,255,255,.03);
  --ink:#F5F3EE;--ink-2:rgba(245,243,238,.74);--ink-3:rgba(245,243,238,.5);
  --accent:#8F7BFF;--accent-deep:#B7A9FF;--sheet:#120E28;--panel:rgba(255,255,255,.05);
  color:#F5F3EE;
  background:
    radial-gradient(rgba(245,244,241,.045) 1px,transparent 1px),
    radial-gradient(46% 60% at 74% 22%,rgba(96,70,235,.2),transparent 66%),
    radial-gradient(30% 44% at 12% 88%,rgba(53,36,140,.18),transparent 70%),
    #0D0A1F;
  background-size:26px 26px,auto,auto,auto;
  border-block:1px solid rgba(183,169,255,.16)}
.night-band .draw-card{background:rgba(10,8,24,.5);border-color:rgba(183,169,255,.22)}
.night-band .sc-node,.night-band .sc-frame,.night-band .sc-chip{fill:#14102B}
.night-band .sc-sub{font-size:11.5px;fill:rgba(245,243,238,.8)}
.night-band .sc-lab{fill:rgba(245,243,238,.58)}
.night-band .sc-lab-ok{fill:var(--ok)}
.night-band .sc-lab-br{fill:var(--ind)}
.night-band .sc-lab-warn{fill:var(--warn)}
.night-band .cell-sheet,.night-band .fb-card{background:#120E28;border-color:rgba(183,169,255,.2)}
.night-band .chip{background:rgba(10,8,24,.6);border-color:rgba(183,169,255,.25);color:rgba(245,243,238,.8)}
[data-meterwall].arm .stat-row{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .85s var(--ease-out)}
[data-meterwall].arm .stat-row::before{transform:scaleX(0);transition:transform 1.1s var(--ease-out)}
[data-meterwall].play .stat-row{opacity:1;transform:none}
[data-meterwall].play .stat-row::before{transform:scaleX(1)}
.doc{max-width:820px;margin-inline:auto;padding:clamp(2.5rem,6vh,4rem) clamp(1.25rem,4vw,2.5rem)}
.doc h2{font-size:1.5rem;font-weight:720;font-stretch:108%;margin:2.4rem 0 .8rem}
.doc h3{font-size:1.12rem;font-weight:700;margin:1.8rem 0 .5rem}
.doc p,.doc li{font-size:1rem;line-height:1.7;color:var(--ink-2)}
.doc ul,.doc ol{padding-left:1.3rem}
.doc .updated{font-size:.85rem;color:var(--ink-3)}
.est-panel{background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--shadow)}
.est-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem);align-items:start}
.est-f{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem}
.est-f label{font-size:.9rem;font-weight:650}
.est-f input,.est-f select{font:inherit;font-size:.95rem;background:#FAF9F7;border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;color:var(--ink)}
.est-out{display:flex;flex-direction:column;gap:1.1rem}
.est-stat{border-top:1px solid var(--line);padding-top:1rem}
.est-stat b{display:block;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;font-stretch:120%;letter-spacing:-.02em;color:var(--accent-deep);font-variant-numeric:tabular-nums}
.est-stat span{font-size:.8rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:860px){.est-grid{grid-template-columns:1fr}}

.skip{position:fixed;left:-9999px;top:0;z-index:99;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 10px 0;font-weight:650}
.skip:focus{left:0}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:650}

/* ============================================================
   REFINEMENT PASS — status strips + drawing craft (site-wide)
   Overrides earlier kit rules. Homepage keeps its own inline styles.
   ============================================================ */

/* 1. Status strips: drafting register, not dotted pills.
      Tracked uppercase labels divided by hairlines. No dots. */
.statusband{background:transparent;border-block:1px solid var(--line-2)}
.statusband .wrap{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;padding-block:0}
.statusband .sb-lab{display:flex;align-items:center;font-size:.66rem;font-weight:680;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding:.95rem 1.4rem .95rem 0;margin:0}
.statusband .chip{background:none;border:0;border-left:1px solid var(--line-2);border-radius:0;padding:.95rem 1.4rem;font-size:.7rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);gap:0}
.statusband .chip .dot{display:none}
.statusband .chip:hover{color:var(--ink)}
.night-band .statusband .chip{color:rgba(245,243,238,.72)}

/* 2. Head-meta ticks: same register, thinner rule */
.head-meta span::before{width:14px;background:var(--line)}

/* 3. Page-head chips (outside status strips): quiet outline, no dot */
.page-head .chip,.mv-head .chip{background:none;border:1px solid var(--line);color:var(--ink-2);font-size:.7rem;font-weight:650;letter-spacing:.11em;text-transform:uppercase;padding:.34rem .8rem}
.page-head .chip .dot,.mv-head .chip .dot{width:4px;height:4px;background:var(--accent);opacity:.85}

/* 4. Drawings: one hairline weight, one emphasis weight.
      Kills the mixed 1.1/1.7/2.4 stroke soup that read as clutter. */
.sc-node,.sc-chip,.sc-zone{stroke-width:1}
.sc-node-strong{stroke:var(--ink-3);stroke-width:1}
.sc-frame{stroke-width:1.3}
.sc-frame-in{opacity:.35}
.sc-busline{stroke-width:1.6}
.sc-flowbase{stroke-width:1}
.sc-nodehead{stroke:var(--line-2)}
.sc-glyph{stroke-width:1.15}
.sc-corner{stroke:var(--line-2)}
/* type: one scale, calmer hierarchy */
.sc-name{font-size:14px;font-weight:700;letter-spacing:-.008em}
.sc-sub{font-size:11px;fill:var(--ink-3)}
.sc-lab{font-size:9.5px;letter-spacing:.09em;fill:var(--ink-3)}
.sc-chiptx{font-size:9.5px;fill:var(--ink-2)}
/* the ONE emphasis: the custody rule stays loud, everything else recedes */
.sc-lab-warn{fill:var(--warn);letter-spacing:.1em}
.tb-k{fill:var(--ink-3);letter-spacing:.09em}
.tb-v{fill:var(--ink)}
.tb-line{stroke:var(--line-2)}

/* ============================================================
   PASS 2 — high specificity (beats page-local <style> blocks)
   ============================================================ */

/* STATUS REGISTER: one calm row. The dot is replaced by a drafting tick. */
body .statusband{background:transparent;border-block:1px solid var(--line-2)}
body .statusband .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem 2.1rem;padding-block:1.05rem}
body .statusband .sb-lab{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0;flex:none}
body .statusband .chip{display:inline-flex;align-items:baseline;gap:.5rem;background:none;border:0;border-radius:0;padding:0;font-size:.72rem;font-weight:620;letter-spacing:.07em;text-transform:none;color:var(--ink-2);white-space:nowrap}
body .statusband .chip .dot{display:block;width:10px;height:1px;border-radius:0;background:var(--accent);opacity:.9;align-self:center;flex:none}
body .night-band .statusband .chip{color:rgba(245,243,238,.74)}

/* STAT NUMERALS: unit becomes a quiet suffix, not a collision. */
body .stat-row .n{display:inline-flex;align-items:baseline;gap:.16em;white-space:nowrap}
body .stat-row .n .u,
body .stat-row .n .u2,
body .stat-row .n small{font-size:.34em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);position:relative;top:-.12em}
body .stat-row p{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
body .stat-row .sr-tag{font-size:.66rem;font-weight:680;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
body .sthead{align-items:baseline}

/* DRAWINGS: calmer sheet — lighter hatch, quieter furniture, one loud rule */
body .draw-card svg [fill^="url(#hatch"],
body .draw-card svg [fill^="url(#engrid"]{opacity:.55}
body .sc-coord,body .tb-k{fill:var(--ink-3);letter-spacing:.1em}
body .sc-corner{stroke:var(--line-2);stroke-width:.9}
body .sc-zone{stroke:var(--line-2)}
body .sc-node{stroke:var(--line)}
body .sc-node-strong{stroke:var(--ink-3);stroke-width:1}
body .sc-busline{stroke-width:1.5}
body .sc-frame{stroke-width:1.25}
body .sc-name{font-size:13.5px}
body .sc-sub{font-size:11px;fill:var(--ink-3)}
body .sc-lab{font-size:9.5px;letter-spacing:.1em}

/* LIVE mark: emerald status, drafting register — no pill, no bullet dot */
body .chip.livechip{
  display:inline-flex;align-items:center;gap:.45rem;
  background:none;border:0;border-radius:0;padding:0;
  font-size:.64rem;font-weight:720;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ok);white-space:nowrap}
body .chip.livechip .dot{
  display:block;width:6px;height:6px;border-radius:0;flex:none;
  background:var(--ok);transform:rotate(45deg);opacity:1}
body .night-band .chip.livechip{color:#43D69A}
body .night-band .chip.livechip .dot{background:#43D69A}
/* keep the kickrow aligned now that the pill is gone */
body .kickrow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* ============================================================
   PASS 3 — ONE GRID. Every band aligns to the same 1160 column.
   Bug fixed: .page-head padded the SECTION then centred inside it,
   while .wrap/.wrapx centre first and pad inside — a ~40px offset.
   ============================================================ */
body .page-head{padding-left:0;padding-right:0}
body .page-head .wrapin{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
body .statusband .wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
body .mv-head,body .wrapx,body .stat-ledger,body .day-ledger,body .conn-note{max-width:1160px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
body .doc{max-width:820px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* head chips: same drafting tick as the status register (no bullet dots) */
body .page-head .chip,body .mv-head .chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:none;border:1px solid var(--line);border-radius:999px;
  padding:.36rem .85rem;font-size:.66rem;font-weight:680;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
body .page-head .chip .dot,body .mv-head .chip .dot{
  width:9px;height:1px;border-radius:0;background:var(--accent);opacity:.9;flex:none}

/* ============================================================
   PASS 4 — the numbers ledger, made readable.
   Was: numeral column up to 360px + 3rem gap => label stranded
   ~400px from its number, tiny and pale under a huge numeral.
   Now: tight pairing, calmer numeral, label promoted to real
   reading size, instrument tied to its own row.
   ============================================================ */
body .stat-row{padding:1.5rem 0 1.7rem}
body .sthead{
  display:grid;
  grid-template-columns:minmax(150px,190px) minmax(0,1fr);
  gap:.35rem 2rem;
  align-items:baseline}
body .stat-row .n{
  font-size:clamp(2.1rem,3.2vw,2.9rem);
  line-height:1;letter-spacing:-.022em}
body .stat-row .n .u,
body .stat-row .n .u2,
body .stat-row .n small{
  font-size:.3em;letter-spacing:.1em;color:var(--ink-3);top:-.05em}
/* the label is content, not a caption */
body .stat-row p{
  font-size:1.05rem;line-height:1.5;color:var(--ink);
  max-width:52ch;margin:0}
body .stat-row .sr-tag{
  font-size:.62rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3)}
/* row instruments: indented to the label column so they read as its evidence */
body .stat-row .siw{
  margin-top:1.1rem;margin-left:calc(190px + 2rem);
  max-width:calc(100% - 190px - 2rem)}
@media (max-width:860px){
  body .sthead{grid-template-columns:1fr;gap:.3rem}
  body .stat-row .siw{margin-left:0;max-width:100%}
}

/* ============================================================
   PASS 5 — MOBILE: drawings were 780px min inside a ~307px
   column (56% off-screen) with no hint that they pan.
   Now: narrower floor, legible labels, and a real affordance.
   ============================================================ */
@media (max-width:820px){
  /* let the sheet breathe: narrower floor so more is visible at once */
  body .draw-scroll svg{min-width:600px}
  /* keep annotation legible once the sheet is scaled down */
  body .draw-scroll .sc-name{font-size:15px}
  body .draw-scroll .sc-sub{font-size:12.5px}
  body .draw-scroll .sc-lab{font-size:11px;letter-spacing:.07em}
  body .draw-scroll .sc-chiptx{font-size:11px}
  body .draw-scroll .tb-k,body .draw-scroll .tb-v{font-size:11px}
  body .draw-card{padding:1rem .75rem 1.1rem}
  /* affordance 1: pannable sheet gets a hint line */
  body .draw-card::before{
    content:"Drawing pans sideways →";
    display:block;font-size:.62rem;font-weight:680;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
    margin:0 0 .6rem .2rem}
  body .night-band .draw-card::before{color:rgba(245,243,238,.55)}
}
/* affordance 2 (all sizes): edge shadows that appear only while
   there is more sheet to reveal, and fade out at each end. */
body .draw-scroll{
  background:
    linear-gradient(to right, var(--sheet) 28%, rgba(255,255,255,0)),
    linear-gradient(to left,  var(--sheet) 28%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(24,28,33,.14), rgba(24,28,33,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(24,28,33,.14), rgba(24,28,33,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll;
  scrollbar-width:thin}
body .night-band .draw-scroll{
  background:
    linear-gradient(to right, #120E28 28%, rgba(18,14,40,0)),
    linear-gradient(to left,  #120E28 28%, rgba(18,14,40,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll}

/* ── Contact / exit dialogs built by enhance.js ─────────────────────────
   enhance.js renders hs-modal__* / hs-exit__* markup plus the generic
   .field/.input/.btn-primary classes that live in site.css. These pages do
   not load site.css, so without this the panel renders transparent over the
   page with raw browser form controls. Ported verbatim from index.html,
   where it is already verified working. Scoped to the two dialogs. */
.hs-exit-lock { overflow: hidden; }
.hs-exit { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-4); }
.hs-exit[hidden] { display: none; }
.hs-exit__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 21, 0.55); backdrop-filter: blur(3px); }
.hs-exit__panel {
  position: relative; z-index: 1; width: 100%; max-width: 30rem;
  background: var(--c-bg); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(15, 17, 21, 0.28);
  padding: var(--s-6); animation: hs-exit-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes hs-exit-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.hs-exit__x {
  position: absolute; top: var(--s-3); right: var(--s-3); width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--c-ink-3); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.hs-exit__x:hover { background: var(--c-bg-3); color: var(--c-ink); }
.hs-exit__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan); margin: 0 0 var(--s-2); }
.hs-exit__title { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--s-2); text-wrap: balance; }
.hs-exit__desc { color: var(--c-ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 var(--s-4); }
.hs-exit__form { display: grid; gap: var(--s-3); }
.hs-exit__f { display: grid; gap: 0.3rem; font-size: 0.8rem; color: var(--c-ink-2); }
.hs-exit__f input {
  font: inherit; color: var(--c-ink); background: var(--c-bg-2);
  border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 0.6rem 0.7rem;
}
.hs-exit__f input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: var(--c-accent); }
.hs-exit__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hs-exit__status { min-height: 1em; margin: 0; font-size: 0.82rem; color: var(--c-ink-3); }
.hs-exit__status--fail { color: var(--c-danger); }
.hs-exit__alt { margin: var(--s-4) 0 0; text-align: center; font-size: 0.85rem; }
.hs-exit__alt a { color: var(--c-cyan); }
@media (prefers-reduced-motion: reduce) { .hs-exit__panel { animation: none; } }
.hs-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s-4); }
.hs-modal[hidden] { display: none; }
.hs-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 21, 0.55); backdrop-filter: blur(3px); }
.hs-modal-lock { overflow: hidden; }
.hs-modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 38rem;
  max-height: min(90vh, 100%); display: flex; flex-direction: column;
  background: var(--c-bg); color: var(--c-ink);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(15, 17, 21, 0.28);
  padding: var(--s-6); animation: hs-exit-in 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hs-modal__body { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.hs-modal__x {
  position: absolute; top: var(--s-3); right: var(--s-3); width: 2rem; height: 2rem;
  display: grid; place-items: center; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--c-ink-3); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.hs-modal__x:hover { background: var(--c-bg-3); color: var(--c-ink); }
.hs-modal__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-cyan); margin: 0 0 var(--s-2); }
.hs-modal__title { font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--s-2); text-wrap: balance; }
.hs-modal__desc { color: var(--c-ink-2); font-size: 0.95rem; line-height: 1.55; margin: 0 0 var(--s-4); }
.hs-modal__desc a { color: var(--c-cyan); }
.hs-modal__form .field { margin-bottom: var(--s-4); }
.hs-modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .est-card:hover { transform: none; } .hs-modal__panel { animation: none; } }
.hs-modal,.hs-exit{
  --c-bg:var(--paper);--c-bg-2:var(--panel);--c-bg-3:var(--sheet);
  --c-ink:var(--ink);--c-ink-2:var(--ink-2);--c-ink-3:var(--ink-3);
  --c-line:var(--line);--c-line-2:var(--line-2);
  --c-accent:var(--accent);--c-cyan:var(--ok);--c-danger:#B03038;
  --radius:10px;--radius-lg:16px;--radius-pill:999px;
  --s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-6:1.5rem;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.hs-modal .form-grid,.hs-exit .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 .75rem}
@media (max-width:520px){.hs-modal .form-grid,.hs-exit .form-grid{grid-template-columns:1fr}}
.hs-modal .field,.hs-exit .field{margin-bottom:.85rem}
.hs-modal .field>label,.hs-exit .field>label{display:block;font-size:.82rem;font-weight:640;color:var(--ink-2);margin-bottom:.32rem}
.hs-modal .input,.hs-modal .textarea,.hs-exit .input,.hs-exit .textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:0 12px;height:44px;
  transition:border-color .15s ease,box-shadow .15s ease}
.hs-modal .textarea,.hs-exit .textarea{height:auto;min-height:92px;padding:10px 12px;line-height:1.5;resize:vertical}
.hs-modal .input:focus-visible,.hs-modal .textarea:focus-visible,
.hs-exit .input:focus-visible,.hs-exit .textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hs-modal .check,.hs-exit .check{display:flex;gap:.6rem;align-items:flex-start;
  font-size:.82rem;line-height:1.5;color:var(--ink-2);font-weight:400}
.hs-modal .check input[type=checkbox],.hs-exit .check input[type=checkbox]{
  width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--accent)}
.hs-modal .hint,.hs-exit .hint{color:var(--ink-3)}
.hs-modal .field>label.check,.hs-exit .field>label.check{font-weight:400;font-size:.8rem;line-height:1.5;color:var(--ink-3);margin-bottom:0}
.hs-modal__hp,.hs-exit__hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.hs-modal .btn-primary,.hs-exit .btn-primary{background:var(--accent);color:#fff;border:1px solid transparent}
.hs-modal .btn-primary:hover,.hs-exit .btn-primary:hover{background:var(--accent-deep)}
.hs-modal .btn-secondary,.hs-exit .btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--line)}
.hs-modal .btn-lg,.hs-exit .btn-lg{height:50px;padding:0 22px;font-size:15px}
.hs-modal .btn-block,.hs-exit .btn-block{display:flex;width:100%;justify-content:center}
.hs-modal .btn-row,.hs-exit .btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:1rem}
.hs-modal .form-status,.hs-exit .form-status{margin:.6rem 0 0;font-size:.85rem;color:var(--ink-2)}
.hs-modal .form-status--fail,.hs-exit .form-status--fail{color:#B03038}
.hs-modal .fine,.hs-exit .fine{margin:.5rem 0 0;font-size:.78rem;color:var(--ink-3)}
.hs-modal .center,.hs-exit .center{text-align:center}

/* ── page head: one coherent measure ─────────────────────────────────────
   The headline ran the full 1160 column while the lede ran 686, so the block
   read as unbalanced with a large empty right side. Both now share a measure
   and sit on the same left edge. */
body .page-head .wrap > *{max-width:none}
body .page-head h1{max-width:19ch;font-size:clamp(2.3rem,4.4vw,3.65rem);line-height:1.06;letter-spacing:-.025em}
body .page-head .lede,
body .page-head .wrap > p{max-width:62ch}
@media (min-width:1100px){
  body .page-head h1{max-width:23ch}
}

/* ── status band: no orphan chip ─────────────────────────────────────────
   flex-wrap dropped a single chip onto a second row. A grid with equal
   auto-fit columns keeps them on one row where they fit, and wraps in even
   rows where they do not. */
body .statusband .wrap{
  /* repeat(auto-fit,...) is invalid alongside an intrinsically sized track such
     as max-content, so the earlier grid attempt collapsed to one column and put
     every chip on its own row. Flex with growth has no such restriction: the
     chips share the row and no single chip is orphaned. */
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.5rem 1rem;
  padding-block:1.05rem;
}
body .statusband .sb-lab{flex:0 0 auto}
/* flex:1 1 auto stretched a wrapped chip to the full row: on /trust the label
   plus the first four chips came to exactly 1080px, so "Public verify API"
   wrapped and then grew to 1080px on its own. Chips now keep their natural
   width, may shrink, and wrap their text rather than stretching. */
body .statusband .chip{flex:0 1 auto;min-width:0;white-space:normal}
body .statusband .sb-lab{align-self:baseline}
body .statusband .chip{min-width:0}
body .statusband .chip span,
body .statusband .chip{overflow-wrap:break-word}
@media (max-width:900px){
  body .statusband .chip{white-space:normal;flex:1 1 45%}
  body .statusband .sb-lab{flex:1 1 100%;margin-bottom:.15rem}
}

/* ── numbers ledger: tie the numeral to its label ─────────────────────────
   .sthead reserved minmax(210px,360px) for the numeral with a 3rem gap, so a
   single digit left roughly 200px of dead space before its label and the two
   read as unrelated columns. Measured on /platform at 1580: numeral at x=450,
   label at x=615. The numeral column now sizes to its content within a tight
   band, and the gauge aligns to the label rather than the row. */
/* 190px fitted digits but not word numerals. Measured across every ledger on
   production: "10 to 18 mo" inks 262px and "Higher cost" 243px on
   /ai-era-data-liability, "+35 to 50%" 234px on /case-studies. With a 190px
   cap those overflowed the cell (white-space:nowrap) and collided with the
   label by 40px, 21px and 12px. The track grows to its growth limit on every
   row, so raising the cap keeps all labels aligned AND clears the widest
   numeral with 18px to spare. Below 900px .sthead is a single column, so this
   is desktop-only. */
body .stat-ledger .sthead{grid-template-columns:minmax(120px,280px) minmax(0,1fr);gap:.55rem 2rem;align-items:baseline}
body .stat-ledger .stat-row{padding:1.9rem 0 1.7rem}
body .stat-ledger .stat-row p{max-width:56ch}
body .stat-ledger .siw{display:block;width:100%;margin-top:.9rem}
@media (min-width:1000px){
  body .stat-ledger .siw{width:calc(100% - 190px - 2rem);margin-left:calc(190px + 2rem)}
}
@media (max-width:720px){
  body .stat-ledger .sthead{grid-template-columns:1fr;gap:.4rem}
  body .stat-ledger .siw{width:100%;margin-left:0}
}

/* ── status band: one row, always ────────────────────────────────────────
   Measured on /trust at 1570: five chips total 985px, plus a 73px label and
   5x16 gaps = 1138 against a 1080 content column, so the fifth kept wrapping
   alone. Longer chip sets simply do not fit at natural width.
   Above 900px the band no longer wraps: chips shrink and wrap their own text,
   which keeps one clean row instead of a 4+1 split. Below 900px it wraps as
   before, two-up, with the label on its own line. */
@media (min-width:900px){
  body .statusband .wrap{flex-wrap:nowrap;align-items:center}
  body .statusband .chip{flex:0 1 auto;min-width:0;white-space:normal;line-height:1.3;hyphens:auto}
  body .statusband .sb-lab{flex:0 0 auto;align-self:center}
}

/* ── buttons inside a .doc wrapper ───────────────────────────────────────
   Each doc page's inline <style> carries `.doc a{color:var(--accent);
   font-weight:600}`. That selector is (0,1,1) and every button variant is
   (0,1,0), so inside .doc a filled button rendered ACCENT TEXT ON AN ACCENT
   BACKGROUND — invisible until `.doc a:hover` recoloured it. Six pages shipped
   a primary CTA nobody could read: accessibility, data-handling, privacy,
   security-disclosure, subprocessors, terms.
   Restored above both `.doc a` (0,1,1) and `.doc a:hover` (0,2,1). */
.doc a.btn{font-weight:620}
.doc a.btn-fill,.doc a.btn-fill:hover{color:#fff}
.doc a.btn-ghost{color:var(--ink-2);font-weight:540}
.doc a.btn-ghost:hover{color:var(--ink)}
.doc a.btn-white,.doc a.btn-white:hover{color:var(--accent-deep)}
