/* ==========================================================================
   Kite Slip
   ------------------------------------------------------------------------
   Type      General Sans (display + body) / IBM Plex Mono (field labels, data)
   Colour    Warm near-black canvas, one interface accent (canary).
             Rust appears ONLY as the "did not verify" state.
             Paper stocks (white / yellow / pink) are object colours: they
             belong to rendered documents, never to interface chrome.
   Radius    pill = interactive · 10px = chips, stamps, inputs
             24px = cards · 34px = large panels and the page canvas
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "General Sans";
  src: url(assets/fonts/GeneralSans-Variable.woff2) format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(assets/fonts/IBMPlexMono-400-latin.woff2) format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(assets/fonts/IBMPlexMono-500-latin.woff2) format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url(assets/fonts/IBMPlexMono-600-latin.woff2) format("woff2");
  font-weight: 600; font-display: swap;
}

/* --------------------------------------------------------------- tokens */
:root {
  /* Four steps of near-black, spaced far enough apart to actually read as
     separate slabs. The old ramp moved 4/255 between canvas and panel, which
     is invisible; these move ~15/255 a step, the same spread the reference
     uses to give a long dark page its rhythm. */
  --ink:        #060605;   /* page gutter behind the canvas */
  --canvas:     #0B0B0A;   /* the page */
  --panel:      #1A1917;   /* hero, verification, close; perf notches match it */
  --surface:    #212020;   /* cards, ledger, tiers */
  --recess:     #131211;   /* insets that sit inside a surface */

  --line:       rgb(244 241 234 / .10);
  --line-2:     rgb(244 241 234 / .38);

  --text:       #F4F1EA;
  --text-2:     #ABA69B;
  --text-3:     #979086;   /* lifted with the surfaces: 5.1:1 on --surface */
  /* The dimmed hero headline line only. It is the one piece of type that sits
     on the plate rather than on a token colour, and the plate's sky is the
     lightest surface on the page: --text-2 measures 2.66:1 there, under the
     3:1 large-text floor. This measures 4.33:1 on the same pixels. */
  --text-plate: #D8D3C9;

  --canary:     #E9CE63;   /* the one interface accent */
  --canary-ink: #17140A;
  --rust:       #D97355;   /* semantic: unresolved / withheld only */

  --paper:        #F2EDE2; /* object colours: carbon-copy stocks */
  --paper-yellow: #EBD98E;
  --paper-pink:   #EDC9C6;
  --paper-ink:    #191510;
  --paper-ink-2:  #5C5346;

  --r-chip: 10px;
  --r-card: 24px;
  --r-panel: 34px;

  --nav-h:   74px;
  --nav-top: 10px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --gap: clamp(14px, 1.4vw, 18px);
  --sec: clamp(84px, 10vw, 148px);

  --sans: "General Sans", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  padding: 8px;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; border-radius: 999px;
  background: var(--canary); color: var(--canary-ink); font-weight: 500;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--canary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* anchor targets clear the fixed nav */
#main, .how, .does, .verify, .pricing, .close,
.step-sec, .guarantee, .whois, .qa, .lanes, .step-sec__head--mid {
  scroll-margin-top: calc(var(--nav-h) + var(--nav-top) + 22px);
}
main:focus { outline: none; }

/* ---------------------------------------------------------------- shell */
.canvas {
  background: var(--canvas);
  border-radius: var(--r-panel);
  overflow: hidden;
  position: relative;
  /* The nav is fixed and out of flow. The clearance used to be reserved here,
     which pushed the whole page down and left a band of canvas above the hero.
     The hero now runs to the top edge and carries that padding internally, so
     the bar floats over the media the way the reference does. */
}
.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* ----------------------------------------------------------- typography */
.mono {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.028em;
  max-width: 20ch;
}
.h2--lead { max-width: 21ch; }
.lede {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
}
.rule {
  display: block;
  width: 46px; height: 2px;
  background: var(--canary);
  margin-bottom: 30px;
}

/* -------------------------------------------------------------- logotype
   Inlined into the sprite so the mark inherits currentColor and needs no
   extra request. Source: kiteslip_logo.svg, background plate removed. */
.logo { display: block; fill: currentColor; }
.logo--lockup { width: 84px; height: 30px; }
.logo--mark   { width: 38px; height: 62px; }
.foot .logo--lockup { width: 72px; height: 26px; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              transform .12s var(--ease), color .22s var(--ease);
}
.btn .ico { font-size: .95em; }
.btn--accent { background: var(--canary); color: var(--canary-ink); }
.btn--accent:hover { background: #F2DA7E; }
.btn--ghost { border-color: var(--line-2); color: var(--text); }
.btn--ghost:hover { border-color: var(--canary); color: var(--canary); }
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 54px; padding: 15px 28px; font-size: 1rem; }
.btn--block { display: flex; width: 100%; white-space: normal; }

/* ------------------------------------------------------------------ nav
   Fixed, not sticky. It used to be sticky inside .canvas, and because that
   element clips its overflow it becomes the scroll container the nav sticks
   to, so the bar scrolled away with the page. Fixed to the viewport is both
   the literal ask and immune to that. */
.nav-wrap {
  position: fixed; inset: var(--nav-top) 0 auto; z-index: 50;
  padding-inline: clamp(12px, 3vw, 28px);
  pointer-events: none;                    /* the gutter beside the bar stays clickable */
}
/* only the pill and the open menu take pointer events. Putting this on
   .nav-wrap > * instead would re-arm the full-width <nav>, which spans the
   whole strip and would swallow clicks either side of the bar. */
.nav, .menu { pointer-events: auto; }
.nav {
  display: flex; align-items: center; gap: 22px;
  max-width: 1100px; margin-inline: auto;
  height: var(--nav-h);
  padding: 0 12px 0 28px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(26 25 23 / .78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
/* once the page has moved, the bar sits over content and needs to hold its own */
.is-scrolled .nav {
  background: rgb(26 25 23 / .94);
  border-color: rgb(244 241 234 / .14);
  box-shadow: 0 14px 44px -20px rgb(0 0 0 / .95);
}
.nav__brand { display: flex; align-items: center; flex: none; min-height: 44px; }
.nav__links {
  display: flex; align-items: center; gap: 4px;
  margin-inline: auto;
}
.nav__links a {
  display: block;
  padding: 13px 16px;
  border-radius: 999px;
  font-size: .975rem;
  color: var(--text-2);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav__links a:hover { color: var(--text); background: rgb(244 241 234 / .06); }
.nav__cta { flex: none; min-height: 50px; padding: 12px 24px; font-size: .9375rem; }

.nav__toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 50px; height: 50px; margin-left: auto;
  border: 1px solid var(--line); border-radius: 999px;
  background: none; font-size: 1.35rem; cursor: pointer;
}
.nav__toggle .ico--close { display: none; }
.nav__toggle[aria-expanded="true"] .ico--open { display: none; }
.nav__toggle[aria-expanded="true"] .ico--close { display: block; }

.menu {
  max-width: 1100px; margin: 8px auto 0;
  padding: 12px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: rgb(26 25 23 / .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.menu[hidden] { display: none; }
.menu a:not(.btn) {
  display: flex; align-items: center; min-height: 50px;
  padding: 0 12px; border-radius: 12px;
  color: var(--text-2);
}
.menu a:not(.btn):hover { color: var(--text); background: rgb(244 241 234 / .06); }
.menu .btn { margin-top: 8px; }

/* --------------------------------------------------- halftone dot fields */
.field-dots {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(currentColor 1px, transparent 1.1px);
  background-size: 13px 13px;
}

/* ----------------------------------------------------------------- hero
   A tall media panel with the type sitting on the floor of it and the nav
   pill floating over the top, which is why .canvas gives up its nav
   clearance and the hero carries that padding itself. */
.hero {
  position: relative;
  isolation: isolate;                 /* keeps the media stack off the nav */
  display: flex;
  min-height: clamp(560px, calc(100vh - 26px), 940px);
  min-height: clamp(560px, calc(100svh - 26px), 940px);  /* svh dodges the URL bar */
  margin: 10px clamp(8px, 1.2vw, 14px) 0;
  padding: calc(var(--nav-h) + var(--nav-top) + 30px) 0 clamp(22px, 2.6vw, 36px);
  border-radius: var(--r-panel);
  background: var(--panel);
  overflow: hidden;
}

/* --- the media stack: plate, scrim, halftone ---------------------------- */
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__vid {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  /* The plate is bright, sunlit and, untreated, reads as exactly the stock
     footage this page is meant to avoid. Pulled most of the way to monochrome
     and warmed back toward the page's paper stocks, it becomes texture. Held
     above 0.7 brightness: darker than this and the kite disappears, which
     costs the panel the only thing it is there to say. */
  filter: grayscale(.5) sepia(.15) saturate(1.15) contrast(1.02) brightness(.74);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgb(6 6 5 / .46) 0%,  rgb(6 6 5 / 0) 54%),
    linear-gradient(to top,
      rgb(6 6 5 / .92)  0%,           /* the floor the type stands on */
      rgb(6 6 5 / .66) 15%,
      rgb(6 6 5 / .26) 36%,
      rgb(6 6 5 / .06) 60%,
      rgb(6 6 5 / .44) 100%);         /* top edge closes back under the nav */
}
/* The fine grid is the dot-matrix print. The coarse canary wash over the top
   right is the same motif the statement and close panels carry. */
.hero__field {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(6 6 5 / .42) 1px, transparent 1.15px);
  background-size: 5px 5px;
}
.hero__field::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgb(233 206 99 / .16) 1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(120% 95% at 88% 12%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 95% at 88% 12%, #000 0%, transparent 68%);
}

/* --- the type, on the floor of the panel -------------------------------- */
.hero__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(30px, 3.6vw, 48px);
}
.hero__h1 {
  max-width: 34ch;
  font-size: clamp(2.15rem, 4.1vw, 3.55rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 500;
  /* A tight halo plus a wide one. The dimmed second line is the weakest pair
     on the page: it can land on open sky, which is the lightest thing the
     plate ever shows, and the halo is what holds it there. */
  text-shadow: 0 1px 1px rgb(6 6 5 / .45), 0 0 24px rgb(6 6 5 / .8),
               0 2px 46px rgb(6 6 5 / .6);
}
.hero__h1 .ln { display: block; }
.hero__h1 .ln--dim { color: var(--text-plate); }

.hero__foot { display: grid; gap: 12px; }
.hero__card {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgb(11 11 10 / .70);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
          backdrop-filter: blur(18px) saturate(1.1);
}
.hero__card p {
  color: var(--text-2);
  font-size: .9375rem;
  line-height: 1.56;
  max-width: 40ch;
}
.hero__explore {
  display: inline-flex; align-items: center; gap: 11px;
  min-height: 44px;
  margin-top: 14px;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 500;
  transition: color .22s var(--ease);
}
.ico--down { transform: rotate(90deg); transition: transform .25s var(--ease); }
.hero__explore:hover { color: var(--canary); }
.hero__explore:hover .ico--down { transform: rotate(90deg) translateX(3px); }

/* ------------------------------------------------- the kite slip object
   The tear-line notches are bitten out with two circles filled in whatever
   the slip is lying on, so the surface colour is a variable rather than a
   hard-coded panel value. It now lies on the canvas, inside How it works. */
.slip {
  --notch: var(--canvas);
  margin: 0;
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 28px 70px -30px rgb(0 0 0 / .85), 0 2px 0 rgb(0 0 0 / .25);
  overflow: hidden;
}
.slip__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 13px 22px;
  border-bottom: 1px solid rgb(25 21 16 / .16);
  color: var(--paper-ink-2);
}
.route { display: flex; gap: 6px; }
.route li {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgb(25 21 16 / .22);
  border-radius: var(--r-chip);
  font-family: var(--mono);
  font-size: .625rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--paper-ink-2);
}
.route .is-on {
  background: var(--paper-ink); border-color: var(--paper-ink); color: var(--paper);
}
.slip__body { padding: 17px 22px 21px; }
.lab { display: block; color: var(--paper-ink-2); }
.slip__q {
  margin-top: 12px;
  font-size: 1.125rem;
  line-height: 1.45;
  letter-spacing: -.012em;
}

/* the tear line: dashes across, notches bitten out of both edges */
.perf { position: relative; height: 0; }
.perf__line {
  position: absolute; left: 0; right: 0; top: -1px;
  height: 2px;
  background-image: repeating-linear-gradient(
    to right, rgb(25 21 16 / .34) 0 7px, transparent 7px 14px);
}
.perf::before, .perf::after {
  content: ""; position: absolute; top: -9px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--notch);
}
.perf::before { left: -9px; }
.perf::after  { right: -9px; }

.slip__ans {
  padding: 19px 22px 20px;
  background: #E4DCCB;                    /* the carbon underneath */
  border-top: 1px solid rgb(25 21 16 / .06);
}
.slip__ans p {
  margin-top: 11px;
  font-size: .9375rem;
  line-height: 1.55;
}
.cites { margin-top: 14px; display: grid; gap: 6px; }
.cite {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-chip);
  background: rgb(255 255 255 / .55);
  font-size: .8125rem;
  line-height: 1.35;
}
.cite .ico { font-size: 13px; color: #2F6B4F; }
.cite__tag { color: var(--paper-ink-2); font-size: .625rem; }
.cite.is-out {
  background: rgb(210 102 74 / .13);
  color: #8A3520;
  text-decoration: line-through;
  text-decoration-color: rgb(138 53 32 / .5);
}
.cite.is-out .ico { color: #8A3520; }
.cite.is-out .cite__tag { color: #8A3520; text-decoration: none; }

/* the slip as the outcome of step four, lying on the canvas under the list */
.slip--out {
  max-width: 720px;
  margin: clamp(34px, 4.5vw, 56px) 0 0;
}

/* ------------------------------------------------------- section heads
   Every head used to be a 544px column inside a 1240px container with the
   remaining 700px empty, down the whole page. This puts a counterweight in
   that column. It collapses to a single stack below 900px. */
.sec-head { display: grid; gap: clamp(30px, 4vw, 44px); }

/* ------------------------------------------------------------ statement */
.statement { padding-block: var(--sec); }
.statement__grid { display: grid; gap: clamp(34px, 4vw, 56px); }
.statement__p {
  max-width: 30ch;
  font-size: clamp(1.5rem, 3.1vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -.024em;
  font-weight: 400;
}
.statement__p + .statement__p { margin-top: .58em; }

/* The block runs scene, turn, product. The first two are the display type; the
   product line drops a full step so the loud part of the passage is the problem
   and the quiet part is the fix. Without the step down, three paragraphs at
   2.35rem run past 500px and the counterweight has nothing to sit against. */
.statement__turn {
  max-width: 38ch;
  margin-top: clamp(26px, 2.8vw, 36px);
  font-size: clamp(1.125rem, 1.9vw, 1.4375rem);
  line-height: 1.42;
  letter-spacing: -.014em;
}

/* the halftone as an object, not a wash */
.dotblock {
  align-self: center;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);   /* same step off the canvas as .where */
}
.dotblock__field {
  display: block;
  aspect-ratio: 1.35 / 1;
  color: rgb(233 206 99 / .5);
  background-image: radial-gradient(currentColor 1.15px, transparent 1.25px);
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(105% 105% at 4% 4%, #000 0%, transparent 78%);
          mask-image: radial-gradient(105% 105% at 4% 4%, #000 0%, transparent 78%);
}

/* ---------------------------------------------------------- how it works */
.how { padding-bottom: var(--sec); }

/* the routing card: the headline's count, drawn as form boxes */
.where {
  align-self: end;
  padding: clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.where__cap { display: block; color: var(--text-3); margin-bottom: 18px; }
.where__rows { display: grid; gap: 10px; }
.where__rows li {
  display: grid; grid-template-columns: 16px 18px minmax(0, 1fr);
  align-items: center; gap: 12px;
}
.where__n { color: var(--text-3); }
.where__box {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  font-size: 11px;
}
.where__box .ico { opacity: 0; }
.where__lab { color: var(--text-2); }
.where .is-in .where__box {
  border-color: var(--canary);
  background: var(--canary);
  color: var(--canary-ink);
}
.where .is-in .where__box .ico { opacity: 1; }
.where .is-in .where__lab { color: var(--canary); }

.steps { margin-top: clamp(38px, 4.5vw, 58px); max-width: 980px; }
.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start; gap: clamp(14px, 2vw, 28px);
  padding: clamp(22px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__n { color: var(--text-3); padding-top: 5px; }
.step__txt h3 {
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -.018em;
}
.step__txt p {
  margin-top: 8px; max-width: 58ch;
  color: var(--text-2); font-size: .9375rem;
}
.tag {
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-3);
  white-space: nowrap;
}
.tag--in {
  background: var(--canary); border-color: var(--canary); color: var(--canary-ink);
}

/* ---------------------------------------------------------- what it does */
.does { padding-bottom: var(--sec); }

/* The refusal list borrows the numbered-item component from the guarantee
   panel on hold.html rather than growing its own. Same job in both places: a
   short list of commitments that each need room to be read once, carefully. */
.refuse { padding-bottom: var(--sec); }
.refuse .caveat { margin-top: clamp(38px, 4.5vw, 56px); }

.bento {
  margin-top: clamp(38px, 4.5vw, 58px);
  display: grid; gap: var(--gap);
}
.cell {
  position: relative;
  padding: clamp(26px, 2.8vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.cell:hover { border-color: var(--line-2); }
.cell__txt { position: relative; z-index: 1; }
.cell h3 {
  font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  line-height: 1.22; letter-spacing: -.02em;
  max-width: 18ch;
}
.cell p {
  margin-top: 12px; max-width: 40ch;
  color: var(--text-2); font-size: .9375rem;
}

/* lead cell carries a rendered page index */
.index {
  position: relative;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--recess);
}
.index__cap { display: block; color: var(--text-3); margin-bottom: 14px; }
.index ul { display: grid; gap: 2px; }
.index li {
  display: grid; grid-template-columns: 68px minmax(0, 1fr);
  gap: 14px; align-items: baseline;
  padding: 8px 10px; border-radius: 9px;
  font-size: .875rem; color: var(--text-2);
}
.index li:nth-child(odd) { background: rgb(244 241 234 / .035); }
.index li .mono { color: var(--canary); font-size: .6875rem; letter-spacing: .06em; }

/* dotted cell: the halftone gets a band of its own, clear of the copy */
.cell--dots { padding-bottom: clamp(64px, 7vw, 96px); }
.cell--dots::after {
  content: ""; position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
  color: rgb(233 206 99 / .4);
  background-image: radial-gradient(currentColor 1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(115% 105% at 102% 108%, #000 0%, transparent 76%);
          mask-image: radial-gradient(115% 105% at 102% 108%, #000 0%, transparent 76%);
}

/* paper cell: the one block on the page that commits fully to a stock,
   sized and set so it reads as a sheet of colour rather than a tinted card */
.cell--paper {
  display: flex; align-items: flex-end;
  min-height: clamp(240px, 26vw, 320px);
  padding: clamp(30px, 3.2vw, 42px);
  background: var(--paper-yellow);
  border-color: transparent;
  color: var(--paper-ink);
}
.cell--paper h3 {
  font-size: clamp(1.4375rem, 2.35vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -.026em;
  max-width: 15ch;
}
.cell--paper p { color: rgb(25 21 16 / .72); }
.cell--paper:hover { border-color: transparent; }

/* --------------------------------------------------------- verification */
.verify {
  position: relative;
  margin: 0 clamp(8px, 1.2vw, 14px);
  padding-block: clamp(72px, 8.5vw, 124px) clamp(64px, 7vw, 96px);
  border-radius: var(--r-panel);
  background: var(--panel);
  overflow: hidden;
}
.verify__field {
  position: absolute; inset: 0;
  color: rgb(244 241 234 / .15);
  background-image: radial-gradient(currentColor 1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(85% 70% at 12% 6%, #000 0%, transparent 70%);
          mask-image: radial-gradient(85% 70% at 12% 6%, #000 0%, transparent 70%);
  pointer-events: none;
}
.verify__inner { position: relative; }

.ledger {
  position: relative;
  margin-top: clamp(40px, 4.5vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
}
.ledger__head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
}
.ledger__src { color: var(--canary); }
.row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1.25fr) minmax(0, 1fr) 92px;
  align-items: center; gap: clamp(12px, 1.8vw, 22px);
  padding: clamp(15px, 1.8vw, 19px) clamp(18px, 2.2vw, 28px);
}
.row + .row { border-top: 1px solid var(--line); }
.row__ico { font-size: 16px; color: #7FB79A; }
.row__case { font-size: 1rem; letter-spacing: -.012em; }
.row__cite { color: var(--text-2); font-size: .75rem; letter-spacing: .04em; text-transform: none; }
.row__state { color: var(--text-3); text-align: right; }

.row--out { background: rgb(210 102 74 / .07); }
.row--out .row__ico,
.row--out .row__case,
.row--out .row__cite,
.row--out .row__state { color: var(--rust); }
.row--out .row__case { text-decoration: line-through; text-decoration-color: rgb(210 102 74 / .55); }

.stamp {
  position: absolute; right: clamp(18px, 2.4vw, 30px); bottom: 12px;
  padding: 7px 13px;
  border: 2px solid var(--rust); border-radius: var(--r-chip);
  color: var(--rust);
  font-size: .8125rem; font-weight: 600; letter-spacing: .2em;
  transform: rotate(-9deg);
  opacity: .95;
  pointer-events: none;
}
/* The WITHHELD stamp is pinned to the panel's bottom-right, which is this
   row. Reserve the height it occupies so the note can never run underneath
   it — the old copy only cleared it by being short enough to end early. */
.ledger__foot {
  padding: 16px clamp(18px, 2.2vw, 28px) 62px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: .9375rem;
}

/* Set as a form annotation across the full panel width rather than a narrow
   block stranded in the left column. The label keeps its own column, the way
   a printed caveat sits beside the clause it qualifies. */
.caveat {
  margin-top: 26px;
  padding: 24px 28px;
  border-left: 2px solid var(--canary);
  border-radius: 0 var(--r-chip) var(--r-chip) 0;
  background: var(--surface);
}
.caveat .lab { color: var(--canary); margin-bottom: 10px; }
.caveat p { color: var(--text-2); font-size: .9375rem; max-width: 62ch; }

@media (min-width: 900px) {
  .caveat {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    column-gap: clamp(26px, 3vw, 44px);
    align-items: start;
  }
  .caveat .lab { margin-bottom: 0; padding-top: .25em; }
}

/* ----------------------------------------------------------- who it's for */
.who { padding-block: var(--sec); }
.copies { margin-top: clamp(38px, 4.5vw, 58px); display: grid; gap: var(--gap); }
.copy {
  padding: clamp(26px, 2.8vw, 34px);
  border-radius: var(--r-card);
  background: var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 24px 56px -34px rgb(0 0 0 / .8);
}
.copy__stock { display: block; color: rgb(25 21 16 / .64); }
.copy h3 {
  margin-top: 16px;
  font-size: clamp(1.1875rem, 1.7vw, 1.375rem);
  line-height: 1.22; letter-spacing: -.02em;
}
.copy p { margin-top: 12px; font-size: .9375rem; color: rgb(25 21 16 / .74); }
.copy--yellow { background: var(--paper-yellow); }
.copy--pink   { background: var(--paper-pink); }

/* -------------------------------------------------------------- pricing */
.pricing { padding-bottom: var(--sec); }
.tiers { margin-top: clamp(38px, 4.5vw, 58px); display: grid; gap: var(--gap); }
.tier {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.tier__name { font-size: 1.125rem; letter-spacing: -.015em; }
.tier__price {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 18px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.amt {
  font-size: clamp(2.5rem, 4.2vw, 3.4rem);
  line-height: 1; letter-spacing: -.04em; font-weight: 500;
}
.tier--free .amt { color: var(--canary); }
.per { color: var(--text-3); }
/* flex: 1 makes this grid absorb whatever height the two tiers differ by, which
   keeps their buttons on the same line. Without align-content the surplus is
   dealt out between the rows instead, so the two lists drift apart by ~2px a
   row — and these lists are word-for-word identical on purpose. Pack the rows
   to the top and let the surplus fall to the bottom of the grid, which gets
   both: rows that line up across the tiers, and buttons that still do. */
.tier__list { margin: 24px 0 32px; display: grid; gap: 12px; flex: 1; align-content: start; }
.tier__list li {
  position: relative;
  padding-left: 20px;
  color: var(--text-2);
  font-size: .9375rem;
}
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: .66em;
  width: 8px; height: 1px; background: var(--canary);
}
/* now sits in the head's right column rather than stranded under the tiers */
.pool {
  align-self: end;
  max-width: 46ch;
  padding-left: 22px;
  border-left: 2px solid var(--canary);
  color: var(--text-2);
  font-size: 1rem;
}

/* ---------------------------------------------------------------- close */
.close {
  position: relative;
  margin: 0 clamp(8px, 1.2vw, 14px) clamp(8px, 1.2vw, 14px);
  padding-block: clamp(78px, 9vw, 132px);
  border-radius: var(--r-panel);
  background: var(--panel);
  overflow: hidden;
  text-align: center;
}
.close__field {
  position: absolute; inset: 0;
  color: rgb(233 206 99 / .22);
  background-image: radial-gradient(currentColor 1px, transparent 1.1px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(70% 120% at 50% 100%, #000 0%, transparent 70%);
          mask-image: radial-gradient(70% 120% at 50% 100%, #000 0%, transparent 70%);
  pointer-events: none;
}
.close__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.close .logo--mark { color: var(--canary); margin-bottom: 30px; }
.close .h2 { max-width: 16ch; }
.close__p {
  margin-top: 20px; max-width: 46ch;
  color: var(--text-2);
}

/* start form */
.start {
  margin-top: 40px;
  display: grid; gap: 14px;
  width: 100%; max-width: 460px;
  text-align: left;
}
.start__field { display: grid; gap: 8px; }
.start__field label { color: var(--text-2); }
/* Scoped to the field wrapper, not to .start. The waitlist pages reuse
   .start__field inside .hold, where there is no .start ancestor — scoping the
   input rule to .start left every field on hold.html and sponsor.html as a
   native control, which on those two pages is a white box on a black page
   asking for a card. */
.start__field input:not([type="hidden"]) {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--recess);
  color: var(--text);
  transition: border-color .2s var(--ease);
}
.start__field input::placeholder { color: var(--text-3); }
.start__field input:hover { border-color: rgb(244 241 234 / .32); }
.start__help { color: var(--text-3); font-size: .875rem; line-height: 1.5; }
.start__err { color: var(--rust); font-size: .875rem; }
.start__err:empty { display: none; }
.start__field input[aria-invalid="true"] { border-color: var(--rust); }
/* The success panel and the busy state that used to live here are gone with
   the fake submit. This form is a real GET to hold.html now: it navigates,
   so there is no in-place success state left to style. */

/* --------------------------------------------------------------- footer */
.foot { padding: clamp(56px, 6vw, 84px) 0 clamp(28px, 3vw, 40px); }
.foot__top {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; align-items: flex-start;
  padding-bottom: clamp(34px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.foot__brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
.foot__nav ul { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.foot__nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-2); font-size: .9375rem;
}
.foot__nav a:hover { color: var(--text); }

.legal {
  padding-block: clamp(30px, 3.4vw, 42px);
  display: grid; gap: 14px;
  max-width: 92ch;
}
.legal__h { color: var(--text-3); margin-bottom: 2px; }
.legal p {
  color: var(--text-2);
  font-size: .9375rem;         /* readable, per the brief's hard constraint */
  line-height: 1.65;
}
.foot__base {
  display: flex; flex-wrap: wrap; gap: 12px 26px;
  justify-content: space-between; align-items: center;
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
  color: var(--text-3);
}
.foot__base ul { display: flex; gap: 22px; }
.foot__base a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__base a:hover { color: var(--text); }

/* ==========================================================================
   WAITLIST
   --------------------------------------------------------------------------
   index.html carries the notice band and the two revised tiers. hold.html and
   sponsor.html are built entirely from what follows.

   Everything here reuses the tokens above. The one rule the waitlist adds to
   the system: money and refusals get the canary, and nothing else on these
   pages does. A page asking for a deposit has to keep its accent scarce, or
   the emphasis stops meaning anything at the moment it has to.
   ========================================================================== */

/* ---------------------------------------------------------- notice band
   Sits directly under the hero and reads as its footer: same --panel fill the
   plate sits on, hairline top and bottom. Not a card, because a card would
   look like a promotion and this is a status. */
.notice {
  background: var(--panel);
  border-block: 1px solid var(--line);
}
.notice__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px clamp(16px, 2.4vw, 28px);
  padding-block: clamp(16px, 1.8vw, 22px);
}
.notice__dot {
  flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--canary);
  box-shadow: 0 0 0 4px rgb(233 206 99 / .16);
}
.notice__txt {
  flex: 1 1 320px;
  color: var(--text-2);
  font-size: .9375rem; line-height: 1.55;
}
.notice__txt strong { color: var(--text); font-weight: 500; }
.notice__when { color: var(--canary); text-transform: none; letter-spacing: .04em; }
.notice__link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  color: var(--canary); font-size: .9375rem; font-weight: 500;
}
.notice__link .ico { font-size: .9em; transition: transform .25s var(--ease); }
.notice__link:hover .ico { transform: translateX(3px); }

/* ------------------------------------------------------ tier additions */
.tier__alt {
  margin-top: -14px;
  color: var(--text-2);
  font-size: .9375rem;
}
.tier__alt strong { color: var(--text); font-weight: 500; }

/* The founding terms, set as an inset rather than another bullet. It is a
   different kind of statement from the feature list above it: that list is
   what the product is, this is what happens if you act today, and collapsing
   the two would bury the only time-sensitive line on the page. */
.tier__found {
  margin: 0 0 24px;
  padding: 16px 18px;
  border-radius: var(--r-chip);
  background: var(--recess);
  color: var(--text-2);
  font-size: .875rem; line-height: 1.6;
}
.tier__found .lab { color: var(--canary); margin-bottom: 6px; }
.tier__found strong { color: var(--text); font-weight: 500; }
.tier__more {
  display: inline-block; margin-top: 8px;
  color: var(--canary); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.start__foot {
  color: var(--text-3);
  font-size: .8125rem; line-height: 1.55;
}

/* --------------------------------------------------------- subpage shell
   No hero on hold.html or sponsor.html, so the canvas has to reserve the
   clearance the hero carries internally on the landing page. */
.page-sub .canvas { padding-top: calc(var(--nav-h) + var(--nav-top) + 20px); }

.phead { padding-block: clamp(30px, 4vw, 52px) clamp(48px, 6vw, 76px); }
.phead__back {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; margin-bottom: clamp(20px, 3vw, 34px);
  color: var(--text-3); font-size: .9375rem;
}
.phead__back:hover { color: var(--text); }
.ico--back { transform: rotate(180deg); transition: transform .25s var(--ease); }
.phead__back:hover .ico--back { transform: rotate(180deg) translateX(3px); }
.phead__h1 {
  font-size: clamp(2.15rem, 4.1vw, 3.55rem);
  line-height: 1.05; letter-spacing: -.035em;
  font-weight: 500;
  max-width: 18ch;
}
.phead__sub {
  margin-top: 22px;
  max-width: 56ch;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
}

/* ------------------------------------------------------ confirmation page
   thanks.html. Every outcome block ships in the markup; main.js unhides the
   one the query string names. Nothing here depends on which one that is, so
   the page cannot land in a half-styled state if the script never runs. */
.done__list {
  margin-top: clamp(26px, 3vw, 34px);
  display: grid; gap: 12px;
  max-width: 58ch;
}
.done__list li {
  position: relative;
  padding-left: 26px;
  color: var(--text-2);
  font-size: .9375rem; line-height: 1.5;
}
/* Drawn rather than an icon reference: this list is the one thing on the page
   a reader checks twice, and it should not wait on the sprite. */
.done__list li::before {
  content: ""; position: absolute;
  left: 2px; top: .48em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--canary);
  border-bottom: 1.5px solid var(--canary);
  transform: rotate(-45deg);
}
.done__after {
  margin-top: clamp(34px, 4vw, 46px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--line);
  max-width: 58ch;
  color: var(--text-3);
  font-size: .9375rem; line-height: 1.6;
}
.done__after a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.done__after a:hover { color: var(--text); }
.done__act {
  margin-top: clamp(28px, 3.4vw, 38px);
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* ---------------------------------------------------- document pages
   terms.html and privacy.html. Prose meant to be read start to finish, so
   one measure, generous leading, and nothing decorative competing with it. */
.doc { padding-bottom: var(--sec); }
.doc__updated { margin-top: 18px; color: var(--text-3); font-size: .8125rem; }
.doc__body { max-width: 74ch; }
.doc__body h2 {
  display: flex; align-items: baseline; gap: 14px;
  margin-top: clamp(40px, 5vw, 58px);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2; letter-spacing: -.02em; font-weight: 500;
}
.doc__body h2:first-child { margin-top: 0; }
.doc__n { color: var(--canary); font-size: .8125rem; flex: none; }
.doc__body p, .doc__body li {
  margin-top: 14px;
  color: var(--text-2);
  font-size: 1rem; line-height: 1.7;
}
.doc__body strong { color: var(--text); font-weight: 500; }
.doc__body a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.doc__body a:hover { color: var(--canary); }
.doc__body ul { padding-left: 22px; list-style: disc; }
.doc__body li { margin-top: 8px; }
.doc__body li::marker { color: var(--text-3); }
.doc__note {
  margin-bottom: clamp(36px, 4.5vw, 52px);
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.doc__note .lab { display: block; color: var(--canary); margin-bottom: 10px; }
.doc__note p { margin-top: 0; }

/* ------------------------------------------------------------- step head */
.step-sec { padding-bottom: var(--sec); }
.step-sec__head { margin-bottom: clamp(26px, 3.2vw, 38px); }
.step-sec__head--mid { margin-top: clamp(44px, 5vw, 68px); }
.step-sec__n { display: block; color: var(--canary); margin-bottom: 14px; }

/* ---------------------------------------------------------------- forms */
/* One column for the whole transaction. The lanes used to run the container's
   full 1240px while the fields above them capped at 520px, which read as two
   different layouts stacked rather than one form. 780px is the measure the
   guarantee list already uses, so the two halves of the page line up. */
.hold {
  display: grid; gap: clamp(22px, 2.6vw, 30px);
  max-width: 780px;
}
.hold__fields { display: grid; gap: 22px; max-width: 520px; }
.hold select {
  width: 100%;
  min-height: 54px;
  padding: 14px 44px 14px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-chip);
  background: var(--recess);
  color: var(--text);
  appearance: none;
  /* the chevron, drawn rather than fetched: one more request on a facility
     tablet is not worth a caret */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 21px) 25px, calc(100% - 16px) 25px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .2s var(--ease);
}
.hold select:hover { border-color: rgb(244 241 234 / .32); }
.hold select option { background: var(--surface); color: var(--text); }

.hold__submit { display: grid; gap: 14px; justify-items: start; max-width: 560px; }
.hold__terms { color: var(--text-3); font-size: .8125rem; line-height: 1.6; }
.hold__terms a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.hold__terms a:hover { color: var(--canary); }
.hold.is-busy .btn { opacity: .6; pointer-events: none; }

/* ----------------------------------------------------------------- queue
   Ships empty. Nothing in the markup states a count, and the loaded state is
   only revealed once the endpoint answers — an invented queue number on a
   page that is about to ask for a deposit would undo the entire page. */
.queue {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  max-width: 520px;
}
.queue__empty { color: var(--text-3); font-size: .9375rem; }
.queue[data-state="loaded"] .queue__empty { display: none; }
.queue__loaded[hidden] { display: none; }
.queue__top {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.queue__lab { color: var(--text-3); }
.queue__name { color: var(--text); text-transform: none; letter-spacing: .02em; }
.queue__count { color: var(--canary); }
.queue__meter {
  height: 6px; border-radius: 999px;
  background: var(--recess);
  overflow: hidden;
}
.queue__bar {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--canary);
  transition: width .5s var(--ease);
}
.queue__note { margin-top: 12px; color: var(--text-2); font-size: .875rem; line-height: 1.55; }

/* ----------------------------------------------------------------- lanes
   The radio stays a real radio: it keeps its role, its arrow-key behaviour
   and its focus, and it is only made transparent so the card underneath can
   be the thing you see. Every state below is a sibling selector off :checked
   or :focus-visible, so none of it needs :has() and none of it needs JS —
   which matters on the old tablets this has to work on. */
.lanes { display: grid; gap: var(--gap); margin: 0; padding: 0; border: 0; }
.lanes__help {
  margin-top: -6px;
  color: var(--text-3);
  font-size: .875rem;
  max-width: 62ch;
}

.lane { position: relative; display: block; cursor: pointer; }
.lane input {
  position: absolute; top: 20px; right: 20px;
  width: 24px; height: 24px; margin: 0;
  opacity: 0; cursor: pointer;
}

.lane__body {
  display: grid; gap: 12px;
  padding: 22px clamp(22px, 3vw, 30px);
  padding-right: 62px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.lane:hover .lane__body { border-color: var(--line-2); }
.lane input:checked ~ .lane__body {
  border-color: var(--canary);
  background: linear-gradient(rgb(233 206 99 / .06), rgb(233 206 99 / .06)), var(--surface);
}
.lane input:focus-visible ~ .lane__body {
  outline: 2px solid var(--canary);
  outline-offset: 3px;
}
/* The 6% canary tint lifts the checked card's fill to #2D2A24, where --text-3
   measures 4.53:1 — over the floor, but with nothing in hand. The selected
   lane is also the one being read most closely, so its list steps up to
   --text-2 and clears at 5.90:1. */
.lane input:checked ~ .lane__body .lane__list > span { color: var(--text-2); }

/* A lane that exists but cannot be chosen. Dimmed and un-hoverable so it reads
   as shut at a glance, but never below the contrast floor — this is the lane
   read by the people with the least money and, often, the worst screen. The
   text stays at --text-3 rather than fading further. */
.lane.is-closed { cursor: default; }
.lane.is-closed .lane__body {
  border-style: dashed;
  background: none;
}
.lane.is-closed:hover .lane__body { border-color: var(--line); }
.lane.is-closed .lane__name,
.lane.is-closed .lane__price { color: var(--text-3); }
.lane.is-closed input { cursor: default; }
/* Focus still lands here. A disabled radio is skipped by the tab order, but the
   label keeps its focus ring if anything ever re-enables it. */
.lane.is-closed input:focus-visible ~ .lane__body {
  outline: 2px solid var(--canary);
  outline-offset: 3px;
}

.lane__top {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  justify-content: space-between; align-items: baseline;
}
.lane__name {
  font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  line-height: 1.22; letter-spacing: -.02em;
  font-weight: 500;
}
.lane__flag {
  display: block; margin-top: 6px;
  color: var(--canary);
  font-size: .625rem;
}
.lane__price { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.lane__lead { color: var(--text-2); font-size: .9375rem; line-height: 1.6; }
.lane__lead strong { color: var(--text); font-weight: 500; }
.lane__list { display: grid; gap: 9px; margin-top: 2px; }
.lane__list > span {
  position: relative;
  padding-left: 22px;
  color: var(--text-3);
  font-size: .875rem; line-height: 1.55;
}
.lane__list > span::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 9px; height: 1px;
  background: var(--line-2);
}

.lane__mark {
  position: absolute; top: 20px; right: 20px;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--canary-ink);
  font-size: 13px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lane__mark .ico { opacity: 0; transition: opacity .2s var(--ease); }
.lane input:checked ~ .lane__mark {
  background: var(--canary);
  border-color: var(--canary);
}
.lane input:checked ~ .lane__mark .ico { opacity: 1; }

/* The free lane keeps the paper stock's job on the landing page: it is the
   one that must not read as the lesser option, so it gets the accent on its
   price the sponsored tier already gets in the pricing table. */
.lane--free .amt { color: var(--canary); }

/* ------------------------------------------------------------ guarantee
   Built on the verification panel, deliberately. That section is where the
   landing page proves it withholds what it cannot check; this is where the
   money does the same thing. Same panel, same field, same caveat block. */
.guarantee {
  position: relative;
  margin-block: var(--sec);
  padding-block: clamp(56px, 6.5vw, 96px);
  background: var(--panel);
  border-radius: var(--r-panel);
  overflow: hidden;
}
.guarantee__field {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgb(244 241 234 / .09) 1px, transparent 1px);
  background-size: 5px 5px;
  mask-image: radial-gradient(120% 90% at 82% 8%, #000 0%, transparent 62%);
  -webkit-mask-image: radial-gradient(120% 90% at 82% 8%, #000 0%, transparent 62%);
  pointer-events: none;
}
.guarantee__inner { position: relative; }

.gitems {
  margin-top: clamp(38px, 4.5vw, 56px);
  display: grid; gap: 0;
  max-width: 780px;
}
.gitem {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 16px;
  padding-block: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}
.gitem:last-child { border-bottom: 1px solid var(--line); }
.gitem__n { color: var(--canary); padding-top: 5px; }
.gitem h3 {
  font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  line-height: 1.22; letter-spacing: -.02em;
}
.gitem p { margin-top: 8px; color: var(--text-2); font-size: .9375rem; }
.gitem__when {
  color: var(--canary);
  text-transform: none; letter-spacing: .04em;
  white-space: nowrap;
}
.guarantee .caveat { margin-top: clamp(38px, 4.5vw, 56px); }

/* ------------------------------------------------------------ who we are */
.whois { padding-bottom: var(--sec); }
.whois__grid {
  margin-top: clamp(38px, 4.5vw, 58px);
  display: grid; gap: clamp(26px, 3.4vw, 44px);
}
.whois__card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  text-align: center;
}
/* PLACEHOLDER: a real photograph replaces this. The halftone stand-in is
   deliberately obvious so it cannot ship by accident. */
.whois__card picture { display: block; }
.whois__portrait {
  display: block;
  width: 100%;
  /* Capped at the source's natural 240px. On a phone the card is wider than the
     280px desktop column, so an uncapped portrait would upscale — and a soft,
     stretched founder photo undoes the exact thing this section exists to do.
     Centred instead, which reads as deliberate rather than short. */
  max-width: 240px;
  margin: 0 auto 18px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-chip);
  /* Sits under the image while it loads, so the card never jumps. */
  background-color: var(--recess);
}
.whois__name { font-size: 1.0625rem; font-weight: 500; }
.whois__role { color: var(--text-3); margin-top: 6px; }
.whois__txt { display: grid; gap: 16px; align-content: start; max-width: 62ch; }
.whois__txt p { color: var(--text-2); }
.whois__facts {
  display: grid; gap: 10px;
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.whois__facts li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 14px;
  color: var(--text-2);
  font-size: .9375rem;
}
.whois__facts .mono { color: var(--text-3); padding-top: .2em; }
.whois__facts a { color: var(--canary); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------ objections */
.qa { padding-bottom: var(--sec); }
.qa__list { margin-top: clamp(38px, 4.5vw, 58px); max-width: 820px; }
.qa__item {
  padding-block: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line);
}
.qa__item:last-child { border-bottom: 1px solid var(--line); }
.qa__item dt {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.3; letter-spacing: -.015em;
  font-weight: 500;
}
.qa__item dd {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: .9375rem;
  max-width: 68ch;
}

/* ------------------------------------------------------- sponsor counter */
.pool-count[data-state="empty"] { display: none; }
.pool-count__grid {
  display: grid; gap: var(--gap);
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
}
.pool-count__grid[hidden] { display: none; }
.pool-count__stat { display: grid; gap: 6px; }
.pool-count__n {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--canary);
  font-variant-numeric: tabular-nums;
}
.pool-count__lab { color: var(--text-3); }

/* ------------------------------------------------------------ sponsor bits */
.buys { margin-top: clamp(38px, 4.5vw, 58px); display: grid; gap: clamp(24px, 3vw, 40px); }
.buys .tier__list { margin: 0; }
.buys__note { color: var(--text-2); font-size: .9375rem; max-width: 56ch; }
.hold__fields--sponsor { max-width: 520px; }

/* ================================================================ layout
   Mobile is the majority case, so every rule above is the small screen.
   These are the additions as the viewport grows.
   ================================================================= */
@media (min-width: 640px) {
  .copies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pool-count__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Three tiers into a two-column grid leaves the third stranded in a
     half-width box beside empty space. It spans instead — which also happens
     to be the right hierarchy: the two open tiers sit side by side as the
     choice a family actually makes today, and the one that is not open yet
     runs underneath as the thing the product grows into. */
  .tier:nth-child(3) { grid-column: 1 / -1; }

  /* Spanning full width gives the list room to run in two columns rather than
     one long stripe down the left of a very wide card. */
  .tier:nth-child(3) .tier__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 3vw, 44px);
  }
}

@media (min-width: 900px) {
  /* The floor of the hero: one card holding the left third of the reading
     column, so the plate keeps the other two thirds. The container caps at
     1240px, so this settles at ~376px on anything wider. */
  .hero__foot {
    width: 33.333%;
    min-width: 300px;        /* a floor, not a target: keeps 900-1100px sane */
  }

  /* the section heads and the statement pick up their counterweight column */
  .sec-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: end;
  }
  .statement__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .74fr);
    column-gap: clamp(44px, 5.5vw, 88px);
    align-items: center;
  }
  /* Six cells in two columns and four rows, placed explicitly rather than left
     to auto-flow. Two of them span two rows and sit in opposite columns — the
     lead with its computation ledger on the left, the paper handbook on the
     right, staggered so neither column reads as a stack of equal cards — and
     auto-placement cannot produce that stagger without leaving a hole.

     Source order is the mobile order, and it is the order that carries the
     argument; the placement below only re-columns it. Keep the two in sync. */
  .bento {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .cell:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }  /* computation */
  .cell:nth-child(2) { grid-column: 2; grid-row: 1; }           /* the docket   */
  .cell:nth-child(3) { grid-column: 2; grid-row: 2 / span 2; }  /* handbook     */
  .cell:nth-child(4) { grid-column: 1; grid-row: 3; }           /* case law     */
  .cell:nth-child(5) { grid-column: 1; grid-row: 4; }           /* eligibility  */
  .cell:nth-child(6) { grid-column: 2; grid-row: 4; }           /* what changed */
  .cell--lead { display: flex; flex-direction: column; }
  .cell--lead .index { margin-top: auto; }
  .copies { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .copy--white  { transform: rotate(-.45deg); }
  .copy--yellow { margin-top: 26px; transform: rotate(.3deg); }
  .copy--pink   { margin-top: 52px; transform: rotate(-.2deg); }

  /* The founder card is a fixed 280px rather than a fraction: it holds a
     square portrait, and letting it grow with the viewport turns a headshot
     into a poster. */
  .whois__grid {
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .buys {
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  /* The lane list stays one column at every width. Two columns would put the
     free lane beside a paid one and turn a sequence of increasing commitment
     into a comparison table, which is the pricing page's job and not this
     page's. */
}

@media (min-width: 1280px) {
  .slip__q { font-size: 1.1875rem; }
}

@media (max-width: 899px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav { padding-right: 10px; padding-left: 22px; }
  .dotblock { display: none; }         /* texture, not content: no cost to drop */

  /* Once the cards stack, the headline climbs most of the way up the panel and
     lands on open sky, which is the lightest thing the plate ever shows. The
     floor has to reach further before the type gets to it. */
  .hero__scrim {
    background: linear-gradient(to top,
      rgb(6 6 5 / .93)  0%,
      rgb(6 6 5 / .74) 26%,
      rgb(6 6 5 / .48) 52%,
      rgb(6 6 5 / .18) 76%,
      rgb(6 6 5 / .44) 100%);
  }
  /* A portrait viewport crops the 16:9 plate to a fraction of its width, so the
     frame has to choose. It holds the kite: that is the metaphor the headline
     is standing on, and the figures survive as edge detail either way. */
  .hero__vid { object-position: 46% 34%; }
}

@media (max-width: 719px) {
  .hero { padding-top: calc(var(--nav-h) + var(--nav-top) + 18px); }
  .hero__vid { object-position: 46% 32%; }
  .hero__card { padding: 19px 20px; }
  .hero__grid { gap: clamp(26px, 6vw, 38px); }
}

@media (max-width: 719px) {
  .row {
    grid-template-columns: 18px minmax(0, 1fr);
    row-gap: 6px;
  }
  .row__cite { grid-column: 2; }
  .row__state { grid-column: 2; text-align: left; }
  .step { grid-template-columns: 26px minmax(0, 1fr); }
  .tag { grid-column: 2; justify-self: start; margin-top: 4px; }
  .index li { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
  .slip__head { gap: 10px; }
  .route { flex-wrap: wrap; }
  .gitem { grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; }
  /* label above value: 108px of mono plus an address does not fit, and the
     truncation lands on the street line, which is the one a reader is
     checking us against */
  .whois__facts li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .whois__facts .mono { padding-top: 0; }
}

/* Below this the lane header stops trying to hold a name and a price on one
   line. It fits for two of the three lanes, but the flag under "Founding year"
   is wide enough to push that one's price onto its own line — so the list ends
   up with two layouts, and the odd one out is the lane carrying the largest
   commitment. Stack all three instead. */
@media (max-width: 560px) {
  .lane__top { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media (max-width: 460px) {
  body { padding: 5px; }
  .canvas, .hero, .verify, .close, .guarantee { border-radius: 26px; }
  /* the indicator moves in with the padding, so the reserved gutter follows */
  .lane input, .lane__mark { top: 16px; right: 16px; }
  .lane__body { padding-right: 54px; }
  :root { --nav-h: 66px; --nav-top: 8px; }
  .nav { padding-left: 18px; }
  .cite { grid-template-columns: 15px minmax(0, 1fr); }
  .cite__tag { grid-column: 2; }
  .foot__base { flex-direction: column; align-items: flex-start; }
}

/* ================================================================ motion
   MOTION_INTENSITY 4. Scroll reveals, one orchestrated hero entrance, and
   the stamp pressing down when the verification ledger arrives. Part of the
   audience reads this on old facility tablets, so nothing runs on a loop.
   ================================================================= */
.js .reveal,
.js .ln {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition: opacity .62s var(--ease), transform .62s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .ln {
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js .stamp {
    opacity: 0;
    transform: rotate(-9deg) scale(1.35);
  }
  .js .ledger.in .stamp {
    animation: press .42s var(--ease) .55s forwards;
  }
}
.js .reveal.in,
.js .ln.in { opacity: 1; transform: none; }

@keyframes press {
  from { opacity: 0; transform: rotate(-9deg) scale(1.35); }
  to   { opacity: .95; transform: rotate(-9deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .ln { opacity: 1; transform: none; animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------------------ founder block
   Added with the free launch. The doc calls founder visibility the
   scam-proofing, and it matters more once the product is live than it did
   when the site was selling a waitlist: a real name, a real face and a real
   city outrank any trust badge with this audience. */
.founder {
  display: grid;
  gap: 18px;
  align-items: center;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}
.founder__portrait {
  width: 76px; height: 76px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.founder p { color: var(--text-2); font-size: .9375rem; max-width: 56ch; }
.founder p strong { color: var(--text); font-weight: 500; }
.founder a { color: var(--canary); }
.founder .lab { margin-bottom: 8px; }

@media (min-width: 640px) {
  .founder { grid-template-columns: 76px minmax(0, 1fr); gap: 22px; }
}

/* A tier whose lane is not open yet. Reads as a statement rather than a
   disabled control, because there is nothing here to enable — saying so is
   the point. */
.btn[aria-disabled="true"] {
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--text-3);
  cursor: default;
  text-align: center;
  justify-content: center;
}