: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);
  --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 or drift behind the type ═════════════ */
.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}

/* ══ 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:1;transform:none;
}
.js .krow{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:var(--accent-ink);
}
.js .kled{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:1}
.js .kfoot{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:var(--accent-ink)}
.js .bhead .dot{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 .34s var(--ease) forwards}
.in .bhead .dot:nth-child(1){animation-delay:.22s}
.in .bhead .dot:nth-child(2){animation-delay:.4s}
.in .bhead .dot:nth-child(3){animation-delay:.58s}
@keyframes blip{to{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:1;transform:none;
}
.js .bfile{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 exact Lucide Check geometry used by the status cards, centred in the
   circle at the compact 9px role. */
.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' fill='none' stroke='%23fff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%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:100%;background:var(--accent-ink);border-radius:99px}
.js .bbar i{width:0}
.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:1;transform:none;
}
.js .slink{opacity:0;transform:translateY(8px)}
.in .slink{animation:pop .55s var(--ease) .2s forwards}
/* Lucide LockKeyhole identifies the protected Team URL without becoming brand. */
.lock{
  width:13px;height:13px;flex:none;color:var(--accent-ink);
}
.lock.big{width:16px;height:16px}
/* 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:1;transform:none;
  overflow:hidden;display:flex;
}
.js .sfaces i{opacity:0;transform:translateY(6px) scale(.72)}
.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. The card's sentence is: you share the Workspace → the
   authorized team joins. The last person to arrive carries one cobalt ripple;
   then the entire 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:1}
.js .scount{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:1}
.js .spulse{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)}

/* ══ 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)}
.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)}
/* ══ THE COBALT CARD — the statement ═══════════════════════════════════ */
.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{
  --brandcell-first-line-h:20px;
  display:flex;align-items:flex-start;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;margin-top:calc((var(--brandcell-first-line-h) - 24px)/2)}
.brandcell b{
  font-size:clamp(14px,1.05vw,16px);font-weight:600;letter-spacing:-.02em;
  color:var(--ink);line-height:var(--brandcell-first-line-h);
}
/* 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.35 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 .btn[aria-busy="true"]{cursor:wait}
.capture-err{margin-top:11px;font-size:14px;line-height:1.5;font-weight:500;color:#A32E22}
.capture-ok{display:flex;align-items:flex-start;gap:10px;min-height:48px;font-size:15px;line-height:22px;color:var(--ink-2);}

@media (max-width:640px){.capture{flex-direction:column}.capture .btn{width:100%}.capture-ok{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}