/* ---- s1 ---- */
/* s1 "Let me map your business" (v6 pilot, approved by Sandy 5 Oct; business-motion-film Gauntlet ledger:
   /Users/sandy/proj/work/lp-dir/pilot/LEDGER.md). One persistent actor (the enquiry card) on one rail; the 45-min call
   is the lens that finds the leak. Deterministic render(t), window.__seek_s1(t). Generated from the pilot by a scoped port.
   6 Oct: every font-size now comes from the v6 type tokens (whole-page critic: 16 sizes, raw 11/13/15px). */
#s1{border-top:0}
#s1 .lbl{font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);display:inline-flex;align-items:center;gap:10px}
#s1 .lbl::before{content:"";width:22px;height:2px;background:var(--accent)}
#s1 h2{font-family:var(--head);font-weight:800;font-size:var(--t-h2);line-height:.98;letter-spacing:-.035em;margin:18px 0 20px;font-variation-settings:"opsz" 96}
#s1 h2 em{font-style:normal;color:var(--accent-ink)}
#s1 .sub{font-size:var(--t-lg);line-height:1.5;color:var(--body);max-width:30ch}

#s1 .s1-g{display:grid;gap:48px}
@media(min-width:1200px){#s1 .s1-g{grid-template-columns:5fr 7fr;align-items:center;gap:56px}}
@media(min-width:641px) and (max-width:1199px){#s1 .s1-g>*,#s1 .mq-k,#s1 .mq-w{width:100%;max-width:720px;margin-inline:auto}}

#s1 .facts{display:grid;grid-template-columns:.8fr 1fr 1.35fr;margin:36px 0 34px;border-top:1px solid var(--line)}
#s1 .facts div{padding:18px 14px 0 0}
#s1 .facts div+div{padding-left:14px;border-left:1px solid var(--line)}
#s1 .facts b{display:block;font:700 var(--t-h3)/1 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
#s1 .facts b.acc{color:var(--accent-ink)}
@media(max-width:359px){#s1 .facts{grid-template-columns:1fr 1fr}#s1 .facts div:nth-child(3){grid-column:1/-1;border-left:0;padding-left:0;margin-top:14px;border-top:1px solid var(--line)}}
#s1 .facts span{display:block;margin-top:8px;font-size:var(--t-sm);line-height:1.4;color:var(--quiet)}

#s1 .cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
#s1 .btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:18px 28px;border-radius:999px;background:var(--ink);color:#fff;
  font:600 var(--t-body)/1 var(--sans);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .2s var(--ease)}
#s1 .btn:hover{transform:translateY(-1px)}
#s1 .btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(63,224,214,.45) 50%,transparent 65%);transform:translateX(-120%);animation:s1-sweep 3.2s 1s infinite}
@keyframes s1-sweep{60%,100%{transform:translateX(120%)}}
#s1 .btn svg{width:18px;height:18px}
#s1 .cr{font-size:var(--t-sm);color:var(--quiet)}#s1 .cr b{color:var(--ink);font-weight:600}

#s1 .stage{position:relative;border-radius:28px;background:radial-gradient(120% 90% at 50% 45%,var(--petrol-2),var(--petrol) 72%);
  overflow:hidden;color:var(--on-petrol);box-shadow:0 40px 80px -40px rgba(11,34,36,.55);aspect-ratio:16/10.5}
#s1 .stage::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px;
  mask:radial-gradient(75% 70% at 50% 50%,#000,transparent)}
#s1 .st-hd{position:absolute;left:22px;right:22px;top:20px;display:flex;justify-content:space-between;gap:12px;font:700 var(--t-label)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-petrol-q);z-index:5}
#s1 .st-hd b{color:var(--teal-hi);white-space:nowrap;font-weight:700}
#s1 .scene{position:absolute;inset:0;transform-origin:50% 55%}
#s1 .rail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#s1 .rail .r0{stroke:rgba(160,230,225,.18);stroke-width:3;fill:none;stroke-linecap:round}
#s1 .rail .r1{stroke:rgba(234,245,244,.55);stroke-width:3;fill:none;stroke-linecap:round}
#s1 .rail .r2{stroke:var(--teal-hi);stroke-width:3.5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(63,224,214,.7))}
#s1 .rail .ring{fill:none;stroke:var(--teal-hi);stroke-width:2.5;filter:drop-shadow(0 0 8px rgba(63,224,214,.8))}
#s1 .stn{position:absolute;width:0;height:0}
#s1 .stn i{position:absolute;left:calc(var(--sd)/-2);top:calc(var(--sd)/-2);width:var(--sd);height:var(--sd);border-radius:50%;display:grid;place-items:center;background:#0E2A2A;border:2px solid rgba(160,230,225,.35);color:var(--on-petrol-q)}
#s1 .stn i svg{width:calc(var(--sd)*.42);height:calc(var(--sd)*.42)}
#s1 .stage{--sd:60px}
@media(max-width:1199px){#s1 .stage{--sd:54px}}
@media(max-width:640px){#s1 .stage{--sd:46px}}
#s1 .stn.on i{border-color:var(--teal-hi);background:var(--teal-hi);color:#032220;box-shadow:0 0 18px rgba(63,224,214,.7)}
#s1 .stn.leak i{border-color:var(--brick-hi);background:#C9372B;color:#fff;box-shadow:0 0 0 6px rgba(201,55,43,.18),0 0 22px rgba(201,55,43,.6)}
#s1 .stn.leak span{color:var(--brick-hi)}
#s1 .stn.fixd span{color:var(--teal-hi)}
#s1 .stn span{position:absolute;white-space:nowrap;font:700 var(--t-label)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-petrol-q)}
#s1 .card{position:absolute;left:0;top:0;z-index:4;width:clamp(210px,36%,264px);padding:16px 18px;border-radius:14px;background:#123836;border:1.5px solid var(--teal-hi);
  box-shadow:0 12px 28px -12px rgba(0,0,0,.6),0 0 22px -6px rgba(63,224,214,.6)}
#s1 .card b{display:block;font:600 var(--t-lg)/1.25 var(--sans);color:#fff}
#s1 .card small{display:block;margin-top:4px;font:500 var(--t-sm)/1.3 var(--sans);color:var(--on-petrol-q)}
#s1 .card .dot{position:absolute;right:12px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--teal-hi)}
#s1 .stamp{position:absolute;left:0;top:0;z-index:4;padding:9px 14px;border-radius:999px;font:700 var(--t-sm)/1 var(--mono);letter-spacing:.04em;white-space:nowrap;
  background:#0E2C2B;border:1px solid rgba(160,230,225,.35);color:var(--on-petrol)}
#s1 .stamp.bad{border-color:rgba(255,122,110,.75);color:var(--brick-hi)}
#s1 .stamp.good{border-color:var(--teal-hi);color:var(--teal-hi)}
#s1 .leak{position:absolute;left:0;top:0;z-index:3;padding:6px 10px;border-radius:8px;font:700 var(--t-label)/1 var(--mono);letter-spacing:.12em;color:#fff;background:#C9372B;white-space:nowrap}
#s1 .leak.fixed{background:var(--accent);color:#032220}
#s1 .lens{position:absolute;left:0;top:0;z-index:5;width:calc(var(--sd) + 34px);height:calc(var(--sd) + 34px);border-radius:50%;border:3px solid var(--teal-hi);
  background:radial-gradient(circle,rgba(63,224,214,.22),rgba(63,224,214,.04) 65%,transparent 70%);box-shadow:0 0 0 8px rgba(63,224,214,.1),0 0 40px rgba(63,224,214,.65),inset 0 0 22px rgba(63,224,214,.35)}
#s1 .lens span{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;padding:6px 10px;border-radius:999px;background:var(--teal-hi);color:#032220;font:700 var(--t-label)/1 var(--mono);letter-spacing:.08em}
#s1 .stem{position:absolute;left:0;top:0;z-index:3;width:2px;background:linear-gradient(var(--teal-hi),rgba(63,224,214,.15))}
#s1 .note{position:absolute;left:0;top:0;z-index:4;padding:9px 13px;border-radius:12px;background:var(--teal-hi);color:#032220;font:700 var(--t-sm)/1.2 var(--mono);white-space:nowrap;box-shadow:0 10px 26px -10px rgba(63,224,214,.8)}
#s1 .ticks{position:absolute;left:0;top:0;z-index:4;display:flex;gap:6px}
#s1 .ticks i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--teal-hi);color:#032220;font:700 var(--t-label)/1 var(--mono);font-style:normal}
#s1 .cap{position:absolute;left:22px;right:22px;bottom:18px;z-index:5;display:flex;justify-content:space-between;font:500 var(--t-sm)/1.3 var(--sans);color:var(--on-petrol-q)}
#s1 .cap b{color:var(--on-petrol);font-weight:600}
@media(max-width:640px){#s1 .stage{aspect-ratio:auto;height:480px}#s1 .card{width:calc(100% - 116px);padding:12px 14px}#s1 .card b{font-size:var(--t-body)}#s1 .lens span{top:-2px;bottom:auto;left:calc(100% + 8px);transform:none}#s1 .lens{width:calc(var(--sd) + 22px);height:calc(var(--sd) + 22px)}}

#s1 .mq-k{font:700 var(--t-label)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-top:64px;margin-bottom:14px}
#s1 .stage>.mo-pause{z-index:6}
#s1 .mq-w{position:relative}
#s1 .mq-w .mo-pause{top:50%;bottom:auto;right:0;transform:translateY(-50%)}
#s1 .mq{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;mask:linear-gradient(90deg,transparent,#000 10%,#000 85%,transparent 94%)}
#s1 .mq-t{display:flex;gap:44px;padding-right:44px;width:max-content;animation:s1-mq 38s linear infinite}
#s1 .mq-t span{font:700 var(--t-lg)/1 var(--head);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:44px}
#s1 .mq-t span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes s1-mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#s1 .btn::after,#s1 .mq-t{animation:none!important}#s1 .mq-w .mo-pause{display:none}}

/* ---- s1b ---- */
/* S1B: who you'll be talking to. LIGHT composition: the only paper section ground. The story and the ledger on the left;
   on the right ONE stage drawn straight on the paper: a dotted Three.js globe (the persistent actor is the arc of light that
   leaves Vancouver) with Sandy's teaching photo as the place the story lands: a teal leader runs from the India pin into it.
   The three numbers always show their true values; the motion is the globe and the ledger's teal fill bars.
   From 1200 up the composition is mirrored (stage left, story right) so it never repeats S1's text-left, stage-right.
   Phone/tablet: story, globe (full content width on a phone), the three numbers, then the photo.
   Default (no JS, reduced motion, no WebGL): a finished still of the globe at the India landing. */
#s1b{background:var(--paper);border-top:0}
#s1b .grid{row-gap:var(--s6)}
#s1b .s1b-tx p:not(.label):not(.lede){color:var(--body);max-width:56ch;font-size:var(--t-body)}
#s1b .lede{font-size:var(--t-lg)}

/* ledger: hairline track on top of each row; the active row's track fills teal (JS), its numeral turns teal */
#s1b .s1b-led{display:grid;align-self:start}
#s1b .s1b-led>div{position:relative;display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);align-items:baseline;column-gap:var(--s4);padding-block:var(--s4) var(--s3)}
#s1b .s1b-bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--paper-edge);overflow:hidden}
#s1b .s1b-bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(var(--f,0))}
#s1b .s1b-led dt{font-family:var(--mono);font-weight:700;font-size:var(--t-num);line-height:1.1;letter-spacing:-.03em;white-space:nowrap;color:var(--ink);transition:color var(--d-ui) var(--ease)}
#s1b .s1b-led dd{font-size:var(--t-sm);line-height:1.45;color:var(--body)}
#s1b .s1b-led>.on dt{color:var(--accent-ink)}
#s1b .s1b-led>.on dd{color:var(--ink)}

/* the stage: drawn on the paper, no panel. Globe box top right, the photo bottom left, overlapping the globe's lower left. */
#s1b .s1b-viz{--gw:84%;position:relative;width:100%;aspect-ratio:1/1.2}
#s1b .s1b-globe{position:absolute;right:0;top:0;width:var(--gw);aspect-ratio:1/1}
#s1b .s1b-globe::before{content:"";position:absolute;left:14%;right:14%;bottom:3%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(42,42,42,.14),transparent)}
/* the canvas overhangs the globe box by 8% a side (room for the polar arc and the India dolly); a soft round mask, no hard edge */
#s1b .s1b-still,#s1b canvas{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;
  -webkit-mask:radial-gradient(closest-side,#000 86%,transparent 100%);mask:radial-gradient(closest-side,#000 86%,transparent 100%)}
#s1b canvas{opacity:0}
#s1b .s1b-viz.gl canvas{opacity:1}
#s1b .s1b-viz.gl .s1b-still{visibility:hidden}
#s1b .s1b-lead{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
#s1b .s1b-lead path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:0}
#s1b .s1b-lead circle{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 4px rgba(0,161,155,.7))}
#s1b .s1b-tag{position:absolute;left:0;top:0;z-index:2;padding:var(--s1) var(--s2);border-radius:999px;background:var(--canvas);border:1px solid var(--paper-edge);
  font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;
  box-shadow:0 6px 16px -10px rgba(42,42,42,.5);opacity:0;visibility:hidden}
/* the still is the landing frame (India, the arc arriving from Vancouver over the horizon): only the India tag shows */
#s1b .s1b-viz:not(.gl) #s1b-ti{opacity:1;visibility:visible;left:45.6%;top:55.4%;transform:translate(14px,-50%)}
/* the pause control sits top right, clear of the caption */
#s1b .s1b-globe .mo-pause{top:0;bottom:auto;right:0}

/* the photo: a print, 4:5 from the left of the frame (Sandy and the board; head and chin always in), caption beside it */
#s1b .s1b-ph{position:absolute;left:0;right:0;bottom:0;margin:0;display:grid;grid-template-columns:50% minmax(0,1fr);align-items:end;column-gap:var(--s4);pointer-events:none;z-index:2}
#s1b .s1b-ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:0 0;border-radius:var(--r);border:5px solid var(--canvas);background:var(--elevated);
  box-shadow:0 24px 48px -24px rgba(42,42,42,.6),0 0 0 0 rgba(0,161,155,0);transition:box-shadow var(--d-ui) var(--ease)}
#s1b .s1b-ph.hit img{box-shadow:0 24px 48px -24px rgba(42,42,42,.6),0 0 0 3px var(--accent)}
#s1b .s1b-ph figcaption{padding-bottom:var(--s1);font-family:var(--mono);font-size:var(--t-label);line-height:1.45;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);max-width:24ch}
#s1b .s1b-note{display:block;margin-top:var(--s3);color:var(--quiet);letter-spacing:.08em}

/* phone + tablet: the stage dissolves into the grid so the order is story, globe, the three numbers, then the photo, and
   the globe and all three numbers share one screen. The leader is desktop only (on a phone the photo is below the numbers). */
@media (max-width:1023px){
  #s1b .s1b-tx{order:1}
  #s1b .s1b-viz{display:contents}
  #s1b .s1b-globe,#s1b .s1b-ph{grid-column:1/-1;min-width:0}   /* grid items through display:contents: .grid>* does not reach them */
  #s1b .s1b-globe{order:2;position:relative;width:min(86%,520px);margin-inline:auto;right:auto}
  #s1b .s1b-led{order:3;grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.35fr);column-gap:var(--s4)}
  #s1b .s1b-led>div{grid-template-columns:1fr;row-gap:var(--s1);align-content:start}
  #s1b .s1b-ph{order:4;position:relative;grid-template-columns:56% minmax(0,1fr);column-gap:var(--s3);max-width:640px}
  #s1b .s1b-lead{display:none}
  #s1b .s1b-globe .mo-pause{top:auto;bottom:0;right:0}
}
/* phone: the globe takes the full content width (its soft overhang is clipped by the page edge, never a hard cut);
   a compact three-across ledger keeps $220,000 on screen with it */
@media (max-width:767px){
  #s1b .s1b-globe{width:100%}
  #s1b .s1b-led{column-gap:var(--s3)}
  #s1b .s1b-led dt{font-size:var(--t-h3)}
  #s1b .s1b-led dd{font-size:var(--t-label);line-height:1.35}
  #s1b .s1b-led>div{padding-block:var(--s3) 0}
}
@media (min-width:1024px){
  #s1b .grid{grid-template-rows:auto 1fr;align-items:start}
  #s1b .s1b-tx{grid-column:1/6;grid-row:1}
  #s1b .s1b-led{grid-column:1/6;grid-row:2;margin-top:var(--s4)}
  #s1b .s1b-led>div{grid-template-columns:1fr;row-gap:var(--s1);padding-block:var(--s4) var(--s4)}
  #s1b .s1b-viz{grid-column:6/13;grid-row:1/3;align-self:center}
}
/* wide desktop: mirrored. The stage (globe + photo) on the left, the story and the ledger on the right */
@media (min-width:1200px){
  #s1b .s1b-tx{grid-column:8/13}
  #s1b .s1b-led{grid-column:8/13}
  #s1b .s1b-viz{grid-column:1/8}
}

/* ---- s2b ---- */
/* S2b v6 (ART-DIRECTION 5 Oct): LIGHT composition on paper. Persistent actor = the deck: the same 13 card elements
   go stack (CSS 3D, tilted on the table) -> fan out in number order, each landing with its tier stamp -> settle into
   the readable spread (the real DOM grid) -> tiers light cumulatively (2, +4, all 13) -> gather back into the deck.
   The loop OPENS on the finished spread (s2b.js START). No JS / reduced motion: the spread, static.
   Colours: Free = ink card, Sprint = teal tint, Accelerator = white.
   Grid (6 Oct): exactly 13 places, no empty cells. Every card spans two half-columns, so the short last row is centred:
   phone 2 per row (13th card centred), from 640px 5 per row (cards 11-13 centred). */
#s2b{background:var(--paper);border-top:0}
#s2b .s2b-hd>*+*{margin-top:var(--s3)}
#s2b .lede{font-size:var(--t-lg)}
#s2b .s2b-stage{position:relative;padding:var(--s5) var(--s4) calc(var(--s5) + 40px);border-radius:28px;background:var(--canvas);
  border:1px solid var(--paper-edge);box-shadow:0 40px 80px -48px rgba(42,42,42,.35)}
#s2b .s2b-stage::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(rgba(42,42,42,.09) 1px,transparent 1.4px) 0 0/20px 20px;
  -webkit-mask:radial-gradient(80% 75% at 50% 55%,#000,transparent);mask:radial-gradient(80% 75% at 50% 55%,#000,transparent)}

/* the key: three tiers */
#s2b .s2b-key{position:relative;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-bottom:var(--s5)}
#s2b .s2b-key li{display:inline-flex;align-items:center;gap:var(--s2);padding:6px var(--s3) 6px 6px;border-radius:999px;border:1px solid var(--line);
  font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--canvas)}
#s2b .s2b-key li span{letter-spacing:0;text-transform:none;color:var(--quiet)}
#s2b .s2b-key i{width:16px;height:16px;border-radius:50%;border:1px solid var(--paper-edge)}
#s2b .s2b-key .s2b-t0 i{background:var(--ink);border-color:var(--ink)}
#s2b .s2b-key .s2b-t1 i{background:#D7F1EF;border-color:rgba(0,161,155,.45)}
#s2b .s2b-key .s2b-t2 i{background:var(--canvas)}

/* the table: dashed slots under the real grid of cards (13 of each) */
#s2b .s2b-table{position:relative}
#s2b .s2b-deck,#s2b .s2b-slots{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2)}
#s2b .s2b-deck>*,#s2b .s2b-slots>*{grid-column:span 2}
#s2b .s2b-deck>:nth-child(13),#s2b .s2b-slots>:nth-child(13){grid-column:2/span 2}
#s2b .s2b-slots{position:absolute;inset:0}
#s2b .s2b-slots i{border:1px dashed var(--paper-edge);border-radius:var(--r)}
#s2b .s2b-deck{position:relative}   /* no preserve-3d: each card carries its own perspective and is layered by z-index, so cards can never cut through each other */
#s2b .s2b-k{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--s3);align-items:center;
  min-height:60px;padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid var(--paper-edge);background:var(--canvas);color:var(--ink);
  box-shadow:0 1px 0 rgba(42,42,42,.06),0 10px 20px -14px rgba(42,42,42,.35);backface-visibility:hidden;transform-origin:50% 50%}
#s2b .s2b-k b{grid-row:1/3;font-family:var(--mono);font-weight:700;font-size:var(--t-h3);line-height:1;letter-spacing:-.02em;color:var(--quiet)}
#s2b .s2b-k span{font-weight:600;font-size:var(--t-sm);line-height:1.25;min-width:0}
#s2b .s2b-k em{font-style:normal;font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet);transform-origin:0 50%}
#s2b .s2b-k.s2b-t0{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
#s2b .s2b-k.s2b-t0 b{color:#7FE3DE}
#s2b .s2b-k.s2b-t0 em{color:#B9C4C3}
#s2b .s2b-k.s2b-t1{background:#E6F6F5;border-color:rgba(0,161,155,.45)}
#s2b .s2b-k.s2b-t1 b,#s2b .s2b-k.s2b-t1 em{color:var(--accent-ink)}
#s2b .s2b-key li.lit{background:var(--accent);border-color:var(--accent);color:#fff}
#s2b .s2b-key li.lit span{color:#E6F6F5}
#s2b .mo-pause{right:var(--s4);bottom:var(--s4)}

@media (max-width:359px){
  #s2b .s2b-stage{padding-inline:var(--s2)}
  #s2b .s2b-k{column-gap:var(--s2);padding-inline:var(--s2)}
  #s2b .s2b-k b{font-size:var(--t-lg)}
  #s2b .s2b-k em{letter-spacing:0}
}
@media (min-width:640px){
  #s2b .s2b-stage{padding:var(--s6) var(--s6) calc(var(--s6) + 40px)}
  #s2b .s2b-deck,#s2b .s2b-slots{grid-template-columns:repeat(10,minmax(0,1fr));gap:var(--s3)}
  #s2b .s2b-deck>:nth-child(13),#s2b .s2b-slots>:nth-child(13){grid-column:span 2}
  #s2b .s2b-deck>:nth-child(11),#s2b .s2b-slots>:nth-child(11){grid-column:3/span 2}
  #s2b .s2b-k{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;align-items:start;row-gap:var(--s2);min-height:150px;padding:var(--s3)}
  #s2b .s2b-k b{grid-row:auto;font-size:var(--t-num)}
  #s2b .s2b-k em{grid-row:1}
  #s2b .s2b-k span{align-self:end}
}
@media (min-width:1200px){
  #s2b .grid{align-items:center}
  #s2b .s2b-hd{grid-column:1/5}
  #s2b .s2b-stage{grid-column:5/13}
}

/* ---- s3 ---- */
/* S3 v6 (ART-DIRECTION 5 Oct): DARK petrol stage. Persistent actor = the SKILL.md card. Mechanism = materializing
   result + request -> confirmation: the card is written, docks into the real recorded Claude Code terminal, the four
   real output lines run, three real drafts materialise (Magic UI animated-list: newest on top), "You approve" is pressed
   and each pill flips to Approved (border beam), then the card rides the upstream/downstream loop, re-written once per
   step. Desktop: terminal | drafts over the loop. Phone (JS): one fixed panel swapping terminal -> drafts -> loop.
   No JS / reduced motion: the finished frame (everything stacked, drafts approved, loop teal).
   Type sweep 6 Oct: every size is a --t-* token; Space Mono only at 400/700 (a <b> inside mono is pinned to 700). */
#s3{--s3-node:18px;--s3-card-w:304px}
#s3 .s3-hd>*+*{margin-top:var(--s3)}
#s3 .s3-sub{font-size:var(--t-lg)}
#s3 .s3-fig{display:grid;gap:var(--s3)}
#s3 .s3-cap{font-family:var(--mono);font-size:var(--t-label);line-height:1.5;letter-spacing:.04em;text-transform:uppercase;color:var(--quiet)}

/* the stage */
#s3 .s3-stage{position:relative;border-radius:28px;overflow:hidden;padding:var(--s5) var(--s4) var(--s4);color:var(--on-petrol);
  background:radial-gradient(120% 90% at 50% 45%,var(--petrol-2),var(--petrol) 72%);box-shadow:0 40px 80px -40px rgba(11,34,36,.55)}
#s3 .s3-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask:radial-gradient(75% 70% at 50% 50%,#000,transparent);mask:radial-gradient(75% 70% at 50% 50%,#000,transparent)}
#s3 .s3-shd{position:relative;z-index:2;display:flex;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s4);
  font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--on-petrol-q)}
#s3 .s3-shd b{font-weight:700;color:var(--teal-hi);text-align:right}
#s3 .s3-scene{position:relative;display:grid;gap:var(--s4);transform-origin:50% 60%}

/* terminal: the real recorded session */
#s3 .s3-tw{background:#071718;border:1px solid rgba(160,230,225,.16);border-radius:var(--r-lg);overflow:hidden;font-family:var(--mono);
  font-size:var(--t-label);line-height:1.6;color:#C9DAD8;height:100%}
#s3 .s3-tb{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;padding:var(--s2) var(--s4);border-bottom:1px solid rgba(160,230,225,.12);color:var(--on-petrol-q)}
#s3 .s3-tb b{font-weight:700;color:var(--on-petrol)}
#s3 .s3-tb span{margin-left:auto}
#s3 .s3-tx{padding:var(--s3) var(--s4) var(--s4)}
#s3 .s3-tx>*+*{margin-top:var(--s2)}
#s3 .s3-dock{height:100px;border:1px dashed rgba(160,230,225,.22);border-radius:var(--r)}
#s3 .s3-pr{display:flex;gap:var(--s2);color:var(--on-petrol)}
#s3 .s3-pr i{font-style:normal;color:var(--teal-hi)}
#s3 .s3-pr em{overflow-wrap:anywhere;font-style:normal;color:var(--teal-hi);border-radius:4px;box-shadow:0 0 0 2px rgba(63,224,214,.28);background:rgba(63,224,214,.12)}
#s3 .s3-ln i{font-style:normal;color:var(--teal-hi)}
#s3 .s3-dim{color:var(--on-petrol-q)}
#s3 .s3-in{padding-left:2ch}
#s3 .s3-in2{padding-left:6ch}

/* drafts: outreach-drafts.md, newest on top */
#s3 .s3-pa-d{display:flex;flex-direction:column;gap:var(--s3)}
#s3 .s3-stage:not(.s3-js) .s3-dock{display:none}
#s3 .s3-dock2{display:none;height:96px;border:1px dashed rgba(160,230,225,.22);border-radius:var(--r)}
#s3 .s3-dl{font-family:var(--mono);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--on-petrol-q)}
#s3 .s3-list{--h:92px;--g:12px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:var(--h);gap:var(--g)}
#s3 .s3-sl{position:absolute;left:0;right:0;height:var(--h);border:1px dashed rgba(160,230,225,.2);border-radius:var(--r)}
#s3 .s3-sl:nth-child(1){top:0}#s3 .s3-sl:nth-child(2){top:calc(var(--h) + var(--g))}#s3 .s3-sl:nth-child(3){top:calc(2 * (var(--h) + var(--g)))}
#s3 .s3-dr{position:relative;min-width:0;display:grid;align-content:center;gap:var(--s1);padding:0 var(--s4);border-radius:var(--r);background:#123836;
  border:1px solid rgba(160,230,225,.3);transform-origin:50% 0}
#s3 .s3-dr::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;opacity:var(--bo,0);
  background:conic-gradient(from var(--ba,0deg),transparent 0 62%,var(--teal-hi) 82%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#s3 .s3-dk{min-width:0;font-family:var(--mono);font-size:var(--t-label);line-height:1.5;color:var(--on-petrol-q);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s3 .s3-sj{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:var(--t-body);font-weight:600;line-height:1.3;color:#fff}
#s3 .s3-pill{white-space:nowrap}
#s3 .s3-sj span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-block:3px;margin-block:-3px}   /* the clip box holds the glyphs' full height */
#s3 .s3-pill{position:relative;display:grid;flex:none;font-family:var(--mono);font-size:var(--t-label);font-weight:700;letter-spacing:.04em;line-height:1}
#s3 .s3-pill i{grid-area:1/1;font-style:normal;padding:6px 10px;border-radius:999px;text-align:center;white-space:nowrap}
#s3 .s3-pill i:first-child{border:1px solid rgba(160,230,225,.35);color:var(--on-petrol-q);opacity:0}
#s3 .s3-pill i:last-child{background:var(--teal-hi);color:#032220;border:1px solid var(--teal-hi)}
#s3 .s3-ok{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);border-radius:999px;
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);color:#032220;background:var(--teal-hi);border:1px solid var(--teal-hi);
  box-shadow:0 10px 26px -10px rgba(63,224,214,.8)}
#s3 .s3-ok svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the loop: no-JS fallback is a plain wrapped list; JS (.s3-js) places every station on the track */
#s3 .s3-pa-l{position:relative}
#s3 .s3-trk,#s3 .s3-lead,#s3 .s3-bc,#s3 .s3-now{display:none}
#s3 .s3-zl{font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--on-petrol-q);white-space:nowrap}
#s3 .s3-sts{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:var(--s2) 0}
#s3 .s3-st{display:flex;align-items:center;gap:var(--s2)}
#s3 .s3-st i{position:relative;flex:none;width:var(--s3-node);height:var(--s3-node);border-radius:50%;background:var(--teal-hi);border:2px solid var(--teal-hi);
  box-shadow:0 0 14px rgba(63,224,214,.6)}
#s3 .s3-st i::after{content:"";position:absolute;left:28%;top:22%;width:28%;height:44%;border:solid #032220;border-width:0 2px 2px 0;transform:rotate(45deg)}
#s3 .s3-st span{font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--on-petrol);white-space:nowrap}
#s3 .s3-yes,#s3 .s3-again{display:inline-block;padding:6px 12px;border-radius:999px;font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
#s3 .s3-yes{background:var(--teal-hi);color:#032220}
#s3 .s3-again{margin-left:var(--s2);border:1px solid rgba(160,230,225,.45);color:var(--teal-hi);background:var(--petrol)}

#s3 .s3-js .s3-pa-l{height:300px}
#s3 .s3-js .s3-trk{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#s3 .s3-trk path{fill:none;stroke-linecap:round}
#s3 .s3-t0{stroke:rgba(160,230,225,.2);stroke-width:3}
#s3 .s3-t1{stroke:var(--teal-hi);stroke-width:3.5;filter:drop-shadow(0 0 6px rgba(63,224,214,.7))}
#s3 .s3-js .s3-zl,#s3 .s3-js .s3-st,#s3 .s3-js .s3-yes,#s3 .s3-js .s3-again,#s3 .s3-js .s3-lead,#s3 .s3-js .s3-bc{position:absolute;left:0;top:0;margin:0}
#s3 .s3-js .s3-sts{margin:0}
#s3 .s3-js .s3-st{display:block;width:0;height:0}
#s3 .s3-js .s3-st i{position:absolute;left:calc(var(--s3-node) / -2);top:calc(var(--s3-node) / -2)}
#s3 .s3-js .s3-st span{position:absolute;left:0;transform:translateX(-50%)}
#s3 .s3-js .s3-st.up span{bottom:calc(var(--s3-node) / 2 + 10px)}
#s3 .s3-js .s3-st.dn span{top:calc(var(--s3-node) / 2 + 10px)}
#s3 .s3-st.off i{background:#0E2A2A;border-color:rgba(160,230,225,.35);box-shadow:none}
#s3 .s3-st.off i::after{border-color:transparent}
#s3 .s3-st.off span{color:var(--on-petrol-q)}
#s3 .s3-yes.off{background:#0E2A2A;color:var(--on-petrol-q);box-shadow:inset 0 0 0 1px rgba(160,230,225,.35)}
#s3 .s3-js .s3-lead{display:block;width:2px;background:linear-gradient(var(--teal-hi),rgba(63,224,214,.2))}
#s3 .s3-js .s3-now{display:grid;justify-items:center;gap:var(--s1);position:absolute;left:0;right:0;top:0;margin:0;text-align:center}
#s3 .s3-now span{font-family:var(--mono);font-weight:700;font-size:var(--t-label);letter-spacing:.06em;text-transform:uppercase;color:var(--on-petrol-q)}
#s3 .s3-now b{font-family:var(--mono);font-weight:700;font-size:var(--t-h3);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:var(--teal-hi)}
#s3 .s3-js .s3-bc{display:block;width:26px;height:26px;border-radius:50%;border:2px solid var(--teal-hi);box-shadow:0 0 0 6px rgba(63,224,214,.12),0 0 22px rgba(63,224,214,.8)}

/* the actor: the SKILL.md card */
#s3 .s3-card{position:relative;z-index:4;width:var(--s3-card-w);padding:var(--s3) var(--s4);border-radius:var(--r);background:#0F3533;
  border:1.5px solid var(--teal-hi);box-shadow:0 14px 30px -12px rgba(0,0,0,.65),0 0 24px -6px rgba(63,224,214,.6);margin-top:var(--s4)}
#s3 .s3-ch{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);line-height:1.2}
#s3 .s3-ch svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--teal-hi);stroke-width:2;stroke-linejoin:round}
#s3 .s3-ch b{font-weight:600;color:#fff}
#s3 .s3-ch span{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--on-petrol-q)}
#s3 .s3-c1,#s3 .s3-c2{margin-top:var(--s2);font-family:var(--mono);font-size:var(--t-label);line-height:1.5;color:var(--on-petrol-q);white-space:nowrap;overflow:hidden}
#s3 .s3-c1 b{font-weight:700;color:var(--teal-hi)}
#s3 .s3-c2{position:relative;margin-top:var(--s1)}
#s3 .s3-cs{position:absolute;left:0;top:0;opacity:0}
#s3 .s3-cs i{font-style:normal}
#s3 .s3-cs i:last-child{color:var(--teal-hi)}
#s3 .s3-js .s3-card{position:absolute;left:0;top:0;margin:0}
#s3 .s3-ptr{display:none}
#s3 .s3-js .s3-ptr{display:block;position:absolute;left:0;top:0;z-index:5;width:28px;height:34px;fill:#fff;stroke:#032220;stroke-width:1.2;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}

@media (min-width:768px){
  #s3 .s3-tw{font-size:var(--t-sm)}
}
@media (min-width:900px){
  #s3 .s3-stage{padding:var(--s6) var(--s6) var(--s5)}
  #s3 .s3-scene{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"t d" "l l";column-gap:var(--s5);row-gap:var(--s6)}
  #s3 .s3-pa-t{grid-area:t}#s3 .s3-pa-d{grid-area:d}#s3 .s3-pa-l{grid-area:l}
}
@media (max-width:899px){
  #s3{--s3-node:14px;--s3-card-w:min(296px,100%)}
  #s3 .s3-js .s3-pa-l{height:250px}
  #s3 .s3-stage.s3-js{padding-bottom:calc(var(--s4) + 48px)}
  #s3 .s3-js .s3-zl{visibility:hidden}   /* phone: the zone is printed with the current station inside the loop */
  #s3 .s3-list{--h:68px}
  #s3 .s3-sj{font-size:var(--t-sm)}
  /* phone motion: one fixed panel that swaps terminal -> drafts -> loop; the card is carried across */
  #s3 .s3-swap .s3-pa{position:absolute;left:0;right:0;top:0}
  #s3 .s3-swap .s3-dock2{display:block}
  #s3 .s3-c2{white-space:normal}
  #s3 .s3-swap .s3-pr span{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-width:359px){
  #s3 .s3-shd b,#s3 .s3-ch span{display:none}
}

/* ---- s4 ---- */
/* S4 v6: the Sprint as a structure built in real 3D (CSS 3D, no WebGL). 15 session blocks, Mon to Fri per floor, three floors;
   each Friday lands its outcome (directory rows), Demo day flag on top. Petrol stage, teal light = what lands and glows.
   The natural styles below ARE the finished frame (no JS, reduced motion). s4.js drives render(t) through custom props. */
#s4{border-top:0;background:var(--canvas)}
#s4 .s4-grid{row-gap:var(--s6)}
#s4 .lede{font-size:var(--t-lg)}
#s4 .s4-lede{align-self:end;max-width:40ch}

/* ---------- stage ---------- */
#s4 .s4-stage{position:relative;container-type:inline-size;border-radius:28px;overflow:hidden;color:var(--on-petrol);
  background:radial-gradient(120% 90% at 34% 50%,var(--petrol-2),var(--petrol) 72%);box-shadow:0 40px 80px -40px rgba(11,34,36,.55);
  display:grid;grid-template-rows:auto auto;padding-bottom:calc(var(--s8) + var(--s2))}
#s4 .s4-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask:radial-gradient(70% 70% at 36% 50%,#000,transparent);mask:radial-gradient(70% 70% at 36% 50%,#000,transparent)}
#s4 .s4-tick{position:absolute;left:var(--s5);top:var(--s5);z-index:3;font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase;color:var(--on-petrol-q)}
#s4 .s4-tick b{font-weight:700;color:var(--teal-hi);font-variant-numeric:tabular-nums}

/* phones: the scene is 106cqw tall so the 100 OUT tag and its message row fit under the structure, above the outcomes */
/* ---------- the 3D scene: camera pitch 38 deg (35 to 55, never top-down), yaw from --y0 plus a slow orbit set by s4.js ---------- */
#s4 .s4-scene{position:relative;height:106cqw;perspective:1700px;perspective-origin:50% 30%}
#s4 .s4-cam{position:absolute;left:59%;top:68%;width:0;height:0;transform-style:preserve-3d;
  --p:38;--y0:18;--y:var(--y0);--bw:13.5cqw;--bh:calc(var(--bw) * 1);--bd:calc(var(--bw) * .95);--g:calc(var(--bw) * .05);
  transform:rotateX(calc(var(--p) * -1deg)) rotateY(calc(var(--y) * -1deg))}
#s4 .s4-cam i{display:block;font-style:normal}
#s4 .s4-plate{position:absolute;left:calc((5 * var(--bw) + 4 * var(--g)) / -2 - var(--bw) * .45);top:calc(var(--bd) * -1.1);
  width:calc(5 * var(--bw) + 4 * var(--g) + var(--bw) * .9);height:calc(var(--bd) * 2.2);transform:rotateX(90deg);border-radius:6px;
  background:radial-gradient(60% 60% at 50% 50%,rgba(63,224,214,.16),transparent 75%),
    linear-gradient(rgba(160,230,225,.12) 1px,transparent 1px) 0 0/calc(var(--bw) + var(--g)) calc(var(--bd) / 2),
    linear-gradient(90deg,rgba(160,230,225,.12) 1px,transparent 1px) 0 0/calc(var(--bw) + var(--g)) calc(var(--bd) / 2);
  border:1px solid rgba(160,230,225,.22)}

/* a block: three faces (front, top, right); --o fill opacity, --hot teal-hi heat (landing flash, lit Friday), --dy drop, --lf floor lift.
   Each floor is one step lighter than the one under it (week 1 darkest), so the three weeks read as three layers. */
#s4 .s4-box{position:absolute;left:0;top:0;transform-style:preserve-3d;--o:1;--hot:0;--dy:0px;--lf:0px;
  transform:translate3d(calc((var(--d) - 2) * (var(--bw) + var(--g))),calc(-1 * (var(--bh) / 2 + var(--f) * (var(--bh) + var(--g))) - var(--dy) - var(--lf)),0)}
#s4 .s4-box.s4-fri{--hot:.3}
#s4 .s4-box>i{position:absolute;opacity:var(--o);border:1px solid rgba(63,224,214,.55);backface-visibility:hidden;
  background:color-mix(in srgb,var(--teal-hi) calc(var(--hot) * 100%),color-mix(in srgb,var(--c2) calc(var(--f) * 50%),var(--c)))}
#s4 .s4-fr{--c:#0E524E;--c2:#1A8079;width:var(--bw);height:var(--bh);left:calc(var(--bw) / -2);top:calc(var(--bh) / -2);transform:translateZ(calc(var(--bd) / 2))}
#s4 .s4-tp{--c:#1B8780;--c2:#2DB0A7;width:var(--bw);height:var(--bd);left:calc(var(--bw) / -2);top:calc(var(--bd) / -2);transform:rotateX(90deg) translateZ(calc(var(--bh) / 2));border-color:rgba(120,240,232,.7)}
#s4 .s4-rt{--c:#083634;--c2:#0F5450;width:var(--bd);height:var(--bh);left:calc(var(--bd) / -2);top:calc(var(--bh) / -2);transform:rotateY(90deg) translateZ(calc(var(--bw) / 2))}
#s4 .s4-fr b{position:absolute;left:var(--s2);top:var(--s1);font-family:var(--mono);font-weight:700;font-size:var(--t-sm);line-height:1.3;color:#fff;
  font-variant-numeric:tabular-nums}
#s4 .s4-box.dk .s4-fr b{color:#032220}
/* ghost slots (cloned by s4.js): the blueprint the blocks fill */
#s4 .s4-box.s4-gh>i{background:transparent;border:1px dashed rgba(160,230,225,.38)}
#s4 .s4-box.s4-gh .s4-fr b{color:var(--on-petrol-q)}

/* billboards: stand at a 3D point, always face the camera (inverse of the camera rotation) */
#s4 .s4-bb{position:absolute;left:0;top:0;white-space:nowrap;--lf:0px;--ax:-50%;--ay:-50%;
  transform:translate3d(var(--bx),calc(var(--by) - var(--lf)),var(--bz)) rotateY(calc(var(--y) * 1deg)) rotateX(calc(var(--p) * 1deg)) translate(var(--ax),var(--ay))}
#s4 .s4-wk{--bx:calc(-2 * (var(--bw) + var(--g)) - var(--bw) / 2 - var(--s3));--by:calc(-1 * (var(--bh) / 2 + var(--f) * (var(--bh) + var(--g))));--bz:calc(var(--bd) / 2);--ax:-100%;
  display:block;text-align:right;font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:var(--on-petrol)}
#s4 .s4-wk b{font-weight:700;color:var(--teal-hi)}   /* pinned: UA b is 'bolder' (900, faux) inside 700 text */
#s4 .s4-wk em{display:none;font-style:normal;color:var(--on-petrol-q)}
@media (min-width:768px){#s4 .s4-wk em{display:block}}
#s4 .s4-day{--bx:calc((var(--d) - 2) * (var(--bw) + var(--g)));--by:var(--s3);--bz:calc(var(--bd) / 2 + var(--s2));--ay:0%;
  font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--on-petrol-q)}
/* 100 out: a 2D tag pinned by s4.js to the Fri 6 block (floor 2); where there is no room beside it (phones) it sits under the structure with a leader.
   No JS: hidden (the Fri 6 outcome row says it). Phones get the compact size so it fits between two date numerals. */
#s4 .s4-out{display:none;position:absolute;left:0;top:0;z-index:3;white-space:nowrap;
  padding:2px var(--s2);border-radius:6px;background:var(--teal-hi);color:#032220;font-family:var(--mono);font-weight:700;
  font-size:var(--t-label);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 22px rgba(63,224,214,.55)}
html.js #s4 .s4-out{display:block}
/* the flag stands on the front right corner of the roof (nothing of the structure in front of it); the pennant is in flow so
   no part of the flag overflows its own layer. Phone: the pennant flies left over the roof. */
#s4 .s4-flag{--bx:calc(2 * (var(--bw) + var(--g)) + var(--bw) / 2 - 1px);--by:calc(-3 * var(--bh) - 2 * var(--g));--bz:calc(var(--bd) / 2);
  --ax:calc(-100% + 1px);--ay:-100%;display:block;height:calc(var(--bw) * 1.5);padding-right:2px}
#s4 .s4-pole{position:absolute;right:0;bottom:0;width:2px;height:100%;background:var(--on-petrol);transform-origin:bottom}
#s4 .s4-pen{display:block;padding:var(--s2) var(--s3) var(--s2) var(--s4);background:var(--teal-hi);color:#032220;transform-origin:right center;
  font-family:var(--mono);font-weight:700;font-size:var(--t-sm);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,10px 50%);box-shadow:0 0 22px rgba(63,224,214,.6)}
#s4 .s4-anc{--bx:calc(2 * (var(--bw) + var(--g)) + var(--bw) / 2 + var(--s2));--by:calc(-1 * (var(--bh) / 2 + var(--f) * (var(--bh) + var(--g))));--bz:0px;width:1px;height:1px}

/* 320 px phones: shift the structure right so the week tags keep their room on the left */
@container (max-width:340px){#s4 .s4-cam{left:59%;--bw:12.8cqw}}
/* phones: the pause control sits top left (the ticker moves over), clear of the page's sticky booking bar and of the flag */
@media (max-width:767px){
  #s4 .mo-pause{top:var(--s3);bottom:auto;left:var(--s3);right:auto}
  #s4 .s4-tick{left:calc(var(--s3) + 36px + var(--s3))}
  #s4 .s4-out{padding:2px 4px;line-height:1;letter-spacing:.01em;border-radius:4px}
  #s4 .s4-flag{height:calc(var(--bw) * 2.5)}   /* a taller pole: the pennant flies above the roof, clear of block 13 */
}
/* 320 px: the structure sits a little lower so the pennant clears both the session counter row and the roof */
@container (max-width:340px){#s4 .s4-scene{height:112cqw}#s4 .s4-cam{top:72%}#s4 .s4-flag{height:calc(var(--bw) * 2.6)}}

/* fx layer (leader lines, the 100-out stream, enquiries caught) */
#s4 .s4-fx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}

/* ---------- the three Friday outcomes (the real copy), a floor directory ---------- */
#s4 .s4-weeks{position:relative;z-index:3;display:grid;gap:var(--s4);padding:0 var(--s5)}
#s4 .s4-weeks p{font-size:var(--t-body);line-height:1.5;color:var(--on-petrol-q);max-width:46ch;transition:color var(--d-ui) var(--ease)}
#s4 .s4-weeks strong{display:block;font-family:var(--mono);font-weight:700;font-size:var(--t-sm);letter-spacing:.04em;color:var(--on-petrol-q);margin-bottom:var(--s1)}
#s4 .s4-weeks p.on{color:var(--on-petrol)}
#s4 .s4-weeks p.on strong{color:var(--teal-hi)}
#s4 .s4-weeks p.now strong::after{content:"";display:inline-block;width:8px;height:8px;margin-left:var(--s2);border-radius:50%;background:var(--teal-hi);
  box-shadow:0 0 10px var(--teal-hi);vertical-align:1px}

/* tablet: the same stack, a wider structure; the outcomes in three columns; pennant flies right */
@media (min-width:768px){
  #s4 .s4-stage{padding-bottom:var(--s8)}
  #s4 .s4-scene{height:62cqw}
  #s4 .s4-cam{--y0:24;--bw:11cqw;--bh:calc(var(--bw) * .66);left:52%;top:64%}
  #s4 .s4-fr b{left:var(--s3);top:var(--s2)}
  #s4 .s4-out{padding:var(--s1) var(--s2);font-size:var(--t-sm)}
  #s4 .s4-flag{--ax:-1px;height:calc(var(--bw) * 1.2);padding:0 0 0 2px}
  #s4 .s4-pole{right:auto;left:0}
  #s4 .s4-pen{padding:var(--s2) var(--s4) var(--s2) var(--s3);transform-origin:left center;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}
  #s4 .s4-weeks{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 var(--s6) 0 var(--s6)}
}
/* desktop: structure left, directory right (Fri 13 on top), leader lines between them */
@media (min-width:1024px){
  #s4 .s4-head{grid-row:1}
  #s4 .s4-lede{grid-row:1}
}
@media (min-width:1200px){
  #s4 .s4-stage{display:block;aspect-ratio:16/8.6;padding:0}
  #s4 .s4-scene{position:absolute;left:0;top:0;bottom:0;width:64%;height:auto;perspective:2600px}
  #s4 .s4-cam{--y0:26;--bw:9.3cqw;left:52%;top:66%}
  #s4 .s4-weeks{position:absolute;right:var(--s6);top:50%;width:28%;transform:translateY(-46%);display:flex;flex-direction:column-reverse;gap:var(--s6);padding:0}
  #s4 .s4-weeks p{font-size:var(--t-lg)}
}

/* ---- s5 ---- */
/* S5 v6 (LIGHT, paper ground): the Accelerator. Head with the ten seats beside it; the colour photo as a band under it (768 to 1199) or
   beside the text (1200 and up, so s5 does not repeat s4's head-over-stage layout); a white rail stage below. Persistent rails as a staircase: Upstream (weeks 1 to 4) runs high and
   steps down through a gutter to Downstream (weeks 5 to 8); the "1:1" call marker travels them and installs each week's system
   (node fills teal, tick lands, label goes ink). Every state is driven by custom props from s5.js render(t); the defaults
   below are the finished frame (no JS, reduced motion). */
#s5{border-top:0;background:var(--paper)}
@media (max-width:767px){#s5{padding-bottom:calc(var(--sec-pad) + var(--s5))}}   /* phones: the stage's last row clears the page's sticky booking bar */
#s5 .s5-grid{row-gap:var(--s6)}
#s5 .lede{font-size:var(--t-lg);text-wrap:pretty}
#s5 .note{font-size:var(--t-sm)}

/* ten seats: the page's one urgency element in brick; ten identical empty seats (no "taken" count) */
#s5 .s5-seats{align-self:end}
#s5 .s5-n{font-family:var(--mono);font-weight:700;font-size:var(--t-num);line-height:1;letter-spacing:-.02em;color:var(--urgent)}
#s5 .s5-slots{width:100%;max-width:300px;height:auto;margin-top:var(--s4)}
#s5 .s5-slots rect{fill:var(--canvas);stroke:var(--urgent);stroke-width:1.5}
#s5 .s5-why{margin-top:var(--s4);font-size:var(--t-body);line-height:1.5;color:var(--body);max-width:36ch}
#s5 .s5-seats.armed .s5-slots rect{stroke-dasharray:132;stroke-dashoffset:132}
#s5 .s5-seats.draw .s5-slots rect{animation:s5-draw .5s var(--ease) both}
#s5 .s5-seats.draw .s5-slots rect:nth-child(2){animation-delay:60ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(3){animation-delay:120ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(4){animation-delay:180ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(5){animation-delay:240ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(6){animation-delay:300ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(7){animation-delay:360ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(8){animation-delay:420ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(9){animation-delay:480ms}
#s5 .s5-seats.draw .s5-slots rect:nth-child(10){animation-delay:540ms}
@keyframes s5-draw{from{stroke-dashoffset:132}to{stroke-dashoffset:0}}

/* the photo: Sandy and a client, warm duotone grade; both whole heads and both chins in frame at every width */
#s5 .s5-ph{position:relative;margin:0}
#s5 .s5-ph img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:40% 50%;border-radius:28px;background:var(--paper-edge)}
#s5 .s5-ph figcaption{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-label);line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--quiet)}

/* ---------- the rail stage ---------- */
#s5 .s5-stage{position:relative;z-index:1;padding:var(--s6) var(--s4) var(--s8);border-radius:28px;background:var(--canvas);
  border:1px solid var(--paper-edge);box-shadow:0 30px 60px -36px rgba(42,42,42,.28)}
#s5 .s5-rails{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#s5 .s5-rails path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#s5 .s5-rails .r0{stroke:var(--line);stroke-width:6}
#s5 .s5-rails .r1{stroke:var(--accent);stroke-width:6}
#s5 .s5-rails .r2{display:none}   /* the installed rail stays solid */
#s5 .s5-rail{position:relative}
#s5 .s5-grp{list-style:none;display:grid;row-gap:var(--s3)}
#s5 .s5-down{margin-top:var(--s6)}

/* group heads; their tick lands when the half is installed (--k). Phones: heads sit in the label column, clear of the rail */
#s5 .s5-gh{--k:1;padding:0 0 var(--s2) calc(var(--s6) + 28px + 2 * var(--s3));font-family:var(--mono);font-size:var(--t-label);font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
#s5 .s5-down .s5-gh{padding-left:calc(var(--s6) + 28px + 2 * var(--s3) + var(--s6))}
#s5 .s5-gh b{display:flex;align-items:flex-start;gap:var(--s2);text-wrap:balance;margin-top:var(--s1);font-size:var(--t-label);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
#s5 .s5-hk{position:relative;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) calc(var(--k) * 100%),var(--quiet-line));
  background:color-mix(in srgb,var(--accent) calc(var(--k) * 100%),var(--canvas))}
#s5 .s5-hk::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(var(--k))}

/* a week station: number, node on the rail, the system it installs. --k = installed (0..1), --r = the install ring */
#s5 .s5-wk{--k:1;--r:0;display:grid;grid-template-columns:var(--s6) 28px minmax(0,1fr);column-gap:var(--s3);align-items:center;min-height:var(--s7)}
#s5 .s5-down .s5-wk{padding-left:var(--s6)}   /* phones: the downstream rail steps right */
#s5 .s5-wk em{font-family:var(--mono);font-style:normal;font-weight:700;font-size:var(--t-sm);line-height:1;text-align:right;
  color:color-mix(in srgb,var(--ink) calc(var(--k) * 100%),var(--quiet))}
#s5 .s5-nd{position:relative;display:block;width:28px;height:28px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--accent) calc(var(--k) * 100%),var(--quiet-line));
  background:color-mix(in srgb,var(--accent) calc(var(--k) * 100%),var(--canvas))}
#s5 .s5-nd::after{content:"";position:absolute;left:8px;top:4px;width:7px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg) scale(var(--k))}
#s5 .s5-nd::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--accent);opacity:var(--r);transform:scale(calc(1 + (1 - var(--r)) * 1.4))}
#s5 .s5-wk span{font-size:var(--t-body);line-height:1.35;color:color-mix(in srgb,var(--ink) calc(var(--k) * 100%),var(--body))}

/* the moving 1:1 call: an ink chip that rides the rail (it shrinks to ride the step down, s5.js) */
#s5 .s5-mk{position:absolute;left:0;top:0;z-index:2;display:none;align-items:center;gap:var(--s1);padding:var(--s1) var(--s2);border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:var(--t-sm);line-height:1.4;white-space:nowrap;transform-origin:center;
  box-shadow:0 0 0 5px var(--accent-soft),0 10px 22px -8px rgba(0,161,155,.7)}
#s5 .s5-mk svg{display:none;width:14px;height:14px;fill:none;stroke:#7FE3DE;stroke-width:1.6;stroke-linecap:round}
html.js #s5 .s5-mk{display:inline-flex}

@media (min-width:768px){
  #s5 .s5-ph img{aspect-ratio:21/9;object-position:50% 100%}
  #s5 .s5-ph figcaption{position:absolute;left:var(--s5);top:var(--s5);margin:0;padding:var(--s1) var(--s3);border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink)}
  #s5 .s5-stage{margin:calc(var(--s5) * -1) var(--s6) 0;padding:var(--s7) var(--s6) var(--s8)}
  #s5 .s5-gh b{font-size:var(--t-sm)}
}
/* desktop: one staircase across the panel. Upstream on the upper step (columns 1 to 4), a gutter column for the step down,
   Downstream one step lower (columns 6 to 9) */
@media (min-width:1024px){
  #s5 .s5-seats{grid-row:1}
  #s5 .s5-head{grid-row:1}
  #s5 .s5-stage{margin-inline:var(--s7);display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) var(--s8) repeat(4,minmax(0,1fr));column-gap:var(--s4);
    grid-template-rows:auto auto;padding:var(--s7) var(--s7) var(--s8)}
  #s5 .s5-rail,#s5 .s5-grp{display:contents}
  #s5 .s5-gh{grid-row:1;grid-column:1/5;align-self:start;padding:0 0 var(--s5)}   /* both heads top-aligned: the "Weeks" labels line up */
  #s5 .s5-down .s5-gh{grid-column:6/10;padding:0 0 var(--s5)}
  #s5 .s5-wk{grid-row:2;grid-template-columns:none;grid-template-rows:auto 28px auto;row-gap:var(--s3);justify-items:start;align-items:start;align-content:start;padding:0}
  #s5 .s5-down .s5-wk{padding:var(--s8) 0 0}
  #s5 .s5-wk em{text-align:left;font-size:var(--t-h3)}
  #s5 .s5-wk span{font-size:var(--t-sm);padding-right:var(--s2)}
  #s5 .s5-up .s5-wk:nth-child(2){grid-column:1}
  #s5 .s5-up .s5-wk:nth-child(3){grid-column:2}
  #s5 .s5-up .s5-wk:nth-child(4){grid-column:3}
  #s5 .s5-up .s5-wk:nth-child(5){grid-column:4}
  #s5 .s5-down .s5-wk:nth-child(2){grid-column:6}
  #s5 .s5-down .s5-wk:nth-child(3){grid-column:7}
  #s5 .s5-down .s5-wk:nth-child(4){grid-column:8}
  #s5 .s5-down .s5-wk:nth-child(5){grid-column:9}
  #s5 .s5-mk{padding:var(--s2) var(--s3)}
  #s5 .s5-mk svg{display:block}
}
/* 1200+: text left (head over seats), the colour photo right at 3:2 (both whole heads and chins), the rail stage below */
@media (min-width:1200px){
  #s5 .s5-head{grid-column:1/7;grid-row:1}
  #s5 .s5-seats{grid-column:1/7;grid-row:2;align-self:start}
  #s5 .s5-ph{grid-column:7/13;grid-row:1/3;align-self:end}   /* bottom-aligned: the photo ends level with the text column (a taller crop would cut a head) */
  #s5 .s5-ph img{aspect-ratio:3/2;object-position:50% 60%}
  #s5 .s5-stage{grid-row:3;margin:0;padding:var(--s7) var(--s6) var(--s8)}
  /* read at a glance (page critic 4): the stage spans the section with 40 px nodes, 10 px rails, big week numerals, large labels */
  #s5 .s5-rails .r0,#s5 .s5-rails .r1{stroke-width:10}
  #s5 .s5-nd{width:40px;height:40px;border-width:3px}
  #s5 .s5-nd::after{left:12px;top:5px;width:10px;height:18px;border-width:0 4px 4px 0}
  #s5 .s5-hk{width:22px;height:22px}
  #s5 .s5-hk::after{left:6px;top:2px;width:6px;height:11px}
  #s5 .s5-wk{grid-template-rows:auto 40px auto}
  #s5 .s5-wk em{font-size:var(--t-num)}
  #s5 .s5-wk span{font-size:var(--t-lg);line-height:1.3}
  #s5 .s5-gh{font-size:var(--t-sm)}
  #s5 .s5-gh b{font-size:var(--t-lg);gap:var(--s3)}
  #s5 .s5-mk{padding:var(--s2) var(--s4);font-size:var(--t-body)}
  #s5 .s5-mk svg{width:18px;height:18px}
}

/* ---- s6 ---- */
/* S6 Proof, v6: the page's one DARK composition. Full-bleed petrol ground, content on the .wrap.
   1. The case carousel (business-motion-film: carousel emphasis + selection -> expansion): a circular rail of three tabs,
      one bright; the active tab's thumbnail expands into the real screenshot over the outgoing one. Each screenshot fills
      its window at full width, 1:1, and scrolls vertically like a person reading the page (the window shows at most 74%
      of it, never a crop of its width); Paid us and Made always show the copy's own figures, and the paid-vs-made bar
      draws the true ratio, shaped by each case's own fact (24 months, before vs after, 3 months).
   2. Sami's video on its own card. 3. "Our own offer" as wall -> one actor: 300 dots collapse to 50, then 10 glow and
      breathe; the next wall crossfades in (a 5.6 s loop with a pause control).
   Type: sizes only from tokens; Space Mono 700, Bricolage 700/800, Geist for UI text.
   Without JS the three cases stack as a static ledger; reduced motion shows finished frames. */
#s6{border-top:0;color:var(--on-petrol);background:radial-gradient(120% 70% at 30% 0%,var(--petrol-2),var(--petrol) 70%)}
#s6 h2{color:var(--on-petrol)}
#s6 .lede{color:var(--on-petrol-q);font-size:var(--t-lg)}
#s6 .grid{row-gap:var(--s7)}

/* shared label: mono caps, quiet on petrol */
#s6 .k{font-family:var(--mono);font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-petrol-q);line-height:1.4}

/* ---------- the carousel stage (pilot stage language: petrol radial, faint 32px grid, radius 28) ---------- */
#s6 .s6-car{position:relative;border-radius:28px;padding:var(--s5) var(--s4) var(--s6);overflow:hidden;isolation:isolate;
  background:radial-gradient(110% 90% at 50% 35%,#13403E,var(--petrol-2) 45%,#0A1F21 100%);border:1px solid var(--petrol-line);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
#s6 .s6-car::before,#s6 .own::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask:radial-gradient(70% 65% at 50% 50%,#000,transparent);mask:radial-gradient(70% 65% at 50% 50%,#000,transparent)}

/* tabs: a circular rail placed by JS; the active one bright, neighbours recede. JS sizes the active tab so the client
   name fits on one line at every width. The rail's edges fade out (--fe), so a neighbour sliding past reads as passing. */
#s6 .s6-tabs{--fe:8%;position:relative;height:56px;margin-bottom:var(--s5);
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--fe),#000 calc(100% - var(--fe)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--fe),#000 calc(100% - var(--fe)),transparent)}
#s6 .s6-tab{position:absolute;left:50%;top:0;width:var(--tw,240px);height:56px;display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4) var(--s2) var(--s2);
  border-radius:14px;background:rgba(234,245,244,.04);border:1px solid var(--petrol-line);color:var(--on-petrol-q);text-align:left;overflow:hidden;
  transition:border-color var(--d-micro) var(--ease),color var(--d-micro) var(--ease),background-color var(--d-micro) var(--ease)}
#s6 .s6-tab img{flex:none;width:56px;height:38px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--petrol-line)}
#s6 .s6-tab span{min-width:0;font-family:var(--sans);font-weight:600;font-size:var(--t-sm);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s6 .s6-tab i{position:absolute;left:var(--s3);right:var(--s3);bottom:5px;height:2px;border-radius:2px;background:var(--teal-hi);transform-origin:0 50%;transform:scaleX(var(--p,0))}
#s6 .s6-tab.on{color:var(--on-petrol);background:rgba(63,224,214,.09);border-color:rgba(63,224,214,.55)}
#s6 .s6-tab:hover{color:var(--on-petrol)}

/* one case: the artefact (left) and its money (right) */
#s6 .ledger{display:grid}
#s6 .row{display:grid;gap:var(--s4);min-width:0;align-content:start}
#s6 .art,#s6 .info,#s6 .txt{min-width:0}
#s6 .art{margin:0;display:grid;gap:var(--s2)}
/* the window's frame: --bh caps its height; the window always takes the column's full width and sits on one top line */
#s6 .box{--bh:200px;--ch:18px;height:var(--bh);display:flex;justify-content:center;align-items:flex-start}
#s6 .win{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:12px;background:#0E2A2A;border:1px solid rgba(160,230,225,.22);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform-origin:50% 50%;will-change:transform}
#s6 .chrome{position:relative;z-index:1;display:block;flex:none;height:var(--ch);border-bottom:1px solid var(--petrol-line);background-color:#123634;background-size:10px 10px;background-repeat:no-repeat;
  background-image:radial-gradient(circle,rgba(234,245,244,.35) 3px,transparent 3.6px),radial-gradient(circle,rgba(234,245,244,.35) 3px,transparent 3.6px),radial-gradient(circle,rgba(234,245,244,.35) 3px,transparent 3.6px);
  background-position:10px 50%,24px 50%,38px 50%}
/* the page in its window: full width at 1:1; JS sets the window's height and how far (--sc) the page scrolls as --py runs 0..1 */
#s6 .vp{overflow:hidden;max-height:calc(var(--bh) - var(--ch) - 2px)}
#s6 .win img{display:block;width:100%;height:auto;transform:translateY(calc(var(--py,0) * var(--sc,0px) * -1))}
/* border beam (Magic UI, ported): a short arc of teal light running round the active window */
#s6 .win::after{content:"";position:absolute;inset:0;z-index:2;border-radius:12px;padding:1.5px;pointer-events:none;opacity:var(--bo,0);
  background:conic-gradient(from var(--a,0deg),transparent 0 72%,rgba(63,224,214,.15) 82%,var(--teal-hi) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#s6 .cap{font-size:var(--t-label);line-height:1.4;color:var(--on-petrol-q);text-align:center}

#s6 .info{display:grid;gap:var(--s4);align-content:start}
#s6 .nm{font-size:var(--t-h3);line-height:1.2;color:var(--on-petrol)}
#s6 .txt .k{display:inline;margin-right:var(--s2)}
#s6 .v{display:inline;font-size:var(--t-sm);color:var(--on-petrol-q);line-height:1.45}
#s6 .money{display:grid;row-gap:var(--s2);min-width:0}
#s6 .tops{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4)}
#s6 .md{text-align:right}
#s6 .n{font-family:var(--mono);font-weight:700;font-size:var(--t-num);line-height:1.1;margin-top:var(--s1);letter-spacing:-.03em;white-space:nowrap;color:var(--on-petrol);font-variant-numeric:tabular-nums}
#s6 .md .n{color:var(--teal-hi);text-shadow:0 0 24px rgba(63,224,214,.35)}
#s6 .c{font-size:var(--t-sm);color:var(--on-petrol-q);line-height:1.45}

/* the paid-vs-made bar: whole bar = what they made (teal light), the white slice at its left = what they paid us (true ratio) */
#s6 .mb{position:relative;height:18px;border-radius:4px;background:rgba(160,230,225,.08);margin-top:var(--s1)}
#s6 .mb .made{position:absolute;inset:0;border-radius:4px;background:linear-gradient(90deg,rgba(63,224,214,.45),var(--teal-hi));box-shadow:0 0 18px -2px rgba(63,224,214,.5);
  clip-path:inset(0 calc(100% - 100% * var(--mm,1)) 0 0 round 4px)}
#s6 .mb .paid{position:absolute;left:0;top:-3px;bottom:-3px;z-index:2;width:max(6px,calc(100% * var(--w)));border-radius:3px;background:var(--on-petrol);
  box-shadow:0 0 0 2px var(--petrol);transform-origin:0 50%;transform:scaleX(var(--pp,1))}
/* a band of light sweeps the made bar while the case is read (JS sets --sw; clipped by the made fill) */
#s6 .mb .made::after{content:"";position:absolute;top:0;bottom:0;left:calc(var(--sw,-1) * 100%);width:18%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent)}
/* Medico: the made bar is 24 months (contracted in 2 years); a taller mark at month 12 */
#s6 .mb-time .ticks{position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(50% - 1px),var(--petrol) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)),
    repeating-linear-gradient(90deg,transparent 0 calc(100% / 24 - 1px),rgba(11,34,36,.7) calc(100% / 24 - 1px) calc(100% / 24))}
/* Scale Your Results: the before bar ($20k of ads made ~$30k) under the with-us bar, same scale */
#s6 .mb-ba{margin-bottom:var(--s5)}
#s6 .mb-ba .before{position:absolute;left:0;top:calc(100% + 8px);height:8px;width:calc(100% * var(--b));border-radius:3px;border:1px dashed var(--on-petrol-q);opacity:var(--bf,1)}
#s6 .mb-ba .before em{position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);font-size:var(--t-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--on-petrol-q);white-space:nowrap}
/* Rumor Avenue: the made bar is three months */
#s6 .mb-mo .made{display:flex;gap:4px;background:none;box-shadow:none}
#s6 .mb-mo .made i{flex:1;border-radius:3px;background:linear-gradient(90deg,rgba(63,224,214,.5),var(--teal-hi));box-shadow:0 0 14px -2px rgba(63,224,214,.5)}

/* JS: the carousel. Rows stack in one cell; the tabs show. Without JS every case is visible in turn (static ledger). */
html.js #s6 .row{grid-area:1/1}
html:not(.js) #s6 .row+.row{margin-top:var(--s7);padding-top:var(--s7);border-top:1px solid var(--petrol-line)}

/* ---------- lower band: Sami's own card + our own offer ---------- */
#s6 .s6-low{display:grid;gap:var(--s6)}
#s6 .s6-sami{margin:0;display:grid;gap:var(--s3);align-content:start}
#s6 .vid-box{position:relative;width:100%;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--petrol-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
/* object-position top: his whole head is always in frame, whatever the box's crop */
#s6 .vid-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* play glyph, JS only (.tap): the native controls wait for the first tap, so this is the one play icon; kept off his face */
#s6 .vid-box.tap::after{content:"";position:absolute;left:var(--s3);bottom:var(--s3);width:48px;height:48px;border-radius:50%;pointer-events:none;
  background:var(--teal-hi) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230B2224'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 0 0 6px rgba(63,224,214,.18),0 0 24px rgba(63,224,214,.5)}
#s6 .vid-box.on::after{display:none}
#s6 .vid-box.tap{cursor:pointer}
#s6 .s6-sami figcaption{display:grid;gap:var(--s1);font-size:var(--t-sm);color:var(--on-petrol)}

/* our own offer: a column; beside Sami's card the dot field takes all the height the card gives it (no empty floor) */
#s6 .own{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:28px;padding:var(--s5) var(--s4);overflow:hidden;
  background:radial-gradient(110% 90% at 50% 40%,#13403E,var(--petrol-2) 45%,#0A1F21 100%);border:1px solid var(--petrol-line)}
#s6 .own>.k{align-self:flex-start}   /* sized to its text, so it never runs under the pause control */
#s6 .field{position:relative;width:100%;aspect-ratio:3/2;margin-top:var(--s3)}
#s6 .field canvas{position:absolute;inset:0;width:100%;height:100%}
#s6 .fr{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2);margin-top:var(--s2)}
#s6 .fr p{min-width:0;font-size:var(--t-sm);line-height:1.35;color:var(--on-petrol-q);white-space:nowrap;transition:color var(--d-ui) var(--ease)}
#s6 .fr b{display:block;font-family:var(--mono);font-weight:700;font-size:var(--t-num);line-height:1.1;letter-spacing:-.03em;color:var(--on-petrol-q);margin-bottom:var(--s1);transition:color var(--d-ui) var(--ease)}
#s6 .fr p.on{color:var(--on-petrol)}
#s6 .fr p.on b{color:var(--on-petrol)}
#s6 .fr p.on b.acc{color:var(--teal-hi);text-shadow:0 0 22px rgba(63,224,214,.45)}
#s6 .ar{--aw:var(--s5);position:relative;flex:none;display:block;width:var(--aw);height:1px;margin-top:calc(var(--t-num) * .55);background:var(--on-petrol-q)}
#s6 .ar::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--on-petrol-q);border-right:1px solid var(--on-petrol-q);transform:translate(-.5px,.5px) rotate(45deg)}

/* client wall: names only, quiet */
#s6 .wall{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s5);padding-top:var(--s4);border-top:1px solid var(--petrol-line);color:var(--on-petrol-q);font-size:var(--t-sm)}
#s6 .wall li:not(.k){color:var(--on-petrol)}

/* shared pause control, kept clear of the content: the offer's top right, the carousel's bottom padding */
#s6 .own .mo-pause{top:var(--s3);bottom:auto;right:var(--s3)}
#s6 .s6-car .mo-pause{top:auto;bottom:var(--s4);right:var(--s3)}

/* phone: captions reserve two lines so the money block never jumps between cases; Sami full width at 4:5 (head at the top);
   the tab rail fades over a wide band at each edge, so a neighbour sliding past dissolves instead of reading as cut text */
@media (max-width:767px){
  #s6 .s6-car{padding-bottom:calc(var(--s8) + var(--s2))}
  #s6 .s6-tabs{--fe:max(8%, calc(50% - var(--tw, 240px) / 2 - 4px))}   /* fade ends at the active tab's edge */
  #s6 .cap{min-height:calc(2 * 1.4em)}
  #s6 .vid-box{aspect-ratio:4/5}
  #s6 .box{--bh:210px}
}
/* smallest phones: the funnel row keeps one line per label and a clear gap round each arrow */
@media (max-width:360px){
  #s6 .own{padding-inline:var(--s3)}
  #s6 .fr p{font-size:var(--t-label)}
  #s6 .ar{--aw:var(--s3)}
}
@media (min-width:768px){
  #s6 .s6-car{padding:var(--s6) var(--s6) calc(var(--s8) + var(--s2))}
  #s6 .s6-tabs{height:60px;margin-bottom:var(--s6)}
  #s6 .s6-tab{height:60px}
  /* the text column is centred against the screenshot's frame */
  #s6 .row{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s6);align-items:center}
  #s6 .info{gap:var(--s5)}
  #s6 .box{--bh:270px;--ch:24px}
  #s6 .chrome{background-position:14px 50%,28px 50%,42px 50%}
  #s6 .txt .k{display:block;margin:var(--s2) 0 0}
  #s6 .v{display:block;font-size:var(--t-body)}
  #s6 .mb{height:22px}
  /* Sami beside the offer from tablet up: two columns, same height; the field fills the offer column */
  #s6 .s6-low{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--s5);align-items:stretch}
  #s6 .own{padding:var(--s5)}
  #s6 .field{flex:1;aspect-ratio:auto;min-height:220px}
  #s6 .fr{margin-top:var(--s4)}
  #s6 .fr p{font-size:var(--t-body)}
  #s6 .wall{font-size:var(--t-body)}
}
@media (min-width:1024px){
  /* desktop: the pause sits beside the caption line, so the stage ends just under the caption */
  #s6 .s6-car{padding-bottom:var(--s6)}
  #s6 .s6-car .mo-pause{bottom:var(--s3)}
  #s6 .box{--bh:340px}
  #s6 .s6-low{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:var(--s6)}
  #s6 .vid-box{width:min(100%,300px)}
  #s6 .own{padding:var(--s6)}
  #s6 .fr{justify-content:flex-start;gap:var(--s6)}
  #s6 .fr p{font-size:var(--t-lg)}
  #s6 .ar{--aw:var(--s8)}
}

/* ---- s7 ---- */
/* S7 guarantee: white section, one PAPER panel. Composition (6 Oct, page critic: s7 shared the "headline left, card
   right" skeleton with s1 and s2b): a full-width progress LEDGER. Desktop (1200px+): the headline block on top, then
   the panel across the whole content width: the promise, then the five sheet items as one wide row of cells with the
   90-day dial and the refund stamp at the row's end; the button below. Under 1200px (five cells clip at 1024): the
   dial and stamp on top, centred, the items as rows.
   Mechanism: cause -> effect along a beam. Each item ticks ("mapped" hands over to "done"), a teal dot runs from the
   cell down to a rail under the ledger and along it into the dial (desktop), filling one of its five segments; at
   5 of 5 the stamp locks. Persistent actor: the dial + stamp. Default styles = the FINISHED frame; render(t) in
   s7.js drives per-row custom properties (--f fill, --fo fill opacity, --c check, --d done, --wo/--do the two state
   words, --wy the "mapped" lift, --a active cell). Every font size is a --t-* token. */
#s7{background:var(--canvas);border-top:0}
#s7 .lede{font-size:var(--t-lg)}
#s7 .s7-both{font-family:var(--mono);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:var(--s2)}
#s7 .s7-both::before{content:'';width:var(--s5);height:2px;background:var(--accent)}

/* the panel */
#s7 .s7-stage{position:relative;border-radius:28px;background:var(--paper);border:1px solid var(--paper-edge);
  box-shadow:0 30px 60px -36px rgba(42,36,20,.3),0 2px 6px rgba(42,36,20,.05)}
#s7 .s7-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"pr" "ga" "ex" "sh";
  row-gap:var(--s4);padding:var(--s5) var(--s4) var(--s5) var(--s5);transform-origin:50% 55%}
#s7 .s7-promise{grid-area:pr;padding-right:var(--s7);font-family:var(--head);font-weight:800;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
#s7 .s7-promise strong{font-weight:800;white-space:nowrap}
#s7 .s7-ex{grid-area:ex;font-family:var(--mono);font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);margin-top:var(--s2)}
#s7 .s7-sheet{grid-area:sh}
#s7 .s7-gauge{grid-area:ga;display:flex;align-items:center;gap:var(--s5);padding-right:var(--s3)}

/* sheet items: phone = rows (box, item, state cell where "mapped" hands over to "done") */
#s7 .s7-rows{list-style:none;border-top:1px solid var(--paper-edge)}
#s7 .s7-rows li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:var(--s3);
  min-height:52px;padding:var(--s2);border-bottom:1px solid var(--paper-edge)}
#s7 .s7-rows li::before{content:'';position:absolute;inset:0;background:var(--accent-soft);opacity:var(--a,0);pointer-events:none}
#s7 .s7-box{position:relative;width:22px;height:22px;border:1.5px solid var(--quiet-line);border-radius:6px;background:var(--canvas)}
#s7 .s7-box::before{content:'';position:absolute;inset:-1.5px;border-radius:6px;background:var(--accent);transform:scale(var(--f,1));opacity:var(--fo,1)}
#s7 .s7-box svg{position:absolute;inset:-1.5px;width:22px;height:22px;fill:none;stroke:var(--canvas);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:var(--fo,1)}
#s7 .s7-box path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--c,1))}
#s7 .s7-step{font-family:var(--sans);font-weight:500;font-size:var(--t-body);line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s7 .s7-st{display:grid;justify-items:end}
#s7 .s7-was,#s7 .s7-done{grid-area:1/1;font-family:var(--mono);font-weight:700;font-size:var(--t-sm);line-height:1}
#s7 .s7-was{color:var(--quiet);padding:var(--s1) 0;opacity:var(--wo,0);transform:translateY(calc(var(--wy,1) * -8px))}
#s7 .s7-done{color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-lg);padding:var(--s1) var(--s3);
  opacity:var(--do,1);transform:translateY(calc((1 - var(--d,1)) * 8px))}

/* the dial: five segments, one per item; the centre names the window */
#s7 .s7-dial{position:relative;flex:none;width:132px;aspect-ratio:1}
#s7 .s7-dial svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
#s7 .s7-trk path{fill:none;stroke:var(--paper-edge);stroke-width:14}
#s7 .s7-arc path{fill:none;stroke:var(--accent);stroke-width:14;stroke-dasharray:1 1;stroke-dashoffset:0}
#s7 .s7-arc{filter:drop-shadow(0 0 var(--glow,0px) rgba(0,161,155,.55))}
#s7 .s7-read{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
#s7 .s7-read b{font-family:var(--mono);font-weight:700;font-size:var(--t-num);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
#s7 .s7-read span,#s7 .s7-read em{font-family:var(--mono);font-weight:700;font-style:normal;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
#s7 .s7-read span{color:var(--ink);margin-top:var(--s1)}
#s7 .s7-read em{color:var(--accent-ink)}

/* the stamp: a tilted, outlined two-line seal ("90 days / Full refund"), not a button. Locked by default (finished
   frame); render(t) opens it for frame 0. The lock flash is a fill inside the seal, never a second outline. */
#s7 .s7-seal{position:relative;display:inline-flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s4) var(--s2) var(--s3);border-radius:var(--r-sm);
  color:var(--accent-ink);background:var(--canvas);border:2px solid var(--accent);box-shadow:inset 0 0 0 3px var(--accent-soft);transform:rotate(-3deg)}
#s7 .s7-seal::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--accent);opacity:var(--fl,0);pointer-events:none}
#s7 .s7-seal.open{color:var(--quiet);border:2px dashed var(--quiet-line);box-shadow:none}
#s7 .s7-lock{position:relative;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;overflow:visible}
#s7 .s7-shk{transform:translateY(var(--sh,0px))}
#s7 .s7-sl{position:relative;display:grid;font-family:var(--head);font-weight:800;font-size:var(--t-lg);line-height:1.1;letter-spacing:-.01em;white-space:nowrap}
#s7 .s7-sl em{font-family:var(--mono);font-style:normal;font-weight:700;font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;line-height:1.3}

/* the beam: a solid line drawn by a travelling dot (phone: up the left gutter; desktop: down to the rail, along it) */
#s7 .s7-beam{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
#s7 .s7-live .s7-beam{display:block}
#s7 .s7-bl{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#s7 .s7-dot{fill:var(--accent);filter:drop-shadow(0 0 5px rgba(0,161,155,.8))}
#s7 .mo-pause{top:var(--s3);bottom:auto;right:var(--s3)}

/* tablet: the dial and stamp centred over the rows, not parked top-left */
@media (min-width:640px){
  #s7 .s7-scene{padding:var(--s6)}
  #s7 .s7-dial{width:168px}
  #s7 .s7-read span{margin-top:var(--s2)}
  #s7 .s7-gauge{justify-content:center;padding-right:0}
}
@media (min-width:768px){#s7 .s7-rows li{padding:var(--s2) var(--s3)}}

/* desktop: the ledger. Headline block on top, the panel across the content width, the button under it */
@media (min-width:1200px){
  #s7 .grid{row-gap:var(--s6)}
  #s7 .s7-copy{grid-column:1/9}
  #s7 .s7-stage,#s7 .s7-cta{grid-column:1/13}
  #s7 .s7-scene{grid-template-columns:minmax(0,1fr) 200px;grid-template-areas:"pr ga" "ex ga" "sh ga";column-gap:var(--s7);row-gap:var(--s3);
    padding:var(--s6) var(--s7) var(--s7)}
  #s7 .s7-promise{align-self:end;padding-right:0;margin-bottom:var(--s3)}
  #s7 .s7-gauge{flex-direction:column;justify-content:center;gap:var(--s4);padding-right:0}
  /* the five items as one wide row of cells */
  #s7 .s7-rows{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--paper-edge);border-radius:var(--r);background:var(--canvas);overflow:hidden}
  #s7 .s7-rows li{grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;align-items:start;row-gap:var(--s4);min-height:132px;
    padding:var(--s4);border-bottom:0;border-right:1px solid var(--paper-edge)}
  #s7 .s7-rows li:last-child{border-right:0}
  #s7 .s7-step{white-space:normal;overflow:visible;line-height:1.25}
  #s7 .s7-st{grid-column:1/-1;justify-items:start}
  /* the stamp carries weight beside the dial */
  #s7 .s7-seal{padding:var(--s3) var(--s5) var(--s3) var(--s4)}
  #s7 .s7-sl{font-size:var(--t-h3)}
  #s7 .s7-lock{width:28px;height:28px}
}
@media (min-width:1280px){#s7 .s7-scene{grid-template-columns:minmax(0,1fr) 216px}#s7 .s7-dial{width:200px}}

/* 320-379px: the dial and stamp still share one row */
@media (max-width:379px){
  #s7 .s7-gauge{gap:var(--s3)}
  #s7 .s7-dial{width:100px}
  #s7 .s7-seal{gap:var(--s2);padding:var(--s2) var(--s3) var(--s2) var(--s2)}
  #s7 .s7-sl{font-size:var(--t-body)}
  #s7 .s7-step{font-size:var(--t-sm)}
}

/* ---- s8 ---- */
/* S8 who it's for: DARK petrol stage on a PAPER section (page rhythm 6 Oct: s2b paper, s7 white, s8 paper, s9 white,
   s10 paper). Mechanism: a filter. Frame 0 is a resolved verdict: the six real list items sorted into "This isn't for"
   (brick) and "This is for" (teal), one of them sitting in the gate (its header asks "Offer people already pay for?")
   with its verdict stamped. The gate is never empty: chips swap through it one at a time, neutral under the scan
   beam, then the verdict stamps. Persistent actor: the gate. No JS: the two lists sit side by side, already sorted. JS adds .s8-live and
   places everything from render(t). Every font size is a --t-* token (the lede included).
   1200px+ (page critic 3: s8 repeated s7's headline-over-panel): a split, the stage on the left (cols 1-8), the
   headline and lede on the right (cols 9-12). Phones and tablets stay stacked. */
#s8{border-top:0;background:var(--paper)}
#s8 .lede{text-wrap:pretty;font-size:var(--t-lg)}
@media (min-width:1200px){
  #s8 .grid{align-items:center}
  #s8 .s8-stage{grid-column:1/9;grid-row:1}
  #s8 .s8-hd{grid-column:9/13;grid-row:1}
}
#s8 .s8-stage{position:relative;border-radius:28px;overflow:hidden;color:var(--on-petrol);isolation:isolate;
  background:radial-gradient(120% 90% at 50% 40%,var(--petrol-2),var(--petrol) 72%);box-shadow:0 24px 48px -32px rgba(11,34,36,.5)}
#s8 .s8-stage::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,var(--petrol-line) 1px,transparent 1px) 0 0/32px 32px;
  -webkit-mask:radial-gradient(75% 70% at 50% 45%,#000,transparent);mask:radial-gradient(75% 70% at 50% 45%,#000,transparent)}
#s8 .s8-scene{position:relative;padding:var(--s6) var(--s5)}

/* labels: Space Mono caps */
#s8 .s8-q,#s8 .s8-tag{font-family:var(--mono);font-weight:700;font-size:var(--t-label);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
#s8 .s8-tag{color:var(--on-petrol-q);display:flex;align-items:center;gap:var(--s2)}
#s8 .s8-tag::before{content:'';width:var(--s5);height:2px;background:currentColor}
#s8 .s8-yes .s8-tag{color:var(--teal-hi)}
#s8 .s8-no .s8-tag{color:var(--brick-hi)}

/* chips (the li) */
#s8 ul{list-style:none}
#s8 li{position:relative;display:flex;align-items:center;padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + var(--s5) + var(--s3));border-radius:var(--r);
  font-family:var(--sans);font-weight:500;font-size:var(--t-body);line-height:1.35;color:var(--on-petrol);
  background:#123432;border:1.5px solid rgba(160,230,225,.3);box-shadow:0 12px 28px -14px rgba(0,0,0,.65)}
#s8 li::before{content:'';position:absolute;left:var(--s4);top:50%;width:var(--s5);height:var(--s5);margin-top:calc(var(--s5) / -2);border-radius:50%;
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:var(--t-sm);line-height:1;border:1.5px solid rgba(160,230,225,.4)}
/* passed: teal light */
#s8 .s8-stage:not(.s8-live) .s8-yes li,#s8 li.ok{border-color:var(--teal-hi);background:#0F3A38;
  box-shadow:0 12px 28px -14px rgba(0,0,0,.65),0 0 22px -6px rgba(63,224,214,.7)}
#s8 .s8-stage:not(.s8-live) .s8-yes li::before,#s8 li.ok::before{content:'\2713';border-color:var(--teal-hi);background:var(--teal-hi);color:var(--petrol)}
/* bounced: brick */
#s8 .s8-stage:not(.s8-live) .s8-no li,#s8 li.no{border-color:rgba(255,122,110,.6);background:#2A1E1D;color:#E9D3D0}
#s8 .s8-stage:not(.s8-live) .s8-no li::before,#s8 li.no::before{content:'\00D7';border-color:var(--brick-hi);background:transparent;color:var(--brick-hi);font-size:var(--t-body)}

/* no JS: two sorted lists */
#s8 .s8-stage:not(.s8-live) .s8-gate,#s8 .s8-stage:not(.s8-live) .s8-scan,#s8 .s8-stage:not(.s8-live) .s8-vd{display:none}
#s8 .s8-stage:not(.s8-live) .s8-cmp{display:grid;gap:var(--s6)}
#s8 .s8-stage:not(.s8-live) ul{display:grid;gap:var(--s3);margin-top:var(--s4)}
@media (min-width:768px){#s8 .s8-stage:not(.s8-live) .s8-cmp{grid-template-columns:1fr 1fr}#s8 .s8-scene{padding:var(--s7)}}

/* live: every piece is placed by JS (transform and opacity only) */
#s8 .s8-live .s8-scene{padding:0}
#s8 .s8-live .s8-tag,#s8 .s8-live li,#s8 .s8-live .s8-gate,#s8 .s8-live .s8-scan,#s8 .s8-live .s8-vd{position:absolute;left:0;top:0;margin:0}
#s8 .s8-live li span{display:block}
/* the empty home slot while a chip is in the gate */
#s8 .s8-slot{display:none}
#s8 .s8-live .s8-slot{display:block;position:absolute;left:0;top:0;z-index:0;border:1.5px dashed rgba(160,230,225,.22);border-radius:var(--r);opacity:0}
/* phones: chips one line where they can, so the whole filter fits about one screen */
#s8 .s8-narrow li{font-size:var(--t-sm);padding-block:var(--s2)}
#s8 .s8-narrow .s8-q{letter-spacing:.02em}

/* the gate: a lit frame whose header carries the question; it flashes teal on a pass, brick on a bounce */
#s8 .s8-gate{z-index:3;pointer-events:none;border-radius:calc(var(--r) + var(--s2));border:1.5px solid rgba(63,224,214,.45);background:#0D2B2A;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 32px -8px rgba(63,224,214,.45);overflow:hidden}
#s8 .s8-q{display:flex;align-items:center;gap:var(--s2);height:32px;padding:0 var(--s3);color:var(--teal-hi);background:rgba(63,224,214,.1);border-bottom:1px solid rgba(63,224,214,.3)}
#s8 .s8-q::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal-hi);box-shadow:0 0 10px var(--teal-hi)}
#s8 .s8-gate.pass{border-color:var(--teal-hi);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 44px -4px rgba(63,224,214,.85)}
#s8 .s8-gate.fail{border-color:var(--brick-hi);box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 44px -4px rgba(255,122,110,.75)}
#s8 .s8-gate.fail .s8-q{color:var(--brick-hi);background:rgba(255,122,110,.1);border-color:rgba(255,122,110,.35)}
#s8 .s8-gate.fail .s8-q::before{background:var(--brick-hi);box-shadow:0 0 10px var(--brick-hi)}
/* the scan beam: a full-height bar of light that sweeps across the chip */
#s8 .s8-scan{z-index:7;width:4px;border-radius:4px;pointer-events:none;opacity:0;background:#E8FFFD;
  box-shadow:0 0 12px 3px rgba(63,224,214,.9),0 0 36px 10px rgba(63,224,214,.35)}
/* the verdict stamp: a ring that lands round the chip's own badge (one tick or cross, never two) */
#s8 .s8-vd{z-index:8;width:40px;height:40px;border-radius:50%;pointer-events:none;opacity:0;border:3px solid transparent}
#s8 .s8-vd.ok{border-color:var(--teal-hi);box-shadow:0 0 18px rgba(63,224,214,.9),inset 0 0 10px rgba(63,224,214,.5)}
#s8 .s8-vd.no{border-color:var(--brick-hi);box-shadow:0 0 18px rgba(255,122,110,.75),inset 0 0 10px rgba(255,122,110,.4)}

/* ---- s9 ---- */
/* S9 FAQ: light breather, no stage, on WHITE (page rhythm 6 Oct: s2b paper, s7 white, s8 paper, s9 white, s10 paper).
   Desktop: the heading column holds still (sticky) in cols 1-4 and carries a large index numeral of the question you
   last opened; the questions run in cols 5-12. Questions Geist 600 with a Space Mono index; the plus folds into a
   minus; a teal rule marks the open row. Open/close animates grid-template-rows 0fr -> 1fr (JS adds .s9-js; without
   JS the native <details> just opens). The one motion detail: the big numeral rolls to the question.
   Every font size is a --t-* token; the aria-hidden numeral is exactly --t-h2 (no derived size). */
#s9{border-top:0;background:var(--canvas)}
#s9 .s9-list{border-top:1px solid var(--line)}
#s9 details{position:relative;border-bottom:1px solid var(--line)}
#s9 details::before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);opacity:0}
#s9 details[open]::before{opacity:1}
#s9 summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:var(--s6) minmax(0,1fr) auto;align-items:center;column-gap:var(--s4);
  min-height:56px;padding-block:var(--s4);-webkit-tap-highlight-color:transparent}
#s9 summary::-webkit-details-marker{display:none}
/* focus: the ring goes round the whole row with room to spare, never over the index, the question or the icon */
#s9 summary:focus-visible{outline:none}
#s9 details:has(summary:focus-visible){outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}
#s9 summary i{font-style:normal;font-family:var(--mono);font-weight:700;font-size:var(--t-label);letter-spacing:.06em;color:var(--quiet);
  transition:color var(--d-micro) var(--ease)}
#s9 summary span{font-family:var(--sans);font-weight:600;font-size:var(--t-h3);line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
/* plus -> minus: the vertical bar turns flat; teal on the open row */
#s9 summary b{position:relative;width:var(--s6);height:var(--s6);border-radius:50%;border:1px solid var(--line);background:var(--canvas);
  transition:border-color var(--d-micro) var(--ease),transform 160ms var(--ease)}
#s9 summary b::before,#s9 summary b::after{content:'';position:absolute;left:50%;top:50%;width:var(--s3);height:2px;margin:-1px 0 0 calc(var(--s3) / -2);
  border-radius:2px;background:var(--ink);transition:transform var(--d-ui) var(--ease),background-color var(--d-micro) var(--ease)}
#s9 summary b::after{transform:rotate(90deg)}
#s9 details[open] summary b{border-color:var(--accent)}
#s9 details[open] summary b::before,#s9 details[open] summary b::after{background:var(--accent-ink)}
#s9 details[open] summary b::after{transform:rotate(0deg)}
#s9 details[open] summary i{color:var(--accent-ink)}
#s9 summary:active b{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){#s9 summary:hover b{border-color:var(--ink)}#s9 details[open] summary:hover b{border-color:var(--accent)}}

/* the answer sits under the question text (index column + gap); grid rows open it */
#s9 .s9-a{display:grid;grid-template-rows:1fr}
#s9 .s9-a>div{min-height:0;overflow:hidden}
#s9 .s9-a p{padding:0 var(--s7) var(--s5) calc(var(--s6) + var(--s4));font-size:var(--t-lg);line-height:1.55;color:var(--body);max-width:60ch}

/* JS: .on drives the motion; [open] only exists while the row is open or closing. Open is unhurried, close is quick */
#s9.s9-js .s9-a{transition:grid-template-rows 380ms cubic-bezier(.33,1,.68,1)}
#s9.s9-js .s9-a p{transition:transform 280ms var(--ease) 60ms,opacity 280ms var(--ease) 60ms}
#s9.s9-js details:not(.on) .s9-a{grid-template-rows:0fr;transition-duration:220ms}
#s9.s9-js details:not(.on) .s9-a p{transform:translateY(var(--s2));opacity:0;transition-duration:150ms;transition-delay:0ms}
#s9.s9-js details:not(.on)::before{opacity:0}
#s9.s9-js details:not(.on) summary b::after{transform:rotate(90deg)}

/* the big index numeral (desktop only, aria-hidden): the h2 size exactly, in pale teal under "Questions" */
#s9 .s9-big{display:none}
@media (min-width:1024px){
  #s9 .grid{align-items:start}
  #s9 .s9-hd{grid-column:1/5;position:sticky;top:var(--s8)}
  #s9 .s9-list{grid-column:5/13}
  #s9 summary{min-height:64px;padding-block:var(--s5)}
  #s9 .s9-big{display:block;margin-top:var(--s5);height:1em;overflow:hidden;font-family:var(--mono);font-weight:700;font-size:var(--t-h2);line-height:1;letter-spacing:-.04em;color:var(--accent);opacity:.35}
  #s9 .s9-big span{display:block}
  #s9.s9-js .s9-big span{transition:transform 420ms var(--ease),opacity 420ms var(--ease)}
  #s9 .s9-big span.out{transform:translateY(-40%);opacity:0;transition-duration:0ms}
}
/* phone: the index sits above the question so the question gets the full width */
@media (max-width:480px){
  #s9 summary{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s1)}
  #s9 summary i{grid-column:1;grid-row:1}
  #s9 summary span{grid-column:1;grid-row:2}
  #s9 summary b{grid-column:2;grid-row:1/3}
  #s9 .s9-a p{padding:0 0 var(--s5)}
}

/* ---- s10 ---- */
/* S10 v2 final CTA: LIGHT. PAPER section (page rhythm 6 Oct: s2b paper, s7 white, s8 paper, s9 white, s10 paper);
   one WHITE call ticket is the lead subject, on the LEFT at desktop (s7 is a full-width ledger, so the two never
   mirror). Mechanism: materializing result + tear. While the ticket's counter runs to 45:00, four tangled grey lines
   straighten into one teal route to a flag (a mess becoming a map: what a mapping call does), then the ₹999 stub
   tears along the seam (a gap opens, it drops and tilts) and rests. Teal is only the route and the flag. The button
   is static: readable and clickable in every frame.
   Default (no JS / reduced motion) = the finished frame. Phone order: headline, note, ticket, button. */
#s10{border-top:0;background:var(--paper)}
#s10 .grid{row-gap:var(--s5)}
#s10 .s10-h{max-width:12ch}
#s10 .s10-note{font-size:var(--t-lg);color:var(--body)}
#s10 .s10-note{margin-top:calc(-1 * var(--s3))}
@media (min-width:1024px){
  #s10 .grid{align-items:center;row-gap:var(--s4)}
  #s10 .s10-tk{grid-column:1/8;grid-row:1/4}
  #s10 .s10-h{grid-column:8/13;grid-row:1;align-self:end}
  #s10 .s10-note{grid-column:8/13;grid-row:2;margin-top:0}
  #s10 .s10-cta{grid-column:8/13;grid-row:3;align-self:start;margin-top:var(--s3)}
}

/* the ticket: body + stub, both white on the paper ground, notched corners, the perforation is the seam between them */
#s10 .s10-tk{position:relative;display:flex;align-items:stretch;filter:drop-shadow(0 2px 2px rgba(42,36,20,.1)) drop-shadow(0 24px 30px rgba(42,36,20,.16))}
#s10 .s10-body,#s10 .s10-stub{--n:var(--s4);--h:3.5px;background:var(--canvas);
  -webkit-mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000),radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000),
    radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000),radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000),var(--seam);
          mask:radial-gradient(circle var(--n) at 0 0,#0000 98%,#000),radial-gradient(circle var(--n) at 100% 0,#0000 98%,#000),
    radial-gradient(circle var(--n) at 0 100%,#0000 98%,#000),radial-gradient(circle var(--n) at 100% 100%,#0000 98%,#000),var(--seam);
  -webkit-mask-composite:source-in,source-in,source-in,source-in;mask-composite:intersect}
#s10 .s10-body{--seam:radial-gradient(circle var(--h) at 100% 50%,#0000 98%,#000) 0 0/100% var(--s3) repeat-y;flex:1;min-width:0;padding:var(--s5) var(--s5) var(--s4)}
#s10 .s10-lay{display:grid;align-content:start;gap:var(--s3)}
#s10 .s10-stub{--seam:radial-gradient(circle var(--h) at 0 50%,#0000 98%,#000) 0 0/100% var(--s3) repeat-y;
  flex:0 0 108px;display:flex;flex-direction:column;justify-content:center;gap:var(--s2);padding:var(--s4) var(--s3) var(--s4) var(--s4);transform-origin:0 0}
@media (min-width:768px){
  #s10 .s10-body,#s10 .s10-stub{--n:var(--s5)}
  #s10 .s10-body{padding:var(--s6) var(--s6) var(--s5)}
  #s10 .s10-stub{flex-basis:30%;gap:var(--s4);padding:var(--s5) var(--s5) var(--s5) var(--s6)}
}

/* the counter: ink, with a thin ink progress line */
#s10 .s10-time{display:grid;gap:var(--s2)}
#s10 .s10-clock{font-family:var(--mono);font-weight:700;font-size:var(--t-h3);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
#s10 .s10-bar{display:block;height:3px;border-radius:3px;background:var(--paper-edge);overflow:hidden}
#s10 .s10-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,1))}
@media (min-width:768px){#s10 .s10-clock{font-size:var(--t-num)}}

/* the map: tangled grey lines (stroke >= 1.5px rendered), one teal route, ink start, a flag */
#s10 .s10-map{width:100%;height:auto;overflow:visible}
#s10 .s10-tangle path{fill:none;stroke:#9C9584;stroke-width:2.2;stroke-linecap:round}
#s10 .s10-route{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
#s10 .s10-run{fill:none;stroke:#E6FCFA;stroke-width:3;stroke-linecap:round;stroke-dasharray:.12 1.2;stroke-dashoffset:.16;opacity:0;filter:drop-shadow(0 0 6px rgba(63,224,214,.9))}
#s10 .s10-start{fill:var(--ink)}
#s10 .s10-pole{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
#s10 .s10-pen{fill:#B9B2A0}
#s10 .s10-pen.s10-on{fill:var(--accent)}

/* the stub: ink price, ink condition */
#s10 .s10-price{display:inline-flex;align-items:center;font-family:var(--mono);font-weight:700;font-size:var(--t-h3);line-height:1;letter-spacing:-.03em;color:var(--ink)}
/* ponytail: the brand mono subset has no ₹ (U+20B9), so the glyph is drawn at the mono's weight */
#s10 .s10-rs{width:auto;height:.76em;margin-right:.02em;flex:none}
#s10 .s10-cr{font-size:var(--t-sm);line-height:1.3;color:var(--ink);text-wrap:balance}
@media (min-width:768px){#s10 .s10-price{font-size:var(--t-num)}#s10 .s10-cr{font-size:var(--t-body)}}

#s10 .btn{white-space:nowrap}
@media (max-width:380px){#s10 .btn{padding:0 var(--s4)}}
/* pause control: top right of the ticket body, clear of the counter */
#s10 .mo-pause{top:var(--s3);right:calc(108px + var(--s3));bottom:auto}
@media (min-width:768px){#s10 .mo-pause{right:calc(30% + var(--s3))}}

/* ---- s5b ---- */
/* S5b v6 (LIGHT, white): Sprint vs Accelerator. One ruled table; the Accelerator column is the elevated one in every state.
   With JS (and motion allowed) a segmented control moves a teal highlight from one programme to the other: a tint UNDER the
   text runs across the rows one after another (a wave), then a single outline frames the chosen column. It never hides an
   answer. No JS / reduced motion: the plain table (Accelerator column tinted). Phone: stacked rows (label, then both answers). */
#s5b{border-top:0;background:var(--canvas)}
#s5b .s5b-grid{row-gap:var(--s6)}
#s5b .s5b-t{position:relative;isolation:isolate}
#s5b table{position:relative;z-index:1;width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--t-body);line-height:1.45}
#s5b th,#s5b td{text-align:left;vertical-align:top;padding:var(--s4) var(--s4);border-bottom:1px solid var(--line)}
#s5b thead td{width:20%}
#s5b thead th,#s5b thead td{border-bottom:1px solid var(--ink);padding-top:var(--s5);padding-bottom:var(--s3)}
/* row heads: Space Mono 700, ink at 70%, so they read as heads next to the answers */
#s5b tbody th{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;letter-spacing:0;color:rgba(18,18,18,.7);padding-left:0;padding-top:calc(var(--s4) + 2px)}
#s5b tbody td{color:var(--body)}
#s5b .s5b-acc{background:var(--accent-soft);color:var(--ink)}
#s5b tbody td.s5b-acc{color:var(--ink);border-bottom-color:rgba(0,161,155,.22)}
#s5b thead th.s5b-acc{border-radius:14px 14px 0 0;border-bottom-color:var(--accent)}
#s5b tr.s5b-last td.s5b-acc{border-radius:0 0 14px 14px;border-bottom-color:transparent}
#s5b .s5b-tag{display:inline-block;padding:var(--s1) var(--s3);font-family:var(--mono);font-size:var(--t-sm);font-weight:700;letter-spacing:.02em;line-height:1.4;
  color:var(--body);background:var(--elevated);border:1px solid var(--elevated);border-radius:999px}
#s5b th.s5b-acc .s5b-tag{color:var(--accent-ink);background:var(--canvas);border-color:var(--accent)}
/* the guarantee: one framed strip under both programmes, text centred in it */
#s5b .s5b-g th,#s5b .s5b-g td{border-bottom:0}
#s5b .s5b-g th{padding-top:calc(var(--s6) + 3px)}
#s5b .s5b-g td{position:relative;padding:calc(var(--s4) + 2 * var(--s3)) var(--s5) var(--s4);color:var(--ink);font-weight:600}   /* strip starts s3 down: equal space above and below the text inside it */
#s5b .s5b-g td::before{content:"";position:absolute;inset:var(--s3) 0 0 0;z-index:-1;border-radius:14px;background:var(--paper);border:1px solid var(--paper-edge)}

/* the motion layer sits UNDER the table text: the elevated Accelerator card, the row tints, the settled frame */
#s5b .s5b-bands{position:absolute;inset:0;z-index:0;pointer-events:none}
#s5b .s5b-bands i{position:absolute;left:0;top:0;display:block}
#s5b .s5b-card{border-radius:16px;background:var(--canvas);border:1px solid rgba(0,161,155,.3);
  box-shadow:0 1px 2px rgba(18,18,18,.06),0 20px 40px -20px rgba(0,161,155,.32)}
#s5b .s5b-band{background:rgba(0,161,155,.15);border-radius:6px}
#s5b .s5b-band:first-child+.s5b-band{border-radius:14px 14px 6px 6px}
#s5b .s5b-band:nth-last-child(2){border-radius:6px 6px 14px 14px}
#s5b .s5b-frame{border:2px solid var(--accent);border-radius:16px;box-shadow:0 0 0 5px var(--accent-soft)}
/* with JS the column backgrounds come from the layer, so the table cells go transparent */
#s5b.s5b-js:not(.s5b-stk) .s5b-acc{background:transparent}

/* the segmented control */
#s5b .s5b-seg{position:relative;align-self:end;justify-self:start;display:inline-flex;padding:var(--s1);border:1px solid var(--line);border-radius:999px;background:var(--surface)}
#s5b .s5b-seg[hidden]{display:none}
#s5b .s5b-seg button{position:relative;z-index:1;min-height:44px;padding:0 var(--s5);border-radius:999px;font-family:var(--mono);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.02em;color:var(--body);transition:color var(--d-micro) var(--ease)}
#s5b .s5b-seg button.on{color:#fff}
#s5b .s5b-seg button:focus-visible{outline-offset:-2px}
#s5b .s5b-pill{position:absolute;left:0;top:var(--s1);bottom:var(--s1);border-radius:999px;background:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}

@media (min-width:1024px){
  #s5b table{font-size:var(--t-lg)}
  #s5b th,#s5b td{padding:var(--s5) var(--s6) var(--s5) var(--s5)}
  #s5b tbody th{padding-left:0;padding-top:calc(var(--s5) + 4px);font-size:var(--t-body)}
  #s5b .s5b-g th{padding-top:calc(var(--s6) + var(--s1) + 4px)}
  #s5b .s5b-g td{padding:calc(var(--s5) + var(--s3)) var(--s6) var(--s5)}
  #s5b .s5b-hd{grid-row:1}
  #s5b .s5b-seg{grid-row:1;justify-self:end}
}

/* phone: stacked rows (label, then the Sprint answer, then the Accelerator answer); works with no JS */
@media (max-width:767px){
  #s5b table,#s5b tbody,#s5b tr,#s5b th,#s5b td{display:block;width:auto}
  #s5b thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #s5b tbody tr{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
  #s5b tbody th,#s5b tbody td{border:0;padding:0}
  #s5b tbody th{padding-bottom:var(--s2)}
  #s5b tbody td{padding:var(--s2) var(--s3);border-radius:10px}
  #s5b tbody td.s5b-spr::before,#s5b tbody td.s5b-acc::before{display:block;margin-bottom:2px;font-family:var(--mono);font-size:var(--t-label);font-weight:700;
    letter-spacing:.04em;color:var(--quiet)}
  #s5b tbody td.s5b-spr::before{content:"Sprint"}
  #s5b tbody td.s5b-acc::before{content:"Accelerator";color:var(--accent-ink)}
  #s5b tbody td.s5b-acc{margin-top:var(--s1)}
  #s5b tr.s5b-last td.s5b-acc{border-radius:10px}
  /* with JS: no resting tint; the Accelerator keeps its teal label and a teal hairline, the moving tint shows the choice */
  #s5b.s5b-js tbody td.s5b-acc{background:transparent;box-shadow:inset 0 0 0 1px rgba(0,161,155,.35)}
  #s5b .s5b-band,#s5b .s5b-band:first-child+.s5b-band,#s5b .s5b-band:nth-last-child(2){border-radius:10px;background:rgba(0,161,155,.24)}
  #s5b .s5b-card,#s5b .s5b-frame{display:none!important}
  #s5b .s5b-g{border-bottom:0}
  #s5b .s5b-g td{padding:var(--s4)}
  #s5b .s5b-g td::before{inset:0}
  #s5b .s5b-seg{display:flex;width:100%}
  #s5b .s5b-seg button{flex:1}
  #s5b .s5b-cta .btn{width:100%}
}