/* ============================================================
   Datum · marketing site
   ------------------------------------------------------------
   Standalone. The token block below is a COPY of web/src/index.css
   so this site has no build step and no dependency on web/. If the
   app's tokens change, re-copy the :root / dark blocks — nothing
   else here reaches into the app.

   Design idea: "datum" is a surveying term — the fixed reference you
   measure from — and the brand mark is a surveyor's reticle. So the
   page is built as a surveyed sheet: the mark's crosshair hairlines
   become the page's structural grid, with registration ticks at
   every intersection.
   ============================================================ */

/* ── Fonts, self-hosted ──────────────────────────────────────
   Served from fonts/ on our own origin, NOT from a font CDN. A CDN
   would make a cross-origin request on every page load that hands a
   third party each visitor's IP and User-Agent — which privacy.html
   would then have to disclose as a sub-processor. Self-hosting keeps
   the CSP at font-src 'self' and keeps the claim in privacy.html
   ("this marketing site sets nothing at all") true.

   All three are single variable files per subset, so one download
   covers every weight used. latin-ext is listed separately and only
   downloads if a glyph outside latin is actually rendered.

   staticwebapp.config.json caches fonts/* for a year as immutable, and
   these filenames carry no content hash — so REPLACE a font by adding a
   new filename, never by overwriting one in place.
   Licenses: fonts/LICENSE.txt.
   ──────────────────────────────────────────────────────────── */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-serif-4-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: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-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: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-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;
}

/* ── Tokens (copied from the app) ────────────────────────── */
:root {
  --ink: #0b1638;
  --ink-deep: #060d24;
  --ink-soft: #152045;
  --ink-line: #1f2a52;

  --ivory: #f4efe0;
  --paper: #faf7ee;
  --vellum: #e5dec9;

  --smoke: #5b6478;
  --mist: #8c95aa;
  --silver: #d3d8e2;

  --brass: #b8893e;
  --brass-soft: #d5b175;
  --brass-wash: rgba(184, 137, 62, 0.1);
  --brass-ring: rgba(184, 137, 62, 0.45);

  --positive: #3c7a47;
  --negative: #b33a2e;

  --bg: var(--ivory);
  --bg-alt: var(--paper);
  --bg-elev: #ffffff;
  --border: var(--vellum);
  --border-strong: #c9bfa0;
  --text-h: var(--ink);
  --text: var(--smoke);
  --text-dim: #818aa0;
  --accent: var(--brass);
  --accent-wash: var(--brass-wash);
  --accent-ring: var(--brass-ring);

  --series-primary: var(--brass);
  --series-secondary: #4a5773;
  --series-tertiary: #8c95aa;
  --series-quaternary: #c2beb0;
  --chart-grid: #ddd4bc;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  --shadow-focus: 0 0 0 3px var(--accent-ring);
  --shadow-card: 0 1px 0 rgba(11, 22, 56, 0.04);

  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Marketing-only: the sheet's measure. */
  --sheet: 1160px;
  --pad-x: 40px;

  color-scheme: light dark;
  font: 400 15.5px/1.65 var(--sans);
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink);
    --bg-alt: var(--ink-soft);
    --bg-elev: var(--ink-soft);
    --border: var(--ink-line);
    --border-strong: #2d3a66;
    --text-h: var(--ivory);
    --text: var(--mist);
    --text-dim: var(--silver);
    --accent: var(--brass-soft);
    --accent-wash: rgba(213, 177, 117, 0.1);
    --accent-ring: rgba(213, 177, 117, 0.45);
    --series-primary: var(--brass-soft);
    --series-secondary: #b0b8cb;
    --series-tertiary: #6e7896;
    --series-quaternary: #3e4868;
    --chart-grid: #1f2a52;
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.2);
  }
}

/* ── Base ────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-h);
  font-feature-settings: "liga", "kern";
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

a:hover {
  border-bottom-color: var(--accent);
}

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-sm);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-h);
  z-index: 20;
}

.skip:focus {
  left: 12px;
}

/* Shared type roles. Set once, never re-specified by section. */
.eyebrow {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.display {
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-weight: 600;
  font-size: clamp(40px, 6.6vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.h2 {
  font-family: var(--serif);
  font-variation-settings: "opsz" 40;
  font-weight: 500;
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.h3 {
  font: 600 17px/1.3 var(--sans);
  letter-spacing: -0.005em;
  color: var(--text-h);
}

.lede {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--text);
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-h);
}

.pos {
  color: var(--positive);
}

/* Micro-label. Used to mark every mocked figure as illustrative. */
.micro {
  /* 1.6 not 1: these captions wrap inside the narrower cards, and at 10px
     with 0.12em tracking the wrapped lines collided. */
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ── The sheet: two continuous vertical datum lines ──────── */
.sheet {
  max-width: var(--sheet);
  margin: 0 auto;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.sheet > section {
  position: relative;
  padding: clamp(56px, 7vw, 104px) var(--pad-x);
}

/* Every section boundary is a hairline; registration ticks sit where it
   crosses the datum lines. One element, two gradients — a survey mark. */
.sheet > section + section {
  border-top: 1px solid var(--border);
}

.sheet > section + section::before,
.sheet > section + section::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 11px;
  height: 11px;
  background-image:
    linear-gradient(var(--border-strong), var(--border-strong)),
    linear-gradient(var(--border-strong), var(--border-strong));
  background-size:
    11px 1px,
    1px 11px;
  background-position: center;
  background-repeat: no-repeat;
}

.sheet > section + section::before {
  left: -6px;
}

.sheet > section + section::after {
  right: -6px;
}

/* ── Header ──────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Near-opaque: at 86% the serif headings scrolling underneath ghosted
     through the bar and fought the wordmark. */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.top-in {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 13px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-h);
  border-bottom: 0;
}

.brand:hover {
  border-bottom: 0;
}

.wordmark {
  font: 600 19px/1 var(--serif);
  letter-spacing: -0.01em;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font: 500 14px/1 var(--sans);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.btn:hover {
  border-bottom-width: 1px;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink);
}

.btn-primary:hover {
  filter: brightness(1.07);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-h);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-lg {
  padding: 13px 24px;
  font-size: 15px;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero-copy > * + * {
  margin-top: 20px;
}

.hero-copy .display {
  margin-top: 18px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.hero-note {
  font-size: 13.5px;
  color: var(--text-dim);
}

/* ── The instrument: hero chart panel ────────────────────── */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.panel-label {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--text-dim);
}

.panel-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.panel-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-h);
}

.panel-delta {
  font: 500 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--positive);
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 14px 0 4px;
}

.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.chart-area {
  fill: var(--accent-wash);
}

.chart-line {
  fill: none;
  stroke: var(--series-primary);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.sight-line {
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.7;
}

.reticle-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
}

.reticle-cross {
  stroke: var(--accent);
  stroke-width: 1.6;
}

.reticle-dot {
  fill: var(--accent);
}

.panel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 10px;
}

.stat-k {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.stat-v {
  display: block;
  margin-top: 6px;
  font: 500 17px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-h);
}

.panel-foot {
  margin-top: 12px;
}

/* Load sequence: the line draws, the reticle settles onto the last
   reading, then the sighting lines appear. One orchestrated moment. */
@media (prefers-reduced-motion: no-preference) {
  .chart-line {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: draw 1200ms var(--ease) 120ms forwards;
  }

  .chart-area {
    opacity: 0;
    animation: fade 700ms var(--ease) 900ms forwards;
  }

  .reticle {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: settle 520ms var(--ease) 1180ms forwards;
  }

  .sight-line {
    opacity: 0;
    animation: fade 420ms var(--ease) 1560ms forwards;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fade {
    to {
      opacity: 1;
    }
  }

  @keyframes settle {
    from {
      opacity: 0;
      transform: scale(2.1);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Sighting lines land at 0.7, not 1. */
  .sight-line {
    animation-name: fade-sight;
  }

  @keyframes fade-sight {
    to {
      opacity: 0.7;
    }
  }
}

/* ── Scroll reveal, native. No JS, and no opacity trap if the
   browser lacks scroll-driven animations. ─────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
  }
}

/* ── Section headers ─────────────────────────────────────── */
.sec-head {
  max-width: 660px;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.sec-head .h2 {
  margin-top: 14px;
}

.sec-head p {
  margin-top: 14px;
}

/* ── Sources strip ───────────────────────────────────────── */
.sources {
  background: var(--bg-alt);
}

.sources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 32px;
  margin-top: 8px;
}

.source h3 {
  font: 600 15px/1.3 var(--sans);
  margin-bottom: 6px;
}

.source p {
  font-size: 14.5px;
}

/* ── Feature cards ───────────────────────────────────────── */
.cards {
  display: grid;
  /* Fixed 3 columns, not auto-fit: there are exactly six cards, and auto-fit
     resolves to four at this width — leaving a ragged two-card second row. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card {
  background: var(--bg-elev);
  padding: 26px 24px 28px;
}

.card-icon {
  color: var(--accent);
  display: block;
  margin-bottom: 14px;
}

.card p {
  margin-top: 8px;
  font-size: 14.5px;
}

/* ── Steps (a real sequence, so it is numbered) ──────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  counter-reset: step;
}

.step {
  border-top: 1px solid var(--border-strong);
  padding-top: 18px;
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  display: block;
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}

.step p {
  margin-top: 8px;
  font-size: 14.5px;
}

/* ── Deep dives ──────────────────────────────────────────── */
.dive {
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: clamp(28px, 4.5vw, 60px);
  align-items: center;
}

.dive + .dive {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--border);
}

.dive-flip .dive-copy {
  order: 2;
}

.dive-copy .h2 {
  margin-top: 14px;
  font-size: clamp(24px, 2.6vw, 30px);
}

.dive-copy p {
  margin-top: 14px;
}

.dive-copy .method {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  font: 400 12.5px/1.55 var(--mono);
  color: var(--text);
}

/* Mock: exposure bars */
.bars {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.bar-row {
  display: grid;
  /* 132px fits the longest label ("Expense percentile") on one line. */
  grid-template-columns: 132px 1fr 54px;
  align-items: center;
  gap: 12px;
}

.bar-k {
  font-size: 13.5px;
  color: var(--text);
}

.bar-track {
  height: 8px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--series-primary);
}

.bar-fill.s2 {
  background: var(--series-secondary);
}

.bar-fill.s3 {
  background: var(--series-tertiary);
}

.bar-fill.s4 {
  background: var(--series-quaternary);
}

.bar-v {
  font: 400 13px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-h);
  text-align: right;
}

/* Bar widths as classes, not inline styles, so the CSP can refuse
   inline styles outright (see staticwebapp.config.json). */
.w12 {
  width: 12%;
}
.w23 {
  width: 23%;
}
.w26 {
  width: 26%;
}
.w34 {
  width: 34%;
}
.w42 {
  width: 42%;
}
.w59 {
  width: 59%;
}
.w78 {
  width: 78%;
}
.w84 {
  width: 84%;
}

/* Mock: fee readout */
.readout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 16px;
}

.readout-cell {
  background: var(--bg-alt);
  padding: 18px;
}

.readout-v {
  display: block;
  margin-top: 8px;
  font: 500 clamp(22px, 2.4vw, 28px) / 1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--text-h);
}

.readout-note {
  grid-column: 1 / -1;
  background: var(--bg-elev);
  padding: 14px 18px;
  font-size: 13.5px;
}

/* Mock: rating */
.rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.stars {
  display: flex;
  gap: 3px;
  color: var(--accent);
}

.star-off {
  color: var(--border-strong);
}

.rating-v {
  font: 500 14px/1 var(--mono);
  color: var(--text-h);
}

.pctl {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

/* ── Pricing ─────────────────────────────────────────────── */
.price-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 380px);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.price-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.price-cur {
  font: 500 20px/1 var(--mono);
  color: var(--text-h);
  align-self: flex-start;
  padding-top: 8px;
}

.price-v {
  font: 500 clamp(44px, 5vw, 60px) / 1 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--text-h);
}

.price-per {
  font: 400 15px/1 var(--sans);
  color: var(--text-dim);
}

.price-note {
  margin-top: 10px;
  font-size: 14px;
}

.price-alt {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-dim);
}

.ticks {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}

.ticks li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px;
  font-size: 14.5px;
}

.ticks svg {
  color: var(--accent);
  margin-top: 4px;
}

.price-card .btn {
  width: 100%;
  margin-top: 24px;
}

.fineprint {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ── FAQ (native disclosure) ─────────────────────────────── */
.faq {
  max-width: 760px;
}

.faq details {
  border-top: 1px solid var(--border);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px;
  cursor: pointer;
  font: 500 16px/1.4 var(--sans);
  color: var(--text-h);
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font: 400 18px/1 var(--mono);
  color: var(--accent);
  flex-shrink: 0;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  padding: 0 2px 20px;
  max-width: 66ch;
  font-size: 14.5px;
}

/* ── Closing CTA ─────────────────────────────────────────── */
.close-cta {
  text-align: center;
}

.close-cta .display {
  font-size: clamp(30px, 4.4vw, 50px);
  max-width: 20ch;
  margin: 14px auto 0;
}

.close-cta .hero-cta {
  justify-content: center;
  margin-top: 26px;
}

.close-cta .hero-note {
  margin-top: 16px;
}

/* ── Footer ──────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
}

.foot-in {
  max-width: var(--sheet);
  margin: 0 auto;
  padding: 44px var(--pad-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
}

.disclaimer {
  font-size: 13px;
  color: var(--text-dim);
  max-width: 62ch;
  margin-top: 16px;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-content: start;
  font-size: 14px;
}

.foot-links a {
  color: var(--text);
}

.foot-links a:hover {
  color: var(--accent);
}

.foot-bottom {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--text-dim);
}

/* ── Prose pages (privacy, terms) ────────────────────────── */
.prose {
  max-width: 70ch;
}

.prose .h2 {
  font-size: clamp(22px, 2.4vw, 27px);
  margin-top: 44px;
}

.prose .display {
  font-size: clamp(32px, 4.4vw, 48px);
}

.prose p,
.prose ul {
  margin-top: 14px;
}

.prose ul {
  padding-left: 20px;
}

.prose li + li {
  margin-top: 8px;
}

.prose .updated {
  margin-top: 14px;
  font: 400 12.5px/1 var(--mono);
  color: var(--text-dim);
}

.notice {
  margin-top: 28px;
  padding: 16px 18px;
  background: var(--accent-wash);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: 14px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero,
  .dive,
  .price-wrap {
    grid-template-columns: 1fr;
  }

  .dive-flip .dive-copy {
    order: 0;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-in {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  :root {
    --pad-x: 20px;
  }

  .sheet {
    border-left: 0;
    border-right: 0;
  }

  /* No datum lines to register against on a phone. */
  .sheet > section + section::before,
  .sheet > section + section::after {
    display: none;
  }

  .wordmark {
    font-size: 17px;
  }

  .btn {
    padding: 9px 14px;
    font-size: 13.5px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .panel-stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .readout {
    grid-template-columns: 1fr;
  }

  .bar-row {
    /* 108px keeps "Everything else" on one line at 390px. */
    grid-template-columns: 108px 1fr 48px;
  }
}