/* 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}
.apps{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;position:relative}
.apps li{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12px;color:var(--dim);transition:color .3s}
.apps i{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;font:500 11.5px "Geist Mono",monospace;font-style:normal;color:var(--mute);transition:background-color .35s,border-color .35s,color .35s,box-shadow .35s,transform .35s var(--ease)}
/* Real logos (decision 34): shown at their own colours at all times, never tinted; the lit tile carries the step. */
.apps i img,.apps i svg{width:22px;height:22px;object-fit:contain;display:block}
.apps li.on{color:var(--ink)}
.apps li.on i{background:rgba(197,248,79,.14);border-color:var(--lime-line);color:var(--lime);transform:translateY(-3px)}

/* -------- 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}

/* -------- the door (reel 9.5 to 10.4 s): the card that grows with the scroll and says what we believe, back in lime
   with AugmentLoop's mark where the "A" was (Mukund 16 Oct, decision 71). It starts larger than the reel's square and
   overlaps the overview's end (no pointer hits), so the page does not open a screen of nothing before it.
   Its size and the stage's padding are on :root, because the client list below docks under it with them. */
:root{--door-h:min(64vh,560px);--door-pt:calc(var(--nav) + 16px);--door-pb:32px}
.door{position:relative;height:150vh;z-index:2;margin-top:-22vh;pointer-events:none}
.door-stick{position:sticky;top:0;height:100dvh;display:grid;place-items:center;padding:var(--door-pt) 32px var(--door-pb)}
.door-card{--p:1;position:relative;width:min(1200px,100%);height:var(--door-h);background:var(--lime);color:var(--lime-ink);border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
  background-image:radial-gradient(rgba(16,20,10,.16) 1px,transparent 1px);background-size:22px 22px;
  clip-path:inset(calc((1 - var(--p)) * 30%) calc((1 - var(--p)) * 36%) round calc(22px + (1 - var(--p)) * 40px))}
.door-line{text-align:center;font-weight:500;font-size:clamp(28px,4vw,54px);letter-spacing:-.035em;line-height:1.1;padding:0 10%;max-width:22ch;box-sizing:content-box}
.door-line .wd{display:inline-block;opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 10px));filter:blur(calc((1 - var(--o,1)) * 4px))}
.door-mark{flex:none;width:64px;height:64px;margin-top:clamp(28px,6vh,56px);border-radius:var(--r);background:var(--lime-ink);display:grid;place-items:center;box-shadow:0 12px 30px rgba(16,20,10,.3)}
.door-mark svg{display:block}

/* -------- at a glance: a lime card under the door listing every client and the result we got them, so a visitor sees
   what we have delivered without scrolling the whole page; each one jumps to its section. Name, then the figure, then
   what it counts. The two hackathon entries say so. It docks 12 px under the door card: pulled up by the space
   between the card and the stage's bottom, so it meets the card just as the door stops holding it, and then the two
   scroll on together (the margin is the door stage's own geometry, from :root). */
.glance{position:relative;z-index:2;margin-top:calc(12px - var(--door-pb) - (100dvh - var(--door-pt) - var(--door-pb) - var(--door-h)) / 2)}
.gl-card{width:min(1200px,calc(100% - 64px));margin:0 auto;padding:48px 48px 56px;background:var(--lime);color:var(--lime-ink);border-radius:var(--r-lg);
  background-image:radial-gradient(rgba(16,20,10,.16) 1px,transparent 1px);background-size:22px 22px}
.gl-h{font-weight:500;font-size:clamp(26px,2.8vw,36px);letter-spacing:-.03em;line-height:1.1;text-align:center}
.gl-list{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border-top:1px solid rgba(16,20,10,.2);overflow:hidden}
/* each entry draws its own left line, 1 px outside its cell, and the list clips the first column's: the lines do not
   depend on an entry's position, so adding or dropping an entry never needs the rules changed */
.gl-list li{border-bottom:1px solid rgba(16,20,10,.2);border-left:1px solid rgba(16,20,10,.2);margin-left:-1px}
.gl-list a{display:flex;flex-direction:column;gap:4px;height:100%;padding:22px 24px 24px;border-radius:var(--r-sm);transition:background-color .2s}
.gl-list a:hover{background:rgba(16,20,10,.06)}
.gl-list a:hover .gl-who{text-decoration:underline;text-underline-offset:3px}
.gl-card :focus-visible{outline-color:var(--lime-ink);outline-offset:-2px}
.gl-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.gl-tag{padding:1px 8px;border:1px solid rgba(16,20,10,.45);border-radius:99px;font-size:11.5px;font-weight:500}
.gl-v{font-size:clamp(30px,3vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.05;margin-top:6px;font-variant-numeric:tabular-nums}
/* an entry whose result is the build itself (no figure yet) names it in a smaller headline */
.gl-v.gl-b{font-size:clamp(22px,2vw,26px);letter-spacing:-.025em;line-height:1.15}
/* between the phone column and 1100 px, two columns: three left the names and the hackathon tags wrapping (frontend review) */
@media (min-width:881px) and (max-width:1100px){.gl-list{grid-template-columns:repeat(2,1fr)}}
.gl-c{font-size:14px;color:rgba(16,20,10,.78);line-height:1.4;max-width:34ch}

/* -------- 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 PinkTree'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}
/* PinkTree'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, PinkTree, 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 tools dashboard (reel 12.9 s) */
.dash{display:grid;grid-template-columns:1.15fr 1fr;grid-template-areas:"plan phone" "reels reels";gap:14px;margin-top:34px}
.d-plan{grid-area:plan}.d-plan .plan{flex:1}.d-phone{grid-area:phone}.d-reels{grid-area:reels}
.plan{position:relative;display:grid;grid-template-columns:1fr 120px;gap:16px;align-items:center;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(4,6,3,.45);padding:10px 14px 26px}
.tasks li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px;transition:color .3s}
.tasks li:last-child{border:0}
.tasks em{margin-left:auto;font-style:normal;color:var(--dim)}
.box{width:16px;height:16px;border-radius:5px;border:1px solid var(--line2);flex:none;position:relative;transition:background-color .3s,border-color .3s}
.tasks li.done{color:var(--dim)}
.tasks li.done .box{background:var(--lime);border-color:var(--lime)}
.tasks li.done .box::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--lime-ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.ring{position:relative;width:110px;height:110px;justify-self:center}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:rgba(255,255,255,.08);stroke-width:7}
.ring .arc{stroke:var(--lime);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p));transition:stroke-dashoffset .7s var(--ease)}
.ring span{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:11.5px;color:var(--mute);line-height:1.25}
.ring b{font-size:24px;color:var(--ink);font-weight:500}
.voice{display:flex;align-items:center;gap:10px}
.pl{width:0;height:0;border-left:8px solid var(--lime);border-top:5px solid transparent;border-bottom:5px solid transparent}
.wave{display:flex;gap:2px;align-items:center;height:18px}
.wave i{width:2.5px;border-radius:2px;background:var(--lime);height:40%}
.wave i:nth-child(3n){height:90%}.wave i:nth-child(4n){height:65%}.wave i:nth-child(5n){height:25%}
.lib{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:14px;border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(4,6,3,.45);padding:14px 14px 28px;min-height:190px}
.islands{position:relative;min-height:160px;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:14px 14px;border-radius:var(--r-sm)}
.isl{position:absolute;display:flex;flex-wrap:wrap;gap:5px;width:84px;transition:transform .6s var(--ease)}
.isl i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.isl em{flex-basis:100%;font-style:normal;color:var(--mute);font-size:11px;margin-top:3px}
.isl.on{transform:scale(1.15)}
.isl.on i{background:var(--lime)}
.isl.on em{color:var(--lime)}
.i1{left:6%;top:12%}.i2{left:44%;top:30%}.i3{left:10%;top:62%}.i4{left:70%;top:6%;width:60px}
.zoom{display:grid;gap:8px;align-content:center}
.rc{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--glass2);font-size:13px}
.rc b{font-weight:500}
.rc span{color:var(--lime);flex:none}

/* 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", Anterric'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}
  .dash{grid-template-columns:1fr 1fr}
}

/* -------- 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}
  .apps{grid-template-columns:repeat(4,1fr);row-gap:18px}
  .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}
  /* the door grows with the scroll and types its sentence, as on desktop, over a shorter run */
  .door{height:130vh;margin-top:0}
  .door-stick{padding:var(--door-pt) 16px var(--door-pb)}
  .door-line{font-size:30px;padding:0 8%}
  :root{--door-h:min(58vh,440px);--door-pt:calc(var(--nav) + 16px);--door-pb:24px}
  .gl-card{width:calc(100% - 32px);padding:32px 16px 20px}
  .gl-h{font-size:26px}
  .gl-list{grid-template-columns:1fr;margin-top:20px}
  .gl-list li{border-left:0;margin-left:0}
  .gl-list a{gap:2px;padding:14px 6px}
  .gl-v{font-size:28px;margin-top:2px}
  .gl-c{font-size:13.5px}
  .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,.dash,.foot{grid-template-columns:1fr}
  .dash{grid-template-areas:"plan" "phone" "reels"}
  .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}
  .plan{grid-template-columns:1fr;justify-items:stretch}
  .ring{width:96px;height:96px}
  .lib{grid-template-columns:1fr}
  .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}
  .door{height:auto;margin-top:0}.door-stick{position:static;height:auto}.door-card{--p:1 !important;clip-path:none}
  .glance{margin-top:12px}
  .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}
.still .door{height:auto;margin-top:0}.still .door-stick{position:static;height:auto}.still .door-card{--p:1 !important;clip-path:none}
.still .glance{margin-top:12px}
/* 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}
}