/* ==========================================================================
   Slowcoach — getslowcoach.com

   The site is the app widened. Same family, same palette, same one accent, and
   the same signature: the Ren mark — the app icon's curve and dot — stands
   above every single thing Ren says on this page, and above nothing else. Its
   dot breathes while Ren is actually speaking, and only then. Everything hangs
   off one left axis in a single column, because that is what a phone screen
   does and this product only ever existed on a phone screen.

   The token block below is a verbatim copy of design/tokens.css (v2, "warm"),
   inlined so the page needs one stylesheet rather than two. If tokens.css
   changes, re-copy the :root and dark blocks; there is no build step.
   ========================================================================== */

:root {
  /* Colour: light ("morning") */
  --paper:            #FFF7F2;
  --paper-raised:     #FFFFFF;
  --paper-tint:       #FFEBE0;
  --paper-sunken:     #F8E9DF;
  --ink:              #38302C;
  --ink-2:            #655249;
  --ink-3:            #7C6559;
  --hairline:         #F1E2D7;

  --accent:           #EE6A3C;
  --accent-ink:       #2A1611;
  --accent-strong:    #C6462A;
  --accent-tint:      #FFE3D6;
  --accent-line:      #F3AF90;
  --accent-fill:      #EE6A3C;
  --accent-fill-ink:  #2A1611;

  --sage:             #79A78A;
  --sage-strong:      #456F53;
  --sage-tint:        #E4F0E7;

  --scrim:            rgba(56, 48, 44, 0.34);

  --shadow-card:  0 1px 2px rgba(120, 74, 52, 0.05), 0 6px 18px rgba(120, 74, 52, 0.07);
  --shadow-lift:  0 2px 4px rgba(120, 74, 52, 0.06), 0 12px 28px rgba(120, 74, 52, 0.10);
  --shadow-sheet: 0 -8px 40px rgba(120, 74, 52, 0.18);

  --font-voice: "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-ui:    "Nunito", ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-voice-size: 30px;  --t-voice-lh: 1.30; --t-voice-ls: -0.011em; --t-voice-wt: 800;
  --t-voice-sm-size: 24px; --t-voice-sm-lh: 1.34; --t-voice-sm-ls: -0.008em; --t-voice-sm-wt: 700;
  --t-title-size: 20px;  --t-title-lh: 1.28; --t-title-wt: 700;
  --t-body-size:  17px;  --t-body-lh:  1.50; --t-body-wt:  400;
  --t-label-size: 15px;  --t-label-lh: 1.35; --t-label-wt: 600;
  --t-caption-size: 13px; --t-caption-lh: 1.45; --t-caption-wt: 400;
  --t-eyebrow-size: 13px; --t-eyebrow-lh: 1.20; --t-eyebrow-ls: 0.005em; --t-eyebrow-wt: 700;
  --t-mono-size:  14px;  --t-mono-lh:  1.45; --t-mono-ls: 0.01em;

  --s-1: 2px;  --s-2: 4px;  --s-3: 8px;  --s-4: 12px; --s-5: 16px;
  --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10: 56px; --s-11: 72px;
  --gutter: 22px;
  --measure: 21ch;

  --r-pill: 999px;
  --r-field: 18px;
  --r-tile: 24px;
  --r-card: 22px;
  --r-sheet: 28px;

  --hair: 1px;
  --border: 2px;
  --tap-min: 56px;

  --ren-size: 32px;
  --ren-stroke: 3.4px;
  --ren-dot: 3.4px;

  --ease-settle: cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --d-micro: 140ms;
  --d-standard: 260ms;
  --d-utterance: 420ms;
  --breath: 2600ms;

  /* Site-only: the single column everything hangs off. */
  --column: 41rem;

  /* Site-only: the Ren mark's curve, as a mask so it takes a token colour.
     Coordinates are exactly the ones in design/README.md, "The Ren mark". */
  --ren-curve: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M 7 6 C 7 18, 12 23, 21 23" fill="none" stroke="black" stroke-width="3.4" stroke-linecap="round"/></svg>');
}

:root[data-theme="dark"] {
  --paper:            #221C1A;
  --paper-raised:     #2E2724;
  --paper-tint:       #3B2E28;
  --paper-sunken:     #191413;
  --ink:              #F5EAE3;
  --ink-2:            #C6B4AA;
  --ink-3:            #AC978D;
  --hairline:         #3A312D;
  --accent:           #FF9166;
  --accent-ink:       #2A1611;
  --accent-strong:    #FF9166;
  --accent-tint:      #422A21;
  --accent-line:      #7A4632;
  --accent-fill:      #E2603A;
  --accent-fill-ink:  #2A1611;
  --sage:             #9BC7A6;
  --sage-strong:      #9BC7A6;
  --sage-tint:        #26332B;
  --scrim:            rgba(10, 7, 6, 0.58);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.26);
  --shadow-lift:  0 2px 4px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.34);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.50);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #221C1A; --paper-raised: #2E2724; --paper-tint: #3B2E28; --paper-sunken: #191413;
    --ink: #F5EAE3; --ink-2: #C6B4AA; --ink-3: #AC978D; --hairline: #3A312D;
    --accent: #FF9166; --accent-ink: #2A1611; --accent-strong: #FF9166;
    --accent-tint: #422A21; --accent-line: #7A4632;
    --accent-fill: #E2603A; --accent-fill-ink: #2A1611;
    --sage: #9BC7A6; --sage-strong: #9BC7A6; --sage-tint: #26332B;
    --scrim: rgba(10, 7, 6, 0.58);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.26);
    --shadow-lift:  0 2px 4px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.34);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.50);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 1ms; --d-standard: 1ms; --d-utterance: 1ms; --breath: 1ms; }
}

/* ---- Faces, self-hosted, latin only -------------------------------------
   One family for the whole page: Ren's voice and the apparatus speak with the
   same mouth, at different volumes. Nunito is variable on the web, so 400
   through 800 is one file per subset. Mono is for the rare measurement. */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/fonts/nunito-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/fonts/nunito-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-wt);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; }

/* The layout classes below all set display, so [hidden] has to win. */
[hidden] { display: none !important; }

a { color: var(--accent-strong); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 10;
  background: var(--paper-raised); color: var(--ink);
  border-radius: var(--r-pill); box-shadow: var(--shadow-lift);
  padding: var(--s-3) var(--s-6); font-size: var(--t-label-size); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }

/* ---- Top bar ------------------------------------------------------------- */
.topbar {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--ink); text-decoration: none;
  font-size: var(--t-title-size); font-weight: 800; letter-spacing: -0.016em;
}
.wordmark img { display: block; border-radius: 9px; }
.topbar-link {
  font-size: var(--t-label-size); font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  padding: var(--s-3) var(--s-6); border-radius: var(--r-pill);
  background: var(--paper-tint);
  transition: color var(--d-micro) var(--ease-settle);
}
.topbar-link:hover { color: var(--accent-strong); }

/* ---- Column -------------------------------------------------------------- */
main { max-width: var(--column); margin: 0 auto; padding: 0 var(--gutter); }

.hero { padding: var(--s-10) 0 var(--s-11); }
.band { padding: 0 0 var(--s-11); }

/* ---- Section labels, prose, small print ---------------------------------
   v2 drops the tracked-out uppercase eyebrow: a section label is now a short
   bold line in the same face, in coral. It stops shouting. */
.eyebrow {
  margin: 0 0 var(--s-4);
  font-size: var(--t-eyebrow-size); line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls); font-weight: var(--t-eyebrow-wt);
  color: var(--accent-strong);
}

.prose { color: var(--ink-2); max-width: 34rem; }
.prose p { margin: 0 0 var(--s-5); }
.prose p:last-child { margin-bottom: 0; }
.lead { color: var(--ink); font-weight: 600; }

.said-by {
  margin: var(--s-4) 0 0;
  font-size: var(--t-caption-size); line-height: var(--t-caption-lh);
  color: var(--ink-3);
  display: flex; align-items: center; gap: var(--s-3);
}

/* ---- THE SIGNATURE: an utterance ----------------------------------------
   Ren's words are never in a box and never in quotation marks. The Ren mark
   stands above them with a 14px gap: a curve and a dot, exactly the app
   icon's, and the only place on this page Ren has a body. It is not a mascot.
   No face, no eyes, no animation except the breath — and the breath is the
   dot alone, only while Ren is actually speaking. */
.utterance {
  position: relative;
  display: block;
  padding-top: calc(var(--ren-size) + 14px);
}
.utterance::before,
.utterance::after { content: ""; position: absolute; }
.utterance::before {
  top: 0; left: 0;
  width: var(--ren-size); height: var(--ren-size);
  background: var(--accent);
  -webkit-mask: var(--ren-curve) center / contain no-repeat;
  mask: var(--ren-curve) center / contain no-repeat;
}
.utterance::after {
  /* the dot: centre (27, 23) r 3.4 in the mark's 32-unit box */
  top: calc(var(--ren-size) * 0.6125);
  left: calc(var(--ren-size) * 0.7375);
  width: calc(var(--ren-size) * 0.2125);
  height: calc(var(--ren-size) * 0.2125);
  border-radius: 50%;
  background: var(--accent);
}
.utterance.speaking::after {
  animation: breath var(--breath) var(--ease-settle) infinite;
}
@keyframes breath {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.16); opacity: 0.72; }
}
@keyframes utter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.utterance p {
  margin: 0;
  font-family: var(--font-voice);
  font-size: clamp(24px, 5vw, 31px);
  line-height: var(--t-voice-lh);
  letter-spacing: var(--t-voice-ls);
  font-weight: var(--t-voice-wt);
  color: var(--ink);
  text-wrap: pretty;
  max-width: 21ch;
}
.utterance.sm { --ren-size: 24px; }
.utterance.sm p {
  font-size: clamp(20px, 4.2vw, 25px); line-height: var(--t-voice-sm-lh);
  letter-spacing: var(--t-voice-sm-ls); font-weight: var(--t-voice-sm-wt);
  max-width: 26ch;
}
.utterance.changed p { animation: utter var(--d-utterance) var(--ease-settle) both; }

@media (prefers-reduced-motion: reduce) {
  .utterance.speaking::after { animation: none; }
}

/* ---- Section headings, same mouth, one notch quieter --------------------- */
.voice-h {
  margin: 0 0 var(--s-6);
  font-family: var(--font-voice);
  font-size: clamp(24px, 4.6vw, 30px);
  line-height: 1.24; letter-spacing: -0.014em; font-weight: 800;
  color: var(--ink); text-wrap: balance;
  max-width: 24ch;
}

/* ---- Hero ---------------------------------------------------------------- */
.hero .utterance { --ren-size: 40px; }
.hero .utterance p { font-size: clamp(31px, 7.4vw, 46px); letter-spacing: -0.02em; }
.hero .said-by { min-height: 20px; }

.name-form {
  margin: var(--s-8) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.name-form input {
  flex: 1 1 12rem; min-width: 0;
  height: var(--tap-min);
  padding: 0 var(--s-6);
  font-family: var(--font-ui); font-size: var(--t-body-size); font-weight: 500;
  color: var(--ink);
  background: var(--paper-raised);
  border: 0; border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--d-micro) var(--ease-settle);
}
.name-form input::placeholder { color: var(--ink-3); font-weight: 400; }
.name-form input:focus { box-shadow: var(--shadow-card), inset 0 0 0 var(--border) var(--accent); }
.name-form input[aria-invalid="true"] { box-shadow: var(--shadow-card), inset 0 0 0 var(--border) var(--accent-strong); }

.name-form button,
.waitlist-form button,
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--tap-min); padding: 0 var(--s-8);
  font-family: var(--font-ui); font-size: var(--t-label-size); font-weight: 700;
  letter-spacing: -0.006em;
  color: var(--accent-fill-ink); background: var(--accent-fill);
  border: 0; border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  cursor: pointer; text-decoration: none;
  transition: box-shadow var(--d-micro) var(--ease-settle),
              transform var(--d-micro) var(--ease-settle);
}
.name-form button:hover,
.waitlist-form button:hover,
.button:hover { box-shadow: var(--shadow-lift); }
.name-form button:active,
.waitlist-form button:active,
.button:active { transform: translateY(1px); box-shadow: var(--shadow-card); }
.name-form button[disabled],
.waitlist-form button[disabled] { opacity: 0.55; cursor: default; box-shadow: none; }

/* Under ~480px the name row stops being a row: a full-width field with a
   full-width button under it, which is what a thumb wants anyway. Above it
   they share a line and the field takes the slack. */
@media (max-width: 30rem) {
  .name-form { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
  .name-form input,
  .name-form button { width: 100%; }
  .hero-cta .button { width: 100%; }
}

.hero-sub {
  margin: var(--s-8) 0 0;
  max-width: 34rem;
  color: var(--ink-2);
}
.hero-cta { margin: var(--s-8) 0 0; }

.named-only { margin: var(--s-5) 0 0; display: flex; align-items: center; gap: var(--s-4); }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--t-caption-size); font-weight: 700;
  color: var(--accent-strong); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.named-only .dot { color: var(--ink-3); }

/* The three bars only move while Ren is actually speaking. */
.playing { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; }
.playing i {
  display: block; width: 3px; height: 4px; background: var(--accent); border-radius: var(--r-pill);
  animation: bar 900ms var(--ease-settle) infinite;
}
.playing i:nth-child(2) { animation-delay: 150ms; }
.playing i:nth-child(3) { animation-delay: 300ms; }
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 12px; } }

@media (prefers-reduced-motion: reduce) {
  .playing i { animation: none; height: 8px; }
}

/* ---- The moves ----------------------------------------------------------- */
.moves { list-style: none; margin: 0; padding: 0; }
.move {
  margin: 0 0 var(--s-5);
  padding: var(--s-8) var(--s-7);
  background: var(--paper-raised);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.move:last-of-type { margin-bottom: 0; }
.move h3 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: 800;
  color: var(--ink); letter-spacing: -0.014em;
}
.move p { margin: 0; color: var(--ink-2); }
.move em { font-style: normal; font-weight: 700; color: var(--ink); }
.move .utterance { margin-top: var(--s-7); }
.move .utterance p { color: var(--ink); }

/* Walking is the one place the sage half of the palette belongs: sage is the
   colour the app gives to "walk", and a walk is an equal, never a lesser run. */
.move.walk { background: var(--sage-tint); box-shadow: none; }
.move.walk .said-by { color: var(--sage-strong); font-weight: 600; }

/* ---- The first four runs ------------------------------------------------- */
.runs {
  list-style: none; margin: var(--s-7) 0 0; padding: 0;
  background: var(--paper-raised);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.runs li {
  padding: var(--s-6) var(--s-7);
  display: grid; gap: var(--s-2);
}
.runs li + li { border-top: var(--hair) solid var(--hairline); }
.run-n {
  margin: 0;
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: 700;
  color: var(--accent-strong);
}
.runs li p + p { margin: 0; color: var(--ink-2); }

@media (min-width: 40rem) {
  .runs li { grid-template-columns: 7.5rem 1fr; gap: var(--s-5); align-items: baseline; }
}

/* ---- Who it is not for --------------------------------------------------- */
.nots {
  list-style: none; margin: 0 0 var(--s-7); padding: 0; max-width: 34rem;
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.nots li {
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-pill);
  background: var(--paper-tint);
  color: var(--ink-2);
  font-size: var(--t-label-size); line-height: var(--t-label-lh); font-weight: 500;
}

/* ---- Waitlist ------------------------------------------------------------ */
.waitlist-form { margin: var(--s-8) 0 0; max-width: 27rem; }
.field { margin: 0 0 var(--s-5); }
.field label {
  display: block; margin: 0 0 var(--s-3); padding-left: var(--s-6);
  font-size: var(--t-caption-size); font-weight: 700; color: var(--ink-3);
}
.field input {
  display: block; width: 100%;
  height: var(--tap-min); padding: 0 var(--s-6);
  font-family: var(--font-ui); font-size: var(--t-body-size); font-weight: 500;
  color: var(--ink);
  background: var(--paper-raised);
  border: 0; border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--d-micro) var(--ease-settle);
}
.field input:focus { box-shadow: var(--shadow-card), inset 0 0 0 var(--border) var(--accent); }
.field input[aria-invalid="true"] { box-shadow: var(--shadow-card), inset 0 0 0 var(--border) var(--accent-strong); }
.waitlist-form button { width: 100%; }

.form-note {
  margin: var(--s-5) 0 0; padding-left: var(--s-6);
  font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--ink-3);
}
.form-note a { color: var(--ink-3); }
.form-note a:hover { color: var(--accent-strong); }

.form-error {
  margin: var(--s-4) 0 0;
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-field);
  background: var(--accent-tint);
  font-size: var(--t-caption-size); font-weight: 600; color: var(--accent-ink);
}

.utterance.done { margin-top: var(--s-8); }

/* ---- FAQ ----------------------------------------------------------------- */
.qa {
  max-width: 36rem;
  background: var(--paper-raised);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.qa details + details { border-top: var(--hair) solid var(--hairline); }
.qa summary {
  padding: var(--s-6) calc(var(--s-7) + 20px) var(--s-6) var(--s-7);
  cursor: pointer; list-style: none; position: relative;
  font-size: var(--t-body-size); font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; position: absolute; right: var(--s-7); top: calc(50% - 1px);
  width: 12px; height: var(--border); border-radius: var(--r-pill); background: var(--accent);
}
.qa summary::before {
  content: ""; position: absolute; right: calc(var(--s-7) + 5px); top: calc(50% - 6px);
  width: var(--border); height: 12px; border-radius: var(--r-pill); background: var(--accent);
  transition: transform var(--d-standard) var(--ease-settle), opacity var(--d-micro) linear;
}
.qa details[open] summary::before { transform: scaleY(0); opacity: 0; }
.qa summary:hover { color: var(--accent-strong); }
.qa .answer { padding: 0 var(--s-7) var(--s-7); color: var(--ink-2); }
.qa .answer p { margin: 0; }

/* ---- Closer -------------------------------------------------------------- */
.closer { padding-bottom: var(--s-11); }

/* ---- Footer -------------------------------------------------------------- */
.footer {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--s-9) var(--gutter) var(--s-10);
  color: var(--ink-3);
}
.footer-name {
  margin: 0 0 var(--s-5);
  font-size: var(--t-label-size); font-weight: 800; color: var(--ink-2);
  letter-spacing: -0.012em;
}
.footer-links { margin: 0 0 var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-links a { font-size: var(--t-caption-size); font-weight: 600; color: var(--ink-3); }
.footer-links a:hover { color: var(--accent-strong); }
.footer-small {
  margin: 0 0 var(--s-3); max-width: 34rem;
  font-size: var(--t-caption-size); line-height: var(--t-caption-lh);
}
.footer-small:last-child { margin-bottom: 0; }

/* ---- Legal pages --------------------------------------------------------- */
.legal { padding: var(--s-9) 0 var(--s-11); }
.legal h1 {
  margin: 0 0 var(--s-4);
  font-family: var(--font-voice);
  font-size: clamp(29px, 6vw, 38px); line-height: 1.2; font-weight: 800;
  letter-spacing: -0.02em; color: var(--ink);
}
.legal h2 {
  margin: var(--s-9) 0 var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-title-size); line-height: var(--t-title-lh); font-weight: 800;
  letter-spacing: -0.014em; color: var(--ink);
}
.legal p, .legal li { color: var(--ink-2); max-width: 34rem; }
.legal p { margin: 0 0 var(--s-5); }
.legal ul { margin: 0 0 var(--s-5); padding-left: var(--s-6); }
.legal li { margin: 0 0 var(--s-3); }
.legal code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--paper-tint); padding: 1px 7px; border-radius: var(--r-pill);
}
.legal .updated {
  font-family: var(--font-mono); font-size: var(--t-mono-size);
  letter-spacing: var(--t-mono-ls); color: var(--ink-3);
}