:root{
  /* Warm paper, ink, and cobalt; every body-text token stays at WCAG AA. */
  --paper:#F7F6F2;              /* warm cream, not white */
  --ink:#14161A;                /* 16.75:1 on paper */
  --ink-2:#585C64;              /*  6.20:1 on paper */
  --ink-3:#686C74;              /*  4.87:1 on paper — the quietest legal grey */
  --rule:rgba(20,22,26,.14);
  --rule-soft:rgba(20,22,26,.075);

  --plate:#131519;              /* the ink card */
  --on-plate:#F4F3EF;           /* 16.46:1 on plate */
  --on-plate-2:#A0A4AC;         /*  7.31:1 on plate */
  --on-plate-3:#7C818A;         /*  4.67:1 on plate */
  --plate-rule:rgba(255,255,255,.14);
  --plate-rule-soft:rgba(255,255,255,.08);

  --cobalt:#1B2F7A;             /* the colour card — deep, not electric */
  --on-cobalt:#EFF2FB;          /* 11.6:1 on cobalt */
  --on-cobalt-2:#A9B8E6;        /*  6.16:1 on cobalt */
  --cobalt-rule:rgba(255,255,255,.16);
  --cobalt-rule-soft:rgba(255,255,255,.09);

  /* the accent is cobalt, on both grounds. It is NOT green — the page has no
     green in it. Named for the job it does, not for a colour it once was. */
  --accent:#9FB6F0;             /* on dark grounds — 9.07:1 on plate */
  --accent-ink:#2440C8;         /* on cream        — 7.35:1 on paper */

  /* the float: one soft shadow, never a gloss */
  --float:0 2px 4px -2px rgba(20,22,26,.05), 0 24px 56px -28px rgba(20,22,26,.22);
  --float-lg:0 4px 8px -4px rgba(20,22,26,.06), 0 44px 90px -40px rgba(20,22,26,.32);
  --r-card:26px;

  --r:10px;
  --r-lg:18px;
  --page:1280px;
  --ease:cubic-bezier(.22,1,.36,1);
  --wi:clamp(48px,6.6vw,92px);

  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--paper)}

/* [hidden] only lives in the UA stylesheet, so ANY author display rule beats
   it — .btn is inline-flex, .sent is flex, and both would keep rendering while
   marked hidden. That is how a "check your inbox" confirmation ends up on
   screen before anyone has clicked. The attribute has to win. */
[hidden]{display:none !important}
/* viewport-fit=cover lets the page run under the notch and the home indicator.
   Everything below therefore measures against the PADDED body (100%), never a
   raw 100vw — a vw width ignores the insets and slides straight under the notch
   in landscape. Only position:fixed chrome still works in vw, and it subtracts
   the insets itself. */
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 var(--ui);letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-variant-numeric:tabular-nums;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.045em;line-height:.92}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mark{
  display:block;width:24px;height:20px;background:currentColor;flex:none;
  -webkit-mask:url(/logo-mark.png) center/contain no-repeat;
          mask:url(/logo-mark.png) center/contain no-repeat;
}

/* ── the gap above the floating header ────────────────────────────────
   A floating bar leaves a strip of open page above itself, and content
   scrolls straight through it — a button arrives sliced in half and hangs
   over the header like a glitch. Cap the strip with the page's own colour:
   invisible against the paper, and content now disappears UNDER the header
   instead of over it. Below the bar (z 50) and above the page (z 1). */
body::before{
  content:"";position:fixed;top:0;left:0;right:0;
  height:calc(14px + env(safe-area-inset-top));
  background:var(--paper);
  z-index:49;pointer-events:none;
}

/* ══ CHROME ════════════════════════════════════════════════════════════ */
.dock{display:flex;align-items:center;gap:24px}
.dock-top{
  position:fixed;z-index:50;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);
  width:min(var(--page),calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height:58px;padding:0 10px 0 20px;
  border-radius:var(--r-lg);
  background:rgba(250,249,246,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--rule);
  transition:top .45s var(--ease),width .45s var(--ease),
             background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.dock-top.stuck{top:calc(10px + env(safe-area-inset-top));width:min(960px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)))}

/* over the ink card it inverts; over the cobalt card it goes cobalt */
.dock-top.dark{background:rgba(19,21,25,.93);border-color:var(--plate-rule);color:var(--on-plate)}
.dock-top.dark .brand{color:var(--on-plate)}
.dock-top.dark .navlinks a{color:var(--on-plate-2)}
.dock-top.dark .navlinks a b{color:var(--on-plate-3)}
.dock-top.dark .navlinks a:hover{color:var(--on-plate)}
.dock-top.dark .navlinks a:hover{border-color:var(--plate-rule);background:rgba(255,255,255,.05)}
.dock-top.dark .navlinks a.on{color:var(--on-plate)}
.dock-top.dark .navlinks a.on b,.dock-top.dark .navlinks a:hover b{color:var(--accent)}
.dock-top.dark .primary{background:var(--on-plate);color:#000;border-color:var(--on-plate)}
.dock-top.dark .primary:hover{background:#fff;border-color:#fff}

.dock-top.pop{background:rgba(27,47,122,.93);border-color:var(--cobalt-rule);color:var(--on-cobalt)}
.dock-top.pop .brand{color:var(--on-cobalt)}
.dock-top.pop .navlinks a{color:var(--on-cobalt-2)}
.dock-top.pop .navlinks a b{color:rgba(239,242,251,.6)}
.dock-top.pop .navlinks a:hover,.dock-top.pop .navlinks a.on,
.dock-top.pop .brand:hover{color:var(--on-cobalt)}
.dock-top.pop .navlinks a.on b,.dock-top.pop .navlinks a:hover b{color:#fff}
.dock-top.pop .navlinks a:hover{border-color:var(--cobalt-rule);background:rgba(255,255,255,.08)}
.dock-top.pop .primary{background:var(--on-cobalt);color:var(--cobalt);border-color:var(--on-cobalt)}

.brand{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin-left:-10px;
  color:var(--ink);transition:color .25s;
}
/* THE MARK IS NEVER COBALT. It is white on a dark ground, black on a light one,
   and it does not change colour when a cursor crosses it. This rule used to tint
   it cobalt on hover — and because it sits after .dock-top.dark .brand, it won:
   hovering the logo while the header was over an ink card painted a cobalt mark
   on near-black. The logo is a black ground and a white letter, full stop. */
.brand:hover{color:inherit}

.navlinks{display:flex;margin-left:34px}
/* NEVER WRAP. The link is a flex row — the number, then a bare text node, which
   becomes an anonymous flex item that will happily shrink to its longest word and
   wrap. The box is a fixed 36px, so wrapped text just spills out of it and NOTHING
   MEASURES DIFFERENT: the height cannot move, and scrollWidth reports the shrunken
   width. It looked fine to three separate checks and was broken on screen. */
.navlinks a{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;
  white-space:nowrap;
  border:1px solid transparent;border-radius:var(--r);
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:color .2s,border-color .2s,background .2s;
}
.navlinks a b{font-size:12px;font-weight:600;color:var(--ink-3);transition:color .2s}
.navlinks a:hover{color:var(--ink);border-color:var(--rule);background:rgba(20,22,26,.02)}
.navlinks a:hover b,.navlinks a.on b{color:var(--accent-ink)}
.navlinks a.on{color:var(--ink)}

.navend{display:flex;align-items:center;gap:20px;margin-left:auto}

/* ══ BUTTONS ═══════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 26px;border-radius:var(--r);
  font-size:15.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;
  border:1px solid transparent;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.btn:active{transform:scale(.985)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn.lg{height:58px;padding:0 32px;font-size:16.5px}
.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.primary:hover{background:#000;transform:translateY(-1px)}
.line{color:var(--ink);border-color:var(--rule);background:rgba(255,255,255,.55)}
.line:hover{border-color:rgba(20,22,26,.4);background:#fff;transform:translateY(-1px)}
.endzone .primary{background:var(--on-plate);color:#000;border-color:var(--on-plate)}
.endzone .primary:hover{background:#fff;border-color:#fff}

/* ══ LAYOUT ════════════════════════════════════════════════════════════ */
main{position:relative;z-index:1}
.wrap{width:min(var(--page),calc(100% - 40px));margin-inline:auto;padding-inline:clamp(0px,3.2vw,56px)}
.sec{padding:clamp(88px,12vh,140px) 0}
[id]{scroll-margin-top:100px}

.kicker{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.kicker b{color:var(--accent-ink);font-weight:600;margin-right:9px}
.kicker.num{
  display:flex;align-items:center;
  padding-bottom:18px;margin-bottom:clamp(40px,6vh,68px);
  border-bottom:1px solid var(--rule-soft);
}

/* ══ HERO — flat paper. No wash, no drift, no colour behind the type ══
   A drifting gradient is a glow by another name, and it can only ever end
   at the edge of the section that owns it — which is exactly where the
   seam appears. Sierra's calm comes from the type on the paper, not from
   something breathing behind it. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:150px 0 90px}
.hero .wrap{position:relative;z-index:1}

.hero h1{margin-top:26px;font-size:clamp(48px,8.6vw,124px);line-height:.94;letter-spacing:-.05em}
.say{
  max-width:60ch;margin-top:clamp(28px,4vh,40px);
  font-size:clamp(17px,1.55vw,20.5px);line-height:1.55;color:var(--ink-2);
}
.cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:clamp(32px,4vh,42px)}

.runs-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:clamp(36px,5vh,54px);font-size:13.5px;color:var(--ink-3);
}
.runs-line span{font-weight:600;margin-right:2px}
/* the marks, small. They were the command names set in mono — correct, since a
   command IS code — but a logo is recognised before a word is read, and this line
   is the first promise the page makes. The paths are the SAME ones the wall uses:
   one source, so they can never drift apart. */
.rl-marks{display:inline-flex;align-items:center;gap:12px}
.rl-mark{display:inline-flex;align-items:center}
.rl-mark svg{width:19px;height:19px;display:block}
.runs-line code{
  padding:6px 11px;border:1px solid var(--rule);border-radius:var(--r);
  background:rgba(255,255,255,.6);
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
}
/* each in its own brand colour, exactly as on the wall */
.rl-mark[data-b="claude"] svg{fill:#D97757}
.rl-mark[data-b="openai"] svg{fill:#0F0F10}
.rl-mark[data-b="qwen"]   svg{fill:#615CED}
.rl-mark[data-b="aider"]  svg{fill:none;color:#5B6470}
.runs-line em{font-style:normal}

/* ══ THE WHEEL — Build.inc's device, live line in the accent ═══════════ */
.uses{padding-top:clamp(30px,5vh,60px)}
.uses-h{
  font-size:13px;font-weight:600;color:var(--ink-3);
  padding-bottom:20px;border-bottom:1px solid var(--rule-soft);
}
.wheel{
  height:calc(5 * var(--wi));margin-top:clamp(20px,3vh,36px);overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 33%,#000 67%,transparent);
          mask:linear-gradient(180deg,transparent,#000 33%,#000 67%,transparent);
}
.wheel ul{transition:transform .8s var(--ease);will-change:transform}
.wheel li{
  height:var(--wi);display:flex;align-items:center;
  /* --fs is set by signal.js: it measures the widest phrase and sizes the type
     so it always fits on ONE line. A wrapped item breaks the wheel's rhythm and
     shoves its neighbours out of the window. */
  font-size:var(--fs,clamp(32px,5.6vw,80px));font-weight:700;
  letter-spacing:-.045em;line-height:1;
  color:var(--ink);opacity:.13;
  transition:opacity .65s var(--ease),color .65s var(--ease);
  white-space:nowrap;
}
.wheel li.on{opacity:1;color:var(--accent-ink)}

/* ══ 01 · HOW IT WORKS — three cards with live pictures ════════════════ */
.under{
  max-width:66ch;margin-top:clamp(24px,3.5vh,34px);
  font-size:17.5px;line-height:1.62;color:var(--ink-2);
}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(48px,7vh,80px)}
.step{
  padding:22px 22px 30px;
  border:1px solid var(--rule-soft);border-radius:20px;
  background:#FFFDF9;box-shadow:var(--float);
}
.step .s{display:block;margin:22px 0 10px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.step h3{font-size:clamp(20px,1.9vw,25px);letter-spacing:-.035em;margin-bottom:12px}
.step p{font-size:15.5px;line-height:1.62;color:var(--ink-2)}

.viz{
  border-radius:12px;padding:16px;height:196px;
  display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:linear-gradient(180deg,rgba(20,22,26,.032),rgba(20,22,26,.012)),var(--paper);
  border:1px solid var(--rule-soft);
  overflow:hidden;
}

/* — 01 Connect: the keys land, then the grants light — */
.krow{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:8px;
  background:#fff;border:1px solid var(--rule-soft);
  opacity:0;transform:translateY(8px);
}
.in .krow{animation:pop .5s var(--ease) forwards}
.in .krow:nth-of-type(2){animation-delay:.14s}
.in .krow:nth-of-type(3){animation-delay:.28s}
@keyframes pop{to{opacity:1;transform:none}}
.kname{min-width:0;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kdots{flex:none;margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-2);letter-spacing:1px}
.kled{
  width:7px;height:7px;border-radius:50%;flex:none;background:rgba(20,22,26,.16);
}
.in .kled{animation:led .5s var(--ease) forwards}
.in .krow:nth-of-type(1) .kled{animation-delay:.6s}
.in .krow:nth-of-type(2) .kled{animation-delay:.75s}
.in .krow:nth-of-type(3) .kled{animation-delay:.9s}
@keyframes led{to{background:var(--accent-ink)}}
.kfoot{margin-top:2px;opacity:0}
.in .kfoot{animation:pop .5s var(--ease) 1.05s forwards}
.kgrant{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--accent-ink)}
.kgrant::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-ink)}

/* — 02 Build: the agent works, the files land — */
.bhead{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.bhead .dot{width:7px;height:7px;border-radius:50%;background:rgba(20,22,26,.13)}
.bhead span{margin-left:6px;font-size:11px;font-weight:600;color:var(--ink-2);letter-spacing:.04em}
.in .bhead .dot{animation:blip 1.4s var(--ease) infinite}
.in .bhead .dot:nth-child(2){animation-delay:.18s}
.in .bhead .dot:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,100%{background:rgba(20,22,26,.13)} 40%{background:var(--accent-ink)}}
.bfile{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:8px;
  background:#fff;border:1px solid var(--rule-soft);
  opacity:0;transform:translateX(-10px);
}
.in .bfile{animation:slide .55s var(--ease) forwards}
.in .bfile:nth-of-type(1){animation-delay:.35s}
.in .bfile:nth-of-type(2){animation-delay:.75s}
.in .bfile:nth-of-type(3){animation-delay:1.15s}
@keyframes slide{to{opacity:1;transform:none}}
.bn{min-width:0;font-family:var(--mono);font-size:12px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the same check as the download card, and centred the same way: a mark drawn
   in a viewBox and placed with background-position:center cannot drift. The old
   one was a bordered box spun -45deg, which sat 1.75px above the dot's centre. */
.bok{
  margin-left:auto;flex:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent-ink)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.2' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 9px 9px no-repeat;
}
.bbar{height:4px;border-radius:99px;background:rgba(20,22,26,.07);overflow:hidden;margin-top:4px}
.bbar i{display:block;height:100%;width:0;background:var(--accent-ink);border-radius:99px}
.in .bbar i{animation:fill 1.7s var(--ease) forwards}
@keyframes fill{to{width:100%}}

/* — 03 Ship: the door opens, the team walks in — */
.slink{
  display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:8px;
  background:#fff;border:1px solid var(--rule-soft);
  opacity:0;transform:translateY(8px);
}
.in .slink{animation:pop .55s var(--ease) .2s forwards}
/* the padlock is DRAWN, not built from borders. The old one was a body with
   border-top:0 so the shackle could sit on it — which fused body and shackle
   into one open outline, and beside a URL that shape read as some strange
   click-hand, not a lock. A closed body with a shackle arc, in the same
   stroke language as every other glyph on this site, cannot be misread. */
.lock{
  width:13px;height:13px;flex:none;color:var(--accent-ink);
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.lock.big{width:16px;height:16px;stroke-width:1.6}
/* a flex item defaults to min-width:auto, so a nowrap string will NOT shrink —
   text-overflow:ellipsis never fires, the item shoves its grid track wider than
   the page, and on a narrow phone the whole layout is dragged sideways with it.
   Every long, unbreakable string in a flex row needs min-width:0. */
.sl{
  min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* ── your team, drawn ────────────────────────────────────────────────
   These were five blank gradient discs — the faceless avatar stack every SaaS
   page ships — on a page that talks about your team in every other paragraph and
   never drew one of them.

   They are people now, and they are drawn the way Apple and Slack draw a person:
   NOT with a face. A smiley at 28px is four grey pixels and reads as clipart. It
   is a TIGHT CROP, like a photograph — the head nearly fills the disc, the
   shoulders rise straight to the jaw with no neck showing, and the circle cuts
   everything off at the edge. Three clean bands: hair, skin, garment. The
   silhouette carries the identity — a crop, a bun, coils, long hair, a beard —
   and the tones do the rest. That is why it still reads at 28 pixels. */
.sfaces{display:flex;align-items:center;padding:6px 2px}
.sfaces i{
  width:28px;height:28px;border-radius:50%;flex:none;
  border:2px solid var(--paper);margin-right:-9px;
  opacity:0;transform:translateY(6px) scale(.72);
  overflow:hidden;display:flex;
}
.sfaces i svg{width:100%;height:100%;display:block}
/* the ground each one is cropped against — soft, and out of our own palette */
.sfaces i[data-f="a"]{background:#DDE3F3}
.sfaces i[data-f="b"]{background:#EFE2D2}
.sfaces i[data-f="c"]{background:#E3E7E5}
.sfaces i[data-f="d"]{background:#D9E1F5}
.sfaces i[data-f="e"]{background:#EEE6DB}
/* THEY ARRIVE. They do not pop into existence — each one rises into the stack from
   just below and settles, left to right, with a small overshoot. That reads as a
   person JOINING, which is the sentence the card is making. */
.in .sfaces i{animation:join .5s cubic-bezier(.34,1.44,.42,1) forwards}
.in .sfaces i:nth-child(1){animation-delay:.7s}
.in .sfaces i:nth-child(2){animation-delay:.82s}
.in .sfaces i:nth-child(3){animation-delay:.94s}
.in .sfaces i:nth-child(4){animation-delay:1.06s}
.in .sfaces i:nth-child(5){animation-delay:1.18s}
@keyframes join{to{opacity:1;transform:none}}

/* ONE BEAT, ONCE — and it is the only animation here that MEANS anything.
   The card's sentence is: you publish a link → your team opens it → it is live. So
   the last person to arrive is the one who just opened it, and a single cobalt
   ripple leaves them and fades, a moment before the "live" dot starts beating. Cause,
   then effect. Then the card is still.

   Not a glow, not a loop, not a bobbing head — those are decoration, and decoration
   on a page this quiet reads as noise. A box-shadow, so it escapes the disc's own
   overflow:hidden without a second element to carry it. */
.in .sfaces i:nth-child(5){
  animation:
    join .5s cubic-bezier(.34,1.44,.42,1) 1.18s forwards,
    presence 1.1s var(--ease) 1.95s;
}
@keyframes presence{
  from{box-shadow:0 0 0 0 rgba(36,64,200,.42)}
  to{box-shadow:0 0 0 11px rgba(36,64,200,0)}
}
.scount{margin-left:22px;font-size:12px;font-weight:600;color:var(--ink-2);opacity:0}
.in .scount{animation:pop .5s var(--ease) 1.3s forwards}
.spulse{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--accent-ink);opacity:0}
.in .spulse{animation:pop .5s var(--ease) 1.45s forwards}
.spulse i{width:7px;height:7px;border-radius:50%;background:var(--accent-ink);animation:beat 1.8s var(--ease) infinite}
/* a breath, not a bloom */
@keyframes beat{0%,100%{opacity:1} 50%{opacity:.35}}

/* ══ 02 · THE PLATFORM — the dark plate ════════════════════════════════ */
/* the platform is a black CARD floating on the cream, not a band */
.platform{
  width:min(var(--page),calc(100% - 40px));margin:clamp(40px,6vh,72px) auto;
  background:var(--plate);color:var(--on-plate);
  border-radius:var(--r-card);box-shadow:var(--float-lg);
  padding:clamp(72px,10vh,110px) clamp(28px,4vw,64px) clamp(64px,8vh,92px);
  overflow:hidden;
}
.platform .wrap{width:100%;padding-inline:0}
.platform .kicker{display:flex;align-items:center;color:var(--on-plate-3)}
.platform .kicker b{color:var(--accent)}
.big{font-size:clamp(38px,5.6vw,86px);line-height:.98;letter-spacing:-.048em}
.platform .big{margin-top:24px}
.plate-under{max-width:64ch;margin-top:clamp(26px,3.5vh,36px);font-size:17.5px;line-height:1.62;color:var(--on-plate-2)}
/* ══ STATUS, SET AS TYPE ═══════════════════════════════════════════════
   The rails used to wear status pills — a rounded capsule with a dot,
   "Available now" / "In build", one per card. They read as a dashboard,
   not as a page: the most techy object in the whole design, repeated six
   times. Gone.

   The truth they carried is not optional — a rail that has not shipped may
   never be presented as though it has. So the status becomes the thing that
   ORGANISES the rails instead of decorating them: two groups, each under a
   plain heading, in exactly the type the section labels already use. The
   reader learns the same fact, and the page stops shouting it. */
.railgroup{margin-top:clamp(56px,8vh,92px)}
.railgroup + .railgroup{margin-top:clamp(52px,7vh,84px)}
.railhead{
  display:block;padding-bottom:18px;
  font-size:13px;font-weight:600;letter-spacing:.02em;
}
/* the shipped set wears the accent; the unshipped set stays grey. The words
   already say which is which — the colour only agrees with them. */
.railhead.now{color:var(--accent)}
.railhead.next{color:var(--on-plate-3)}

.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--plate-rule)}
/* Hover belongs to things you can CLICK. A rail, a step card, a logo cell, a
   question, a door panel — none of them are links, so none of them light up
   when a cursor crosses them. A highlight that leads nowhere is a promise the
   page cannot keep. */
.cap{
  padding:40px 48px 44px 0;
  border-bottom:1px solid var(--plate-rule-soft);
}
.cap:nth-child(even){padding-left:48px;padding-right:0;border-left:1px solid var(--plate-rule-soft)}
.cap h3{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:baseline;
  font-size:clamp(23px,2.2vw,31px);letter-spacing:-.035em;
}
.cap .i{font-size:13px;font-weight:600;color:var(--accent)}
.cap .d{margin-top:14px;padding-left:44px;max-width:44ch;font-size:16.5px;line-height:1.55;color:var(--on-plate)}
.cap > ul{margin-top:26px;padding-left:44px;display:flex;flex-direction:column}
.cap > ul li{
  padding:14px 0;border-top:1px solid var(--plate-rule-soft);
  font-size:15px;line-height:1.6;color:var(--on-plate-2);
}
.cap > ul li:first-child{border-top:0;padding-top:0}
.cap > ul li:last-child{padding-bottom:0}

/* ══ 03 · INTERNAL SOFTWARE — the door ═════════════════════════════════ */
.door{
  margin-top:clamp(44px,6vh,68px);
  border:1px solid var(--rule-soft);border-radius:22px;
  background:#FFFDF9;box-shadow:var(--float);overflow:hidden;
}
.door-bar{
  display:flex;align-items:center;gap:12px;padding:20px 24px;
  border-bottom:1px solid var(--rule-soft);
  background:var(--paper);
}
.url{
  min-width:0;
  font-family:var(--mono);font-size:clamp(14px,1.35vw,17px);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.door-live{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;flex:none;
  font-size:13px;font-weight:600;color:var(--accent-ink);
}
.door-live i{width:7px;height:7px;border-radius:50%;background:var(--accent-ink);animation:beat 1.8s var(--ease) infinite}
.door-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.door-body > div{padding:30px 30px 34px;border-right:1px solid var(--rule-soft)}
.door-body > div:last-child{border-right:0}
.door-body h3{font-size:18.5px;letter-spacing:-.03em;margin-bottom:11px}
.door-body p{font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.door-body b{font-weight:600;color:var(--ink)}
.door-note{
  margin-top:26px;max-width:76ch;font-size:15.5px;line-height:1.6;color:var(--ink-3);
}
.door-note b{font-weight:600;color:var(--ink-2)}

/* ══ THE COBALT CARD — the statement ═══════════════════════════════════
   Prime Intellect drops one saturated plate into an otherwise quiet page to
   carry its loudest claim. This is ours, in cobalt, and it is a CARD that
   floats on the cream like every other block. On blue the lettering is
   white — never ink. */
.claim{
  width:min(var(--page),calc(100% - 40px));margin:clamp(40px,6vh,72px) auto;
  background:var(--cobalt);color:#FFFFFF;
  border-radius:var(--r-card);box-shadow:var(--float-lg);
  padding:clamp(80px,11vh,124px) clamp(28px,4vw,64px);
  overflow:hidden;
}
.claim .wrap{width:100%;padding-inline:0}
.claim h2{
  color:#FFFFFF;
  font-size:clamp(38px,5.8vw,88px);line-height:.98;letter-spacing:-.05em;max-width:20ch;
}
.vcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;margin-top:clamp(44px,6vh,72px);max-width:940px}
.vcols p{font-size:17.5px;line-height:1.62;color:rgba(255,255,255,.78)}

/* ══ 04 · YOUR TEAM ════════════════════════════════════════════════════ */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(48px,7vh,76px);border-top:1px solid var(--rule-soft)}
.three article{padding:34px 34px 38px 0;border-bottom:1px solid var(--rule-soft)}
.three article + article{padding-left:34px;border-left:1px solid var(--rule-soft)}
.three h3{font-size:clamp(21px,2vw,27px);letter-spacing:-.035em;margin-bottom:15px}
.three p{font-size:16px;line-height:1.62;color:var(--ink-2)}

/* ══ COMPATIBILITY ═════════════════════════════════════════════════════ */
/* ── the real marks, in their real colours. Parallel's wall, with logos. ── */
.wall{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  margin-top:clamp(40px,5vh,60px);
  border:1px solid var(--rule-soft);border-radius:22px;
  background:#FFFDF9;box-shadow:var(--float);overflow:hidden;
}
.brandcell{
  display:flex;align-items:center;gap:13px;min-height:104px;padding:22px 20px;
  border-right:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);
}
.brandcell:nth-child(5n){border-right:0}
.brandcell:nth-last-child(-n+5){border-bottom:0}
.brandcell svg{width:24px;height:24px;flex:none}
.brandcell b{
  font-size:clamp(14px,1.05vw,16px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);line-height:1.25;
}
/* every mark in its own real brand colour */
.brandcell[data-b="claude"]   svg{fill:#D97757}
.brandcell[data-b="openai"]   svg{fill:#0F0F10}
.brandcell[data-b="cursor"]   svg{fill:#0F0F10}
.brandcell[data-b="grok"]     svg{fill:#0F0F10}
.brandcell[data-b="mistral"]  svg{fill:#FA500F}
.brandcell[data-b="deepseek"] svg{fill:#4D6BFE}
.brandcell[data-b="qwen"]     svg{fill:#615CED}
.brandcell[data-b="copilot"]  svg{fill:#0F0F10}
.brandcell[data-b="opencode"] svg{fill:#0F0F10}
.brandcell[data-b="kimi"]     svg{fill:#0F0F10}
.brandcell[data-b="minimax"]  svg{fill:#E73562}
.brandcell[data-b="llama"]    svg{fill:#9844FF}
/* Aider ships no official mark, so it wears a drawn one rather than a faked one */
.brandcell[data-b="aider"]    svg{fill:none;color:#5B6470}
.brandcell.any{color:var(--accent-ink)}
.brandcell.any svg{stroke:currentColor;fill:none}
.brandcell.any b{color:var(--accent-ink)}
.wall-note{margin-top:26px;max-width:66ch;font-size:16px;line-height:1.6;color:var(--ink-3)}

/* ══ QUESTIONS ═════════════════════════════════════════════════════════ */
.faq{margin:0}
.faq > div{
  display:grid;grid-template-columns:minmax(280px,400px) minmax(0,1fr);gap:48px;
  padding:36px 0;border-bottom:1px solid var(--rule-soft);
}
.faq dt{font-size:clamp(24px,2.5vw,34px);font-weight:700;letter-spacing:-.04em;line-height:1.1}
.faq dd{margin:0;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:58ch}

/* ══ THE CLOSE ═════════════════════════════════════════════════════════ */
/* the close is a black CARD too, and the footer floats beneath it */
/* the close card must float clear of the page edge like every other card —
   the same 20px it is inset at the sides, plus the home-indicator inset on a
   phone. Left at 0 it reads as a band welded to the bottom of the window. */
.endzone{
  width:min(var(--page),calc(100% - 40px));
  margin:clamp(40px,6vh,72px) auto calc(20px + env(safe-area-inset-bottom));
  background:var(--plate);color:var(--on-plate);
  border-radius:var(--r-card);box-shadow:var(--float-lg);
  padding:clamp(80px,12vh,130px) clamp(28px,4vw,64px) clamp(72px,9vh,100px);
  overflow:hidden;
}
.endzone .wrap{width:100%;padding-inline:0}
.close-say{max-width:52ch;margin-top:clamp(26px,3.5vh,34px);font-size:18px;line-height:1.6;color:var(--on-plate-2)}
.endzone .cta{margin-top:clamp(36px,5vh,48px)}
.fine{font-size:14.5px;color:var(--on-plate-3)}

/* #foot carries .wrap, so it must let .wrap decide its width — an id selector
   here (1,0,0) would out-specify .endzone .wrap{width:100%} (0,2,0), blow the
   footer past the card's padding box, and overflow:hidden would silently
   guillotine the © off the right edge. Set the rhythm, never the width:
   inside .endzone it fills the card, on any other page it insets like a wrap. */
/* Centred by LAYOUT, not by rotating a bordered box. The old mark was a 6×3
   border-box spun -45deg with two magic offsets, and it sat 2.5px above the
   circle's centre. A path in a viewBox, centred by flex, cannot drift — and
   because a check's INK is asymmetric (the long arm carries the weight), the
   path itself is nudged by the measured centroid offset, not by eye. */
.tick{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--accent-ink);color:#fff;
}
.tick svg{display:block;width:13px;height:13px}

/* ══ THE CAPTURE ═══════════════════════════════════════════════════════
   A BAND OF THE FOOTER, not a box bolted into a column. The footer is already
   built from full-width bands divided by a hairline — the links, the disclaimer,
   the copyright. The capture is one more, and it uses the footer's own language:
   the same 12.5px label as "Product" and "Company", the same rule, the same
   rhythm. It sits first, because the ask comes before the index.

   The field takes the width it is given. On every page but /download — which IS
   a capture, and would otherwise ask the same question twice, of the same list,
   on the same screen.

   Double opt-in: the form only asks. The click in the mail is the answer, and the
   copy says so. The answer renders exactly where the form was. */
/* AFTER the links, BEFORE the fine print. At the top it shouted before you had
   even seen where you could go; down here it is the last thing you can act on,
   and the boilerplate follows it. Same band, same hairline, same rhythm as the
   disclaimer and the copyright below. */
.foot-keep{
  margin-top:clamp(20px,3vh,30px);
  padding-top:clamp(22px,3vh,26px);
  border-top:1px solid var(--rule-soft);
}
.foot-keep h2{
  margin-bottom:10px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--ink-3);
}
.capture{display:flex;gap:10px}
.capture input{
  flex:1 1 auto;min-width:0;height:48px;padding:0 15px;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
  /* 17px: iOS zooms the page for anything UNDER 16, and 17 is on the type ramp */
  font:400 17px/1 var(--ui);letter-spacing:-.012em;
  outline:none;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.capture input::placeholder{color:var(--ink-3)}
.capture input:focus{border-color:var(--accent-ink);background:#fff}
.capture input:focus-visible{outline:0;border-color:var(--accent-ink)}
.capture input[aria-invalid="true"]{border-color:#A32E22}
.capture .btn{flex:none;height:48px;padding:0 26px}
.capture-err{margin-top:11px;font-size:14px;line-height:1.5;font-weight:500;color:#A32E22}
.capture-ok{
  display:flex;align-items:center;gap:10px;
  min-height:48px;font-size:15px;line-height:1.55;color:var(--ink-2);
}

@media (max-width:640px){
  .capture{flex-direction:column}
  .capture .btn{width:100%}
  .capture-ok{align-items:flex-start;min-height:0}
}

/* ══ FOOTER — one card, shared by every page ═══════════════════════════
   The zone stays TRANSPARENT so the footer always sits on the same cream as
   the block above it. A footer that paints its own ground makes a band, and a
   band makes a seam. The card floats; the ground never changes. */
.foot-zone{
  background:transparent;
  margin-top:clamp(56px,8vh,88px);
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
}
.dock-foot{
  border:1px solid var(--rule-soft);border-radius:var(--r-lg);
  background:#FFFDF9;color:var(--ink);box-shadow:var(--float);
  padding:clamp(26px,3vw,36px) clamp(24px,3vw,36px) 24px;
}
.dock-foot .mark{color:var(--ink)}          /* black letter on the cream card — never cobalt */
.foot-cols{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,3vw,40px);
}
.foot-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:-8px}
.foot-lead p{margin-top:6px;max-width:28ch;font-size:14.5px;line-height:1.55;color:var(--ink-3)}
.f-name{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fcol{display:flex;flex-direction:column}
.fcol h2{
  margin-bottom:4px;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--ink-3);
}
/* every footer link is a real 44px target — this is the one place a phone
   thumb has to hit small type */
.fcol a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:14.5px;color:var(--ink-2);transition:color .2s;
}
.fcol a:hover{color:var(--ink)}
.foot-disc{
  margin-top:clamp(20px,3vh,30px);padding-top:20px;
  border-top:1px solid var(--rule-soft);
  font-size:11.5px;line-height:1.65;color:var(--ink-3);
}
.foot-base{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-soft);
}
.foot-copy{font-size:13px;color:var(--ink-3)}
.gap{flex:1}

/* ══ REVEAL ════════════════════════════════════════════════════════════ */
.js .rise{opacity:0;transform:translateY(22px)}
.rise{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.08s}
.rise[data-d="2"]{transition-delay:.16s}

/* ══ ENTRANCES — the type sets itself, the page draws its own lines ═════
   Three devices, all inside the page's laws: nothing glows, nothing sits
   behind the type, hover stays on clickables, and every one of them holds
   its finished state under reduced motion.

   · MASKED LINES — Sierra, Poetic. The two display statements (the hero,
     the close) rise line by line from behind their own baseline instead of
     fading in as a block: the type is SET, not faded. The hero's tracking
     settles as it lands — and it settles OUTWARD, from tighter to its set
     -.05em, never from looser: a looser start can wrap where the set line
     does not, and the mask would jump.
   · DRAWN RULES — ours. The hairlines the page is built from draw
     themselves left to right as each section arrives. No new element: the
     border the rule already owns goes quiet under .js and a 1px pseudo
     draws in its exact place, so without JavaScript the plain border
     simply stays.
   · CASCADES — Pluto, extended. The four marks in the hero's runs-line
     and the cells of the brand wall arrive one after another, not as one
     slab. 60ms and 30ms apart: a pulse, not a parade. */
.lines .l{display:block;overflow:hidden;
  /* line-height .92–.98 is tighter than the em box, so a bare mask cuts the
     descender off "your" and "missing." — give the mask reach below the
     baseline and take the same space back, so the block's height is exactly
     what the <br> version measured */
  padding-bottom:.12em;margin-bottom:-.12em}
.lines .li{display:block}
.js .lines .li{transform:translateY(120%);transition:transform .9s var(--ease)}
.js .lines.in .li{transform:none}
.js .lines .l:nth-child(2) .li{transition-delay:.09s}
.js .hero h1.lines{transition:letter-spacing .9s var(--ease)}
.js .hero h1.lines:not(.in){letter-spacing:-.062em}

.drawline{position:relative}
.js .drawline{border-color:transparent}
.js .drawline::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--line,var(--rule-soft));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease) .12s;
}
.js .drawline.top::after{top:-1px;bottom:auto}
.grid.drawline{--line:var(--plate-rule)}
.js .in .drawline::after,.js .drawline.in::after{transform:scaleX(1)}

/* the marks step in after the runs-line lands, in reading order */
.js .runs-line .rl-mark{opacity:0;transform:translateY(5px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .runs-line.in .rl-mark{opacity:1;transform:none}
.js .runs-line.in .rl-mark:nth-child(1){transition-delay:.5s}
.js .runs-line.in .rl-mark:nth-child(2){transition-delay:.56s}
.js .runs-line.in .rl-mark:nth-child(3){transition-delay:.62s}
.js .runs-line.in .rl-mark:nth-child(4){transition-delay:.68s}

/* the wall arrives cell by cell, in reading order at every column count */
.js .stagger .brandcell{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .stagger.in .brandcell{opacity:1;transform:none}
.js .stagger.in .brandcell:nth-child(2){transition-delay:.03s}
.js .stagger.in .brandcell:nth-child(3){transition-delay:.06s}
.js .stagger.in .brandcell:nth-child(4){transition-delay:.09s}
.js .stagger.in .brandcell:nth-child(5){transition-delay:.12s}
.js .stagger.in .brandcell:nth-child(6){transition-delay:.15s}
.js .stagger.in .brandcell:nth-child(7){transition-delay:.18s}
.js .stagger.in .brandcell:nth-child(8){transition-delay:.21s}
.js .stagger.in .brandcell:nth-child(9){transition-delay:.24s}
.js .stagger.in .brandcell:nth-child(10){transition-delay:.27s}
.js .stagger.in .brandcell:nth-child(11){transition-delay:.3s}
.js .stagger.in .brandcell:nth-child(12){transition-delay:.33s}
.js .stagger.in .brandcell:nth-child(13){transition-delay:.36s}
.js .stagger.in .brandcell:nth-child(14){transition-delay:.39s}
.js .stagger.in .brandcell:nth-child(15){transition-delay:.42s}

/* ══ THE CLAIM BRIGHTENS AS IT IS READ ═════════════════════════════════
   signal.js wraps the cobalt card's words and feeds --p (0 → 1) from the
   card's place in the viewport, so the sentence lights word by word UNDER
   THE READER'S OWN SCROLL — and dims back if they scroll away. Each word
   ramps over a three-word window, so the light has a soft trailing edge.
   A resting word is 35% white: visibly there, clearly unread. Reduced motion
   never wraps the words, so the sentence stays full white. */
.claim h2 .w{opacity:clamp(.35,calc((var(--p,0)*(var(--n,8) + 3) - var(--i,0))/3),1)}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width:1180px){
  .navlinks{margin-left:20px}
  .navlinks a{padding:0 11px}
}
@media (max-width:1040px){
  .navlinks{display:none}
  .grid{grid-template-columns:minmax(0,1fr)}
  .cap,.cap:nth-child(even){padding:32px 0;border-left:0}
  .steps{grid-template-columns:minmax(0,1fr);gap:14px}
  .vcols{grid-template-columns:minmax(0,1fr);gap:22px}
  /* three across. 15 cells → five clean rows, and the LAST ROW IS THREE — the old
     rule said two, which left a stray hairline under the cell beside it. */
  .wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brandcell:nth-child(5n){border-right:1px solid var(--rule-soft)}
  .brandcell:nth-child(3n){border-right:0}
  .brandcell:nth-last-child(-n+5){border-bottom:1px solid var(--rule-soft)}
  .brandcell:nth-last-child(-n+3){border-bottom:0}
  .three{grid-template-columns:minmax(0,1fr)}
  .three article,.three article + article{padding:28px 0;border-left:0;padding-left:0}
  .faq > div{grid-template-columns:minmax(0,1fr);gap:14px}
  .door-body{grid-template-columns:minmax(0,1fr)}
  .door-body > div{border-right:0;border-bottom:1px solid var(--rule-soft);padding:26px 24px}
  .door-body > div:last-child{border-bottom:0}
}
@media (max-width:760px){
  .dock-top{padding:0 8px 0 16px;top:12px;height:56px;border-radius:14px}
  .navend{gap:14px}
  .btn-sm{height:44px}
  .dock-top.stuck{width:calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))}
  .hero{padding:112px 0 60px;min-height:auto}
  .hero h1{font-size:clamp(38px,10.4vw,58px);line-height:1.02}
  .wide-br{display:none}
  .say{font-size:17px}
  .cta{flex-direction:column;align-items:stretch;width:100%}
  .cta .btn{width:100%}
  .cap .d,.cap > ul{padding-left:0}
  .cap h3{padding-right:0}
  .door-bar{flex-wrap:wrap;gap:10px;padding:18px 20px}
  .url{font-size:13px;width:100%;order:2}
  .door-live{margin-left:0;order:3}
  .lock{order:1}
  .claim h2{font-size:clamp(32px,9vw,46px)}
  /* TWO across, not one. Fifteen logos stacked in a single column is a thousand
     pixels of scrolling — a whole extra screen of the same thing. Two columns halve
     it, and the open door takes the bottom row to itself, so its long label has the
     full width and never wraps into a ragged cell. */
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px}
  .brandcell{min-height:70px;padding:18px 16px;gap:11px}
  .brandcell:nth-child(5n),.brandcell:nth-child(3n){border-right:1px solid var(--rule-soft)}
  .brandcell:nth-child(2n){border-right:0}
  .brandcell:nth-last-child(-n+5),.brandcell:nth-last-child(-n+3){border-bottom:1px solid var(--rule-soft)}
  .brandcell.any{grid-column:1 / -1;border-right:0;border-bottom:0}
  .brandcell:nth-child(n){border-right:0;border-bottom:1px solid var(--rule-soft)}
  .brandcell:last-child{border-bottom:0}
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:18px}
  .foot-lead p{max-width:none}
  .endzone .cta{align-items:center}
  .fine{text-align:center}
}

/* ══ CALM ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .rise{opacity:1;transform:none}
  /* the entrances hold their finished state too: lines set, rules drawn,
     marks and cells in place, the claim fully lit */
  .js .lines .li{transform:none}
  .js .hero h1.lines:not(.in){letter-spacing:-.05em}
  .js .drawline::after{transform:none}
  .js .runs-line .rl-mark,.js .stagger .brandcell{opacity:1;transform:none}
  .claim h2 .w{opacity:1 !important}
  /* the card pictures still show their finished state */
  .krow,.bfile,.slink,.kfoot,.scount,.spulse,.sfaces i{opacity:1 !important;transform:none !important}
  .kled{background:var(--accent-ink) !important}
  .bbar i{width:100% !important}
}

:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.platform :focus-visible,.endzone :focus-visible{outline-color:var(--accent)}
::selection{background:rgba(36,64,200,.18)}