/* Site A. Look and motion studied from a reference reel (reel 23 in the repo's records): colours,
   grid, cards and motion. Launch fixes (review 10): one type family for words (Geist), mono only
   for figures, tables and times inside the product screens; italic serif only in the hero and closing headings;
   radii 8px inside cards, 14px cards, 22px large blocks, full round only for buttons; lime for the main button
   and one figure per screen, no glow outside the hero panel. Dark only, as the reel. */
@font-face{font-family:Geist;src:url(fonts/geist.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(fonts/geist-mono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
  --bg:#0a0c09; --bg2:#0f130c; --glass:rgba(20,25,17,.74); --glass-flat:rgba(18,23,15,.84); --glass-phone:rgba(20,25,17,.8); --glass2:rgba(30,36,26,.7); --solid:#151a12;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.15);
  --ink:#f2f4ee; --mute:#959d8d; --dim:#838b7b;
  --lime:#c5f84f; --lime-ink:#10140a; --lime-soft:rgba(197,248,79,.1); --lime-line:rgba(197,248,79,.42);
  --r:14px; --r-sm:8px; --r-lg:22px; --nav:60px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px);scroll-padding-bottom:64px}
body{background:var(--bg);color:var(--ink);font:400 15px/1.55 Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.01em}
.dim{color:var(--dim)}
/* emphasis in a heading: the second half in grey, same family (italic serif only in the hero and closing headings) */
.tone{color:var(--mute)}
em.s{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.005em;padding-right:.04em}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--lime);color:var(--lime-ink);padding:8px 14px;border-radius:99px;font-weight:500}
.skip:focus{top:10px}
/* the page keeps moving, so it carries a way to stop it (WCAG 2.2.2) */
/* two buttons, one state (site.js): an icon in the menu bar, a worded one in the footer. Nothing floats over the page. */
.motion-t{padding:6px 12px;border-radius:99px;border:1px solid var(--line2);color:var(--mute);font-size:12.5px;transition:color .2s,border-color .2s}
.motion-t:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.motion-i{width:36px;height:36px;border-radius:99px;border:1px solid var(--line2);color:var(--mute);display:inline-grid;place-items:center;flex:none;transition:color .2s,border-color .2s}
.motion-i[hidden],.motion-t[hidden]{display:none}
.motion-i:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.motion-i .i-play{display:none}
.motion-i[aria-pressed="true"] .i-play{display:block}.motion-i[aria-pressed="true"] .i-pause{display:none}
.paused .run .state i,.paused .typing i,.paused .flow-line i{animation-play-state:paused}

/* -------- the sky: live light ribbons on a fixed canvas pair (sky.js), behind the whole page.
   The still SVG ribbon is the fallback when the script does not run. */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;inset:0;background:radial-gradient(60% 50% at 64% 38%,rgba(120,160,60,.16),transparent 70%),radial-gradient(40% 40% at 92% 92%,rgba(60,90,120,.14),transparent 70%)}
.rib{position:absolute;pointer-events:none}
#sky-rib{right:-14%;top:-8%;width:96%;height:120%}
.sky.live #sky-rib{display:none}
/* Focus shares the sky clock, so pause holds its opacity as well as its pixels. */
.sky canvas{position:absolute;inset:0;width:100%;height:100%}
.sky-haze{image-rendering:auto}

/* -------- nav */
.nav{position:sticky;top:0;z-index:30;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);background:rgba(10,12,9,.6);border-bottom:1px solid var(--line)}
@media (min-width:881px){.nav.on-lime{background:rgba(10,12,9,.9)}}
.nav .wrap{display:flex;align-items:center;gap:26px;height:var(--nav)}
.logo{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px;letter-spacing:-.01em}
/* AugmentLoop's own mark (live augmentloop.com): two outline rings, the small one #c0652a; on this dark page the
   large ring takes the text colour, the usual reversed logo (Mukund 14 Oct, decision 60) */
.logo-mark{width:22px;height:22px;flex:none;color:var(--ink)}
.jump-nav{display:flex;gap:4px;margin-left:auto;font-size:13px}
.nav .motion-i{margin-left:-14px}
.jump-nav a{color:var(--mute);padding:6px 10px;border-radius:99px;transition:color .2s,background-color .2s}
.jump-nav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.jump-nav a.on{color:var(--ink);background:rgba(197,248,79,.09);box-shadow:inset 0 0 0 1px var(--lime-line)}
.chips{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:36px;padding:0 17px;border-radius:99px;font-weight:500;font-size:13.5px;white-space:nowrap;transition:transform .15s var(--ease),background-color .2s,box-shadow .2s,border-color .2s}
.btn:active{transform:scale(.97)}
.btn-lg{height:44px;padding:0 22px;font-size:14.5px}
.btn-lime{position:relative;overflow:hidden;isolation:isolate;background:var(--lime);color:var(--lime-ink);transition:transform .15s var(--ease),color .35s var(--ease),box-shadow .3s}
.btn-lime::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--lime-ink);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.btn-lime:hover{color:var(--lime)}
.btn-lime:hover::before{transform:scaleX(1)}
.btn-dark{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--ink)}
.btn-dark:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.25)}
.play{width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}

main{position:relative;z-index:1}

/* -------- hero (reel 0 to 5 s) */
.hero{min-height:calc(100dvh - var(--nav));display:grid;grid-template-columns:1fr 1.08fr;grid-template-rows:1fr auto;grid-template-areas:"copy run" "outs outs";column-gap:44px;row-gap:28px;align-items:center;padding-block:32px 22px}
.hero-copy{grid-area:copy}.hero .run{grid-area:run}
/* outcomes on the first screen: one number per client, each a jump to its scene (reel 23 numbers at 13.3 s) */
.outs{grid-area:outs;align-self:end;display:grid;grid-template-columns:repeat(4,1fr);padding:0 22px;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.outs a{display:flex;flex-direction:column;gap:5px;padding:16px 18px 16px 0;min-width:0;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.outs a + a{padding-left:20px;border-left:1px solid var(--line)}
.outs .l{color:var(--mute);font-size:12.5px;transition:color .25s}
.outs .v{font-weight:500;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;transition:color .25s}
.outs .v small{font-size:.5em;letter-spacing:-.01em;color:var(--mute)}
.outs .c{color:var(--mute);font-size:13px;line-height:1.35}
.outs a:hover .v{color:var(--lime)}.outs a:hover .l{color:var(--ink)}
.hero h1{font-weight:500;font-size:clamp(38px,5vw,64px);line-height:1.04;letter-spacing:-.035em;margin:0 0 20px;max-width:12ch}
.hero h1 em.s{font-size:1.08em;display:inline-block;padding-bottom:.08em}
.lede{color:var(--mute);max-width:40ch;font-size:17px;line-height:1.5}
.cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .9s var(--ease) both;animation-delay:calc(var(--d) * 110ms + 80ms)}
}
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Decision 70: glass blur is redrawn every frame for every card on screen, because the sky behind it never stops
   moving; on a machine without GPU help that alone took the hero from 55 to 21 frames a second. Behind the overview
   and the scenes the sky is already soft and dim, so a blur there changed nothing a visitor could see: those cards
   are a little more opaque instead. The blur stays where the sharp ribbon runs behind glass: the hero's run panel
   and outcome strip, and the closing card. */
.panel{background:var(--glass-flat);border:1px solid var(--line);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.45)}
.hero .panel{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* the reel's run panel sits turned slightly away (0 to 5 s); the pointer tips it a little more (site.js) */
/* the pointer moves it (site.js, smoothed there, so no CSS transition): the glass drifts away from the pointer,
   the steps inside drift towards it, as measured in the reel */
.run{padding:16px 18px 14px;transform:translate3d(var(--gx,0px),var(--gy,0px),0) perspective(1600px) rotateY(calc(-9deg + var(--tx,0deg))) rotateX(calc(3deg + var(--ty,0deg)));transform-origin:30% 50%}
.f-hero{will-change:transform}
.run.rise{animation-name:rise-run}
@keyframes rise-run{from{opacity:0;filter:blur(6px);transform:perspective(1600px) rotateY(-16deg) rotateX(5deg) translateY(16px)}}
.run .hd{display:flex;gap:16px;align-items:center;color:var(--mute);padding-bottom:12px;border-bottom:1px solid var(--line)}
.run .hd .state{margin-left:auto;color:var(--lime);display:inline-flex;align-items:center;gap:7px}
.run .hd .state i{width:6px;height:6px;border-radius:50%;background:var(--lime);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.replay{font:500 11.5px Geist,system-ui,sans-serif;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:3px 9px;transition:color .2s,border-color .2s,background-color .2s;flex:none}
.replay:hover{color:var(--ink);border-color:var(--line2);background:rgba(255,255,255,.04)}
.replay:active{transform:scale(.96)}
/* -------- node systems (flow.js). Grid places the steps; wires are measured and drawn between them.
   A signal runs along one route at a time, lighting each wire and step it reaches (reel 0 to 5 s). */
.flow{--gap:26px;container-type:inline-size;position:relative;display:grid;grid-auto-columns:minmax(0,1fr);column-gap:var(--gap);row-gap:16px;align-items:center}
.fn{grid-column:var(--c) / span var(--cs,1);grid-row:var(--r) / span var(--rs,1);position:relative;z-index:1;align-self:center;justify-self:center;width:max-content;max-width:100%;
  background:rgba(22,28,18,.92);border:1px solid var(--line2);border-radius:var(--r-sm);padding:7px 10px;font-size:12px;line-height:1.3;color:var(--mute);
  transition:border-color .4s,box-shadow .4s,background-color .4s,color .4s,opacity .4s}
.fn small{display:block;color:var(--dim);font:400 10px/1.3 "Geist Mono",monospace;margin-top:2px}
.fn.lit{color:var(--ink);border-color:var(--lime-line);background:rgba(36,46,26,.94)}
.fn.end.lit{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.fn.end.lit small{color:rgba(16,20,10,.66)}
.fn.hit{border-color:var(--lime)}
.fn.dim-node:not(.lit){opacity:.55}
.fw{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fw path{fill:none;stroke-width:1.3;stroke-linecap:round}
.fw .w{stroke:rgba(255,255,255,.14);transition:stroke .4s}
.fw .w.walked{stroke:rgba(197,248,79,.28)}
.fw .wl{stroke:var(--lime)}
.flow.focus .fn:not(.near){opacity:.5}
.flow.focus .fw .w.near{stroke:rgba(255,255,255,.55)}
.sig{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#f0ffd0;opacity:0;z-index:2;pointer-events:none;transition:opacity .2s;will-change:transform}
.sig.on{opacity:1}
.ft{position:absolute;z-index:2;transform:translate(-50%,-50%);font-size:9.5px;padding:1px 6px;border-radius:99px;border:1px solid var(--line);background:var(--bg);color:var(--dim);transition:color .4s,border-color .4s}
.ft.lit{color:var(--lime);border-color:var(--lime-line)}
.f-hero{margin:16px 0 14px;min-height:150px;--gap:18px;row-gap:26px}
.f-hero .fn{max-width:132px}
.f-hero .fn{font-size:12.5px}
.f-row{--gap:20px;margin:10px 0 4px}
/* narrow box: the same steps run downwards */
@container (max-width:560px){
  .f-row .fn small{display:none}
  .f-row .fn{font-size:11.5px;padding:6px 8px;text-align:center}
}
@container (max-width:400px){
  .f-row .fn small{display:block}
  .f-row .fn{font-size:12px;padding:7px 11px}
  .f-hub{grid-template-columns:1fr}
  .f-hub .fn{grid-column:1;grid-row:auto;justify-self:stretch !important}
  .f-hub .core-n{justify-self:start !important;width:56px;height:56px;font-size:22px}
  .f-hub .fw,.f-hub .sig{display:none}
  .fn{grid-column:var(--r) / span var(--rs,1);grid-row:var(--c) / span var(--cs,1)}
  .ft{font-size:9px}
}
.runs{border-top:1px solid var(--line);padding-top:8px;color:var(--mute)}
.runs .lbl{color:var(--dim);font-size:10.5px;padding:2px 0 4px}
.runs ol{list-style:none;position:relative}
.runs li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;padding:4px 0;align-items:center;transition:transform .5s var(--ease),opacity .5s}
.runs li.enter{transform:translateY(-8px);opacity:0}
.runs .dot{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.runs .f .dot{background:var(--lime);box-shadow:0 0 8px rgba(197,248,79,.6)}
.runs span:last-child{color:var(--ink);font-variant-numeric:tabular-nums}
.runs .f span:last-child{color:var(--lime)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tagline{display:flex;justify-content:space-between;margin-top:10px;color:var(--dim)}

/* -------- tools strip (reel 6 s) */
.strip{padding-block:8px 40px}
.strip-l{color:var(--mute);font-size:13px;margin-bottom:16px}
/* home page video (AUG-237): our own cover card in front of Loom's player. 16:10 = the 16:9 picture plus Loom's control bar under it, so the player fills the
   frame with no black side bars; same size at every width, so it never causes a sideways scroll and the page does not jump when the player swaps in */
.wt{padding-block:8px 48px}
.wt-frame{max-width:960px;margin:0 auto;aspect-ratio:16/10;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--solid);position:relative}
.wt-frame iframe{display:block;width:100%;height:100%;border:0}
.wt-cover{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;color:var(--ink);text-align:left}
.wt-cover[hidden]{display:none}
.wt-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
.wt-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,9,.15) 30%,rgba(10,12,9,.88) 100%)}
.wt-title{position:absolute;z-index:1;left:clamp(18px,3.2vw,36px);right:clamp(18px,3.2vw,36px);bottom:clamp(16px,3vw,32px);font-weight:500;font-size:clamp(24px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.wt-play{position:absolute;z-index:1;left:50%;top:44%;width:clamp(60px,8vw,84px);aspect-ratio:1;margin:calc(clamp(60px,8vw,84px) / -2) 0 0 calc(clamp(60px,8vw,84px) / -2);border-radius:50%;background:var(--lime);box-shadow:0 10px 40px rgba(0,0,0,.5);transition:transform .25s var(--ease)}
.wt-play::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.62em 0 .62em 1em;border-color:transparent transparent transparent var(--lime-ink);font-size:clamp(14px,2vw,20px)}
.wt-cover:hover .wt-play{transform:scale(1.07)}
.wt-cover:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.wt-nojs{display:grid;place-items:center;height:100%;color:var(--ink)}
@media (max-width:880px){.wt{padding-block:0 36px}.wt-frame{border-radius:var(--r)}}
/* Real logos (decision 34): shown at their own colours at all times, never tinted; the lit tile carries the step. */

/* -------- overview bento (reel 12.9 s) */
.sec{padding-block:88px}
.sec h2{font-weight:500;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1.08}
.sec .sub{color:var(--mute);margin-top:10px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-template-areas:"a a b" "c d b" "e e e";gap:14px;margin-top:34px;align-items:stretch}
.cell{position:relative;padding:20px;border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;gap:12px;transition:border-color .25s,transform .35s var(--ease),box-shadow .35s}
.cell:hover{border-color:var(--line2);transform:translateY(-3px)}
.cell:active{transform:translateY(-1px) scale(.995)}
/* each tile leads with its outcome number, as the live site's case study rows do */
.out{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.out .v{font-weight:500;font-size:clamp(38px,3.8vw,52px);letter-spacing:-.045em;line-height:.95;font-variant-numeric:tabular-nums}
.out .v small{font-size:.42em;letter-spacing:0;vertical-align:.9em;margin-left:2px}
.out .c{color:var(--mute);font-size:13px;line-height:1.35;padding-bottom:3px}
.out .c b{color:var(--ink);font-weight:500}
@media (min-width:881px){.cell{gap:14px}
  .cell.c-a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"out chat" "h chat" "n n";grid-template-rows:auto 1fr auto;column-gap:22px;row-gap:14px}
  .cell.c-a .out{grid-area:out}.c-a h3{grid-area:h}.c-a .mini{grid-area:chat;align-self:start}.c-a .n{grid-area:n}}
.cell h3{font-weight:500;font-size:19px;letter-spacing:-.015em;line-height:1.28;max-width:30ch}
.cell .n{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--mute)}
.go{width:30px;height:30px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink);flex:none;transition:background-color .25s,color .25s,transform .35s var(--ease),border-color .25s}
.cell:hover .go{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);transform:translateY(2px)}
.c-a{grid-area:a}.c-b{grid-area:b}.c-c{grid-area:c}.c-d{grid-area:d}
.c-e{grid-area:e;min-height:0;flex-direction:row;align-items:center;gap:22px}
.c-e h3{max-width:none;flex:none}
.c-e-sub{color:var(--mute);font-size:14px;flex:1}
.c-b .mini{flex:1}
.mini{border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(0,0,0,.25);padding:10px 12px}
.mini.chat{position:relative;padding-bottom:24px}
.mrow{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.mrow span:last-child{color:var(--ink)}.mrow span:first-child{color:var(--mute)}
.mrow:last-child{border:0}
.chat{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.chat .b{padding:6px 10px;border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid var(--line);max-width:80%;align-self:flex-start}
.chat .b.me{align-self:flex-end;background:rgba(197,248,79,.12);border-color:rgba(197,248,79,.3)}
.ticks{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ticks > span{width:26px;height:26px;border-radius:var(--r-sm);border:1px solid var(--line2);background:rgba(255,255,255,.03);transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s,transform .35s var(--ease)}
.ticks > span{position:relative}.ticks > span.on{background:var(--lime);border-color:var(--lime)}.ticks > span.on::after{content:"";position:absolute;left:9px;top:5px;width:6px;height:11px;border:solid var(--lime-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ticks em{font-style:normal;color:var(--mute);margin-left:6px}

/* -------- what we have delivered (decisions 77, 78): one timeline, oldest engagement first. Wide (1025 px and up):
   every result on the trunk at once, branching above and below in turn, our mark at its root; a spotlight moves card to
   card every 4 s. 1024 and under: the depth carousel, one result in front, the trunk under it as dots. Without the
   script the list is a plain grid of cards; under reduced motion and ?still the wide layout is drawn whole, unlit. */
.tl{position:relative;z-index:2;padding-block:96px 112px}
.tl-h{font-weight:500;font-size:clamp(28px,3.4vw,46px);letter-spacing:-.035em;line-height:1.1;max-width:22ch}
.tl-sub{margin-top:14px;color:var(--mute);display:flex;align-items:center;gap:8px}
.tl-sub i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.tl-stage{position:relative;margin-top:40px}
.tl-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tl-mark{display:none;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--solid);border:1px solid var(--line2)}
.tl-mark svg{display:block}
.tc{display:block;height:100%;padding:16px 18px 17px;background:var(--glass-flat);border:1px solid var(--line);border-radius:var(--r);transition:border-color .35s,box-shadow .35s}
.tc:hover{border-color:var(--line2)}
.t-who{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:13.5px;color:var(--mute);letter-spacing:-.005em}
.t-tag{padding:0 7px;border:1px solid currentColor;border-radius:99px;font-size:11px}
.t-v{display:block;margin-top:6px;font-weight:600;font-size:30px;letter-spacing:-.04em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .35s}
.t-v.t-b{font-size:19px;letter-spacing:-.02em;line-height:1.2}
.t-c{display:block;margin-top:5px;font-size:13px;line-height:1.4;color:var(--mute)}
.tl-list li.lit .tc{border-color:var(--lime-line);box-shadow:0 0 0 1px rgba(197,248,79,.12),0 10px 40px rgba(197,248,79,.08)}
.tl-list li.lit .t-v{color:var(--lime)}
.tl-rail,.tl-ctl{display:none}
.tl svg.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.wires .trunk{stroke:var(--line2);stroke-width:2;fill:none;stroke-linecap:round}
.wires .fill{stroke:var(--lime);stroke-width:3;fill:none;stroke-linecap:round}
.wires .br{stroke:var(--line2);stroke-width:1.5;fill:none;transition:stroke .35s}
.wires .br.on{stroke:var(--lime)}
.wires .nd{fill:var(--bg);stroke:var(--line2);stroke-width:2;transition:fill .25s,stroke .25s}
.wires .nd.done{fill:var(--lime);stroke:var(--lime)}
.wires .nd.act{fill:var(--bg);stroke:var(--lime)}
.wires .ring{fill:none;stroke:var(--lime);stroke-width:1.5;opacity:0}
.wires .sig{fill:var(--lime)}
/* wide: the trunk (A) */
.js .tl.wide .tl-stage{padding-left:64px}
.js .tl.wide .tl-mark{display:grid;position:absolute;left:0;top:var(--ty,50%);margin-top:-22px;z-index:2}
.js .tl.wide .tl-list{position:relative;z-index:1;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:auto 72px auto;column-gap:14px;row-gap:0}
.js .tl.wide .tl-list li{grid-column:calc(var(--i) + 1)/span 2;min-width:0;transition:opacity .38s var(--ease),transform .38s var(--ease),filter .38s var(--ease)}
.js .tl.wide .tl-list li.up{grid-row:1;align-self:end}
.js .tl.wide .tl-list li.dn{grid-row:3;align-self:start}
.js .tl.wide .tc{height:auto;padding:14px 15px 15px}
.js .tl.wide .t-v{font-size:26px}
.js .tl.wide .t-v.t-b{font-size:17px}
.js .tl.wide .t-who{font-size:13px}
.tl.wide.arm .tl-list li:not(.in){opacity:0;transform:translateY(10px);filter:blur(6px)}
/* narrow: the depth carousel (B) */
.tl.deck{overflow-x:clip}
.tl.deck .tl-stage{height:var(--sh,260px);perspective:1100px;margin-top:28px;touch-action:pan-y}
.tl.deck .tl-list{display:block;position:absolute;inset:0;transform-style:preserve-3d}
.tl.deck .tl-list li{position:absolute;left:50%;top:0;width:var(--cw,320px);margin-left:calc(var(--cw,320px) / -2);transition:transform .56s cubic-bezier(.2,.85,.25,1),opacity .56s cubic-bezier(.2,.85,.25,1)}
.tl.deck .tc{min-height:var(--ch,170px);padding:22px 22px 22px;background:var(--solid)}
/* side cards are dimmed by a veil, not transparency, so a card never shows the text of the one behind it */
.tl.deck .tl-list li::after{content:"";position:absolute;inset:0;border-radius:var(--r);background:var(--bg);opacity:var(--dim,0);pointer-events:none;transition:opacity .56s cubic-bezier(.2,.85,.25,1)}
.tl.deck .t-who{font-size:14px}
.tl.deck .t-v{font-size:40px;margin-top:10px}
.tl.deck .t-v.t-b{font-size:24px}
.tl.deck .t-c{font-size:14px;margin-top:8px}
.tl.deck .tl-list li.cur .tc{border-color:var(--lime-line)}
.tl.deck .tl-list li.cur .t-v{color:var(--lime)}
.tl.deck .tl-rail{display:block;position:relative;height:40px;margin-top:18px}
.tl.deck .tl-ctl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:4px;color:var(--mute)}
.tl-ctl button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink)}
.tl-ctl button:hover{border-color:var(--lime-line)}
.tl-ctl .n{font-variant-numeric:tabular-nums;min-width:4ch;text-align:center}
.tl.deck.arm .tl-list li{opacity:0 !important}
@media (max-width:880px){.tl{padding-block:64px 72px}.tl-h{font-size:30px}}

/* -------- tools row (decision 79): scrolls itself, a seamless loop with fading edges; every few seconds a hop wave
   crosses it (reel 77). Pointer or focus on it holds it; reduced motion and ?still show a plain wrapped row */
.strip.mq{padding-block:8px 40px}
.mq-view{position:relative;overflow:hidden;padding-block:16px 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;column-gap:44px;will-change:transform}
.mq-track li{flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:64px;white-space:nowrap;font-size:12px;color:var(--dim);transition:color .3s}
.mq-track i{font-style:normal;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.025);display:grid;place-items:center;transition:background-color .3s,border-color .3s}
.mq-track img{display:block;width:22px;height:22px;object-fit:contain}
.mq-track img.w{width:34px;height:auto;max-height:22px} /* wide lockups (n8n, Metricool) get the tile's width so they read; the artwork is not cropped */
.mq-track li.on{color:var(--ink)}
.mq-track li.on i{background:rgba(197,248,79,.14);border-color:var(--lime-line)}
.mq-still .mq-view,.still .mq-view{-webkit-mask-image:none;mask-image:none}
.mq-still .mq-track,.still .mq-track,html:not(.js) .mq-track{width:auto;flex-wrap:wrap;justify-content:center;column-gap:32px;row-gap:16px;transform:none !important}
@media (max-width:880px){.mq-track{column-gap:32px}}

/* -------- scenes: full screen, each slides over the last (Q1: C + D) */
.scenes{position:relative;z-index:3}
.anchor{display:block;height:0;scroll-margin-top:0}
.scene{position:sticky;top:0;overflow:hidden;will-change:transform}
/* each scene is a see-through sheet: a hairline and a short dark band at its top edge mark it sliding in */
.sc{position:relative;min-height:100dvh;background:linear-gradient(rgba(6,8,5,.82),rgba(6,8,5,.38) 160px,rgba(6,8,5,.3));border-top:1px solid var(--line2);transform-origin:50% 30%;will-change:transform}
.veil{position:absolute;inset:0;background:#040503;opacity:0;pointer-events:none;z-index:5}
.in-w{position:relative;z-index:1;padding-block:calc(var(--nav) + 44px) 64px}
.scene h2{font-weight:500;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.032em;line-height:1.08;max-width:24ch;margin:14px 0 0}
.meta{color:var(--lime);font-size:14px;font-weight:500}
.sb{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:34px}
.sb.two{grid-template-columns:1fr 1fr}
/* the list card is shorter than the two cards beside it: it ends with its content, no empty band */
.sc-re .sb > .card{align-self:start}
/* decision 66: the Ji card is shorter than the fashion card's beside it; its screen takes the spare height and centres
   what it shows, instead of leaving an empty band above the card's bottom line */
[data-screen="ji"] > .screen{flex:1;display:flex;flex-direction:column;justify-content:center}
[data-screen="ji"] > .screen > .msg{margin:0 0 12px auto}
@media (max-width:1100px){.sc-hack .sb{grid-template-columns:1fr}}
.col{display:grid;gap:14px;align-content:start}
.card{padding:18px;border-radius:var(--r);display:flex;flex-direction:column;gap:12px;min-width:0}
.card .ct{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--mute)}
.card .ct span{min-width:0}
.big{font-weight:500;font-size:clamp(34px,3.8vw,52px);letter-spacing:-.04em;line-height:1.02}
.mid{font-weight:500;font-size:20px;letter-spacing:-.018em;line-height:1.28;max-width:32ch}
/* The fashion brand's result under its card heading (decision 74): the scene head carries Ji's figure, so this one sits in the card, lime like the scene figures */
.pt-out{row-gap:4px}
.pt-out .v{color:var(--lime);font-size:clamp(30px,2.8vw,40px)}
.pt-out .c{max-width:22ch}
.built{color:var(--mute);font-size:13.5px;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}
.built b{color:var(--ink);font-weight:500}
.built .dim{display:block;margin-top:6px}
.screen{position:relative;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(4,6,3,.45);padding:12px 12px 26px}
.sample{position:absolute;right:10px;bottom:7px;color:var(--dim);font-size:11px}

/* chat (Ji, fashion brand, phone agent) */
.msg{max-width:86%;padding:8px 11px;border-radius:var(--r);font-size:13px;margin:6px 0;line-height:1.4;width:fit-content}
.msg.in{background:rgba(255,255,255,.07);border:1px solid var(--line)}
.msg.out{margin-left:auto;background:rgba(197,248,79,.13);border:1px solid rgba(197,248,79,.3)}
.msg u{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
.wa{background:#0c110d}
.when{color:var(--mute);margin:10px 0 2px;font-size:12px}
.when.center{text-align:center;margin:12px 0 4px}
.typing{display:flex;gap:4px;padding:10px 12px;border-radius:var(--r);background:rgba(197,248,79,.1);width:fit-content;margin:6px 0 6px auto}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--lime);opacity:.4;animation:bounce 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{40%{opacity:1;transform:translateY(-3px)}}
.gone{display:none !important}
.vid{display:flex;gap:12px;align-items:center;padding:10px;border-radius:var(--r-sm);border:1px solid var(--lime-line);background:var(--lime-soft);font-size:13px}
.thumb{position:relative;width:72px;height:46px;border-radius:var(--r-sm);background:linear-gradient(135deg,#34461f,#121810);display:grid;place-items:center;flex:none;overflow:hidden}
.thumb::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.04) 10px 11px)}
.tri{width:0;height:0;border-left:11px solid var(--lime);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.len{position:absolute;right:4px;bottom:2px;font-size:9.5px;color:var(--ink)}

/* lead list */
.tbl{font-size:13px;font-variant-numeric:tabular-nums}
.tr{display:grid;grid-template-columns:1.35fr .7fr .9fr 1.05fr 1fr;gap:8px;padding:9px 8px;border-top:1px solid var(--line);align-items:center;transition:background-color .4s,box-shadow .4s,opacity .5s var(--ease),transform .5s var(--ease)}
.tr.th{border-top:0;color:var(--dim);font-size:10.5px;padding-bottom:7px}
.tr .r{text-align:right}
.tr .mono{font-size:12.5px}
.tr i.st{display:block;height:6px;width:var(--w);border-radius:2px;background:rgba(255,255,255,.12);margin-bottom:6px;padding:0}
.suit{font-style:normal;color:#e8a27c;font-size:11px;margin-left:6px}
.tr.on{background:rgba(197,248,79,.07);box-shadow:inset 2px 0 0 var(--lime)}
.tr.on .m{color:var(--lime)}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fig{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:rgba(0,0,0,.22);transition:border-color .4s,background-color .4s,opacity .5s var(--ease),transform .5s var(--ease)}
.fig .l{color:var(--mute);font-size:12px}
.fig .v{font-size:24px;line-height:1.2;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.fig .h{color:var(--dim);font-size:11.5px;margin-top:2px}
.fig.on{border-color:var(--lime-line);background:var(--lime-soft)}
.fig.on .v{color:var(--lime)}
.maths{color:var(--mute);font-size:11px;line-height:1.5}
.maths b{color:var(--lime);font-weight:500}
.comp{display:grid;grid-template-columns:1fr auto 92px;gap:12px;padding:7px 2px;border-top:1px solid var(--line);font-size:12px;align-items:center}
.comp .k{font-size:10.5px;color:var(--lime);text-align:right}
.comp.x{color:var(--dim)}.comp.x .k{color:#e8a27c}
.comp.x span:nth-child(2){text-decoration:line-through}
.offer{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px;padding:12px;border-radius:var(--r-sm);background:var(--lime-soft);border:1px solid var(--lime-line);flex-wrap:wrap}
.offer .v{font-size:26px;color:var(--lime);font-variant-numeric:tabular-nums}

/* our own tools: one window, six tabs (decision 88) */
.tools{margin-top:34px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tab{padding:9px 15px;border:1px solid var(--line2);border-radius:99px;color:var(--mute);font-size:14px;line-height:1.2;transition:color .2s,border-color .2s,background-color .2s}
.tab:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.tab[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.js .tpane:not(.on){display:none}
html:not(.js) .tabs{display:none}
.tpane + .tpane{margin-top:44px}
.js .tpane + .tpane{margin-top:0}
.twin{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:var(--solid);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.wbar{display:flex;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.wbar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.twin img{display:block;width:100%;height:auto}
.pan{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Pipeline Viewer picture: tap opens it full screen to zoom (decision 99) */
.zbtn{display:block;position:relative;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit}
.zbtn.zok{cursor:zoom-in}
.zbtn:focus-visible{outline-offset:-4px}
.zhint{display:none;position:absolute;left:10px;top:10px;padding:5px 11px;border-radius:99px;background:rgba(14,17,12,.88);border:1px solid var(--line2);font-size:12.5px;color:var(--mute);pointer-events:none}
.zok .zhint{display:block}
.zdlg{padding:0;border:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:#050605;color:var(--ink)}
.zdlg::backdrop{background:#000}
.zdlg:not([open]){display:none}   /* a browser without <dialog> draws an unknown element as a block: keep it out of the page */
.zdlg[open]{display:flex;flex-direction:column}
.zbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.zx{min-height:44px;padding:0 18px;border:1px solid var(--line2);border-radius:99px;background:none;color:var(--ink);font:inherit;font-size:14.5px;cursor:pointer}
.zbox{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.zbox img{display:block;width:max(1200px,400vw);max-width:none;height:auto}
@media (min-width:701px){.zbox img{width:max(100%,1600px)}}
html.zopen{overflow:hidden}
.tcap{margin-top:14px;max-width:70ch}
.tcap b{display:block;font-weight:500;color:var(--ink)}
.tcap span{color:var(--mute);font-size:14.5px}
/* the lineage: two saved reels and the part of this page they became */
.lin{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.lin-h{font-size:13px;color:var(--mute);margin-bottom:12px}
.lin-g{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.5fr);gap:16px;align-items:center}
.lin-c{display:grid;gap:10px}
.rcard{padding:12px 14px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--glass2);font-size:13.5px;line-height:1.4}
.rcard .mono{display:block;color:var(--lime);font-size:12px;margin-bottom:3px}
.rcard b{font-weight:400;color:var(--ink)}
.lin-a{color:var(--mute);font-size:22px}
.lin-p{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--solid)}
.lin-p img{display:block;width:100%;height:auto}
.lin-p figcaption{padding:7px 12px;color:var(--dim);font-size:12px;border-top:1px solid var(--line)}
.lin-s{margin-top:14px;color:var(--mute);font-size:14.5px;max-width:70ch}
/* the Telegram chat, drawn in Telegram's own dark look (sample) */
.tg{max-width:440px;margin:0 auto;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);background:#0e1621;font:400 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#f5f5f5;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.tg-h{display:flex;align-items:center;gap:10px;padding:9px 14px;background:#17212b;border-bottom:1px solid #0b121a}
.tg-s{margin-left:auto;color:#6d7f8f;font-size:11.5px}
.tg-back{color:#6ab3f3;font-size:28px;line-height:1;margin-right:2px}
.tg-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;color:#fff;background:linear-gradient(135deg,#7bc862,#2b9d6e)}
.tg-n b{display:block;font-weight:600;font-size:15px}
.tg-n small{color:#6d7f8f;font-size:12.5px}
.tg-b{display:flex;flex-direction:column;gap:4px;padding:12px 12px 14px;background:#0e1621}
.tg-day{align-self:center;margin:8px 0 4px;padding:2px 10px;border-radius:99px;background:rgba(23,33,43,.9);color:#8fa1b3;font-size:12.5px}
.tg-m{position:relative;max-width:86%;padding:6px 9px 18px;border-radius:12px;word-break:break-word}
.tg-m.in{align-self:flex-start;background:#182533;border-bottom-left-radius:4px}
.tg-m.out{align-self:flex-end;background:#2b5278;border-bottom-right-radius:4px}
.tg-t{position:absolute;right:8px;bottom:3px;font-size:11px;color:#6d8296;white-space:nowrap}
.tg-m.out .tg-t{color:#7da8d3}
.tg-lk{color:#6ab3f3}
.vn{display:flex;align-items:center;gap:9px;padding:9px 56px 20px 9px}
.tg-play{flex:none;width:34px;height:34px;border-radius:50%;background:#5eb5f7;position:relative}
.tg-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.tg-wave{display:flex;gap:2px;align-items:center;height:24px}
.tg-wave i{width:2.5px;border-radius:2px;background:#9fcdf2;height:35%}
.tg-wave i:nth-child(3n){height:85%}.tg-wave i:nth-child(4n){height:60%}.tg-wave i:nth-child(5n){height:20%}.tg-wave i:nth-child(7n){height:100%}
.tg-d{color:#9fcdf2;font-size:12.5px}
.med{padding:3px 3px 20px}
.med > :not(.tg-vid){margin-inline:7px}
.tg-vid{display:block;position:relative;margin-bottom:6px;aspect-ratio:16/9;border-radius:9px;background:linear-gradient(140deg,#1e2d3d,#0f1a26 60%,#17283a)}
.tg-vp{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(0,0,0,.45)}
.tg-vp::after{content:"";position:absolute;left:18px;top:14px;border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.tg-vd{position:absolute;left:8px;top:8px;padding:1px 7px;border-radius:99px;background:rgba(0,0,0,.5);font-size:12px}
.tg-i{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#17212b;border-top:1px solid #0b121a;color:#6d7f8f}
.tg-mic{width:12px;height:18px;border:2px solid #6d7f8f;border-radius:7px}
@media (max-width:880px){
  .lin-g{grid-template-columns:1fr}
  .lin-a{transform:rotate(90deg);justify-self:start;margin-left:20px}
  .pan img{width:760px;max-width:none}
  .pan{cursor:grab}
  .twin:has(.pan)::after{content:"Swipe sideways to see the whole screen";display:block;padding:7px 12px;font-size:12px;color:var(--dim);border-top:1px solid var(--line)}
}

.lx{margin-top:56px}
.lx-h{font-size:13px;color:var(--mute);margin-bottom:12px}
.lxw video{display:block;width:100%;height:auto;background:#e9eeed}
.lx-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.lx-s figure{border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden;background:var(--solid)}
.lx-s img{display:block;width:100%;height:auto}
.lx-s figcaption{padding:7px 12px;color:var(--mute);font-size:12.5px;border-top:1px solid var(--line)}
.lx-ph{display:none}
/* phones (decision 97, option A): one tab row that scrolls sideways with an edge fade, screens cropped for the phone, a 20px gutter */
@media (max-width:700px){
  .sc-tools .wrap{padding:0 20px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -20px 10px;padding:6px 20px 8px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fl,0) * 28px),#000 calc(100% - var(--fr,1) * 44px),transparent);
    mask-image:linear-gradient(90deg,transparent 0,#000 calc(var(--fl,0) * 28px),#000 calc(100% - var(--fr,1) * 44px),transparent)}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:none;scroll-snap-align:center;white-space:nowrap;min-height:44px;padding:0 16px;font-size:14.5px}
  .tpane .wbar,.twin:has(.pan)::after{display:none}
  .pan{overflow:visible;cursor:auto}
  .twin img,.pan img{width:100%;max-width:none;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:top left}
  .twin.zw img{aspect-ratio:2400/1361;object-fit:contain}
  .lx-s{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:18px -20px 0;padding:0 20px 6px;scroll-padding:0 20px;scrollbar-width:none}
  .lx-s::-webkit-scrollbar{display:none}
  .lx-s figure{flex:none;width:78%;scroll-snap-align:start}
  .lx-s .lx-ph{display:block}
  .lx-s img{aspect-ratio:4/5;object-fit:cover;object-position:top left}
}

/* hackathon */
.hack-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.rank{display:flex;flex-direction:column;align-items:flex-end;color:var(--mute)}
.rk{font-size:clamp(70px,8vw,112px);font-weight:500;letter-spacing:-.06em;line-height:.9;color:var(--lime)}
.rk sup{font-size:.32em;letter-spacing:0;vertical-align:.9em;margin-left:2px}
/* a unit after a figure ("~15 min", the investor's own words, 16 Oct) sits on the baseline, not raised like "3rd" */
.rk small.u{font-size:.32em;letter-spacing:0;margin-left:.18em}
.out .v small.u{vertical-align:baseline;margin-left:.2em}
.rank .rl{max-width:24ch;text-align:right;margin-top:8px;font-size:13px;text-wrap:balance}
.rank .who{display:block;color:var(--ink);white-space:nowrap}
.hub{position:relative;display:grid;grid-template-columns:1fr 64px 1.25fr;gap:14px;align-items:center;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(4,6,3,.45);padding:14px 14px 30px}
.doc{border:1px solid var(--line2);border-radius:var(--r-sm);background:#e9ecdf;color:#2b3022;padding:10px;display:grid;gap:6px}
.doc .mono{font-size:10px;color:#4b523f}
.doc i{display:block;height:5px;border-radius:2px;background:#c3c8b5}
/* the AI step between the report and the fields: a plain dot, not a letter in a box */
.core{justify-self:center;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.14);transition:background-color .4s}
.core.on{background:var(--lime)}
.fields{display:grid;gap:5px}
.fields div{display:flex;justify-content:space-between;gap:8px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.03);font-size:11px}
.fields span{color:var(--dim)}
.fields b{font-weight:500;color:var(--ink);text-align:right}
.hub .outs{grid-column:1 / -1;margin-top:6px}
.gantt{position:relative;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(4,6,3,.45);padding:12px 14px 30px;font-size:12px;color:var(--mute)}
.g-axis{display:grid;grid-template-columns:repeat(5,1fr);margin-left:118px;color:var(--dim);font-size:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.g-row{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;padding:8px 0}
.g-track{position:relative;height:12px;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--line) calc(20% - 1px) 20%)}
.g-track i{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);border-radius:2px;background:var(--lime);transform-origin:left;transition:transform .9s var(--ease) .1s}
.g-gap{position:absolute;left:calc(14px + 118px + (100% - 146px) * var(--x) / 100%);width:calc((100% - 146px) * var(--w) / 100%);top:42px;bottom:22px;border:1.5px dashed #e8a27c;border-radius:var(--r-sm);background:rgba(232,162,124,.06);display:flex;align-items:flex-start;justify-content:center;padding-top:5px}
.g-gap span{white-space:nowrap;color:#e8a27c;font-size:11.5px;background:var(--bg);padding:1px 6px;border-radius:99px}

/* AI agency */
.agency h2{max-width:26ch}
/* a short sheet: its content sits in the middle of the screen instead of leaving the bottom third empty */
.sc-agency .in-w{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.hub-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pillars{position:relative;margin-top:44px}
.f-hub{--gap:clamp(40px,9vw,140px);row-gap:28px;grid-template-columns:1fr auto 1fr}
.f-hub .fn{font-size:15px;font-weight:500;padding:13px 16px;color:var(--ink)}
.f-hub .fn[data-k="p1"],.f-hub .fn[data-k="p2"]{justify-self:end}
.f-hub .fn[data-k="p3"],.f-hub .fn[data-k="p4"]{justify-self:start}
.f-hub .core-n{justify-self:center;width:16px;height:16px;padding:0;border-radius:50%;background:var(--lime);border-color:var(--lime)}
.f-hub .fn[data-k="p5"]{justify-self:center}

/* also made (reel 13 to 14 s numbers) */
.more-s{position:relative;z-index:3;border-top:1px solid var(--line);background:linear-gradient(rgba(6,8,5,.7),rgba(6,8,5,.2) 240px)}
.more{position:relative}
#businesses,#more,#book{scroll-margin-top:var(--nav)}
/* the row sits on its own dark sheet, so the bright ribbon passing behind never runs through its labels */
.nums{display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:0;margin-top:40px;padding:0 26px;background:rgba(10,12,9,.88);border:1px solid var(--line);border-radius:var(--r)}
.num{padding:26px 28px 26px 0;display:flex;flex-direction:column;gap:12px}
.num + .num{padding-left:28px;border-left:1px solid var(--line)}
.num .lbl{color:var(--mute);font-size:13px}
.nv{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.nv > .mono:not(.wip){font-size:clamp(46px,5vw,68px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.nv small{color:var(--mute);font-size:12.5px;max-width:18ch;line-height:1.35}
.num h3{font-weight:500;font-size:16.5px;letter-spacing:-.012em;line-height:1.35;max-width:36ch}
.decay{display:flex;gap:5px;align-items:flex-end;height:46px}
.decay i{flex:1;max-width:22px;height:var(--h);border-radius:2px;background:var(--lime);transform-origin:bottom;transition:transform .7s var(--ease)}
.decay i:nth-child(n+7){background:rgba(197,248,79,.4)}
.flow-line{display:flex;align-items:center;gap:10px;color:var(--mute);height:46px;font-size:13px}
.flow-line i{flex:1;height:2px;background:linear-gradient(90deg,var(--lime) 0 40%,rgba(255,255,255,.12) 40%);background-size:200% 100%;border-radius:2px}
@media (prefers-reduced-motion:no-preference){.flow-line i{animation:flowx 2.4s linear infinite}}
@keyframes flowx{from{background-position:100% 0}to{background-position:-100% 0}}
.wip{font-size:15px;color:var(--mute)}
.num-wip h3{color:var(--mute)}

/* close (reel 17.2 s): only the booking card, centred; the brand block lives in the footer */
.close{position:relative;z-index:4;padding-block:88px 34px;border-top:1px solid var(--line);background:linear-gradient(rgba(6,8,5,0) 0,rgba(6,8,5,.55) 260px,rgba(6,8,5,.9))}
.close .wrap{position:relative}
/* the booking card is lime again (Mukund 16 Oct, decision 71), with the dark button on it */
.book{max-width:760px;margin:0 auto;padding:48px 40px;text-align:center;border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;background:var(--lime);color:var(--lime-ink)}
.book :focus-visible{outline-color:var(--lime-ink)}
.btn-ink{background:var(--lime-ink);color:var(--lime)}.btn-ink:hover{background:#26301a}
.book h2{font-weight:500;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.032em;line-height:1.1;margin:0 0 14px}
.book h2 em.s{font-size:1.06em;display:inline-block;padding-bottom:.08em}
.book p{color:rgba(16,20,10,.78);max-width:50ch;font-size:16px}
.book .btn{margin-top:26px}
.book .book-len{font-size:13px;margin-top:10px;color:rgba(16,20,10,.72)}
.foot{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:24px;padding-top:30px;margin-top:72px;border-top:1px solid var(--line)}
.f-brand p{color:var(--mute);margin-top:12px;max-width:34ch}
.f-col{display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.f-col p{color:var(--mute);font-weight:500;margin-bottom:4px}
.f-col a{color:var(--mute);width:fit-content}.f-col a:hover{color:var(--ink)}
.f-base{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding-top:22px;margin-top:8px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mute)}
.f-legal{flex:1;min-width:24ch}

/* -------- motion states. Markup holds the final state; site.js resets and replays it. */
[data-step],.tr,.fig{transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s,background-color .4s,box-shadow .4s,border-color .4s}
.pre{opacity:0 !important;transform:translateY(8px)}
.pre.g-row i,.pre .g-track i{transform:scaleX(0)}
.decay.pre{opacity:1 !important;transform:none}.decay.pre i{transform:scaleY(0)}
.decay i:nth-child(2){transition-delay:.05s}.decay i:nth-child(3){transition-delay:.1s}.decay i:nth-child(4){transition-delay:.15s}.decay i:nth-child(5){transition-delay:.2s}.decay i:nth-child(6){transition-delay:.25s}.decay i:nth-child(7){transition-delay:.3s}.decay i:nth-child(8){transition-delay:.35s}.decay i:nth-child(9){transition-delay:.4s}
.js .blur-in{transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease)}
.js .blur-in:not(.in){opacity:0;filter:blur(8px);transform:translateY(16px)}
/* Reel f389-395: heading blur clears in six intervals; allow nine for the full entrance. */
.js .scene .blur-in{transition-duration:.3s;transition-timing-function:var(--ease)}

/* -------- tablet */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"copy" "outs" "run";gap:36px;min-height:0;padding-block:40px 40px}
  .outs{align-self:start}
  .hero h1{max-width:16ch}
  .run{max-width:640px}
}

/* -------- phone (decision 69): the desktop's look, restacked. Glass without blur (see-through cards, the ribbon
   glowing behind them, not solid blocks), the hero's run panel built like the desktop slab, the door that grows,
   covered scenes that dim and shrink, cards that arrive from a blur. Kept calmer only where a phone pays for it:
   no backdrop blur, no pointer effects, no 3D tilt, fewer ribbon strands at 30 frames a second. */
@media (max-width:880px){
  :root{--nav:56px}
  html{scroll-padding-top:calc(var(--nav) + 58px)} /* the jump chips sit under the bar */
  .wrap{padding:0 16px}
  .jump-nav{display:none}
  .nav .motion-i{margin-left:auto}
  .nav .btn{margin-left:0}
  .chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 16px;height:0;opacity:0;visibility:hidden;transition:height .3s var(--ease),opacity .3s,padding .3s,visibility 0s .3s;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .chips::-webkit-scrollbar{display:none}
  .nav.past .chips{height:44px;opacity:1;visibility:visible;transition-delay:0s;padding-block:0 8px;border-top:0}
  .chips a{flex:none;font-size:12.5px;color:var(--mute);border:1px solid var(--line2);border-radius:99px;padding:6px 12px;height:32px;display:inline-flex;align-items:center;transition:background-color .2s,border-color .2s,color .2s}
  .chips a.on{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
  .panel,.hero .panel{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-phone)}
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,12,9,.96)}
  #sky-rib{opacity:.42;right:-50%;width:150%}
  .run{transform:none}
  .run.rise{animation-name:rise}
  .hero{padding-block:30px 34px}
  .hero h1{font-size:clamp(34px,9.6vw,44px)}
  .lede{font-size:15.5px}
  /* the ribbon's upper limb crosses the hero text on a phone: a soft dark halo keeps every letter on dark (decision 69) */
  .hero h1,.lede{text-shadow:0 0 12px rgba(10,12,9,.9),0 0 3px rgba(10,12,9,.7)}
  .cta .btn{flex:1}
  .run .hd{gap:10px}.run .hd > span:first-child{white-space:nowrap}
  .sec{padding-block:64px}
  .bento{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d" "e"}
  .cell{min-height:0}
  .c-e{flex-direction:column;align-items:flex-start;gap:12px}
  .sc{will-change:auto;box-shadow:0 -24px 48px rgba(0,0,0,.55)}
  .in-w{padding-block:calc(var(--nav) + 60px) 44px}
  .scene h2{font-size:clamp(27px,7.4vw,34px)}
  .sb,.sb.two,.foot{grid-template-columns:1fr}
  .card{padding:15px}
  .big{font-size:clamp(32px,9vw,40px)}
  .mid{font-size:18px}
  .tr{grid-template-columns:1.4fr .9fr 1fr}
  .tr .hide{display:none}
  .hack-head{grid-template-columns:1fr;gap:12px}
  .rank{align-items:flex-start;flex-direction:row;align-items:baseline;gap:10px}
  .rank .rl{text-align:left;margin-top:0}
  /* the band above the outcomes is where the ribbon's head turns on a phone (sky.js, phone comet) */
  .outs{grid-template-columns:1fr 1fr;padding:0 14px;margin-top:24px;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--glass-phone)}
  .outs a,.outs a + a{padding:14px 12px 12px 0;border-left:0}
  .outs a:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}
  .outs a:nth-child(n+3){border-top:1px solid var(--line)}
  .outs .v{font-size:32px}
  .out .v{font-size:44px}
  .rk{font-size:64px}
  .hub{grid-template-columns:1fr 24px;gap:10px}
  .hub .fields{grid-column:1 / -1}
  .g-axis{margin-left:92px}
  .g-row{grid-template-columns:84px 1fr}
  .g-gap{left:calc(14px + 92px + (100% - 120px) * var(--x) / 100%);width:calc((100% - 120px) * var(--w) / 100%)}
  .pillars{margin-top:30px}
  /* phone: the hub turned on its side. The core dot sits at the top of a lime spine, each of the five things is a
     step off it, and a signal runs down the spine, as the desktop hub sends one out to each (decision 69) */
  .f-hub{display:none}
  .pillars::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px rgba(197,248,79,.45)}
  .hub-list{position:relative;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:grid;gap:10px;padding:30px 0 0 34px}
  .hub-list::before{content:"";position:absolute;left:7px;top:16px;bottom:22px;width:2px;border-radius:1px;background:linear-gradient(rgba(197,248,79,.75),rgba(197,248,79,.22))}
  .hub-list::after{content:"";position:absolute;left:4px;top:16px;bottom:18px;width:8px;background:radial-gradient(circle,#f0ffd0 0 2.5px,rgba(197,248,79,.35) 3.5px,transparent 4.5px) 0 0/8px 8px no-repeat}
  .hub-list li{position:relative;padding:13px 16px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg2);font-size:15px;font-weight:500;box-shadow:inset 0 1px 0 rgba(242,244,238,.08),0 14px 18px -10px rgba(0,0,0,.7)}
  .hub-list li::before{content:"";position:absolute;left:-26px;top:50%;width:25px;height:2px;margin-top:-1px;background:rgba(197,248,79,.4)}
  .nums{grid-template-columns:1fr;padding:0 18px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .num,.num + .num{padding:24px 0;border-left:0;border-top:1px solid var(--line)}
  .num:first-child{border-top:0}
  .close{padding-block:64px 30px}
  .book{padding:32px 20px}
  .foot{margin-top:48px}
  #businesses,#more,#book{scroll-margin-top:calc(var(--nav) + 44px)}
}
@media (max-width:880px) and (prefers-reduced-motion:no-preference){
  .hub-list::after{animation:spine 3.2s cubic-bezier(.45,0,.55,1) infinite}
}
@keyframes spine{from{background-position:0 0}to{background-position:0 100%}}

/* -------- reduced motion: everything in its final state, nothing moves */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .blur-in:not(.in){opacity:1;filter:none;transform:none}
  .scene{position:relative;top:auto !important}
}
/* ?still is the same as reduced motion */
html.still{scroll-behavior:auto}
.still *,.still *::before,.still *::after{animation:none !important;transition:none !important}
.still .js .blur-in:not(.in),.still.js .blur-in:not(.in){opacity:1;filter:none;transform:none}
/* the scenes only stack as sticky sheets while the script cuts each covered one off; still, they are plain sections */
.still .scene{position:relative;top:auto !important}
/* lite (decision 70): this machine showed under 40 frames a second (sky.js), so no glass blur anywhere */
.lite *,.lite *::before,.lite *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lite .nav{background:rgba(10,12,9,.9)}.lite .outs,.lite .hero .panel{background:var(--glass-flat)}
@media (prefers-reduced-transparency:reduce){.panel,.nav,.outs,.nums{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--solid)}}

/* Hero depth: only leaf surfaces own glass/filter/opacity. The stage and flow stay unflattened. */
.run-stage{grid-area:run;min-width:0;position:relative}
#hero-run .glass,#hero-run .slab-edge,#hero-run .run-tools,#hero-run .run-zoom{display:none}
@media (min-width:881px){
  .run-stage{perspective:1800px;perspective-origin:50% 50%;transform-style:preserve-3d}
  #hero-run{position:relative;transform-style:preserve-3d;overflow:visible;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:none;border:0;box-shadow:none;padding:22px 54px 20px 30px;max-width:none;
    transform:translate3d(var(--gx,0px),var(--gy,0px),0) rotateY(calc(-13deg + var(--tx,0deg))) rotateX(calc(6deg + var(--ty,0deg))) rotateZ(-1deg);transform-origin:30% 50%}
  #hero-run.rise{animation:hero-slab .9s var(--ease) backwards;animation-delay:calc(var(--d) * 110ms + 80ms)}
  #hero-run .glass,#hero-run .slab-edge{display:block;position:absolute;inset:0;border-radius:var(--r);pointer-events:none}
  #hero-run .glass{transform:translateZ(0);border:1px solid var(--line2);border-top-color:rgba(242,244,238,.26);border-left-color:rgba(242,244,238,.32);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    background:radial-gradient(ellipse at 3% 42%,rgba(197,248,79,.13),transparent 52%),radial-gradient(ellipse at 95% 0%,rgba(197,248,79,.09),transparent 48%),radial-gradient(ellipse at 58% 57%,rgba(10,12,9,.8),transparent 80%),rgba(20,25,17,.5);
    box-shadow:inset 0 1px 0 rgba(242,244,238,.12),0 35px 65px rgba(0,0,0,.38)}
  #hero-run .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(112deg,rgba(242,244,238,.075),transparent 38%,rgba(197,248,79,.025) 72%,transparent);transform:translate(calc(var(--tx,0deg) / 1deg * 3px),calc(var(--ty,0deg) / 1deg * 3px))}
  #hero-run .slab-edge{transform:translate3d(-5px,3px,-12px);background:linear-gradient(90deg,rgba(149,157,141,.5),rgba(149,157,141,.15) 6px,transparent 12px);border:1px solid rgba(242,244,238,.2);box-shadow:-3px 2px 12px rgba(197,248,79,.08)}
  #hero-run .hd,#hero-run .runs,#hero-run .tagline{transform:translateZ(6px)}
  #hero-run .hd>span:nth-child(2){border-left:1px solid var(--line2);padding-left:16px}
  #hero-run .f-hero{container-type:normal;transform-style:preserve-3d;margin:26px 4px 18px -66px;min-height:228px;grid-template-columns:132px 144px 100px 116px;grid-template-rows:1fr 1fr;column-gap:38px;row-gap:38px;padding:34px 0 8px;will-change:transform}
  #hero-run .fn{--z:40px;--shadow:0 22px 24px -8px rgba(0,0,0,.75);width:100%;max-width:none;padding:14px 12px;border-radius:10px;background:var(--bg2);color:var(--ink);font-size:13px;font-weight:500;border-color:var(--line);box-shadow:inset 0 1px 0 rgba(242,244,238,.1),var(--shadow);transform:translateZ(var(--z));opacity:1}
  #hero-run .fn small{font-weight:400;color:var(--mute);margin-top:6px;font-size:10px}
  #hero-run .fn[data-k="roll"]{--z:64px;--shadow:8px 34px 32px -9px rgba(0,0,0,.8)}
  #hero-run .fn.lit:not(.end){background:var(--bg2);border-color:var(--line2)}
  #hero-run .fn.hit{box-shadow:inset 0 1px 0 rgba(242,244,238,.16),var(--shadow),0 0 22px rgba(197,248,79,.18)}
  #hero-run .fn.end.lit{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
  #hero-run .fn.end.lit small{color:rgba(16,20,10,.66)}
  #hero-run .fn::before,#hero-run .fn::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--mute);border:1px solid var(--bg);box-shadow:0 0 0 2px var(--bg2)}
  #hero-run .fn::before{left:-3px}#hero-run .fn::after{right:-3px}
  #hero-run .fn.hit::before{background:var(--lime);box-shadow:0 0 9px 3px var(--lime-soft)}
  #hero-run .fw{transform:translateZ(14px)}
  #hero-run .fw .w{stroke:rgba(197,248,79,.32);stroke-width:1.2}
  #hero-run .fw .wl{stroke:rgba(197,248,79,.2);filter:none}
  #hero-run .fw .tail{stroke:var(--lime);stroke-width:2;fill:none;stroke-linecap:round}
  #hero-run .ft{transform:translate3d(-50%,-50%,26px);border-radius:4px;padding:2px 5px;color:var(--mute)}
  #hero-run .sig{width:4px;height:4px;left:-2px;top:-2px;box-shadow:0 0 7px 1px rgba(197,248,79,.65)}
  #hero-run .run-tools{display:grid;gap:7px;position:absolute;left:64px;top:0;transform:translateZ(6px);color:var(--mute)}
  #hero-run .run-tools span{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line);border-radius:6px;background:rgba(242,244,238,.035);font-size:16px}
  #hero-run .run-zoom{display:block;position:absolute;right:0;top:-14px;transform:translateZ(6px);border:1px solid var(--line);border-radius:6px;padding:5px 8px;color:var(--mute);background:rgba(242,244,238,.035)}
  #hero-run .runs{padding-top:14px}#hero-run .runs li{padding:6px 0}
  #hero-run .tagline{margin-top:16px}
  .js #hero-run .fn{animation:hero-node .75s var(--ease) backwards;animation-delay:.48s}
  .js #hero-run .fn[data-k="price"]{animation-delay:.54s}.js #hero-run .fn[data-k="skip"]{animation-delay:.6s}.js #hero-run .fn[data-k="pay"]{animation-delay:.66s}.js #hero-run .fn[data-k="list"]{animation-delay:.72s}
  .js #hero-run .fw .w{animation:hero-wire .65s var(--ease) 1.35s backwards}
  /* wires and branch tags wait for the steps: a tag must never float in before the steps it sits between */
  .js #hero-run :is(.fw,.ft){animation:hero-fade .45s var(--ease) 1.25s backwards}
}
@media (min-width:1025px){.run-stage{width:calc(100% + 84px)}}
@media (min-width:881px) and (max-width:1120px){
  #hero-run .f-hero{grid-template-columns:1.1fr 1.2fr .85fr 1fr;column-gap:30px}
}
@keyframes hero-slab{from{transform:translate3d(0,16px,-12px) rotateY(-18deg) rotateX(8deg) rotateZ(-1deg)}}
@keyframes hero-node{from{opacity:0;transform:translateZ(120px)}to{opacity:1;transform:translateZ(var(--z))}}
@keyframes hero-fade{from{opacity:0}}
@keyframes hero-wire{from{stroke-dasharray:0 1000}to{stroke-dasharray:1000 1000}}
/* Still modes (paused, ?still, reduced motion) freeze the hero at its resting 3D pose: nothing moves, but the
   panel keeps its depth, so pausing never makes the page jump flat. The global .still and .paused rules stop its
   animations; only the signal is hidden here. */
.paused #hero-run .sig,.paused #hero-run .tail{visibility:hidden}
/* Pause stops the whole page at once (decision 64): no entry, step or flow transition plays out after the click. */
.paused *,.paused *::before,.paused *::after{animation:none!important;transition:none!important}
/* decision 67: and a paused visitor's menu and chip jumps land at once instead of gliding */
html.paused{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){#hero-run,#hero-run *,#hero-run *::before,#hero-run *::after{animation:none!important}}
@media (prefers-reduced-transparency:reduce){#hero-run .glass{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}}

@media (max-width:880px){#hero-run .tail{display:none}}
/* Phone hero panel (decision 69): the desktop slab, laid flat and restacked. Same glass (lit from the top left, a
   pale edge, a second edge offset behind it for the slab's thickness), the same raised step cards with their ports
   and shadows. The main run goes straight down the left column; the "paid up" branch steps off to the right. */
@media (max-width:880px){
  #hero-run{padding:16px 16px 14px;border-color:var(--line2);border-top-color:rgba(242,244,238,.24);border-left-color:rgba(242,244,238,.28);
    background:radial-gradient(ellipse at 3% 40%,rgba(197,248,79,.11),transparent 55%),radial-gradient(ellipse at 96% 0%,rgba(197,248,79,.08),transparent 50%),var(--glass-phone);
    box-shadow:inset 0 1px 0 rgba(242,244,238,.12),-5px 4px 0 -1px rgba(149,157,141,.2),0 30px 60px rgba(0,0,0,.45)}
  #hero-run .f-hero{container-type:normal;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-auto-rows:auto;column-gap:30px;row-gap:24px;margin:20px 0 16px;min-height:0}
  #hero-run .fn{grid-column:1;justify-self:stretch;width:auto;max-width:none;padding:11px 12px;border-radius:10px;background:var(--bg2);color:var(--ink);font-size:13px;font-weight:500;border-color:var(--line);
    box-shadow:inset 0 1px 0 rgba(242,244,238,.1),0 16px 18px -8px rgba(0,0,0,.75)}
  #hero-run .fn small{font-weight:400;color:var(--mute);margin-top:5px;font-size:10px}
  #hero-run .fn[data-k="roll"]{grid-row:1}#hero-run .fn[data-k="price"]{grid-row:2}#hero-run .fn[data-k="pay"]{grid-row:3}#hero-run .fn[data-k="list"]{grid-row:4}
  #hero-run .fn[data-k="skip"]{grid-column:2;grid-row:2}
  #hero-run .fn.lit:not(.end){background:var(--bg2);border-color:var(--line2)}
  #hero-run .fn.hit{border-color:var(--line2);box-shadow:inset 0 1px 0 rgba(242,244,238,.16),0 16px 18px -8px rgba(0,0,0,.75),0 0 20px rgba(197,248,79,.18)}
  #hero-run .fn.end.lit{background:var(--lime);color:var(--lime-ink);border-color:var(--lime)}
  #hero-run .fn::before,#hero-run .fn::after{content:"";position:absolute;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--mute);border:1px solid var(--bg);box-shadow:0 0 0 2px var(--bg2)}
  #hero-run .fn::before{top:-3px}#hero-run .fn::after{bottom:-3px}
  #hero-run .fn[data-k="skip"]::before{left:-3px;top:50%;margin:-2.5px 0 0}#hero-run .fn[data-k="skip"]::after{display:none}
  #hero-run .fn[data-k="roll"]::before,#hero-run .fn[data-k="list"]::after{display:none}
  #hero-run .fn.hit::before{background:var(--lime);box-shadow:0 0 9px 3px var(--lime-soft)}
  #hero-run .fw .w{stroke:rgba(197,248,79,.32);stroke-width:1.2}
  #hero-run .ft{border-radius:4px;padding:1px 5px;color:var(--mute);font-size:9.5px}
}