/* ============================================================================
   Operater, landing
   Blueprint Terminal design language. Logical properties throughout so the
   Arabic (RTL) build needs no separate stylesheet.

   The page is one scroll-driven film in seven beats. Every beat is a `.scene`:
   a tall section with a sticky child. main.js writes a single custom property
   `--p` (0 to 1) onto the scene while it is on screen, and everything below
   derives from that one number. No scene schedules its own animation and
   nothing here is animated except transform and opacity.

   Two derived properties do most of the work:

     --q   `--p` eased with a smoothstep, for moves that should not start and
           stop abruptly. Pure arithmetic, so it costs no JavaScript.
     --e   a per-element 0 to 1 ramp, for members of a staggered group. Each
           member gets its index as `--i` (generated by build.py, because the
           CSP forbids inline styles) and its own window via --from and --span.
   ========================================================================= */

/* ---- reset ---- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
img,svg,video{display:block;max-inline-size:100%}
button,input{font:inherit;color:inherit}

/* ---- tokens ---- */
:root{
  --ink:#06090C;
  --grid:rgba(126,176,201,.05);
  --rule:rgba(126,176,201,.20);
  --rule-2:rgba(126,176,201,.36);
  --edge:rgba(126,176,201,.54);
  --bone:#E9E7E2;   /* 16.15:1 */
  --ash:#8E9AA2;    /*  6.93:1 */
  --dim:#87949D;    /*  6.42:1 */
  --ph:#74818A;     /*  4.99:1 */
  --blue:#7EB0C9;   /*  8.50:1 */
  --acc:#57CBA0;    /*  9.94:1 */
  --acc-wash:rgba(87,203,160,.10);
  /* The alarm colour. It appears in beat 5 and nowhere else on the page: on
     the revoke stamp, and on the "paused" marker of the rows that depended on
     the revoked connection. Used sparingly on purpose, so that when it shows
     up it means one thing. 5.31:1 on bone. */
  --vml:#B22D1C;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,88px);
  --max:1340px;
  --ease:cubic-bezier(.2,.7,.3,1);
}
html[dir="rtl"]{--sans:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif}

html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);overflow-x:hidden;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;line-height:1.5}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
::selection{background:var(--acc);color:var(--ink)}

.skip{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:99;
  background:var(--bone);color:var(--ink);padding:12px 20px;font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.skip:focus{inset-inline-start:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- ambient ---- */
.paper{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:96px 96px}

/* ============================================================================
   TYPE SCALE
   Five steps, from 200px down to 11px: a range of about 18 to 1 across the
   page. One family at more sizes and two more weights, rather than a second
   family. IBM Plex Mono set very large is the loudest thing this design
   language can do while still being itself.
   ========================================================================= */
.mono{font-family:var(--mono)}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim)}
html[dir="rtl"] .meta{font-family:var(--sans);letter-spacing:.02em;text-transform:none;font-size:12.5px}
.meta.a{color:var(--acc)} .meta.b{color:var(--blue)} .meta.w{color:var(--bone)}

.t-display{font-family:var(--mono);font-weight:600;
  font-size:clamp(50px,13.2vw,200px);line-height:.86;letter-spacing:-.06em}
html[dir="rtl"] .t-display{font-family:var(--sans);font-weight:600;
  letter-spacing:-.02em;line-height:1.08;font-size:clamp(42px,10.5vw,150px)}

.t-statement{font-family:var(--mono);font-weight:500;
  font-size:clamp(26px,4.4vw,56px);line-height:1.04;letter-spacing:-.045em}
html[dir="rtl"] .t-statement{font-family:var(--sans);font-weight:600;
  letter-spacing:-.01em;line-height:1.26}

.t-caption{font-family:var(--sans);font-weight:300;
  font-size:clamp(19px,2.7vw,34px);line-height:1.22;letter-spacing:-.02em;
  color:var(--bone)}
html[dir="rtl"] .t-caption{font-weight:400;letter-spacing:0;line-height:1.42}

h1{font-family:var(--mono);font-weight:600;font-size:clamp(38px,7.4vw,96px);line-height:.95;
  letter-spacing:-.055em}
h1 .g{color:var(--acc)}
h2{font-family:var(--mono);font-weight:500;font-size:clamp(24px,3.4vw,40px);line-height:1.06;
  letter-spacing:-.04em}
html[dir="rtl"] h2{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;line-height:1.28}
h3{font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:-.015em}
html[dir="rtl"] h3{font-family:var(--sans);font-weight:600;letter-spacing:0}
h4{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:-.015em;color:var(--bone)}
html[dir="rtl"] h4{font-family:var(--sans);font-weight:600;letter-spacing:0}
.lede{font-size:clamp(15px,1.55vw,18px);font-weight:300;line-height:1.72;color:var(--ash)}
.body{font-size:14px;font-weight:300;line-height:1.7;color:var(--ash)}
.note{font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--dim)}
html[dir="rtl"] .note,html[dir="rtl"] .lede,html[dir="rtl"] .body{font-family:var(--sans)}

.wrap{max-inline-size:var(--max);margin-inline:auto}
section{position:relative;z-index:1;padding:clamp(72px,10vw,150px) var(--pad)}

/* ---- nav ---- */
.nav{position:sticky;inset-block-start:0;z-index:50;display:flex;align-items:center;gap:20px;
  padding:12px var(--pad);border-block-end:1px solid var(--rule);
  background:rgba(6,9,12,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:10px;flex:none;text-decoration:none;color:inherit}
.brand span{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase}
.nav .sp{flex:1}
.nav-links{display:flex;gap:24px}
.nav-links a{font-family:var(--mono);font-size:12.5px;color:var(--dim);text-decoration:none;
  transition:color .25s var(--ease)}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current]{color:var(--bone)}

.lang{display:flex;border:1px solid var(--rule);flex:none}
.lang a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;padding:8px 11px;
  color:var(--dim);text-decoration:none;transition:color .2s var(--ease)}
.lang a+a{border-inline-start:1px solid var(--rule)}
.lang a[aria-current]{background:var(--bone);color:var(--ink);font-weight:600}
.lang a:hover:not([aria-current]){color:var(--bone)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border:1px solid transparent;padding:15px 26px;min-height:50px;
  position:relative;overflow:hidden;transition:background .25s var(--ease),
  color .25s var(--ease),border-color .25s var(--ease)}
.btn--primary{background:var(--bone);color:var(--ink);font-weight:600}
.btn--primary::after{content:"";position:absolute;inset:0;transform:translateX(-130%);
  background:linear-gradient(90deg,transparent,rgba(6,9,12,.14),transparent)}
.btn--primary:hover::after{animation:sweep .8s var(--ease)}
@keyframes sweep{to{transform:translateX(130%)}}
.btn--ghost{background:transparent;border-color:var(--edge);color:var(--bone)}
.btn--ghost:hover{border-color:var(--acc);color:var(--acc)}
.btn--sm{padding:11px 16px;min-height:42px;font-size:11px}
.btn--cta{padding:19px 38px;min-height:58px}

.capture{max-inline-size:540px}
.trustline{display:flex;gap:8px 22px;flex-wrap:wrap;margin-block-start:14px}
.trustline span{display:flex;align-items:center;gap:7px}
.trustline i{color:var(--acc);font-style:normal;font-family:var(--mono)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--rule-2);
  padding:7px 13px}
.eyebrow i{width:5px;height:5px;background:var(--acc);animation:blip 2s ease-in-out infinite;
  flex:none}
.eyebrow span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash)}
html[dir="rtl"] .eyebrow span{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12px}
@keyframes blip{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.65)}}

/* ---- reveal, used by the spec sheet only ----
   The hidden state is applied by main.js adding .rv-on to the root, not by
   default. Left the other way round, anything below the fold stays at zero
   opacity forever when scripts are blocked or fail, and the spec sheet is the
   part of the page a sceptical reader is most likely to want. */
.rv-on .rv{opacity:0;transform:translateY(24px)}
.rv-on .rv.in{opacity:1;transform:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv-on .rv[data-d="1"].in{transition-delay:.09s}
.rv-on .rv[data-d="2"].in{transition-delay:.18s}
.rv-on .rv[data-d="3"].in{transition-delay:.27s}

.shead{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-block-end:16px;
  border-block-end:1px solid var(--rule);margin-block-end:clamp(26px,4vw,44px)}
.shead .fill{flex:1;height:1px;background:var(--rule);min-inline-size:20px}

/* ---- the strip under the nav ----
   This used to be a scrolling ticker of invented agent actions. The people
   who fund and vouch for the company are a stronger thing to put in the same
   space, and a static row costs no animation frames. */
.bstrip{position:relative;z-index:2;display:flex;align-items:center;
  gap:clamp(14px,2.4vw,34px);flex-wrap:wrap;
  border-block-end:1px solid var(--rule);background:rgba(6,9,12,.72);
  padding:13px var(--pad);min-block-size:52px}
.bstrip-in{display:flex;align-items:center;gap:clamp(13px,2.4vw,40px);flex-wrap:wrap}
.bstrip-in span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ash);display:flex;align-items:center;gap:9px}
html[dir="rtl"] .bstrip-in span{font-family:var(--sans);letter-spacing:0}
.bstrip-in span::before{content:"";inline-size:4px;block-size:4px;background:var(--acc);
  flex:none}

/* ============================================================================
   THE SCENE ENGINE
   `--p` is written by main.js. `--q` is the eased form. Both are declared here
   so the very first paint, before any script has run, is already valid.
   ========================================================================= */
.scene{position:relative;padding:0;
  --p:0;
  --q:calc(var(--p) * var(--p) * (3 - 2 * var(--p)))}
.scene-pin{position:sticky;inset-block-start:0;block-size:100svh;overflow:hidden;
  display:grid;place-items:center}
.scene-in{inline-size:100%;max-inline-size:var(--max);margin-inline:auto;
  padding-inline:var(--pad)}

/* Heading blocks that sit over the content they introduce have to be gone by
   the time it arrives, so they fade out on --p. Beats 4, 5 and 6 lay their
   heading out in flow instead, where nothing collides, and those keep it:
   see .scene-head--flow below. */
.scene-head{position:absolute;inset-block-start:clamp(58px,9vh,104px);
  inset-inline-start:var(--pad);max-inline-size:34ch;z-index:3;
  opacity:calc(1 - max(0, var(--p) - .34) * 3.6);
  transform:translate3d(0,calc(var(--p) * -4vh),0)}
.scene-head h2{margin-block-start:12px}
.team-in .scene-head,.lg-in .scene-head,.rc-in .scene-head{
  position:static;opacity:1;transform:none;max-inline-size:40ch}

.hint{position:absolute;inset-block-end:22px;inset-inline-start:50%;translate:-50% 0;
  display:flex;align-items:center;gap:9px;opacity:calc(1 - var(--p) * 3);z-index:4}
.hint i{inline-size:1px;block-size:26px;background:linear-gradient(var(--acc),transparent);
  animation:drop 1.9s var(--ease) infinite}
@keyframes drop{0%{transform:translateY(-9px);opacity:0}
  35%{opacity:1}100%{transform:translateY(9px);opacity:0}}

.spine{position:absolute;inset-block:0;inset-inline-end:calc(var(--pad) / 2);
  inline-size:1px;background:var(--rule);z-index:4}
.spine i{position:absolute;inset-block-start:0;inline-size:1px;background:var(--acc);
  block-size:calc(var(--p) * 100%)}

/* A screenshot, presented as a piece of software rather than a picture. */
.dev{position:relative;border:1px solid var(--rule-2);background:var(--ink);
  overflow:hidden;will-change:transform}
.dev img{display:block;inline-size:100%;block-size:auto}
.dev-bar{display:flex;align-items:center;gap:7px;padding:9px 13px;
  border-block-end:1px solid var(--rule);background:rgba(8,12,16,.9)}
.dev-bar i{inline-size:7px;block-size:7px;background:var(--rule-2);flex:none}
.dev-bar span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ph);margin-inline-start:6px}

/* ============================================================================
   BEAT 0 · TITLE CARD
   The statement at full size, then it shrinks and travels toward the wordmark
   while the second line takes its place. This move teaches the rest of the
   page how transitions work here: scale is the cut.
   ========================================================================= */
.s-title{block-size:180svh}
/* The statement and the line that replaces it share one grid cell, so the
   second arrives where the first was rather than a screen further down. */
.title-in{display:grid;grid-template-rows:auto auto;justify-items:start;
  gap:clamp(20px,4vh,44px)}
.title-in > *{grid-column:1}
.title-blk{grid-row:1}
.handoff{grid-row:1;align-self:end}
.title-cta{grid-row:2}
.title-blk{transform-origin:0 0;
  transform:scale(calc(1 - var(--q) * .84)) translate3d(0,calc(var(--q) * -14vh),0)}
html[dir="rtl"] .title-blk{transform-origin:100% 0}
.title-blk h1{margin-block-start:clamp(16px,3vh,30px);max-inline-size:11ch}
.s-title h1{opacity:calc(1 - max(0, var(--p) - .52) * 3.4)}
.s-title .eyebrow{opacity:calc(1 - max(0, var(--p) - .30) * 4)}

/* The hand-off line. It arrives where the statement was, holds, then leaves. */
.handoff{max-inline-size:22ch;color:var(--acc);
  opacity:calc(min(max(0, var(--p) - .30) * 5, max(0, .94 - var(--p)) * 6));
  transform:translate3d(0,calc((1 - var(--p)) * 2.4vh),0)}
.title-cta{opacity:calc(1 - max(0, var(--p) - .16) * 4.4)}

/* the kinetic deal, on first paint only, no script involved */
.kin .kw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-block-end:.08em}
.kin .kw b{display:inline-block;font-weight:inherit;
  animation:deal .82s var(--ease) both}
@keyframes deal{from{transform:translateY(105%) rotate(2deg);opacity:0}
  to{transform:none;opacity:1}}
.kin .kw:nth-child(1) b{animation-delay:.06s}
.kin .kw:nth-child(2) b{animation-delay:.14s}
.kin .kw:nth-child(3) b{animation-delay:.22s}
.kin .kw:nth-child(4) b{animation-delay:.30s}
.kin .kw:nth-child(5) b{animation-delay:.38s}
.kin .g .kw:nth-child(1) b{animation-delay:.30s}
.kin .g .kw:nth-child(2) b{animation-delay:.38s}
.kin .g .kw:nth-child(3) b{animation-delay:.46s}

/* ============================================================================
   BEAT 1 · THE LOG
   One scene doing two things, because two pinned scenes showing the same
   screenshot read as the screenshot appearing twice. That is what it was: one
   pin scrolling away and an identical one scrolling in.

   So the whole move lives on one --p. The first third is the rise, out of
   perspective and up into place; the rest is the push in, until a single row
   fills the frame. Past 0.66 the screenshot dissolves and the same row drawn
   in the DOM takes over, because a PNG pushed past about 2x goes soft, which
   reads as a fake zoom.

   --re and --ze are the two halves, each eased on its own so the settle at
   the end of the rise and the start of the push do not fight each other.
   ========================================================================= */
.s-zoom{block-size:300svh;
  --rise:clamp(0,var(--p)/.30,1);
  --zoom:clamp(0,(var(--p) - .30)/.70,1);
  --re:calc(var(--rise) * var(--rise) * (3 - 2 * var(--rise)));
  --ze:calc(var(--zoom) * var(--zoom) * (3 - 2 * var(--zoom)))}
.s-zoom .scene-in{display:grid;place-items:center}
.s-zoom .dev{inline-size:min(1180px,92vw);max-block-size:72svh;
  transform-origin:50% 42%;
  transform:perspective(1800px)
            translate3d(0,calc((1 - var(--re)) * 22vh + var(--ze) * -7%),0)
            rotateX(calc((1 - var(--re)) * 14deg))
            scale(calc((.84 + var(--re) * .16) * (1 + var(--ze) * 1.45)));
  opacity:calc(min(var(--p) * 9, 1) - max(0, var(--p) - .66) * 5)}
.s-zoom .glow{position:absolute;inset:-14% -6% auto;block-size:60%;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0,
             rgba(87,203,160,calc(var(--re) * .16)),transparent 70%)}

.zoom-row{position:absolute;inset-inline:var(--pad);inset-block-start:50%;
  translate:0 -50%;z-index:3;display:grid;
  grid-template-columns:auto auto auto 1fr auto;align-items:center;
  gap:clamp(14px,2.4vw,34px);
  border-block:1px solid var(--rule-2);padding-block:clamp(16px,2.6vh,26px);
  background:rgba(6,9,12,.86);
  --e:clamp(0,(var(--p) - .66)/.14,1);
  opacity:var(--e);
  transform:scale(calc(.94 + var(--e) * .06))}
.zoom-row span{font-family:var(--mono);font-size:clamp(12px,1.45vw,19px);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir="rtl"] .zoom-row span{font-family:var(--sans)}
.zr-t{color:var(--ph)}
.zr-a{color:var(--bone);font-weight:500}
.zr-s{color:var(--blue)}
.zr-x{color:var(--ash);font-weight:300;min-inline-size:0}
.zr-st{color:var(--acc);letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(9px,1vw,12px)!important}
/* The second caption arrives with the row it describes, not before it. */
.s-zoom .zoom-copy{position:absolute;inset-block-end:6vh;inset-inline-start:var(--pad);
  max-inline-size:38ch;z-index:3;
  --e:clamp(0,(var(--p) - .68)/.14,1);
  opacity:var(--e);
  transform:translate3d(0,calc((1 - var(--e)) * 2vh),0)}

/* ============================================================================
   BEAT 3 · THE WORK
   Three artefacts an agent actually produced, travelling sideways on vertical
   scroll. Built in markup rather than images so they stay sharp, translate,
   and cost nothing to load.
   ========================================================================= */
.s-track{block-size:380svh}
.s-track .scene-in{overflow:visible}
.s-track .rail{display:flex;gap:clamp(20px,3vw,46px);align-items:center;
  inline-size:max-content;will-change:transform;
  transform:translate3d(calc(var(--p) * (var(--rail-travel,-60vw))),0,0)}
html[dir="rtl"] .s-track .rail{
  transform:translate3d(calc(var(--p) * (var(--rail-travel,-60vw)) * -1),0,0)}
.act{flex:none;inline-size:min(74vw,860px)}
.act-hd{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin-block-end:16px;
  align-items:baseline}
.act-hd .meta{grid-row:span 2}
.act-hd h2{font-family:var(--mono);font-size:clamp(15px,1.9vw,20px);font-weight:500;
  letter-spacing:-.02em;color:var(--bone);line-height:1.25}
html[dir="rtl"] .act-hd h2{font-family:var(--sans);font-weight:600;letter-spacing:0}
.act-hd span:last-child{font-size:13.5px;font-weight:300;color:var(--ash);max-inline-size:62ch}
.art{border:1px solid var(--rule-2);background:rgba(8,12,16,.92)}
.art-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;
  border-block-end:1px solid var(--rule)}
.art-bar i{inline-size:6px;block-size:6px;background:var(--acc);flex:none}
.art-bar span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ph)}

.lead-hd,.lead-row{display:grid;grid-template-columns:1.1fr 1.1fr 1fr 1.2fr;gap:14px;
  padding:11px 14px;align-items:center}
.lead-hd{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ph);border-block-end:1px solid var(--rule)}
.lead-row{border-block-end:1px solid var(--grid);font-size:13px;font-weight:300;color:var(--ash)}
.lead-row b{color:var(--bone);font-weight:500;font-size:13.5px}
.lead-row i{font-style:normal;color:var(--acc);font-family:var(--mono);font-size:11.5px}

.mail-hd{display:flex;gap:14px;padding:10px 14px;border-block-end:1px solid var(--grid);
  align-items:baseline}
.mail-hd span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ph);flex:none;min-inline-size:52px}
.mail-hd b{color:var(--bone);font-weight:400}
.mail-body{padding:16px 14px;font-size:14.5px;font-weight:300;line-height:1.85;color:var(--ash)}
.mf{padding:1px 5px;border-block-end:1px solid}
.mf--sig{color:var(--acc);border-color:rgba(87,203,160,.5);background:var(--acc-wash)}
.mf--co{color:var(--blue);border-color:rgba(126,176,201,.45)}

.slack-hd{display:flex;align-items:center;gap:9px;padding:13px 14px 4px}
.slack-hd .av{inline-size:22px;block-size:22px;background:var(--acc);color:var(--ink);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:600;flex:none}
.slack-hd b{color:var(--bone);font-size:14px;font-weight:600}
.slack-hd .bot{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--rule);padding:1px 5px}
.slack-hd .chan{font-family:var(--mono);font-size:11.5px;color:var(--blue);margin-inline-start:auto}
.slack-msg{padding:6px 14px 16px 46px;font-size:14.5px;font-weight:300;line-height:1.75;
  color:var(--ash)}
html[dir="rtl"] .slack-msg{padding:6px 46px 16px 14px}

/* ============================================================================
   BEAT 4 · THE TEAM, AND ONE INSTRUCTION
   Pull back from the Slack post to the whole team, then a single instruction
   moves four of them. Two stages in one pinned frame: the roster and the
   result share a grid row, so the second replaces the first rather than
   needing a second viewport of height.
   ========================================================================= */
.s-team{block-size:280svh}
.team-bg{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  pointer-events:none;overflow:hidden}
.team-bg .dev{inline-size:min(1180px,92vw);border-color:transparent;
  transform:scale(calc(1.5 - var(--q) * .5));
  opacity:calc(.028 + min(var(--p) * 4, 1) * .05)}
.team-bg .dev-bar{display:none}
.team-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:clamp(14px,2.4vh,28px);
  align-content:center;block-size:100%;
  padding-block:clamp(94px,17vh,150px) clamp(26px,5vh,56px)}
.team-in > *{grid-column:1}
.team-in .scene-head{grid-row:1}

.team-instr{grid-row:2;border:1px solid var(--edge);background:rgba(8,12,16,.9);
  padding:13px 16px 15px;
  --e:clamp(0,(var(--p) - .40)/.10,1);
  opacity:var(--e)}
.team-instr p{position:relative;display:inline-block;margin-block-start:8px;
  font-size:clamp(15px,1.9vw,21px);font-weight:300;color:var(--bone);line-height:1.4}
/* The instruction types itself out on scroll. A cover panel shrinking off the
   trailing edge, which is a transform, rather than animating the text itself. */
.team-instr p::after{content:"";position:absolute;inset:-2px -2px -2px 0;
  background:var(--ink);transform-origin:right;
  transform:scaleX(calc(1 - clamp(0,(var(--p) - .44)/.14,1)))}
html[dir="rtl"] .team-instr p::after{inset:-2px 0 -2px -2px;transform-origin:left}

.team-grid{grid-row:3;align-self:start;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);
  opacity:calc(1 - max(0, var(--p) - .60) * 3.2);
  transform:translate3d(0,calc(max(0, var(--p) - .60) * -6vh),0)}
.cell{background:var(--ink);padding:14px 14px 16px;
  --e:clamp(0,(var(--p) - .06 - var(--i,0) * .028)/.14,1);
  opacity:var(--e);
  transform:translate3d(0,calc((1 - var(--e)) * 2.4vh),0)}
.cell .meta{display:flex;align-items:center;gap:7px;font-size:9.5px}
.cell .meta i{inline-size:5px;block-size:5px;background:var(--ph);flex:none}
.cell.live .meta i{background:var(--acc)}
.cell h3{margin-block:9px 6px;color:var(--bone)}
.cell .body{font-size:12.5px;line-height:1.55}
.cell.live{background:linear-gradient(180deg,var(--acc-wash),transparent 60%)}

.fanout{grid-row:3;align-self:start;display:flex;flex-direction:column;gap:9px;
  pointer-events:none}
.task{display:flex;align-items:center;gap:14px;border:1px solid var(--rule);
  padding:13px 16px;background:rgba(8,12,16,.94);
  --e:clamp(0,(var(--p) - .62 - var(--i,0) * .055)/.09,1);
  opacity:var(--e);
  transform:translate3d(calc((1 - var(--e)) * 3vw),0,0)}
html[dir="rtl"] .task{transform:translate3d(calc((1 - var(--e)) * -3vw),0,0)}
.task .who{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);flex:none;min-inline-size:104px}
html[dir="rtl"] .task .who{font-family:var(--sans);letter-spacing:0;text-transform:none}
.task .what{flex:1;font-size:13.5px;font-weight:300;color:var(--ash)}
.task .st{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ph);flex:none}
html[dir="rtl"] .task .st{font-family:var(--sans);letter-spacing:0;text-transform:none}
.task .dot{inline-size:6px;block-size:6px;background:var(--acc);flex:none}

/* ============================================================================
   BEAT 5 · THE LEDGER
   The film's one inversion: bone ground, ink type. The ledger prints, then a
   connection is revoked in front of you and the rows that depended on it stop.
   This replaces what used to be three columns of text making the same claim.
   ========================================================================= */
.s-ledger{block-size:270svh}
.lg-wash{position:absolute;inset:0;z-index:0;background:var(--bone);
  transform-origin:top;transform:scaleY(clamp(0,var(--p)/.06,1))}
.lg-in{position:relative;z-index:2;color:var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,2.2vh,24px);align-content:center;block-size:100%;
  padding-block:clamp(90px,16vh,140px) clamp(26px,5vh,56px)}
.lg-in .scene-head{position:static;max-inline-size:34ch}
.lg-in .scene-head .meta{color:rgba(6,9,12,.56)}
.lg-in .t-caption{color:var(--ink)}

.lg-cols{display:flex;gap:clamp(16px,3vw,44px);flex-wrap:wrap;
  border-block-end:1px solid rgba(6,9,12,.22);padding-block-end:10px}
.lg-col{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink);
  --e:clamp(0,(var(--p) - .10 - var(--i,0) * .04)/.10,1);
  opacity:var(--e)}
html[dir="rtl"] .lg-col{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px}

.lg-conns{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lg-conns .meta{color:rgba(6,9,12,.56)}
.conn{position:relative;font-family:var(--mono);font-size:11.5px;
  border:1px solid rgba(6,9,12,.28);padding:5px 10px;color:rgba(6,9,12,.78)}
html[dir="rtl"] .conn{font-family:var(--sans)}
.conn--rv{border-color:var(--vml);color:var(--vml)}
.stamp{position:absolute;inset-block-end:calc(100% - 7px);inset-inline-end:-26px;
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vml);border:1px solid var(--vml);
  padding:3px 7px;background:var(--bone);white-space:nowrap;
  --e:clamp(0,(var(--p) - .74)/.07,1);
  opacity:var(--e);
  transform:rotate(-7deg) scale(calc(1.6 - var(--e) * .6))}
html[dir="rtl"] .stamp{font-family:var(--sans);letter-spacing:0;text-transform:none}

.lg{border:1px solid rgba(6,9,12,.24)}
.lg-hd,.lg-row{display:grid;grid-template-columns:auto 1.1fr 1.1fr 2.4fr;
  gap:clamp(10px,1.8vw,26px);padding:10px clamp(12px,1.6vw,20px);align-items:center}
.lg-hd{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(6,9,12,.5);border-block-end:1px solid rgba(6,9,12,.24)}
html[dir="rtl"] .lg-hd{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:12px}
.lg-row{border-block-end:1px solid rgba(6,9,12,.10);font-size:clamp(11.5px,1.25vw,14px);
  --e:clamp(0,(var(--p) - .14 - var(--i,0) * .045)/.10,1);
  opacity:var(--e);
  transform:translate3d(0,calc((1 - var(--e)) * 1.4vh),0)}
.lg-row:last-child{border-block-end:0}
.lg-row span{font-family:var(--mono);min-inline-size:0}
html[dir="rtl"] .lg-row span{font-family:var(--sans)}
.lg-row .t{color:rgba(6,9,12,.5)}
.lg-row .a{color:var(--ink);font-weight:500}
.lg-row .s{color:#2C6A85}
.lg-row .x{color:rgba(6,9,12,.72);display:flex;align-items:center;gap:12px;
  overflow:hidden}
.lg-row .xw{position:relative;overflow:visible;white-space:nowrap;
  text-overflow:ellipsis;min-inline-size:0}
/* The strike is a scaled hairline, not a text-decoration switch, so drawing it
   costs a composite rather than a re-layout of the row. */
.lg-row .xw::after{content:"";position:absolute;inset-block-start:52%;inset-inline:0;
  block-size:1px;background:var(--vml);transform-origin:left;transform:scaleX(0)}
html[dir="rtl"] .lg-row .xw::after{transform-origin:right}
.pz{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--vml);border:1px solid var(--vml);padding:2px 6px;
  flex:none;opacity:0}
html[dir="rtl"] .pz{font-family:var(--sans);letter-spacing:0;text-transform:none}
.lg-row.dep{--f:clamp(0,(var(--p) - .78)/.07,1);
  opacity:calc(var(--e) * (1 - var(--f) * .62))}
.lg-row.dep .xw::after{transform:scaleX(var(--f))}
.lg-row.dep .pz{opacity:var(--f)}
.lg-note{color:rgba(6,9,12,.62);max-inline-size:70ch;
  opacity:clamp(0,(var(--p) - .84)/.10,1)}

/* ============================================================================
   BEAT 6 · THE RECEIPT
   What the night produced, then what it costs. Output first: for a reader who
   has been sold to before, a price quoted after the evidence is a rate rather
   than a claim.
   ========================================================================= */
.s-receipt{block-size:230svh}
.rc-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.4vw,58px);align-items:center;
  padding-block-start:clamp(80px,14vh,128px)}
.rc-in .scene-head{position:static;grid-column:1/-1;max-inline-size:40ch}
.rc-sheet .dev{border-color:rgba(233,231,226,.34);
  transform:translate3d(0,calc((1 - var(--q)) * 8vh),0) scale(calc(.94 + var(--q) * .06));
  opacity:clamp(0,var(--p)/.2,1)}
.rc-side{display:grid;gap:clamp(16px,2.6vh,30px)}
.rc-metrics{display:grid;gap:12px}
.rc-m,.rc-p{display:grid;gap:3px;
  --e:clamp(0,(var(--p) - .18 - var(--i,0) * .06)/.12,1);
  opacity:var(--e);
  transform:translate3d(calc((1 - var(--e)) * 2vw),0,0)}
html[dir="rtl"] .rc-m,html[dir="rtl"] .rc-p{
  transform:translate3d(calc((1 - var(--e)) * -2vw),0,0)}
.rc-m b{font-family:var(--mono);font-size:clamp(28px,3.6vw,48px);font-weight:500;
  letter-spacing:-.05em;color:var(--bone);line-height:1}
.rc-prices{display:grid;gap:10px;padding-block-start:clamp(14px,2.4vh,24px);
  border-block-start:1px solid var(--rule)}
.rc-p{--e:clamp(0,(var(--p) - .46 - var(--i,0) * .06)/.12,1)}
.rc-p b{font-family:var(--mono);font-size:clamp(19px,2.2vw,28px);font-weight:500;
  letter-spacing:-.04em;color:var(--acc);line-height:1}
.rc-lede{max-inline-size:44ch;opacity:clamp(0,(var(--p) - .70)/.12,1)}

/* ============================================================================
   BEAT 7 · THE ASK
   The statement returns at the size it started, which closes the loop.
   ========================================================================= */
.s-final{block-size:170svh;border-block-start:1px solid var(--rule)}
.fin-in{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(18px,3vh,32px);margin-inline:auto;
  transform:scale(calc(.76 + var(--q) * .24));
  opacity:clamp(0,var(--p)/.22,1)}
/* The closing statement rhymes with the title card, but it is six words to
   the title card's three. At the display size it would not fit the frame with
   its button, so it takes the step below and the scale-up carries the rhyme.
   The measure is set on the heading, not the column: constraining the column
   wraps the eyebrow and the button label to three lines each. */
.s-final h2{font-size:clamp(30px,5.6vw,84px);line-height:.94;letter-spacing:-.05em;
  max-inline-size:15ch}
html[dir="rtl"] .s-final h2{font-size:clamp(27px,4.8vw,68px);line-height:1.14;
  letter-spacing:-.02em;max-inline-size:20ch}
.fin-in .capture{margin-inline:auto}
.fin-in .trustline{justify-content:center}
.s-final .u-acc{color:var(--acc)}

/* ============================================================================
   THE SPEC SHEET
   Not a scene. The one place the page is allowed to be a document, and the
   heading says as much. Also where the FAQ lives, which is now most of the
   page's indexable prose.
   ========================================================================= */
.apx{border-block-start:1px solid var(--rule);
  padding:clamp(60px,8vw,110px) var(--pad)}
.apx-h{font-family:var(--mono);font-weight:500;font-size:clamp(17px,2vw,22px);
  letter-spacing:-.02em;color:var(--bone);margin-block:clamp(30px,5vw,56px) 12px}
html[dir="rtl"] .apx-h{font-family:var(--sans);font-weight:600;letter-spacing:0}

/* Free is a plan now, not a trial, so it carries the accent edge the paid
   cards do not. It sits above the row rather than inside it: a fourth card
   would make the row a maths problem instead of a choice. */
.free{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--rule-2);border-inline-start:2px solid var(--acc);
  background:var(--acc-wash);
  padding:22px 24px;margin-block-start:clamp(22px,3vw,34px)}
.free h4{margin-block-end:7px}
.free .body{max-inline-size:52ch}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);margin-block-start:20px}
.plan{background:var(--ink);padding:clamp(24px,3vw,34px)}
/* Inset rather than a real border: an added edge would shift the 1px grid
   gap and knock the three cards out of alignment. */
.plan--feat{box-shadow:inset 0 2px 0 var(--acc)}
.plan-badge{color:var(--acc)}
.plan-hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap}
.plan-price{display:flex;align-items:baseline;gap:6px;margin-block:20px 12px}
.plan-price b{font-family:var(--mono);font-size:clamp(32px,4vw,46px);font-weight:500;
  letter-spacing:-.05em;color:var(--acc)}
.plan .body{max-inline-size:40ch}
.plan ul{list-style:none;margin-block-start:22px;padding-block-start:20px;
  border-block-start:1px solid var(--rule)}
.plan li{display:flex;gap:11px;align-items:flex-start;margin-block-end:11px;
  font-size:13.5px;font-weight:300;color:var(--ash)}
.plan li i{color:var(--acc);font-style:normal;font-family:var(--mono);flex:none;line-height:1.5}
.plans-scale{margin-block-start:18px;color:var(--ash)}
.plans-over{margin-block-start:8px;color:var(--ash)}
.plans-note{margin-block-start:18px;color:var(--ash)}
.plans-custom{margin-block-start:8px}
.plans-custom a{color:var(--acc);text-decoration:none;
  border-block-end:1px solid rgba(87,203,160,.4)}
.plans-custom a:hover{border-block-end-color:var(--acc)}

.faq{margin-block-start:clamp(28px,4vw,44px);border-block-start:1px solid var(--rule)}
.qa{border-block-end:1px solid var(--rule)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:20px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary span{font-family:var(--mono);font-size:clamp(15px,1.7vw,17px);font-weight:500;
  letter-spacing:-.02em;color:var(--bone)}
html[dir="rtl"] .qa summary span{font-family:var(--sans);font-weight:600;letter-spacing:0}
.qa summary i{position:relative;inline-size:13px;block-size:13px;flex:none}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;background:var(--acc);
  transition:transform .25s var(--ease)}
.qa summary i::before{inset-block-start:6px;inset-inline-start:0;inline-size:13px;block-size:1px}
.qa summary i::after{inset-block-start:0;inset-inline-start:6px;inline-size:1px;block-size:13px}
.qa[open] summary i::after{transform:rotate(90deg)}
.qa[open] summary span{color:var(--acc)}
.qa-a{padding-block-end:24px}
.qa-a .body{max-inline-size:74ch;font-size:15px;line-height:1.78}
.qa summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ---- footer ---- */
footer{border-block-start:1px solid var(--rule);padding:48px var(--pad) 40px;position:relative;
  z-index:1}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:34px;max-inline-size:var(--max);
  margin-inline:auto}
.fgrid h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ph);margin-block-end:14px;font-weight:500}
html[dir="rtl"] .fgrid h4{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px}
.fgrid a{display:block;font-size:13.5px;font-weight:300;color:var(--ash);text-decoration:none;
  margin-block-end:9px;transition:color .2s var(--ease)}
.fgrid a:hover{color:var(--bone)}
.fbot{max-inline-size:var(--max);margin:36px auto 0;padding-block-start:14px;
  border-block-start:1px solid var(--rule);display:flex;justify-content:space-between;
  align-items:center;gap:10px 24px;flex-wrap:wrap}
.social{display:flex;align-items:center;gap:2px;margin-inline:-10px}
.social .meta{margin-inline:10px 4px}
/* No border box: the 44px hit area comes from padding, so the row stays light
   while every target is still large enough to press. */
.social a{display:grid;place-items:center;inline-size:44px;block-size:44px;
  color:var(--ph);transition:color .2s var(--ease)}
.social a:hover,.social a:focus-visible{color:var(--acc)}
.social svg{fill:currentColor}
.fbot a{text-decoration:none}

/* ---- legal pages ---- */
.doc{position:relative;z-index:1;max-inline-size:74ch;margin-inline:auto;
  padding:clamp(48px,7vw,104px) var(--pad) clamp(72px,9vw,128px)}
.doc h1{font-family:var(--mono);font-weight:500;font-size:clamp(30px,4.6vw,54px);
  letter-spacing:-.04em;margin-block:14px 10px}
.doc-date{display:block;margin-block-end:34px}
.doc-intro{max-inline-size:66ch;padding-block-end:34px;border-block-end:1px solid var(--rule)}
.doc-s{padding-block:34px;border-block-end:1px solid var(--rule)}
.doc-s h2{font-family:var(--mono);font-weight:500;font-size:clamp(17px,2vw,21px);
  letter-spacing:-.02em;margin-block-end:14px}
.doc-s p{font-size:15.5px;font-weight:300;line-height:1.78;color:var(--ash);
  max-inline-size:66ch}
.doc-s p+p{margin-block-start:14px}
.doc-s ul{list-style:none;margin-block-start:14px;max-inline-size:66ch}
.doc-s li{position:relative;padding-inline-start:22px;margin-block-end:11px;
  font-size:15px;font-weight:300;line-height:1.7;color:var(--ash)}
.doc-s li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:11px;
  inline-size:9px;block-size:1px;background:var(--acc)}
.doc-s strong{color:var(--bone);font-weight:500}
.doc-s a,.doc-more a{color:var(--acc);text-decoration:none;
  border-block-end:1px solid rgba(87,203,160,.4)}
.doc-s a:hover,.doc-more a:hover{border-block-end-color:var(--acc)}
.doc-note{margin-block-start:34px;padding:20px 22px;border:1px solid var(--rule-2)}
.doc-note .note{color:var(--ash);line-height:1.7}
.doc-more{margin-block-start:30px}
.foot-grid{display:grid;grid-template-columns:1.6fr 2fr;gap:34px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-base{margin-block-start:36px;padding-block-start:20px;
  border-block-start:1px solid var(--rule);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.foot{border-block-start:1px solid var(--rule);padding:48px var(--pad) 40px}

/* ---- utilities ---- */
.u-acc{color:var(--acc)}
.u-inline{display:inline}
.u-mb14{margin-block-end:14px}
.u-w300{max-inline-size:300px}
.u-w620{max-inline-size:620px;margin-block:14px 0}

/* ============================================================================
   RESPONSIVE
   Every beat has to work in one viewport at 360 as well as 1440, so the two
   places that cost height, the roster grid and the receipt's two columns,
   collapse rather than shrink.
   ========================================================================= */
@media (max-width:1080px){
  .fgrid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links{display:none}
  .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell .body{display:none}
  .cell{padding:12px 12px 14px}
  .rc-in{grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,30px)}
  .rc-sheet{display:none}
  .lg-hd,.lg-row{grid-template-columns:auto 1fr 1.4fr}
  .lg-hd span:nth-child(3),.lg-row .s{display:none}
  .zoom-row{grid-template-columns:auto auto 1fr;gap:12px}
  .zr-s,.zr-st{display:none}
  .s-track{block-size:320svh}
  .s-title{block-size:170svh}
  .s-zoom{block-size:260svh}
  .s-team{block-size:250svh}
  .s-ledger{block-size:240svh}
  .s-receipt{block-size:190svh}
  .s-final{block-size:160svh}
  .s-zoom .dev{max-block-size:58svh;
    transform:perspective(1500px)
              translate3d(0,calc((1 - var(--re)) * 16vh + var(--ze) * -5%),0)
              rotateX(calc((1 - var(--re)) * 12deg))
              scale(calc((.86 + var(--re) * .14) * (1 + var(--ze) * 1.05)))}
  .plans{grid-template-columns:minmax(0,1fr)}
  .bstrip{gap:10px 18px;padding-block:11px}
  .bstrip-in span{font-size:11px}
  .act{inline-size:min(86vw,860px)}
  .lead-hd,.lead-row{grid-template-columns:1.2fr 1fr 1.2fr}
  .lead-hd span:nth-child(3),.lead-row span:nth-child(3){display:none}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .team-in{padding-block-start:clamp(84px,15vh,120px)}
  .lg-hd,.lg-row{grid-template-columns:auto 1fr;gap:10px}
  .lg-hd span:nth-child(2),.lg-row .a{display:none}
  .free{flex-direction:column;align-items:flex-start}
  .fbot{justify-content:flex-start}
  .bstrip .meta{inline-size:100%}
  .btn--cta{inline-size:100%}
}

/* ============================================================================
   REDUCED MOTION
   Every scene flattens into an ordinary stacked section with all of its
   content present and legible. main.js still sets --p to 1 so anything reading
   the property sees a finished scene, and every rule that consumes it is
   overridden below rather than left to resolve at 1, which for the title card
   would mean a headline scaled almost to nothing.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}

  .scene{block-size:auto!important}
  .scene-pin{position:static;block-size:auto;overflow:visible;
    padding-block:clamp(56px,8vw,96px)}
  .scene-head{position:static;opacity:1;transform:none;max-inline-size:60ch;
    margin-block-end:26px}
  .hint,.spine{display:none}

  .title-blk,.s-title h1,.s-title .eyebrow,.handoff,.title-cta,
  .s-zoom .dev,.s-track .rail,.team-bg .dev,.team-instr,
  .team-grid,.cell,.task,.lg-wash,.lg-col,.stamp,.lg-row,.lg-note,
  .rc-sheet .dev,.rc-m,.rc-p,.rc-lede,.fin-in,.zoom-row{
    opacity:1!important;transform:none!important}

  .s-title .title-in{gap:22px}
  .handoff{max-inline-size:40ch}
  .s-zoom .glow{display:none}

  /* The zoom's two halves both stay: the screenshot, then the row it was
     zooming into, one after the other. */
  .zoom-row{position:static;translate:none;margin-block-start:26px;
    background:transparent}
  .s-zoom .zoom-copy{position:static;margin-block-start:22px;max-inline-size:60ch}

  .s-track .rail{flex-direction:column;inline-size:100%;gap:44px}
  .act{inline-size:100%}

  .team-in{display:block;padding-block:0}
  .team-grid,.fanout{grid-row:auto}
  .team-grid{margin-block:22px}
  .fanout{margin-block-start:22px}
  .team-instr p::after{display:none}

  .lg-in{display:block;color:var(--ink);background:var(--bone);
    padding:clamp(30px,5vw,56px)}
  .lg-cols,.lg-conns,.lg,.lg-note{margin-block-start:20px}
  .lg-row.dep .xw::after{transform:scaleX(1)!important}

  .rc-in{padding-block-start:0}
  .rc-prices,.rc-metrics{margin-block-start:18px}
}

/* generated by build.py: stagger indices */
.stg0{--i:0}.stg1{--i:1}.stg2{--i:2}.stg3{--i:3}.stg4{--i:4}.stg5{--i:5}.stg6{--i:6}.stg7{--i:7}