/* Cockpit landing page.
   Structure follows the reference the user pinned: top nav, hero with the
   device cluster, a lit stat band, alternating split sections, a centred
   close. The palette is not the reference's orange — it is the product's
   own gold on charcoal, which is a recorded brand commitment. */

@font-face { font-family: Heebo; src: url("fonts/Heebo_400Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: Heebo; src: url("fonts/Heebo_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Heebo; src: url("fonts/Heebo_600SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: Heebo; src: url("fonts/Heebo_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: Heebo; src: url("fonts/Heebo_800ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: Rubik; src: url("fonts/Rubik_500Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: Rubik; src: url("fonts/Rubik_700Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --bg: #0B0E14;
  --bg-card: #12161F;
  --bg-elev: #1C232F;
  --gold: #F5C518;
  --gold-ink: #0B0E14;
  --gain: #22DF93;
  --loss: #FF5C6C;
  --hi: #F2F4F8;
  --mid: #A7B0BF;
  /* Lifted from the product's #6B7488: that token labels values inside the
     app, but here it carries body text, and it measured 4.25:1 on the
     ground — under the 4.5:1 floor. This is 5.2:1. */
  --lo: #7C8698;
  --hair: rgba(255, 255, 255, 0.06);
  --hair-strong: rgba(255, 255, 255, 0.12);

  --col: 1200px;
  --r-card: 16px;
  --r-feat: 22px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--hi);
  font-family: Heebo, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* No `overflow-x: hidden` here on purpose. It was hiding a real 192px
     overflow from the hero's glow rather than fixing it, and a clip on the
     body silently swallows the next one too. */
}

/* Browser surfaces: the parts we did not draw still carry the design. */
::selection { background: var(--gold); color: var(--gold-ink); }
:root { accent-color: var(--gold); caret-color: var(--gold); color-scheme: dark; }
* { scrollbar-color: var(--bg-elev) var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-elev); border: 3px solid var(--bg); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #2A3444; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

a { color: inherit; text-decoration-color: var(--hair-strong); text-underline-offset: 3px; }
/* ⚠️ `height: auto` is not tidying — it is the fix for a real defect.
   Every image carries width/height attributes (they reserve the box and stop
   the page jumping), and a rule that sets only `width: 100%` leaves the
   height pinned to the attribute. Measured on the build: the laptop rendered
   557x1091 instead of 557x380, stretched to nearly three times its height. */
img { max-width: 100%; display: block; height: auto; }
svg[viewBox] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  background: var(--gold); color: var(--gold-ink);
  padding: 10px 16px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  transition: top 160ms var(--ease);
}
.skip:focus { top: 8px; }

/* ── Nav ───────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  max-width: var(--col);
  margin-inline: auto;
  padding: 16px 28px;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-inline-end: auto; }
.brand__mark {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--gold); color: var(--gold-ink);
  border-radius: 9px;
  font-family: Rubik, Heebo, sans-serif; font-weight: 700; font-size: 19px;
}
.brand__word { font-weight: 800; letter-spacing: 0.16em; font-size: 15px; }

.nav__links { display: flex; gap: 4px; }
.nav__links a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--mid);
  font-size: 14.5px; font-weight: 500;
  text-decoration: none;
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.nav__links a:hover { color: var(--hi); background: var(--bg-card); }
.nav__links a[aria-current="true"] { color: var(--gold); background: rgba(245, 197, 24, 0.1); }

.nav__cta { display: flex; align-items: center; gap: 6px; flex: none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease);
}
.btn svg { width: 16px; height: 16px; }
/* Neutral elevation, never a gold halo: a coloured glow behind the accent
   button is the default move of a generated dark UI, and the product's own
   buttons have never had one. */
.btn--primary { background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45); }
.btn--primary:hover { background: #FFD535; transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }
.btn--ghost { color: var(--hi); background: var(--bg-card); border: 1px solid var(--hair-strong); }
.btn--ghost:hover { border-color: var(--mid); background: var(--bg-elev); }
/* Returning users know where sign-in is; the button is there for the ones
   who do not, and it must not compete with the one action the page is
   asking for. No border, no fill, until it is pointed at. */
.btn--quiet { color: var(--mid); background: transparent; }
.btn--quiet:hover { color: var(--hi); background: var(--bg-card); }
.btn--sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn--lg { height: 54px; padding: 0 28px; font-size: 16px; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: 32px;
  max-width: var(--col);
  margin-inline: auto;
  /* ⚠️ The bottom is 40, not 96, and it is half of a pair. The store
     buttons used to be followed by 96px of hero padding and then another
     96px of `.proof`'s top margin — 192px of empty ground between the last
     thing in the hero and the next section, which read as the page having
     ended. Changing one of the two would have moved the problem rather
     than fixed it, so both came down together; see `.proof`. */
  padding: 40px 28px 40px;
}
/* The ambient field the reference builds with light. Drawn, not shadowed:
   a radial field behind the devices, not a halo bolted to a box. */
/* ⚠️ No negative horizontal inset. The first version reached 30% past the
   column and pushed the document 192px wider than the viewport — a real
   horizontal scrollbar on every desktop. The falloff does the reaching. */
.hero::before {
  content: "";
  position: absolute;
  inset: -14% 0 -4% 0;
  background: radial-gradient(42% 46% at 72% 48%, rgba(245, 197, 24, 0.14), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.hero__copy { position: relative; z-index: 1; }

h1 {
  margin: 0;
  font-size: clamp(2.7rem, 4.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
}
h1 em { font-style: normal; color: var(--gold); }

.lede {
  max-width: 46ch;
  margin: 24px 0 0;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.62;
  color: var(--mid);
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ── The device cluster ────────────────────────────────────────────────
   The user's own mockup with its studio background removed. It arrives as
   one flat picture, so the arrangement is fixed; what CSS still owns is how
   it is framed at each width.
   ⚠️ No `drop-shadow()` on it. Measured earlier on this page: that filter
   over a large alpha image cost the hero its first paint, and the devices
   were missing for most of a second. */
.devices {
  position: relative;
  z-index: 1;
  margin: 0;
}
.devices img { width: 100%; height: auto; }

/* ── Bands ─────────────────────────────────────────────────────────── */
.band {
  max-width: var(--col);
  margin-inline: auto;
  padding: 88px 28px 0;
}
.band__head { max-width: 62ch; margin-inline: auto; text-align: center; }
.band__head p { margin: 16px auto 0; color: var(--mid); max-width: 58ch; }

h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -0.028em;
  font-weight: 700;
  text-wrap: balance;
}

.band__art { margin: 36px 0 0; }
.band__art img {
  width: 100%;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.95);
}
.band__art--short { max-width: 940px; margin-inline: auto; }

/* ── Stat row ──────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 18px;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-feat);
  text-align: center;
}
.stat__n {
  font-family: Rubik, Heebo, sans-serif;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  line-height: 1.1;
}
.stat__l { font-size: 14px; color: var(--mid); }
/* One tile lit, as in the reference — and it is the mechanism rather than
   the biggest number, so the emphasis says something true. */
.stat--lit { background: var(--gold); border-color: var(--gold); }
.stat--lit .stat__n { color: var(--gold-ink); }
.stat--lit .stat__l { color: rgba(11, 14, 20, 0.78); font-weight: 600; }

/* ── The evidence slab ─────────────────────────────────────────────── */
/* This began as a ledger: five full-width rows, the figure in the margin.
   It read well and it was far too tall — about 1,500px of scrolling in the
   one position on the page where the reader has not yet been shown the
   product. Cards fix the height by putting two findings on a line instead
   of one, and the methodology moves behind a disclosure so the cut is paid
   for in folded words rather than deleted ones.
   ⚠️ The risk the row layout was avoiding is still real: four tiles in a
   grid, one screen under the four-tile stat band, can read as the same
   decorative band twice. Three things keep them apart and none of them is
   decoration — these are left-aligned where the stats are centred, every
   one of them names a source in full, and they sit on a lifted surface
   (--bg-elev) over the slab's own --bg-card ground rather than sharing it.
   Do not centre this text and do not flatten the card background back to
   the band's. */
.proof {
  /* The other half of the hero's closing gap — see `.hero`'s padding. The
     band has its own 84px of inner padding above the eyebrow, so the space
     before the heading is still generous; what came out is the dead ground
     between the two sections, not the section's own breathing room. */
  margin-top: 56px;
  background: var(--bg-card);
  border-block: 1px solid var(--hair);
}
.proof__inner { max-width: var(--col); margin-inline: auto; padding: 84px 28px 88px; }

.eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}
/* Scoped past `.band__head p`, which is more specific than a bare class and
   was quietly repainting this line in the body colour.

   ⚠️ **`margin-inline: auto` is load-bearing, and its absence was a real
   bug.** `.band__head p` also sets `max-width: 58ch`, and `ch` resolves
   against THIS element's 12px font, not the section's 16px — so the box came
   out 397px wide inside a 558px head. With the side margins at 0 it sat
   flush left, and its centred text landed 81px left of the h2 below it.
   Measured, not guessed. Centring the text was never enough; the box had to
   be centred too. */
.band__head .eyebrow {
  margin: 0 auto 16px;
  max-width: none;
  /* Was 12px, which read as a stray caption rather than a section marker -
     and this is the only eyebrow on the page, so it had nothing to belong
     to. Sized and weighted to sit under the h2 as a deliberate label. */
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold);
}
/* The rule under it does the rest of the work: a short centred gold line
   that ties the label to the heading instead of leaving it floating. */
.band__head .eyebrow::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0.55;
}

.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.proof__card {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--hair);
  border-radius: var(--r-feat);
}

.proof__n {
  margin: 0 0 10px;
  font-family: Rubik, Heebo, sans-serif;
  /* Down from clamp(2.1rem, 4.4vw, 3.3rem): in a half-width card that top
     end wrapped "74–89%" onto two lines. This matches the stat row's own
     figure size, which is the size the rest of the page sets numbers at. */
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
/* "Under" is a qualifier, not part of the figure, and it now sits inline
   beside it rather than stacked above — a card has width to spare and no
   vertical room to give away. */
/* Sized in px, not em. As a fraction of the figure it inherited whatever the
   clamp resolved to and measured 6.72px in one pass — a legibility failure
   that an em never announces. */
.proof__q {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-inline-end: 8px;
}

/* 1.05rem is `.role h3` — the size every other card heading on the page is
   set at, which is what makes these read as part of the same system. */
.proof__card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.38;
  text-wrap: balance;
}
.proof__p { margin: 0; color: var(--mid); font-size: 14.5px; line-height: 1.62; max-width: 62ch; }
.proof__src { margin: 0 0 16px; color: var(--lo); font-size: 13px; line-height: 1.5; }

/* ⚠️ `margin-top: auto` and nothing smaller: it pushes the disclosure to the
   card's floor so the five of them line up across a row of unequal cards.
   The 16px under `.proof__src` above is what guarantees a gap when the card
   is the tallest in its row and `auto` resolves to zero. */
.proof__more {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.proof__more summary {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  padding: 4px 0;
  list-style: none;
  cursor: pointer;
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 600;
}
.proof__more summary::-webkit-details-marker { display: none; }
.proof__more summary:hover { color: #FFD535; }
.proof__more summary svg { width: 15px; height: 15px; transition: transform 160ms var(--ease); }
.proof__more[open] summary svg { transform: rotate(180deg); }
.proof__more p { margin: 10px 0 4px; color: var(--mid); font-size: 14.5px; line-height: 1.62; }

/* The one finding that is not bad news takes the whole row and stays open.
   It is marked in the app's own gain colour, so the turn in the argument is
   visible before it is read. */
.proof__card--turn {
  grid-column: 1 / -1;
  display: grid;
  /* The divider has to fall in the SAME vertical line as the gutter between
     the two cards above, or the row below reads as a different grid.
     Derivation, so the next change does not break it: the grid is
     `repeat(2, 1fr)` with a 14px gap, so that gutter's centre sits at 50% of
     the grid width. This card spans the full width, and the divider is drawn
     on the start edge of column 2, i.e. at `col1 + gap` inside the content
     box. Setting col1 to `50% - gap` puts that edge on exactly 50% of the
     content box — and since the card's own border and padding shift the
     content box in by the same amount on the left, the two lines coincide.
     Any fr value here, including the 1.12fr this used to be, lands it
     somewhere arbitrary: it measured 48px to the right. */
  grid-template-columns: calc(50% - 34px) 1fr;
  gap: 34px;
  padding: 30px 30px 32px;
  border-color: rgba(34, 223, 147, 0.26);
}
.proof__card--turn .proof__n { color: var(--gain); }
.proof__card--turn .proof__src { margin: 14px 0 0; }
/* Centred against the finding beside it, which runs four lines longer. Left
   at the top it opened a hole under the paragraph the size of the paragraph
   itself, and the divider is what has to stay full height, not the text. */
.proof__read {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline-start: 30px;
  border-inline-start: 1px solid var(--hair-strong);
}
.proof__read .proof__p { line-height: 1.7; }

/* ── The road ──────────────────────────────────────────────────────────
   One trade, in the order it actually happens. The connecting line is the
   point of the section: a list of features says the app has parts, a road
   says the parts are one move. It is drawn once on the container rather
   than per step, so no join can ever show a seam.

   The line is a real road, with markings: a solid gold edge under a dashed
   centre, which is why it uses two backgrounds rather than a flat rule. */
.road {
  position: relative;
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
}

/* The carriageway, drawn per step rather than once down the container.
   ⚠️ **A single line on `.road` cannot know where the first node is.** Its
   ends have to be inset by half a card, and card heights differ - a fixed
   inset left the road starting 83px above node 1, running out of nothing.
   A segment per step is measured in percentages of its own step, so the
   first begins at its node's centre and the last ends at its node's centre
   no matter how tall either card is. Each segment also covers the gap to
   the next step, which is why the height carries `+ 26px`. */
.road__step::before {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 0;
  height: calc(100% + 26px);
  width: 3px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--gold) 0 14px,
      transparent 14px 30px
    );
  opacity: 0.4;
}
.road__step:first-child::before { top: 50%; height: calc(50% + 26px); }
.road__step:last-child::before  { top: 0;   height: 50%; }

.road__step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  align-items: center;
  gap: 0;
}
.road__step + .road__step { margin-top: 26px; }

/* The junction. Sits on the road, over the line, and carries the number so
   the order is readable without counting cards. */
.road__node {
  /* ⚠️ **`grid-row` is not decoration here.** Auto-placement never walks
     backwards: with only `grid-column` set, the node took row 1 column 2 and
     the card - which wants column 1 - could not fit before it, so it was
     pushed to row 2. The node then sat ABOVE its own card with the slip road
     pointing at nothing. Pinning both to row 1 is what puts them opposite
     each other. */
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: Rubik, Heebo, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Punches a hole in the road so the dashes do not show through the ring. */
  box-shadow: 0 0 0 8px var(--bg);
}

.road__card {
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-feat);
  padding: 22px 24px;
}
/* Odd steps sit left of the road, even steps right, so the eye zig-zags
   down it instead of reading one long column. */
.road__step:nth-child(odd)  .road__card { grid-row: 1; grid-column: 1; }
.road__step:nth-child(even) .road__card { grid-row: 1; grid-column: 3; }

/* The slip road: a short stub from the junction to the card it belongs to,
   so a card is never floating beside the line unattached. */
.road__card::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 2px;
  background: var(--gold);
  opacity: 0.4;
}
/* 60px = half the 120px middle column, i.e. the card's edge. The stub runs
   from there to the node's halo (26px = 60 - 26 node radius - 8 halo). */
.road__step:nth-child(odd)  .road__card::before { left: calc(50% - 60px); }
.road__step:nth-child(even) .road__card::before { right: calc(50% - 60px); }

.road__card h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  line-height: 1.35;
  text-wrap: balance;
}
.road__card p {
  margin: 0;
  color: var(--mid);
  font-size: 14.5px;
  line-height: 1.62;
}
/* What the step is worth, as distinct from what it does. Kept to one line
   and set apart, because a benefit buried in the paragraph reads as more
   description. */
.road__win {
  margin-top: 12px !important;
  padding-top: 11px;
  border-top: 1px solid var(--hair-strong);
  color: var(--gain) !important;
  font-size: 13.5px !important;
  font-weight: 500;
}
/* The mentor's side of a step. Same shape, different voice. */
.road__who {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  color: var(--lo);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The end of the road: a closing line on the centre line itself. */
.road__end {
  margin: 30px auto 0;
  max-width: 56ch;
  text-align: center;
  color: var(--mid);
  font-size: 15px;
  line-height: 1.65;
}
.road__end b { color: var(--hi); font-weight: 600; }

/* ── The road, narrow ──────────────────────────────────────────────────
   Below this the two-sided layout stops earning its width: cards get under
   34ch a side and every heading wraps to three lines. The road moves to the
   edge and every card hangs off the same side, which keeps the connection
   without pretending there is room for a zig-zag. */
@media (max-width: 860px) {
  .road { margin-top: 40px; }
  /* ⚠️ Keep the `translate: -50% 0` from the base rule. `left` here is the
     NODE'S CENTRE (half of its 52px), not the bar's left edge, so dropping
     the translate put the 3px bar's edge on the centre and left the road
     1.5px off the node it runs through. Measured at 387px. */
  .road__step::before { left: 26px; }
  .road__step { grid-template-columns: 52px 1fr; gap: 18px; }
  .road__step + .road__step { margin-top: 18px; }
  .road__node { grid-row: 1; grid-column: 1; align-self: start; justify-self: start; }
  .road__step:nth-child(odd)  .road__card,
  .road__step:nth-child(even) .road__card { grid-row: 1; grid-column: 2; }
  .road__card::before { display: none; }
}

@media (max-width: 720px) {
  .road__step::before { left: 21px; }
  .road__step { grid-template-columns: 42px 1fr; gap: 14px; }
  .road__node { width: 42px; height: 42px; font-size: 15px; box-shadow: 0 0 0 6px var(--bg); }
  .road__card { padding: 18px 18px; }
}

/* ── Split sections ────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: 56px;
  max-width: var(--col);
  margin-inline: auto;
  padding: 96px 28px 0;
}
.split--flip .split__art { order: 2; }
.split__art { margin: 0; }
.split__art img {
  width: 100%;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-card);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.95);
}
.split__copy h2 { margin-bottom: 28px; }

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 30px;
}
.feature h3 {
  margin: 14px 0 6px;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.feature p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--mid); }
.feature__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(245, 197, 24, 0.12);
  color: var(--gold);
}
.feature__icon svg { width: 21px; height: 21px; }

/* ── Roles ─────────────────────────────────────────────────────────── */
.roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.role {
  padding: 28px 24px;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-feat);
}
.role h3 { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.014em; }
.role p { margin: 0; color: var(--mid); font-size: 14.5px; line-height: 1.62; }

/* The mentoring blocks carry more than a sentence each, so they get the
   icon and the height. The alerts row stays plain. */
.roles--tall .role { padding: 30px 26px; }
.role__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: rgba(245, 197, 24, 0.12);
  color: var(--gold);
}
.role__icon svg { width: 20px; height: 20px; }

/* ── Where it runs ─────────────────────────────────────────────────── */
.split__lede { margin: 0 0 26px; color: var(--mid); }
.where { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.where li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--mid); font-size: 14.5px; line-height: 1.6;
}
.where strong { color: var(--hi); font-weight: 600; }
.where svg { width: 19px; height: 19px; flex: none; margin-top: 2px; color: var(--gold); }

/* The laptop renders carry their own ground and shadow, so they take no
   border and no card — a frame around a photographed object reads as a
   second, competing frame. */
.split__art--bleed img,
.band__art--wide img { border: none; border-radius: 0; box-shadow: none; }
/* Smaller than the platforms laptop on purpose: this one supports the three
   blocks above it, and two identical machines at the same scale a screen
   apart read as one point made twice. */
.band__art--wide { max-width: 760px; margin-inline: auto; }

/* ── Citation ──────────────────────────────────────────────────────── */
.cite {
  max-width: 62ch;
  margin: 30px auto 0;
  padding-inline-start: 16px;
  border-inline-start: 1px solid var(--gold);
  color: var(--mid);
  font-size: 0.95rem;
}
.cite span { display: block; margin-top: 6px; color: var(--lo); font-size: 13px; }

/* ── Close: the account on one side, the app on the other ──────────── */
/* One panel, not two sections. Signing up and downloading are the same
   decision taken on two different devices, and splitting them into two
   full-width bands would have added a screen of scrolling to a page that
   has just had one taken out of it. */
.start {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 14px;
  max-width: var(--col);
  margin: 120px auto 0;
  padding: 0 28px;
}
.start__panel {
  position: relative;
  padding: 46px 40px 44px;
  background: var(--bg-card);
  border: 1px solid var(--hair);
  border-radius: var(--r-feat);
  overflow: hidden;
}
/* The same drawn field as the hero, at a third of the strength: it marks
   which of the two panels is the primary action without a second gold
   button competing with the one that is already there. */
.start__panel--account::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 64% at 8% 0%, rgba(245, 197, 24, 0.11), transparent 70%);
  pointer-events: none;
}
.start__panel > * { position: relative; }

.start__h3 { margin: 0; font-size: 1.32rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.start__lede { margin: 14px 0 26px; max-width: 44ch; color: var(--mid); }
.start__note { margin: 20px 0 0; color: var(--lo); font-size: 13.5px; }
.start__note a { color: var(--hi); font-weight: 600; text-decoration-color: var(--gold); }

/* ── "or continue with" ────────────────────────────────────────────── */
.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 14px;
  color: var(--lo);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: var(--hair-strong); }

.provs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prov {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  border-radius: 13px;
  background: var(--bg-elev);
  border: 1px solid var(--hair-strong);
  color: var(--hi);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.prov:hover { transform: translateY(-1px); border-color: var(--mid); background: #232C3B; }
.prov:active { transform: translateY(0); }
.prov svg { width: 18px; height: 18px; flex: none; }
.ico--mail { color: var(--mid); }
/* ⚠️ Brand marks carry their own `fill` per path. The global rule paints
   every `svg[viewBox]` with `stroke: currentColor`, which outlined all four
   wedges of the Google G in white before this existed. */
.ico--brand { stroke: none; }

/* ── Store buttons ─────────────────────────────────────────────────── */
.stores { display: grid; gap: 10px; margin: 22px 0 0; }
.store {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--hair-strong);
  color: var(--hi);
  text-decoration: none;
  transition: transform 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease);
}
.store:hover { transform: translateY(-1px); border-color: var(--mid); background: #232C3B; }
.store:active { transform: translateY(0); }
.store__logo { width: 25px; height: 25px; flex: none; fill: currentColor; stroke: none; }
/* Optical, not geometric: Apple's glyph sits inside about three quarters of
   its box while Google's fills its own, so at one size the apple reads as
   the smaller of the two. */
[data-store="ios"] .store__logo { transform: scale(1.12); }

/* The pair at the foot of the hero: its own row under both columns, centred
   on the section rather than tucked under the copy. It has to be a direct
   child of `.hero` for that — inside `.hero__copy` it could only ever centre
   on the left column, which is not the middle of anything.
   They stay smaller than the pair in #start on purpose: one primary action
   per screen, and a full-size store button a line under "Create your
   account" reads as a second call to action competing with it rather than
   as another route to the same place. */
.stores--hero {
  grid-column: 1 / -1;
  justify-self: center;
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: min(470px, 100%);
  margin-top: 20px;
}
.store--sm { gap: 11px; padding: 9px 14px; border-radius: 12px; }
.store--sm .store__logo { width: 21px; height: 21px; }
.store--sm .store__txt small { font-size: 10.5px; }
.store--sm .store__txt strong { font-size: 14.5px; }
.store--sm .store__tag { padding: 3px 8px; font-size: 10px; }
.store__txt { display: grid; margin-inline-end: auto; line-height: 1.18; }
.store__txt small { font-size: 11.5px; color: var(--mid); letter-spacing: 0.02em; }
.store__txt strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.012em; }
/* The listings do not exist yet and the copy two sections up already says
   so. A badge that claims a store it is not in would be the one unverified
   claim on a page whose argument is that claims get verified. */
.store__tag {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.12);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foot {
  max-width: var(--col);
  margin: 88px auto 0;
  padding: 36px 28px 64px;
  border-top: 1px solid var(--hair);
  color: var(--lo);
  font-size: 13.5px;
}
.foot p { margin: 0 0 6px; max-width: 74ch; }
/* The handle is the one thing in the footer a reader is meant to act on, so
   it carries the brand colour; the rest of the footer stays --lo. */
.foot__social { color: var(--gold); text-decoration: none; font-weight: 500; }
.foot__social:hover { text-decoration: underline; }

/* ── The one authored moment: the device cluster settles as the page
   opens, and nothing else animates on arrival. Everything is visible by
   default; the class is added from script. ─────────────────────────── */
/* ⚠️ **Starts visible.** An earlier version faded the cluster up from
   opacity 0, which left the hero's entire proof missing for the better part
   of a second — on the one viewport that has to land immediately. The
   devices are on screen from the first paint; only the settle animates. */
.js-motion .devices img { transform: translateY(12px); }
.js-motion .devices.is-in img {
  transform: none;
  transition: transform 720ms var(--ease);
}

/* ── The nav's own break ───────────────────────────────────────────── */
/* ⚠️ The section links come out at 1060, not at the 720px phone break where
   this rule used to live. Measured on the build: with "Get the app" in the
   row the nav needs 999px of client width, so at a 1010px viewport it fits
   by one pixel and at 1000 it does not — and a nav that overflows widens
   the whole document, not just itself. The row was already at 810 of 810 at
   820px before "Get the app" and "Sign in" were added, so the slack was
   never really there. 1060 is the first width that has some. */
@media (max-width: 1060px) {
  .nav__links { display: none; }
}

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; gap: 8px; padding-bottom: 32px; }
  .hero::before { inset: -8% 0 14% 0; background: radial-gradient(52% 34% at 50% 68%, rgba(245, 197, 24, 0.14), transparent 72%); }
  .devices { max-width: 560px; margin-inline: auto; width: 100%; }
  .split, .split--flip { grid-template-columns: 1fr; gap: 32px; }
  .split--flip .split__art { order: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .roles { grid-template-columns: 1fr; }
  /* The four cards stay two-up right down to the phone break — that is the
     whole reason they are cards. Only the wide fifth one has to give way,
     and its divider becomes a rule above the paragraph instead of beside
     it, because a vertical hairline separating nothing reads as an
     accident. */
  .proof__card--turn { grid-template-columns: 1fr; gap: 22px; }
  .proof__read {
    padding-inline-start: 0;
    padding-top: 22px;
    border-inline-start: none;
    border-top: 1px solid var(--hair-strong);
  }
  .start { grid-template-columns: 1fr; }
}

/* ── Phone ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav { padding: 12px 16px; gap: 12px; }
  .hero { padding: 24px 16px 28px; }
  /* ⚠️ One device on a phone, not three. At 390px the cluster rendered each
     screen about 90px wide with two of them mostly behind the first — three
     unreadable slivers where one readable screen belongs. The others are
     removed from the accessibility tree too, so the alt text of a picture
     nobody can see is not read out either. */
  /* ⚠️ The mockup is one picture, so the phone cannot be re-stacked here.
     Instead the frame crops to the centre device: at 390px the full cluster
     renders each screen about 110px wide, which is texture, not proof. The
     image is scaled up and the box clips the two at the sides. */
  .devices {
    aspect-ratio: 0.72 / 1;
    max-width: 320px;
    margin-inline: auto;
    overflow: hidden;
  }
  .devices img {
    width: 205%;
    max-width: none;
    margin-inline-start: -52.5%;
    margin-block-start: -4%;
  }
  .band, .split { padding: 64px 16px 0; }
  .proof { margin-top: 40px; }
  .proof__inner { padding: 56px 16px 60px; }
  .proof__grid { grid-template-columns: 1fr; margin-top: 32px; }
  .proof__card { padding: 24px 22px 16px; }
  .proof__card--turn { padding: 26px 22px 28px; }
  .actions .btn { width: 100%; }
  /* Stacked here, and nothing is dropped. An earlier pass had these two-up
     with the second line and the tag hidden, because at 390px two-up leaves
     158px a side and the full button needs 166. That was only necessary
     while they sat under the copy, above the device cluster; below it they
     cost nothing that has to be on the first screen, so they get the width
     to say what they are. */
  .stores--hero { grid-template-columns: 1fr; gap: 8px; width: min(300px, 100%); }
  .features { grid-template-columns: 1fr; gap: 22px; }
  .stats { gap: 10px; }
  .stat { padding: 22px 12px; }
  .start { margin-top: 80px; padding: 0 16px; }
  .start__panel { padding: 40px 22px; border-radius: var(--r-card); }
  /* Two 50px-tall provider buttons side by side at 358px leave about 170px
     each, and "Google" beside its mark is already 108px of that. Stacked,
     each one is a full-width target. */
  .provs { grid-template-columns: 1fr; }
  .foot { margin-top: 64px; padding: 28px 16px 56px; }
  /* Below this width a 1322px-wide desktop capture is unreadable texture,
     so the two desktop shots step aside and the argument stays in the copy
     and in the device cluster, which was photographed for this size. */
  .split__art, .band__art { display: none; }
  /* The laptop renders stay: they are the only thing that shows the
     desktop version exists, and at this width they are still readable. */
  .split__art--bleed, .band__art--wide { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Brand: the C mark beside the name, in Apple's register ───────────
   One solid silhouette, no tile behind it, the word in a medium weight
   and Title case. The mark carries the weight; the word only says it. */
.brand { gap: 9px; }
.brand .brand__mark { width: 28px; height: 28px; margin: 0; background: none; border-radius: 0; }
.brand .brand__word { font-weight: 500; letter-spacing: 0.02em; font-size: 17px; text-transform: none; }

/* ── Waiting list ────────────────────────────────────────────────────
   The form replaced the sign-up panel on 28/09, while accounts are
   closed. The row is a grid rather than flex so the button keeps its
   own width and the field takes what is left; under 560px they stack,
   because a 44px-tall field beside a button is unusable on a phone. */
.wait { margin: 0 0 4px; }
.wait__label {
  display: block; font-size: 12.5px; color: var(--lo);
  margin: 0 0 7px; letter-spacing: .02em;
}
.wait__row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.wait__input {
  min-width: 0; height: 52px; padding: 0 16px;
  background: var(--bg-card); color: var(--hi);
  border: 1px solid var(--hair-strong); border-radius: 12px;
  font: inherit; font-size: 15.5px;
}
.wait__input::placeholder { color: var(--lo); }
.wait__input:focus-visible { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(245,197,24,.18); }
.wait__btn { white-space: nowrap; }
.wait__btn[disabled] { opacity: .6; pointer-events: none; }

/* ⚠️ Off-screen, not display:none. A hidden input that is not rendered
   is skipped by some bots, which is the opposite of what a honeypot is
   for; and `visibility:hidden` is announced by nothing but still fills. */
.wait__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

.wait__msg { margin: 10px 0 0; font-size: 13.5px; min-height: 19px; color: var(--mid); }
.wait__msg[data-state="ok"] { color: var(--gain); }
.wait__msg[data-state="err"] { color: var(--loss); }

@media (max-width: 560px) {
  .wait__row { grid-template-columns: 1fr; }
}