/* Shared V27 presentation layer for the Field Notes index and articles. */
:root {
    color-scheme: dark;
    --text-rgb: 255, 255, 255;
    --bg-rgb: 7, 10, 8;
    --green-rgb: 0, 239, 130;
    --nav-bg: rgba(var(--bg-rgb), 0.86);
    --ghost: rgba(var(--text-rgb), 0.025);
    --section-bg: rgba(22, 22, 22, 0.74);
    --accent-ink: #070A08;
    --sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --type-reading: 17px;
    --type-body: 16px;
    --type-small: 15px;
    --type-eyebrow: 13px;
    --type-action: 11px;
    --type-meta: 10px;
    --leading-reading: 1.68;
    --leading-body: 1.7;
    --leading-small: 1.6;
    --leading-label: 1.4;
    --tracking-heading: -0.02em;
    --tracking-label: 0.10em;
    --tracking-label-wide: 0.14em;
}

:root[data-theme='light'] {
    color-scheme: light;
    --black: #FFFFFF;
    --surface: #F4F7F5;
    --surface-lift: #EDF3F0;
    --green: #00D978;
    --green-rgb: 0, 217, 120;
    --white: #070A08;
    --text-rgb: 7, 10, 8;
    --bg-rgb: 255, 255, 255;
    --dim: rgba(7, 10, 8, 0.76);
    --border: rgba(7, 10, 8, 0.10);
    --border-bright: rgba(7, 10, 8, 0.16);
    --nav-bg: rgba(255, 255, 255, 0.88);
    --ghost: rgba(7, 10, 8, 0.025);
    --section-bg: rgba(244, 247, 245, 0.88);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --black: #FFFFFF;
        --surface: #F4F7F5;
        --surface-lift: #EDF3F0;
        --green: #00D978;
        --green-rgb: 0, 217, 120;
        --white: #070A08;
        --text-rgb: 7, 10, 8;
        --bg-rgb: 255, 255, 255;
        --dim: rgba(7, 10, 8, 0.76);
        --border: rgba(7, 10, 8, 0.10);
        --border-bright: rgba(7, 10, 8, 0.16);
        --nav-bg: rgba(255, 255, 255, 0.88);
        --ghost: rgba(7, 10, 8, 0.025);
        --section-bg: rgba(244, 247, 245, 0.88);
    }}

html,
body {
    background: var(--black);
}

body {
    font-family: var(--sans);
    font-size: var(--type-body);
}

nav {
    background: var(--nav-bg);
}

.nav-logo {
    flex-shrink: 0;
    font-size: 15px;
    letter-spacing: var(--tracking-label);
}

.nav-links {
    font-size: var(--type-meta);
    letter-spacing: var(--tracking-label);
    color: rgba(var(--text-rgb), 0.62);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.theme-toggle {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid var(--border-bright);
    border-radius: 999px;
    background: var(--ghost);
    color: var(--white);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.theme-toggle:hover {
    border-color: rgba(var(--green-rgb), 0.72);
    background: rgba(var(--green-rgb), 0.08);
    transform: translateY(-2px);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

.theme-icon {
    position: absolute;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    transition: opacity 180ms ease, transform 180ms ease;
}

.theme-icon svg {
    display: block;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-icon--sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-icon--moon {
    opacity: 0;
    transform: rotate(-18deg) scale(0.72);
}

:root[data-theme='light'] .theme-icon--sun {
    opacity: 0;
    transform: rotate(18deg) scale(0.72);
}

:root[data-theme='light'] .theme-icon--moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-icon--sun {
        opacity: 0;
        transform: rotate(18deg) scale(0.72);
    }

    :root:not([data-theme]) .theme-icon--moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }}

.nav-cta,
.btn-fill,
.btn-submit{
    font-size: var(--type-action);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label);
}

.nav-cta,
.btn-fill,
.btn-submit,
.skip-link {
    color: var(--accent-ink);
}

.eyebrow,
.kicker {
    font-size: var(--type-eyebrow);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label-wide);
}

h1,
h2,
h3,
.series-title,
.nav-card strong {
    letter-spacing: var(--tracking-heading);
}

.hero-copy,
.section-intro,
.body p {
    line-height: var(--leading-reading);
}

.body p {
    font-size: var(--type-reading);
}

.card p,
.source-box p,
.listen-box p,
.consent {
    font-size: var(--type-small);
    line-height: var(--leading-small);
}

.card-type,
.series-num,
.series-meta,
.meta,
.source-links,
.nav-card,
.footer-links,
label {
    font-size: var(--type-meta);
    line-height: var(--leading-label);
    letter-spacing: var(--tracking-label);
}

.meta,
.nav-card,
footer {
    color: rgba(var(--text-rgb), 0.58);
}

.nav-card {
    color: rgba(var(--text-rgb), 0.62);
}

.layer-list,
.example {
    background: var(--ghost);
}

.section {
    background: var(--section-bg);
}

input {
    color: var(--white);
    background: var(--ghost);
}

input::placeholder {
    color: rgba(var(--text-rgb), 0.42);
}

.scroll-progress {
    box-shadow: 0 0 10px rgba(var(--green-rgb), 0.45);
}

:root[data-theme='light'] .eyebrow,
:root[data-theme='light'] .kicker,
:root[data-theme='light'] .card-type,
:root[data-theme='light'] .series-num,
:root[data-theme='light'] .series-meta,
:root[data-theme='light'] .meta a,
:root[data-theme='light'] .source-links,
:root[data-theme='light'] .card-link,
:root[data-theme='light'] .nav-card span {
    color: var(--white);
    font-weight: 800;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .eyebrow,
    :root:not([data-theme]) .kicker,
    :root:not([data-theme]) .card-type,
    :root:not([data-theme]) .series-num,
    :root:not([data-theme]) .series-meta,
    :root:not([data-theme]) .meta a,
    :root:not([data-theme]) .source-links,
    :root:not([data-theme]) .card-link,
    :root:not([data-theme]) .nav-card span {
        color: var(--white);
        font-weight: 800;
    }}

@media (max-width: 900px) {
    .nav-wrap {
        gap: 14px;
    }}

@media (max-width: 560px) {
    .nav-wrap {
        gap: 10px;
    }

    .nav-logo {
        font-size: 14px;
    }

    .nav-actions {
        gap: 8px;
    }

    .theme-toggle {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .nav-cta {
        padding: 9px 13px;
        font-size: var(--type-meta);
    }

    .body p {
        font-size: var(--type-body);
        line-height: 1.62;
    }

    .footer-links {
        gap: 16px;
    }}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle,
    .theme-icon {
        transition: none;
    }}

/* ─── MOBILE NAVIGATION (v28) ─────────────────────────
   Below 900px .nav-links was hidden on every page with
   nothing to replace it, so a reader arriving on an
   article from LinkedIn could not reach any other part
   of the site. */
.nav-toggle { display: none; }
.nav-panel  { display: none; }

nav { position: relative; }

@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 auto; padding: 0;
        cursor: pointer; color: rgba(var(--text-rgb), 0.92);
        background: var(--ghost);
        border: 1px solid rgba(var(--text-rgb), 0.14);
        border-radius: 50%;
        -webkit-appearance: none; appearance: none;
        transition: color 0.18s, background 0.18s, border-color 0.18s;
    }
    .nav-toggle:hover,
    .nav-toggle[aria-expanded="true"] {
        color: var(--green);
        border-color: rgba(var(--green-rgb), 0.32);
        background: rgba(var(--green-rgb), 0.06);
    }
    .nav-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
    .nav-toggle-bars { position: relative; display: block; width: 17px; height: 11px; }
    .nav-toggle-bars span {
        position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
        background: currentColor;
        transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), opacity 0.16s linear;
    }
    .nav-toggle-bars span:nth-child(1) { top: 0; }
    .nav-toggle-bars span:nth-child(2) { top: 4.75px; }
    .nav-toggle-bars span:nth-child(3) { top: 9.5px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }

    .nav-panel {
        display: block;
        position: absolute; top: 100%; left: 0; right: 0;
        padding: 6px clamp(20px, 4.5vw, 60px) 22px;
        /* Fully opaque. A translucent panel with backdrop-filter let the
           article text read straight through the menu. */
        background: rgb(var(--bg-rgb));
        box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.55);
        border-bottom: 1px solid rgba(var(--text-rgb), 0.10);
        max-height: calc(100dvh - 60px); overflow-y: auto;
        animation: nav-panel-in 0.22s cubic-bezier(0.16,1,0.3,1) both;
    }
    .nav-panel[hidden] { display: none; }
    @keyframes nav-panel-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: none; }
    }
    .nav-panel-links { list-style: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
    .nav-panel-links a {
        display: flex; align-items: center; min-height: 54px;
        border-bottom: 1px solid rgba(var(--text-rgb), 0.10);
        font-size: 13px; font-weight: 700; letter-spacing: 0.10em;
        text-transform: uppercase; color: rgba(var(--text-rgb), 0.92);
        text-decoration: none;
    }
    .nav-panel-links a:hover { color: var(--green); }
    .nav-cta.nav-panel-cta {
        display: flex; width: 100%; margin-top: 20px;
        align-items: center; justify-content: center;
        min-height: 50px;
    }}
@media (max-width: 560px) {
    .nav-wrap > .nav-actions > .nav-cta:not(.nav-panel-cta) { display: none; }}
@media (prefers-reduced-motion: reduce) {
    .nav-panel { animation: none; }
    .nav-toggle-bars span { transition: none; }}

/* v30 readability fixes */
.section h2 + .section-intro, .newsletter h2 + .section-intro { margin-top:16px; }
.newsletter label, .newsletter .consent { color:rgba(var(--text-rgb),.64); }
.newsletter input { color:var(--white); background:var(--ghost); }
.newsletter input::placeholder { color:rgba(var(--text-rgb),.44); }

/* ═══════════════════════════════════════════════════════════════════════
   v35 · Shared refinements for Field Notes, articles, and Privacy
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · Self-host Manrope. These pages were pulling it from Google Fonts while
   the homepage served it locally, which cost a render-blocking round trip
   and made the first paint fall back to a different typeface. */
@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-variable.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* Space Mono, self-hosted alongside Manrope (SIL OFL 1.1, see
   assets/fonts/space-mono-OFL.txt). Previously a render-blocking
   stylesheet on fonts.googleapis.com plus a second connection to
   fonts.gstatic.com, on every page. */
@font-face {
    font-family: 'Space Mono';
    src: url('assets/fonts/space-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Mono';
    src: url('assets/fonts/space-mono-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 2 · Accent tokens. Light mode had pushed every green down to a flat
   near-black; these keep the brand green and still clear AA. */
:root { --accent-text: var(--green); --accent-text-sm: var(--green); }

:root[data-theme='light'] {
    --green: #00DE79;
    --green-rgb: 0, 222, 121;
    --accent-text: #00A259;
    --accent-text-sm: #00804A;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --green: #00DE79;
        --green-rgb: 0, 222, 121;
        --accent-text: #00A259;
        --accent-text-sm: #00804A;
    }}

:root[data-theme='light'] .eyebrow,
:root[data-theme='light'] .kicker,
:root[data-theme='light'] .card-type,
:root[data-theme='light'] .series-num,
:root[data-theme='light'] .series-meta,
:root[data-theme='light'] .meta a,
:root[data-theme='light'] .source-links,
:root[data-theme='light'] .card-link,
:root[data-theme='light'] .nav-card span,
:root[data-theme='light'] .consent a {
    color: var(--accent-text-sm);
}

:root[data-theme='light'] .hero-copy span,
:root[data-theme='light'] .quiet-cta span,
:root[data-theme='light'] .policy-section a,
:root[data-theme='light'] .eyebrow::before,
:root[data-theme='light'] .kicker::before {
    color: var(--accent-text);
}

:root[data-theme='light'] .eyebrow::before,
:root[data-theme='light'] .kicker::before { background: var(--accent-text); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .eyebrow,
    :root:not([data-theme]) .kicker,
    :root:not([data-theme]) .card-type,
    :root:not([data-theme]) .series-num,
    :root:not([data-theme]) .series-meta,
    :root:not([data-theme]) .meta a,
    :root:not([data-theme]) .source-links,
    :root:not([data-theme]) .card-link,
    :root:not([data-theme]) .nav-card span,
    :root:not([data-theme]) .consent a {
        color: var(--accent-text-sm);
    }

    :root:not([data-theme]) .hero-copy span,
    :root:not([data-theme]) .quiet-cta span,
    :root:not([data-theme]) .policy-section a {
        color: var(--accent-text);
    }

    :root:not([data-theme]) .eyebrow::before,
    :root:not([data-theme]) .kicker::before { background: var(--accent-text); }}

/* Light-mode fields sat at 2.5% ink on an off-white card and all but
   disappeared. Give them a white well and a visible edge. */
:root[data-theme='light'] input,
:root[data-theme='light'] .newsletter input { background: #FFFFFF; border-color: rgba(7,10,8,.18); }
:root[data-theme='light'] input::placeholder { color: rgba(7,10,8,.44); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) input,
    :root:not([data-theme]) .newsletter input { background: #FFFFFF; border-color: rgba(7,10,8,.18); }
    :root:not([data-theme]) input::placeholder { color: rgba(7,10,8,.44); }}

/* 3 · Letter-spaced uppercase collapses the word gap ("GLOBALSAAS
   PLATFORM"). Restore a proportional word space. */
.nav-links,
.nav-links a,
.nav-panel-links a,
.nav-cta,
.btn-fill,
.btn-submit,
.eyebrow,
.kicker,
.card-type,
.card-link,
.series-num,
.series-meta,
.meta,
.source-links,
.nav-card,
.footer-links,
.skip-link,
label {
    word-spacing: .16em;
}

/* 4 · Header parity with the homepage: same height, type sizes, control
   sizes, and the same section menu on desktop. */
nav#nav { height: 64px; }
.nav-wrap { max-width: 1200px; padding: 0 clamp(20px, 4.5vw, 60px); gap: 16px; }
.nav-logo { font-size: 15px; letter-spacing: .06em; }
.nav-links { gap: clamp(14px, 1.8vw, 26px); }
.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 12px;
    letter-spacing: .025em;
}
.nav-links a[aria-current] { color: var(--accent-text); }
.nav-actions { gap: 8px; }
.theme-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
.nav-cta {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 12px;
    letter-spacing: .06em;
}
main { padding-top: 100px; }

@media (min-width: 901px) and (max-width: 1100px) {
    .nav-links { gap: 13px; }
    .nav-links a { font-size: 10.5px; letter-spacing: .015em; }}

@media (max-width: 900px) {
    .nav-panel { max-height: calc(100dvh - 64px); }}

@media (min-width: 901px) {
    .nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; flex: 0 0 44px; padding: 0; cursor: pointer;
        color: var(--white); background: var(--ghost);
        border: 1px solid var(--border-bright); border-radius: 50%;
        -webkit-appearance: none; appearance: none;
        transition: color .18s, background .18s, border-color .18s;
    }
    .nav-toggle:hover,
    .nav-toggle[aria-expanded="true"] {
        color: var(--green);
        border-color: rgba(var(--green-rgb), .45);
        background: rgba(var(--green-rgb), .07);
    }
    .nav-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
    .nav-toggle-bars { position: relative; display: block; width: 17px; height: 11px; }
    .nav-toggle-bars span {
        position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
        background: currentColor;
        transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .16s linear;
    }
    .nav-toggle-bars span:nth-child(1) { top: 0; }
    .nav-toggle-bars span:nth-child(2) { top: 4.75px; }
    .nav-toggle-bars span:nth-child(3) { top: 9.5px; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(4.75px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-4.75px) rotate(-45deg); }
    .nav-panel {
        display: block; position: absolute; top: calc(100% + 10px);
        right: max(28px, calc((100vw - 1200px) / 2));
        width: min(360px, calc(100vw - 56px));
        padding: 8px 18px 18px;
        color: var(--white); background: rgb(var(--bg-rgb));
        border: 1px solid var(--border-bright); border-radius: 16px;
        box-shadow: 0 22px 60px rgba(0,0,0,.28);
    }
    .nav-panel[hidden] { display: none; }
    .nav-panel-links { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
    .nav-panel-links a {
        display: flex; align-items: center; min-height: 48px;
        border-bottom: 1px solid var(--border);
        font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .nav-panel-links a:hover { color: var(--accent-text); }
    .nav-panel-cta { display: flex; width: 100%; min-height: 48px; margin-top: 16px; align-items: center; justify-content: center; }}

/* 5 · Articles: the reading column was centred inside a wider shell, so it
   sat indented from the headline, figure, and kicker above it. Share one
   left edge instead. */
.article .body,
.article .source-box,
.article .article-nav { margin-left: 0; margin-right: 0; }
.article .article-nav a:last-child { text-align: right; }

/* 6 · Interaction affordances. */
.card, .series-item, .nav-card { transition: border-color .28s var(--ease-out), background .28s var(--ease-out), transform .28s var(--ease-out); }
.nav-card:hover { border-color: rgba(var(--green-rgb), .28); background: var(--surface-lift); }
.card-link, .series-meta, .source-links a { transition: color .18s ease; }
.card:hover, .series-item:hover { border-color: rgba(var(--green-rgb), .28); }
.footer-links a:hover, .source-links a:hover, .meta a:hover { color: var(--accent-text); }
.consent a, .policy-section a { text-underline-offset: .18em; }

@media (prefers-reduced-motion: reduce) {
    .card, .series-item, .nav-card { transition: none; }
    .card:hover, .series-item:hover, .nav-card:hover { transform: none; }}

/* v35b · remaining small green glyphs, held to AA in light mode */
:root[data-theme='light'] .nav-logo .arr,
:root[data-theme='light'] .footer-logo .arr,
:root[data-theme='light'] .nav-links a[aria-current],
:root[data-theme='light'] .quiet-cta span,
:root[data-theme='light'] .policy-section a,
:root[data-theme='light'] .footer-inner .arr {
    color: var(--accent-text-sm);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .nav-logo .arr,
    :root:not([data-theme]) .footer-logo .arr,
    :root:not([data-theme]) .nav-links a[aria-current],
    :root:not([data-theme]) .quiet-cta span,
    :root:not([data-theme]) .policy-section a,
    :root:not([data-theme]) .footer-inner .arr {
        color: var(--accent-text-sm);
    }}

/* v35c · mark the current page inside the section menu too */
.nav-panel-links a[aria-current] { color: var(--accent-text); }
.nav-panel-links a[aria-current]::before {
    content: ''; width: 5px; height: 5px; margin-right: 10px;
    border-radius: 50%; background: currentColor; flex: 0 0 5px;
}

/* v35d · keep the primary call to action in the header on small screens,
   as the homepage does, instead of hiding it behind the menu. */
@media (max-width: 560px) {
    .nav-wrap { padding-left: 12px; padding-right: 12px; }
    .nav-actions { gap: 6px; }
    .nav-wrap > .nav-actions > .nav-cta:not(.nav-panel-cta) {
        display: inline-flex !important;
        padding: 9px 11px !important;
        font-size: 9px !important;
        white-space: nowrap;
    }
    .theme-toggle { width: 36px; height: 36px; flex-basis: 36px; }
    .nav-toggle { width: 44px; height: 44px; }
}
@media (max-width: 350px) {
    .nav-wrap { padding-left: 8px; padding-right: 8px; }
    .nav-actions { gap: 4px; }
    .nav-wrap > .nav-actions > .nav-cta:not(.nav-panel-cta) { padding: 9px 8px !important; font-size: 8px !important; }
    .nav-logo { font-size: 12px; }}
/* v37 · inline links inside an article body were still the display green
   (1.8:1 on white). Route them to the label tint, which clears AA, and give
   them an underline so they read as links rather than coloured words. */
.body a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

:root[data-theme='light'] .body a { color: var(--accent-text-sm); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .body a { color: var(--accent-text-sm); }
}

/* v39 · light-mode accent, matched to the rest of the site: fills take the
   dark-mode green, read-me greens keep their legible tint. */
:root[data-theme='light'] {
    --green: #00EF82;
    --green-rgb: 0, 239, 130;
    --accent-glyph: #00C46A;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --green: #00EF82;
        --green-rgb: 0, 239, 130;
        --accent-glyph: #00C46A;
    }
}

:root[data-theme='light'] .nav-logo .arr,
:root[data-theme='light'] .footer-logo .arr,
:root[data-theme='light'] .footer-inner .arr { color: var(--accent-glyph); }

:root[data-theme='light'] .eyebrow::before,
:root[data-theme='light'] .kicker::before { background: var(--accent-glyph); }

:root[data-theme='light'] input:focus { border-color: var(--accent-text); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .nav-logo .arr,
    :root:not([data-theme]) .footer-logo .arr,
    :root:not([data-theme]) .footer-inner .arr { color: var(--accent-glyph); }

    :root:not([data-theme]) .eyebrow::before,
    :root:not([data-theme]) .kicker::before { background: var(--accent-glyph); }

    :root:not([data-theme]) input:focus { border-color: var(--accent-text); }
}

/* Headlines and copy balance themselves rather than relying on fixed breaks. */
h1, h2, h3, .series-title, .hero-copy, .quiet-cta p { text-wrap: balance; }
.section-intro, .card p, .consent { text-wrap: balance; }
.body p, .policy-section p { text-wrap: pretty; }

/* Short deks and hero lines balance too, so nothing is left hanging alone. */
.dek, .hero-copy, .standalone-intro h1 { text-wrap: balance; }

/* ═══════════════════════════════════════════════════════════════════════════
   v45 · Bring the subpages onto the main scroll's design language.

   Three things were out of step. (1) The type ran on its own scale -- a 112px
   page title against the homepage's 54px section headlines, at -0.065em
   versus -0.02em. (2) Cards and series rows were bordered, rounded, tinted
   boxes sitting inside bordered, rounded, tinted panels, so every list read
   as box-inside-box; the homepage separates items with hairlines instead.
   (3) The panels' background was a hard-coded dark value rather than the
   theme's surface token, so light mode never fully arrived.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · The CTA system, identical to the homepage ───────────────────────── */
:root { --cta-chev:#00EF82; }
.nav-cta, .btn-fill, .btn-submit {
  background:var(--white) !important;
  color:var(--black) !important;
  border:0 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  transition:transform .22s cubic-bezier(.16,1,.3,1) !important;
}
.nav-cta:hover, .btn-fill:hover, .btn-submit:hover {
  opacity:1 !important; transform:translateY(-2px) !important;
}
.btn-fill::after, .btn-submit::after {
  content:'\203A' !important; display:inline-block !important;
  margin-left:3px; color:var(--cta-chev);
  font-size:18px; font-weight:800; line-height:1;
  transform:translateY(-1px); transition:transform .24s cubic-bezier(.16,1,.3,1);
}
.btn-fill:hover::after, .btn-submit:hover::after { transform:translate(5px,-1px); }
.nav-cta::after { content:none !important; display:none !important; }
.theme-toggle, .nav-toggle { border-radius:8px !important; }

/* ── 2 · Type, on the homepage's scale ──────────────────────────────────── */
.eyebrow, .kicker {
  margin-bottom:12px !important;
  font-size:12px !important; font-weight:700 !important;
  letter-spacing:.12em !important; color:var(--accent-text-sm) !important;
}
.eyebrow::before, .kicker::before { width:32px !important; }

.wrap h1, .policy h1, .article h1, .standalone-intro h1 {
  max-width:24ch;
  font-size:clamp(33px,4.4vw,52px) !important;
  font-weight:800 !important;
  line-height:1.06 !important;
  letter-spacing:-.03em !important;
}
.section h2, .policy-section h2, .article h2, .body h2 {
  font-size:clamp(24px,2.9vw,36px) !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:-.022em !important;
}
.card h3 {
  font-size:clamp(19px,1.9vw,23px) !important;
  line-height:1.24 !important;
  letter-spacing:-.018em !important;
}
.hero-copy {
  max-width:62ch !important;
  margin-top:18px !important;
  font-size:clamp(17px,1.6vw,19px) !important;
  line-height:1.65 !important;
}
.hero-copy span { color:var(--accent-text) !important; }
.section-intro, .card p:not([class]), .policy-section p, .dek {
  font-size:17px !important; line-height:1.65 !important; color:var(--dim) !important;
}
.dek { max-width:62ch !important; font-size:19px !important; }

/* ── 3 · Panels use the theme's surface, and carry the homepage's top
   hairline so the subpages and the main scroll read as one build. ──────── */
.section {
  position:relative;
  padding:clamp(32px,4vw,44px) clamp(26px,4.2vw,48px) !important;
  border:1px solid var(--border) !important;
  border-radius:24px !important;
  background:var(--surface) !important;
  overflow:visible;
}
.section::before {
  content:'';
  position:absolute; left:0; right:0; top:0; height:1px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(90deg,
    rgba(var(--text-rgb),0) 0%, rgba(var(--text-rgb),.14) 50%, rgba(var(--text-rgb),0) 100%);
}
.section + .section { margin-top:14px; }
.section-head { align-items:flex-end; margin-bottom:22px !important; }

/* ── 4 · Cards become hairline rows, not boxes inside a box ─────────────── */
.grid { gap:0 !important; }
.card {
  min-height:0 !important;
  padding:24px 0 !important;
  border:0 !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 !important;
  background:transparent !important;
  transition:none !important;
}
.card:hover { transform:none !important; background:transparent !important; border-color:var(--border) !important; }
.card .card-type, .card-type {
  margin-bottom:10px !important;
  font-size:9.5px !important; font-weight:700 !important; letter-spacing:.12em !important;
  color:var(--accent-text-sm) !important;
}
.card h3 { margin-bottom:8px !important; transition:color .2s cubic-bezier(.16,1,.3,1); }
.card:hover h3 { color:var(--accent-text) !important; }

/* On a wide viewport the featured set keeps its columns; the hairline then
   runs across the top of each column rather than boxing it. */
@media (min-width:761px) {
  .grid { column-gap:clamp(26px,3vw,44px) !important; }
  .card { padding:24px 0 26px !important; }
}

/* ── 5 · Links carry the chevron, never the wordmark's arrow ────────────── */
.card-link, .series-meta {
  display:inline-flex !important; align-items:center; gap:7px;
  margin-top:auto; padding-top:16px;
  font-size:10.5px !important; font-weight:700;
  letter-spacing:.09em !important; text-transform:uppercase;
  color:var(--accent-text-sm) !important;
  white-space:nowrap;
}
.series-meta { padding-top:0; }
.card-link .chev, .series-meta .chev {
  font-size:15px; font-weight:800; line-height:1;
  transform:translateY(-1px);
  transition:transform .24s cubic-bezier(.16,1,.3,1);
}
.card:hover .card-link .chev,
.series-item:hover .series-meta .chev { transform:translate(4px,-1px); }

/* ── 6 · Series rows: hairlines, a mono index, colour-only hover ───────── */
.series-list { gap:0 !important; }
.series-item {
  padding:17px 0 !important;
  border:0 !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 !important;
  background:transparent !important;
  transition:none !important;
}
.series-item:hover { transform:none !important; background:transparent !important; }
.series-item:last-child { border-bottom:1px solid var(--border) !important; }
.series-num {
  font-family:var(--mono);
  font-size:11px !important; letter-spacing:.08em;
  color:var(--meta) !important;
}
.series-title {
  font-size:17px !important; font-weight:700 !important;
  line-height:1.35 !important; letter-spacing:-.01em !important;
  transition:color .2s cubic-bezier(.16,1,.3,1);
}
.series-item:hover .series-title { color:var(--accent-text) !important; }

/* The last card in a list needs the closing hairline too, so the stack
   reads as a table rather than trailing off. */
.grid .card:last-child { border-bottom:1px solid var(--border) !important; }
@media (min-width:761px) { .grid .card { border-bottom:1px solid var(--border) !important; } }

/* ── 7 · The closing CTA strip, matching the homepage's ─────────────────── */
.quiet-cta {
  gap:20px 28px !important;
  padding:clamp(26px,3vw,34px) clamp(24px,3.4vw,40px) !important;
  border:1px solid var(--border-g, rgba(var(--green-rgb),.18)) !important;
  border-radius:16px !important;
  background:transparent !important;
}
.quiet-cta p {
  margin:0; max-width:34ch;
  font-size:19px !important; font-weight:700 !important;
  line-height:1.35 !important; letter-spacing:-.015em !important;
  color:var(--white) !important;
}
.quiet-cta span { color:var(--accent-text) !important; }

@media (max-width:560px) {
  .section { padding:26px 20px !important; border-radius:18px !important; }
  .quiet-cta { flex-direction:column; align-items:flex-start; }
  .quiet-cta .btn-fill { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) {
  .nav-cta, .btn-fill, .btn-submit,
  .btn-fill::after, .btn-submit::after,
  .card-link .chev, .series-meta .chev { transition:none !important; transform:none !important; }
}

/* ── 8 · Mobile line filling, matching the homepage's rule ─────────────── */
@media (max-width:760px) {
  .section-intro, .card p:not([class]), .consent, .body p, .policy-section p, .hero-copy, .dek {
    text-wrap: pretty;
  }
}


/* ── 9 · The chevron is drawn, not set ───────────────────────────────────
   As a type glyph, U+203A sits ~0.6px below the cap centre of the uppercase
   label in Manrope, and lower still in any fallback face -- measured at 4x
   on the rendered button. Painting it as an SVG mask instead makes the box
   the glyph: flexbox centres the box, and the artwork is centred inside it
   by construction, so it lands identically in every browser and at every
   size, and it still takes its colour from a token. */
.btn-fill::after, .btn-submit::after {
  content:'' !important;
  display:block !important;
  align-self:center;
  width:7px; height:12px;
  margin-left:5px;
  background-color:var(--cta-chev);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.4 1.4 6.6 7 1.4 12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.4 1.4 6.6 7 1.4 12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  /* The flex line's centre sits ~0.4px above the uppercase label's cap
     centre, so the box is nudged to match the caps rather than the line. */
  transform:translateY(-0.4px);
  transition:transform .24s var(--ease-out);
}
.btn-fill:hover::after, .btn-submit:hover::after { transform:translate(5px,-0.4px); }

/* The Track Record cell takes the same artwork, so the two marks are the
   same shape at the same weight rather than two renderings of one glyph. */
.tr-link .tr-cell { font-size:0; }
.tr-link .tr-cell::before {
  content:''; display:block; width:8px; height:14px;
  background-color:var(--tr-chev);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.4 1.4 6.6 7 1.4 12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.4 1.4 6.6 7 1.4 12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:background-color .2s linear;
}
.tr-link:hover .tr-cell::before { background-color:var(--accent-ink); }

/* ── 10 · The theme toggle keeps its size on phones ──────────────────────
   At <=560px it was squeezed to 36px to make room, while the CTA and the
   hamburger stayed at 44px -- so the three controls stopped matching exactly
   where the touch target matters most, and 36px is under the 44px minimum.
   It stays 44px; the bar still fits at 320px. */
@media (max-width:560px) {
  .theme-toggle {
    width:44px !important; height:44px !important;
    min-width:44px !important; flex-basis:44px !important;
  }
}