/* ══════════════════════════════════════════════════════════════════════════
   RunFlex — launch site
   The app's "Live Reasoning" v2 language, on the web. Palette and type are
   the same tokens the app ships (client/src/lib/v2-theme.ts, tailwind `rf.*`);
   change them there and here together.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ---- palette (mirrors RF in client/src/lib/v2-theme.ts) ---- */
  --bg:          #F4F0E8;
  --paper:       #FAF7F0;
  --paper-deep:  #EFE9DC;
  --ink:         #1A1815;
  --ink-soft:    #3A332B;
  --muted:       #7A7268;
  --soft:        #A89E92;
  --accent:      #C66A3D;
  --accent-deep: #8E4924;
  --accent-soft: rgba(198,106,61,0.10);
  --accent-hair: rgba(198,106,61,0.25);
  --park:        #E2E7CC;
  --water:       #D5DCE2;
  --hair:        rgba(26,24,21,0.10);
  --hair-bold:   rgba(26,24,21,0.16);

  /* night scene (the well-lit section inverts the world) */
  --night:       #17161C;
  --night-deep:  #100F14;
  --night-ink:   #F2EEE6;
  --night-muted: #8E877E;
  --lamp:        #F3C98B;

  /* ---- type ---- */
  --display: "Instrument Serif", "Newsreader", Georgia, serif;
  --news:    "Newsreader", "Source Serif 4", Georgia, serif;
  --sans:    "Geist", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* ---- shape ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-card:   0 14px 30px -18px rgba(40,30,20,0.18);
  --shadow-raised: 0 18px 40px -22px rgba(40,30,20,0.30);
  --shadow-cta:    0 8px 18px -10px rgba(26,24,21,0.33);

  --bar-h: 58px;
  --gutter: clamp(20px, 5vw, 64px);
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
/* `hidden` has to beat any component's own display rule. It didn't: the UA
   sheet's [hidden]{display:none} loses to an author `.btn{display:inline-flex}`,
   so the "Feel the turn cue" button — gated to touch devices in JS, because on
   a desktop it can do nothing at all — was rendered on every desktop as a
   button that did nothing when pressed. This is the class of bug, not the one
   instance: anything the page marks hidden must actually be hidden. */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; text-decoration: none;
}
.skip:focus { left: 0; }

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

/* ── layout ────────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wrap--narrow { max-width: 720px; text-align: center; }
.wrap--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.sec { padding: clamp(88px, 13vw, 168px) 0; position: relative; }

/* ── type scale ────────────────────────────────────────────────────────── */
.display {
  font-family: var(--display);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  color: var(--accent);
}
/* Sized so the hero's headline, the coach's ask AND the CTA all clear the fold
   on a 900px-tall laptop. It was 92px, which pushed the button — the whole
   point of the page — below the crease on exactly the screen most people
   would open this on. It came down again with the headline: a 45-character
   line at 76px is four lines, and the fourth one is the button's space. */
.display--xl { font-size: clamp(33px, 4.4vw, 58px); }
.display--lg { font-size: clamp(34px, 5.6vw, 64px); }

.lede {
  font-family: var(--news);
  font-size: clamp(17px, 2.1vw, 21px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin-top: 20px;
}
.wrap--narrow .lede { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
}
.eyebrow--accent { color: var(--accent-deep); }
.eyebrow--night  { color: var(--night-muted); }

.micro {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 18px;
}
.micro--night { color: var(--night-muted); max-width: 44ch; text-transform: none; font-family: var(--sans); font-size: 13px; letter-spacing: 0; line-height: 1.6; }

.mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  flex: none;
  display: inline-block;
}
.dot--pulse { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  --btn-y: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--btn-y) 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, background .18s, color .18s, border-color .18s;
}
.btn--ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-cta);
}
.btn--ink:hover  { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(26,24,21,0.45); }
.btn--ink:active { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hair-bold);
}
.btn--ghost:hover { background: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.btn--sm { --btn-y: 9px; padding: var(--btn-y) 18px; font-size: 13.5px; }
.btn--lg { --btn-y: 16px; padding: var(--btn-y) 32px; font-size: 16px; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* ── sticky bar ────────────────────────────────────────────────────────── */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  /* Visible from the first paint — the mark is how a visitor knows where they
     have landed, and hiding it until they scroll answered that question late.
     The ground and rule fade in instead, so it reads as part of the hero at
     the top and as a bar once you're past it. */
  background: rgba(244,240,232,0);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.bar.is-shown {
  background: rgba(244,240,232,0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hair);
}
.bar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.bar__mark { width: 28px; height: 28px; border-radius: 7px; }
.bar__right { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); }
/* Quiet on purpose: the page's job is the launch list, but an existing user
   arriving at the front door still has to be able to get into the app. */
.bar__signin {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s;
}
.bar__signin:hover { color: var(--ink); }
.bar__word { font-family: var(--display); font-size: 21px; letter-spacing: -0.01em; }

/* ══ 1 · HERO ═══════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  isolation: isolate;
}
.hero__map {
  position: absolute;
  inset: -6% -6% -6% -6%;
  z-index: 0;
  will-change: transform;
}
.hero__map svg { width: 100%; height: 100%; }
/* Bone wash so the headline always clears the map beneath it. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(244,240,232,.60) 0%, rgba(244,240,232,.10) 30%, rgba(244,240,232,.06) 50%, rgba(244,240,232,.46) 82%, rgba(244,240,232,.86) 96%, var(--bg) 100%),
    /* A soft wash on the left only, so the headline has ground to sit on
       while the map stays legible on the right where the route lives. */
    linear-gradient(to right, rgba(244,240,232,.86) 0%, rgba(244,240,232,.55) 34%, rgba(244,240,232,0) 56%);
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--bar-h) + 28px) var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.hero__body { max-width: 700px; }
.display--xl { max-width: 19ch; }

/* The mark above the fold. The sticky bar carries it too, but the bar is
   chrome — this is the thing you actually look at on landing, so it sits with
   the headline and takes the space the eyebrow used to. */
.hero__mark {
  width: 62px; height: 62px;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 10px 24px -14px rgba(40,30,20,.5);
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: rgba(250,247,240,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  opacity: 0;
  transform: translateY(6px);
}
.chip.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }

.ask {
  margin-top: 26px;
  border-left: 2px solid var(--accent);
  padding-left: 18px;
  /* Reserve the tallest ask's three lines up front, in the QUOTE's size rather
     than the container's, so the CTA below doesn't jump on every keystroke. */
  min-height: calc(clamp(19px, 2.7vw, 27px) * 1.35 * 3);
  max-width: 30ch;
}
.ask__quote {
  font-family: var(--news);
  font-style: italic;
  font-size: clamp(19px, 2.7vw, 27px);
  line-height: 1.35;
  color: var(--ink);
}
.ask__caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--accent);
  vertical-align: -0.14em;
  margin-left: 2px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Sized to the button row, so the caption below centres under the PAIR of
   buttons rather than against the left edge of the headline's column. */
.hero__act { width: fit-content; max-width: 100%; }
.hero__act .micro { text-align: center; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* NOT a .reveal: the reveal observer trims 12% off the bottom of the root, and
   this sits inside exactly that band at the foot of the hero — it would never
   intersect, and never appear. It fades itself in instead. */
.scroll-cue {
  align-self: center;
  opacity: 0;
  animation: cue-in .8s ease .9s forwards;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  transition: color .2s;
}
.scroll-cue:hover { color: var(--ink); }
@keyframes cue-in { to { opacity: 1; } }
.scroll-cue__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.scroll-cue__chevron { display: block; animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .65; }
  50%      { transform: translateY(5px); opacity: 1; }
}

/* ══ 2 · VERSUS ═════════════════════════════════════════════════════════ */
.sec--versus { background: var(--bg); }
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin-top: clamp(40px, 6vw, 72px);
}
.versus__side { margin: 0; }
.versus__stage {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--paper-deep);
  box-shadow: var(--shadow-card);
}
.versus__side--them .versus__stage { filter: saturate(0.15); }
.versus__side--us   .versus__stage { box-shadow: var(--shadow-raised); }
.versus__stage svg { width: 100%; height: 100%; }
.versus figcaption { margin-top: 20px; }
.versus figcaption p {
  font-family: var(--news);
  font-size: 16.5px;
  color: var(--ink-soft);
  margin-top: 8px;
  max-width: 34ch;
}
.tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  display: inline-block;
}
.tag--accent {
  color: var(--accent-deep);
  background: var(--accent-soft);
  border-color: var(--accent-hair);
}
.versus__vs {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--soft);
  align-self: center;
  padding-bottom: 58px;
}

/* ══ 2b · SIDE BY SIDE ═════════════════════════════════════════════════
   Sits straight after .sec--versus on the same ground, so the top padding is
   short: it reads as the proof under "The difference", not a new chapter.
   One raised paper panel runs the full height of the RunFlex column. */
.sec--compare { background: var(--bg); padding-top: clamp(24px, 5vw, 56px); }
.compare__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.compare {
  margin-top: clamp(36px, 5vw, 56px);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.compare__col { width: 22%; }
.compare th, .compare td { padding: 18px 20px; vertical-align: middle; text-align: left; font-weight: 400; }
.compare thead th { padding-top: 22px; padding-bottom: 18px; }
.compare .compare__mark { text-align: center; }

.compare__head {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.compare__short { display: none; }

.compare .compare__us {
  background: var(--paper);
  border-left: 1px solid var(--accent-hair);
  border-right: 1px solid var(--accent-hair);
}
.compare thead .compare__us {
  border-top: 1px solid var(--accent-hair);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.compare tbody:last-of-type tr:last-child .compare__us {
  border-bottom: 1px solid var(--accent-hair);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.compare tbody tr:not(.compare__group) > * { border-top: 1px solid var(--hair); }
.compare tbody tr.compare__group + tr > * { border-top: 0; }

.compare .compare__group > * { padding-top: 34px; padding-bottom: 10px; }
.compare tbody:first-of-type .compare__group > * { padding-top: 14px; }
.compare__group-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare__group-label--us { color: var(--accent-deep); }

.compare__feat { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.compare__feat small {
  display: block;
  margin-top: 4px;
  font-family: var(--news);
  font-size: 15.5px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.45;
}
.compare__basics .compare__feat { font-weight: 400; color: var(--ink-soft); }
.compare sup, .compare__note sup { font-size: 0.7em; color: var(--accent-deep); margin-left: 1px; }

.compare__yes, .compare__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}
.compare__yes { border: 1.5px solid var(--hair-bold); color: var(--ink-soft); }
.compare__yes svg { width: 14px; height: 14px; }
.compare__yes--us { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.compare__no { color: var(--soft); }
.compare__no::before { content: ""; width: 14px; height: 1.5px; background: currentColor; border-radius: 2px; }

/* "Some" for partial support, "Soon" for not yet shipped */
.compare__word {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 5px 10px;
  line-height: 1.2;
}
.compare__word--some { color: var(--muted); border: 1px solid var(--hair-bold); }
.compare__word--soon { color: var(--accent-deep); border: 1px dashed var(--accent-hair); }

.compare__note { margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.compare__note sup { margin: 0 3px 0 0; }

@media (max-width: 720px) {
  .compare__col { width: 80px; }
  .compare th, .compare td { padding: 14px 10px; }
  .compare thead th { padding-left: 4px; padding-right: 4px; }
  .compare th[scope="row"], .compare th[scope="rowgroup"] { padding-left: 0; }
  .compare thead .tag { font-size: 9px; letter-spacing: 0.08em; padding: 4px 8px; }
  .compare__full { display: none; }
  .compare__short { display: inline; }
  .compare__head { font-size: 9.5px; letter-spacing: 0.1em; }
  .compare__feat { font-size: 15px; }
  .compare__feat small { font-size: 14.5px; }
  .compare__yes, .compare__no { width: 26px; height: 26px; }
  .compare__yes svg { width: 12px; height: 12px; }
  .compare__word { font-size: 9px; letter-spacing: 0.08em; padding: 4px 7px; }
  .compare thead .compare__us { border-radius: var(--r-md) var(--r-md) 0 0; }
  .compare tbody:last-of-type tr:last-child .compare__us { border-radius: 0 0 var(--r-md) var(--r-md); }
}

/* ══ 3 · THINK ══════════════════════════════════════════════════════════ */
.sec--think { background: linear-gradient(to bottom, var(--bg), var(--paper-deep) 70%, var(--bg)); }
.ticks { margin-top: 26px; display: grid; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.ticks li::before {
  content: "";
  position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.split__text .btn { margin-top: 34px; }
.split__stage { display: flex; justify-content: center; }

/* --- phone frame --- */
.phone {
  width: min(340px, 84vw);
  aspect-ratio: 9 / 19.2;
  background: var(--paper-deep);
  border-radius: 46px;
  padding: 9px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 40px 80px -40px rgba(40,30,20,.55),
    0 0 0 1px var(--hair-bold);
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--bg);
}
.phone__map { position: absolute; inset: 0; }
.phone__map svg { width: 100%; height: 100%; }
.phone__ui {
  position: relative;
  height: 100%;
  padding: 16px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  box-shadow: var(--shadow-card);
}
.panel {
  margin-top: auto;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-md);
  padding: 13px 14px;
  box-shadow: var(--shadow-card);
}
.panel--reason { margin-top: auto; }
.panel--draft  { margin-top: 0; }
.panel__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 10px;
}
.panel__head::after { /* the hairline between the two labels */
  content: ""; position: absolute;
}
.steps { display: grid; gap: 8px; }
.steps li {
  display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--soft);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), color .45s;
}
.steps li.is-in { opacity: 1; transform: none; }
.steps li.is-done { color: var(--ink-soft); }
.steps li i {
  flex: none;
  width: 8px; height: 8px; margin-top: .34em;
  border-radius: 50%;
  border: 1.5px solid var(--accent-hair);
  transition: background .35s, border-color .35s;
}
.steps li.is-done i { background: var(--accent); border-color: var(--accent); }
.draft__name {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.draft__desc {
  font-family: var(--news);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.panel--draft {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.panel--draft.is-in { opacity: 1; transform: none; }

/* ══ 4 · NIGHT ══════════════════════════════════════════════════════════ */
.sec--night {
  background: var(--night);
  color: var(--night-ink);
  overflow: hidden;
  isolation: isolate;
}
.sec--night .display em { color: var(--lamp); }
.sec--night .lede { color: #C8C1B7; }
.night__map { position: absolute; inset: 0; z-index: 0; }
.night__map svg { width: 100%; height: 100%; }
.night__map::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--night) 0%, rgba(23,22,28,.94) 34%, rgba(23,22,28,.28) 68%, rgba(23,22,28,.55) 100%);
}
.sec--night .wrap { position: relative; z-index: 1; }
.night__text { max-width: 40ch; }
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.city {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lamp);
  border: 1px solid rgba(243,201,139,.3);
  background: rgba(243,201,139,.07);
  border-radius: var(--r-pill);
  padding: 7px 14px;
}
.city--soon { color: var(--night-muted); border-color: rgba(142,135,126,.3); background: none; }

/* ══ 5 · DECK ═══════════════════════════════════════════════════════════ */
.sec--deck { background: var(--bg); }
.deck {
  margin-top: clamp(36px, 5vw, 60px);
  overflow: hidden;
  /* let the outer cards bleed toward the viewport edges */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.deck__track {
  display: flex;
  gap: 20px;
  transition: transform .62s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.route-card {
  flex: 0 0 clamp(240px, 30vw, 320px);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s, opacity .5s;
  opacity: .5;
}
.route-card.is-active { opacity: 1; transform: translateY(-8px); box-shadow: var(--shadow-raised); }
.route-card__map { aspect-ratio: 5 / 4; background: var(--bg); border-bottom: 1px solid var(--hair); }
.route-card__map svg { width: 100%; height: 100%; }
.route-card__body { padding: 16px 18px 20px; }
.route-card__meta { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.route-card__name {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.08;
}
.route-card__stats {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}
.route-card__stats span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.route-card__stats b {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.route-card__stats em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}
/* The climb profile. Every card carries one, because "flat" and "one proper
   hill" are among the things people ask for — a number alone doesn't show
   WHERE the hill is. */
.elev {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
}
.elev__svg { width: 100%; height: 26px; display: block; }
.route-card__desc {
  font-family: var(--news);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 10px;
}
.deck__dots { display: flex; gap: 7px; justify-content: center; margin-top: 30px; }
.deck__dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hair-bold);
  transition: background .3s, width .3s;
}
.deck__dots span.is-active { background: var(--accent); width: 20px; border-radius: var(--r-pill); }

/* The way out of the deck into the town pages. A line, not a section: the
   reader has just swiped a hand of routes for one city, and this is where
   they would want another. Body type, so it reads as the section talking;
   the link borrows .faq__more's hairline underline. */
.deck__more {
  margin-top: 26px;
  text-align: center;
  font-family: var(--news);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.deck__more a {
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hair);
  padding-bottom: 1px;
}
.deck__more a:hover { border-bottom-color: var(--accent); }

/* ══ 6 · THE WATCH ══════════════════════════════════════════════════════
   The watch's own palette, not the site's. The ground is the `V2` token from
   watchos/RunFlexWatch Watch App/Models/NavigationState.swift; the accent and
   the off-route red are the map face's own (`MapFace` in Views/RunMapView.swift,
   and SwiftUI's system red). Change them together with those files. */
.sec--watch {
  --w-ground:   #131110;
  --w-accent:   #E2683C;
  --w-red:      #FF453A;
  background: linear-gradient(to bottom, var(--bg), var(--paper-deep) 55%, var(--bg));
}
.wrap--split-rev .split__stage { order: 1; }
.wrap--split-rev .split__text  { order: 2; }

.split__stage { flex-direction: column; align-items: center; gap: 18px; }

/* --- the strap ---
   The case on its own reads as a small phone, which undercuts the whole
   section. A strap running off the top and bottom of the frame settles it in
   one glance — cropped deliberately, because a whole strap floating in space
   looks like a product shot of a strap. */
.watch-rig {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(300px, 74vw);
}
.watch-strap {
  width: 62%;
  height: 54px;
  background: linear-gradient(100deg, #2F2A25, #1D1A17 48%, #262220);
  box-shadow: 0 0 0 1px rgba(26,24,21,.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: 8px 0;
  overflow: hidden;
}
/* The band tapers into the lugs, so the join reads as one object. */
.watch-strap--top {
  border-radius: 9px 9px 5px 5px;
  margin-bottom: -3.2%;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}
.watch-strap--bottom {
  border-radius: 5px 5px 9px 9px;
  margin-top: -3.2%;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
}
/* Adjustment holes — small, and the only thing that says "sport band". */
.watch-strap i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #100E0C;
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
.watch-strap--top i:first-child, .watch-strap--bottom i:last-child { opacity: .55; }

/* Lugs: the short bridge where the band meets the case. */
.watch__lug {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  height: 7%;
  background: linear-gradient(#332E29, #221E1B);
  z-index: -1;
}
.watch__lug--top    { top: -4%; border-radius: 6px 6px 0 0; }
.watch__lug--bottom { bottom: -4%; border-radius: 0 0 6px 6px; }

/* --- the case --- */
.watch {
  position: relative;
  width: min(300px, 74vw);
  aspect-ratio: 1 / 1.19;          /* 45mm case proportions */
  background: linear-gradient(155deg, #3A352F, #201C18 55%, #2C2721);
  border-radius: 27%;
  padding: 6.5%;
  box-shadow:
    0 1px 0 rgba(255,255,255,.16) inset,
    0 40px 80px -38px rgba(40,30,20,.6),
    0 0 0 1px rgba(26,24,21,.28);
}
.watch__crown, .watch__button {
  position: absolute;
  right: -2.2%;
  background: linear-gradient(#4A443C, #2A2622);
  border-radius: 3px;
}
.watch__crown  { top: 30%; width: 3.4%; height: 11%; border-radius: 4px; }
.watch__button { top: 46%; width: 2.6%; height: 13%; }

.watch__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 21%;
  overflow: hidden;
  background: var(--w-ground);
}
.watch__map { position: absolute; inset: 0; }
.watch__map svg { width: 100%; height: 100%; }

/* --- the map face (RunMapView.swift) ---
   Every size below is the app's, in points, on the 205 × 251pt screen of an
   Ultra 49mm. `--pt` is one of those points at whatever size the watch is
   drawn, so the face scales as one piece rather than reflowing: a container
   query unit where the browser has them, a fixed fallback (the 300px watch)
   where it doesn't. */
.watch__ui {
  --pt: 1.273px;
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--mono);
  color: #FFFFFF;
}
@supports (width: 1cqw) {
  .watch__screen { container-type: inline-size; }
  .watch__ui { --pt: calc(100cqw / 205); }
}

/* Scrims, not cards. Alphas are the handoff's, which are still open pending
   an outdoor wrist check — change them in RunMapView.swift first. */
.watch__scrim { position: absolute; left: 0; right: 0; }
.watch__scrim--top {
  top: 0;
  height: calc(var(--pt) * 100);
  background: linear-gradient(to bottom, rgba(0,0,0,.80), rgba(0,0,0,.50) 50%, rgba(0,0,0,0));
}
.watch__scrim--bottom {
  bottom: 0;
  height: calc(var(--pt) * 85);
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.50) 55%, rgba(0,0,0,0));
}

/* The system clock. Not the app's to move, and not in its font. Inset a
   little further than the watch draws it because this screen's corners are
   rounder than the real one's. */
.watch__clock {
  position: absolute;
  top: calc(var(--pt) * 9);
  right: calc(var(--pt) * 20);
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(var(--pt) * 13);
  line-height: 1;
  color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
}

/* --- top cluster: the turn banner ---
   30pt down to clear the clock, arrow at leading 12 in a 28pt box, text at
   leading 48. Swaps between states with the same short fade-and-settle the
   old bottom card used to arrive with. */
.watch__banner {
  position: absolute;
  top: calc(var(--pt) * 30);
  left: calc(var(--pt) * 12);
  right: calc(var(--pt) * 12);
  min-height: calc(var(--pt) * 34);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.watch__banner.is-swap { opacity: 0; transform: translateY(calc(var(--pt) * -4)); }

.watch__turn { display: flex; align-items: flex-start; gap: calc(var(--pt) * 8); }
.watch__glyph {
  flex: none;
  width: calc(var(--pt) * 28);
  height: calc(var(--pt) * 28);
  fill: none;
  stroke: var(--w-accent);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.watch__glyph.is-left { transform: scaleX(-1); }
.watch__turn-text { min-width: 0; }
.watch__dist {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pt) * 3);
  line-height: 1;
  white-space: nowrap;
}
.watch__dist b {
  font-weight: 700;
  font-size: calc(var(--pt) * 25);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.watch__dist span {
  font-weight: 600;
  font-size: calc(var(--pt) * 9);
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.70);
}
.watch__sub {
  margin-top: calc(var(--pt) * 2);
  font-weight: 500;
  font-size: calc(var(--pt) * 10.5);
  line-height: 1.2;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Off route: the red capsule, and what to do about it underneath. */
.watch__off { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--pt) * 3); }
.watch__off-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 4) calc(var(--pt) * 10);
  border-radius: var(--r-pill);
  background: var(--w-red);
  font-weight: 700;
  font-size: calc(var(--pt) * 13);
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.watch__off-pill svg { width: calc(var(--pt) * 13); height: calc(var(--pt) * 13); flex: none; color: #FFFFFF; }
.watch__sub--rejoin { margin-top: 0; padding-left: calc(var(--pt) * 4); text-transform: uppercase; }

/* --- bottom cluster: hairline, then two numbers ---
   Hairline 50pt up, labels 16pt up, numbers 4pt above them. Fixed halves so
   the digits don't shift as the values change. */
.watch__bottom {
  position: absolute;
  left: calc(var(--pt) * 12);
  right: calc(var(--pt) * 12);
  bottom: calc(var(--pt) * 16);
}
.watch__progress {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--pt) * 34);
  height: calc(var(--pt) * 2);
  border-radius: calc(var(--pt) * 1);
  background: rgba(255,255,255,.22);
  overflow: hidden;
}
.watch__progress i {
  display: block;
  height: 100%;
  width: 22%;
  border-radius: inherit;
  background: var(--w-accent);
}
.watch__row { display: grid; grid-template-columns: 1fr 1fr; }
.watch__col { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--pt) * 4); }
.watch__col--trail { align-items: flex-end; }
.watch__col b {
  font-weight: 600;
  font-size: calc(var(--pt) * 26);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* The 4pt gap is from the baseline, not the line box: pull the box's
     descent back so the baseline lands 26pt up, where the spec puts it. */
  margin-bottom: calc(var(--pt) * -5);
}
.watch__col em {
  font-style: normal;
  font-weight: 600;
  font-size: calc(var(--pt) * 7.5);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* --- haptics, drawn --- */
.watch__haptic {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.watch__haptic i {
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 27%;
  opacity: 0;
}
.watch__haptic i.is-firing {
  animation: haptic-ring 900ms cubic-bezier(.2,.6,.3,1) 1;
}
@keyframes haptic-ring {
  0%   { opacity: .65; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.22); }
}

.watch__legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  text-align: left;
  transition: color .3s;
}
.watch__legend.is-firing { color: var(--accent-deep); }
.watch__legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  flex: none;
  transition: background .2s;
}
.watch__legend.is-firing .watch__legend-dot { background: var(--accent); }

.watch__feel { align-self: center; }

/* ══ 7 · THE REST ═══════════════════════════════════════════════════════ */
.sec--three { background: linear-gradient(to bottom, var(--bg), var(--paper-deep)); }
.three {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
}
.card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  padding: 10px 10px 26px;
  box-shadow: var(--shadow-card);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-raised); }
.card__art {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-md);
  background: var(--bg);
  overflow: hidden;
  margin-bottom: 20px;
}
.card__art svg { width: 100%; height: 100%; }
.card__title { font-family: var(--display); font-size: 24px; padding: 0 14px; line-height: 1.1; }
.card p {
  font-family: var(--news);
  font-size: 14.5px;
  color: var(--ink-soft);
  padding: 8px 14px 0;
}

/* ══ 8 · QUESTIONS ══════════════════════════════════════════════════════
   Native <details>, no JS. The answers stay in the DOM when they are shut,
   which is what a crawler and a screen reader both need — and the reason this
   section can carry FAQ markup at all (see server/structured-data.ts).

   `.sec--three` above fades --bg into --paper-deep and `.sec--story` below is
   flat --paper-deep, so this sits on --paper-deep to keep that run unbroken. */
.sec--faq { background: var(--paper-deep); }
.faq {
  margin-top: clamp(34px, 5vw, 52px);
  /* .wrap--narrow centres its heading; the answers have to read as prose. */
  text-align: left;
  border-top: 1px solid var(--hair);
}
.faq__item { border-bottom: 1px solid var(--hair); }
.faq__q {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--news);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.4;
  color: var(--ink);
  list-style: none;
  transition: color .25s ease;
}
/* Safari draws its own triangle through ::-webkit-details-marker rather than
   ::marker, and ignores list-style — both have to go or the custom sign below
   lands next to a stray disclosure arrow. */
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }
.faq__q:hover { color: var(--accent-deep); }
.faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}
/* The +/− sign. Drawn from two rules rather than a glyph so it rotates into
   the other state instead of swapping character, and so it inherits colour. */
.faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: auto;
  align-self: center;
  background:
    linear-gradient(var(--soft), var(--soft)) center/13px 1.5px no-repeat,
    linear-gradient(var(--soft), var(--soft)) center/1.5px 13px no-repeat;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s;
}
.faq__item[open] .faq__q { color: var(--accent-deep); }
.faq__item[open] .faq__q::after {
  transform: rotate(45deg);
  background:
    linear-gradient(var(--accent), var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center/1.5px 13px no-repeat;
}
.faq__a {
  padding: 0 40px 26px 0;
  font-family: var(--news);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 62ch;
}
.faq__a p + p { margin-top: 14px; }
.faq__more a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hair);
  padding-bottom: 2px;
}
.faq__more a:hover { border-bottom-color: var(--accent); }

/* ══ 9 · THE STORY ══════════════════════════════════════════════════════ */
.sec--story { background: var(--paper-deep); }
/* Centred rather than top-aligned: a 3:2 photo is about half the height of
   the text beside it, and pinning it to the top left a column of dead space
   under it. */
.story__figure { margin: 0; align-self: center; }

.story__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-raised);
  background: var(--bg);
}
.story__caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
  margin-top: 12px;
}

.story__body { margin-top: 22px; display: grid; gap: 14px; }
.story__body p {
  font-family: var(--news);
  font-size: clamp(16px, 1.9vw, 18.5px);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 52ch;
}

.story__links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.story__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
  padding: 9px 15px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  background: var(--paper);
  transition: color .25s, border-color .25s, transform .25s;
}
.story__link:hover {
  color: var(--accent-deep);
  border-color: var(--accent-hair);
  transform: translateY(-2px);
}

/* ══ 10 · JOIN ═══════════════════════════════════════════════════════════ */
.sec--join {
  background: var(--paper-deep);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.join__map { position: absolute; inset: 0; z-index: 0; opacity: .5; }
.join__map svg { width: 100%; height: 100%; }
.join__map::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 50%, rgba(239,233,220,.94) 0%, rgba(239,233,220,.72) 55%, rgba(239,233,220,.98) 100%);
}
.sec--join .wrap { position: relative; z-index: 1; }
.join__mark {
  width: 76px; height: 76px;
  border-radius: 20px;
  margin: 0 auto 26px;
  box-shadow: var(--shadow-raised);
}

.signup {
  margin-top: 36px;
  display: grid;
  gap: 14px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 1px 0 0;
}
.field__wrap { position: relative; }
.field__input {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hair-bold);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 16px;               /* 16px stops iOS zooming the page on focus */
  color: var(--ink);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.field__input::placeholder { color: var(--soft); }
.field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field__input--select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.field__input--select:invalid { color: var(--soft); }
.field__caret {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.field.is-bad .field__input { border-color: var(--accent-deep); }

/* --- searchable city combobox --- */
.combo { position: relative; }
.combo__list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0; right: 0;
  max-height: 232px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--hair-bold);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-raised);
  padding: 5px;
}
.combo__list[hidden] { display: none; }
.combo__list li {
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 15px;
  cursor: pointer;
  scroll-margin: 5px;
}
.combo__list li[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-deep); }
.combo__empty {
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--news);
  font-style: italic;
}

/* --- opt-in --- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  margin-top: 2px;
}
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent__box {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1px solid var(--hair-bold);
  border-radius: 6px;
  background: var(--paper);
  display: grid;
  place-items: center;
  color: transparent;
  transition: background .16s, border-color .16s, color .16s;
}
.consent input:checked + .consent__box {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.consent input:focus-visible + .consent__box {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.consent__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.consent.is-bad .consent__box { border-color: var(--accent-deep); }

.signup__submit { width: 100%; margin-top: 4px; }
.signup__legal {
  text-transform: none;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0;
  line-height: 1.5;
  margin-top: 4px;
}
.signup__legal a { color: var(--muted); }
.signup__legal a:hover { color: var(--accent); }

/* --- instagram --- */
.insta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-decoration: none;
  transition: color .18s;
}
.insta:hover { color: var(--accent); }

/* honeypot — off-screen, never focusable by a person */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.signup__msg {
  font-family: var(--sans);
  font-size: 14.5px;
  min-height: 1.5em;
  color: var(--ink-soft);
}
.signup__msg.is-error { color: var(--accent-deep); }
.signup__msg.is-ok    { color: var(--accent-deep); font-family: var(--news); font-style: italic; font-size: 17px; text-align: center; }
/* On success the whole form gives way to the message — there is nothing left
   to fill in, and leaving it there invites a second submit. */
.signup.is-done .field,
.signup.is-done .field-row,
.signup.is-done .consent,
.signup.is-done .signup__submit,
.signup.is-done .signup__legal { display: none; }

/* ══ FOOTER ═════════════════════════════════════════════════════════════ */
.foot {
  background: var(--bg);
  border-top: 1px solid var(--hair);
  padding: 34px 0;
}
.foot__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.foot__word { font-family: var(--display); font-size: 20px; }
/* Wraps because the row grew. Five items fitted a 375px phone on one line
   and six do not: the labels are uppercase mono with 0.1em tracking, so
   "Running routes" alone is about 100px. Without this the footer scrolls
   sideways on a phone, which is the one thing the page must never do. */
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.foot__links a, .foot__copy {
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.foot__links a:hover { color: var(--accent); }

/* The consent control lives in the footer as a button, not a link — it opens
   the bar rather than going anywhere — so it has to be un-styled back to
   looking like its neighbours. */
.foot__consent {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
}
.foot__consent:hover { color: var(--accent); }

/* The dedication. Faint enough that it reads as part of the paper rather than
   as copy, bright enough that anyone who looks at the bottom of the page will
   see it — and it comes all the way up on hover, focus or tap. */
.foot__dedication {
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--muted);
  opacity: .16;
  cursor: default;
  transition: opacity .5s ease, color .5s ease;
}
.foot__dedication:hover,
.foot__dedication:active { opacity: 1; color: var(--accent); }
.foot__kisses { letter-spacing: 0.28em; }

/* ══ CONSENT BAR ════════════════════════════════════════════════════════
   Built by analytics.js, and only when a tag is actually configured — so
   there is no markup for it in index.html. It sits above the sticky bar and
   below nothing: until it is answered, no third-party script has loaded. */
.consent-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 80;
  padding: 0 var(--gutter) max(16px, env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(115%);
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
}
.consent-bar.is-in { opacity: 1; transform: none; }
.consent-bar__inner {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--hair-bold);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
}
.consent-bar__text {
  flex: 1 1 380px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.consent-bar__text a { color: var(--accent); text-underline-offset: 2px; }
.consent-bar__actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}
.consent-bar__text b { font-weight: 500; }
@media (max-width: 620px) {
  .consent-bar { padding-left: 14px; padding-right: 14px; }
  .consent-bar__inner { gap: 14px; padding: 14px 16px; }
  .consent-bar__text { font-size: 12.5px; line-height: 1.5; }
  .consent-bar__actions { margin-left: 0; width: 100%; }
  .consent-bar__actions .btn { flex: 1 1 auto; }
}

/* ══ REVEALS ════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
}

/* ══ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .wrap--split { grid-template-columns: 1fr; }
  .split__text { order: 1; }
  .split__stage { order: 2; margin-top: 12px; }
  /* The reversed split is a desktop rhythm device only; on one column the
     text still has to introduce the thing it's describing. */
  .wrap--split-rev .split__text { order: 1; }
  .wrap--split-rev .split__stage { order: 2; }
  .three { grid-template-columns: repeat(2, 1fr); }
  .versus { grid-template-columns: 1fr; }
  .versus__vs { padding: 0; justify-self: center; }
  .hero__body { max-width: none; }
  .display--xl { max-width: 17ch; }
}
@media (max-width: 620px) {
  .hero__veil {
    background: linear-gradient(to bottom, rgba(244,240,232,.66) 0%, rgba(244,240,232,.30) 30%, rgba(244,240,232,.90) 66%, var(--bg) 100%);
  }
  .ask { max-width: none; }
  /* Full-width buttons need the wrapper to stop shrink-wrapping them. The
     caption still centres, because here the row IS the full width. */
  .hero__act { width: 100%; }
  .hero__cta .btn { flex: 1 1 100%; }
  .field-row { grid-template-columns: 1fr; }
  /* The answer's right padding exists to keep prose clear of the +/− sign,
     which sits in the question row above it. On a phone that column of empty
     space costs more than the alignment buys. */
  .faq__a { padding-right: 0; font-size: 15px; }
  .faq__q { gap: 12px; padding: 19px 0; }
  .foot__inner { flex-direction: column; text-align: center; }
  /* Centred to match the stacked column above it, now that it wraps. */
  .foot__links { justify-content: center; }
}

/* ══ MOTION PREFERENCES ═════════════════════════════════════════════════
   Everything above degrades to a static, fully-legible page: the reveals
   land, the SVG routes are drawn at full length, and nothing loops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .chip, .steps li, .panel--draft { opacity: 1 !important; transform: none !important; }
  .ask__caret { display: none; }
  .bar { transform: none; }
}