/* ═══════════════════════════════════════════════════════════════════
   Sigil landing page.
   Consumes design-system tokens only — no raw hex outside this comment.
   Layout register: 1200px content max, 40px desktop gutter / 22px mobile.
   ═══════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--vermillion-ink); }

::selection { background: var(--focus-ring); color: var(--ink); }

:focus-visible {
  outline: var(--focus-width) solid var(--vermillion);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--body-sm-size);
}
.skip-link:focus { left: 12px; top: 12px; }

/* ── Shared primitives ──────────────────────────────────────────── */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 40px;
}

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--border-thick);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overline {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--overline-size);
  line-height: var(--overline-lh);
  letter-spacing: var(--overline-track);
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: 12px;
}

/* Editorial section heading — serif light, the Sigil display register. */
.section-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Button — mirrors SigilDesignSystem_30f807.Button (primary / lg). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-lg { padding: 15px 28px; font-size: var(--body-lg-size); }

.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-press); color: var(--accent-contrast); }

.btn-block { display: flex; width: 100%; }

/* ── Header ─────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: var(--border-hair) solid var(--hairline);
}

.header-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 40px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.site-nav { display: flex; align-items: center; gap: 36px; }
.site-nav a { font-size: var(--body-sm-size); color: var(--ink-secondary); }

.nav-cta {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  padding: 9px 16px;
  border: var(--border-hair) solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color var(--dur-micro) var(--ease-out);
}

/* ── Hero ───────────────────────────────────────────────────────── */

.hero {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 72px 40px 40px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-hair) solid var(--hairline);
  box-shadow: var(--shadow-contact);
}
/* Square crop. The source is 3:4 portrait, so `height: auto` alone would
   render it tall; aspect-ratio forces the box and object-fit crops to fill it.
   Biased upward off-centre — a centred crop of a portrait clips the top of the
   head, and the ear (the point of the shot) sits in the upper third. */
.hero-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  object-position: center 30%;
}

.hero-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 56px;
  line-height: 60px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
/* The hero overline sits tighter to the headline than section overlines. */
.hero-copy .overline { margin-bottom: var(--space-4); }

.hero-sub {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--ink-secondary);
  max-width: 480px;
  margin-bottom: var(--space-5);
}

/* Sits below the signup form in the hero, so the spacing is on top. */
.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.price-now {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.price-was {
  font-size: var(--body-lg-size);
  color: var(--ink-tertiary);
  text-decoration: line-through;
}
.price-tag {
  font-family: var(--font-mono);
  font-size: var(--data-tag-size);
  letter-spacing: var(--data-tag-track);
  text-transform: uppercase;
  color: var(--ink-secondary);
  padding: 4px 8px;
  border: var(--border-hair) solid var(--border-strong);
  border-radius: var(--radius-full);
}

.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-note {
  font-family: var(--font-mono);
  font-size: var(--body-size);
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
}

/* ── Trust strip ────────────────────────────────────────────────── */

.trust-strip {
  border-block: var(--border-hair) solid var(--hairline);
  background: var(--surface-sunken);
}
.trust-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 22px 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
/* Single-item variant: one badge in a 3-column grid reads as two missing
   columns, so the grid drops out and the item centres. */
.trust-inner--single { display: flex; justify-content: center; }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: var(--body-sm-size); }
.trust-item .icon { color: var(--ink-secondary); }

/* ── How it works ───────────────────────────────────────────────── */

.how {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-8) 40px;
}
.how .section-title { max-width: 560px; margin-bottom: 56px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.step { border-top: var(--border-hair) solid var(--border-strong); padding-top: 20px; }
.step-num {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 40px;
  line-height: 1;
  color: var(--ink-tertiary);
  margin-bottom: 20px;
}
.step-title {
  font-weight: var(--fw-semibold);
  font-size: 20px;
  line-height: 26px;
  margin-bottom: 10px;
}
.step-desc { font-size: 15px; line-height: 24px; color: var(--ink-secondary); }

/* ── Why it matters ─────────────────────────────────────────────── */

.why {
  background: var(--surface-sunken);
  border-block: var(--border-hair) solid var(--hairline);
}
.why-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-8) 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.why-title { margin-bottom: var(--space-4); }
.why-body { font-size: 17px; line-height: 27px; color: var(--ink-secondary); }

.why-media {
  border-radius: 14px;
  overflow: hidden;
  border: var(--border-hair) solid var(--hairline);
  box-shadow: var(--shadow-contact);
}
/* Square crop, same reason as .hero-media. Centred is fine here — the device
   sits low-centre and the fruit bowl high-left, so both survive the crop. */
.why-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
}

/* ── Gallery / the science ──────────────────────────────────────── */

.gallery { background: var(--paper); }
.gallery-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 80px 40px;
}
.gallery .section-title { margin-bottom: var(--space-6); }

.gallery-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
.gallery-media {
  border-radius: 14px;
  overflow: hidden;
  border: var(--border-hair) solid var(--hairline);
}
.gallery-media img {
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center 35%;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: 44px;
}
.stat-value {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 84px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}
/* The single vermillion moment in this view. */
.stat-accent { color: var(--vermillion); }
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--data-tag-size);
  letter-spacing: var(--data-tag-track);
  text-transform: uppercase;
  color: var(--ink-tertiary);
  line-height: 15px;
}

/* Single column since the second category was removed — a 1fr 1fr grid with
   one child would strand the list in the left half with dead space beside it. */
.tracked-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
.tracked-label { margin-bottom: 4px; }
.tracked-list li {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 12px 0;
  border-bottom: var(--border-hair) solid var(--hairline);
}

/* ── FAQ ────────────────────────────────────────────────────────── */

.faq {
  background: var(--surface-sunken);
  border-block: var(--border-hair) solid var(--hairline);
}
.faq-inner {
  max-width: 820px;
  margin-inline: auto;
  padding: 88px 40px;
}
.faq-title { font-size: 36px; line-height: 42px; margin-bottom: 40px; }

.faq-item { border-top: var(--border-hair) solid var(--border-strong); }
.faq-item h3 { margin: 0; font: inherit; }

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 22px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--body-lg-size);
  color: var(--ink);
}
.faq-q:hover { color: var(--vermillion-ink); }
.faq-icon { color: var(--ink-tertiary); }

.faq-panel p {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink-secondary);
  padding: 0 40px 24px 0;
}

/* ── About us ───────────────────────────────────────────────────── */

.about {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 104px 40px 40px;
}
/* The beige card carried over from the old reserve section, now a single
   column: overline, headline, one paragraph. */
.about-card {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-contact);
  padding: 56px 48px;
}
.about-card .overline { margin-bottom: var(--space-3); }
.about-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 38px;
  line-height: 44px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 20ch;
}
.about-body {
  font-size: 17px;
  line-height: 27px;
  color: var(--ink-secondary);
  max-width: 62ch;
}

/* ── Sign-up band ───────────────────────────────────────────────── */

/* Centered narrow column, matching the FAQ. The perks list and the form stay
   left-aligned inside it — ragged-left check marks and a centered input read
   as sloppy, so only the block is centered, not its contents. */
.signup-band {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 40px 40px 104px;
}
.signup-band-inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.signup-band-title { margin-bottom: var(--space-5); }

.signup-perks {
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  text-align: left;
}
.signup-perks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink-secondary);
}
.perk-icon { color: var(--vermillion); margin-top: 3px; }

.signup-band .signup-form {
  margin-inline: auto;
  text-align: left;
}

/* ── Sign-up form (hero + band) ─────────────────────────────────── */

.signup-form { width: 100%; max-width: 480px; }

.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }

.signup-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 15px 16px;
  font-family: var(--font-sans);
  font-size: var(--body-lg-size);
  line-height: 1;
  color: var(--ink);
  background: var(--paper);
  border: var(--border-hair) solid var(--border-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.signup-input::placeholder { color: var(--ink-tertiary); }
.signup-input:hover { border-color: var(--ink-tertiary); }
.signup-input[aria-invalid="true"] { border-color: var(--vermillion); }

.signup-note {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  letter-spacing: 0.02em;
  color: var(--ink-secondary);
}

.signup-status {
  margin-top: 10px;
  font-size: var(--body-sm-size);
  line-height: 22px;
  color: var(--vermillion-ink);
}
.signup-status:empty { display: none; }
.signup-status--ok { color: var(--ink); font-weight: var(--fw-medium); }

/* Honeypot — off-canvas rather than display:none, which some bots skip. */
.signup-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

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

/* ── Footer ─────────────────────────────────────────────────────── */

.site-footer {
  border-top: var(--border-hair) solid var(--hairline);
  background: var(--surface-sunken);
}
.footer-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 56px 40px 64px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: 40px;
}
.footer-mark {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: var(--space-4);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-nav a { font-size: var(--body-sm-size); color: var(--ink-secondary); }

.footer-bottom {
  border-top: var(--border-hair) solid var(--hairline);
  padding-top: var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-disclaimer {
  font-size: var(--caption-size);
  line-height: 18px;
  color: var(--ink-tertiary);
  max-width: 640px;
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: var(--data-tag-size);
  letter-spacing: var(--data-tag-track);
  color: var(--ink-tertiary);
}

/* ── Tablet ─────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .stat-value { font-size: 64px; }
  .why-inner { gap: var(--space-6); }
  .gallery-grid { gap: var(--space-5); }
}

/* ── Mobile ─────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  /* 68px → 52px. Pure fold budget: the bar is sticky, so every pixel it keeps
     is a pixel the signup button loses for the whole scroll. The wordmark and
     CTA come down with it so the bar stays visually balanced. */
  .header-inner { padding-inline: 22px; height: 52px; }
  .wordmark { font-size: 22px; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: var(--caption-size); }
  .nav-cta { padding: 8px 12px; }


  /* Vertical space here is scarce: the Instagram in-app browser eats ~150px of
     an iPhone's height with its own chrome, and the signup button needs to land
     as close to the fold as possible. The hero image stays full-width — it is
     the page — so the space comes out of the gaps instead.

     These sit about halfway back from the desktop-mobile values (40/32/24/32/24).
     The budget came from hero-sub dropping to three lines on a 390px phone; if
     that copy grows back to four, this hero gets ~28px taller and the button
     starts to slip under the fold again. */
  .hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 10px 22px 24px;
  }

  /* The hero image is the single tallest thing above the fold, so a 10% crop
     buys more than any type change: 346 → 310px on a 390px phone. The box goes
     slightly landscape and `cover` drops the bottom 80 of the square's 768 rows
     — sofa and lower sweater, nothing load-bearing — while `top` pins the crop
     so the head keeps its headroom. Deliberately no separate mobile asset: the
     square file is already downloaded, and a second crop would be one more
     thing to re-derive whenever this ratio moves. */
  .hero-media img { aspect-ratio: 768 / 688; object-position: center top; }

  .hero-title { margin-bottom: 12px; }
  /* Drops to body size (18 → 16px, 28 → 24px leading) so the three lines it
     wraps to on a 390px phone cost ~12px less, and sits directly above the
     form — the "Reserve yours now" overline was removed for the same reason. */
  .hero-sub {
    font-size: var(--body-size);
    line-height: 24px;
    margin-bottom: 16px;
  }
  /* Scales with the viewport so the headline stays on one line down to the
     narrowest phones; capped at the 38px desktop-mobile size. */
  .hero-title {
    font-size: min(38px, 6.9vw);
    line-height: 1.12;
    white-space: nowrap;
  }

  /* 18 → 16px. Still a 46px tall target (14 + 16 + 14 + hairlines), above the
     44px minimum, and 16px keeps iOS from zooming the page on focus — anything
     smaller does. */
  .signup-input { font-size: var(--body-size); padding: 14px; }

  .trust-inner { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px; }

  .how { padding-inline: 22px; }
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }

  .why-inner { grid-template-columns: 1fr; gap: 36px; padding: var(--space-7) 22px; }

  .gallery-inner { padding-inline: 22px; }
  .gallery-grid { grid-template-columns: 1fr; gap: var(--space-5); }

  .faq-inner { padding-inline: 22px; }

  .about { padding: var(--space-7) 22px 24px; }
  .about-card { padding: 40px 26px; }
  .about-title { font-size: 32px; line-height: 38px; }

  .signup-band { padding: 24px 22px var(--space-7); }

  .footer-inner { padding-inline: 22px; }
}

/* Below ~520px the four nav items no longer fit beside the wordmark and
   push the page into horizontal overflow. Drop the section links and keep
   the early-access CTA — the point of the page. The sections stay reachable
   by scrolling; the footer carries only the legal links. */
@media (max-width: 520px) {
  .site-nav a:not(.nav-cta) { display: none; }
}

@media (max-width: 460px) {
  .stat-grid, .tracked-grid { grid-template-columns: 1fr; }
  .btn-lg { padding: 15px 20px; font-size: var(--body-size); }
  /* Below this the input and button no longer sit side by side legibly. */
  .signup-row > * { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Short page (`/`) — hero, about, CTA.
   Everything above belongs to the long-form page kept at /alpha; these
   rules are additive so that page is untouched. The register is the same:
   same tokens, same type scale, same vermillion button.
   ═══════════════════════════════════════════════════════════════════ */

/* Full-bleed section. The colour lives on the section so the beige runs
   edge to edge; `.band-inner` holds the content to the 1200px measure.
   Sections alternate paper / sunken down the page. */
.band { background: var(--paper); }
.band--sunken {
  background: var(--surface-sunken);
  border-block: var(--border-hair) solid var(--hairline);
}
.band-inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 104px 40px;
}

/* Hero: one centred column. There is no product shot on this page, so the
   two-column split the long page uses has nothing to balance against. */
.lede-hero .band-inner {
  max-width: 860px;
  padding-block: 128px 112px;
  text-align: center;
}
.lede-title {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 56px;
  line-height: 62px;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.lede-body {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--ink-secondary);
  max-width: 64ch;
}
/* Centred blocks only where the section itself is centred — in the
   left-aligned About section, auto margins would float the 64ch measure
   off the left edge the heading sits on. */
.lede-hero .lede-body, .lede-cta .lede-body { margin-inline: auto; }

/* About / CTA share a narrow measure; long lines at 1200px are unreadable. */
.lede-section .band-inner { max-width: 780px; }
.lede-section .section-title { margin-bottom: var(--space-4); }
.lede-body + .lede-body { margin-top: var(--space-4); }

/* The Austin line — a quiet sign-off, not body copy. */
.lede-signoff {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--body-sm-size);
  letter-spacing: 0.02em;
  color: var(--ink-tertiary);
}

.lede-cta .band-inner { text-align: center; }
.lede-cta .signup-form { margin-inline: auto; margin-top: 32px; text-align: left; }

@media (max-width: 760px) {
  .band-inner { padding: var(--space-7) 22px; }
  .lede-hero .band-inner { padding-block: 64px 56px; }
  .lede-title { font-size: 38px; line-height: 44px; }
  .lede-section .section-title { font-size: 32px; line-height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Legal pages (`privacy.html`, `terms.html`).
   Long-form prose, which the reset at the top of this file removes the
   defaults for — headings, paragraphs, and lists all arrive with no
   margins and no markers, so this scope restores them deliberately.
   ═══════════════════════════════════════════════════════════════════ */

/* Quieter than the homepage hero: a legal page is reference material,
   not a pitch, so the title drops from 56px to the h1 register. */
.legal-hero .band-inner { padding-block: 88px var(--space-6); }
.legal-hero .lede-title { font-size: 44px; line-height: 50px; margin-bottom: var(--space-3); }

.legal-updated {
  font-family: var(--font-mono);
  font-size: var(--body-sm-size);
  letter-spacing: 0.02em;
  color: var(--ink-tertiary);
}

.legal .band-inner { max-width: 780px; padding-block: 0 var(--space-8); }

.legal h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-serif-light);
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  /* Clears the 68px sticky header when a section is linked directly. */
  scroll-margin-top: 88px;
}
.legal h2:first-child { margin-top: 0; }

.legal h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  color: var(--ink);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  scroll-margin-top: 88px;
}

.legal p,
.legal li {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink-secondary);
  max-width: 68ch;
}
.legal p + p { margin-top: var(--space-3); }

/* The reset strips `list-style` and `padding` from every list on the site;
   inside prose the markers carry meaning, so put them back here only. */
.legal ul {
  list-style: disc;
  padding-left: var(--space-4);
  margin: var(--space-3) 0;
}
.legal li + li { margin-top: var(--space-2); }
.legal li::marker { color: var(--ink-tertiary); }

/* The global `a` rule removes underlines, which is right for nav and wrong
   for a link buried mid-paragraph. */
.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-tertiary);
}
.legal a:hover { color: var(--vermillion-ink); text-decoration-color: currentColor; }

.legal strong { font-weight: var(--fw-semibold); color: var(--ink); }

/* Set-off block for the standing disclaimers — the wellness and
   forward-looking notices, which readers skim past in running text. */
.legal-callout {
  margin: var(--space-4) 0;
  padding: 20px var(--space-4);
  background: var(--surface-sunken);
  border-left: var(--border-thick) solid var(--hairline);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-callout p { max-width: none; }

/* Footer link for the page you are already on — present for orientation,
   not clickable. */
.footer-nav [aria-current="page"] {
  font-size: var(--body-sm-size);
  color: var(--ink-tertiary);
}

@media (max-width: 760px) {
  .legal-hero .band-inner { padding-block: 56px var(--space-5); }
  .legal-hero .lede-title { font-size: 32px; line-height: 38px; }
  .legal .band-inner { padding-block: 0 var(--space-7); }
  .legal h2 { font-size: 24px; line-height: 30px; margin-top: var(--space-6); }
}

/* ═══════════════════════════════════════════════════════════════════
   Signup outcome pages (`check-your-email.html`, `subscription-confirmed.html`).
   Buttondown redirects here — first after the form POST, then again after
   the visitor clicks the confirmation link. One centred message per page,
   no navigation to compete with it.
   ═══════════════════════════════════════════════════════════════════ */

/* Taller than a legal page, shorter than the homepage hero: there is a
   footer to reach and only three lines of content to fill the gap. */
.outcome .band-inner {
  max-width: 620px;
  padding-block: 128px 120px;
  text-align: center;
}
.outcome .lede-title { font-size: 44px; line-height: 50px; }
.outcome .lede-body { margin-inline: auto; }

/* Icon medallion. Sunken fill rather than vermillion — the accent belongs
   to the button, and two vermillion objects in one short column compete. */
.outcome-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  border: var(--border-hair) solid var(--hairline);
  color: var(--ink-secondary);
}
.outcome-badge .icon { width: 28px; height: 28px; }

/* The confirmed page is the end of the journey, so its badge carries the
   accent — the one place on these pages where something is finished. */
.outcome--done .outcome-badge {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.outcome-actions { margin-top: var(--space-6); }

/* Trailing fine print: the didn't-get-it and spam-folder lines. Quieter
   than body copy — it is a fallback, not the message. */
.outcome-note {
  margin-top: var(--space-5);
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-lh);
  color: var(--ink-tertiary);
  max-width: 52ch;
  margin-inline: auto;
}
.outcome-note a {
  color: var(--ink-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--ink-tertiary);
}
.outcome-note a:hover { color: var(--vermillion-ink); text-decoration-color: currentColor; }

@media (max-width: 760px) {
  .outcome .band-inner { padding-block: 72px 64px; }
  .outcome .lede-title { font-size: 32px; line-height: 38px; }
}