/* Public-facing pages (landing, privacy, support, terms).
   Separate from app.css so the marketing surface stays minimal and lean —
   no uPlot, no HTMX, no app-specific selectors. Dark by default to match
   the iOS app's default theme.

   Nord palette: see docs/DESIGN.md for the full mapping.
   Polar Night #2E3440 / #3B4252 / #434C5E / #4C566A
   Snow Storm  #D8DEE9 / #E5E9F0 / #ECEFF4
   Aurora      #BF616A / #D08770 / #EBCB8B / #A3BE8C / #B48EAD */

:root {
    --bg:        #2E3440;   /* Polar Night nord0 — page bg */
    --bg-elev:   #3B4252;   /* nord1 — card surfaces */
    --bg-soft:   #434C5E;   /* nord2 — subtle surfaces */
    --border:    #4C566A;   /* nord3 — soft dividers */
    --fg:        #ECEFF4;   /* Snow Storm nord6 — primary text */
    --fg-soft:   #D8DEE9;   /* nord4 — secondary text */
    --muted:     #6B7587;   /* darker than nord3 — muted text */
    --accent:    #A3BE8C;   /* Aurora green — brand accent + CTAs */
    --accent-fg: #2E3440;   /* contrast text on accent buttons */
    --sans:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --mono:      ui-monospace, SF Mono, Menlo, Consolas, monospace;

    /* Spacing scale — applied consistently across the marketing surface so
       sections breathe at the same cadence everywhere. Don't introduce new
       ad-hoc margins; reach for these. */
    --space-xs:  0.5rem;    /*  8px */
    --space-sm:  1rem;      /* 16px */
    --space-md:  1.5rem;    /* 24px — paragraph spacing */
    --space-lg:  3rem;      /* 48px — block spacing */
    --space-xl:  5rem;      /* 80px — section spacing */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    color: var(--fg);
    background: var(--bg);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: 2.75rem; line-height: 1.1; margin: 0 0 var(--space-md); }
h2 { font-size: 1.75rem; line-height: 1.25; margin: var(--space-lg) 0 var(--space-md); }
h3 { font-size: 1.1rem; margin: var(--space-md) 0 var(--space-xs); }
@media (max-width: 640px) {
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.45rem; }
}

p { margin: 0 0 var(--space-sm); }

/* Container ladder — three steps so we can pick a measure per surface:
   • --narrow (38rem ≈ 608px): pure prose pages (privacy, support, terms)
       — keeps body text in the 60–75ch readable sweet spot.
   • default (1080px): landing + methodology hero/marketing surfaces
       — wider than the old 960px so screenshots and direction-cards
       breathe on desktop without ever crowding mobile (mobile is fluid
       width via `padding: 0 1.25rem`).
   • --wide (1280px): the manual, where a sticky sidebar + content layout
       needs more horizontal room. */
.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.container--narrow { max-width: 38rem; }
.container--medium { max-width: 60rem; }
.container--wide   { max-width: 1280px; }

/* ── header ───────────────────────────────────────────────────────────── */

.public-header {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
}
.public-header .row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
}
.public-header .brand {
    display: flex; align-items: center; gap: 0.55rem;
    color: var(--fg);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
}
.public-header .brand:hover { text-decoration: none; }
/* Wide variant: full HackDiet wordmark + green trail in one SVG. The source
   SVG has a 1536×1024 canvas with the wordmark + trail concentrated in the
   middle band, so we need a generous CSS height for it to read at proper
   weight in the header. (A future tighter-cropped SVG would let us shrink. */
.public-header .brand .brand-wide { height: 64px; width: auto; display: block; }
@media (max-width: 480px) {
    .public-header .brand .brand-wide { height: 48px; }
}
.public-header { padding: 0.5rem 0; }
.public-header nav { display: flex; gap: 1rem; font-size: 0.95rem; }
.public-header nav a { color: var(--fg-soft); }
.public-header nav a:hover { color: var(--accent); text-decoration: none; }
@media (max-width: 480px) {
    .public-header nav { display: none; }
}

/* ── hero ─────────────────────────────────────────────────────────────── */

/* The hero gets an atmospheric backdrop: a quiet radial glow centred
   behind the wordmark + a thin baseline rule that fades inward. Pure
   CSS gradients — no images, no extra requests, no JS. The result is
   "stage-lit cover plate" rather than "flat marketing landing". */
.hero {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    top: -10%;
    left: 50%;
    width: 90%;
    height: 75%;
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at center,
        rgba(163, 190, 140, 0.14) 0%,
        rgba(136, 192, 208, 0.08) 38%,
        transparent 70%
    );
    z-index: 0;
    pointer-events: none;
    filter: blur(10px);
}
.hero > * { position: relative; z-index: 1; }
.hero img.hero-logo {
    height: 160px;
    width: auto;
    margin-bottom: var(--space-md);
}
/* Wide variant — the source SVG has a generous canvas (1536×1024) with
   the wordmark + trail concentrated in the middle band, so we let it run
   wider and clip top/bottom whitespace via a smaller height. Caps at
   500px wide so it doesn't dominate on a giant monitor. */
.hero img.hero-logo--wide {
    height: auto;
    width: min(96%, 760px);
    max-height: 320px;
    margin-bottom: var(--space-md);
    /* A whisper of upward movement on hover — invites the eye, doesn't
       distract. Same easing as the rest of the editorial system. */
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.hero img.hero-logo--wide:hover { transform: translateY(-3px); }
@media (max-width: 480px) {
    .hero img.hero-logo { height: 120px; }
    .hero img.hero-logo--wide { width: 96%; max-height: 200px; }
}
.hero h1 {
    font-family: var(--serif);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.025em;
    max-width: 18ch;
    margin: 0.4rem auto var(--space-md);
    color: var(--fg);
}
@media (max-width: 720px) {
    .hero h1 { font-size: 2.4rem; }
}
.hero .lede {
    font-size: 1.18rem;
    color: var(--fg-soft);
    max-width: 36rem;
    margin: 0 auto var(--space-sm);
    line-height: 1.55;
}
.hero .lede:last-of-type { margin-bottom: var(--space-lg); }
.hero .ctas {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}
.cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent);
    color: var(--accent-fg);
    padding: 0 1.6rem;
    min-height: 3rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 20px -6px rgba(163, 190, 140, 0.35);
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.cta-primary:hover {
    text-decoration: none;
    opacity: 0.96;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -8px rgba(163, 190, 140, 0.45);
}
.cta-secondary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--fg);
    border: 1px solid var(--border);
    padding: 0 1.5rem;
    min-height: 3rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: 1rem;
    transition: border-color 160ms ease, color 160ms ease;
}
.cta-secondary:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.hero .price-note {
    margin-top: var(--space-md);
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
}

/* ── pending CTA (pre-launch placeholder; flips to real link at launch) ─ */

.cta-pending {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}

/* ── Problem section — the "realization beat" between hero and concepts ─ */

.problem {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
}
.problem h2 {
    font-family: var(--serif);
    font-size: 2.6rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 auto var(--space-md);
    color: var(--fg);
    max-width: 22ch;
    text-wrap: balance;
}
@media (max-width: 720px) { .problem h2 { font-size: 1.95rem; } }
.problem p {
    color: var(--fg-soft);
    font-size: 1.18rem;
    max-width: 38rem;
    margin: 0 auto;
    line-height: 1.6;
    text-wrap: pretty;
}
.problem p:last-child { margin-bottom: 0; }

/* ── stacked content blocks ──────────────────────────────────────────── */
/* Retained for the previews (preview_3 still references .stacked). The
   real landing no longer uses this — it builds equivalent rhythms out
   of the .trio + .steps-row + .not-grid primitives below. Safe to
   delete once /preview_3 is retired. */

.stacked {
    padding: var(--space-xl) 0 var(--space-lg);
}
.stacked .block + .block { margin-top: var(--space-lg); }
.stacked .block h2 {
    font-size: 1.4rem; color: var(--fg-soft);
    margin: 0 0 var(--space-xs); text-transform: uppercase;
    letter-spacing: 0.05em; font-weight: 600;
}
.stacked .block p { margin: 0; color: var(--fg-soft); line-height: 1.6; }
.stacked .block.dominant h2 {
    font-family: var(--serif); font-size: 2.1rem; line-height: 1.12;
    color: var(--fg); text-transform: none; letter-spacing: -0.02em;
    font-weight: 700; margin-bottom: var(--space-sm);
}
.stacked .block.dominant h2::before {
    content: ""; display: block; width: 32px; height: 2px;
    background: var(--accent); margin-bottom: 0.85rem; border-radius: 1px;
}
.stacked .block.dominant p { font-size: 1.1rem; color: var(--fg); line-height: 1.6; }
.section-heading {
    font-family: var(--serif); font-size: 2.1rem; line-height: 1.12;
    letter-spacing: -0.02em; margin: 0 0 var(--space-lg); color: var(--fg);
}

/* ════════════════════════════════════════════════════════════════════════
   LANDING PAGE — narrative sections.
   Below the fold reads as a magazine spread, not a SaaS feature page.
   Each section has its own visual treatment so the rhythm comes from
   variation, not from card-grid repetition.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Narrative pause — one strong sentence in display serif ────── */
.narrative-pause {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
}
.narrative-pause__text {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.4vw, 2.3rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--fg);
    max-width: 28ch;
    margin: 0 auto;
    text-wrap: balance;
}

/* ── 2. The insight — noise vs. trend, side-by-side panes ────────── */
.insight {
    padding: var(--space-lg) 0 var(--space-xl);
}
.insight__panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: stretch;
    position: relative;
}
.insight__panes::after {
    /* Vertical divider rule between the two panes — meeting in the
       middle to suggest "before / after" without a hard split. */
    content: "";
    position: absolute;
    left: 50%;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--border) 30%,
        var(--border) 70%,
        transparent 100%
    );
    pointer-events: none;
}
@media (max-width: 720px) {
    .insight__panes { grid-template-columns: 1fr; }
    .insight__panes::after { display: none; }
}
.insight__pane {
    margin: 0;
    padding: 1.4rem 1.5rem;
    background: rgba(76, 86, 106, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(76, 86, 106, 0.4);
}
.insight__caption {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.85rem;
}
.insight__pane:first-child .insight__caption { color: #BF616A; }
.insight__pane:last-child  .insight__caption { color: var(--accent); }
.insight__pane svg { width: 100%; height: auto; display: block; }
.insight__attribution {
    margin: var(--space-md) auto 0;
    max-width: 38rem;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--fg-soft);
    text-wrap: pretty;
}

/* ── 3. Pull-quote — wide editorial moment ────────────────────────── */
.pullquote {
    padding: var(--space-xl) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.pullquote blockquote {
    margin: 0;
    padding: 0 var(--space-md);
    text-align: center;
}
.pullquote blockquote p {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.25;
    letter-spacing: -0.012em;
    color: var(--fg);
    margin: 0 0 var(--space-md);
    text-wrap: balance;
    position: relative;
}
.pullquote blockquote p::before {
    content: "“";
    position: absolute;
    left: -0.6em;
    top: -0.3em;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 2.4em;
    line-height: 1;
    opacity: 0.45;
}
.pullquote blockquote em {
    color: var(--accent);
    font-style: italic;
}
.pullquote blockquote footer {
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--muted);
    letter-spacing: 0.04em;
}
.pullquote blockquote cite {
    font-style: italic;
    color: var(--fg-soft);
}

/* ── 4. Direction vignettes — chart sketches with editorial caption ─ */
.directions { padding: var(--space-xl) 0; }
.directions__heading {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-align: center;
    color: var(--fg);
    margin: 0 auto var(--space-sm);
    max-width: 24ch;
    text-wrap: balance;
}
.directions__intro {
    text-align: center;
    color: var(--fg-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 38rem;
    margin: 0 auto var(--space-lg);
    text-wrap: pretty;
}
.directions__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
@media (max-width: 880px) { .directions__row { grid-template-columns: 1fr; } }
.direction-vignette {
    margin: 0;
    text-align: left;
    padding: 0 0.4rem;
}
.direction-vignette svg {
    width: 100%;
    height: 110px;
    display: block;
    margin-bottom: 0.55rem;
}
.direction-vignette figcaption {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--fg-soft);
    text-wrap: pretty;
}
.direction-vignette figcaption strong {
    font-style: normal;
    font-weight: 700;
    color: var(--fg);
    margin-right: 0.35em;
}

/* ── 5. Recipe beam — three steps in one line, no card chrome ────── */
.recipe { padding: var(--space-lg) 0 var(--space-xl); }
.recipe__heading {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-align: center;
    color: var(--fg);
    margin: 0 auto var(--space-md);
    text-wrap: balance;
}
.recipe__beam {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--space-md) 0;
}
@media (max-width: 880px) {
    .recipe__beam { grid-template-columns: 1fr; gap: var(--space-sm); }
}
.recipe__beam li {
    padding: 0 var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    border-left: 1px solid var(--border);
}
.recipe__beam li:first-child { border-left: 0; }
@media (max-width: 880px) {
    .recipe__beam li { border-left: 0; padding-left: 0; }
}
.recipe__num {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
}
.recipe__verb {
    font-family: var(--serif);
    font-size: 1.35rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--fg);
    font-weight: 700;
}
.recipe__rest {
    color: var(--fg-soft);
    line-height: 1.6;
    font-size: 0.95rem;
    text-wrap: pretty;
}

/* ── 6. Manifesto — flowing prose, italic-serif kickers ─────────── */
.manifesto { padding: var(--space-xl) 0; }
.manifesto__heading {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.6vw, 2.4rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    text-align: center;
    color: var(--fg);
    margin: 0 auto var(--space-lg);
    text-wrap: balance;
}
.manifesto__heading em { color: var(--accent); font-style: italic; }
.manifesto__item {
    max-width: 50rem;
    margin: 0 auto var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border);
}
.manifesto__item:last-child { border-bottom: 0; }
.manifesto__item h3 {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
    margin: 0 0 0.55rem;
    color: var(--accent);
}
.manifesto__item p {
    color: var(--fg-soft);
    line-height: 1.65;
    margin: 0;
    font-size: 1.02rem;
    max-width: 40rem;
    text-wrap: pretty;
}
.manifesto__item p a { color: var(--accent); }

/* ── 7. Closing — calm provenance + outbound CTAs ─────────────────── */
.closing {
    padding: var(--space-xl) 0 var(--space-lg);
    text-align: center;
}
.closing__lede {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--fg-soft);
    margin: 0 auto var(--space-md);
    max-width: 40rem;
    text-wrap: pretty;
}
.closing__cta {
    color: var(--muted);
    margin: 0;
    font-size: 0.95rem;
}
.closing__cta a { color: var(--accent); font-weight: 600; }

/* ── trio: principle cards (3-up, full container) ────────────────────── */

.trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    padding: 0 0 var(--space-lg);
}
@media (max-width: 880px) { .trio { grid-template-columns: 1fr; } }
.trio-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-top: 3px solid var(--border);
    border-radius: 10px;
    padding: 1.4rem 1.45rem 1.5rem;
    transition: transform 200ms cubic-bezier(.2,.7,.2,1), border-top-color 200ms ease;
}
.trio-card--accent { border-top-color: var(--accent); }
.trio-card:hover { transform: translateY(-2px); border-top-color: var(--accent); }
.trio-card__eyebrow {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
}
.trio-card h3 {
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 0.55rem;
    color: var(--fg);
    font-weight: 700;
    text-wrap: balance;
}
.trio-card p {
    color: var(--fg-soft);
    line-height: 1.6;
    margin: 0;
    font-size: 0.97rem;
    text-wrap: pretty;
}

/* ── steps-row: numbered horizontal cards (3-up, full container) ────── */

.steps-row {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}
@media (max-width: 880px) { .steps-row { grid-template-columns: 1fr; } }
.steps-row li {
    padding: 1.2rem 1.4rem 1.4rem;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(163,190,140,0.04), rgba(163,190,140,0));
    border-radius: 10px;
    position: relative;
}
.steps-row__num {
    font-family: var(--mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--accent);
    border: 1.5px solid var(--accent);
    border-radius: 999px;
    width: 2.6rem; height: 2.6rem;
    display: inline-flex;
    align-items: center; justify-content: center;
    margin-bottom: 0.85rem;
}
.steps-row li h3 {
    font-family: var(--serif);
    font-size: 1.45rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 0.55rem;
    color: var(--fg);
    font-weight: 700;
}
.steps-row li p {
    color: var(--fg-soft);
    line-height: 1.6;
    margin: 0;
    font-size: 0.97rem;
}

/* ── not-grid: 2x2 of "not a X" stamps ────────────────────────────── */

.not-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}
@media (max-width: 720px) { .not-grid { grid-template-columns: 1fr; } }
.not-card {
    padding: 1.3rem 1.4rem 1.4rem;
    border-left: 3px solid var(--accent);
    background: rgba(76, 86, 106, 0.18);
    border-radius: 0 10px 10px 0;
}
.not-card h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 0 0 0.55rem;
    color: var(--fg);
    font-weight: 700;
    text-wrap: balance;
}
.not-card p {
    color: var(--fg-soft);
    line-height: 1.6;
    margin: 0;
    font-size: 0.97rem;
    text-wrap: pretty;
}

/* ── methodology row: narrow card + decorative trail in the gutter ──── */

.methodology-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: var(--space-lg);
    align-items: center;
}
@media (max-width: 880px) {
    .methodology-row { grid-template-columns: 1fr; }
    .methodology-row__decor { display: none; }
}
.methodology-row .methodology { margin: var(--space-md) 0; }
.methodology-row__decor {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.55;
}
.methodology-row__decor img {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* ── section-divider: tiny green trail glyph between sections ───────── */

.section-divider {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--space-lg) 0 var(--space-md);
    opacity: 0.45;
}
.section-divider img {
    width: 100px;
    height: auto;
}

/* ── direction row — "selectable mindsets", not feature tiles ─────────── */

.section-intro {
    text-align: center;
    max-width: 38rem;
    margin: var(--space-xl) auto var(--space-lg);
}
.section-intro h2 {
    font-family: var(--serif);
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-sm);
    color: var(--fg);
}
.section-intro p { color: var(--fg-soft); margin: 0; line-height: 1.6; }

.direction-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    padding: 0 0 var(--space-xl);
}
/* direction-card — a different visual register from .trio-card so the
   two consecutive 3-column rows on the landing don't read as duplicates.
   Where .trio-card is "elevated card with green accent rule on top",
   .direction-card is "horizontal stripe + larger title" with one of three
   goal-type accent colours from the persona-card system. */
.direction-card {
    padding: 1.5rem 1.4rem 1.5rem;
    background: linear-gradient(180deg, rgba(163,190,140,0.04), rgba(163,190,140,0));
    border: 0;
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    transition: transform 160ms ease, background 160ms ease;
}
.direction-card:nth-child(2) { border-left-color: #88C0D0; }
.direction-card:nth-child(3) { border-left-color: #B48EAD; }
.direction-card:hover { transform: translateY(-2px); }
.direction-card h3 {
    color: var(--fg);
    margin: 0 0 0.55rem;
    font-size: 1.25rem;
    font-family: var(--serif);
    line-height: 1.22;
    letter-spacing: -0.01em;
    font-weight: 700;
    text-transform: none;
}
.direction-card h3::before {
    content: "";
    display: inline-block;
    width: 28px; height: 2px;
    background: var(--accent);
    vertical-align: middle;
    margin-right: 0.6rem;
    border-radius: 1px;
}
.direction-card:nth-child(2) h3::before { background: #88C0D0; }
.direction-card:nth-child(3) h3::before { background: #B48EAD; }
.direction-card p {
    color: var(--fg-soft);
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.6;
}
@media (max-width: 720px) {
    .direction-row { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* ── How-it-works numbered steps ──────────────────────────────────────── */

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: stepnum;
}
.steps li {
    counter-increment: stepnum;
    position: relative;
    padding: 0 0 var(--space-lg) 3.5rem;
    margin: 0;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
    content: counter(stepnum, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--accent);
    color: var(--accent);
    font-family: var(--mono);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 4px var(--bg);
}
.steps li h3 {
    margin: 0.35rem 0 var(--space-xs);
    color: var(--fg);
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}
.steps li p {
    color: var(--fg-soft);
    margin: 0;
    line-height: 1.6;
}

/* ── Why-different list ───────────────────────────────────────────────── */

.why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.why-list li {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--border);
    color: var(--fg-soft);
    line-height: 1.55;
}
.why-list li:first-child { padding-top: 0; }
.why-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.why-list strong {
    color: var(--fg);
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.05em;
    letter-spacing: -0.005em;
    margin-right: 0.15em;
}

/* ── methodology blurb (landing page card) ────────────────────────────── */

.methodology {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
    padding: 1.4rem 1.7rem;
    margin: var(--space-xl) 0 var(--space-lg);
    position: relative;
}
.methodology h2 {
    margin: 0 0 0.6rem;
    font-family: var(--serif);
    font-size: 1.55rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--fg);
}
.methodology p {
    color: var(--fg-soft);
    line-height: 1.65;
    margin-bottom: var(--space-sm);
}
.methodology p:last-child { margin-bottom: 0; }

/* ── content prose pages (privacy, support, terms, methodology, import,
   healthkit) — editorial typography, matching the manual's cadence so the
   site reads as one designed system rather than a marketing landing
   stitched to a stack of plain doc pages. ───────────────────────────── */

/* Only set top/bottom — horizontal padding stays inherited from
   `.container` so prose pages don't run flush to the screen edge on
   mobile. */
.prose {
    padding-block-start: 2.75rem;
    padding-block-end: 3.5rem;
}
.prose h1 {
    font-family: var(--serif);
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
    color: var(--fg);
    max-width: 22ch;
}
@media (max-width: 640px) { .prose h1 { font-size: 2rem; } }

/* Page eyebrow — small caps identifier above the H1. Use this on every
   non-landing page so the navigation context reads at a glance:
   "POLICY · PRIVACY", "REFERENCE · METHODOLOGY", etc. The pattern is
   "<category> · <page>" so the category visually anchors the relationship
   between sibling pages. */
.page-eyebrow {
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.85rem;
    opacity: 0.92;
}
.page-eyebrow .sep {
    color: var(--muted);
    margin: 0 0.5rem;
    font-weight: 400;
}

.prose .updated {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0 0 var(--space-md);
    border-left: 2px solid var(--accent);
    padding: 0.2rem 0 0.2rem 0.85rem;
    line-height: 1.45;
}
/* The first paragraph after the H1+updated pair gets a "lede" treatment
   when the template marks it explicitly — prose pages can choose to lift
   their opening sentence visually. */
.prose .lede {
    font-size: 1.18rem;
    line-height: 1.55;
    color: var(--fg);
    margin: 0 0 var(--space-md);
    max-width: 60ch;
}

/* Legal-callout — the "not a medical device" footnote on landing. Styled
   as a deliberate "important" callout so it doesn't read as orphaned gray
   text floating between the methodology section and the footer. */
.legal-callout {
    border-left: 3px solid var(--muted);
    background: var(--bg-elev);
    padding: 0.9rem 1.1rem;
    color: var(--fg-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    border-radius: 0 6px 6px 0;
}
.legal-callout strong { color: var(--fg); font-weight: 600; }
.legal-section { padding-bottom: var(--space-md); }

/* In-page table of contents — pill-shaped anchor links at the top of long
   pages (currently /import). Wraps gracefully on narrow widths. */
.page-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 1.25rem 0 2.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.page-toc a {
    font-size: 0.82rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--fg-soft);
    background: rgba(76, 86, 106, 0.18);
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.page-toc a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(163, 190, 140, 0.08);
    text-decoration: none;
}
/* Hop targets — when the user clicks a TOC link, the anchored heading
   shouldn't crash up against the top of the viewport. */
.prose h2[id], .prose h3[id] { scroll-margin-top: 1.5rem; }

.prose h2 {
    font-family: var(--serif);
    font-size: 1.85rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
    margin: 3rem 0 0.7rem;
    color: var(--fg);
}
.prose h2:first-of-type { margin-top: 1.75rem; }
@media (max-width: 640px) { .prose h2 { font-size: 1.55rem; } }

.prose h3 {
    font-family: var(--sans);
    font-size: 1.08rem;
    font-weight: 700;
    margin: 1.85rem 0 0.4rem;
    color: var(--fg);
    letter-spacing: -0.005em;
}
.prose h3::before {
    content: "§ ";
    color: var(--accent);
    font-weight: 400;
    margin-right: 0.1rem;
}

/* `.subhead` — a "soft" H3 used as a step or sub-section label inside a
   chapter. Replaces a dozen inline `style="color:var(--fg-soft);
   text-transform:none;letter-spacing:0;font-size:1rem;..."` overrides
   that were scattered across import / support / privacy. Uses the same
   visual register as a paragraph's <strong> so it reads as a label, not
   a header. */
.prose h3.subhead {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fg-soft);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 1.4rem;
    margin-bottom: 0.35rem;
}
.prose h3.subhead::before {
    content: "";
    margin-right: 0;
}

.prose p, .prose li {
    color: var(--fg-soft);
    line-height: 1.7;
}
.prose p { margin: 0 0 1.05rem; max-width: 64ch; }
.prose ul, .prose ol { padding-left: 1.4rem; max-width: 64ch; line-height: 1.65; }
.prose ul li, .prose ol li { margin: 0.3rem 0; }
.prose ul li::marker { color: var(--muted); }
.prose ol li::marker {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.prose code {
    font-family: var(--mono);
    background: rgba(76, 86, 106, 0.4);
    border: 1px solid rgba(76, 86, 106, 0.55);
    padding: 0.06rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
}
.prose blockquote {
    border-left: 3px solid var(--accent);
    margin: 1.25rem 0;
    padding: 0.85rem 1.1rem;
    color: var(--fg);
    background: linear-gradient(180deg, rgba(163,190,140,0.06), rgba(163,190,140,0));
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-family: var(--serif);
}
/* Display formula / code block — methodology uses these for the EMA
   recurrence and the kcal/kg calculation. Centered, generous padding,
   accent-tinted to read as "the value of record". */
.prose pre {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.2rem;
    margin: 1.2rem 0;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.95rem;
    color: var(--fg);
    max-width: 64ch;
}
.prose pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}
.prose strong { color: var(--fg); }
.prose em { color: var(--fg); }
.prose a { color: var(--accent); }
.prose a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Long-prose pages share the manual's closing flourish so the bottom of
   any reading session feels intentional rather than abrupt. */
.prose > p:last-of-type:not(.lede):not(.updated) {
    margin-top: 2.5rem;
    color: var(--muted);
    font-size: 0.92rem;
}

/* The "back to support" / "back to home" pattern at the bottom of long
   prose pages — small, accent-tinted, with an arrow. */
.prose .back-link {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.92rem;
}
.prose .back-link a {
    color: var(--accent);
    font-weight: 600;
}

/* Small muted note paragraph — used for "status: under evaluation" lines
   under section headings, or "see also" footers. Replaces inline
   `style="font-size:0.92rem;color:var(--muted)"`. */
.prose p.note {
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: -0.25rem;
    line-height: 1.55;
}
.prose p.note-after {
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

/* ── footer ───────────────────────────────────────────────────────────── */

.public-footer {
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    padding: 2.5rem 0;
    margin-top: 3rem;
    color: var(--muted);
    font-size: 0.9rem;
}
.public-footer .row {
    display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.public-footer h4 {
    color: var(--fg-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    margin: 0 0 0.5rem;
}
.public-footer ul { list-style: none; padding: 0; margin: 0; }
.public-footer li { margin-bottom: 0.3rem; }
.public-footer a { color: var(--fg-soft); }
.public-footer a:hover { color: var(--accent); }
.public-footer .legal {
    border-top: 1px solid var(--border);
    margin-top: 2rem; padding-top: 1.5rem;
    font-size: 0.82rem; color: var(--muted);
}
.public-footer .legal p { margin: 0 0 0.4rem; }

/* ── email signup ─────────────────────────────────────────────────────── */

.signup form {
    display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: 28rem;
}
.signup input[type=email] {
    flex: 1 1 14rem;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font: inherit;
}
.signup input[type=email]:focus {
    outline: none; border-color: var(--accent);
}
.signup button {
    background: var(--accent);
    color: var(--accent-fg);
    border: 0;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font: inherit; font-weight: 600;
    cursor: pointer;
}
.signup button:hover { opacity: 0.92; }
.signup .msg {
    margin-top: 0.5rem; font-size: 0.85rem;
    color: var(--accent);
}

/* ── flash (server-rendered notice) ───────────────────────────────────── */

.flash {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    margin: 1rem 0;
}
.flash.error { border-left-color: #BF616A; }

/* ── manual (sidebar + content; mobile fallback) ───────────────────────── */

/* The manual is the long-form documentation page replacing the old flat
   /reference. Desktop: sticky sidebar (chapter index) + content column.
   Mobile: sidebar collapses to a `<details>` jump-menu at the top, content
   stacks single-column.

   Breakpoint: 900px. Below, the layout collapses; above, the two-column
   grid kicks in. The content column caps at ~720px so prose stays in the
   readable measure even when the wide-container outer is 1280px. */

.manual-layout {
    display: block;
    margin-top: 1.5rem;
}
@media (min-width: 900px) {
    .manual-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 3rem;
        margin-top: 2.5rem;
    }
}

/* Sidebar — chapter list. Pinned to the top on desktop. */
.manual-sidebar {
    margin-bottom: 2rem;
}
@media (min-width: 900px) {
    .manual-sidebar {
        position: sticky;
        top: 1.5rem;
        align-self: start;
        max-height: calc(100vh - 3rem);
        overflow-y: auto;
        margin-bottom: 0;
        font-size: 0.92rem;
    }
}

/* Mobile: sidebar lives inside a <details>, expandable. The summary acts
   as a “Chapters ▾” disclosure; on desktop this disclosure is force-shown
   open and the marker hidden so it just reads as a normal nav block. */
.manual-sidebar > details {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}
.manual-sidebar > details > summary {
    padding: 0.95rem 1.1rem;
    font-weight: 700;
    color: var(--fg);
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    border-left: 2px solid var(--accent);
    background: linear-gradient(180deg, rgba(163,190,140,0.08), rgba(163,190,140,0));
    border-radius: 0 6px 6px 0;
    user-select: none;
    -webkit-tap-highlight-color: rgba(163,190,140,0.18);
}
.manual-sidebar > details > summary:hover {
    color: var(--accent);
}
.manual-sidebar > details > summary::-webkit-details-marker { display: none; }
.manual-sidebar > details > summary::after {
    content: "▾";
    float: right;
    color: var(--muted);
    transition: transform 0.15s ease;
}
.manual-sidebar > details[open] > summary::after { transform: rotate(180deg); }
@media (min-width: 900px) {
    .manual-sidebar > details {
        background: transparent;
        border: 0;
        border-radius: 0;
    }
    .manual-sidebar > details > summary { display: none; }
    .manual-sidebar > details[open] > .manual-toc,
    .manual-sidebar > details > .manual-toc { display: block; }
}

/* The TOC list itself. On mobile, it sits inside the <details> body. */
.manual-toc {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}
.manual-toc > li > strong {
    display: block;
    color: var(--fg-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.6rem 1rem 0.3rem;
}
.manual-toc a {
    display: block;
    padding: 0.32rem 1rem;
    color: var(--fg-soft);
    border-left: 2px solid transparent;
    line-height: 1.45;
}
.manual-toc a:hover {
    color: var(--accent);
    text-decoration: none;
    border-left-color: var(--accent);
    background: rgba(163, 190, 140, 0.06);
}
.manual-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 900px) {
    .manual-toc { padding: 0; }
    .manual-toc a { padding-left: 0.85rem; }
}

/* Content column — capped narrower than the grid so prose lines stay
   readable even on a 1280-wide outer container. */
.manual-content {
    max-width: 720px;
    min-width: 0;
}
.manual-content h1 {
    font-size: 2.2rem;
    margin: 0 0 0.75rem;
}
.manual-content h2 {
    font-size: 1.6rem;
    margin: 2.75rem 0 0.6rem;
    color: var(--fg);
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
}
.manual-content h2:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 1.5rem;
}
.manual-content h3 {
    font-size: 1.1rem;
    margin: 1.75rem 0 0.5rem;
    color: var(--accent);
}
.manual-content p, .manual-content li { color: var(--fg-soft); }
.manual-content code {
    font-family: var(--mono);
    background: var(--bg-elev);
    padding: 0.1rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.92em;
}
.manual-content h2[id], .manual-content h3[id] { scroll-margin-top: 1rem; }

/* In-content figures — phone screenshots inline with the paragraph that
   describes them. The screenshot itself caps at a phone-shaped width so
   it never blows up the column on a wide laptop. Caption sits below in
   a muted style. */
.manual-figure {
    margin: 1.25rem 0;
    text-align: center;
}
.manual-figure picture, .manual-figure img {
    display: inline-block;
    max-width: 280px;
    width: 100%;
    height: auto;
    border-radius: 1.4rem;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.manual-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
}
/* Side-by-side pair (e.g. lose vs maintain Today screens). On narrow
   widths it stacks. */
.manual-figure-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 1.25rem 0;
}
.manual-figure-row .manual-figure { margin: 0; flex: 1 1 220px; max-width: 280px; }

/* Anchor permalinks — small tag next to a heading you can right-click
   to copy a deep-link to. Only visible on hover (desktop) so they don't
   clutter the prose at rest. */
.manual-content h2 a.anchor,
.manual-content h3 a.anchor {
    color: var(--muted);
    font-weight: 400;
    margin-left: 0.4rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.manual-content h2:hover a.anchor,
.manual-content h3:hover a.anchor { opacity: 0.8; }
@media (max-width: 720px) {
    .manual-content h2 a.anchor, .manual-content h3 a.anchor { display: none; }
}

/* Callout — used inline for "important" notes (e.g. cross-screen vocab,
   privacy hints). Same visual treatment as legal-callout but accent-tinted. */
.manual-callout {
    border-left: 3px solid var(--accent);
    background: var(--bg-elev);
    padding: 0.85rem 1.1rem;
    border-radius: 0 6px 6px 0;
    margin: 1rem 0;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--fg-soft);
}
.manual-callout strong { color: var(--fg); }

/* Persona grid — used in the Demo-mode chapter to render every bundled
   persona as a card. Auto-fits 2-up on narrow phones, 3-up on tablet,
   4-up on the manual's --wide container at desktop sizes. The accent
   bar at the top of each card is a fast at-a-glance read of plan type. */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}
.persona-card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-top: 3px solid var(--muted);
    border-radius: 8px;
    padding: 0.85rem 1rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: border-color 120ms ease, transform 120ms ease;
}
.persona-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}
.persona-card--lose     { border-top-color: #88C0D0; } /* nord8  cool blue   */
.persona-card--gain     { border-top-color: #B48EAD; } /* nord15 purple     */
.persona-card--maintain { border-top-color: #A3BE8C; } /* nord14 green      */
.persona-card--none     { border-top-color: var(--muted); }
.persona-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.persona-card__name {
    color: var(--fg);
    font-size: 0.98rem;
    line-height: 1.25;
}
.persona-card__tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--fg-soft);
    white-space: nowrap;
    flex-shrink: 0;
}
.persona-card__tag--lose     { color: #88C0D0; }
.persona-card__tag--gain     { color: #B48EAD; }
.persona-card__tag--maintain { color: #A3BE8C; }
.persona-card__tag--none     { color: var(--muted); }
.persona-card__story {
    font-size: 0.9rem;
    color: var(--fg-soft);
    margin: 0;
}
.persona-card__meta {
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0;
}
.persona-card__meta code {
    background: transparent;
    padding: 0;
    color: var(--fg-soft);
}

/* Theme comparison — side-by-side light + dark phone screenshots in
   the Appearance chapter. Stacks below 720px so each phone is readable. */
.theme-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin: var(--space-md) 0;
    align-items: start;
}
@media (max-width: 720px) {
    .theme-comparison { grid-template-columns: 1fr; }
}
.theme-comparison__figure {
    margin: 0;
}
.theme-comparison__figure img {
    width: 100%;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* ════════════════════════════════════════════════════════════════════════
   MANUAL — editorial overhaul. Layers on top of the .manual-* base styles
   above. The aesthetic: a software-reference manual with the cadence of a
   well-set printed book — chapter eyebrows, a serif accent for display
   text, a quiet TOC, refined screenshots, a thin scroll-progress hairline
   along the top of the viewport. Everything works without JS; chapter
   numbers come from a CSS counter so adding/removing an H2 just renumbers
   automatically.
   ════════════════════════════════════════════════════════════════════════ */

/* A serif face used sparingly for display details (chapter eyebrows,
   the H1 lede, drop-caps). System-installed only — no web fonts, no
   network — so the "no npm, no supply chain" stance is preserved. */
:root {
    --serif: "Iowan Old Style", "Charter", "Source Serif Pro",
             ui-serif, Georgia, "Times New Roman", serif;
}

/* Scroll-progress hairline — sits at the very top of the viewport and
   fills left-to-right as the reader moves through the page. Pure CSS via
   the scroll-driven animations spec (Safari 26+, Chromium-derived 115+,
   Firefox 130+ behind a flag). On older browsers it simply doesn't render
   — graceful no-op, no JS dependency, no layout impact. */
@supports (animation-timeline: scroll()) {
    .manual-content::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        width: 100%;
        transform-origin: 0 50%;
        transform: scaleX(0);
        background: linear-gradient(90deg, var(--accent), #88C0D0);
        z-index: 50;
        pointer-events: none;
        animation: manual-progress linear both;
        animation-timeline: scroll(root);
    }
    @keyframes manual-progress {
        to { transform: scaleX(1); }
    }
}

/* Restyle the manual hero: H1 reads as the cover plate of a book.
   Eyebrow above ("THE MANUAL · v1.0"); the H1 text itself stays the
   semantic page title — visible, screen-readable, set in the display
   serif. The eyebrow is a CSS ::before so the document outline doesn't
   gain a phantom heading. */
.manual-content h1 {
    font-family: var(--serif);
    font-size: 2.6rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0.6rem 0 1.2rem;
    color: var(--fg);
    max-width: 18ch;
    position: relative;
}
.manual-content h1::before {
    content: "The Manual · v1.0";
    display: block;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.85rem;
    opacity: 0.92;
}
@media (max-width: 640px) {
    .manual-content h1 { font-size: 2.05rem; }
}

/* The "updated" tagline becomes a quiet subtitle under the H1 cover. */
.manual-content .updated {
    font-size: 0.92rem;
    color: var(--fg-soft);
    border-left: 2px solid var(--accent);
    padding: 0.25rem 0 0.25rem 0.85rem;
    margin: 0 0 var(--space-md);
    max-width: 56ch;
}

/* Chapter numbering. A counter-reset on the content container plus an
   incrementing ::before on every H2 yields an automatic "CHAPTER 01"
   eyebrow above each chapter heading. Adding or reordering H2s renumbers
   silently — no template work needed. */
.manual-content {
    counter-reset: chapter;
}
.manual-content h2 {
    counter-increment: chapter;
    border-top: 0;
    padding-top: 0;
    margin: 4rem 0 0.8rem;
    font-family: var(--serif);
    font-size: 1.95rem;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--fg);
    position: relative;
}
.manual-content h2::before {
    content: "Chapter " counter(chapter, decimal-leading-zero);
    display: block;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.55rem;
    opacity: 0.92;
}
.manual-content h2:first-of-type {
    margin-top: 1.5rem;
}
/* Decorative rule above each chapter — a thin gradient line that fades
   inward, gentler than a flat border. */
.manual-content h2 + p::before,
.manual-content h2 ~ * {
    /* placeholder so the next selector chains cleanly */
}
.manual-content h2 {
    background-image: linear-gradient(
        to right,
        var(--border) 0,
        var(--border) 64px,
        transparent 64px
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 -1.5rem;
}

.manual-content h3 {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 2rem 0 0.4rem;
    color: var(--fg);
    letter-spacing: -0.005em;
}
.manual-content h3::before {
    content: "§ ";
    color: var(--accent);
    font-weight: 400;
    margin-right: 0.1rem;
}

/* Body copy — tighten the measure and deepen rhythm. */
.manual-content p {
    line-height: 1.7;
    margin: 0 0 1.05rem;
    max-width: 64ch;
}
.manual-content ul, .manual-content ol {
    max-width: 64ch;
    line-height: 1.65;
    padding-left: 1.25rem;
}
.manual-content ul li, .manual-content ol li { margin: 0.3rem 0; }
.manual-content ul li::marker { color: var(--muted); }
.manual-content ol { padding-left: 1.5rem; }
.manual-content ol li::marker { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 700; }

/* Inline <code> — keep tight in prose. <code> inside <strong> (formula
   bits "α = 0.1") gets a slightly different treatment so it reads as a
   value-of-record rather than just a snippet. */
.manual-content code {
    font-family: var(--mono);
    background: rgba(76, 86, 106, 0.4);
    border: 1px solid rgba(76, 86, 106, 0.55);
    padding: 0.06rem 0.4rem;
    border-radius: 4px;
    font-size: 0.88em;
    color: var(--fg);
}

/* Refined manual-callout with a chapter-mark glyph in the gutter. */
.manual-callout {
    border-left: 3px solid var(--accent);
    background:
        linear-gradient(180deg, rgba(163,190,140,0.06), rgba(163,190,140,0));
    padding: 1rem 1.15rem 1rem 2.6rem;
    border-radius: 0 8px 8px 0;
    margin: 1.25rem 0;
    font-size: 0.94rem;
    line-height: 1.6;
    color: var(--fg-soft);
    position: relative;
}
.manual-callout::before {
    content: "❡";
    position: absolute;
    left: 0.85rem;
    top: 0.95rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--accent);
    line-height: 1;
}
.manual-callout strong { color: var(--fg); }

/* Sidebar refinement — smaller, more typographic, with a subtle "you are
   here" highlight via :target on the linked H2. The pinned sidebar gets a
   left rule that aligns with the content baseline for a paper-margin feel. */
@media (min-width: 900px) {
    .manual-sidebar {
        font-size: 0.84rem;
        padding-left: 0;
        max-height: calc(100vh - 4rem);
    }
    .manual-sidebar > details {
        position: relative;
    }
    .manual-sidebar > details::before {
        content: "";
        position: absolute;
        top: 0.4rem; bottom: 0.4rem; left: 0;
        width: 1px;
        background: var(--border);
        opacity: 0.7;
    }
}
.manual-toc > li > strong {
    font-family: var(--sans);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--muted);
    padding: 0.85rem 1rem 0.35rem;
}
.manual-toc > li:first-child > strong {
    padding-top: 0.25rem;
}
.manual-toc a {
    padding: 0.3rem 1rem;
    color: var(--fg-soft);
    border-left: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.manual-toc a::before {
    content: "·";
    color: var(--muted);
    margin-right: 0.45rem;
    opacity: 0.7;
}
.manual-toc a:hover {
    color: var(--fg);
    border-left-color: var(--accent);
    background: rgba(163, 190, 140, 0.05);
    text-decoration: none;
}

/* Anchor permalinks — quieter, serifed # mark. */
.manual-content h2 a.anchor,
.manual-content h3 a.anchor {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7em;
    margin-left: 0.5rem;
    opacity: 0;
    transition: opacity 120ms ease, color 120ms ease;
}
.manual-content h2:hover a.anchor,
.manual-content h3:hover a.anchor { opacity: 0.8; }
.manual-content h2 a.anchor:hover,
.manual-content h3 a.anchor:hover { color: var(--accent); }

/* Figures — restore drop-shadow elegance, tighten radius to actual phone
   bezel curve, lift slightly on hover. */
.manual-figure picture, .manual-figure img {
    display: inline-block;
    max-width: 260px;
    width: 100%;
    height: auto;
    border-radius: 28px;
    border: 1px solid var(--border);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 18px 42px -16px rgba(0,0,0,0.55),
        0 6px 14px -6px rgba(0,0,0,0.4);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.manual-figure:hover picture, .manual-figure:hover img {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 26px 54px -18px rgba(0,0,0,0.6),
        0 8px 18px -6px rgba(0,0,0,0.45);
}
.manual-figure figcaption {
    margin-top: 0.7rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.86rem;
    color: var(--muted);
    line-height: 1.45;
    max-width: 30ch;
    margin-left: auto;
    margin-right: auto;
}
.manual-figure-row {
    gap: 1.5rem;
}

/* Tighter persona-card refinement — a cap-line numeric tag, italic
   storyShort, looser top accent. */
.persona-card {
    padding: 0.95rem 1rem 1rem;
    border-radius: 10px;
}
.persona-card__story {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--fg-soft);
}
.persona-card__tag {
    font-family: var(--sans);
    letter-spacing: 0.08em;
}
.persona-card__meta code {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 0.8em;
    color: var(--fg-soft);
}

/* Theme comparison — pair the two phones in matched cards with an
   inline "Light · Dark" eyebrow above each. */
.theme-comparison__figure img {
    border-radius: 28px;
    max-width: 280px;
    margin: 0 auto;
    display: block;
}
.theme-comparison__figure figcaption {
    font-family: var(--sans);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 0.85rem;
}

/* Final paragraph after the FAQ — a typographic flourish with serif
   italic + decorative star. */
.manual-content > p:last-of-type {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem !important;
    color: var(--muted);
    text-align: center;
    max-width: none;
    position: relative;
}
.manual-content > p:last-of-type::before {
    content: "✦";
    display: block;
    color: var(--accent);
    font-size: 0.95rem;
    margin: -2.1rem auto 0.85rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    background: var(--bg);
    position: relative;
    top: -0.4rem;
}

/* ════════════════════════════════════════════════════════════════════════
   HERO PREVIEW PAGES — temporary styles, deleted alongside the preview
   templates once a hero direction is chosen. Each .preview-* class is
   scoped to a specific preview variant so they don't bleed into anything
   else, and the shared .preview-banner sits above all four to make
   side-by-side comparison frictionless.
   ════════════════════════════════════════════════════════════════════════ */

.preview-banner {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #1a1f29;
    border-bottom: 1px solid var(--accent);
    padding: 0.55rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-family: var(--mono);
}
.preview-banner__label {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-right: 0.5rem;
    text-transform: uppercase;
}
.preview-banner__link {
    color: var(--fg-soft);
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(76, 86, 106, 0.18);
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
    text-decoration: none;
    white-space: nowrap;
}
.preview-banner__link:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(163, 190, 140, 0.08);
    text-decoration: none;
}
.preview-banner__link.is-active {
    color: var(--accent-fg);
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 700;
}
.preview-banner__back {
    margin-left: auto;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.78rem;
}
.preview-banner__back:hover { color: var(--fg-soft); }

/* ── A: Asymmetric — text left, phone right (desktop), stacked mobile ── */
/* The default .hero::before glow is centred horizontally over the page —
   that doesn't read well in the asymmetric layout because the visual
   centre of mass shifts to the phone on the right. We override the glow
   here so it follows the phone instead, making it look like the device
   is emitting the green-and-blue light. */
.hero--asymmetric { padding: var(--space-xl) 0 var(--space-lg); text-align: left; }
.hero--asymmetric::before {
    width: 60%;
    height: 90%;
    left: auto;
    right: -8%;
    top: -5%;
    transform: none;
    background: radial-gradient(
        ellipse at center,
        rgba(163, 190, 140, 0.18) 0%,
        rgba(136, 192, 208, 0.10) 40%,
        transparent 72%
    );
    filter: blur(14px);
}
@media (max-width: 900px) {
    .hero--asymmetric::before {
        width: 90%; height: 50%;
        right: auto; left: 50%;
        top: auto; bottom: 0;
        transform: translateX(-50%);
    }
}

.hero--asymmetric .hero__split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: center;
}
@media (min-width: 900px) {
    .hero--asymmetric .hero__split {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--space-xl);
    }
}

/* HUGE wordmark — fills the copy column to the brim. The hero-logo--wide
   from the base class is overridden here to be much larger; on desktop
   it stretches the full column width with very little margin underneath
   so the lockup of wordmark + headline reads as a single visual unit
   rather than two stacked elements with empty space between them. */
.hero--asymmetric .hero__copy img.hero-logo--wide {
    width: 100%;
    max-width: 760px;
    max-height: none;
    margin: 0 0 0.4rem;
    display: block;
    margin-left: -0.4rem; /* nudge optical alignment so the H of HACK
                             sits flush left with the headline */
}
@media (min-width: 1100px) {
    .hero--asymmetric .hero__copy img.hero-logo--wide { max-width: 880px; }
}
@media (max-width: 720px) {
    .hero--asymmetric .hero__copy img.hero-logo--wide {
        margin-left: auto;
        margin-right: auto;
    }
}

.hero--asymmetric .hero__copy h1 {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4.8vw, 3.4rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: 0.4rem 0 var(--space-md);
    color: var(--fg);
    /* `text-wrap: balance` evens out multi-line headings so they break
       at natural points instead of leaving an orphan word on a short
       last line. Supported in Chromium 114+, Firefox 121+, Safari 17.5+
       — graceful degradation: older browsers just wrap normally. */
    text-wrap: balance;
    max-width: none;
}
.hero--asymmetric .hero__copy .lede {
    font-size: 1.15rem;
    color: var(--fg-soft);
    margin: 0 0 var(--space-sm);
    max-width: 36rem;
    line-height: 1.55;
    text-wrap: pretty;
}
.hero--asymmetric .hero__copy .ctas {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
    margin-top: var(--space-md);
}
.hero--asymmetric .hero__copy .price-note {
    margin-top: var(--space-md);
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
}
.hero--asymmetric .hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero--asymmetric .hero__visual img {
    width: 100%;
    max-width: 320px;
    border-radius: 36px;
    border: 1px solid var(--border);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 30px 60px -20px rgba(0,0,0,0.6),
        0 10px 20px -8px rgba(0,0,0,0.45);
}
@media (max-width: 720px) {
    .hero--asymmetric .hero__copy { text-align: center; }
    .hero--asymmetric .hero__copy img.hero-logo--wide { margin-left: auto; margin-right: auto; }
    .hero--asymmetric .hero__copy .ctas { justify-content: center; }
    .hero--asymmetric .hero__visual img { max-width: 240px; }
}

/* ── B: Bold wordmark hero, scroll-reveal phone ───────────────────────── */
.hero--bold {
    min-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--space-lg) 0;
    text-align: center;
}
.hero--bold img.hero-logo--wide {
    width: min(96%, 900px);
    max-height: 400px;
}
.hero--bold h1 {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 6vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: var(--space-sm) auto var(--space-md);
    max-width: 22ch;
    color: var(--fg);
}
.hero--bold .lede {
    font-size: 1.25rem;
    max-width: 38rem;
    color: var(--fg-soft);
    line-height: 1.55;
    margin: 0 auto var(--space-md);
}
.hero-reveal {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(163,190,140,0.10), transparent 50%),
        var(--bg);
    padding: var(--space-xl) 0;
    text-align: center;
    border-top: 1px solid var(--border);
}
.hero-reveal__caption {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--muted);
    margin: 0 auto var(--space-lg);
    max-width: 36rem;
}
.hero-reveal img {
    max-width: 360px;
    width: 80%;
    border-radius: 40px;
    border: 1px solid var(--border);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 40px 80px -20px rgba(0,0,0,0.6),
        0 14px 28px -10px rgba(0,0,0,0.5);
}

/* ── C: Deconstructed cards collage ───────────────────────────────────── */
.hero--collage {
    padding: var(--space-xl) 0 var(--space-md);
    text-align: center;
}
.hero--collage img.hero-logo--wide {
    width: min(96%, 880px);
    max-height: none;
    margin: 0 auto var(--space-md);
    display: block;
}
.hero--collage h1 {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.02em;
    margin: var(--space-sm) auto var(--space-md);
    color: var(--fg);
    text-wrap: balance;
    max-width: 22ch;
}
.hero--collage .lede {
    font-size: 1.15rem;
    max-width: 32rem;
    color: var(--fg-soft);
    line-height: 1.55;
    margin: 0 auto var(--space-md);
    text-wrap: pretty;
}
.hero--collage .ctas {
    display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
    margin: var(--space-md) 0 var(--space-xl);
}
.collage {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-md);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}
.collage__card {
    background: linear-gradient(160deg, #38404F 0%, #2E3440 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.2rem 1.3rem;
    text-align: left;
    box-shadow: 0 18px 36px -18px rgba(0,0,0,0.55);
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.collage__card:hover { transform: translateY(-3px); }
.collage__card--trend  { grid-column: 1 / span 6; }
.collage__card--goal   { grid-column: 7 / span 6; }
.collage__card--chart  { grid-column: 1 / span 8; }
.collage__card--period { grid-column: 9 / span 4; }
@media (max-width: 720px) {
    .collage { grid-template-columns: 1fr; }
    .collage__card,
    .collage__card--trend,
    .collage__card--goal,
    .collage__card--chart,
    .collage__card--period { grid-column: 1 / -1; }
}
.collage__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin-bottom: 0.6rem;
    font-weight: 700;
}
.collage__hero {
    font-family: var(--serif);
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.collage__hero .unit { font-size: 1.3rem; color: var(--fg-soft); margin-left: 0.25rem; }
.collage__sub {
    margin-top: 0.55rem;
    color: var(--accent);
    font-size: 0.95rem;
}
.collage__pill {
    display: inline-block;
    margin-bottom: 0.65rem;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background: rgba(163,190,140,0.16);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.collage__bar {
    margin-top: 0.85rem;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-soft);
    overflow: hidden;
}
.collage__bar > span {
    display: block;
    height: 100%;
    width: 68%;
    background: var(--accent);
    border-radius: 3px;
}
.collage__row {
    display: flex; justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
    color: var(--fg-soft);
}
.collage__row:last-child { border-bottom: 0; }
.collage__row strong { color: var(--fg); font-weight: 600; }
.collage__chart {
    width: 100%; height: 200px;
    display: block;
    border-radius: 8px;
    overflow: hidden;
}

/* ── D: Chart-first hero ──────────────────────────────────────────────── */
.hero--chart {
    padding: var(--space-xl) 0 var(--space-md);
    text-align: center;
}
.hero--chart h1 {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5.4vw, 3.6rem);
    line-height: 1.06;
    letter-spacing: -0.025em;
    margin: var(--space-sm) auto var(--space-md);
    max-width: 18ch;
    color: var(--fg);
}
.hero--chart .lede {
    font-size: 1.15rem;
    max-width: 36rem;
    color: var(--fg-soft);
    line-height: 1.55;
    margin: 0 auto var(--space-md);
}
.hero--chart .ctas {
    display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;
    margin: var(--space-md) 0 var(--space-lg);
}
.hero-chart-stage {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md);
    background: linear-gradient(160deg, #38404F 0%, #2E3440 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55);
}
.hero-chart-stage__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 0.4rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.hero-chart-stage__title {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--fg);
}
.hero-chart-stage__legend {
    display: flex; gap: 1.1rem;
    font-size: 0.82rem;
    color: var(--fg-soft);
}
.hero-chart-stage__legend .swatch {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.hero-chart-stage svg.hero-chart-svg {
    width: 100%;
    height: clamp(260px, 40vh, 420px);
    display: block;
    margin-top: 0.85rem;
}

/* Print styles — when someone prints the manual (yes, it's a manual),
   render light-on-white, suppress the sidebar, expand figures, and
   hide chrome. */
@media print {
    body { background: #ffffff; color: #111; }
    .public-header, .public-footer, .manual-sidebar { display: none; }
    .manual-layout { display: block; }
    .manual-content { max-width: none; }
    .manual-content h2 { color: #111; page-break-before: always; }
    .manual-content h2::before { color: #555; }
    .manual-content h2:first-of-type { page-break-before: auto; }
    .manual-figure picture, .manual-figure img {
        box-shadow: none;
        border-color: #ccc;
        max-width: 220px;
    }
    .persona-card, .manual-callout {
        background: #f6f6f6;
        border-color: #ddd;
        color: #222;
    }
    a { color: #111; text-decoration: underline; }
}