/* ==========================================================================
   Norwegian 4x4 — styles26.css
   The single site stylesheet. Spec: docs/design-system.md
   Plan / history: tasks/design-system-unification.md

   Supports every selector from the legacy styles.css + styles25.css
   (kept for reference in css/_legacy/; guarded by scripts/legacy-selectors.js).

   Contents
     1. Tokens
     2. Surfaces (dark default / light)
     3. Base elements
     4. Vertical rhythm
     5. Layout
     6. Site chrome: header, hero, nav, footer
     7. Buttons
     8. Cards & landing components
     9. Content pages
    10. Page-specific components (FAQ, facts, calculator, popup, indie, video)
    11. Utilities
    12. Legacy components (not used by current pages; kept for old/generated pages)
    13. Responsive overrides
    14. Accessibility & motion
   ========================================================================== */

/* ==========================================================================
   1. Tokens — the only place colour literals may appear
   ========================================================================== */

:root {
    /* Brand */
    --n4-navy-950: #00163F;
    --n4-navy-900: #00205B;          /* Norwegian Blue */
    --n4-navy-800: #0B2C6B;
    --n4-navy-700: #1A3A7A;
    --n4-red-600: #9E0A28;
    --n4-red-500: #BA0C2F;           /* Norwegian Red */
    --n4-red-300: #FF8A9B;
    --n4-red-50: #FDECEF;
    --n4-blue-600: #1C47A8;
    --n4-blue-500: #2456C8;
    --n4-blue-300: #9DBBFF;
    --n4-blue-50: #EAF0FC;
    --n4-green-700: #17633A;
    --n4-green-600: #1E7B43;
    --n4-green-50: #E7F4EC;
    --n4-gold-400: #F5C518;
    --n4-amber-500: #B07A00;
    --n4-amber-50: #FFF6DB;
    --n4-white: #FFFFFF;
    --n4-off-white: #F4F6FA;
    --n4-line: #E3E8F2;
    --n4-ink: #1B2A4A;
    --n4-ink-muted: #4A5875;
    --n4-on-dark-body: #D6DEEC;
    --n4-on-dark-muted: #A9B6D1;

    /* Translucent helpers (derived from the brand colours above) */
    --n4-white-a04: rgba(255, 255, 255, 0.04);
    --n4-white-a08: rgba(255, 255, 255, 0.08);
    --n4-white-a14: rgba(255, 255, 255, 0.14);
    --n4-white-a24: rgba(255, 255, 255, 0.24);
    --n4-white-a40: rgba(255, 255, 255, 0.4);
    --n4-navy-a35: rgba(0, 32, 91, 0.35);
    --n4-navy-a55: rgba(0, 32, 91, 0.55);
    --n4-navy-a85: rgba(0, 32, 91, 0.85);
    --n4-shade-a25: rgba(0, 22, 63, 0.25);
    --n4-red-a12: rgba(186, 12, 47, 0.12);
    --n4-red-a65: rgba(186, 12, 47, 0.65);
    --n4-scrim: rgba(0, 22, 63, 0.72);

    /* Typography */
    --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --fs-display: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --fs-h1: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
    --fs-h2: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
    --fs-h3: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
    --fs-h4: clamp(1.05rem, 1rem + 0.2vw, 1.15rem);
    --fs-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
    --fs-body: clamp(0.95rem, 0.92rem + 0.15vw, 1.0625rem);
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;
    --lh-body: 1.7;
    --lh-heading: 1.25;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --section-y: clamp(48px, 7vw, 96px);
    --section-y-sm: clamp(32px, 5vw, 56px);
    --card-pad: clamp(16px, 4vw, 32px);

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Elevation (navy-tinted) */
    --shadow-sm: 0 1px 2px rgba(0, 22, 63, 0.08), 0 2px 8px rgba(0, 22, 63, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 22, 63, 0.12), 0 12px 32px rgba(0, 22, 63, 0.12);
    --shadow-lg: 0 20px 48px rgba(0, 22, 63, 0.28);
    --shadow-red: 0 8px 24px rgba(186, 12, 47, 0.35);
    --shadow-blue: 0 8px 24px rgba(36, 86, 200, 0.3);

    /* Motion */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --dur: 200ms;
    --lift: translateY(-4px);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(16px, 3vw, 32px);
    --nav-height: 52px;
    --focus-ring: 0 0 0 3px var(--n4-white-a40);

    /* Legacy custom properties (kept for old pages; alias the tokens) */
    --color-norwegian-blue: var(--n4-navy-900);
    --color-norwegian-red: var(--n4-red-500);
    --color-norwegian-red-hover: var(--n4-red-600);
    --color-text-primary: var(--n4-white);
    --color-text-muted: var(--n4-on-dark-muted);
    --color-text-body: var(--n4-on-dark-body);
    --color-off-white: var(--n4-off-white);
    --layout-max-width: var(--container);
    --layout-gutter: var(--gutter);
    --section-padding-y: var(--section-y-sm);
    --section-padding-y-major: var(--section-y);
    --section-padding-y-minor: var(--section-y-sm);
    --font-size-base: var(--fs-body);
    --line-height-body: var(--lh-body);
    --line-height-heading: var(--lh-heading);
}

/* ==========================================================================
   2. Surfaces
   Text colours always come from these variables, never hard-coded per element.
   Dark is the default (navy page). Light components re-declare the variables,
   so any heading, paragraph or link inside them turns dark automatically.
   ========================================================================== */

:root,
.surface-dark {
    --text: var(--n4-white);
    --text-body: var(--n4-on-dark-body);
    --text-muted: var(--n4-on-dark-muted);
    --link: var(--n4-blue-300);
    --link-hover: var(--n4-white);
    --accent: var(--n4-red-300);
    --border: var(--n4-white-a14);
    --raised: var(--n4-navy-800);
    --focus-ring: 0 0 0 3px var(--n4-white-a40);
}

.surface-light,
.credibility-section,
.credibility-card,
.utility-cta-section,
.section-alt-light,
.cta-card,
.benefit-card,
.testimonials-section,
.testimonial-card,
.related-articles,
.related-article-card,
.expert-resource-card,
.expert-card,
.total-time-box,
.popup-content,
.results,
.callout-info,
.callout-warn,
.callout-success-light,
.pdf-guide-section,
.features-hero,
.feature-item,
.features-section,
.feature-card,
.how-it-works,
.how-it-works-section,
.step,
.step-card {
    --text: var(--n4-navy-900);
    --text-body: var(--n4-ink);
    --text-muted: var(--n4-ink-muted);
    --link: var(--n4-blue-500);
    --link-hover: var(--n4-red-500);
    --accent: var(--n4-red-500);
    --border: var(--n4-line);
    --raised: var(--n4-white);
    --focus-ring: 0 0 0 3px rgba(36, 86, 200, 0.45);
    color: var(--text-body);
}

/* Dark islands inside light sections */
.pdf-guide-card,
.final-cta-section,
.newsletter-section,
.timeline-card,
.callout-red,
.callout-success {
    --text: var(--n4-white);
    --text-body: var(--n4-white);
    --text-muted: var(--n4-on-dark-body);
    --link: var(--n4-white);
    --link-hover: var(--n4-white);
    --accent: var(--n4-white);
    --border: var(--n4-white-a24);
    --focus-ring: 0 0 0 3px var(--n4-white-a40);
    color: var(--text-body);
}

.pdf-guide-card,
.newsletter-section {
    --text-body: var(--n4-on-dark-body);
    --text-muted: var(--n4-on-dark-muted);
    --link: var(--n4-blue-300);
}

/* ==========================================================================
   3. Base elements
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--n4-navy-900);
    color: var(--text-body);
    overflow-x: hidden;
}

body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    line-height: var(--lh-heading);
    font-weight: 700;
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
    color: var(--text-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

li {
    color: var(--text-body);
    line-height: 1.65;
}

body li {
    list-style-type: disc;
}

ol > li {
    list-style-type: decimal;
}

:where(p, li, td, dd, blockquote) > strong,
:where(p, li, td, dd, blockquote) > b {
    color: var(--text);
}

a,
body a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

a:hover,
body a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

/* Inline links in running text get an underline so they read as links */
:where(p, li, td, blockquote) > a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

:where(p, li, td, blockquote) > a:not([class]):hover {
    text-decoration-color: currentColor;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-7) 0;
}

section {
    padding: var(--section-y-sm) 0;
}

::selection {
    background: rgba(186, 12, 47, 0.25);
    color: inherit;
}

/* ==========================================================================
   4. Vertical rhythm (spec §5) — low specificity so components can override
   ========================================================================== */

:where(p) { margin: 0 0 1em; }
:where(h1) { margin: 0 0 0.5em; }
:where(h2) { margin: 2.25em 0 0.6em; }
:where(h3) { margin: 1.75em 0 0.5em; }
:where(h4, h5, h6) { margin: 1.5em 0 0.5em; }
:where(ul, ol) { margin: 0 0 1.25em; padding-left: 1.5em; }
:where(li) { margin: 0 0 0.6em; padding-left: 0.25em; }
:where(li > ul, li > ol) { margin: 0.5em 0 0; }

:where(table, figure, blockquote, pre, .callout, .table-of-contents, .related-articles,
       .infographic-container, .video-container, .video-wrapper, .youtube-facade,
       .reference-table, .faq-section, .user-stories, .screenshot-container, .grid-auto) {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* A heading straight after another heading sits closer to it */
:where(h1, h2, h3, h4) + :where(h2, h3, h4) { margin-top: 0.4em; }

/* Containers and cards: their padding sets inner spacing, not child margins */
:where(.container, .callout, .cta-card, .benefit-card, .testimonial-card, .testimonial-item,
       .related-articles, .related-article-card, .article-item, .faq-item, .fact-card,
       .table-of-contents, .faq-section, .user-story, .credibility-text, .timeline-card,
       .total-time-box, .expert-resource-card, .popup-content, .results, .column,
       .callout-step, blockquote, figure, td, th) > :first-child {
    margin-top: 0;
}

:where(.callout, .cta-card, .benefit-card, .testimonial-card, .testimonial-item,
       .related-articles, .related-article-card, .article-item, .faq-item, .fact-card,
       .table-of-contents, .faq-section, .user-story, .credibility-text, .timeline-card,
       .total-time-box, .expert-resource-card, .popup-content, .results,
       .callout-step, blockquote, figure, td, th) > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   5. Layout
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--section-y-sm) var(--gutter);
}

/* Successive text containers read as one flow */
.container + .container {
    padding-top: 0;
}

/* Inside a section the section owns vertical padding */
section > .container {
    padding-top: 0;
    padding-bottom: 0;
}

/* Text inside the container uses the full column (up to 1200px), by design */
.container > h2,
.container > h3,
.container > h4,
.container > p,
.container > ul,
.container > ol,
.protocol-section h2,
.protocol-section h3,
.protocol-section h4,
.protocol-section p {
    width: 100%;
    max-width: 100%;
}

.container > h4 {
    font-size: var(--fs-h4);
}

.container.columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-6);
    padding-bottom: var(--section-y-sm);
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--card-pad);
}

.column > h2,
.column > h3 {
    margin-top: 0;
}

.center-btn {
    text-align: center;
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.column .center-btn {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: var(--space-4);
}

.center-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-5) 0 var(--space-6);
}

section.content {
    padding-bottom: var(--space-7);
}

/* ==========================================================================
   6. Site chrome
   ========================================================================== */

/* --- Page header (all pages except home) --- */
header {
    background: linear-gradient(120deg, var(--n4-navy-900), var(--n4-red-500));
    color: var(--n4-white);
    padding: 0;
    text-align: left;
}

.hero-image {
    background-image:
        linear-gradient(110deg, var(--n4-navy-a85) 0%, var(--n4-navy-a55) 55%, var(--n4-red-a65) 100%),
        url('/images/4x4-hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: clamp(28px, 6vw, 64px) 0;
}

.header-content {
    display: flex;
    align-items: center;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
    gap: clamp(12px, 2.5vw, 24px);
}

.header-logo {
    flex-shrink: 0;
    line-height: 0;
}

.header-logo img {
    height: clamp(56px, 10vw, 80px);
    width: auto;
    border-radius: var(--radius-sm);
}

.header-title {
    min-width: 0;
}

.header-title h1 {
    font-size: var(--fs-h1);
    margin: 0;
    color: var(--n4-white);
    text-shadow: 0 2px 16px rgba(0, 22, 63, 0.45);
}

.header-title p {
    font-size: var(--fs-lead);
    color: var(--n4-on-dark-body);
    margin: var(--space-2) 0 0;
    line-height: 1.5;
}

/* --- Home hero --- */
.hero {
    background-image:
        linear-gradient(180deg, var(--n4-navy-a55) 0%, var(--n4-navy-a35) 40%, var(--n4-red-a65) 100%),
        url('/images/4x4-hero.webp');
    background-size: cover;
    background-position: center;
    color: var(--n4-white);
    padding: clamp(56px, 10vw, 112px) var(--gutter);
    text-align: center;
}

.hero-content {
    max-width: min(880px, 100%);
    margin: 0 auto;
    padding: 0;
}

.hero-logo {
    height: clamp(56px, 12vw, 84px);
    width: auto;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.hero h1 {
    font-size: var(--fs-display);
    margin: 0 0 var(--space-4);
    color: var(--n4-white);
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0, 22, 63, 0.5);
}

.hero p {
    font-size: var(--fs-lead);
    color: var(--n4-white);
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 auto var(--space-6);
    text-shadow: 0 1px 12px rgba(0, 22, 63, 0.5);
}

.hero p strong {
    color: var(--n4-white);
}

.hero-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* --- Navigation (wrapped in .site-nav by js/nav.js) --- */
.site-nav {
    background: var(--n4-red-500);
    color: var(--n4-white);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 16px rgba(0, 22, 63, 0.25);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    width: 100%;
    min-height: var(--nav-height);
    padding: 10px var(--gutter);
    border: 0;
    background: transparent;
    color: var(--n4-white);
    cursor: pointer;
    font: inherit;
}

.nav-toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.site-nav.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-toggle:focus-visible {
    outline: none;
    box-shadow: inset var(--focus-ring);
}

nav {
    background: transparent;
    color: var(--n4-white);
    text-align: center;
    padding: 0 var(--gutter) var(--space-3);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1);
}

body > nav {
    background: var(--n4-red-500);
}

nav a,
body nav a {
    color: var(--n4-white);
    margin: 0;
    font-size: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
    font-weight: 500;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    white-space: nowrap;
}

nav a:hover,
nav a:focus-visible,
body nav a:hover {
    background-color: var(--n4-white);
    color: var(--n4-red-500);
    outline: none;
}

nav a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 700;
}

nav a[aria-current="page"]:hover {
    background-color: var(--n4-white);
}

/* --- Footer --- */
footer {
    background: var(--n4-navy-950);
    color: var(--n4-on-dark-muted);
    text-align: center;
    padding: var(--space-7) var(--gutter);
    border-top: 3px solid var(--n4-red-500);
    position: relative;
    width: 100%;
}

footer p {
    color: var(--n4-on-dark-muted);
    font-size: var(--fs-small);
    line-height: 1.8;
    margin: 0;
}

footer strong {
    color: var(--n4-white);
    font-size: 1rem;
}

footer a,
footer a:not([class]) {
    color: var(--n4-on-dark-body);
    text-decoration: none;
}

footer a:hover {
    color: var(--n4-white);
}

.social-links {
    margin-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    color: var(--n4-on-dark-muted);
    font-size: var(--fs-small);
}

.social-links:first-child {
    margin-top: 0;
}

.social-links a {
    color: var(--n4-on-dark-body);
    margin: 0 var(--space-1);
}

.social-links a:hover {
    color: var(--n4-white);
}

.social-links i {
    margin-right: 4px;
}

/* ==========================================================================
   7. Buttons — one recipe: pill, bold, coloured shadow, 2px lift
   ========================================================================== */

.btn,
.cta-card-button,
.cta-button,
.pdf-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 28px;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--n4-red-500);
    color: var(--n4-white);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-red);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.btn {
    margin-top: var(--space-3);
}

body a.btn,
.btn:hover,
.cta-card-button:hover,
.cta-button:hover,
.pdf-download-btn:hover {
    color: var(--n4-white);
}

.btn:hover,
.cta-card-button:hover,
.cta-button:hover,
.pdf-download-btn:hover {
    background-color: var(--n4-red-600);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(186, 12, 47, 0.45);
}

.btn:active,
.cta-card-button:active,
.cta-button:active,
.pdf-download-btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--n4-red-500);
    color: var(--n4-white);
}

/* White button: for red / green / navy backgrounds */
.btn-secondary,
.btn-light {
    background: var(--n4-white);
    color: var(--n4-red-500);
    box-shadow: var(--shadow-md);
}

body a.btn-secondary,
body a.btn-light,
.btn-secondary:hover,
.btn-light:hover {
    color: var(--n4-red-500);
}

.btn-secondary:hover,
.btn-light:hover {
    background: var(--n4-red-50);
    box-shadow: var(--shadow-lg);
}

.btn-blue,
.cta-card-button-blue {
    background: var(--n4-blue-500);
    box-shadow: var(--shadow-blue);
}

.btn-blue:hover,
.cta-card-button-blue:hover {
    background: var(--n4-blue-600);
    box-shadow: 0 12px 28px rgba(36, 86, 200, 0.4);
}

.cta-card-button-red {
    background: var(--n4-red-500);
}

.cta-button {
    padding: 18px 40px;
    font-size: 1.125rem;
    margin-top: var(--space-7);
}

.pdf-download-btn {
    padding: 16px 36px;
    font-size: 1.125rem;
    gap: var(--space-3);
}

.pdf-download-btn .btn-icon-left { font-size: 1.3em; }
.pdf-download-btn .btn-icon-right { font-size: 0.9em; }

/* App store badge frame */
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: min(220px, 100%);
    padding: 6px 16px;
    border: 1.5px solid var(--n4-white-a40);
    border-radius: var(--radius-sm);
    background: var(--n4-shade-a25);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.download-btn:hover {
    border-color: var(--n4-white);
    background: var(--n4-navy-a55);
    transform: translateY(-2px);
}

.download-btn img {
    max-width: 100%;
    max-height: 40px;
    width: auto;
    height: auto;
}

.app-badges-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.app-badge-link {
    display: inline-block;
    line-height: 0;
    border-radius: var(--radius-sm);
    transition: transform var(--dur) var(--ease);
}

.app-badge-link:hover {
    transform: translateY(-2px);
}

.app-badge-img {
    height: 50px;
    width: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 22, 63, 0.3));
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-5) 0;
}

.share-buttons a {
    margin: 0;
}

.share-buttons-wrap {
    padding: var(--section-y-sm) var(--gutter);
    text-align: center;
}

.close-btn {
    float: right;
    color: var(--n4-red-500);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: var(--n4-red-600);
    cursor: pointer;
}

/* ==========================================================================
   8. Cards & landing components
   Shared card recipe: radius-md, hairline border, shadow-sm → shadow-md, 4px lift.
   Red / blue variants differ only in accent colour.
   ========================================================================== */

.cta-card,
.benefit-card,
.testimonial-card,
.related-article-card,
.expert-resource-card,
.expert-card,
.credibility-card {
    background: var(--n4-white);
    border: 1px solid var(--n4-line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.cta-card:hover,
.benefit-card:hover,
.testimonial-card:hover,
.related-article-card:hover,
.expert-resource-card:hover,
.expert-card:hover {
    transform: var(--lift);
    box-shadow: var(--shadow-md);
}

/* Round icon chip used by several cards */
.cta-card-icon,
.benefit-icon,
.expert-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: var(--n4-white);
    background: var(--n4-red-500);
}

.cta-card-icon i,
.benefit-icon i,
.expert-card-icon i {
    color: var(--n4-white);
}

.cta-card-icon-red,
.benefit-icon-red,
.testimonial-avatar-red { background: var(--n4-red-500); box-shadow: var(--shadow-red); }

.cta-card-icon-blue,
.benefit-icon-blue,
.testimonial-avatar-blue { background: var(--n4-blue-500); box-shadow: var(--shadow-blue); }

/* --- Section titles --- */
.section-title,
.section-title-white,
.video-section-title,
.video-section-title-white {
    text-align: center;
    font-size: var(--fs-h2);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-4);
}

.section-title-white,
.video-section-title-white {
    color: var(--n4-white);
}

.section-subtitle,
.section-subtitle-white,
.video-section-subtitle,
.video-section-subtitle-white {
    text-align: center;
    font-size: var(--fs-lead);
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto var(--space-7);
    line-height: 1.6;
}

.section-subtitle-white,
.video-section-subtitle-white {
    color: var(--n4-on-dark-body);
}

/* --- Section backgrounds (homepage rhythm: light / dark alternate) --- */
.section-alt-light,
.utility-cta-section,
.credibility-section,
.pdf-guide-section {
    background: var(--n4-off-white);
    padding: var(--section-y) 0;
    margin: 0;
}

.utility-cta-section {
    padding: var(--section-y-sm) 0;
}

.testimonials-section {
    background: var(--n4-white);
    padding: var(--section-y) 0;
    margin: 0;
}

.benefits-section {
    background: var(--n4-navy-900);
    padding: var(--section-y) 0;
}

.section-alt-light .section-title,
.section-alt-light h2,
.section-alt-light h3 {
    color: var(--text);
}

/* --- CTA cards --- */
.cta-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-5);
    margin: 0;
}

.cta-card {
    padding: clamp(24px, 4vw, 40px);
    text-align: center;
    border-top: 4px solid var(--n4-red-500);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-card-blue { border-top-color: var(--n4-blue-500); }
.cta-card-red { border-top-color: var(--n4-red-500); }

.cta-card-centered {
    max-width: 600px;
    margin: 0 auto;
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
}

.cta-card-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-5);
}

.cta-card-icon i {
    font-size: 1.6rem;
}

.cta-card h2 {
    font-size: var(--fs-h3);
    margin: 0 0 var(--space-3);
}

.cta-card-red h2 { color: var(--n4-red-500); }
.cta-card-blue h2 { color: var(--n4-blue-500); }

.cta-card p {
    color: var(--text-body);
    margin: 0 0 var(--space-5);
    max-width: 48ch;
}

.cta-card .cta-card-button {
    margin-top: auto;
}

/* Newsletter band: dark section holding a light card */
.newsletter-section,
.section-alt-light.newsletter-section {
    background: var(--n4-navy-950);
    padding: var(--section-y) 0;
}

.newsletter-section .cta-cards-grid {
    margin: 0;
}

/* --- Benefits --- */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
}

.benefit-card {
    padding: var(--card-pad);
    text-align: left;
    border-top: 4px solid var(--n4-red-500);
}

.benefit-card-blue { border-top-color: var(--n4-blue-500); }

.benefit-icon {
    width: 56px;
    height: 56px;
    margin: 0 0 var(--space-4);
}

.benefit-icon i {
    font-size: 1.4rem;
}

.benefit-card h3 {
    font-size: var(--fs-h3);
    margin: 0 0 var(--space-2);
}

.benefit-card-red h3 { color: var(--n4-red-500); }
.benefit-card-blue h3 { color: var(--n4-blue-500); }

.benefit-card p {
    color: var(--text-body);
    margin: 0;
    line-height: 1.6;
}

/* Legacy dark benefit item (styles.css) */
.benefit-item {
    background: var(--n4-white-a04);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--n4-red-500);
    transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.benefit-item:hover {
    transform: var(--lift);
    background: var(--n4-white-a08);
}

.benefit-item h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h3);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.benefit-item h3 i {
    color: var(--n4-red-300);
}

.benefit-item p {
    margin: 0;
    line-height: 1.6;
}

/* --- Media credibility --- */
.credibility-card {
    padding: clamp(20px, 4vw, 40px);
    max-width: min(900px, 100%);
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}

.credibility-content {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.credibility-image-wrapper {
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    line-height: 0;
}

.credibility-image {
    width: 200px;
    height: auto;
    display: block;
    transition: transform 300ms var(--ease);
}

.credibility-image:hover {
    transform: scale(1.04);
}

.credibility-text {
    flex: 1 1 260px;
    min-width: 0;
}

/* Red pill badge (v25). The legacy dark badge lives under .media-credibility in §12. */
.credibility-badge {
    display: inline-block;
    background: var(--n4-red-500);
    color: var(--n4-white);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
    box-shadow: var(--shadow-red);
}

.credibility-text h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h2);
}

.credibility-text h3 a {
    color: var(--text);
    text-decoration: none;
}

.credibility-text h3 a:hover {
    color: var(--n4-red-500);
}

.credibility-subtitle {
    color: var(--text-muted);
    font-size: var(--fs-lead);
    margin: 0 0 var(--space-3);
    font-weight: 500;
}

.credibility-subtitle strong {
    color: var(--n4-red-500);
}

.credibility-description {
    color: var(--text-body);
    line-height: 1.7;
    margin: 0;
}

.credibility-description strong {
    color: var(--text);
}

/* --- Protocol explainer + timeline --- */
.protocol-wrapper {
    background: linear-gradient(160deg, var(--n4-navy-950) 0%, var(--n4-navy-900) 60%, var(--n4-navy-800) 100%);
    padding: var(--section-y) 0;
    margin: 0;
}

.protocol-section {
    margin: 0 auto;
    width: 100%;
}

.protocol-section h2 {
    font-size: var(--fs-h2);
    margin: 0 0 var(--space-4);
}

.protocol-section h2 strong {
    color: var(--n4-red-300);
}

.protocol-section p {
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--n4-on-dark-body);
    margin: 0 0 var(--space-4);
}

.protocol-h3,
.protocol-section h3 {
    margin: var(--space-7) 0 var(--space-3);
    font-size: var(--fs-h3);
}

.protocol-intro {
    font-size: var(--fs-body);
    color: var(--n4-on-dark-muted);
    margin: 0 0 var(--space-5);
}

.protocol-section p.protocol-intro {
    font-size: var(--fs-body);
    color: var(--n4-on-dark-muted);
}

.protocol-progress-bar {
    display: none;
    height: 8px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin: 0 0 var(--space-4);
    background: var(--n4-white-a14);
}

.protocol-progress-segment {
    height: 100%;
    float: left;
}

.protocol-progress-warmup { background: var(--n4-green-600); width: 13.2%; }
.protocol-progress-interval { background: var(--n4-red-500); width: 10.5%; }
.protocol-progress-recovery { background: var(--n4-blue-500); width: 7.9%; }
.protocol-progress-cooldown { background: var(--n4-green-600); width: 13.2%; }

.protocol-timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    position: relative;
}

.timeline-card {
    padding: var(--space-4) var(--space-3);
    border-radius: var(--radius-md);
    text-align: center;
    background: var(--n4-green-600);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.timeline-card:hover {
    transform: var(--lift);
    box-shadow: var(--shadow-md);
}

.timeline-card-warmup,
.timeline-card-cooldown { background: var(--n4-green-600); }
.timeline-card-interval { background: var(--n4-red-500); animation: intervalPulse 3s ease-in-out infinite; }
.timeline-card-recovery { background: var(--n4-blue-500); }

@keyframes intervalPulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(186, 12, 47, 0.3); }
    50% { box-shadow: 0 6px 24px rgba(186, 12, 47, 0.55); }
}

.timeline-icon {
    font-size: 1.6rem;
    color: var(--n4-white);
    margin-bottom: var(--space-2);
    line-height: 1;
}

.timeline-card h4 {
    color: var(--n4-white);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h4);
}

.timeline-card p {
    color: var(--n4-white);
    margin: 0;
    font-size: var(--fs-small);
    line-height: 1.4;
}

.timeline-duration {
    display: inline-block;
    margin-top: var(--space-2);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    background: var(--n4-shade-a25);
    color: var(--n4-white);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.total-time-box {
    background: var(--n4-white);
    border-left: 5px solid var(--n4-red-500);
    padding: var(--space-4) var(--space-5);
    margin: var(--space-5) 0 0;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.total-time-box p,
.protocol-section .total-time-box p {
    margin: 0;
    font-size: var(--fs-body);
    color: var(--text-body);
}

.total-time-box i {
    color: var(--n4-red-500);
    margin-right: var(--space-2);
}

/* --- Expert resources --- */
.expert-resources-title {
    margin: var(--space-8) 0 var(--space-5);
    text-align: center;
    font-size: var(--fs-h3);
    color: var(--text);
}

.protocol-section .expert-resources-title {
    margin-top: var(--space-8);
}

.expert-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: var(--space-3);
    margin: 0;
}

.expert-resource-card,
.expert-card {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--card-accent, var(--n4-red-500));
}

.expert-resource-card:hover,
.expert-card:hover {
    border-color: var(--n4-line);
    border-left-color: var(--card-accent, var(--n4-red-500));
}

.expert-card-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.expert-card-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    background: var(--card-accent, var(--n4-red-500));
}

.expert-card-title,
.expert-card h4 {
    flex: 1;
    margin: 0;
    font-size: var(--fs-body);
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}

.expert-card-text { flex: 1; }

/* Colour variants mapped onto the brand palette (spec §2): red / blue / navy / green */
.expert-resource-card-red, .expert-card-red, .expert-card-icon-red,
.expert-resource-card-pink, .expert-card-pink, .expert-card-icon-pink,
.expert-resource-card-hotpink, .expert-card-hotpink, .expert-card-icon-hotpink { --card-accent: var(--n4-red-500); }

.expert-resource-card-blue, .expert-card-blue, .expert-card-icon-blue,
.expert-resource-card-purple, .expert-card-purple, .expert-card-icon-purple { --card-accent: var(--n4-blue-500); }

.expert-resource-card-lightblue, .expert-card-sky, .expert-card-icon-lightblue,
.expert-resource-card-yellow, .expert-card-yellow, .expert-card-icon-yellow,
.expert-resource-card-orange, .expert-card-orange, .expert-card-icon-orange { --card-accent: var(--n4-navy-700); }

.expert-resource-card-green, .expert-card-green, .expert-card-icon-green,
.expert-resource-card-cyan, .expert-card-cyan, .expert-card-icon-cyan { --card-accent: var(--n4-green-600); }

/* --- PDF guide CTA --- */
.pdf-guide-card {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 48px);
    text-align: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--n4-navy-900) 0%, var(--n4-navy-800) 60%, var(--n4-navy-950) 100%);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.pdf-cta-decorative-top,
.pdf-cta-decorative-bottom {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    filter: blur(48px);
    z-index: 1;
    pointer-events: none;
}

.pdf-cta-decorative-top { top: -60px; right: -60px; background: rgba(186, 12, 47, 0.35); }
.pdf-cta-decorative-bottom { bottom: -60px; left: -60px; background: rgba(36, 86, 200, 0.3); }

.pdf-cta-content {
    position: relative;
    z-index: 2;
}

.pdf-cta-badge-wrapper {
    display: inline-block;
    background: var(--n4-red-a12);
    padding: 6px 18px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(255, 138, 155, 0.45);
}

.pdf-cta-badge-text {
    color: var(--n4-red-300);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.14em;
}

.pdf-cta-title {
    color: var(--n4-white);
    margin: 0 0 var(--space-4);
    font-size: var(--fs-h2);
    font-weight: 700;
}

.pdf-cta-description {
    color: var(--n4-on-dark-body);
    font-size: var(--fs-lead);
    margin: 0 auto var(--space-6);
    max-width: 600px;
    line-height: 1.6;
}

.pdf-features-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    max-width: 560px;
    margin: 0 auto var(--space-6);
}

.pdf-feature-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--n4-white-a08);
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--n4-white-a14);
    transition: background-color var(--dur) var(--ease);
}

.pdf-feature-pill:hover {
    background: var(--n4-white-a14);
}

.pdf-feature-pill i {
    color: var(--n4-red-300);
    flex-shrink: 0;
}

.pdf-feature-pill span {
    color: var(--n4-white);
    font-size: var(--fs-small);
}

.pdf-cta-footer-text {
    color: var(--n4-on-dark-muted);
    font-size: var(--fs-small);
    margin: var(--space-4) 0 0;
    font-style: italic;
}

/* --- Testimonials --- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0 0;
}

.testimonial-card {
    padding: var(--card-pad);
    border-left: 4px solid var(--n4-red-500);
    display: flex;
    flex-direction: column;
}

.testimonial-card-red { border-left-color: var(--n4-red-500); }
.testimonial-card-blue { border-left-color: var(--n4-blue-500); }

.testimonial-stars {
    font-size: 1.5rem;
    color: var(--n4-gold-400);
    margin-bottom: var(--space-3);
}

.star-rating {
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-3);
}

.star-rating .fa-star {
    color: var(--n4-gold-400);
    font-size: 1rem;
}

.testimonial-text {
    color: var(--text-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    margin: 0 0 var(--space-5);
    font-style: italic;
    flex: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--n4-white);
    font-weight: 700;
}

.testimonial-info p {
    margin: 0;
    line-height: 1.4;
}

.testimonial-info p:first-child {
    font-weight: 700;
    color: var(--text);
}

.testimonial-info p:last-child {
    color: var(--text-muted);
    font-size: var(--fs-small);
}

/* Legacy dark testimonial items (styles.css, used on posts) */
.testimonial-item {
    background: var(--n4-navy-800);
    border: 1px solid var(--n4-white-a08);
    padding: var(--card-pad);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.testimonial-item:hover {
    transform: var(--lift);
    box-shadow: var(--shadow-md);
}

.testimonial-item .star-rating {
    margin-bottom: var(--space-2);
}

.testimonial-item h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h4);
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
}

.testimonial-item p {
    color: var(--text-muted);
    font-size: var(--fs-small);
    margin: 0;
}

/* --- Final download CTA band --- */
.final-cta-section {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.12), transparent 45%),
        linear-gradient(135deg, var(--n4-red-500) 0%, var(--n4-red-600) 100%);
    padding: var(--section-y) 0;
    margin: 0;
}

.final-cta-content {
    text-align: center;
}

.final-cta-title {
    color: var(--n4-white);
    font-size: var(--fs-h1);
    margin: 0 0 var(--space-4);
    font-weight: 700;
}

.final-cta-subtitle {
    color: var(--n4-white);
    font-size: var(--fs-lead);
    max-width: 640px;
    margin: 0 auto var(--space-6);
    line-height: 1.6;
}

.final-cta-footer {
    color: var(--n4-white);
    font-size: var(--fs-small);
    margin: var(--space-6) 0 0;
    font-weight: 500;
}

.final-cta-footer i {
    margin-right: 2px;
}

.final-cta-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* --- Video --- */
.video-section {
    padding: var(--section-y) 0;
    background: var(--n4-navy-950);
}

.video-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    background: var(--n4-navy-800);
}

.video-wrapper iframe,
.video-wrapper .youtube-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.video-wrapper .youtube-facade-thumb {
    height: 100%;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: var(--n4-navy-950);
    border-radius: var(--radius-md);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-facade {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.youtube-facade-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.youtube-facade-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--n4-navy-a35);
    transition: background var(--dur) var(--ease);
}

.youtube-facade-play .fa-play {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--n4-red-500);
    color: var(--n4-white);
    border-radius: 50%;
    font-size: 1.5rem;
    padding-left: 4px;
    box-shadow: var(--shadow-red);
    transition: transform var(--dur) var(--ease);
}

.youtube-facade:hover .youtube-facade-play {
    background: var(--n4-navy-a55);
}

.youtube-facade:hover .youtube-facade-play .fa-play {
    transform: scale(1.08);
}

.youtube-facade-iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md);
}

/* ==========================================================================
   9. Content pages (articles / posts / long-form root pages)
   ========================================================================== */

.content-page {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
}

/* Breadcrumb line ("Articles · VO₂ max guides") */
.content-page > p:first-child {
    color: var(--text-muted);
    font-size: var(--fs-small);
    margin-bottom: var(--space-6);
}

.content-page > p:first-child a {
    color: var(--n4-white);
    font-weight: 700;
    text-decoration: none;
}

.content-page > p:first-child a:hover {
    color: var(--n4-red-300);
}

.lead {
    font-size: var(--fs-lead);
    color: var(--text);
    line-height: 1.6;
}

/* "Last updated" line and article card meta */
.article-meta {
    color: var(--text-muted);
    font-size: var(--fs-small);
    margin-top: var(--space-7);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.article-meta strong {
    color: var(--text-muted);
}

.article-meta i {
    margin-right: 4px;
}

/* --- Article index tiles --- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
    align-items: stretch;
}

.article-item {
    background: var(--n4-navy-800);
    border: 1px solid var(--n4-white-a08);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.article-item:hover {
    transform: var(--lift);
    box-shadow: var(--shadow-md);
    border-color: var(--n4-white-a24);
}

.article-item a {
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.article-item a:hover {
    text-decoration: none;
}

.article-item h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-h4);
    color: var(--n4-white);
    line-height: 1.35;
}

.article-item a:hover h3 {
    color: var(--n4-red-300);
}

.article-item p {
    color: var(--text-body);
    margin: 0;
    line-height: 1.55;
    font-size: var(--fs-small);
}

.article-item .article-meta,
.container .article-item p:last-child {
    margin: auto 0 0;
}

.article-item .article-meta {
    padding-top: var(--space-4);
    border-top: 0;
    text-align: right;
    font-size: var(--fs-xs);
    line-height: 1.2;
    color: var(--text-muted);
}

/* --- Related articles --- */
.related-articles {
    background: var(--n4-off-white);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
    box-shadow: var(--shadow-sm);
}

.related-articles h3 {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-h3);
    color: var(--text);
}

.related-articles h3 i,
.related-articles h3 .fa-book-reader {
    color: var(--n4-red-500);
    margin-right: var(--space-2);
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-3);
}

.related-article-card {
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--n4-red-500);
    box-shadow: none;
}

.related-article-card h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-body);
}

.related-article-card h4 a {
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
}

.related-article-card h4 a:hover {
    color: var(--n4-red-500);
}

.related-article-card p {
    margin: 0;
    font-size: var(--fs-small);
    color: var(--text-muted);
    line-height: 1.5;
}

/* --- Table of contents --- */
.table-of-contents {
    background: var(--n4-navy-800);
    border: 1px solid var(--n4-white-a08);
    border-left: 4px solid var(--n4-red-500);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
}

.table-of-contents h2 {
    color: var(--n4-white);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h4);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2 260px;
    column-gap: var(--space-6);
}

.table-of-contents li {
    list-style: none;
    margin: 0;
    padding: var(--space-1) 0;
    break-inside: avoid;
}

.table-of-contents a {
    color: var(--n4-on-dark-body);
    text-decoration: none;
    display: block;
    padding: 2px 0;
    font-size: var(--fs-small);
    line-height: 1.35;
}

.table-of-contents a:hover {
    color: var(--n4-white);
}

/* --- Data tables --- */
.reference-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-small);
    border: 1px solid var(--n4-white-a14);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.reference-table th,
.reference-table td {
    padding: 12px 16px;
    text-align: left;
    color: var(--text-body);
    border-bottom: 1px solid var(--n4-white-a14);
    vertical-align: top;
}

.reference-table th {
    background: var(--n4-navy-700);
    color: var(--n4-white);
    font-weight: 700;
    white-space: nowrap;
}

.reference-table td:first-child {
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}

.reference-table tbody tr:nth-child(even) {
    background: var(--n4-white-a04);
}

.reference-table tbody tr:last-child td {
    border-bottom: 0;
}

.reference-table tbody tr:hover {
    background: var(--n4-white-a08);
}

/* --- Quotes, FAQ blocks, stories --- */
blockquote {
    background: var(--n4-red-a12);
    border-left: 4px solid var(--n4-red-500);
    padding: var(--space-5) var(--space-6);
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--text-body);
}

blockquote::before {
    content: '\201C';
    font-size: 3em;
    color: var(--n4-red-300);
    line-height: 0.1em;
    margin-right: 0.1em;
    vertical-align: -0.4em;
}

.faq-section {
    background: var(--n4-white-a04);
    border: 1px solid var(--n4-white-a08);
    padding: var(--card-pad);
    border-radius: var(--radius-md);
}

.faq-section h3 {
    color: var(--n4-red-300);
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--fs-h4);
    border-bottom: 1px solid rgba(255, 138, 155, 0.3);
    padding-bottom: var(--space-2);
}

.faq-section h3:first-child {
    margin-top: 0;
}

.faq-section p {
    margin-bottom: var(--space-4);
    line-height: 1.65;
}

.user-stories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-4);
}

.user-story {
    background: var(--n4-red-a12);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--n4-red-500);
}

.user-story h4 {
    color: var(--n4-red-300);
    margin: 0 0 var(--space-3);
}

.user-story p {
    margin: 0;
    line-height: 1.6;
}

/* --- Media in articles --- */
.infographic-container img,
.container figure img,
.container > figure img {
    border-radius: var(--radius-md);
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0;
    box-shadow: var(--shadow-md);
}

.infographic-container > * + * {
    margin-top: var(--space-4);
}

figure {
    margin-left: 0;
    margin-right: 0;
}

figcaption {
    color: var(--text-muted);
    font-size: var(--fs-small);
    margin-top: var(--space-2);
}

pre,
code {
    overflow-x: auto;
    word-break: break-word;
}

code {
    background: var(--n4-white-a08);
    border-radius: 4px;
    padding: 0.1em 0.35em;
    font-size: 0.92em;
}

/* --- Callouts (replace inline-styled boxes) --- */
.callout {
    border-radius: var(--radius-md);
    padding: var(--card-pad);
    border-left: 4px solid transparent;
}

.callout > h3,
.callout > h4 {
    margin: 0 0 var(--space-3);
}

.callout h3 i,
.callout h4 i {
    margin-right: var(--space-2);
}

.callout-center {
    text-align: center;
}

.callout-info {
    background: var(--n4-blue-50);
    border-left-color: var(--n4-blue-500);
}

.callout-info h3,
.callout-info strong {
    color: var(--n4-blue-600);
}

.callout-warn {
    background: var(--n4-amber-50);
    border-left-color: var(--n4-amber-500);
}

.callout-red {
    background: linear-gradient(135deg, var(--n4-red-500) 0%, var(--n4-red-600) 100%);
    box-shadow: var(--shadow-red);
    border-left: 0;
}

.callout-success {
    background: linear-gradient(135deg, var(--n4-green-600) 0%, var(--n4-green-700) 100%);
    box-shadow: var(--shadow-md);
    border-left: 0;
}

.callout-success-light {
    background: var(--n4-green-50);
    border-left-color: var(--n4-green-600);
}

.callout-red .btn,
.callout-success .btn {
    margin-top: var(--space-2);
}

.callout-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--space-4);
    margin: var(--space-5) 0;
}

.callout-step {
    background: var(--n4-shade-a25);
    border: 1px solid var(--n4-white-a24);
    padding: var(--space-5);
    border-radius: var(--radius-sm);
}

.callout-step h4 {
    margin: 0 0 var(--space-2);
}

.callout-step p {
    margin: 0;
}

.callout-actions {
    text-align: center;
    margin-top: var(--space-5);
}

.callout-actions p {
    font-size: var(--fs-lead);
    margin: 0 0 var(--space-3);
}

.callout-actions .btn {
    margin: var(--space-1);
}

.callout-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-3) var(--space-5);
    margin: var(--space-4) 0 0;
    color: var(--text-body);
}

/* ==========================================================================
   10. Page-specific components
   ========================================================================== */

/* --- FAQ page --- */
.faq-group {
    margin-bottom: var(--space-7);
}

.faq-group h3 {
    font-size: var(--fs-h2);
    margin: var(--space-7) 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.faq-icon {
    color: var(--n4-red-300);
    margin-right: 0;
    font-size: 0.8em;
}

.faq-item {
    background: var(--n4-navy-800);
    border: 1px solid var(--n4-white-a08);
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.faq-item:hover {
    border-color: var(--n4-white-a24);
    box-shadow: var(--shadow-md);
}

.faq-item h4 {
    font-size: var(--fs-h4);
    margin: 0 0 var(--space-2);
    color: var(--n4-white);
}

.faq-item p {
    color: var(--text-body);
    margin-bottom: 0;
}

/* --- Facts page --- */
.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0 var(--space-8);
}

.fact-item {
    display: flex;
    flex-direction: column;
}

.fact-card {
    background: var(--n4-navy-800);
    border: 1px solid var(--n4-white-a08);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    position: relative;
}

.fact-card:hover {
    transform: var(--lift);
    border-color: var(--n4-white-a24);
    box-shadow: var(--shadow-md);
}

.fact-text {
    color: var(--n4-white);
    text-align: center;
    font-size: var(--fs-lead);
    line-height: 1.5;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fact-source {
    margin-top: var(--space-2);
    text-align: left;
}

.fact-source a {
    color: var(--n4-red-300);
    font-size: var(--fs-small);
}

.fact-source a:hover {
    color: var(--n4-white);
    text-decoration: underline;
}

/* --- Newsletter popup (js/newsletter-popup.js) --- */
.popup {
    display: none;
    position: fixed;
    z-index: 999;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--n4-scrim);
    backdrop-filter: blur(6px);
}

.popup-content {
    background-color: var(--n4-white);
    margin: 12vh auto;
    padding: var(--space-6);
    width: calc(100% - 2 * var(--gutter));
    max-width: 480px;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.popup-content h2 {
    color: var(--text);
    margin: 0 0 var(--space-3);
    font-size: var(--fs-h3);
}

.popup-content p {
    color: var(--text-body);
}

.popup .btn {
    margin-top: var(--space-4);
}

/* --- App screenshots --- */
.screenshot-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.screenshot {
    border: 1px solid var(--n4-white-a24);
    border-radius: var(--radius-md);
    max-width: 100%;
    height: auto;
    box-shadow: var(--shadow-lg);
}

.screenshot-container img {
    max-width: min(45%, 420px);
    margin: 0;
}

/* --- Indie projects --- */
.indie-projects {
    width: 100%;
    margin: var(--space-5) 0;
    display: grid;
    gap: var(--space-3);
}

.project {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: 0;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.project:hover {
    background: var(--n4-white-a04);
    border-color: var(--n4-white-a14);
    transform: var(--lift);
}

.project-logo {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--radius-md);
    margin-right: 0;
    flex-shrink: 0;
}

.project-info {
    flex: 1;
    min-width: 0;
}

.project-title,
.project-link {
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--n4-white);
    text-decoration: none;
    display: block;
}

.project-title:hover,
.project-link:hover {
    color: var(--n4-red-300);
}

.project-description {
    margin: var(--space-2) 0 0;
    color: var(--text-body);
}

/* --- Seasonal snow (js/snow-effect.js) --- */
.snow-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10px;
    background: var(--n4-white);
    border-radius: 50%;
    pointer-events: none;
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    0% { transform: translateY(0) translateX(0); opacity: 0.3; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(100vh) translateX(var(--drift, 0px)); opacity: 0.3; }
}

/* ==========================================================================
   11. Utilities
   ========================================================================== */

.text-center { text-align: center; }
.mb-50 { margin-bottom: var(--space-7); }
.mt-50 { margin-top: var(--space-7); }
.accent { color: var(--n4-blue-300); }

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-4);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ==========================================================================
   12. Legacy components
   Not used by current pages. Kept so older or generated pages still render,
   restyled onto the tokens. Guarded by scripts/legacy-selectors.js.
   ========================================================================== */

/* Features (styles.css "features-hero", styles25 "features-section") */
.features-hero,
.features-section {
    background: var(--n4-off-white);
    padding: var(--section-y) 0;
}

.features-hero h2 {
    text-align: center;
    margin: 0 0 var(--space-7);
    font-size: var(--fs-h2);
}

.features-grid,
.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.feature-item,
.feature-card,
.step,
.step-card {
    background: var(--n4-white);
    border: 1px solid var(--n4-line);
    border-radius: var(--radius-md);
    padding: var(--card-pad);
    text-align: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.feature-item:hover,
.feature-card:hover,
.step:hover,
.step-card:hover {
    transform: var(--lift);
    box-shadow: var(--shadow-md);
}

.feature-item i {
    font-size: 2.5rem;
    color: var(--n4-red-500);
    margin-bottom: var(--space-4);
}

.feature-item h3,
.feature-card h3,
.step h3,
.step-card h3 {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--fs-h3);
}

.feature-item p,
.feature-card p,
.step p,
.step-card p {
    color: var(--text-body);
    margin: 0;
}

.feature-card-red,
.step-card-red { border-top: 4px solid var(--n4-red-500); }
.feature-card-blue,
.step-card-blue { border-top: 4px solid var(--n4-blue-500); }
.feature-card-red h3,
.step-card-red h3 { color: var(--n4-red-500); }
.feature-card-blue h3,
.step-card-blue h3 { color: var(--n4-blue-500); }

.feature-icon,
.step-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    background: var(--n4-red-500);
}

.feature-icon i,
.step-icon i {
    font-size: 1.6rem;
    color: var(--n4-white);
}

.feature-icon-red,
.step-icon-red { background: var(--n4-red-500); box-shadow: var(--shadow-red); }
.feature-icon-blue,
.step-icon-blue { background: var(--n4-blue-500); box-shadow: var(--shadow-blue); }

/* How it works (styles.css) */
.how-it-works,
.how-it-works-section {
    background: var(--n4-off-white);
    padding: var(--section-y) 0;
}

.how-it-works h2 {
    text-align: center;
    margin: 0 0 var(--space-7);
    font-size: var(--fs-h2);
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-5);
}

.step-badge {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n4-white);
    font-weight: 700;
    font-size: 1.2rem;
    border: 3px solid var(--n4-white);
    background: var(--n4-red-500);
}

.step-badge-red { background: var(--n4-red-500); box-shadow: var(--shadow-red); }
.step-badge-blue { background: var(--n4-blue-500); box-shadow: var(--shadow-blue); }

/* Media credibility, dark variant (styles.css) */
.media-credibility {
    background: linear-gradient(135deg, var(--n4-red-a12), var(--n4-navy-800));
    border-top: 2px solid var(--n4-red-500);
    padding: var(--section-y-sm) 0;
    margin: 0;
}

.media-credibility .credibility-badge {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-7);
    background: var(--n4-white-a04);
    border: 1px solid var(--n4-white-a14);
    border-radius: var(--radius-lg);
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    text-transform: none;
    box-shadow: var(--shadow-md);
}

.badge-icon { flex-shrink: 0; }
.badge-icon i { font-size: 3rem; color: var(--n4-red-300); }
.badge-content { flex: 1; text-align: left; }

.badge-header {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.featured-label {
    background: var(--n4-red-500);
    color: var(--n4-white);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.podcast-info { flex: 1; }

.podcast-info h3 {
    margin: 0;
    font-size: var(--fs-h2);
}

.podcast-link,
.podcast-link:hover {
    color: var(--n4-white);
    text-decoration: none;
}

.podcast-link:hover {
    color: var(--n4-red-300);
}

.episode-details {
    margin: 2px 0 0;
    color: var(--n4-on-dark-body);
}

.episode-details strong {
    color: var(--n4-white);
}

/* Icon lists (styles.css) */
.expert-links,
ul.icon-list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0;
}

.expert-links li,
ul.icon-list li {
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3);
    padding-left: 0;
}

.expert-links li i,
ul.icon-list li i {
    color: var(--n4-red-300);
    margin-right: var(--space-4);
    min-width: 28px;
    text-align: center;
}

.expert-links a,
ul.icon-list li a {
    color: var(--n4-white);
    text-decoration: none;
}

.expert-links a:hover,
ul.icon-list li a:hover {
    color: var(--n4-red-300);
}

/* ==========================================================================
   13. Responsive overrides
   ========================================================================== */

@media (min-width: 769px) {
    .site-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        padding: var(--space-2) var(--gutter);
    }

    .site-nav nav {
        padding: 0;
        flex: 1 1 auto;
    }
}

@media (min-width: 900px) {
    .protocol-progress-bar {
        display: block;
    }

    .protocol-timeline-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1024px) {
    .articles-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    }
}

@media (max-width: 768px) {
    .site-nav nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 0 var(--gutter) var(--space-4);
        gap: var(--space-1);
    }

    .site-nav.nav-open nav {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }

    nav a,
    body nav a {
        width: 100%;
        text-align: center;
        padding: 12px 16px;
        border-radius: var(--radius-sm);
    }

    .header-content {
        align-items: center;
    }

    .header-logo img {
        height: 56px;
    }

    .hero-cta,
    .center-btns {
        flex-direction: column;
        align-items: center;
    }

    .center-btns .btn,
    .callout-actions .btn,
    .cta-card .cta-card-button,
    .pdf-download-btn {
        width: 100%;
        max-width: 360px;
    }

    .credibility-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-5);
    }

    .credibility-image {
        width: 160px;
    }

    .benefit-card {
        text-align: center;
    }

    .benefit-icon {
        margin-left: auto;
        margin-right: auto;
    }

    /* Wide tables scroll inside themselves, never the page */
    .reference-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .reference-table th,
    .reference-table td {
        padding: 10px 12px;
    }

    .table-of-contents {
        padding: var(--space-4) var(--space-5);
    }

    .faq-item {
        padding: var(--space-4) var(--space-5);
    }

    .screenshot-container img {
        max-width: 100%;
    }

    .project {
        flex-direction: column;
        align-items: flex-start;
    }

    .media-credibility .credibility-badge {
        flex-direction: column;
        text-align: center;
        padding: var(--space-5);
    }

    .badge-content { text-align: center; }
    .badge-header { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 540px) {
    .pdf-features-wrapper {
        grid-template-columns: 1fr;
        max-width: 320px;
    }
}

/* iPhone SE (1st gen, 320px) and other very small screens */
@media (max-width: 374px) {
    :root {
        --card-pad: 16px;
    }

    nav a,
    body nav a {
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .btn,
    .cta-card-button,
    .cta-button,
    .pdf-download-btn {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .download-btn {
        height: auto;
        min-height: 48px;
        padding: 8px 12px;
    }

    .app-badge-img {
        height: 42px;
    }

    .fact-card {
        min-height: 0;
    }

    .credibility-badge {
        letter-spacing: 0.08em;
    }
}

/* ==========================================================================
   14. Accessibility & motion
   ========================================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

.btn:focus-visible,
.cta-card-button:focus-visible,
.pdf-download-btn:focus-visible {
    border-radius: var(--radius-pill);
}

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