/* ==========================================================================
       WCAG 2.1 AA Compliant Design Tokens & Color Palette
       Ratios recomputed via the standard WCAG relative-luminance formula and
       cross-checked against axe-core; last verified 2026-08-15.
       - Primary text (#212529) on White: 15.4:1 (AAA)
       - Brand Deep Navy (#020C28) on White: 19.3:1 (AAA)
       - Brand Dark Green (#003D29) on White: 12.4:1 (AAA)
       - Accessible Pink (#B8266E) on White: 5.9:1 (AA Normal Text)
       - Dark Navy text (#020C28) on Bright Cyan (#4ADEDE): 11.8:1 (AAA)
       - Neutral Gray (#5A636B) on White / #F8F9FA / #E9ECEF (its 3 real light-bg
         uses: .card p, .tab-trigger, .threshold-soon badge): 6.1:1 / 5.8:1 / 5.2:1
         (AA) — worst case is #E9ECEF at 5.2:1. Darkened from the original
         #6C757D, which read 3.95–4.45:1 against these same backgrounds (AA fail).
       - Neutral Gray on Dark (#747D85) on Footer Near-Black (#010614): 4.8:1 (AA)
         — footer-only variant. #5A636B above is darkened specifically for light
         backgrounds, which makes it *worse* against a near-black background
         (3.3:1) than the original token was (4.3:1, itself already a fail). One
         gray can't satisfy both directions, so .footer-bottom uses this second,
         lighter value instead of --neutral-gray. See accessibility-audit-report.md.
       - Glassmorphic .header / .back-to-top background, rgba(2,12,40,0.82)
         (brand navy at 82% opacity + backdrop-filter blur): opacity math does
         NOT preserve contrast by itself, so this was recomputed by blending
         the 82%-navy over the lightest realistic page background it could
         scroll over (#FFFFFF) to get the worst-case effective color the text
         actually renders against — rgb(48,56,79) — then re-run through the
         same relative-luminance formula as every other ratio here:
           - nav-link / book-nav-link text (#E9ECEF): 9.9:1 (AAA)
           - logo text / white icons (#FFFFFF): 11.7:1 (AAA)
           - brand-cyan hover state (#4ADEDE): 7.1:1 (AAA) — the worst case
             of the three, still well clear of the 4.5:1 AA floor
         Against a solid-navy hero scrolled behind it instead (the other
         realistic case), ratios only improve (16–19:1). Both elements fall
         back to the solid, non-blurred --brand-navy background — same math
         as the plain "Brand Deep Navy on White" entry above — for browsers
         without backdrop-filter support, prefers-reduced-transparency, and
         the site's own high-contrast theme.
       ========================================================================== */
    :root {
        --brand-primary: #36069A;
        --brand-navy: #020C28;
        --brand-pink: #DE6399;
        --brand-pink-accessible: #B8266E;
        --brand-cyan: #4ADEDE;
        --brand-cyan-dark: #0F7B8A;
        --brand-dark-green: #003D29;

        --state-susceptible: #ADB5BD;
        --state-vaccinated: #4ADEDE;
        --state-infected: #D90429;
        --state-recovered: #0F8244;

        --neutral-white: #FFFFFF;
        --neutral-light: #F8F9FA;
        --neutral-mid-light: #E9ECEF;
        --neutral-gray: #5A636B;
        --neutral-gray-on-dark: #747D85;
        --neutral-dark: #212529;
        
        --bg-page: var(--neutral-white);
        --text-page: var(--neutral-dark);
        --focus-ring: #B8266E;
        --border-radius-sm: 8px;
        --border-radius-md: 16px;
        --border-radius-lg: 24px;
        --border-radius-pill: 50px;
    }

    /* High Contrast Theme Overrides (WCAG AAA Target) */
    [data-theme="high-contrast"] {
        --bg-page: #000000;
        --text-page: #FFFFFF;
        --brand-navy: #000000;
        --brand-dark-green: #000000;
        --neutral-light: #000000;
        --neutral-mid-light: #FFFFFF;
        --neutral-dark: #FFFFFF;
        --brand-pink-accessible: #FFFF00;
        --brand-cyan: #00FFFF;
        --brand-cyan-dark: #00FFFF;
        --focus-ring: #00FFFF;
        --state-susceptible: #FFFFFF;
        --state-vaccinated: #00FFFF;
        --state-infected: #FF5555;
        --state-recovered: #55FF55;
    }

    /* ==========================================================================
       Reset & Base Setup
       ========================================================================== */
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        font-size: 100%;
        scroll-behavior: smooth;
    }

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

    body {
        font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: var(--text-page);
        background-color: var(--bg-page);
        line-height: 1.6;
        overflow-x: hidden;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* ==========================================================================
       Fluid Responsive Typography (clamp)
       ========================================================================== */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Bricolage Grotesque', sans-serif;
        color: var(--brand-navy);
        line-height: 1.25;
        font-weight: 700;
    }

    [data-theme="high-contrast"] h1,
    [data-theme="high-contrast"] h2,
    [data-theme="high-contrast"] h3,
    [data-theme="high-contrast"] h4,
    [data-theme="high-contrast"] h5,
    [data-theme="high-contrast"] h6 {
        color: #FFFFFF;
    }

    h1 {
        font-size: clamp(2.25rem, 5vw + 1rem, 4rem);
        letter-spacing: -0.02em;
    }

    h2 {
        font-size: clamp(1.75rem, 3vw + 0.75rem, 2.75rem);
        margin-bottom: 1.5rem;
        position: relative;
    }

    h3 {
        font-size: clamp(1.3rem, 2vw + 0.5rem, 1.85rem);
    }

    p {
        font-size: clamp(1rem, 0.5vw + 0.9rem, 1.15rem);
        line-height: 1.7;
        margin-bottom: 1.25rem;
    }

    /* Skip Navigation */
    .skip-link {
        position: absolute;
        top: -60px;
        left: 1rem;
        background: var(--brand-navy);
        color: var(--neutral-white);
        padding: 0.75rem 1.5rem;
        z-index: 9999;
        font-weight: 700;
        border-radius: var(--border-radius-sm);
        border: 2px solid var(--brand-cyan);
        text-decoration: none;
        transition: top 0.2s ease;
    }

    .skip-link:focus {
        top: 1rem;
        outline: 3px solid var(--focus-ring);
    }

    /* Universal Focus Styles */
    :focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
    }

    .container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .section-padding {
        padding: clamp(3.5rem, 6vw, 6.5rem) 0;
    }

    /* ==========================================================================
       Button Styles & Accessible Color Pairings
       ========================================================================== */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.85rem 1.75rem;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1rem;
        border-radius: var(--border-radius-pill);
        cursor: pointer;
        text-decoration: none;
        border: 2px solid transparent;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .btn:hover {
        transform: translateY(-2px);
    }

    .btn-primary {
        background-color: var(--brand-pink-accessible);
        color: var(--neutral-white);
        box-shadow: 0 4px 14px rgba(184, 38, 110, 0.25);
    }

    .btn-primary:hover {
        background-color: #9C1D5B;
    }

    .btn-secondary {
        background-color: transparent;
        color: var(--brand-navy);
        border-color: var(--brand-navy);
    }

    .btn-secondary:hover {
        background-color: var(--brand-navy);
        color: var(--neutral-white);
    }

    .btn-accent {
        background-color: var(--brand-cyan);
        color: var(--brand-navy);
        box-shadow: 0 4px 14px rgba(74, 222, 222, 0.3);
    }

    .btn-accent:hover {
        background-color: #37C2C2;
    }

    .btn-outline-white {
        background-color: transparent;
        color: var(--neutral-white);
        border: 2px solid var(--neutral-white);
    }

    .btn-outline-white:hover {
        background-color: var(--neutral-white);
        color: var(--brand-navy);
    }

    [data-theme="high-contrast"] .btn {
        background-color: #000000 !important;
        color: #FFFFFF !important;
        border: 2px solid #FFFFFF !important;
    }

    /* ==========================================================================
       Header & Navigation
       ========================================================================== */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: var(--brand-navy);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 0.75rem 0;
        transition: padding 0.3s ease;
    }

    .header.scrolled {
        padding: 0.5rem 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    }

    /* Glassmorphic header: high-opacity navy (not a typical low-opacity
       glass look) so the overlay's own opacity guarantees text contrast
       regardless of what's scrolling behind it — see the contrast table in
       the design-tokens comment at the top of this file. The plain
       .header background above is the unconditional fallback for browsers
       without backdrop-filter support; this only layers on top of it. */
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .header {
            background: rgba(2, 12, 40, 0.82);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        }
    }

    /* Users who've asked their OS to reduce transparency effects fall back
       to the same solid background as the no-backdrop-filter case. This
       must come after the @supports block above to win when both could
       otherwise apply. */
    @media (prefers-reduced-transparency: reduce) {
        .header {
            background: var(--brand-navy);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
    }

    /* The site's own high-contrast theme targets unambiguous, maximum
       (AAA) contrast throughout — no translucency there either.
       var(--brand-navy) already resolves to #000000 under this theme. */
    [data-theme="high-contrast"] .header {
        background: var(--brand-navy);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        color: var(--neutral-white);
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        background: var(--brand-pink-accessible);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--neutral-white);
        font-weight: 800;
        font-size: 1.25rem;
        font-family: 'Montserrat', sans-serif;
    }

    .logo-text {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 1.4rem;
        letter-spacing: -0.01em;
    }

    .nav-menu {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .nav-list {
        display: flex;
        list-style: none;
        gap: 1.25rem;
    }

    .nav-link {
        color: #E9ECEF;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        padding: 0.5rem 0;
        position: relative;
    }

    .nav-link:hover, .nav-link:focus {
        color: var(--brand-cyan);
    }

    .accessibility-controls {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        padding-left: 1rem;
    }

    .a11y-btn {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.3);
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--neutral-white);
        transition: background-color 0.2s ease;
    }

    .a11y-btn:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    .a11y-btn[aria-pressed="true"] {
        background: var(--brand-cyan);
        color: var(--brand-navy);
        border-color: var(--brand-cyan);
    }

    .mobile-toggle {
        display: none;
        background: transparent;
        border: none;
        color: var(--neutral-white);
        font-size: 1.5rem;
        cursor: pointer;
        padding: 0.5rem;
    }

    /* ==========================================================================
       Back to Top (site-wide floating button — injected by main.js so
       every page gets it without per-page markup; see main.js)
       Glassmorphic like .header (high-opacity navy + blur, not a typical
       low-opacity glass look) rather than .a11y-btn's translucent fill:
       .a11y-btn only needs to read against the header's own dark
       background, but this floats over whatever content is scrolled
       beneath it, including plain white sections, so it needs its own
       guaranteed contrast — same navy/opacity math as .header, and the
       same contrast table at the top of this file applies here too. Same
       size/border/shape language as .a11y-btn otherwise, so it still
       reads as the site's one icon-button pattern. There's currently no
       other independently fixed-position element to collide with at this
       corner — .header is the only other position:fixed element, and it's
       pinned to the top.
       ========================================================================== */
    .back-to-top {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--brand-navy);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: var(--neutral-white);
        cursor: pointer;
        font-size: 1.1rem;
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        /* Fading via opacity + visibility (not display) means the button is
           un-clickable and removed from the tab order while hidden — no
           extra JS bookkeeping needed. Reduced-motion users already get
           near-instant transitions from the global rule above. */
        transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
    }

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top:hover {
        background: #0B193D;
    }

    /* Same glass treatment and same three fallbacks as .header: solid
       background above is unconditional; this layers translucency + blur
       on top where supported, then two rules below undo it again for
       prefers-reduced-transparency and the site's high-contrast theme. */
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .back-to-top {
            background: rgba(2, 12, 40, 0.82);
            -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.35);
        }

        .back-to-top:hover {
            background: rgba(11, 25, 61, 0.88);
        }
    }

    @media (prefers-reduced-transparency: reduce) {
        .back-to-top {
            background: var(--brand-navy);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }

        .back-to-top:hover {
            background: #0B193D;
        }
    }

    [data-theme="high-contrast"] .back-to-top {
        background: var(--brand-navy);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    @media (max-width: 600px) {
        .back-to-top {
            bottom: 1.25rem;
            right: 1.25rem;
        }
    }

    /* ==========================================================================
       Books Dropdown (global nav — WAI-ARIA menu button pattern)
       ========================================================================== */
    .nav-item-dropdown {
        position: relative;
    }

    .books-trigger {
        background: none;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        /* <button>'s padding counts toward layout, but the plain <a>
           nav-links are inline elements whose padding paints outside the
           line box without occupying flow space — so the anchors render
           visibly higher than a same-padded button in the same flex row.
           Nudge the button up by the same (em-relative, so it still holds
           after the text-size toggle scales everything) amount to match. */
        margin-top: -0.3em;
    }

    .books-trigger-icon {
        font-size: 0.7em;
        transition: transform 0.2s ease;
    }

    .books-trigger[aria-expanded="true"] .books-trigger-icon {
        transform: rotate(180deg);
    }

    .books-dropdown {
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 50%;
        transform: translateX(-50%);
        min-width: 260px;
        list-style: none;
        background: var(--neutral-white);
        border-radius: var(--border-radius-md);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
        padding: 0.5rem;
        z-index: 10;
    }

    .books-dropdown-link {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        padding: 0.65rem 0.75rem;
        border-radius: var(--border-radius-sm);
        color: var(--neutral-dark);
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
    }

    .books-dropdown-link i {
        width: 1.1em;
        text-align: center;
        color: var(--brand-pink-accessible);
    }

    .books-dropdown-link:hover,
    .books-dropdown-link:focus {
        background: var(--neutral-light);
    }

    .books-dropdown-link .threshold-badge {
        margin-left: auto;
    }

    /* .books-dropdown's white background and .books-dropdown-link's text both
       ride var(--neutral-white)/var(--neutral-dark) — the latter flips to
       #FFFFFF under high-contrast, which would put white text on the
       still-white dropdown panel. Pin the panel to black so the (now-white)
       text and the yellow icon color stay readable against it. */
    [data-theme="high-contrast"] .books-dropdown {
        background: #000000;
        border: 2px solid #FFFFFF;
    }

    [data-theme="high-contrast"] .books-dropdown-link:hover,
    [data-theme="high-contrast"] .books-dropdown-link:focus {
        background: var(--brand-cyan);
        color: #000000;
    }

    [data-theme="high-contrast"] .books-dropdown-link:hover i,
    [data-theme="high-contrast"] .books-dropdown-link:focus i {
        color: #000000;
    }

    /* ==========================================================================
       Book-Level Nav (secondary nav, vaccines-book pages only)
       Sits between the fixed global header and <main>. Since it's the first
       in-flow element on these pages, it (not .hero-section) is responsible
       for clearing the fixed header's height — see the adjacent-sibling rule
       under Hero Section below.
       ========================================================================== */
    .book-nav {
        background: #0B193D;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: clamp(5rem, 10vw, 6.5rem) 0 0.75rem;
    }

    .book-nav-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        gap: 0.5rem 1.75rem;
    }

    .book-nav-link {
        display: inline-block;
        color: #E9ECEF;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.85rem;
        text-decoration: none;
        padding: 0.4rem 0;
    }

    .book-nav-link:hover,
    .book-nav-link:focus {
        color: var(--brand-cyan);
    }

    /* ==========================================================================
       Back Breadcrumb (leaves-the-page "back" link — every book sub-page)
       Sits between the fixed header (or .book-nav, on vaccines-book pages)
       and <main>. Like .book-nav, it's normal in-flow (not fixed), so by
       default it carries the same header-clearing top padding .book-nav
       uses; when .book-nav already did that job, its own padding shrinks
       to just a thin gap.
       ========================================================================== */
    .back-breadcrumb {
        background: #0B193D;
        padding: clamp(5rem, 10vw, 6.5rem) 0 1rem;
    }

    .book-nav + .back-breadcrumb {
        padding-top: 0.5rem;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        color: #E9ECEF;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
    }

    .back-link:hover {
        text-decoration: underline;
    }

    /* ==========================================================================
       Hero Section
       ========================================================================== */
    .hero-section {
        background: linear-gradient(145deg, var(--brand-navy) 0%, #0B193D 100%);
        color: var(--neutral-white);
        padding: clamp(8rem, 12vw, 11rem) 0 clamp(4rem, 8vw, 6rem);
        position: relative;
    }

    /* .back-breadcrumb (not .hero-section) clears the fixed header now, so
       the hero's own top padding drops to a normal in-page gap. .hero-section
       is nested inside <main>, which is what actually follows
       .back-breadcrumb in the DOM — hence the descendant combinator instead
       of a direct adjacent-sibling one. */
    .back-breadcrumb + main .hero-section {
        padding-top: clamp(2rem, 4vw, 3rem);
    }

    .hero-content {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
        align-items: center;
    }

    .hero-title {
        color: var(--neutral-white);
        margin-bottom: 1.5rem;
    }

    .hero-title span {
        color: var(--brand-cyan);
    }

    .hero-description {
        color: #DEE2E6;
        font-size: clamp(1.1rem, 1vw + 0.5rem, 1.25rem);
        margin-bottom: 2rem;
        max-width: 540px;
    }

    .hero-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .hero-card {
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: var(--border-radius-lg);
        padding: 2.5rem 2rem;
        text-align: center;
        backdrop-filter: blur(8px);
    }

    .hero-card-icon {
        font-size: 3rem;
        color: var(--brand-cyan);
        margin-bottom: 1.25rem;
    }

    .hero-card h3 {
        color: var(--neutral-white);
        margin-bottom: 0.75rem;
    }

    .hero-card p {
        color: #CED4DA;
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    /* ==========================================================================
       Featured Content & Educational Cards
       ========================================================================== */
    .featured-section {
        background-color: var(--neutral-light);
    }

    .section-header {
        text-align: center;
        max-width: 700px;
        margin: 0 auto clamp(2.5rem, 4vw, 4rem);
    }

    .cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 460px));
        justify-content: center;
        gap: 2rem;
    }

    .card {
        background: var(--neutral-white);
        border-radius: var(--border-radius-md);
        border: 1px solid var(--neutral-mid-light);
        padding: 2rem;
        display: flex;
        flex-direction: column;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    }

    [data-theme="high-contrast"] .card {
        background: #000000;
        border: 2px solid #FFFFFF;
    }

    .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background: rgba(184, 38, 110, 0.1);
        color: var(--brand-pink-accessible);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .card h3 {
        margin-bottom: 0.75rem;
    }

    .card p {
        color: var(--neutral-gray);
        flex: 1;
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    [data-theme="high-contrast"] .card p {
        color: #FFFFFF;
    }

    /* ==========================================================================
       Interactive Simulation Panel & Controls
       ========================================================================== */
    .interactive-section {
        background-color: var(--neutral-white);
    }

    [data-theme="high-contrast"] .interactive-section {
        background-color: #000000;
    }

    .simulator-box {
        border: 1px solid var(--neutral-mid-light);
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
        background: var(--neutral-white);
    }

    [data-theme="high-contrast"] .simulator-box {
        background: #000000;
        border: 2px solid #FFFFFF;
    }

    .tab-list {
        display: flex;
        background: var(--neutral-light);
        border-bottom: 1px solid var(--neutral-mid-light);
        padding: 0.5rem 0.5rem 0;
        gap: 0.5rem;
    }

    [data-theme="high-contrast"] .tab-list {
        background: #000000;
        border-bottom: 2px solid #FFFFFF;
    }

    /* --neutral-gray was darkened for light backgrounds (see token comment
       above), which would drop the unselected tab to 3.4:1 against this
       high-contrast tab-list's black background — worse than the 4.5:1 it
       already fell short of before. Reusing --neutral-gray-on-dark here
       instead of a third color. */
    [data-theme="high-contrast"] .tab-trigger {
        color: var(--neutral-gray-on-dark);
    }

    .tab-trigger {
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 0.85rem 1.5rem;
        border: none;
        background: transparent;
        color: var(--neutral-gray);
        cursor: pointer;
        border-top-left-radius: var(--border-radius-sm);
        border-top-right-radius: var(--border-radius-sm);
        border-bottom: 3px solid transparent;
        transition: all 0.2s ease;
    }

    .tab-trigger[aria-selected="true"] {
        color: var(--brand-navy);
        background: var(--neutral-white);
        border-bottom: 3px solid var(--brand-pink-accessible);
    }

    [data-theme="high-contrast"] .tab-trigger[aria-selected="true"] {
        color: #00FFFF;
        background: #000000;
        border-bottom: 3px solid #00FFFF;
    }

    .tab-panel {
        padding: 1.5rem;
    }

    .tab-panel[hidden] {
        display: none;
    }

    /* Simulation Internal Grid */
    .sim-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 1.5rem;
    }

    @media (max-width: 900px) {
        .sim-layout {
            grid-template-columns: 1fr;
        }
    }

    .canvas-container {
        position: relative;
        background: #0A0F1D;
        border-radius: var(--border-radius-md);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border: 1px solid #1E293B;
    }

    canvas#simCanvas {
        width: 100%;
        height: 380px;
        display: block;
    }

    .sim-status-banner {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        padding: 0.6rem 1rem;
        background: rgba(2, 12, 40, 0.85);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #FFFFFF;
        font-size: 0.85rem;
        backdrop-filter: blur(8px);
    }

    .status-indicator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 6px;
    }

    .status-active { background-color: var(--state-infected); }
    .status-contained { background-color: var(--state-recovered); }

    .metric-timeline {
        padding: 1rem;
        background: #111827;
        border-top: 1px solid #1E293B;
    }

    .timeline-bar-wrapper {
        height: 14px;
        border-radius: 7px;
        overflow: hidden;
        display: flex;
        background: #374151;
    }

    .bar-segment {
        height: 100%;
        transition: width 0.1s linear;
    }

    .bar-vacc { background-color: var(--brand-cyan); }
    .bar-rec { background-color: var(--state-recovered); }
    .bar-inf { background-color: var(--state-infected); }
    .bar-susc { background-color: var(--state-susceptible); }

    .legend-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        background: var(--neutral-light);
        border-radius: var(--border-radius-sm);
        font-size: 0.85rem;
    }

    [data-theme="high-contrast"] .legend-grid {
        background: #111827;
        color: #FFFFFF;
    }

    .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .legend-swatch {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .control-panel {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .control-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .label-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--brand-navy);
    }

    [data-theme="high-contrast"] .label-row {
        color: #FFFFFF;
    }

    .range-slider {
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: var(--neutral-mid-light);
        outline: none;
    }

    .range-slider::-webkit-slider-thumb {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--brand-navy);
        cursor: pointer;
        border: 2px solid #FFFFFF;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    .action-btn-row {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .stats-card {
        background: var(--neutral-light);
        border-radius: var(--border-radius-sm);
        padding: 1rem;
        border: 1px solid var(--neutral-mid-light);
        font-size: 0.85rem;
    }

    [data-theme="high-contrast"] .stats-card {
        background: #111827;
        border-color: #374151;
        color: #FFFFFF;
    }

    .stat-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.4rem;
    }

    .stat-row:last-child {
        margin-bottom: 0;
        padding-top: 0.4rem;
        border-top: 1px solid var(--neutral-mid-light);
        font-weight: 700;
    }

    .threshold-badge {
        display: inline-block;
        padding: 0.2rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .threshold-safe { background: #D1E7DD; color: #0F5132; }
    .threshold-danger { background: #F8D7DA; color: #842029; }
    .threshold-soon { background: var(--neutral-mid-light); color: var(--neutral-gray); }

    /* Series Hub Card Badge */
    .card-badge {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
    }

    .card.card-disabled {
        position: relative;
        background: var(--neutral-light);
    }

    /* Without this, .card.card-disabled's background would win the cascade
       tie against [data-theme="high-contrast"] .card (same specificity, but
       this rule comes later in the file) and wash out the AAA black/white
       high-contrast pairing on disabled cards. */
    [data-theme="high-contrast"] .card.card-disabled {
        background: #000000;
    }

    /* Secondary Tab Content */
    .tab-panel-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 2rem;
        align-items: center;
    }

    .panel-preview {
        background: var(--brand-navy);
        border-radius: var(--border-radius-md);
        padding: 3rem 2rem;
        text-align: center;
        color: var(--neutral-white);
    }

    .panel-preview i {
        font-size: 3rem;
        color: var(--brand-cyan);
        margin-bottom: 1rem;
    }

    /* ==========================================================================
       Resources Grid
       ========================================================================== */
    .resources-section {
        background-color: var(--neutral-light);
    }

    .resources-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }

    .resource-card {
        background: var(--neutral-white);
        border: 1px solid var(--neutral-mid-light);
        border-radius: var(--border-radius-md);
        padding: 2rem 1.5rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.2s ease;
    }

    .resource-card:hover {
        transform: translateY(-4px);
    }

    [data-theme="high-contrast"] .resource-card {
        background: #000000;
        border: 2px solid #FFFFFF;
    }

    .resource-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(184, 38, 110, 0.08);
        color: var(--brand-pink-accessible);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.8rem;
        margin-bottom: 1.25rem;
    }

    .resource-title {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .resource-text {
        font-size: 0.95rem;
        color: var(--neutral-gray);
        margin-bottom: 1.5rem;
        flex: 1;
    }

    [data-theme="high-contrast"] .resource-text {
        color: #FFFFFF;
    }

    /* ==========================================================================
       Mobile Apps Section
       ========================================================================== */
    .apps-section {
        background: linear-gradient(135deg, var(--brand-pink-accessible) 0%, #8A1550 100%);
        color: var(--neutral-white);
    }

    .apps-section h2, .apps-section h3 {
        color: var(--neutral-white);
    }

    .apps-content {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3rem;
        align-items: center;
    }

    .app-features {
        list-style: none;
        margin: 1.5rem 0 2rem;
    }

    .app-feature-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        font-size: 1.05rem;
    }

    .feature-icon-badge {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .apps-mockup {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    .mockup-phone {
        width: 140px;
        height: 260px;
        border: 2px solid rgba(255, 255, 255, 0.4);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        color: #FFFFFF;
    }

    .mockup-phone:nth-child(2) {
        transform: translateY(15px);
    }

    /* ==========================================================================
       FAQ Accordion
       ========================================================================== */
    .faq-list {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .faq-item {
        background: var(--neutral-white);
        border: 1px solid var(--neutral-mid-light);
        border-radius: var(--border-radius-md);
        overflow: hidden;
    }

    [data-theme="high-contrast"] .faq-item {
        background: #000000;
        border: 2px solid #FFFFFF;
    }

    .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
        background: transparent;
        border: none;
        font: inherit;
        font-weight: 700;
        color: var(--brand-navy);
        text-align: left;
        cursor: pointer;
    }

    [data-theme="high-contrast"] .faq-question {
        color: #FFFFFF;
    }

    .faq-icon {
        flex-shrink: 0;
        color: var(--brand-pink-accessible);
        transition: transform 0.2s ease;
    }

    .faq-question[aria-expanded="true"] .faq-icon {
        transform: rotate(180deg);
    }

    [data-theme="high-contrast"] .faq-icon {
        color: #FFFF00;
    }

    .faq-answer {
        padding: 0 1.5rem 1.5rem;
        color: var(--neutral-gray);
    }

    .faq-answer p {
        margin-bottom: 0;
    }

    [data-theme="high-contrast"] .faq-answer {
        color: #FFFFFF;
    }

    /* ==========================================================================
       Glossary
       ========================================================================== */
    .glossary-controls {
        max-width: 800px;
        margin: 0 auto 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .glossary-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .filter-pill {
        border: none;
        font-family: inherit;
        cursor: pointer;
    }

    .filter-pill[aria-pressed="true"] {
        background: var(--brand-cyan);
        color: var(--brand-navy);
    }

    [data-theme="high-contrast"] .filter-pill[aria-pressed="true"] {
        background: #00FFFF;
        color: #000000;
    }

    .glossary-no-results {
        max-width: 800px;
        margin: 0 auto;
        text-align: center;
        color: var(--neutral-gray);
        padding: 2rem 0;
    }

    [data-theme="high-contrast"] .glossary-no-results {
        color: #FFFFFF;
    }

    .glossary-list {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .glossary-entry {
        background: var(--neutral-white);
        border: 1px solid var(--neutral-mid-light);
        border-radius: var(--border-radius-md);
        padding: 1.5rem 2rem;
    }

    [data-theme="high-contrast"] .glossary-entry {
        background: #000000;
        border: 2px solid #FFFFFF;
    }

    .glossary-term {
        margin-bottom: 0.5rem;
    }

    .glossary-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    /* ==========================================================================
       Disclaimer Banner
       ========================================================================== */
    .disclaimer-banner {
        max-width: 760px;
        margin: 0 auto 2rem;
        background: var(--neutral-mid-light);
        border-left: 4px solid var(--neutral-gray);
        border-radius: var(--border-radius-sm);
        padding: 1.25rem 1.5rem;
    }

    .disclaimer-banner p {
        margin-bottom: 0;
        color: var(--neutral-dark);
    }

    .disclaimer-banner a {
        color: var(--brand-pink-accessible);
        text-decoration: underline;
    }

    .disclaimer-banner a:hover,
    .disclaimer-banner a:focus {
        color: #9C1D5B;
    }

    /* --neutral-mid-light and --neutral-dark both resolve to white under
       high-contrast (see token overrides above), which would make this
       banner's text invisible on its own background without this override. */
    [data-theme="high-contrast"] .disclaimer-banner {
        background: #000000;
        border-left: 4px solid #FFFFFF;
    }

    [data-theme="high-contrast"] .disclaimer-banner p {
        color: #FFFFFF;
    }

    /* ==========================================================================
       Fact Sheet Cards
       ========================================================================== */
    .fact-sheet-card {
        position: relative;
    }

    .fact-sheet-thumbnail {
        display: block;
        width: calc(100% + 4rem);
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: top;
        margin: -2rem -2rem 1.5rem -2rem;
        border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
        border-bottom: 1px solid var(--neutral-mid-light);
    }

    /* ==========================================================================
       Evidence-Based Learning: Z-Pattern Feature Rows
       Deliberate, one-off departure from the .cards-grid/.card pattern used
       everywhere else on the site — scoped to .feature-row so it can't leak
       into other sections. Don't reuse this pattern elsewhere without a
       fresh decision to do so.
       ========================================================================== */
    .feature-rows {
        display: flex;
        flex-direction: column;
        gap: 8rem;
        margin: 0 15%;
    }

    .feature-row {
        display: flex;
        align-items: center;
        gap: 4rem;
    }

    .feature-row-reverse {
        flex-direction: row-reverse;
    }

    .feature-icon {
        flex-shrink: 0;
        width: 140px;
        height: 140px;
        border-radius: var(--border-radius-lg);
        background: rgba(184, 38, 110, 0.1);
        color: var(--brand-pink-accessible);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
    }

    .feature-content {
        flex: 1;
        min-width: 0;
    }

    .feature-content h3 {
        margin-bottom: 0.75rem;
    }

    .feature-content p {
        color: var(--neutral-gray);
        margin-bottom: 2rem;
    }

    [data-theme="high-contrast"] .feature-content p {
        color: #FFFFFF;
    }

    @media (max-width: 900px) {
        .feature-row,
        .feature-row-reverse {
            flex-direction: column;
            text-align: center;
            gap: 1.5rem;
        }

        .feature-icon {
            width: 100px;
            height: 100px;
            font-size: 2.5rem;
        }
    }

    /* ==========================================================================
       Newsletter & Footer
       ========================================================================== */
    .newsletter-section {
        background: var(--brand-navy);
        color: var(--neutral-white);
        text-align: center;
    }

    .newsletter-section h2 {
        color: var(--neutral-white);
    }

    .newsletter-section p {
        color: #CED4DA;
        max-width: 600px;
        margin: 0 auto 2rem;
    }

    .newsletter-form {
        display: flex;
        max-width: 500px;
        margin: 0 auto;
        gap: 0.75rem;
    }

    .form-input {
        flex: 1;
        padding: 0.85rem 1.25rem;
        border-radius: var(--border-radius-pill);
        border: 2px solid transparent;
        font-family: 'Lato', sans-serif;
        font-size: 1rem;
        color: var(--neutral-dark);
        background: var(--neutral-white);
    }

    .footer {
        background: #010614;
        color: #CED4DA;
        padding: 4rem 0 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.95rem;
    }

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2.5rem;
        margin-bottom: 3rem;
    }

    .footer h4 {
        color: var(--neutral-white);
        font-size: 1.15rem;
        margin-bottom: 1.25rem;
    }

    .footer-links {
        list-style: none;
    }

    .footer-links li {
        margin-bottom: 0.6rem;
    }

    .footer-links a {
        color: #ADB5BD;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .footer-links a:hover, .footer-links a:focus {
        color: var(--brand-cyan);
        text-decoration: underline;
    }

    .footer-bottom {
        text-align: center;
        padding-top: 2rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.85rem;
        color: var(--neutral-gray-on-dark);
    }

    /* Accessibility Utilities */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* ==========================================================================
       Responsive Adjustments
       ========================================================================== */
    @media (max-width: 900px) {
        .hero-content, .apps-content, .tab-panel-grid {
            grid-template-columns: 1fr;
        }

        .mobile-toggle {
            display: block;
        }

        .nav-menu {
            position: fixed;
            top: 60px;
            left: -100%;
            width: 100%;
            height: calc(100vh - 60px);
            background: var(--brand-navy);
            flex-direction: column;
            justify-content: flex-start;
            padding: 2rem;
            transition: left 0.3s ease;
        }

        .nav-menu.active {
            left: 0;
        }

        .nav-list {
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .accessibility-controls {
            border-left: none;
            padding-left: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 1.5rem;
            width: 100%;
            justify-content: center;
        }

        /* Books dropdown: within the off-canvas mobile panel there's no room
           (or need) for a floating absolutely-positioned popover, so it drops
           into normal flow as a full-width panel directly under the trigger. */
        .nav-item-dropdown {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .books-dropdown {
            position: static;
            transform: none;
            width: 100%;
            max-width: 320px;
            margin-top: 0.5rem;
            box-shadow: none;
        }

        .book-nav-list {
            gap: 0.5rem 1.25rem;
        }
    }

    @media (max-width: 600px) {
        .newsletter-form {
            flex-direction: column;
        }
        .btn {
            width: 100%;
        }
    }