/* VyCurve marketing landing page.
   Derived from public/assets/public.css so the pitch reads in exactly the same
   editorial register as the product it is selling: Source Serif 4 for prose,
   Inter for data and UI, the warm paper desk tone, and hairline-ruled sections
   rather than app chrome. Only the tokens and components this page uses are
   carried over, plus the handful of marketing-only pieces (plans, CTA band,
   FAQ) styled to the same rules. */

/* Self-hosted typefaces (latin subsets, variable weight) — same three files
   as the product site; no third-party font requests. */
@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: italic;
    font-weight: 200 900;
    font-display: swap;
    src: url('fonts/source-serif-4-latin-italic.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.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;
}

/* Design tokens — identical values to the product site. */
:root {
    --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Cambria, Georgia, serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg: #f6f5f1;
    --paper: #ffffff;
    --text: #172033;
    --text-secondary: #526070;
    --muted: #5d6675;
    --border: #d9e0ea;
    --border-soft: #e7e5de;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --primary: #2563eb;
    --primary-soft: #dbeafe;
    --navy: #1f3a5f;
    --graphite: #475569;
    --terrain: #4f8a63;
    --sky-muted: #64748b;
    --positive: #2f7d50;
    --caution: #b7791f;
    --attention: #c56a2d;
    --limited: #94a3b8;
    --low-agl: #b91c1c;
    --data-head: #f3f6fb;
    --radius: 5px;
    --radius-sm: 3px;
    --shadow: 0 1px 2px rgba(23, 32, 51, 0.04), 0 4px 12px rgba(23, 32, 51, 0.04);
    /* Chart type scale — mirrors the main site's public.css tokens so the
       landing figures match the report figures glyph for glyph. */
    --chart-text: 11px;
    --chart-text-sm: 10px;
    --chart-text-lg: 12px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    color: var(--text);
    background: var(--bg);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.skip-link {
    position: absolute; top: -48px; left: 8px; padding: 8px 12px;
    background: var(--navy); color: #fff; text-decoration: none;
    border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { top: 8px; }

a { color: var(--primary); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--text); letter-spacing: -0.01em; }
h1 { font-size: 1.85rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 0 0 0.5rem; }
p { margin: 0 0 0.75rem; color: var(--text-secondary); }
ul, ol { color: var(--text-secondary); }

/* Editorial serif for headings and running prose, as in the product's paper
   register. Numbers, data, and controls stay in Inter. */
h1, h2, h3, h4 { font-family: var(--serif); letter-spacing: 0; }
.hero__lede, .section > p, .section__sub, .epigraph,
.step-card__body p, .can-cannot li, .faq p,
.report-panel__take, .dig-card p {
    font-family: var(--serif);
    font-variant-numeric: normal; /* proportional figures in prose */
}
.hero__lede, .section > p, .report-headline { max-width: 72ch; }

/* The report hero: drop-cap lede and a warm eyebrow, as on the Climb Report. */
.hero--report .hero__eyebrow { color: var(--attention); }
.hero--report .hero__lede::first-letter {
    font-family: var(--serif);
    font-size: 3.2em;
    line-height: 0.78;
    float: left;
    margin: 4px 10px 0 0;
    color: var(--navy);
    font-weight: 600;
}

/* --- Sidenotes & margin notes (the Tufte machinery, from the product) ----- */
body { counter-reset: sidenote; }
input.margin-toggle { display: none; }
.sidenote-number { counter-increment: sidenote; }
.sidenote-number::after {
    content: counter(sidenote);
    font-family: var(--sans);
    font-size: 0.62em;
    font-weight: 600;
    vertical-align: super;
    line-height: 0;
    color: var(--attention);
    padding-left: 1px;
}
.sidenote {
    font-family: var(--sans);
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-variant-numeric: normal;
    text-align: left;
}
.sidenote::before {
    content: counter(sidenote) " ";
    font-weight: 600;
    color: var(--attention);
}
label.margin-toggle { cursor: pointer; }
/* Reserve the right margin only on sections that actually carry a note, so
   every wide layout keeps the full width by default. The note is pinned to
   the reserved rail at the height of its reference mark, so it always sits
   beside the sentence that cites it — even when the section's body is a
   grid or a table rather than a single prose column. */
@media (min-width: 1081px) {
    .section { position: relative; }
    .section:has(.sidenote) { padding-right: 15rem; }
    .sidenote {
        position: absolute;
        right: 0;
        width: 13rem;
    }
}
/* Narrow screens: no margin to pin to — the note collapses to a
   tap-to-reveal footnote beside its reference number. */
@media (max-width: 1080px) {
    .sidenote { display: none; }
    .margin-toggle:checked + .sidenote {
        display: block;
        width: auto;
        margin: 0.7rem 0 0.9rem;
        padding-left: 0.85rem;
        border-left: 2px solid var(--border);
    }
}

/* Site header — journal masthead with a navy nameplate rule. */
.site-header {
    background: var(--paper);
    border-top: 3px solid var(--navy);
    border-bottom: 1px solid var(--border);
}
.site-header__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.site-brand {
    display: flex; flex-direction: column; line-height: 1.2;
    color: var(--text); text-decoration: none;
}
.site-brand__name {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--serif);
    font-weight: 600; font-size: 1.16rem; letter-spacing: 0.01em;
}
.site-brand__mark { width: 20px; height: 20px; flex: 0 0 auto; }
.site-brand__sub { font-size: 0.78rem; color: var(--muted); font-family: var(--serif); font-style: italic; }
.site-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.site-nav__link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    transition: background-color 0.12s ease;
}
.site-nav__link:hover { background: var(--panel-soft); color: var(--text); }
.site-nav .btn { margin-left: 8px; }

/* Collapsible navigation: on wide screens the full nav shows inline and the
   toggle is hidden; below the breakpoint the ten links would wrap into five
   rows and swallow the whole first mobile screen, so they fold behind a Menu
   button. Pure CSS (a focusable checkbox drives the disclosure) — no script,
   in keeping with this page's no-build-step constraint. */
.nav-toggle__cb {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}
.nav-toggle { display: none; }
@media (max-width: 899px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        cursor: pointer;
        color: var(--text);
        font-family: var(--sans);
        font-size: 0.9rem;
        font-weight: 600;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--paper);
        user-select: none;
    }
    .nav-toggle__icon { display: inline-flex; flex-direction: column; gap: 3px; width: 16px; }
    .nav-toggle__icon span { height: 2px; border-radius: 2px; background: var(--navy); transition: transform 0.15s ease, opacity 0.15s ease; }
    .nav-toggle__cb:focus-visible + .nav-toggle {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
    .site-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 10px;
        padding-top: 6px;
        border-top: 1px solid var(--border-soft);
    }
    .nav-toggle__cb:checked ~ .site-nav { display: flex; }
    /* Morph the icon into a close (×) when open. */
    .nav-toggle__cb:checked + .nav-toggle .nav-toggle__icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
    .nav-toggle__cb:checked + .nav-toggle .nav-toggle__icon span:nth-child(2) { opacity: 0; }
    .nav-toggle__cb:checked + .nav-toggle .nav-toggle__icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
    .site-nav__link {
        padding: 11px 4px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-soft);
        font-size: 1rem;
    }
    .site-nav .btn { margin: 12px 0 2px; text-align: center; }
}

/* Main column. */
.site-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 24px;
}

/* Hero and sections in the paper register: hairline rules, no cards. */
.hero { padding: 1.2rem 0 0; margin: 0 0 1.4rem; }
.hero__inner { max-width: 780px; }
.hero__eyebrow {
    margin: 0 0 8px;
    color: var(--navy);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--sans);
}
.hero__title { font-size: 2.3rem; margin: 0 0 12px; color: var(--text); }
.hero__lede { font-size: 1.08rem; color: var(--text-secondary); margin: 0 0 16px; max-width: 62ch; }
.hero__actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }

/* Hero lead: prose on the left, a compact proof ledger on the right so the
   first screen shows the numbers the headline is about — not just claims. On
   wide screens they sit side by side; on narrow screens the ledger stacks
   under the actions as a plain hairline-ruled list. */
.hero__lead { display: block; }
@media (min-width: 1081px) {
    .hero__lead {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.85fr);
        gap: 2.6rem;
        align-items: start;
    }
    .hero__lead .hero__inner { max-width: none; }
}
.hero__aside { margin: 1.4rem 0 0; }
@media (min-width: 1081px) { .hero__aside { margin: 0.4rem 0 0; } }
.hero__aside-title {
    margin: 0 0 2px;
    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--navy);
}
.hero-ledger { margin: 0; padding: 0; }
.hero-ledger__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    padding: 0.62rem 0 0.6rem;
    border-top: 1px solid var(--border-soft);
}
.hero-ledger__row:first-of-type { border-top: 2px solid var(--border); }
.hero-ledger__label {
    grid-column: 1;
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}
.hero-ledger__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    align-self: center;
    font-family: var(--sans);
    font-size: 1.7rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--navy);
}
.hero-ledger__unit { font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-left: 3px; }
.hero-ledger__helper {
    grid-column: 1;
    margin: 3px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--muted);
    max-width: 30ch;
}
.hero-ledger__row--flag .hero-ledger__value { color: var(--attention); }
.hero__aside-note { margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--muted); font-style: italic; }
.hero__aside-note a { color: var(--navy); }

.section {
    padding: 1.6rem 0 0;
    margin: 1.8rem 0 0;
    border-top: 1px solid var(--border-soft);
    display: flow-root;
}
.section__header { margin: 0 0 16px; border-bottom: 1px solid var(--border-soft); padding-bottom: 10px; }
.section__sub { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 46rem; }
.section > p { max-width: 42rem; }

/* Buttons. */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--sans);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--panel-soft); border-color: #c4cdda; text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--primary:hover { background: #1a3050; border-color: #1a3050; }
.btn--ghost { background: transparent; }
.btn--large { padding: 11px 20px; font-size: 1rem; }

/* Epigraph. */
.epigraph {
    margin: 0 0 1.6rem;
    max-width: 40rem;
    font-family: var(--serif);
    font-style: italic;
    color: var(--text-secondary);
    font-variant-numeric: normal;
}
.epigraph p { margin: 0 0 0.35rem; color: inherit; font-style: italic; }
.epigraph__cite {
    display: block; font-style: normal; font-family: var(--sans);
    font-size: 0.8rem; color: var(--muted); text-align: right;
}
.epigraph__cite::before { content: "\2014\00a0"; }

/* Demonstration notice — same shape as the product's educational notice. */
.edu-notice {
    background: #faf8f2;
    border: 1px solid var(--border);
    border-left: 3px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 16px 20px;
    margin: 1.4rem 0;
    max-width: 46rem;
}
.edu-notice__title {
    font-size: 0.8rem; color: var(--navy);
    letter-spacing: 0.04em; text-transform: uppercase;
    margin: 0 0 4px; font-weight: 600;
}
.edu-notice__body { margin: 0; color: var(--text-secondary); font-size: 0.94rem; }

/* Metric ledger tiles. */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px 24px;
    margin: 0 0 12px;
}
.metric-card { border-top: 2px solid var(--border); padding: 0.6rem 0 0; }
.metric-card__label {
    font-size: 0.78rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 4px; font-weight: 600;
}
.metric-card__value-row { display: flex; align-items: baseline; gap: 4px; }
.metric-card__value { font-size: 1.6rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.metric-card__unit { font-size: 0.85rem; color: var(--muted); margin-left: 2px; }
.metric-card__helper { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); }

/* Captions read like journal figure legends: serif, italic, muted. */
.caption {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-variant-numeric: normal;
    margin: 8px 0 0;
    max-width: 46rem;
}
/* Running figure numbers, set apart from the legend's italic voice. */
.fig-label { font-style: normal; font-weight: 600; color: var(--navy); }

/* Headline finding sentence — the product's report-headline treatment. */
.report-headline {
    font-size: 1.42rem; line-height: 1.42; color: var(--text);
    font-family: var(--serif);
    background: var(--paper); border: 1px solid var(--border);
    border-left: 4px solid var(--navy);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 20px 24px; margin: 0 0 20px;
}
.report-headline strong { color: var(--navy); font-weight: 600; }

/* Map legend key — the product's legend-swatch grammar, grouped in rows. */
.map-key { margin: 10px 0 0; }
.map-key__group {
    margin: 10px 0 4px; font-size: 0.72rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
}
.map-key__row { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.85rem; color: var(--text-secondary); }
.map-key__row span { display: inline-flex; align-items: center; gap: 8px; }
.key-swatch {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 3px; border: 1px solid var(--border); flex: 0 0 auto;
}
.key-swatch--agl-low { background: hsl(260, 55%, 38%); border-color: hsl(260, 55%, 30%); }
.key-swatch--agl-mid { background: hsl(207, 55%, 44%); border-color: hsl(207, 55%, 34%); }
.key-swatch--agl-high { background: hsl(160, 55%, 50%); border-color: hsl(160, 55%, 38%); }
.key-swatch--gray { background: rgba(148, 163, 184, 0.45); border-color: rgba(148, 163, 184, 0.8); }
.key-swatch--missing { background: repeating-linear-gradient(45deg, transparent, transparent 3px, #94a3b8 3px, #94a3b8 4px); border: 1px solid #94a3b8; }
.key-swatch--runway { background: var(--navy); border-color: var(--navy); width: 14px; height: 3px; border-radius: 1px; }
.key-swatch--classd { background: transparent; border: 1.5px dashed var(--navy); }
.key-swatch--part77h { background: rgba(37, 99, 235, 0.10); border: 1.2px solid var(--primary); }
.key-swatch--part77c { background: rgba(148, 163, 184, 0.10); border: 1.2px dashed var(--limited); }
.key-swatch--part77a { background: rgba(124, 58, 237, 0.10); border: 1.2px dashed #7c3aed; }
.key-swatch--rpz { background: rgba(197, 106, 45, 0.18); border: 1.4px solid var(--attention); }
.key-swatch--pattern { background: rgba(15, 118, 110, 0.12); border: 1.4px dashed #0f766e; }
.key-swatch--dep-path { background: #0ea5e9; border-color: #0369a1; height: 4px; }
.key-swatch--app-path { background: repeating-linear-gradient(90deg, #0d9488 0 6px, transparent 6px 11px); border-color: #0f766e; height: 4px; }
.key-swatch--end-27 { background: #2563eb; border-color: #2563eb; }
.key-swatch--end-9 { background: #ea580c; border-color: #ea580c; }
.key-swatch--airport-public { background: var(--primary); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px var(--primary); }
.key-swatch--airport-private { background: var(--attention); border: 1px solid #fff; border-radius: 2px; transform: rotate(45deg); box-shadow: 0 0 0 1px var(--attention); }
.key-swatch--fix {
    background: transparent; border: 0; border-radius: 0;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 11px solid #4f46e5;
}
.key-swatch--navaid {
    background: #0d9488; border: 0; border-radius: 0;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.key-swatch--obstacle { background: #dc2626; border-color: #dc2626; }

/* Legend as a top-of-section panel — the product's map-legend--top. */
.map-key--panel {
    background: var(--panel-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 0 0 14px;
}
.map-key--panel .map-key__group { margin-top: 4px; }
.map-key__title {
    font-size: 0.82rem; margin: 0 0 6px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--sans);
}
.map-key__more { margin: 8px 0 0; }
.map-key__more > summary {
    cursor: pointer; font-size: 0.72rem; font-weight: 600;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
    padding: 2px 0;
}
.map-key__more > .map-key__row { margin-top: 4px; }

/* Map layout: settings sidebar + map pane, as on the product's map pages. */
.map-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    align-items: stretch;
}
@media (max-width: 860px) { .map-layout { grid-template-columns: 1fr; } }
.map-settings {
    background: var(--panel-soft);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 14px;
    overflow-y: auto;
}
.map-settings h2 { font-size: 1rem; margin: 0 0 8px; font-family: var(--sans); }
.map-settings fieldset { border: none; padding: 0; margin: 0 0 12px; }
.map-settings legend {
    font-size: 0.78rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 4px; font-weight: 600;
}
.map-settings label { display: block; padding: 2px 0; color: var(--text); font-size: 0.88rem; font-family: var(--sans); }
.map-settings .caption { font-family: var(--sans); font-style: normal; font-size: 0.76rem; margin: 4px 0 0; }
.map-container {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    /* Matches the mock basemap land tone so any letterboxing above and below
       the SVG reads as more map, not as a white band. */
    background: #f0eee7;
    display: flex; flex-direction: column;
    justify-content: center;
}
.mock-map { width: 100%; height: auto; display: block; flex: 1 1 auto; }

/* Segmented pill buttons (track type). */
.explorer-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.explorer-seg__btn {
    border: 0; background: #fff; padding: 6px 12px;
    font-size: 12px; font-weight: 700; color: var(--navy);
    border-right: 1px solid var(--border);
    text-decoration: none; display: inline-block; cursor: default;
    font-family: var(--sans);
}
.explorer-seg__btn:last-child { border-right: 0; }
.explorer-seg__btn.is-active { background: var(--navy); color: #fff; }

/* Two-way segmented control (radio pairs). */
.segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper);
}
.segmented-control label { padding: 0; }
.segmented-control label + label { border-left: 1px solid var(--border); }
.segmented-control input { position: absolute; opacity: 0; pointer-events: none; }
.segmented-control span {
    display: block; padding: 8px 10px; text-align: center;
    font-size: 0.86rem; font-weight: 700; color: var(--text-secondary);
    cursor: pointer;
}
.segmented-control input:checked + span { background: var(--primary); color: #fff; }

/* Opacity slider. */
.range-control { display: grid; gap: 7px; }
.range-control input[type="range"] { width: 100%; accent-color: var(--primary); }
.range-stops {
    display: flex; justify-content: space-between; gap: 8px;
    color: var(--muted); font-size: 0.74rem; font-weight: 700;
}

/* Hero chart plate. */
.profile-chart-wrap {
    margin: 18px 0 0;
    background: var(--paper);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 6px 4px 0;
}
.hero-chart { width: 100%; height: auto; display: block; }
.hero-chart .grid-line { stroke: #eef1f5; stroke-width: 1; }
.hero-chart .grid-line--ref { stroke: #cbd5e1; stroke-dasharray: 4 4; }
.hero-chart .axis-label { fill: var(--muted); font-size: var(--chart-text); font-family: var(--sans); }
.hero-chart .axis-label--title { fill: var(--text-secondary); font-weight: 600; }
.hero-chart .axis-label--phase { fill: var(--navy); font-weight: 600; font-size: var(--chart-text-sm); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-chart .direct-label { fill: var(--graphite); font-size: var(--chart-text); font-weight: 600; font-family: var(--sans); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.hero-chart .direct-label--primary { fill: var(--navy); }
.hero-chart .direct-label--terrain { fill: var(--terrain); }
.hero-chart .terrain-fill { fill: var(--terrain); fill-opacity: 0.16; stroke: var(--terrain); stroke-width: 1.4; stroke-opacity: 0.72; }
.hero-chart .series { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-chart .series--msl { stroke: var(--navy); stroke-width: 2.2; }
.hero-chart .series--median { stroke: var(--navy); stroke-width: 1.4; stroke-dasharray: 5 3; opacity: 0.6; }
.hero-chart .band--iqr { fill: var(--primary); fill-opacity: 0.14; }
.hero-chart .band--range { fill: var(--limited); fill-opacity: 0.12; }
.hero-chart .phase-band { fill-opacity: 0.06; }
.hero-chart .phase-band--initial { fill: var(--primary); }
.hero-chart .phase-band--mid { fill: var(--caution); }
.hero-chart .phase-band--final { fill: var(--positive); }
.hero-chart .annotation__dot { fill: var(--attention); }
.hero-chart .annotation__leader { stroke: var(--attention); stroke-width: 1; }
.hero-chart .annotation__label { fill: var(--text); font-size: var(--chart-text); font-weight: 600; font-family: var(--sans); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

.profile-chart__legend {
    display: flex; gap: 18px; flex-wrap: wrap;
    padding: 10px 14px 6px;
    font-size: 0.85rem; color: var(--text-secondary);
}
.profile-chart__legend .swatch {
    display: inline-block; width: 18px; height: 4px; border-radius: 2px;
    vertical-align: middle; margin-right: 6px;
}
.profile-chart__legend .swatch--msl { background: var(--navy); }
.profile-chart__legend .swatch--median {
    background-image: linear-gradient(90deg, var(--navy) 60%, transparent 60%);
    background-size: 5px 100%;
}
.profile-chart__legend .swatch--iqr { background: var(--primary-soft); height: 10px; }
.profile-chart__legend .swatch--range { background: #e4e9f1; height: 10px; }
.profile-chart__legend .swatch--terrain { background: var(--terrain); opacity: 0.6; height: 10px; }
.profile-chart__meta { margin: 0; padding: 4px 14px 10px; color: var(--muted); font-size: 0.76rem; }

/* The 2x2 sample-report plate. */
.report-plate { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .report-plate { grid-template-columns: 1fr; } }
.report-panel {
    margin: 0; padding: 16px 18px;
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    background: var(--panel-soft);
    display: flex; flex-direction: column; gap: 8px;
}
.report-panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.report-panel__head h3 { margin: 0; font-size: 1.02rem; color: var(--text); }
.report-panel__chip {
    font-size: 0.72rem; font-weight: 600; color: var(--text-secondary);
    background: var(--paper); border: 1px solid var(--border-soft);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.report-panel__chart { width: 100%; }
.report-panel__chart svg { width: 100%; height: auto; display: block; background: var(--paper); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); }
.report-panel__take { margin: 0; font-size: 0.92rem; color: var(--text-secondary); }
.report-panel__take strong { color: var(--navy); }

/* Shared mini-chart classes for the plate SVGs. */
.mini-chart .grid-line { stroke: #eef1f5; stroke-width: 1; }
.mini-chart .axis-label { fill: var(--muted); font-size: var(--chart-text); font-family: var(--sans); }
.mini-chart .axis-label--title { fill: var(--text-secondary); font-weight: 600; }
.mini-chart .band--iqr { fill: var(--primary); fill-opacity: 0.16; }
.mini-chart .band--range { fill: var(--limited); fill-opacity: 0.12; }
.mini-chart .series--median { fill: none; stroke: var(--navy); stroke-width: 1.4; stroke-dasharray: 5 3; opacity: 0.7; }
.mini-chart .series--line { fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mini-chart .terrain-fill { fill: var(--terrain); fill-opacity: 0.16; stroke: var(--terrain); stroke-width: 1.2; stroke-opacity: 0.7; }
.mini-chart .dot { fill: rgba(31, 58, 95, 0.35); stroke: rgba(31, 58, 95, 0.85); stroke-width: 1; }
.mini-chart .dot--good { fill: rgba(47, 125, 80, 0.4); stroke: rgba(47, 125, 80, 0.9); }
.mini-chart .dot--mid { fill: rgba(183, 121, 31, 0.4); stroke: rgba(183, 121, 31, 0.9); }
.mini-chart .dot--low { fill: rgba(197, 106, 45, 0.4); stroke: rgba(197, 106, 45, 0.9); }
.mini-chart .trend { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.7; }
.mini-chart .bar { fill: var(--navy); fill-opacity: 0.65; stroke: var(--navy); stroke-opacity: 0.85; stroke-width: 0.5; }
.mini-chart .bar--low { fill: var(--low-agl); fill-opacity: 0.8; stroke: var(--low-agl); }
.mini-chart .bar--caution { fill: #e0a106; fill-opacity: 0.85; stroke: #b7791f; }
.mini-chart .ref-line { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-dasharray: 4 3; }
.mini-chart .ref-label { fill: var(--graphite); font-size: var(--chart-text-sm); font-family: var(--sans); }

/* Capability index — the quiet ruled rail. */
.dig-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 24px; }
.dig-card {
    display: block; text-decoration: none; color: inherit;
    border-top: 1px solid var(--border);
    background: transparent; padding: 0.9rem 2px 0;
}
.dig-card h3 { margin: 0 0 4px; font-size: 1rem; color: var(--navy); }
.dig-card p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.dig-card em { font-style: italic; color: var(--text); }

/* Methodology steps: serif drop numerals over hairline rules. */
.step-cards { margin: 0; }
.step-card {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 1rem;
    border-top: 1px solid var(--border-soft);
    padding: 1.1rem 0 0;
    margin: 1.1rem 0 0;
}
.step-card:first-child { border-top: 0; padding-top: 0.2rem; margin-top: 0.4rem; }
.step-card__num {
    color: var(--attention);
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1;
}
.step-card__body h3 { font-family: var(--serif); margin: 0 0 4px; }
.step-card__body p { margin: 0; max-width: 40rem; }

/* Can / cannot — two plain ruled lists. */
.can-cannot { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin: 0 0 8px; }
@media (max-width: 760px) { .can-cannot { grid-template-columns: 1fr; } }
.can-cannot h3 { margin: 0 0 8px; font-size: 1.05rem; }
.can-cannot ul { margin: 0; padding-left: 18px; }
.can-cannot li { margin: 6px 0; }
.can-cannot__can h3 { color: var(--positive); }
.can-cannot__cannot h3 { color: var(--text); }

/* Confidence chips. */
.confidence-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.confidence-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: var(--text-secondary);
    border: 1px solid var(--border-soft); background: var(--panel-soft);
    border-radius: 999px; padding: 6px 14px;
}
.confidence-chip strong { color: var(--text); }

/* Pricing — one subscription, presented as a printed rate plate: navy top
   rule, ledger price column, ruled checklist of what ships with it. */
.pricing-single {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    background: var(--paper);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--navy);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 26px 30px;
    margin: 0 0 14px;
}
@media (max-width: 820px) { .pricing-single { grid-template-columns: 1fr; gap: 18px; } }
.pricing-single__tier {
    font-size: 0.78rem; font-weight: 600; color: var(--navy);
    text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 4px;
    font-family: var(--sans);
}
.pricing-single__price {
    font-size: 2.6rem; font-weight: 600; color: var(--text);
    margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.1;
    font-family: var(--sans);
    border-top: 2px solid var(--border);
    padding-top: 0.6rem;
}
.pricing-single__price small { font-size: 1rem; font-weight: 400; color: var(--muted); }
.pricing-single__blurb { margin: 0 0 14px; font-size: 0.97rem; font-family: var(--serif); }
.pricing-single__price-col .btn { margin-bottom: 8px; }
.pricing-single__included h3 { margin: 0 0 10px; }
.included-list {
    list-style: none;
    margin: 0; padding: 0;
    columns: 2; column-gap: 32px;
    font-size: 0.93rem;
    font-family: var(--sans);
}
@media (max-width: 620px) { .included-list { columns: 1; } }
.included-list li {
    break-inside: avoid;
    padding: 7px 0 7px 24px;
    border-top: 1px solid var(--border-soft);
    position: relative;
}
.included-list li::before {
    content: "✓";
    position: absolute; left: 2px;
    color: var(--positive);
    font-weight: 700;
}

/* Plan comparison table — the product's pivot-grid treatment. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 0.93rem;
    font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td {
    text-align: left;
    padding: 8px 11px;
    border: 1px solid var(--border-soft);
    vertical-align: top;
}
.data-table thead th {
    font-weight: 600; color: var(--text);
    background: var(--data-head);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
.data-table th[scope="row"] { font-weight: 500; color: var(--text); background: #fbfcfe; }
.data-table td.center { text-align: center; }
.data-table .yes { color: var(--positive); font-weight: 600; }
.data-table .no { color: var(--limited); }

/* FAQ. */
.faq details {
    border-top: 1px solid var(--border-soft);
    padding: 0.9rem 0;
    max-width: 46rem;
}
.faq details:last-child { border-bottom: 1px solid var(--border-soft); }
.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    font-size: 1rem;
}
.faq summary:hover { color: var(--navy); }
.faq p { margin: 0.6rem 0 0; font-size: 0.95rem; }

/* Demo-request form. Inputs stay in Inter beside the serif aside, on the
   same quiet panel treatment as the map settings sidebar. */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(320px, 7fr);
    gap: 32px;
    align-items: start;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside h3 { margin: 0 0 8px; }
.contact-aside .bullet-list { font-family: var(--serif); font-variant-numeric: normal; }
.contact-form {
    background: var(--panel-soft);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--navy);
    border-radius: var(--radius-sm);
    padding: 22px 24px;
}
.contact-form__row { margin: 0 0 14px; }
.contact-form label {
    display: block;
    font-size: 0.78rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 0 0 4px;
    font-family: var(--sans);
}
.contact-form .req { color: var(--attention); }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.contact-form textarea { resize: vertical; }
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}
/* Honeypot: visually removed, still submitted by naive bots. */
.contact-form__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}
/* Post-submit notes, revealed by the redirect fragment (#demo-thanks /
   #demo-error) — no JavaScript required. */
.form-note { display: none; margin: 0 0 14px; padding: 10px 14px; font-size: 0.94rem; border-radius: var(--radius-sm); }
.form-note:target { display: block; }
.form-note--ok { background: #e9f5ee; border: 1px solid #b6dac5; color: var(--positive); }
.form-note--err { background: #fdf0ec; border: 1px solid #f1bf99; color: var(--attention); }

/* Footer. */
.site-footer { background: var(--paper); border-top: 1px solid var(--border); margin-top: 32px; }
.site-footer__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px;
    display: grid;
    /* Four columns: the wordmark and its standing disclaimer, this page's
       contents, the cross-page rail, and the contact note. */
    grid-template-columns: 1.9fr 1fr 1.2fr 1.2fr;
    gap: 28px;
}
@media (max-width: 1040px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer__col h3 { font-size: 0.85rem; margin: 0 0 6px; color: var(--navy); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--sans); }
.site-footer__wordmark {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 10px;
    font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
    letter-spacing: 0.01em; color: var(--text);
}
.site-footer__wordmark .site-brand__mark { width: 22px; height: 22px; }
.site-footer__col p, .site-footer__col li { font-size: 0.88rem; color: var(--text-secondary); }
.site-footer__col p { font-family: var(--serif); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin: 3px 0; }
.site-footer__col a { color: var(--primary); }

/* ============================================================
   Approaches, landings & the low-altitude exposure window
   ============================================================ */

/* The below-1,000-ft-AGL exposure window: the stretch of an approach
   where an aircraft is most audible over the ground. Drawn as a calm amber
   wash with a dashed reference — a review cue, never a verdict. */
.hero-chart .band--exposure,
.mini-chart .band--exposure { fill: var(--attention); fill-opacity: 0.08; }
.hero-chart .exposure-ref,
.mini-chart .exposure-ref { stroke: var(--attention); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: 0.75; }
.hero-chart .exposure-ref-label,
.mini-chart .exposure-ref-label { fill: var(--attention); font-size: var(--chart-text-sm); font-family: var(--sans); font-weight: 600; }
.hero-chart .series--approach,
.mini-chart .series--approach { fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.swatch--exposure { background: var(--attention); opacity: 0.35; }

/* Score-component bar rows: a light track with a navy fill, read as
   "share of the maximum earned" — a distribution readout, not a grade. */
.mini-chart .track { fill: var(--limited); fill-opacity: 0.16; }
.mini-chart .track-fill { fill: var(--navy); fill-opacity: 0.72; }
.mini-chart .track-fill--best { fill: var(--positive); fill-opacity: 0.8; }
.mini-chart .track-fill--focus { fill: var(--attention); fill-opacity: 0.8; }
.mini-chart .comp-label { fill: var(--text); font-size: var(--chart-text); font-family: var(--sans); }
.mini-chart .comp-value { fill: var(--muted); font-size: var(--chart-text-sm); font-family: var(--sans); }

/* The headline approach score, shown as a calm stat rather than a trophy. */
.score-readout {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin: 6px 0 0; padding: 12px 16px;
    background: var(--panel-soft); border: 1px solid var(--border-soft);
    border-left: 3px solid var(--navy); border-radius: var(--radius);
}
.score-readout__num { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; color: var(--navy); line-height: 1; }
.score-readout__num small { font-size: 1rem; color: var(--muted); font-weight: 400; }
.score-readout__band { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--text-secondary); }
.score-readout__note { font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--text-secondary); margin: 0; flex: 1 1 16rem; }

/* ============================================================
   Disclaimer / caveat callout — stated as plainly as the findings
   ============================================================ */
.disclaimer {
    margin: 18px 0 0; padding: 16px 20px;
    background: var(--panel-soft); border: 1px solid var(--border-soft);
    border-left: 3px solid var(--attention); border-radius: var(--radius);
}
.disclaimer--tight { margin-top: 12px; padding: 12px 16px; }
.disclaimer h3 {
    margin: 0 0 8px; font-family: var(--sans); font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--attention);
}
.disclaimer p { margin: 0 0 8px; font-size: 0.92rem; color: var(--text-secondary); }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer ul { margin: 0; padding-left: 1.1rem; }
.disclaimer li { font-size: 0.92rem; color: var(--text-secondary); margin: 4px 0; }
.disclaimer strong { color: var(--text); }

/* A quiet cross-page CTA link that reads as an invitation, not a banner. */
.section__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 0; }
.section__cta .caption { margin: 0; }

/* ==========================================================================
   Surfaces, records, and the figure gallery
   --------------------------------------------------------------------------
   Components added so the marketing site can show the parts of the product it
   was previously only describing: the four reading surfaces, the live plate,
   printable record cards, dated editions, and the figure gallery. Everything
   below reuses the tokens above — no new palette, no new type family.
   ========================================================================== */

/* --- The four surfaces ---------------------------------------------------- */
.surface-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 20px 24px; }
.surface-card {
    display: flex; flex-direction: column; gap: 10px;
    border-top: 2px solid var(--navy);
    padding: 14px 2px 0;
}
.surface-card__glyph { display: block; width: 100%; height: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--paper); }
.surface-card__label {
    margin: 0; font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--attention);
}
.surface-card h3 { margin: 0; font-size: 1.08rem; color: var(--navy); }
.surface-card p { margin: 0; font-size: 0.9rem; color: var(--text-secondary); }
.surface-card__chapters {
    margin: 2px 0 0; padding: 0; list-style: none;
    font-family: var(--sans); font-size: 0.8rem; color: var(--muted);
}
.surface-card__chapters li { padding: 3px 0; border-top: 1px solid var(--border-soft); }

/* --- Proof-of-scale ledger strip ------------------------------------------ */
.count-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0; margin: 18px 0 0;
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    background: var(--paper); overflow: hidden;
}
.count-band__cell { padding: 14px 18px; border-left: 1px solid var(--border-soft); }
.count-band__cell:first-child { border-left: 0; }
.count-band__value { display: block; font-family: var(--sans); font-size: 1.5rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
.count-band__label { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--text-secondary); }

/* --- Wide figure plate (maps, live, replay) ------------------------------- */
.plate {
    margin: 18px 0 0; padding: 0;
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    background: var(--paper); overflow: hidden;
}
.plate > svg { width: 100%; height: auto; display: block; }
.plate__caption { margin: 0; padding: 12px 16px; border-top: 1px solid var(--border-soft); font-size: 0.86rem; color: var(--text-secondary); }
.plate__caption strong { color: var(--navy); }
.mock-map--inset { width: 100%; height: auto; display: block; }

/* --- Record cards: share card and printable plate ------------------------- */
.record-pair { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .record-pair { grid-template-columns: 1fr; } }
.record {
    margin: 0; display: flex; flex-direction: column; gap: 10px;
}
.record__frame {
    border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
    background: var(--panel-soft); padding: 14px;
}
.record-card { width: 100%; height: auto; display: block; box-shadow: var(--shadow); }
.record-card--plate { max-width: 340px; margin: 0 auto; }
.record__take { margin: 0; font-size: 0.92rem; color: var(--text-secondary); }
.record__take strong { color: var(--navy); }

/* --- Figure gallery ------------------------------------------------------- */
.gallery-intro { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 860px) { .gallery-intro { grid-template-columns: 1fr; } }
.gallery-group { margin: 34px 0 0; }
.gallery-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 16px; }
.gallery-group__head h3 { margin: 0; font-size: 1.24rem; color: var(--text); }
.gallery-group__count { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.gallery-group > p { margin: 0 0 14px; max-width: 46rem; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 880px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-grid--wide { grid-template-columns: 1fr; }
.figure-type {
    font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    background: var(--data-head); border: 1px solid var(--border-soft);
    border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}

/* --- Page-level jump rail ------------------------------------------------- */
.page-rail {
    display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
    margin: 0 0 6px; padding: 10px 0; border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--sans); font-size: 0.84rem;
}
.page-rail__label { color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.72rem; }
.page-rail a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid transparent; }
.page-rail a:hover { color: var(--navy); border-bottom-color: var(--primary); }

/* --- Inline sparklines, used as punctuation in prose and table rows -------- */
.sparkline { display: inline-block; width: 68px; height: 16px; vertical-align: -3px; margin: 0 2px; }
.sparkline path { fill: none; stroke: var(--navy); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sparkline .sparkline__area { fill: var(--primary); fill-opacity: 0.12; stroke: none; }
.data-table .sparkline { width: 84px; }

/* --- Two-column editorial block ------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--navy); }
.split p { margin: 0 0 10px; }

/* --- Chart-grammar key, shown once and reused by every figure ------------- */
.grammar-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; font-family: var(--sans); font-size: 0.84rem; color: var(--text-secondary); }
.grammar-key span { display: inline-flex; align-items: center; gap: 7px; }
.grammar-key i { display: inline-block; width: 20px; height: 4px; border-radius: 2px; font-style: normal; }
.grammar-key .gk--observed { background: var(--navy); }
.grammar-key .gk--reference { background: var(--graphite); opacity: 0.55; }
.grammar-key .gk--terrain { background: var(--terrain); opacity: 0.6; height: 10px; }
.grammar-key .gk--band { background: var(--primary-soft); height: 10px; }
.grammar-key .gk--below { background: var(--low-agl); }
.grammar-key .gk--limited { background: repeating-linear-gradient(45deg, var(--limited) 0 2px, transparent 2px 5px); height: 10px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}