/* ============================================================
   i2o Retail — Global Design System
   Ported from Astro src/styles/global.css
   ============================================================ */

/* ── Inter (self-hosted variable font, 400/500/600) ───────── */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-latin.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── A11y: skip-link (WCAG 2.4.1 Bypass Blocks) ───────────── */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.25rem;
    background: #0f172a;
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0.75rem;
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ── page.php fallback layout (only when not Elementor-rendered) ── */
.page-main--default {
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem 1.25rem 6rem;
}
.page-main__header {
    margin-bottom: 2.5rem;
}
.page-main__title {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.page-main__content {
    font-size: 1.0625rem;
    line-height: 1.7;
}
.page-main__content p + p { margin-top: 1.25rem; }

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ── CSS Custom Properties (Dark mode = default) ───────────── */
:root {
    /* Navy */
    --navy-950: #0B1120;
    --navy-900: #111827;
    --navy-800: #1E293B;
    --navy-700: #334155;

    /* Brand */
    --brand:       #0465ae;
    --brand-light: #1fb8ec;

    /* CTA */
    --cta:       #3B82F6;
    --cta-hover: #2563EB;

    /* Semantic */
    --success: #10B981;
    --warning: #F59E0B;
    --danger:  #EF4444;

    /* Text — contrast-tuned for WCAG AA 4.5:1 on navy-900/950 backgrounds */
    --text-primary:   #FFFFFF;
    --text-secondary: #CBD5E1;   /* was #94A3B8, now 8.6:1 on navy-900 */
    --text-muted:     #94A3B8;   /* was #64748B (3.72:1 fail), now 6.92:1 pass */

    /* Surfaces */
    --bg-page:    var(--navy-950);
    --bg-section: var(--navy-900);
    --bg-card:    var(--navy-800);

    /* Glass */
    --glass-bg:         rgba(255, 255, 255, 0.05);
    --glass-hover-bg:   rgba(255, 255, 255, 0.08);
    --glass-border:     rgba(255, 255, 255, 0.08);
    --glass-strong-bg:  rgba(255, 255, 255, 0.08);
    --glass-strong-border: rgba(255, 255, 255, 0.12);

    /* Surface solid (nav) + glass */
    --surface-solid:     rgba(11, 17, 32, 0.97);
    --surface-glass:     rgba(255, 255, 255, 0.04);

    /* Border */
    --border-subtle: rgba(255, 255, 255, 0.08);

    /* Report palette */
    --report-bg:         #031c2d;
    --report-bg-alt:     #071e30;
    --report-bg-deep:    #0a1e30;
    --report-bg-accent:  #0d2240;

    /* RGB channel values for inline rgba() usage */
    --brand-light-rgb:   31, 184, 236;   /* #1fb8ec */
    --navy-950-rgb:      11, 17, 32;     /* #0B1120 */
    --cta-rgb:           59, 130, 246;   /* #3B82F6 */

    /* --color-* aliases used by page-rmri.php inline styles */
    --color-report-bg:       var(--report-bg);
    --color-report-bg-alt:   var(--report-bg-alt);
    --color-navy-900:        var(--navy-900);
    --color-navy-950:        var(--navy-950);
    --color-surface-solid:   var(--surface-solid);
    --color-overlay:         255, 255, 255;
    --color-text-primary:    var(--text-primary);
    --color-text-muted:      var(--text-muted);
}

/* ── Light Mode ────────────────────────────────────────────── */
html.light {
    --navy-950: #FFFFFF;
    --navy-900: #F1F5F9;
    --navy-800: #E2E8F0;
    --navy-700: #CBD5E1;

    --text-primary:   #0F172A;
    --text-secondary: #334155;   /* was #475569, now 9.4:1 on f1f5f9 */
    --text-muted:     #475569;   /* was #94A3B8 (2.34:1 fail), now 6.92:1 pass */

    --bg-page:    #ffffff;
    --bg-section: #f8fafc;
    --bg-card:    #f1f5f9;

    --glass-bg:         rgba(0, 0, 0, 0.03);
    --glass-hover-bg:   rgba(0, 0, 0, 0.05);
    --glass-border:     rgba(0, 0, 0, 0.08);
    --glass-strong-bg:  rgba(0, 0, 0, 0.05);
    --glass-strong-border: rgba(0, 0, 0, 0.1);

    --surface-glass:     rgba(0, 0, 0, 0.03);
    --surface-solid:     rgba(255, 255, 255, 0.97);
    --border-subtle:     rgba(0, 0, 0, 0.08);

    --report-bg:        #f0f7ff;
    --report-bg-alt:    #f5f8ff;
    --report-bg-deep:   #f8fafc;
    --report-bg-accent: #e8f0fa;

    /* --color-* aliases (light mode overrides) */
    --color-overlay:         0, 0, 0;
}

/* Logo swap: dark mode default (logo-light hidden), light mode swaps */
.logo-light { display: none; }
html.light .logo-dark  { display: none !important; }
html.light .logo-light { display: block !important; }

/* Theme toggle icon swap */
.theme-icon-moon { display: none; }
html.light .theme-icon-sun  { display: none !important; }
html.light .theme-icon-moon { display: block !important; }

/* ── Base Reset & Box Sizing ───────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    background-color: var(--navy-950);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }

::selection {
    background-color: var(--brand);
    color: white;
}

:focus-visible {
    outline: 2px solid var(--cta);
    outline-offset: 2px;
}

/* ── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    word-break: break-word;
    overflow-wrap: break-word;
    text-wrap: balance;
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.875rem); }
h4 { font-size: clamp(1.1rem, 1.5vw, 1.375rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

/* Laptop viewports (≤1599w or ≤860h) — softer h1/h2 max to prevent
   oversized section headings on 1280/1440 laptop screens. */
@media (max-width: 1599px), (max-height: 860px) {
    h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
    h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
}

p { line-height: 1.7; }

/* ── Utility Classes ───────────────────────────────────────── */

/* Glass morphism */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}
.glass:hover {
    background: var(--glass-hover-bg);
}
.glass-strong {
    background: var(--glass-strong-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-strong-border);
}

/* Buttons */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.75rem;
    color: #fff;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 44px;
    background: linear-gradient(135deg, #3B82F6 0%, #60a5fa 50%, #3B82F6 100%);
    background-size: 200% 200%;
    background-position: 0% 0%;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: none;
    pointer-events: none;
}
@media (min-width: 640px) {
    .btn-primary {
        padding: 0.75rem 2rem;
        font-size: 0.9375rem;
    }
}
.btn-primary:hover {
    background-position: 100% 100%;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45), 0 0 40px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(255,255,255,0.15);
    transform: translateY(-1px) scale(1.02);
}
.btn-primary:hover::before {
    left: 100%;
    transition: left 0.6s ease;
}
.btn-primary:active {
    transform: scale(0.98);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    cursor: pointer;
    min-height: 44px;
    transition: all 0.2s ease;
}
@media (min-width: 640px) {
    .btn-secondary {
        padding: 0.75rem 2rem;
        font-size: 0.9375rem;
    }
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px) scale(1.02);
}
.btn-secondary:active {
    transform: scale(0.98);
}
html.light .btn-secondary {
    border-color: rgba(0, 0, 0, 0.2);
}
html.light .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.3);
}

/* Ghost button — text-only, underline on hover */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--brand-light, #1fb8ec);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.btn-ghost:hover {
    color: var(--brand-lighter, #4dc8ef);
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: translateY(-1px);
}
.btn-ghost:active { transform: scale(0.98); }
html.light .btn-ghost { color: var(--brand-dark, #0d6e8c); }
html.light .btn-ghost:hover { color: var(--brand, #1287b0); }

/* Section padding */
.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
@media (min-width: 640px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
@media (min-width: 1024px) {
    .section-padding {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

/* Container */
.i2o-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 640px) {
    .i2o-container { padding-left: 2rem; padding-right: 2rem; }
}

/* Safe area padding for notched phones */
.pt-safe {
    padding-top: max(1.5rem, env(safe-area-inset-top));
}
.pb-safe {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* Eyebrow label */
.text-eyebrow {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--brand-light);
}
html.light .text-eyebrow { color: #0E7490; }  /* was #1fb8ec (2.26:1 fail), now 5.36:1 pass */
html.light .persona-card__label { color: #0E7490; }  /* #1fb8ec fails on light glass bg (~2.5:1); #0E7490 = 5.36:1 */
html.light .persona-card__link,
html.light .persona-card__btn { color: #0E7490; }  /* same fix — #1fb8ec ~2.5:1 on light bg */
/* Testimonial avatar — moved out of inline style for proper contrast. */
.testimonial-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: #0A1628;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7DD3FC;   /* cyan-300 — 7.1:1 on #0A1628 */
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}
html.light .testimonial-avatar { color: #0E7490; background: rgba(14, 116, 144, 0.12); }  /* teal on light = 5.36:1 */

/* Mobile scroll-affordance for comparison tables.
   • Right-edge chevron badge with pulse + slide animation = unambiguous
     "swipe here" signal.
   • One-shot table nudge at 1s demonstrates scrollability physically.
   • Both hide once user reaches scroll-end (class set by JS).
   Desktop: hint + fade hidden (plenty of width, no scroll needed). */
.comparison-table-wrap {
    position: relative;
}
.comparison-scroll-hint {
    display: none;
}
@media (max-width: 639px) {
    .comparison-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 0.5rem;
        transform: translateY(-50%);
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: rgba(31,184,236,0.9);
        color: #0A1628;
        pointer-events: none;
        z-index: 2;
        box-shadow: 0 0 0 4px rgba(31,184,236,0.18), 0 6px 18px -6px rgba(31,184,236,0.6);
        animation: comparison-hint-pulse 1.5s ease-in-out infinite;
        transition: opacity 0.25s ease;
    }
    .comparison-scroll-hint svg {
        width: 1rem;
        height: 1rem;
    }
    .comparison-table-wrap.is-scroll-end .comparison-scroll-hint {
        opacity: 0;
    }
    .comparison-scroll {
        animation: comparison-nudge 1.6s ease-out 1s 1;
    }
    /* Tighten table cell horizontal padding so more columns fit in
       the narrow viewport — right-side content peeks without needing
       a big scroll distance. */
    .comparison-scroll table th,
    .comparison-scroll table td {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .comparison-scroll table {
        min-width: 360px !important;
    }
}
@keyframes comparison-hint-pulse {
    0%, 100% { transform: translate(0, -50%); }
    50%      { transform: translate(-6px, -50%); }
}
@keyframes comparison-nudge {
    0%   { transform: translateX(0); }
    30%  { transform: translateX(-24px); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .comparison-scroll { animation: none !important; }
    .comparison-scroll-hint { animation: none !important; }
}

/* ── Comparison Table — structure + heading + zebra + hover ───── */

/* Wrapper + scroll base (was inline) */
.comparison-table-wrap {
    border-radius: 1rem;
    overflow: hidden;
}
.comparison-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.comparison-tbl {
    width: 100%;
    text-align: left;
    min-width: 480px;
    border-collapse: collapse;
}

/* Header cells base */
.comparison-tbl thead tr {
    border-bottom: 1px solid var(--border-subtle);
}
.cmp-th {
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-align: left;
}
.cmp-th:not(.cmp-th--col-0) { text-align: center; }

/* Body rows base */
.comparison-row {
    transition: background-color 0.2s ease;
}
.comparison-row:not(:last-child) {
    border-bottom: 1px solid var(--border-subtle);
}
.comparison-row.is-highlight {
    background: rgba(var(--cta-rgb), 0.05);
}

/* Body cells base */
.cmp-td {
    padding: 0.875rem 1.5rem;
    font-size: 0.875rem;
}
.cmp-td.cmp-td--col-0 {
    color: var(--text-secondary);
    font-weight: 500;
}
.cmp-td:not(.cmp-td--col-0) { text-align: center; }
.cmp-td:not(.cmp-td--col-0) .cmp-text { color: var(--text-secondary); }

/* Icons */
.cmp-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 auto;
    display: block;
}
.cmp-icon--yes { color: var(--success); }
.cmp-icon--no { color: rgba(239, 68, 68, 0.6); }

/* Enhancements below */

/* Headers = real heading (Clash Display 18px / 600 / tight) */
.comparison-scroll table thead th.cmp-th {
    font-family: 'Clash Display', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.25rem !important;
    white-space: normal !important;
}

/* Zebra stripes */
.comparison-scroll table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.025);
}
html.light .comparison-scroll table tbody tr:nth-child(odd) {
    background: rgba(10, 22, 40, 0.03);
}

/* Row hover — subtle sweep + label shift */
.comparison-scroll table tbody tr {
    transition: background-color 0.25s ease;
}
.comparison-scroll table tbody tr:hover {
    background: rgba(var(--brand-light-rgb), 0.06) !important;
}
.comparison-scroll table tbody tr td.cmp-td--col-0 {
    transition: padding 0.25s ease, color 0.25s ease;
}
.comparison-scroll table tbody tr:hover td.cmp-td--col-0 {
    color: var(--brand-light) !important;
    padding-left: 1.75rem;
}

html.light .comparison-scroll table tbody tr:hover {
    background: rgba(var(--cta-rgb), 0.05) !important;
}
html.light .comparison-scroll table tbody tr:hover td.cmp-td--col-0 {
    color: var(--cta) !important;
}

@media (prefers-reduced-motion: reduce) {
    .comparison-scroll table tbody tr,
    .comparison-scroll table tbody tr td.cmp-td--col-0 {
        transition: none;
    }
}


/* Mobile compression — testimonial card hogs viewport height because
   quote text floor is 1.125rem with line-height 1.7 + left-padding 2rem.
   Cut font, line-height, padding so the quote reads as a normal
   paragraph not a wall of italic. */
@media (max-width: 639px) {
    .testimonial-card { padding: 1.25rem !important; border-radius: 0.75rem !important; }
    .testimonial-card > svg {
        top: 1rem !important;
        left: 1rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    .testimonial-quote-text {
        font-size: 1rem !important;
        line-height: 1.55 !important;
        padding-left: 0 !important;
        margin-bottom: 1.25rem !important;
        margin-top: 1.25rem !important;
    }
    .testimonial-cite { padding-left: 0 !important; gap: 0.75rem !important; }
    .testimonial-avatar { width: 2.5rem; height: 2.5rem; font-size: 0.9375rem; }
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(to right, var(--brand-light), var(--cta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* CTA heading: white → white → faint cyan (matches Astro from-text-primary via-text-primary to-brand-light/90) */
.cta-heading {
    background: linear-gradient(to right, var(--text-primary) 0%, var(--text-primary) 60%, rgba(31,184,236,0.9) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero headline gradient: text-primary fading to 80% opacity */
.hero-headline-gradient {
    background: linear-gradient(to bottom, var(--text-primary), rgba(245, 247, 251, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-wrap: balance;
}
html.light .hero-headline-gradient {
    background: linear-gradient(to bottom, var(--text-primary), rgba(15, 23, 42, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero headline2 gradient: brand-light → text-primary/90 → cta */
.hero-headline2-gradient {
    background: linear-gradient(to right, var(--brand-light), rgba(245, 247, 251, 0.9), var(--cta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
html.light .hero-headline2-gradient {
    background: linear-gradient(to right, var(--brand-light), rgba(15, 23, 42, 0.9), var(--cta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero top/bottom gradient fade overlay */
.hero-fade-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to top, var(--navy-950), transparent, rgba(11, 17, 32, 0.8));
}
html.light .hero-fade-overlay {
    background: linear-gradient(to top, var(--navy-950), transparent, rgba(255, 255, 255, 0.8));
}

/* ── Site Header / Navigation ─────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
}
@media (min-width: 640px) {
    .nav-inner { padding: 0 1.5rem; }
}
@media (min-width: 1024px) {
    .nav-inner { padding: 0 2rem; }
}

.nav-logo { flex-shrink: 0; line-height: 1; }
.nav-logo img { height: 2.5rem; width: auto; display: block; line-height: 1; }
@media (min-width: 640px) {
    .nav-logo img { height: 2.75rem; }
}

/* Desktop nav */
.nav-desktop {
    display: none;
    align-items: center;
    gap: 0.25rem;
}
@media (min-width: 1024px) {
    .nav-desktop { display: flex; }
}

.nav-item { position: relative; }
.nav-item-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.nav-item-link:hover { color: var(--text-primary); }
.nav-chevron {
    width: 0.875rem;
    height: 0.875rem;
    transition: transform 0.2s ease;
}
.nav-item:hover .nav-chevron { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0.5rem);
    padding-top: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.nav-dropdown-inner {
    border-radius: 0.75rem;
    padding: 0.5rem 0;
    min-width: 280px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--glass-border);
    background: rgba(11, 17, 32, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
html.light .nav-dropdown-inner {
    background: rgba(255, 255, 255, 0.95);
}
.nav-dropdown-link {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 1.25rem;
    transition: background 0.15s ease;
}
.nav-dropdown-link:hover {
    background: var(--glass-bg);
}
.nav-dropdown-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}
.nav-dropdown-desc {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Nav actions (right side) */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.nav-actions .btn-primary,
.nav-actions .btn-secondary {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    min-height: auto;
}
.nav-hide-mobile { display: none; }
@media (min-width: 640px) {
    .nav-hide-mobile { display: inline-flex; }
}

/* Theme toggle button */
.theme-toggle-btn {
    display: none;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
@media (min-width: 640px) {
    .theme-toggle-btn { display: flex; }
}
.theme-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--glass-bg);
}
.theme-toggle-btn svg { width: 1.25rem; height: 1.25rem; }

/* Mobile hamburger */
.mobile-toggle-btn {
    display: flex;
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}
@media (min-width: 1024px) {
    .mobile-toggle-btn { display: none; }
}
.mobile-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--glass-bg);
}
.mobile-toggle-btn svg { width: 1.5rem; height: 1.5rem; }

/* Mobile menu overlay */
.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}
.mobile-overlay.is-open { display: flex; }
@media (min-width: 1024px) {
    .mobile-overlay { display: none !important; }
}
.mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-overlay.is-open .mobile-backdrop { opacity: 1; }

.mobile-panel {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 20rem;
    max-width: 85vw;
    background: var(--navy-900);
    border-left: 1px solid var(--border-subtle);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.mobile-overlay.is-open .mobile-panel { transform: translateX(0); }

.mobile-panel-inner { padding: 1.5rem; }

.mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.mobile-panel-header img { height: 1.75rem; width: auto; }

.mobile-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.mobile-panel-actions .theme-toggle-btn {
    display: flex;
}

.mobile-close-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0.5rem;
    transition: color 0.2s ease, background 0.2s ease;
}
.mobile-close-btn:hover {
    color: var(--text-primary);
    background: var(--glass-bg);
}
.mobile-close-btn svg { width: 1.5rem; height: 1.5rem; }

/* Mobile nav links */
.mobile-nav-group-label {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: left;
    background: none;
    border: none;
    cursor: default;
    font-family: inherit;
}
.mobile-nav-items { margin-bottom: 1rem; }
.mobile-nav-link {
    display: block;
    padding: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    border-radius: 0.5rem;
    transition: color 0.15s ease, background 0.15s ease;
}
.mobile-nav-link:hover {
    color: var(--text-primary);
    background: var(--glass-bg);
}
.mobile-nav-link.font-medium { font-weight: 500; }

.mobile-cta-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.mobile-cta-section .btn-primary,
.mobile-cta-section .btn-secondary {
    width: 100%;
    text-align: center;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}

/* Nav spacer */
.nav-spacer { height: 5rem; }

/* Nav link underline animation */
.nav-link {
    position: relative;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
    text-decoration: none;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--brand-light);
    transition: width 0.3s ease;
}
.nav-link:hover {
    color: var(--text-primary);
}
.nav-link:hover::after {
    width: 100%;
}

/* ── Theme Transition (matches Astro html.theme-transitioning) ──
 * Add transform + opacity to the allowlist so per-element micro-interactions
 * (e.g. .hs-modal-close rotate-on-hover) keep working during/after a theme
 * toggle. !important kept so theme-color crossfade wins over any per-element
 * transition for color-only properties. */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease,
                border-color 0.3s ease, box-shadow 0.3s ease,
                transform 0.25s ease, opacity 0.25s ease !important;
}

/* ── Marquee ───────────────────────────────────────────────── */
/* marquee-container: with fade edges (matches Astro .marquee-container) */
.marquee-container,
.marquee-outer {
    overflow: hidden;
    width: 100%;
}
.marquee-container {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 3rem;
    animation: marquee 40s linear infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}
@media (min-width: 640px) {
    .marquee-track { animation-duration: 30s; }
}
.marquee-logo {
    height: 3.5rem;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 0.75rem;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}
.marquee-logo:hover {
    opacity: 1;
}
@media (min-width: 640px) {
    .marquee-logo { height: 4.5rem; }
}
html.light .marquee-logo {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0.75;
}
html.light .marquee-logo:hover {
    opacity: 1;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Forms ─────────────────────────────────────────────────── */
.form-input,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
}
.form-input:focus,
.form-select:focus {
    border-color: var(--brand-light);
    background: var(--glass-hover-bg);
}
.form-input::placeholder {
    color: var(--text-muted);
}
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* ── Prose (Blog & Guide articles) ────────────────────────── */
.prose-guide {
    color: var(--text-secondary);
    font-size: 1.0625rem;
    line-height: 1.8;
    max-width: 72ch;
}
.prose-guide h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    color: var(--text-primary);
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
    margin-bottom: 1rem;
    /* Anchor-jump offset past sticky header (~6rem desktop, ~5rem mobile). */
    scroll-margin-top: 6rem; /* 5rem nav + 1rem breathing room */
}
.prose-guide h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}
.prose-guide h3 {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    color: var(--text-primary);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    scroll-margin-top: 6rem; /* 5rem nav + 1rem breathing room */
}
.prose-guide p,
.prose-guide ul,
.prose-guide ol {
    margin-bottom: 1.25rem;
}
.prose-guide ul,
.prose-guide ol {
    padding-left: 1.5rem;
}
.prose-guide li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}
.prose-guide ul li { list-style-type: disc; }
.prose-guide ol li { list-style-type: decimal; }
/* Exclude mobile TOC list from prose-guide bullet inheritance. */
.prose-guide .guide-mobile-toc-list,
.prose-guide .guide-mobile-toc-list li {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.prose-guide a {
    color: var(--brand-light);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.prose-guide a:hover {
    color: var(--brand);
}
html.light .prose-guide a { color: #0E7490; }
html.light .prose-guide a:hover { color: #155E75; }
.prose-guide blockquote {
    border-left: 3px solid var(--brand-light);
    padding: 1rem 1.5rem;
    background: var(--glass-bg);
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 2rem 0;
    color: var(--text-primary);
    font-style: italic;
}
.prose-guide strong { color: var(--text-primary); font-weight: 600; }
.prose-guide code {
    background: var(--navy-800);
    padding: 0.1em 0.4em;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.prose-guide pre {
    background: var(--navy-800);
    padding: 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}
.prose-guide pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

/* ── Scroll Progress Bar ───────────────────────────────────── */
.guide-progress-track {
    position: fixed;
    top: 5rem;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 40;
    pointer-events: none;
}
.guide-progress-bar {
    height: 100%;
    background: var(--brand-light);
    transform-origin: left;
    transform: scaleX(0);
}

/* ── Guide Page Layout ─────────────────────────────────────── */
.guide-main {
    position: relative;
}
.guide-hero-section {
    padding-top: 8rem;
    padding-bottom: 3rem;
}
.guide-body-section {
    padding-bottom: 6rem;
}
.guide-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.guide-hero-offset {
    max-width: 48rem;
}
.guide-eyebrow {
    margin-bottom: 1rem;
}
.guide-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}
.guide-excerpt {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.guide-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.guide-meta-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}
.guide-layout {
    display: flex;
    flex-direction: column;
}
.guide-sidebar {
    display: none;
}
.guide-content {
    max-width: 48rem;
}
.guide-toc-nav {
    position: sticky;
    top: 7rem;
}
.guide-toc-inner {
    background: var(--glass-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
}
.guide-toc-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 1rem;
}
.guide-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
}
.guide-toc-link {
    display: block;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-left: 2px solid transparent;
}
.guide-toc-link:hover {
    color: var(--text-secondary);
}
.guide-toc-link.is-active {
    color: var(--brand-light);
    border-left-color: var(--brand-light);
}
html.light .guide-toc-link.is-active {
    color: #0E7490;
    border-left-color: #0E7490;
}
.guide-toc-link--sub {
    padding-left: 1.75rem;
}
.guide-mobile-toc {
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    /* Stick under site header while scrolling on mobile/tablet.
       Nav height = 5rem. Disabled at >=1024px via display:none rule below. */
    position: sticky;
    top: 5rem;
    z-index: 20;
    background: var(--navy-950);
}
.guide-mobile-toc-summary {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.guide-mobile-toc-icon {
    color: var(--brand-light);
    flex-shrink: 0;
}
.guide-mobile-toc-body {
    padding: 0 1.25rem 1rem;
}
.guide-mobile-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-top: 1px solid var(--border-subtle);
    padding-top: 0.75rem;
    list-style: none;
}
@media (min-width: 640px) {
    .guide-hero-section { padding-top: 10rem; padding-bottom: 4rem; }
    .guide-body-section { padding-bottom: 8rem; }
}
@media (min-width: 1024px) {
    .guide-hero-section { padding-top: 10rem; padding-bottom: 4rem; }
    .guide-layout {
        flex-direction: row;
        gap: 3rem;
    }
    .guide-sidebar {
        display: block;
        width: 25%;
        flex-shrink: 0;
        align-self: flex-start;
        position: sticky;
        top: 6rem;
    }
    .guide-content {
        flex: 1;
        min-width: 0;
        max-width: none;
    }
    .guide-hero-offset {
        margin-left: calc(25% + 1.5rem);
    }
    .guide-mobile-toc {
        display: none;
    }
}

/* ── Password Gate ─────────────────────────────────────────── */
.password-gate-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--navy-950);
}
.password-gate-inner {
    width: 100%;
    max-width: 460px;
    border-radius: 1.25rem;
    padding: 2.5rem;
    text-align: center;
}
.password-gate-logo { margin-bottom: 1.5rem; display: flex; justify-content: center; }
.password-gate-title {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.password-gate-brand {
    color: var(--brand-light);
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.password-gate-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.password-gate-form { text-align: left; }
.password-gate-footer {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.password-gate-logo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.audit-logo-divider { color: var(--text-muted); font-size: 1.25rem; }

/* ── Report Container ──────────────────────────────────────── */
.report-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ── HubSpot Modal Override ─────────────────────────────────────
   HubSpot v2 embed injects inline styles + variable class names
   (hsForm_<guid>). We target the container root so selectors always
   match regardless of form GUID. !important required to beat
   HubSpot's inline style attributes. */

#hubspot-modal #hubspot-form-container fieldset,
#hubspot-modal #hubspot-form-container form {
    max-width: 100% !important;
    font-family: 'Inter', sans-serif !important;
}
#hubspot-modal #hubspot-form-container .hs-form-field {
    margin-bottom: 0.9rem !important;
}

/* Inputs, textareas, selects — match by .hs-input (HubSpot always adds) +
   type fallback so we catch every field variant. */
#hubspot-modal #hubspot-form-container input.hs-input,
#hubspot-modal #hubspot-form-container select.hs-input,
#hubspot-modal #hubspot-form-container textarea.hs-input,
#hubspot-modal #hubspot-form-container input[type="text"],
#hubspot-modal #hubspot-form-container input[type="email"],
#hubspot-modal #hubspot-form-container input[type="tel"],
#hubspot-modal #hubspot-form-container input[type="number"],
#hubspot-modal #hubspot-form-container input[type="url"],
#hubspot-modal #hubspot-form-container input[type="password"],
#hubspot-modal #hubspot-form-container textarea,
#hubspot-modal #hubspot-form-container select {
    display: block !important;
    width: 100% !important;
    padding: 0.7rem 0.95rem !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 0.6rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #F1F5F9 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}
#hubspot-modal #hubspot-form-container input::placeholder,
#hubspot-modal #hubspot-form-container textarea::placeholder {
    color: rgba(203, 213, 225, 0.55) !important;
    opacity: 1 !important;
}
#hubspot-modal #hubspot-form-container input:focus,
#hubspot-modal #hubspot-form-container textarea:focus,
#hubspot-modal #hubspot-form-container select:focus {
    outline: none !important;
    border-color: #1FB8EC !important;
    background: rgba(31, 184, 236, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(31, 184, 236, 0.22) !important;
}
/* Chrome autofill override */
#hubspot-modal #hubspot-form-container input:-webkit-autofill,
#hubspot-modal #hubspot-form-container input:-webkit-autofill:focus {
    -webkit-text-fill-color: #F1F5F9 !important;
    -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, 0.95) inset !important;
    caret-color: #F1F5F9 !important;
}

/* Light mode inputs */
html.light #hubspot-modal #hubspot-form-container input.hs-input,
html.light #hubspot-modal #hubspot-form-container select.hs-input,
html.light #hubspot-modal #hubspot-form-container textarea.hs-input,
html.light #hubspot-modal #hubspot-form-container input[type="text"],
html.light #hubspot-modal #hubspot-form-container input[type="email"],
html.light #hubspot-modal #hubspot-form-container input[type="tel"],
html.light #hubspot-modal #hubspot-form-container input[type="number"],
html.light #hubspot-modal #hubspot-form-container input[type="url"],
html.light #hubspot-modal #hubspot-form-container input[type="password"],
html.light #hubspot-modal #hubspot-form-container textarea,
html.light #hubspot-modal #hubspot-form-container select {
    background: #ffffff !important;
    border: 1px solid rgba(14, 116, 144, 0.22) !important;
    color: #0F172A !important;
}
html.light #hubspot-modal #hubspot-form-container input:focus,
html.light #hubspot-modal #hubspot-form-container textarea:focus,
html.light #hubspot-modal #hubspot-form-container select:focus {
    border-color: #0E7490 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.22) !important;
}
html.light #hubspot-modal #hubspot-form-container input::placeholder,
html.light #hubspot-modal #hubspot-form-container textarea::placeholder {
    color: #94A3B8 !important;
}
html.light #hubspot-modal #hubspot-form-container input:-webkit-autofill,
html.light #hubspot-modal #hubspot-form-container input:-webkit-autofill:focus {
    -webkit-text-fill-color: #0F172A !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    caret-color: #0F172A !important;
}

/* Labels — catch both <label> and span.hs-form-required */
#hubspot-modal #hubspot-form-container label,
#hubspot-modal #hubspot-form-container .hs-form-field > label,
#hubspot-modal #hubspot-form-container .hs-field-desc {
    display: block !important;
    color: #CBD5E1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.4 !important;
}
#hubspot-modal #hubspot-form-container label .hs-form-required {
    color: #ef4444 !important;
    margin-left: 0.2rem !important;
}
html.light #hubspot-modal #hubspot-form-container label,
html.light #hubspot-modal #hubspot-form-container .hs-form-field > label,
html.light #hubspot-modal #hubspot-form-container .hs-field-desc {
    color: #334155 !important;
}

/* Submit button — full .btn-primary parity */
#hubspot-modal #hubspot-form-container .hs-submit,
#hubspot-modal #hubspot-form-container .actions {
    margin-top: 1rem !important;
}
#hubspot-modal #hubspot-form-container input[type="submit"],
#hubspot-modal #hubspot-form-container button[type="submit"],
#hubspot-modal #hubspot-form-container .hs-button,
#hubspot-modal #hubspot-form-container .hs-button.primary,
#hubspot-modal #hubspot-form-container .hs-submit .actions input,
#hubspot-modal #hubspot-form-container .hs-submit .hs-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.9rem 1.75rem !important;
    background: linear-gradient(135deg, #3B82F6 0%, #60a5fa 50%, #3B82F6 100%) !important;
    background-size: 200% 200% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3), 0 0 20px rgba(59, 130, 246, 0.15) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    text-shadow: none !important;
}
#hubspot-modal #hubspot-form-container input[type="submit"]:hover,
#hubspot-modal #hubspot-form-container button[type="submit"]:hover,
#hubspot-modal #hubspot-form-container .hs-button:hover {
    background-position: 100% 100% !important;
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45), 0 0 40px rgba(59, 130, 246, 0.2) !important;
    color: #ffffff !important;
}
#hubspot-modal #hubspot-form-container input[type="submit"]:active,
#hubspot-modal #hubspot-form-container button[type="submit"]:active,
#hubspot-modal #hubspot-form-container .hs-button:active {
    transform: scale(0.98) !important;
}
/* Light mode submit keeps same gradient — brand stays consistent */

/* Checkboxes, radios, legal consent */
#hubspot-modal #hubspot-form-container input[type="checkbox"],
#hubspot-modal #hubspot-form-container input[type="radio"] {
    width: 1rem !important;
    height: 1rem !important;
    margin-right: 0.5rem !important;
    accent-color: #1FB8EC;
    vertical-align: middle;
}
#hubspot-modal #hubspot-form-container .hs-form-booleancheckbox label,
#hubspot-modal #hubspot-form-container .legal-consent-container,
#hubspot-modal #hubspot-form-container .legal-consent-container p,
#hubspot-modal #hubspot-form-container .hs-richtext,
#hubspot-modal #hubspot-form-container .hs-richtext p {
    color: #94A3B8 !important;
    font-size: 0.75rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}
html.light #hubspot-modal #hubspot-form-container .legal-consent-container,
html.light #hubspot-modal #hubspot-form-container .legal-consent-container p,
html.light #hubspot-modal #hubspot-form-container .hs-richtext,
html.light #hubspot-modal #hubspot-form-container .hs-richtext p,
html.light #hubspot-modal #hubspot-form-container .hs-form-booleancheckbox label {
    color: #475569 !important;
}

/* Error messages */
#hubspot-modal #hubspot-form-container .hs-error-msgs,
#hubspot-modal #hubspot-form-container .hs-error-msg {
    color: #ef4444 !important;
    font-size: 0.75rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0.3rem 0 0 !important;
}

/* Success state */
#hubspot-modal #hubspot-form-container .submitted-message {
    color: #F1F5F9 !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    padding: 1.5rem 0 !important;
    text-align: center;
}
html.light #hubspot-modal #hubspot-form-container .submitted-message { color: #0F172A !important; }

/* ── Scroll-reveal initial states — set before GSAP loads to prevent
   jump (element renders at y:0, GSAP sets y:20, causes visible shift).
   GSAP overwrites these during animation. no-gsap fallback shows content. */
[data-reveal],
[data-reveal-left],
[data-reveal-right] {
    opacity: 0;
    will-change: opacity, transform;
}
[data-stagger] > * {
    opacity: 0;
    will-change: opacity, transform;
}
.no-gsap [data-reveal],
.no-gsap [data-reveal-left],
.no-gsap [data-reveal-right],
.no-gsap [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Hero entrance elements — opacity:0 set inline, GSAP animates in.
   .gsap-ready is added by animations.js on init. Without it (CDN fail),
   CSS fallback makes content visible after a brief delay. ───────────── */
#hero-logo,
#hero-eyebrow,
#hero-headline,
#hero-subheadline,
#hero-ctas {
    transition: opacity 0s; /* GSAP overrides this; just ensures no flash */
}
#hero-headline,
#hero-subheadline {
    text-wrap: balance;
}
/* Fallback: if GSAP never fires, reveal after 1.5s via animation */
@keyframes hero-fallback-reveal {
    to { opacity: 1; }
}
.no-gsap #hero-logo,
.no-gsap #hero-eyebrow,
.no-gsap #hero-headline,
.no-gsap #hero-subheadline,
.no-gsap #hero-ctas {
    animation: hero-fallback-reveal 0.5s ease forwards 1.5s;
}

/* ── Hero Aurora Background ────────────────────────────────── */
.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.aurora-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation: auroraFadeIn 2s ease-out forwards;
}

.aurora-blob-1 {
    width: 60%;
    height: 50%;
    top: -15%;
    left: -10%;
    background: radial-gradient(circle, rgba(4, 101, 174, 0.3) 0%, transparent 70%);
    animation: auroraFadeIn 2s ease-out forwards, auroraDrift1 45s ease-in-out infinite;
}

.aurora-blob-2 {
    width: 50%;
    height: 45%;
    bottom: -10%;
    right: -10%;
    background: radial-gradient(circle, rgba(31, 184, 236, 0.2) 0%, transparent 70%);
    animation: auroraFadeIn 2s 0.3s ease-out forwards, auroraDrift2 55s ease-in-out infinite;
}

.aurora-blob-3 {
    width: 40%;
    height: 35%;
    top: 40%;
    left: 30%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    animation: auroraFadeIn 2s 0.6s ease-out forwards, auroraDrift3 65s ease-in-out infinite;
}

@keyframes auroraFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes auroraDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(8%, 5%) scale(1.05); }
    66%      { transform: translate(-5%, -3%) scale(0.95); }
}

@keyframes auroraDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-6%, -4%) scale(1.08); }
    66%      { transform: translate(4%, 6%) scale(0.97); }
}

@keyframes auroraDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(5%, -6%) scale(1.03); }
    66%      { transform: translate(-8%, 3%) scale(0.96); }
}

#particle-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: canvasFadeIn 2s 0.5s ease-out forwards;
}

@keyframes canvasFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-blob {
        animation: auroraFadeIn 1s ease-out forwards !important;
    }
    #particle-canvas {
        animation: canvasFadeIn 1s ease-out forwards !important;
    }
}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    background: var(--navy-900);
    border-top: 1px solid var(--border-subtle);
}
.footer-wrapper {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
@media (min-width: 640px) {
    .footer-wrapper { padding-top: 4rem; padding-bottom: 4rem; }
}
@media (min-width: 1024px) {
    .footer-wrapper { padding-top: 5rem; padding-bottom: 5rem; }
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
        gap: 3rem;
    }
}
.footer-brand {
    grid-column: span 2;
}
@media (min-width: 1024px) {
    .footer-brand { grid-column: span 1; }
}
.footer-brand-logo {
    height: 2rem;
    width: auto;
    margin-bottom: 1rem;
}
@media (min-width: 640px) {
    .footer-brand-logo { margin-bottom: 1.5rem; }
}
.footer-brand-desc {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.625;
    max-width: 24rem;
}
@media (min-width: 640px) {
    .footer-brand-desc { font-size: 0.875rem; }
}
.footer-col-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
@media (min-width: 640px) {
    .footer-col-title {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }
}
.footer-col-title--sub {
    margin-top: 1.75rem;
}
@media (min-width: 640px) {
    .footer-col-title--sub { margin-top: 2.25rem; }
}
.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
@media (min-width: 640px) {
    .footer-links { gap: 0.75rem; }
}
.footer-link {
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    display: inline-block;
    padding: 0.125rem 0;
}
@media (min-width: 640px) {
    .footer-link { font-size: 0.875rem; }
}
.footer-link:hover { color: var(--text-primary); }

.footer-bottom {
    border-top: 1px solid var(--border-subtle);
}
.footer-bottom-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 640px) {
    .footer-bottom-inner {
        flex-direction: row;
        padding: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .footer-bottom-inner { padding: 1.5rem 2rem; }
}
.footer-copyright {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.footer-social a,
.footer-social-link {
    color: var(--text-muted);
    transition: color 0.2s ease;
}
.footer-social a:hover,
.footer-social-link:hover { color: var(--text-primary); }
.footer-social svg { width: 1.25rem; height: 1.25rem; }

/* ── Parallax Orbs — will-change for GPU compositing ─────── */
[id^="parallax-orb"] {
    will-change: transform;
}
#hero-canvas {
    will-change: transform;
}

/* ── Hero logo — responsive size (matches Astro h-16 sm:h-20 md:h-24) ── */
.hero-logo-img {
    height: 4rem;
    width: auto;
    margin: 0 auto;
    filter: drop-shadow(0 0 40px rgba(31,184,236,0.3));
}
@media (min-width: 640px) {
    .hero-logo-img { height: 5rem; }
}
@media (min-width: 768px) {
    .hero-logo-img { height: 6rem; }
}

/* ── Hero fit-to-fold (all viewports) ─────────────────────
   Inline styles set the hero section's base layout. We augment:
   • min-height uses `svh` (small viewport) not `vh` — mobile URL
     bar isn't subtracted, so content always fits above fold.
   • If content taller than svh, section grows (no overflow scroll
     inside hero; the page scrolls naturally). */
.hero-section {
    min-height: 100svh;
}
@supports not (height: 100svh) {
    .hero-section { min-height: 100vh; }
}
/* Headline kerning fix — too-tight tracking caused glyphs to touch
   at 1280px+ ("YourMarketplaceRevenue" collapse). Loosened across
   all viewports; keeps optical tightness without word-gap loss. */
#hero-headline {
    letter-spacing: -0.01em !important;
    word-spacing: 0.05em;
}
#hero-headline .hero-headline-gradient,
#hero-headline > span:nth-child(2) {
    letter-spacing: -0.005em;
    text-wrap: balance;
}

/* Big desktop (≥861h + ≥1280w): force line break between headline2
   "Probably Several." and punchline "We Find and Fix Them All."
   Widen container + nowrap punchline so each stays 1 line. */
@media (min-width: 1280px) and (min-height: 861px) {
    #hero-content {
        max-width: 72rem !important;
    }
    #hero-headline > span:nth-child(2) .hero-headline2-gradient {
        display: block;
        white-space: nowrap;
    }
    #hero-headline > span:nth-child(2) > span:last-child {
        white-space: nowrap;
    }
}

/* Mobile-specific vertical compression — all primary hero elements
   fit above the fold on narrow viewports without hiding any. */
@media (max-width: 639px) {
    .hero-logo-img { height: 3rem; }
    #hero-logo { margin-bottom: 1rem !important; }
    #hero-eyebrow { margin-bottom: 1rem !important; font-size: 0.6875rem !important; }
    #hero-headline { margin-bottom: 1rem !important; }
    #hero-headline .hero-headline-gradient,
    #hero-headline > span:nth-child(2) { font-size: clamp(1.5rem, 7.5vw, 2.25rem) !important; }
    #hero-subheadline {
        margin-bottom: 1.25rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
    #hero-ctas { gap: 0.625rem !important; }
    #hero-ctas .btn-primary,
    #hero-ctas .btn-secondary {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem;
    }
}

/* Short-viewport fit-to-fold guard (≤860px tall, ≥640px wide).
   Targets laptops like 1280×800, 1440×821, 1440×900 where default
   72px desktop headline + spacing overflows 100svh. Compresses
   headline + vertical rhythm. */
@media (min-height: 600px) and (max-height: 860px) and (min-width: 640px) {
    .hero-logo-img { height: 3.25rem; }
    #hero-logo { margin-bottom: 1rem !important; }
    #hero-eyebrow { margin-bottom: 1rem !important; font-size: 0.6875rem !important; }
    #hero-headline { margin-bottom: 1.25rem !important; line-height: 1.05 !important; }
    #hero-headline .hero-headline-gradient,
    #hero-headline > span:nth-child(2) {
        font-size: clamp(2rem, 4vw, 3.25rem) !important;
    }
    #hero-subheadline {
        margin-bottom: 1.5rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
    }
    #hero-ctas .btn-primary,
    #hero-ctas .btn-secondary {
        padding: 0.75rem 1.75rem !important;
        font-size: 0.9375rem;
    }
}

/* ── HubSpot Modal (replaces inline styles) ──────────────── */
.hs-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}
.hs-modal-overlay.is-open {
    display: flex;
}
@media (min-width: 640px) {
    .hs-modal-overlay { padding: 1rem; }
}

.hs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 8, 20, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
html.light .hs-modal-backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.hs-modal-panel {
    position: relative;
    width: 100%;
    max-width: 32rem;
    border-radius: 1.25rem;
    padding: 1.5rem;
    z-index: 1;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.92) 0%, rgba(10, 22, 40, 0.95) 100%);
    border: 1px solid rgba(31, 184, 236, 0.18);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(31, 184, 236, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
@media (min-width: 640px) {
    .hs-modal-panel { padding: 2.25rem; }
}
html.light .hs-modal-panel {
    background: linear-gradient(160deg, #ffffff 0%, #F8FAFC 100%);
    border-color: rgba(14, 116, 144, 0.18);
    box-shadow:
        0 25px 50px -12px rgba(14, 116, 144, 0.25),
        0 0 60px rgba(14, 116, 144, 0.08);
}

.hs-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 0.6rem;
    transition: all 0.25s ease;
}
@media (min-width: 640px) {
    .hs-modal-close { top: 1rem; right: 1rem; }
}
.hs-modal-close:hover,
.hs-modal-close:focus-visible {
    color: var(--text-primary);
    background: rgba(31, 184, 236, 0.12);
    border-color: rgba(31, 184, 236, 0.4);
    outline: none;
    transform: rotate(90deg);
}
html.light .hs-modal-close {
    background: rgba(14, 116, 144, 0.06);
    border-color: rgba(14, 116, 144, 0.15);
    color: #475569;
}
html.light .hs-modal-close:hover,
html.light .hs-modal-close:focus-visible {
    color: #0F172A;
    background: rgba(14, 116, 144, 0.12);
    border-color: #0E7490;
}

.hs-modal-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    padding-right: 2.5rem;
    line-height: 1.2;
}
html.light .hs-modal-title { color: #0F172A; }

.hs-modal-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0 0 1.5rem;
}
@media (min-width: 640px) {
    .hs-modal-subtitle { margin-bottom: 1.75rem; }
}
html.light .hs-modal-subtitle { color: #475569; }

.hs-modal-form-wrap {
    min-height: 300px;
    border-radius: 0.75rem;
}

/* Native HubSpot form (no iframe — full CSS control via Submissions API v3) */
.i2o-hs-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
    width: 100%;
}
.i2o-hs-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.i2o-hs-field.is-full,
.i2o-hs-submit.is-full,
.i2o-hs-status.is-full {
    grid-column: 1 / -1;
}
.i2o-hs-req { color: #ef4444; }
.i2o-hs-field.has-error input,
.i2o-hs-field.has-error textarea,
.i2o-hs-field.has-error select {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.i2o-hs-field.has-error input:focus,
.i2o-hs-field.has-error textarea:focus,
.i2o-hs-field.has-error select:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.i2o-hs-field.has-error label { color: #ef4444; }
.i2o-hs-field-error {
    display: block;
    min-height: 0;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.3;
    color: #ef4444;
}
.i2o-hs-field-error:empty { display: none; }

/* Success state — replaces form on submit success */
.i2o-hs-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.875rem;
    padding: 2.25rem 1rem;
    min-height: 280px;
    animation: i2o-hs-success-in 0.35s ease both;
}
.i2o-hs-success-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.08);
}
.i2o-hs-success-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}
.i2o-hs-success-msg {
    margin: 0;
    max-width: 28ch;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-muted);
}
@keyframes i2o-hs-success-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
html.light .i2o-hs-success-icon {
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.06);
}
@media (max-width: 540px) {
    .i2o-hs-form { grid-template-columns: 1fr; }
}
.i2o-hs-field label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}
.i2o-hs-field input,
.i2o-hs-field textarea,
.i2o-hs-field select {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.i2o-hs-field input:hover,
.i2o-hs-field textarea:hover,
.i2o-hs-field select:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.i2o-hs-field input:focus,
.i2o-hs-field textarea:focus,
.i2o-hs-field select:focus {
    border-color: var(--accent, #6366f1);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.i2o-hs-field textarea {
    resize: vertical;
    min-height: 4.5rem;
}
.i2o-hs-submit {
    margin-top: 0.5rem;
    padding: 0.875rem 1.25rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--accent, #6366f1);
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.i2o-hs-submit:hover { background: var(--accent-hover, #4f46e5); }
.i2o-hs-submit:active { transform: translateY(1px); }
.i2o-hs-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.i2o-hs-status {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.i2o-hs-status.is-success { color: #10b981; }
.i2o-hs-status.is-error   { color: #ef4444; }

html.light .i2o-hs-field input,
html.light .i2o-hs-field textarea {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.14);
    color: var(--text);
}
html.light .i2o-hs-field input:hover,
html.light .i2o-hs-field textarea:hover {
    border-color: rgba(0, 0, 0, 0.28);
}
html.light .i2o-hs-field input:focus,
html.light .i2o-hs-field textarea:focus {
    background: #fff;
}

.hs-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 300px;
}
.hs-modal-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid rgba(31, 184, 236, 0.3);
    border-top-color: var(--brand-light);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Elementor Overrides ───────────────────────────────────── */
.elementor-section { transition: background-color 0.3s ease; }
.elementor-widget-heading .elementor-heading-title {
    font-family: 'Clash Display', sans-serif !important;
    line-height: 1.1 !important;
}
.e-con, .elementor-container { max-width: 1280px; }

/* Remove default WP / Elementor padding on body */
body.elementor-page { padding-top: 0 !important; }

/* ── Responsive Helpers ────────────────────────────────────── */
@media print {
    .no-print { display: none !important; }
    body { background: white; color: black; }
}

/* ── Page Main Wrapper ─────────────────────────────────────── */
.page-main {
    position: relative;
    overflow: hidden;
}

/* ── Parallax Orbs ─────────────────────────────────────────── */
.parallax-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}
.parallax-orb--brand {
    background: rgba(4,101,174,0.05);
}
.parallax-orb--cyan {
    background: rgba(31,184,236,0.05);
}
.parallax-orb--blue {
    background: rgba(59,130,246,0.05);
}
.parallax-orb--sm {
    width: 12rem;
    height: 12rem;
    filter: blur(40px);
}
.parallax-orb--md {
    width: 16rem;
    height: 16rem;
}
.parallax-orb--lg {
    width: 20rem;
    height: 20rem;
}

/* ── Why i2o Section Icons (w-6 h-6) ──────────────────────── */
.why-feature__svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-light);
}

/* ── Front Page: section header centred block ─────────────── */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}
.section-header h2 {
    max-width: 48rem;
    margin: 0 auto 1.5rem;
}
.section-header .section-desc {
    color: var(--text-secondary);
    font-size: 1.125rem;
    max-width: 42rem;
    margin: 0 auto;
}
.section-header .section-desc + .section-desc {
    margin-top: 0.75rem;
}

/* ── Front Page: Solutions + Persona + Why responsive grids ── */
#solutions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Home page: tighten the gap between Solutions and Personas specifically.
   Base .section-padding stays untouched (used sitewide). */
#solutions.section-padding { padding-bottom: 2rem; }
.home-personas.section-padding { padding-top: 2rem; }
@media (min-width: 640px) {
    #solutions.section-padding { padding-bottom: 3rem; }
    .home-personas.section-padding { padding-top: 3rem; }
}
@media (min-width: 1024px) {
    #solutions.section-padding { padding-bottom: 4rem; }
    .home-personas.section-padding { padding-top: 4rem; }
}
@media (min-width: 640px) {
    #solutions-grid { grid-template-columns: repeat(2, 1fr); }
}
#persona-routing,
#why-grid,
#case-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    #persona-routing { grid-template-columns: repeat(3, 1fr); }
    #why-grid        { grid-template-columns: repeat(3, 1fr); }
    #case-cards      { grid-template-columns: repeat(3, 1fr); }
}

/* ── Testimonial + logo bar (social proof section) ─────────── */
#testimonial,
#testimonial-section {
    max-width: 56rem;
    margin: 0 auto 5rem;
    padding: 0 1rem;
}
.logo-bar__tagline {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 2rem;
}

/* ── Case study card ────────────────────────────────────────── */
.case-card {
    border-radius: 1rem;
    padding: 1.5rem 2rem;
}
.case-card__label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.case-card__challenge {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}
.case-card__result {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
    margin-bottom: 0.75rem;
}
.case-card__stat {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.case-card__highlight {
    color: var(--brand-light);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.25rem;
}
html.light .case-card__highlight { color: #0E7490; }
html.light .case-card-impact     { color: #0E7490; }
.case-card__footnote {
    color: var(--text-muted);
    font-size: 0.75rem;   /* was 0.625rem (10px below readability floor) */
}

/* ── Why i2o feature item ───────────────────────────────────── */
.why-feature {
    text-align: center;
}
.why-feature__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(4, 101, 174, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 8px 24px rgba(31, 184, 236, 0.1);
}
.why-feature__svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-light);
}
.why-feature__title {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.why-feature__desc {
    color: var(--text-secondary);
    line-height: 1.625;
}

/* ── Persona card ───────────────────────────────────────────── */
.persona-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
}
/* Clickable cards — pointer cursor + hover lift */
.persona-card--clickable { cursor: pointer; }
.persona-card--clickable:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(31, 184, 236, 0.18);
    border-color: rgba(31, 184, 236, 0.35);
}
/* Featured weight (priority audiences: Brands, Legal+Compliance) — slightly darker bg + bold title. */
.persona-card--featured {
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.persona-card--featured:hover {
    background: rgba(0, 0, 0, 0.24);
}
.persona-card--featured .persona-card__title {
    font-family: 'Clash Display', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
html.light .persona-card--featured {
    background: rgba(14, 116, 144, 0.04);
    border-color: rgba(14, 116, 144, 0.18);
}

/* Regular weight (Agencies) — clearly lighter translucent bg + medium title. */
.persona-card:not(.persona-card--featured) {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.persona-card:not(.persona-card--featured):hover {
    background: rgba(255, 255, 255, 0.14);
}
.persona-card:not(.persona-card--featured) .persona-card__title {
    font-weight: 500;
}
html.light .persona-card:not(.persona-card--featured) {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(0, 0, 0, 0.06);
}
/* Stretched-link overlay (full-card click target) */
.persona-card__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 2;
    border-radius: inherit;
    padding: 0;
    /* Visually invisible but keyboard-focusable */
}
.persona-card__overlay:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: -2px;
}
.persona-card__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--brand-light);
    margin-bottom: 0.75rem;
    position: relative;  /* sit above overlay */
    z-index: 1;
}
.persona-card__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
}
.persona-card__list {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    flex-grow: 1;          /* push CTA to bottom — baseline align across cards */
    position: relative;
    z-index: 1;
}
.persona-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.persona-card__list li svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand-light);
    flex-shrink: 0;
    margin-top: 0.125rem;
}
.persona-card__link,
.persona-card__btn {
    color: var(--brand-light);
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-top: auto;     /* baseline lock at card bottom */
    position: relative;
    z-index: 1;
}
.persona-card__link svg,
.persona-card__btn svg {
    width: 1rem;
    height: 1rem;
}

/* ── Product Pages ──────────────────────────────────────────── */

/* Per-page parallax orb positioning (scoped via page class on <main>) */
.page-brand-protector .parallax-orb--brand { top: 30vh; left: -5rem; width: 16rem; height: 16rem; }
.page-brand-protector .parallax-orb--cyan  { top: 80vh; width: 20rem; height: 20rem; }
.page-brand-protector .parallax-orb--right { right: -8rem; }

.page-price-monitor .parallax-orb--brand { top: 30vh; right: -5rem; width: 16rem; height: 16rem; }
.page-price-monitor .parallax-orb--cyan  { top: 90vh; width: 20rem; height: 20rem; }

.page-content-protector .parallax-orb--brand { top: 40vh; left: -5rem; width: 18rem; height: 18rem; }
.page-content-protector .parallax-orb--cyan  { top: 100vh; width: 16rem; height: 16rem; }
.page-content-protector .parallax-orb--right { right: -6rem; }

.page-growth-accelerator .parallax-orb--brand { top: 25vh; right: -5rem; width: 18rem; height: 18rem; }
.page-growth-accelerator .parallax-orb--cyan  { top: 85vh; width: 16rem; height: 16rem; }

/* Shared offset modifier for product page orbs (price-monitor & growth-accelerator cyan) */
.parallax-orb--left { left: -8rem; }

/* ── Front Page orb positioning ─────────────────────────── */
#parallax-orb-1 { top: 30vh;  left: -5rem; }
#parallax-orb-2 { top: 70vh;  right: -8rem; }
#parallax-orb-3 { top: 120vh; left: 25%; }

/* ── Non-product page orb positioning ───────────────────── */
.page-case-studies .parallax-orb--brand { top: 30vh; left: -5rem; }
.page-case-studies .parallax-orb--cyan  { top: 90vh; right: -8rem; }

.page-about .parallax-orb--brand { top: 30vh; right: -5rem; }
.page-about .parallax-orb--cyan  { top: 90vh; left: -8rem; }

.page-contact .parallax-orb--brand { top: 30vh; left: -5rem; }
.page-contact .parallax-orb--cyan  { top: 60vh; right: -8rem; }

.page-testimonials .parallax-orb--brand { top: 30vh; right: -5rem; }
.page-testimonials .parallax-orb--cyan  { top: 80vh; left: -8rem; }

.page-agency-partnership .parallax-orb--brand { top: 30vh; right: -5rem; }
.page-agency-partnership .parallax-orb--cyan  { top: 90vh; left: -8rem; }

/* Platform preview */
/* Mobile base — all images stacked vertically regardless of count. */
.product-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
section:has(#platform-preview) {
    padding-bottom: 3rem;
    margin-top: -2rem;
}
@media (min-width: 640px) {
    section:has(#platform-preview) {
        padding-bottom: 4rem;
        margin-top: -3rem;
    }
}
@media (min-width: 768px) {
    section:has(#platform-preview) { padding-bottom: 6rem; }
}
.product-preview__card {
    border-radius: 1rem;
    padding: 0.375rem;
    width: 100%;
}

/* ── Desktop layouts (≥640px) ── */
@media (min-width: 640px) {
    .product-preview__card { padding: 0.5rem; }

    /* 1 image: single full-width card */
    .product-preview--1 .product-preview__card { width: 100%; }

    /* 2 images: overlapping back/front (rotated). Container = flex column,
     * grows to fit content; JS sets front-card margin-top for consistent
     * overlap across aspect ratios. */
    .product-preview--2 { display: flex; flex-direction: column; gap: 0; }
    .product-preview--2 .product-preview__card { width: 68%; }
    .product-preview--2 .product-preview__card--back {
        margin-left: 2%;
        transform: rotate(-1.5deg);
        z-index: 10;
    }
    .product-preview--2 .product-preview__card--back:hover { transform: rotate(0); }
    .product-preview--2 .product-preview__card--front {
        margin-left: auto;
        margin-right: 2%;
        margin-top: -8%;          /* JS overrides with proportional value */
        transform: rotate(1.5deg);
        z-index: 20;
    }
    .product-preview--2 .product-preview__card--front:hover { transform: rotate(0); }

    /* 3 images: top full-width, bottom two 50/50 grid. No overlap. */
    .product-preview--3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    .product-preview--3 .product-preview__card { width: 100%; }
    .product-preview--3 .product-preview__card--back  { grid-column: 1 / -1; }
    .product-preview--3 .product-preview__card--front { grid-column: 1; }
    .product-preview--3 .product-preview__card--third { grid-column: 2; }
}

/* Two-column layout */
.product-two-col {
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .product-two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}

/* Features grid */
.product-features-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .product-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .product-features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Feature card */
.product-feature-card {
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.3s ease;
}
.product-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(4,101,174,0.1);
    border-color: rgba(31,184,236,0.2) !important;
}
.product-feature-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(4,101,174,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(31,184,236,0.1);
}
.product-feature-card__svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-light);
}

/* Stats grid */
.product-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (min-width: 640px) {
    .product-stats-grid { gap: 1.5rem; }
}
@media (min-width: 1024px) {
    .product-stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Case Studies Page ──────────────────────────────────── */
.case-cards-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .case-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
.case-card {
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    transition: all 0.3s ease;
}
.case-card:hover {
    background: var(--glass-hover, rgba(255,255,255,0.06));
    border-color: rgba(31,184,236,0.1) !important;
}
.case-card__shield {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-light);
    flex-shrink: 0;
}
.case-category-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-light);
}
@media (min-width: 640px) {
    .page-case-studies section:first-of-type { padding-top: 10rem; padding-bottom: 3rem; }
    .case-card { padding: 2rem; }
}
.page-case-studies section[id]:not(:last-of-type) { padding-bottom: 5rem; }
@media (min-width: 640px) {
    .page-case-studies section[id]:not(:last-of-type) { padding-bottom: 7rem; }
}
.case-category-tab {
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
}
.case-category-tab:hover {
    color: var(--brand-light);
    border-color: rgba(31,184,236,0.2);
}
/* Active = section is current in viewport (set by case-studies-tabs.js).
   Applied to both original + floating-clone tabs in sync. */
.case-category-tab.is-active {
    color: var(--text-primary);
    background: linear-gradient(90deg, rgba(31,184,236,0.18), rgba(4,101,174,0.18));
    border-color: rgba(31,184,236,0.45);
    box-shadow: 0 0 0 1px rgba(31,184,236,0.35) inset, 0 4px 14px -6px rgba(31,184,236,0.35);
}

/* ── About Page ─────────────────────────────────────────── */
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (min-width: 640px) {
    .about-stats-grid { gap: 1.5rem; }
}
@media (min-width: 1024px) {
    .about-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Mission section */
.about-mission-wrap {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
.about-mission-p {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.about-mission-p:last-child {
    margin-bottom: 0;
}

/* Differentiators */
.about-differentiators-grid {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .about-differentiators-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}
.about-diff-card {
    text-align: center;
}
.about-diff-icon-wrap {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(4, 101, 174, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 4px 12px rgba(31, 184, 236, 0.1);
}
.about-diff-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-light);
}
.about-diff-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}
.about-diff-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* Partnership */
.about-partnership-grid {
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .about-partnership-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}
.about-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.about-benefits-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.about-check-wrap {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--green, #22c55e);
    margin-top: 0.125rem;
}
.about-check-icon {
    width: 1.25rem;
    height: 1.25rem;
}
.about-benefit-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}
.about-partner-card {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}
.about-partner-icon-wrap {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    background: rgba(4, 101, 174, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 12px rgba(31, 184, 236, 0.1);
}
.about-partner-icon {
    width: 2rem;
    height: 2rem;
    color: var(--brand-light);
}
.about-partner-name {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.about-partner-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.about-partner-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--brand-light);
    font-size: 0.875rem;
    font-weight: 500;
}
.about-partner-sep {
    opacity: 0.5;
}
.about-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .about-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .about-team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1280px) {
    .about-team-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Variant: Featured (3 cols, larger cards — leadership feel) ── */
.about-team-grid--featured {
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
}
@media (min-width: 640px)  { .about-team-grid--featured { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-team-grid--featured { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.about-team-grid--featured .team-photo-wrapper,
.about-team-grid--featured .about-team-placeholder {
    width: 10rem;
    height: 10rem;
}
.about-team-grid--featured .about-team-name { font-size: 1.125rem; font-weight: 600; }
.about-team-grid--featured .about-team-role { font-size: 0.95rem; }

/* ── Variant: Carousel (horizontal scroll-snap with arrow nav) ── */
.team-carousel-wrap {
    position: relative;
}
.about-team-grid--carousel {
    display: flex;
    grid-template-columns: none;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0.5rem 0 1rem;  /* zero horizontal padding so card math is exact */
    /* Hide scrollbar (still scrollable) */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.about-team-grid--carousel::-webkit-scrollbar { display: none; }

.about-team-grid--carousel .about-team-card {
    flex: 0 0 auto;
    width: 18rem;
    max-width: 85vw;
    scroll-snap-align: start;
    padding: 1.25rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.about-team-grid--carousel .team-photo-wrapper,
.about-team-grid--carousel .about-team-placeholder {
    width: 12rem;
    height: 12rem;
}
/* Tablet: 2 cards visible */
@media (min-width: 768px) {
    .about-team-grid--carousel .about-team-card { width: 18rem; }
    .about-team-grid--carousel .team-photo-wrapper,
    .about-team-grid--carousel .about-team-placeholder { width: 12rem; height: 12rem; }
}
/* Desktop: exactly 4 cards visible.
 * Each card width = (track viewport - 3 gaps) / 4.
 * Gap = 1.5rem. Use flex-basis instead of width so the card honors box-sizing.
 */
@media (min-width: 1280px) {
    .about-team-grid--carousel .about-team-card {
        flex: 0 0 calc((100% - 4.5rem) / 4);
        width: auto;
        max-width: none;
    }
    .about-team-grid--carousel .team-photo-wrapper,
    .about-team-grid--carousel .about-team-placeholder { width: 11rem; height: 11rem; }
}
html.light .about-team-grid--carousel .about-team-card {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Arrow buttons */
.team-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(11, 18, 32, 0.85);
    border: 1px solid rgba(31, 184, 236, 0.4);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
}
.team-carousel__arrow:hover {
    background: rgba(31, 184, 236, 0.85);
    border-color: rgba(31, 184, 236, 0.8);
    transform: translateY(-50%) scale(1.05);
}
.team-carousel__arrow:active { transform: translateY(-50%) scale(0.95); }
.team-carousel__arrow:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: 2px;
}
.team-carousel__arrow[aria-disabled="true"] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.team-carousel__arrow--prev { left: -0.5rem; }
.team-carousel__arrow--next { right: -0.5rem; }
@media (min-width: 768px) {
    .team-carousel__arrow { width: 3rem; height: 3rem; }
    .team-carousel__arrow--prev { left: -1.25rem; }
    .team-carousel__arrow--next { right: -1.25rem; }
}
html.light .team-carousel__arrow {
    background: rgba(255, 255, 255, 0.92);
    color: #0b3540;
    border-color: rgba(14, 116, 144, 0.3);
}

/* Pagination dots */
.team-carousel__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}
.team-carousel__dots:empty { display: none; }
.team-carousel__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, width .2s ease;
}
.team-carousel__dot:hover { background: rgba(255, 255, 255, 0.45); }
.team-carousel__dot[aria-current="true"] {
    background: var(--brand-light);
    width: 1.5rem;
    border-radius: 999px;
}
.team-carousel__dot:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: 2px;
}
html.light .team-carousel__dot { background: rgba(0, 0, 0, 0.18); }
html.light .team-carousel__dot:hover { background: rgba(0, 0, 0, 0.32); }
html.light .team-carousel__dot[aria-current="true"] { background: var(--brand-dark, #0E7490); }

/* ── Quotes Carousel — single static rounded box, text rotates inside ── */
.quotes-carousel-wrap {
    position: relative;
    padding: 2.5rem 3.5rem;          /* room for arrows inside the box */
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.quotes-carousel {
    display: flex;
    gap: 0;                          /* no gap — slides occupy full width */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.quotes-carousel::-webkit-scrollbar { display: none; }
.quote-slide {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    text-align: center;
}
.quote-slide__text {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.6;
    font-style: italic;
    color: var(--text-primary);
    max-width: 56rem;
    margin: 0 auto 1.5rem;
}
.quote-slide__author {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
}
.quote-slide__avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand, #1287b0), var(--brand-light, #1fb8ec));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}
.quote-slide__meta { text-align: left; }
.quote-slide__name { margin: 0; font-weight: 600; color: var(--text-primary); }
.quote-slide__role {
    margin: 0.125rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}
html.light .quotes-carousel-wrap {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.08);
}
/* Arrows sit inside the static box, vertically centered */
.quotes-carousel-wrap .team-carousel__arrow--prev { left: 0.75rem; }
.quotes-carousel-wrap .team-carousel__arrow--next { right: 0.75rem; }
/* Dots aligned below text inside the same box */
.quotes-carousel-wrap .team-carousel__dots { margin-top: 1.5rem; }
/* Logo bar below the carousel box */
.quotes-carousel-logos { margin-top: 2.5rem; text-align: center; }
.quotes-carousel-logos .logo-bar__tagline { margin-bottom: 1rem; }

.about-team-card {
    text-align: center;
}
.team-photo-wrapper {
    position: relative;
    width: 7rem;
    height: 7rem;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    overflow: hidden;
}
.about-team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-team-placeholder {
    width: 7rem;
    height: 7rem;
    margin: 0 auto 1rem;
    border-radius: 1rem;
    background: rgba(4, 101, 174, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-light);
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}
.about-team-name {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.125rem;
}
.about-team-role {
    color: var(--brand-light);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.375rem;
}
.about-team-bio {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-bottom: 0.375rem;
}
.about-team-fun {
    color: rgba(31, 184, 236, 0.9);  /* was 0.7, bumped for contrast */
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.5;
}
html.light .about-team-fun { color: #0E7490; }

/* ── Contact Page ───────────────────────────────────────── */
.contact-options-grid {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 4rem;
}
@media (min-width: 768px) {
    .contact-options-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-option-card {
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    color: var(--text-primary);
}
.contact-option-card .mk-card-title { color: var(--text-primary); }
.contact-option-card .mk-card-desc  { color: var(--text-secondary); }
.contact-option-card:hover {
    background: var(--glass-hover, rgba(255,255,255,0.06));
    border-color: rgba(31,184,236,0.2) !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(4,101,174,0.1);
}
.contact-option-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    background: rgba(4,101,174,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}
.contact-option-card:hover .contact-option-card__icon {
    background: rgba(4,101,174,0.2);
    box-shadow: 0 8px 24px rgba(31,184,236,0.2);
}
.contact-option-card__svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--brand-light);
}
.contact-option-card:hover h2 {
    color: var(--brand-light);
}
.contact-info-grid {
    display: grid;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .contact-info-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-info-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(4,101,174,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.contact-info-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-light);
}
.contact-hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
}
@media (min-width: 640px) {
    .contact-hero { padding-top: 10rem; padding-bottom: 5rem; }
}
.contact-hero-h1 {
    font-size: clamp(1.875rem, 4vw, 3rem);
}
.contact-linkedin-link {
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: color 0.3s ease;
    text-decoration: none;
}
.contact-linkedin-link:hover {
    color: var(--brand-light);
}

/* ── Testimonials Page ──────────────────────────────────── */
@media (min-width: 640px) {
    .page-testimonials section:first-of-type { padding-top: 10rem; padding-bottom: 5rem; }
    .page-testimonials section:nth-of-type(2) { padding-bottom: 8rem; }
    .page-testimonials section:nth-of-type(3) { padding-bottom: 8rem; }
}

/* ── Agency Partnership Page ────────────────────────────── */
.agency-two-col {
    display: grid;
    gap: 3rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .agency-two-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}
.agency-impact-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .agency-impact-grid { grid-template-columns: repeat(3, 1fr); }
}
.agency-impact-card {
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.3s ease;
}
.agency-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(4,101,174,0.1);
    border-color: rgba(31,184,236,0.2) !important;
}
.agency-impact-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(4,101,174,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(31,184,236,0.1);
}
.agency-impact-card__svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-light);
}
.agency-benefits-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 640px) {
    .agency-benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .agency-benefits-grid { grid-template-columns: repeat(3, 1fr); }
}
.agency-benefit-card {
    border-radius: 1rem;
    padding: 1.75rem;
    transition: all 0.3s ease;
}
.agency-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(4,101,174,0.1);
    border-color: rgba(31,184,236,0.2) !important;
}
.agency-benefit-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: rgba(4,101,174,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(31,184,236,0.1);
}
.agency-benefit-card__svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--brand-light);
}

/* ── Utility: section background variant ────────────────────── */
.section-bg-alt {
    background-color: var(--navy-900);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Utility: text colour helpers ───────────────────────────── */
.text-primary  { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }

/* ── RMRI Score Card Section (homepage) ─────────────────────── */
.rmri-scorecard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.rmri-heading {
    margin-bottom: 1.5rem;
}
.rmri-lead {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.rmri-body {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 2rem;
}
.rmri-inline-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(var(--brand-light-rgb), 0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}
.rmri-inline-link:hover {
    text-decoration-color: var(--brand-light);
}
@media (max-width: 768px) {
    .rmri-scorecard-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
.rmri-scorecard-grid > * {
    min-width: 0;
}


/* ─────────────────────────────────────────────────────────────
   LEGAL PAGES (Privacy Policy + Terms of Service)
   ───────────────────────────────────────────────────────────── */
.legal-page { position: relative; overflow: hidden; }
.legal-page__section { padding-top: 8rem; padding-bottom: 6rem; }
.legal-page__container { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.legal-page__title {
    font-family: "Clash Display", sans-serif;
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    margin-bottom: 1.5rem;
}
.legal-page__meta {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 3rem;
}
@media (min-width: 640px) {
    .legal-page__section { padding-top: 10rem; padding-bottom: 8rem; }
}



/* ─────────────────────────────────────────────────────────────
   MARKETING PAGES — shared section + layout primitives
   Used by testimonials, about, contact, service pages, etc.
   ───────────────────────────────────────────────────────────── */
.mk-section          { padding-top: 6rem; padding-bottom: 6rem; }
.mk-section--hero    { padding-top: 8rem; padding-bottom: 4rem; }
.mk-section--pb-6    { padding-bottom: 6rem; }
.mk-section--pb-4    { padding-bottom: 4rem; }
.mk-container       { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.mk-container--sm   { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.mk-center-narrow   { text-align: center; max-width: 42rem; margin: 0 auto; }
.mk-eyebrow-row     {
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(31,184,236,0.2);
}
.mk-heading {
    font-family: "Clash Display", sans-serif;
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}
.mk-lead {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
}
.mk-stack           { display: flex; flex-direction: column; gap: 2rem; }
.mk-eyebrow-sm {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 2rem;
}


.mk-container--md   { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.mk-card-title {
    font-family: "Clash Display", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.mk-card-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
}
.mk-icon--brand-light { color: var(--brand-light); }

/* Contact info rows + H3 */
.contact-info-row { display: flex; align-items: flex-start; gap: 1rem; }
.contact-info-h3 {
    font-family: "Clash Display", sans-serif;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.contact-info-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Contact hero H1 (no font-size — provided via contact-hero-h1 existing class) */
.contact-hero-h1 {
    font-family: "Clash Display", sans-serif;
    font-weight: 700;
    margin-bottom: 1.5rem;
}


/* Section bg variants */
.mk-section--navy900 { background: var(--navy-900); }

/* Card heading (agency, benefit, impact cards) */
.mk-card-heading {
    font-family: "Clash Display", sans-serif;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Body paragraph */
.mk-body {
    color: var(--text-secondary);
    line-height: 1.7;
}
.mk-body--sm {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
}

/* Small muted source line */
.mk-source-line {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 1rem;
}

/* Stack-gap-1 used for stat card vertical layout */
.mk-stack-gap-1 { display: grid; gap: 1rem; }

/* Narrow 42rem + 56rem containers */
.mk-container--narrow-42 { max-width: 42rem; margin: 0 auto; }
.mk-container--narrow-56 { max-width: 56rem; margin: 0 auto; }

/* Final radial CTA — reusable across service + agency pages */
.mk-cta-radial { position: relative; overflow: hidden; }
.mk-cta-radial__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.mk-cta-radial__glow--1 { background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(4,101,174,0.25), transparent); }
.mk-cta-radial__glow--2 { background: radial-gradient(ellipse 40% 60% at 80% 20%, rgba(31,184,236,0.12), transparent); }
.mk-cta-radial__glow--3 { background: radial-gradient(ellipse 30% 30% at 30% 70%, rgba(59,130,246,0.08), transparent); }
.mk-cta-radial__inner {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}
.mk-cta-radial__title { margin-bottom: 1.5rem; }
.mk-cta-radial__desc {
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    margin: 0 auto 2.5rem;
    max-width: 42rem;
}
.mk-cta-radial__btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.mk-cta-radial__btn {
    padding: 0.875rem 2rem;
    text-align: center;
}


/* Service page — product preview containers */
.mk-container--72 { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Z-layer + relative section */
.mk-section--relative { position: relative; z-index: 10; }

/* Product preview glass card (mobile stacked) */
.mk-preview-card {
    border-radius: 0.75rem;
    padding: 0.375rem;
}
.mk-preview-card--shadow-1 { box-shadow: 0 25px 50px rgba(4,101,174,0.1); }
.mk-preview-card--shadow-2 { box-shadow: 0 25px 50px rgba(0,0,0,0.25); }
.mk-preview-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
    display: block;
}
.mk-preview-img--lg {
    border-radius: 0.75rem;
}

/* ── Product Problem — vertical layout when image is present ── */
.problem-text-centered {
    max-width: 56rem;
    margin: 0 auto 2.5rem;
}
.problem-image-wrap {
    max-width: 60rem;
    margin: 0 auto 3rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0,0,0,0.30);
}
.problem-image {
    width: 100%;
    height: auto;
    display: block;
}
.problem-stats-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 60rem;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .problem-stats-row { grid-template-columns: repeat(3, 1fr); }
}
.problem-source-centered {
    text-align: center;
    margin-top: 1.5rem;
}

/* .mk-preview-desktop replaced by responsive .product-preview / .product-preview--N rules above. */

.mk-body--mt-1 { margin-top: 1rem; }
.mk-mb-4rem  { margin-bottom: 4rem; }
.mk-muted-xs {
    color: var(--text-muted);
    font-size: 0.75rem;
}
.mk-muted-xs--italic { font-style: italic; }


/* Case-studies page specific primitives */
.mk-section--pb-5 { padding-bottom: 5rem; }
.mk-container--48 { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.mk-center-narrow-48 { text-align: center; max-width: 48rem; margin: 0 auto; }
.case-category-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* User wanted tight coupling to paragraph above. mk-lead has the
       default browser paragraph margin-bottom (~1em), so 0 here yields
       a ~1em visible gap. See .page-case-studies .mk-lead override
       further down to kill that browser margin too. */
    margin-top: 0.25rem;
}
/* Mobile: hide the tab bar entirely. Labels wrap/overflow awkwardly
   on narrow viewports; natural scroll through sections is better UX
   than a cramped nav row. Tabs reappear at ≥640px. */
@media (max-width: 639px) {
    .case-category-nav { display: none; }
}
/* Hoisted out of hero by case-studies-tabs.js so sticky can scope to
   <main> (hero had a GSAP transform that broke sticky positioning).
   Sticky pins at 5rem top — clears the fixed site header.
   No container pill/bg — tabs stand alone so the group doesn't look
   like one big chip. Only when stuck we add a subtle backdrop to
   separate the bar from scrolling content. */
.case-category-nav.is-hoisted {
    position: sticky;
    /* Sit flush under the fixed site header (5rem) — no gap. */
    top: 5rem;
    z-index: 40;
    /* Airy gap before first category heading. Nav mb 8rem + hero pb
       4rem = 12rem total breathing room below tabs. */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 8rem;
    padding: 0;
    width: fit-content;
    max-width: calc(100vw - 2rem);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    border-radius: 0;
    transition: padding 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}
/* Stuck state — hairline backdrop pill just around the bar so text
   behind doesn't bleed through. Each tab keeps its own pill look. */
.case-category-nav.is-hoisted.is-stuck {
    padding: 0.5rem 0.75rem;
    background: var(--surface-solid);
    backdrop-filter: blur(20px);
    border-radius: 9999px;
    box-shadow: 0 1px 0 var(--border-subtle), 0 8px 24px -12px rgba(0,0,0,0.35);
}
/* Note: site header uses position:fixed top:0 and does NOT shift for
   the WP admin bar (the admin bar overlays the top 32px of the header
   by z-order). To stay flush under that same header, the sticky nav
   must also use `top: 5rem` — no admin-bar adjustment. Otherwise a
   32px gap appears between header and sticky nav for logged-in users. */
/* <main.page-case-studies> ships with overflow:hidden for parallax
   orb containment. That forms a sticky-block-ancestor and prevents
   the hoisted tab nav from sticking. Clear overflow on the main,
   clip the decorative orbs individually instead. */
main.page-case-studies {
    /* overflow-y visible so sticky nav works (hidden forms a sticky
       ancestor and kills position:sticky). overflow-x clip prevents
       parallax orbs with negative left/right offsets from causing
       horizontal scroll on mobile. `clip` (not hidden) avoids forming
       a sticky-block-ancestor while still clipping content. */
    overflow-x: clip;
    overflow-y: visible;
}
/* Kill browser default `p { margin-bottom: 1em }` on hero lead so the
   tab nav below couples tightly (visible gap = nav margin-top only). */
main.page-case-studies .mk-section--hero .mk-lead {
    margin-bottom: 0;
}
main.page-case-studies .parallax-orb {
    /* Clip orbs at viewport edge via their own contain */
    max-width: 100vw;
}
/* Target sections — land heading clearly below the floating tab bar.
   Header 5rem (80px) + tab pill 3.5rem (56px) + 1rem breathing = 9.5rem.
   Section padding above heading then adds natural gap. */
.page-case-studies section[id] {
    scroll-margin-top: 9.5rem;
}
/* Site header doesn't shift for admin bar (they overlap), so sections
   use the same 9.5rem offset regardless of logged-in state. */
.case-category-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.case-category-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: rgba(4,101,174,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.case-category-h2 {
    font-family: "Clash Display", sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
}
.case-category-desc {
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    max-width: 42rem;
}
.case-card-head-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.case-card-h3 {
    font-family: "Clash Display", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
}
.case-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.case-card-micro-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 0.25rem;
}
.case-card-micro-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
}
.case-card-divider {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}
.case-card-divider--mt {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle);
}
.case-card-impact {
    color: var(--brand-light);
    font-family: "Clash Display", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
}
.case-card-detail {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* =============================================================
 * Shared template-part: CTA Section
 * Migrated from inline styles in template-parts/cta-section.php
 * ============================================================= */
.cta-section {
    position: relative;
    overflow: hidden;
}
.cta-section__gradient {
    position: absolute;
    inset: 0;
}
.cta-section__gradient--a {
    background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(4,101,174,0.25), transparent);
}
.cta-section__gradient--b {
    background: radial-gradient(ellipse 40% 60% at 80% 20%, rgba(31,184,236,0.12), transparent);
}
.cta-section__gradient--c {
    background: radial-gradient(ellipse 30% 30% at 30% 70%, rgba(59,130,246,0.08), transparent);
}
.cta-section__inner {
    position: relative;
    z-index: 10;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}
.cta-section__heading {
    margin-bottom: 1.5rem;
}
.cta-section__description {
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    margin: 0 auto 2.5rem;
    max-width: 42rem;
}
.cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.cta-section__btn {
    padding: 0.875rem 2rem;
    text-align: center;
}

/* =============================================================
 * Shared template-part: Related Content
 * Migrated from inline styles + embedded <style> block
 * in template-parts/related-content.php
 * ============================================================= */
/* Tighten ONLY the top gap before Related Content — previous section
   already provides plenty of breathing room. Bottom stays full so the
   gap before the next section (FAQ/CTA) matches the rest of the site. */
.related-section.section-padding {
    padding-top: 0;
}
/* Agency Partnership template: extra top spacing because the section
   above is a dark testimonial band whose padding doesn't carry over
   visually into the next light section. Scoped to that page only. */
.page-agency-partnership .related-section.section-padding {
    padding-top: 4rem;
}
@media (min-width: 640px) {
    .page-agency-partnership .related-section.section-padding { padding-top: 6rem; }
}
@media (min-width: 1024px) {
    .page-agency-partnership .related-section.section-padding { padding-top: 8rem; }
}
.related-section__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.related-section__heading {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-align: center;
}
.related-grid {
    display: grid;
    gap: 1.5rem;
    justify-content: center;
}
@media (min-width: 640px) {
    /* Tablet: cards keep 1/2 base width, auto-center if odd count */
    .related-grid {
        grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 1.5rem) / 2)));
    }
}
@media (min-width: 1024px) {
    /* Desktop: 3-col variant uses thirds; 2-col variant uses halves */
    .related-grid--3 {
        grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 1.5rem * 2) / 3)));
    }
    .related-grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 56rem;
        margin-left: auto;
        margin-right: auto;
    }
}
.related-card {
    border-radius: 1rem;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s ease;
}
.related-card:hover {
    background: var(--glass-hover, rgba(255,255,255,0.06));
    border-color: rgba(31,184,236,0.2);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(4,101,174,0.1);
}
.related-card__badge-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.related-badge {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.related-badge--guide {
    background: rgba(4,101,174,0.1);
    color: var(--brand-light);
}
.related-badge--solution {
    background: rgba(16,185,129,0.1);
    color: var(--success);
}
.related-card__title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 600;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}
.related-card:hover .related-card__title {
    color: var(--brand-light);
}
.related-card__description {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
    flex: 1;
    margin-bottom: 1.25rem;
}
.related-card__link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cta);
    margin-top: auto;
    transition: color 0.3s ease;
}
.related-card:hover .related-card__link {
    color: var(--brand-light);
}
.related-card__arrow {
    transition: transform 0.3s ease;
}
.related-card:hover .related-card__arrow {
    transform: translateX(4px);
}

/* =============================================================
 * page-rmri.php — inline-CSS cleanup 2026-04-22
 * All static gradients / radials / borders / colors migrated here.
 * JS-driven dynamic styles (width:N%, transform:scale, clip-path:inset,
 * color switches on state change) remain inline in the template since
 * rmri-interactive.js mutates them via element.style.*.
 * ============================================================= */

/* ── Hero background ───────────────────────────────────────── */
.rmri-hero-mri-img {
    opacity: 0;
    transition: opacity 1.5s ease-out;
    transform: scale(1.35);
    object-position: center 45%;
}
.rmri-hero-filter {
    background: linear-gradient(180deg,
        rgba(2,18,32,0.75) 0%,
        rgba(3,28,45,0.55) 40%,
        rgba(2,18,32,0.7) 100%);
}
/* Light mode: stronger overlay so subheadline + eyebrow hit WCAG AA
   against the MRI photo. Without this the grey/blue tokens wash out.
   Theme toggle uses html.light (see theme-toggle.js), not data-theme. */
html.light .rmri-hero-filter {
    background: linear-gradient(180deg,
        rgba(245,247,251,0.82) 0%,
        rgba(226,232,240,0.7) 40%,
        rgba(245,247,251,0.82) 100%);
}
.rmri-hero-glow {
    background: radial-gradient(ellipse at center 40%,
        rgba(31,184,236,0.08) 0%,
        transparent 55%);
}

/* Light mode: hero copy needs darker tokens to pass contrast.
   Scoped to hero IDs so override doesn't bleed into dark sections. */
html.light #rmri-eyebrow {
    color: #0465ae;
}
html.light #rmri-subheadline {
    color: #1e293b;
}
html.light #rmri-scroll,
html.light #rmri-scroll p,
html.light #rmri-scroll svg {
    color: #334155;
}
.rmri-canvas-fade {
    opacity: 0;
    animation: rmri-canvas-fade-in 2s 0.8s ease-out forwards;
}

/* Hero headline gradient text */
.rmri-headline-gradient {
    background: linear-gradient(90deg, #1fb8ec, #51a2ff, #1fb8ec);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter:
        drop-shadow(0 0 30px rgba(31,184,236,0.5))
        drop-shadow(0 0 60px rgba(31,184,236,0.25));
}

/* ── Section backgrounds ───────────────────────────────────── */
.rmri-bg-report {
    background: var(--color-report-bg);
}
.rmri-bg-report-gradient {
    background: linear-gradient(180deg,
        var(--color-report-bg) 0%,
        var(--color-report-bg-alt) 100%);
}

/* ── Digital Shelf toggle ──────────────────────────────────── */
.rmri-divider-blue {
    background: linear-gradient(90deg, transparent, #51a2ff, transparent);
}
.rmri-divider-red {
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
.rmri-scan-btn {
    background: #0465ae;
    border: 1px solid rgba(43,127,255,0.5);
    box-shadow: 0 4px 14px rgba(4,101,174,0.3);
}
.rmri-shelf-container {
    background: linear-gradient(180deg, var(--color-navy-900), var(--color-navy-950));
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* RMRI hero — match home hero typography across viewports.
   Mirrors template-parts/hero.php sizing so all hero banners look
   identical at same viewport. Uses same clamp() scales, short-
   viewport compression, kerning rules. */
/* Hero entrance elements: start hidden so GSAP timeline fromTo doesn't
   cause a visible "text shows → disappears → animates in" flash. The
   JS either animates opacity to 1 (entrance) or snaps to 1 (scrolled-
   past-reload). .no-gsap fallback in animations.js shows them too. */
#rmri-eyebrow,
#rmri-headline,
#rmri-subheadline,
#rmri-scroll {
    opacity: 0;
}
.no-gsap #rmri-eyebrow,
.no-gsap #rmri-headline,
.no-gsap #rmri-subheadline,
.no-gsap #rmri-scroll {
    opacity: 1 !important;
}
#rmri-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    margin-bottom: 2rem;
}
#rmri-headline {
    line-height: 1.08;
    letter-spacing: -0.01em;
    word-spacing: 0.05em;
    margin-bottom: 1.5rem;
}
#rmri-headline .rmri-headline-line-1,
#rmri-headline .rmri-headline-line-2,
#rmri-headline .rmri-headline-line-3 {
    font-size: clamp(1.75rem, 5vw, 4.5rem);
    letter-spacing: -0.005em;
    text-wrap: balance;
}
#rmri-headline .rmri-headline-line-2,
#rmri-headline .rmri-headline-line-3 {
    margin-top: 0.5rem;
}
#rmri-subheadline {
    font-size: clamp(0.875rem, 2vw, 1.25rem);
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.7;
    font-weight: 300;
    letter-spacing: 0.025em;
}

/* Mobile RMRI hero compression — mirrors home hero mobile */
@media (max-width: 639px) {
    #rmri-eyebrow { font-size: 0.6875rem !important; margin-bottom: 1rem !important; }
    #rmri-headline { margin-bottom: 1rem !important; }
    #rmri-headline .rmri-headline-line-1,
    #rmri-headline .rmri-headline-line-2,
    #rmri-headline .rmri-headline-line-3 {
        font-size: clamp(1.5rem, 7.5vw, 2.25rem) !important;
    }
    #rmri-subheadline {
        margin-bottom: 1.25rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }
}

/* Short-viewport RMRI hero compression — mirrors home hero */
@media (min-height: 600px) and (max-height: 860px) and (min-width: 640px) {
    #rmri-eyebrow { font-size: 0.6875rem !important; margin-bottom: 1rem !important; }
    #rmri-headline { margin-bottom: 1.25rem !important; line-height: 1.05 !important; }
    #rmri-headline .rmri-headline-line-1,
    #rmri-headline .rmri-headline-line-2,
    #rmri-headline .rmri-headline-line-3 {
        font-size: clamp(2rem, 4vw, 3.25rem) !important;
    }
    #rmri-subheadline {
        margin-bottom: 1.5rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
    }
}

/* Forces Draining ROI — each sub-card row fits one fold on short
   laptops. Section intro compressed. Individual force rows
   (grid lg:grid-cols-2) vertical-centered at ~100svh. */
@media (min-width: 640px) and (max-height: 860px) {
    section.rmri-forces-section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    section.rmri-forces-section .text-center.mb-12,
    section.rmri-forces-section .text-center.mb-16 {
        margin-bottom: 1.5rem !important;
    }
    section.rmri-forces-section h2.rmri-forces-section-heading {
        font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
        margin-bottom: 0.75rem !important;
    }
    section.rmri-forces-section p.rmri-forces-section-lead {
        font-size: 0.9375rem !important;
    }
    /* Card rows: each grid row becomes one fold */
    section.rmri-forces-section .space-y-20,
    section.rmri-forces-section .space-y-24 {
        --tw-space-y-reverse: 0;
    }
    section.rmri-forces-section .space-y-20 > .grid,
    section.rmri-forces-section .space-y-24 > .grid {
        min-height: calc(100svh - 4rem);
        align-content: center;
        align-items: center;
        margin-top: 0 !important;
        padding: 1rem 0;
    }
    /* Card padding + heading trim */
    section.rmri-forces-section .rmri-forces-card {
        padding: 1.25rem !important;
    }
    section.rmri-forces-section .rmri-forces-card-head {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    /* Trim card chip + heading */
    section.rmri-forces-section .rmri-forces-card-head > div:first-child {
        width: 2rem !important;
        height: 2rem !important;
    }
    section.rmri-forces-section .rmri-forces-card-head > div:first-child svg {
        width: 1rem !important;
        height: 1rem !important;
    }
    section.rmri-forces-section .rmri-forces-card-head > span {
        font-size: 0.9375rem !important;
    }
    /* Buy Box Winner card inside Buy Box force */
    section.rmri-forces-section #buybox-winner {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    section.rmri-forces-section #buybox-winner .mb-4 {
        margin-bottom: 0.5rem !important;
    }
    section.rmri-forces-section #buybox-winner #buybox-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    section.rmri-forces-section #buybox-winner #buybox-icon svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    section.rmri-forces-section #buybox-cart-btn {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    section.rmri-forces-section #buybox-hijack-warning {
        padding: 0.625rem !important;
        margin-bottom: 0.75rem !important;
    }
    /* Competing sellers subcard */
    section.rmri-forces-section #buybox-competitors,
    section.rmri-forces-section .rmri-forces-subcard {
        padding: 0.875rem !important;
    }
    section.rmri-forces-section #buybox-competitors .mb-4 {
        margin-bottom: 0.625rem !important;
    }
    section.rmri-forces-section #buybox-competitors .space-y-3 > * + * {
        margin-top: 0.5rem !important;
    }
    section.rmri-forces-section .rmri-forces-mock-item {
        padding: 0.5rem 0.625rem !important;
    }
    /* Description (right col) text sizing */
    section.rmri-forces-section .order-2 h3,
    section.rmri-forces-section .order-2 h2 {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
        margin-bottom: 0.75rem !important;
    }
    section.rmri-forces-section .order-2 p {
        font-size: 0.9375rem !important;
        line-height: 1.55 !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Final CTA — only gauge card shrinks on short laptops */
@media (min-width: 640px) and (max-height: 860px) {
    section.rmri-final-section .grid > div:last-child {
        zoom: 0.9;
    }
}

/* Scan Your Category section — fit-to-fold short laptops.
   Compresses scanner card padding, h2, scanner icon size,
   eyebrow + paragraph so entire card fits one fold. */
@media (min-width: 640px) and (max-height: 860px) {
    section#scan-section {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    section#scan-section #mri-scanner-card {
        padding: 2rem 1.5rem !important;
    }
    section#scan-section .rmri-eyebrow-pill {
        margin-bottom: 1rem !important;
        padding: 0.25rem 0.875rem !important;
    }
    section#scan-section h2 {
        font-size: clamp(1.5rem, 2.75vw, 2rem) !important;
        margin-bottom: 0.75rem !important;
    }
    section#scan-section h2 + p {
        font-size: 0.875rem !important;
        margin-bottom: 1.5rem !important;
    }
    section#scan-section #scanner-icon-wrap {
        width: 7rem !important;
        height: 7rem !important;
        margin-bottom: 1.5rem !important;
    }
    section#scan-section #scanner-icon-wrap svg.w-14 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    /* Dropdown → button rhythm + button → micro-stats rhythm
       Match the tighter fold but keep visual breathing */
    section#scan-section #category-selector #custom-dropdown.mb-6 {
        margin-bottom: 1.25rem !important;
    }
    section#scan-section #dropdown-trigger {
        padding: 0.75rem 1rem !important;
        font-size: 0.9375rem !important;
    }
    section#scan-section #category-check-btn {
        padding: 0.875rem 2rem !important;
        font-size: 0.9375rem !important;
    }
    section#scan-section .rmri-micro-stats {
        margin-top: 1.25rem !important;
        gap: 1.25rem !important;
    }
}

/* Digital shelf — fit-to-fold for short laptops (≤860h, ≥640w).
   Compresses section padding, h2, margins, and caps shelf image
   height so entire section (heading + text + button + shelf) fits
   within 100svh without scroll. */
@media (min-width: 640px) and (max-height: 860px) {
    section.rmri-bg-report {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
        min-height: auto;
    }
    section.rmri-bg-report #shelf-text-clean h2,
    section.rmri-bg-report #shelf-text-chaos h2 {
        font-size: clamp(1.5rem, 2.75vw, 2rem) !important;
        margin-bottom: 1rem !important;
    }
    section.rmri-bg-report #shelf-text-clean > div,
    section.rmri-bg-report #shelf-text-chaos > div {
        margin-bottom: 1rem !important;
    }
    section.rmri-bg-report #shelf-text-clean p,
    section.rmri-bg-report #shelf-text-chaos p {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
    }
    section.rmri-bg-report .text-center.mb-12 {
        margin-bottom: 1.5rem !important;
    }
    section.rmri-bg-report #scan-now-btn {
        padding: 0.625rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
    /* Shelf container shrinks proportionally — height capped, width
       follows aspect ratio (no cut). Centered horizontally. */
    section.rmri-bg-report #shelf-container {
        max-width: fit-content;
        max-height: 52vh;
        margin-left: auto;
        margin-right: auto;
    }
    section.rmri-bg-report #shelf-container img {
        max-height: 52vh;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}
.rmri-scan-line {
    left: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(31,184,236,0.4) 10%,
        rgba(31,184,236,1) 30%,
        rgba(81,162,255,1) 50%,
        rgba(31,184,236,1) 70%,
        rgba(31,184,236,0.4) 90%,
        transparent 100%);
}
.rmri-scan-glow-outer {
    background: linear-gradient(90deg, transparent, rgba(31,184,236,0.12), transparent);
}
.rmri-scan-glow-inner {
    background: linear-gradient(90deg, transparent, rgba(81,162,255,0.5), transparent);
    filter: blur(3px);
}
.rmri-shelf-edge {
    left: 0;
    mix-blend-mode: screen;
}
.rmri-shelf-edge-gradient {
    background: linear-gradient(90deg,
        rgba(255,60,60,0.08),
        transparent 40%,
        rgba(60,120,255,0.08));
    filter: blur(2px);
}
.rmri-shelf-data-grid {
    background-image:
        linear-gradient(rgba(31,184,236,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,184,236,0.06) 1px, transparent 1px);
    background-size: 48px 48px;
}
.rmri-shelf-flash {
    background: radial-gradient(ellipse at center,
        rgba(31,184,236,0.15),
        transparent 70%);
}
/* Retained — JS toggles the scale via class swap on active image. */
.rmri-shelf-img--scale {
    transform: scale(1.08);
}

/* ── Category Scanner card ─────────────────────────────────── */
.rmri-scan-section-bg {
    background: linear-gradient(180deg,
        var(--color-report-bg) 0%,
        var(--color-report-bg-alt) 100%);
}
.rmri-scanner-card {
    background: var(--color-surface-solid);
    border: 1px solid rgba(var(--color-overlay), 0.15);
    box-shadow:
        0 25px 60px rgba(0,0,0,0.15),
        0 8px 20px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(var(--color-overlay), 0.06);
}

/* Mobile fit-to-fold for the RMRI scanner card. Full section should
   fit in one viewport on phones without forcing a scroll to reach the
   primary CTA. Cut section padding, card padding, eyebrow/heading/copy
   margins, and shrink the scanner icon from 160px → 96px. */
@media (max-width: 639px) {
    #scan-section.section-padding {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    #scan-section #mri-scanner-card {
        padding: 1.5rem 1.25rem;
        border-radius: 1.5rem;
    }
    #scan-section #mri-scanner-card > .inline-flex.mb-6 {
        margin-bottom: 1rem;
    }
    #scan-section #mri-scanner-card > h2 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }
    #scan-section #mri-scanner-card > p {
        font-size: 0.9375rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }
    #scan-section #scanner-icon-wrap {
        width: 6rem;
        height: 6rem;
        margin-bottom: 1.5rem;
    }
    #scan-section #scanner-icon-wrap svg.w-14 {
        width: 2.25rem;
        height: 2.25rem;
    }
    #scan-section #category-selector #custom-dropdown {
        margin-bottom: 1rem;
    }
    #scan-section #dropdown-trigger {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        border-radius: 0.625rem;
    }
    #scan-section #dropdown-chevron {
        width: 1rem;
        height: 1rem;
        margin-left: 0.5rem;
    }
    #scan-section .rmri-dropdown-option {
        padding: 0.625rem 0.875rem;
        font-size: 0.8125rem;
    }
    #scan-section #category-check-btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.8125rem;
        border-radius: 0.625rem;
    }
    #scan-section #category-check-btn svg {
        width: 1rem;
        height: 1rem;
    }
    #scan-section #category-check-btn .inline-flex {
        gap: 0.5rem;
    }
    #scan-section .rmri-micro-stats {
        margin-top: 1.25rem;
        gap: 1rem;
        flex-wrap: wrap;
    }
}
.rmri-scanner-scan-line {
    top: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(4,101,174,0.0) 10%,
        rgba(4,101,174,0.6) 50%,
        rgba(4,101,174,0.0) 90%,
        transparent 100%);
    box-shadow:
        0 0 20px rgba(4,101,174,0.3),
        0 0 60px rgba(4,101,174,0.1);
}
.rmri-scanner-grid-overlay {
    background-image:
        linear-gradient(rgba(4,101,174,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4,101,174,1) 1px, transparent 1px);
    background-size: 40px 40px;
}
.rmri-eyebrow-pill {
    background: rgba(4,101,174,0.06);
    border-color: rgba(4,101,174,0.12);
}
.rmri-brand-text {
    color: #0465ae;
}
.rmri-brand-bg {
    background: #0465ae;
}

/* Scanner icon rings */
.rmri-scanner-glow {
    background: radial-gradient(circle,
        rgba(4,101,174,0.4) 0%,
        transparent 70%);
}
.rmri-scanner-ring-outer {
    border: 2px dashed rgba(4,101,174,0.3);
    animation: rmri-spin-slow 12s linear infinite;
}
.rmri-scanner-ring-mid {
    border: 1.5px solid rgba(4,101,174,0.18);
    animation: rmri-pulse-ring 3s ease-in-out infinite;
}
.rmri-scanner-ring-inner {
    border: 1px solid rgba(4,101,174,0.08);
}
.rmri-scanner-core {
    background: linear-gradient(135deg, #0a2540, #0d3868);
    box-shadow:
        0 8px 30px rgba(4,101,174,0.35),
        0 0 40px rgba(4,101,174,0.1),
        0 0 0 1px rgba(4,101,174,0.15),
        inset 0 1px 0 rgba(255,255,255,0.05);
}
.rmri-radar-sweep {
    background: conic-gradient(from 0deg,
        transparent 0deg,
        transparent 340deg,
        rgba(4,101,174,0.15) 355deg,
        transparent 360deg);
    animation: rmri-spin-slow 4s linear infinite;
}

/* Dropdown trigger + menu */
.rmri-dropdown-trigger {
    background: var(--color-surface-solid);
    color: var(--color-text-muted, #94a3b8);
    border: 1.5px solid rgba(var(--color-overlay), 0.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rmri-dropdown-list {
    background: var(--color-surface-solid);
    border: 1px solid rgba(var(--color-overlay), 0.12);
    box-shadow:
        0 12px 40px rgba(0,0,0,0.2),
        0 4px 12px rgba(0,0,0,0.08);
    backdrop-filter: blur(8px);
}
.rmri-dropdown-option {
    color: var(--color-text-primary);
}

/* Diagnostic CTA + shimmer */
.rmri-diagnostic-btn {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}
.rmri-shimmer {
    background: linear-gradient(105deg,
        transparent 35%,
        rgba(255,255,255,0.3) 45%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0.3) 55%,
        transparent 65%);
    background-size: 200% 100%;
    animation: rmri-shimmer 2.5s ease-in-out infinite;
}
.rmri-micro-stats {
    color: #94a3b8;
}

/* ── Forces Draining — section decoratives ─────────────────── */
.rmri-force-orb-a {
    background: linear-gradient(135deg,
        rgba(81,162,255,0.1),
        rgba(21,93,252,0.1));
}
.rmri-force-orb-b {
    background: linear-gradient(45deg,
        rgba(43,127,255,0.1),
        rgba(20,71,230,0.1));
}

/* Card chip gradients */
.rmri-chip-cx {
    background: linear-gradient(135deg, #00c950, #00a63e);
}
.rmri-chip-price {
    background: linear-gradient(135deg, #ff6900, #f54900);
}
.rmri-chip-buybox {
    background: linear-gradient(135deg, #2b7fff, #155dfc);
}

/* Marketplace CX intruder card — collapsed/revealed states */
.rmri-intruder-collapsed {
    opacity: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-width: 0;
}
.rmri-intruder-thumb {
    background: linear-gradient(135deg, #e5e7eb, #d1d5dc);
}
.rmri-intruder-thumb--gray {
    background: linear-gradient(135deg, #d1d5dc, #99a1af);
}
.rmri-intruder-thumb--blue {
    background: linear-gradient(135deg, #bedbff, #8ec5ff);
}
.rmri-intruder-icon-white {
    color: rgba(255,255,255,0.8);
}
.rmri-mcx-list-pad {
    padding-top: 16px;
}

/* Price Compression + Buy Box animation initial states —
 * intentionally kept inline in page-rmri.php because rmri-interactive.js
 * reads + mutates element.style.* directly for these (opacity/transform
 * tweens, background/border color swaps). Class-based initial state
 * conflicted with GSAP's property reads. */

/* =============================================================
 * Forces Draining Retail Media ROI — dark/light dual theme
 * Section + cards + chip identity + callouts. JS-animated elements
 * still inline (seller cards, margin bar, CRaP, buybox winner bg etc).
 * ============================================================= */

/* Dark-mode default (navy bg, elevated card).
   Light-mode override via html.light. */
.rmri-forces-section {
    background: linear-gradient(180deg,
        #0B1120 0%,
        #0D1428 50%,
        #0B1120 100%);
    transition: background 0.3s ease;
}
html.light .rmri-forces-section {
    background: linear-gradient(180deg,
        #F8FAFC 0%,
        #EEF2F7 50%,
        #F8FAFC 100%);
}

.rmri-forces-card {
    background: linear-gradient(180deg,
        rgba(30, 41, 59, 0.5) 0%,
        rgba(15, 23, 42, 0.65) 100%);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow:
        0 24px 60px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
    backdrop-filter: blur(12px);
}
@media (min-width: 640px) {
    .rmri-forces-card { padding: 2rem; }
}
html.light .rmri-forces-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow:
        0 24px 60px -20px rgba(15, 23, 42, 0.12),
        0 1px 2px rgba(15, 23, 42, 0.04);
    backdrop-filter: none;
}

.rmri-forces-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    margin-bottom: 1.5rem;
}
html.light .rmri-forces-card-head {
    border-bottom-color: #E5E7EB;
}

/* Inner mock / product / sub-surface */
.rmri-forces-subcard {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0.875rem;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) inset;
}
html.light .rmri-forces-subcard {
    background: #F9FAFB;
    border-color: #E5E7EB;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Mock list items (intruder fake rows) */
.rmri-forces-mock-item {
    background: rgba(30, 41, 59, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0.875rem;
    padding: 1rem;
}
html.light .rmri-forces-mock-item {
    background: #FFFFFF;
    border-color: #E5E7EB;
}

/* Mock item — sponsored (green tint) */
.rmri-forces-mock-item--sponsored {
    background: rgba(34, 197, 94, 0.10);
    border: 2px solid rgba(74, 222, 128, 0.45);
}
html.light .rmri-forces-mock-item--sponsored {
    background: #F0FDF4;
    border-color: #86EFAC;
}

/* Mock item — official brand (blue tint) */
.rmri-forces-mock-item--brand {
    background: rgba(59, 130, 246, 0.12);
    border: 2px solid rgba(96, 165, 250, 0.5);
}
html.light .rmri-forces-mock-item--brand {
    background: #EFF6FF;
    border-color: #93C5FD;
}

/* Buy Box winner mock — intentionally looks like a real Amazon listing
   (light gradient bg, JS sets .style.background). Wrap it in a subtle
   dark halo on dark mode so it doesn't float awkwardly on the navy card. */
#buybox-winner {
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}
html.light #buybox-winner {
    box-shadow: 0 6px 14px -4px rgba(15, 23, 42, 0.1);
}

/* Buy Box competitor — winner state (GSAP toggles .is-winner class on
   #competitor-seller-a when the hijack animation declares a new winner) */
#competitor-seller-a.is-winner {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(74, 222, 128, 0.55);
    transition: background-color 0.4s ease, border-color 0.4s ease;
}
html.light #competitor-seller-a.is-winner {
    background: #F0FDF4;
    border-color: #16A34A;
}
/* Ensure text inside winner row stays readable on its green tint */
#competitor-seller-a.is-winner p,
#competitor-seller-a.is-winner .rmri-forces-title,
#competitor-seller-a.is-winner .rmri-forces-subtle {
    color: #86EFAC;
}
html.light #competitor-seller-a.is-winner p,
html.light #competitor-seller-a.is-winner .rmri-forces-title,
html.light #competitor-seller-a.is-winner .rmri-forces-subtle {
    color: #166534;
}

/* Text roles */
.rmri-forces-title {
    color: #F1F5F9;
    font-weight: 700;
    letter-spacing: -0.01em;
}
html.light .rmri-forces-title { color: #0F172A; }

.rmri-forces-body {
    color: #CBD5E1;
    font-size: 1.125rem;
    line-height: 1.7;
}
html.light .rmri-forces-body { color: #475569; }

.rmri-forces-subtle {
    color: #94A3B8;
}
html.light .rmri-forces-subtle { color: #6B7280; }

.rmri-forces-divider {
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}
html.light .rmri-forces-divider {
    border-top-color: #E5E7EB;
}

/* Chip identity — bright on dark (default), darker on light */
.rmri-forces-chip--cx    { color: #4ADE80; }
.rmri-forces-chip--price { color: #FB923C; }
.rmri-forces-chip--bb    { color: #60A5FA; }
html.light .rmri-forces-chip--cx    { color: #15803D; }  /* was #16A34A (3.3:1 fail), now 5.02:1 pass */
html.light .rmri-forces-chip--price { color: #C2410C; }  /* was #EA580C (3.56:1 fail), now 5.18:1 pass */
html.light .rmri-forces-chip--bb    { color: #2563EB; }

/* Heading variants — same brand identity, larger */
.rmri-forces-heading--cx    { color: #4ADE80; }
.rmri-forces-heading--price { color: #FB923C; }
.rmri-forces-heading--bb    { color: #60A5FA; }
html.light .rmri-forces-heading--cx    { color: #16A34A; }
html.light .rmri-forces-heading--price { color: #EA580C; }
html.light .rmri-forces-heading--bb    { color: #2563EB; }

/* Callout quote boxes */
.rmri-forces-callout {
    border-left: 4px solid;
    border-radius: 0 0.625rem 0.625rem 0;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    font-style: italic;
    font-weight: 600;
}
/* Dark-mode default */
.rmri-forces-callout--cx {
    background: rgba(74, 222, 128, 0.08);
    border-left-color: #4ADE80;
    color: #86EFAC;
}
.rmri-forces-callout--price {
    background: rgba(251, 146, 60, 0.08);
    border-left-color: #FB923C;
    color: #FDBA74;
}
.rmri-forces-callout--bb {
    background: rgba(96, 165, 250, 0.08);
    border-left-color: #60A5FA;
    color: #93C5FD;
}
/* Light-mode override */
html.light .rmri-forces-callout--cx {
    background: rgba(22, 163, 74, 0.08);
    border-left-color: #16A34A;
    color: #166534;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.light .rmri-forces-callout--price {
    background: rgba(234, 88, 12, 0.08);
    border-left-color: #EA580C;
    color: #9A3412;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
html.light .rmri-forces-callout--bb {
    background: rgba(37, 99, 235, 0.08);
    border-left-color: #2563EB;
    color: #1E3A8A;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ── RMRI hero: scroll-to-explore pill ─────────────────────── */
.rmri-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1.125rem;
    margin-top: 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.rmri-scroll-cue:hover,
.rmri-scroll-cue:focus-visible {
    color: var(--text-primary);
    border-color: rgba(31, 184, 236, 0.45);
    background: rgba(31, 184, 236, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 184, 236, 0.18);
}
.rmri-scroll-cue__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    color: var(--brand-light);
    animation: rmri-scroll-bounce 1.8s ease-in-out infinite;
}
.rmri-scroll-cue:hover .rmri-scroll-cue__icon,
.rmri-scroll-cue:focus-visible .rmri-scroll-cue__icon {
    color: #fff;
}
@keyframes rmri-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .rmri-scroll-cue__icon { animation: none; }
}
html.light .rmri-scroll-cue {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(14, 116, 144, 0.2);
    color: #334155;
}
html.light .rmri-scroll-cue:hover,
html.light .rmri-scroll-cue:focus-visible {
    border-color: #0E7490;
    background: rgba(14, 116, 144, 0.08);
    color: #0F172A;
}
html.light .rmri-scroll-cue__icon { color: #0E7490; }

/* Section heading block */
.rmri-forces-section-heading {
    color: #F1F5F9;
    font-weight: 700;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.01em;
    word-spacing: 0.08em;
    line-height: 1.1;
}
html.light .rmri-forces-section-heading {
    color: #0F172A;
    text-shadow: none;
}
.rmri-forces-section-lead {
    color: #CBD5E1;
    font-size: 1.125rem;
    margin-top: 1rem;
}
html.light .rmri-forces-section-lead {
    color: #475569;
}

/* Decorative orb tuning — dim further on light bg for subtlety */
html.light .rmri-force-orb-a,
html.light .rmri-force-orb-b {
    opacity: 0.35;
}

/* Fade gradients on scroll region (top/bottom of MCX list) */
.rmri-forces-fade-top {
    background: linear-gradient(to bottom, var(--surface-solid), transparent);
}
.rmri-forces-fade-bottom {
    background: linear-gradient(to top, var(--surface-solid), transparent);
}

/* Final CTA section */
.rmri-final-section {
    background: linear-gradient(180deg, #0B1120 0%, #111827 100%);
    border-top: 1px solid rgba(148, 163, 184, 0.12);
}
html.light .rmri-final-section {
    background: #FFFFFF;
    border-top-color: #E5E7EB;
}
.rmri-final-heading {
    color: #F1F5F9;
}
html.light .rmri-final-heading { color: #0A1628; }
.rmri-final-body {
    color: #CBD5E1;
}
html.light .rmri-final-body { color: #475569; }
.rmri-final-subtle {
    color: #94A3B8;
}
html.light .rmri-final-subtle { color: #6B7280; }

/* Blurred score card (teaser) — sits on dark navy in dark mode,
   on white in light mode. Needs proud elevation both ways. */
.rmri-scorecard {
    background: linear-gradient(180deg,
        rgba(30, 41, 59, 0.55) 0%,
        rgba(15, 23, 42, 0.75) 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1.25rem;
    padding: 2rem;
    box-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    backdrop-filter: blur(12px);
    font-family: 'DM Sans', sans-serif;
}
html.light .rmri-scorecard {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 30px 80px -15px rgba(15, 23, 42, 0.15);
    backdrop-filter: none;
}
.rmri-scorecard-divider {
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}
html.light .rmri-scorecard-divider {
    border-bottom-color: #DBEAFE;
}
.rmri-scorecard-label {
    color: #F1F5F9;
}
html.light .rmri-scorecard-label { color: #0F2847; }
.rmri-scorecard-pill {
    background: rgba(96, 165, 250, 0.15);
    color: #60A5FA;
}
html.light .rmri-scorecard-pill {
    background: #EFF6FF;
    color: #2563EB;
}
.rmri-scorecard-score {
    color: #F1F5F9;
}
html.light .rmri-scorecard-score { color: #0A1628; }
.rmri-scorecard-subtle {
    color: #94A3B8;
}
html.light .rmri-scorecard-subtle { color: #6B7280; }
.rmri-scorecard-delta-up   { color: #4ADE80; }
.rmri-scorecard-delta-down { color: #F87171; }
html.light .rmri-scorecard-delta-up   { color: #10B981; }
html.light .rmri-scorecard-delta-down { color: #EF4444; }

/* Checklist row */
.rmri-checklist-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}
html.light .rmri-checklist-row {
    border-bottom-color: #E5E7EB;
}
.rmri-checklist-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.875rem;
    background: #22C55E;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.125rem;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}
.rmri-checklist-text {
    color: #CBD5E1;
    font-size: 1.125rem;
    line-height: 1.7;
}
html.light .rmri-checklist-text { color: #475569; }

/* ── Final CTA + score teaser ──────────────────────────────── */
/* Site-wide CTA parity: RMRI final CTA uses .btn-primary (same hover/focus/gradient).
   .rmri-final-cta only bumps size for the final hero-style CTA. */
.rmri-final-cta {
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
}
@media (min-width: 640px) {
    .rmri-final-cta {
        padding: 1.125rem 2.25rem;
        font-size: 1.0625rem;
    }
}
.rmri-font-dm {
    font-family: 'DM Sans', sans-serif;
}

/* ══════════════════════════════════════════════════════════════════
   RMRI Results / Analyzing page
   Phase 1: analyzing animation (scan rings + checklist)
   Phase 2: results (gauge + signal breakdown + media exposure + CTA)
   ══════════════════════════════════════════════════════════════════ */

/* ── Phase 1: Analyzing ─────────────────────────────────────────── */
/* Hide nav-spacer only on rmri-results template (analyzing section fills viewport) */
.page-template-page-rmri-results .nav-spacer { display: none; }

.rmri-analyzing-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-primary);
    padding: 5rem 1rem;
    transition: opacity 0.4s ease;
}
.rmri-analyzing-section.is-fading-out { opacity: 0; pointer-events: none; }
.rmri-analyzing-section[hidden] { display: none !important; }

.rmri-analyzing-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(4,101,174,0.12) 0%, transparent 55%);
}
html.light .rmri-analyzing-bg {
    background: radial-gradient(circle at 50% 45%, rgba(4,101,174,0.08) 0%, transparent 55%);
}

.rmri-analyzing-rings {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.rmri-analyzing-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.04);
}
.rmri-analyzing-ring--1 { width: 300px; height: 300px; animation: rmri-scan-expand 2s ease-out infinite; }
.rmri-analyzing-ring--2 { width: 500px; height: 500px; border-color: rgba(255,255,255,0.03); animation: rmri-scan-expand 2s ease-out 0.5s infinite; }
.rmri-analyzing-ring--3 { width: 700px; height: 700px; border-color: rgba(255,255,255,0.02); animation: rmri-scan-expand 2s ease-out 1s infinite; }
html.light .rmri-analyzing-ring--1 { border-color: rgba(10,22,40,0.06); }
html.light .rmri-analyzing-ring--2 { border-color: rgba(10,22,40,0.04); }
html.light .rmri-analyzing-ring--3 { border-color: rgba(10,22,40,0.03); }

@keyframes rmri-scan-expand {
    0%   { transform: translate(-50%,-50%) scale(0.85); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1.15); opacity: 0; }
}

.rmri-analyzing-inner {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 32rem;
    margin: 0 auto;
}

.rmri-analyzing-scanner {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: 0 auto 2rem;
}
.rmri-analyzing-scanner__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(4,101,174,0.6);
    border-right-color: rgba(4,101,174,0.2);
    animation: rmri-scanner-spin 1.2s linear infinite;
}
.rmri-analyzing-scanner__core {
    position: absolute;
    inset: 0.5rem;
    border-radius: 50%;
    background: rgba(4,101,174,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rmri-scanner-pulse 1.5s ease-in-out infinite;
    color: rgba(4,101,174,0.9);
}
.rmri-analyzing-scanner__core svg { width: 2rem; height: 2rem; }

@keyframes rmri-scanner-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes rmri-scanner-pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.05); }
}

.rmri-analyzing-title {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.rmri-analyzing-status {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 2.5rem;
}

.rmri-analyzing-progress {
    max-width: 20rem;
    margin: 0 auto 2.5rem;
}
.rmri-analyzing-progress {
    height: 4px;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(255,255,255,0.1);
}
html.light .rmri-analyzing-progress { background: rgba(10,22,40,0.1); }
.rmri-analyzing-progress__fill {
    height: 100%;
    border-radius: 9999px;
    width: 0%;
    background: linear-gradient(90deg, #0465ae, #1fb8ec);
    transition: width 0.3s ease-out;
}

.rmri-analyzing-checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    max-width: 20rem;
    margin: 0 auto;
}
.rmri-analyzing-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.rmri-analyzing-check.is-visible { opacity: 1; transform: translateY(0); }

.rmri-analyzing-check__icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
    color: #fff;
    transition: all 0.3s ease-out;
}
html.light .rmri-analyzing-check__icon { border-color: rgba(10,22,40,0.12); }
.rmri-analyzing-check__icon.is-complete {
    background: #0465ae;
    border-color: #0465ae;
}
.rmri-analyzing-check__icon svg { width: 0.875rem; height: 0.875rem; }
.rmri-analyzing-check__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
}
html.light .rmri-analyzing-check__dot { background: rgba(10,22,40,0.3); }

.rmri-analyzing-check__text {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: color 0.3s ease;
}
.rmri-analyzing-check__text.is-complete { color: var(--text-primary); }

/* ── Phase 2: Results ───────────────────────────────────────────── */
.rmri-results-section {
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
    padding: 5rem 1rem 5rem;
    opacity: 0;
    transition: opacity 0.5s ease;
}
@media (min-width: 1024px) {
    .rmri-results-section { padding-top: 7rem; }
}
.rmri-results-section.is-fading-in { opacity: 1; }

.rmri-results-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% 35%, rgba(4,101,174,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.rmri-results-grid {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image:
        linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}
html.light .rmri-results-grid {
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(10,22,40,1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10,22,40,1) 1px, transparent 1px);
}

.rmri-results-container {
    position: relative;
    z-index: 10;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0;
}

.rmri-results-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 2.5rem;
    transition: color 0.2s ease;
}
.rmri-results-back:hover { color: var(--text-secondary); }
.rmri-results-back svg { transition: transform 0.3s ease; }
.rmri-results-back:hover svg { transform: translateX(-4px); }

.rmri-results-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.rmri-results-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    text-wrap: balance;
}
.rmri-results-subtitle {
    color: var(--text-muted);
    font-size: 1rem;
}

.rmri-results-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
@media (min-width: 1024px) {
    .rmri-results-grid-layout {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* Gauge */
.rmri-results-gauge-wrap {
    position: relative;
    max-width: 32rem;
    margin: 0 auto 1.5rem;
    width: 100%;
}
@media (min-width: 1024px) {
    .rmri-results-gauge-wrap { margin-bottom: 0; }
}
.rmri-results-gauge { width: 100%; display: block; }
.rmri-gauge-bg-arc { stroke: rgba(255,255,255,0.06); }
html.light .rmri-gauge-bg-arc { stroke: rgba(10,22,40,0.08); }
.rmri-gauge-score-text { fill: var(--text-primary); }
.rmri-gauge-caption { fill: var(--text-muted); }
.rmri-gauge-scale { fill: rgba(255,255,255,0.18); }
html.light .rmri-gauge-scale { fill: rgba(10,22,40,0.3); }
.rmri-gauge-dot { filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); }

/* Metrics */
.rmri-results-metrics-heading {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.25rem;
    text-align: center;
}
@media (min-width: 1024px) {
    .rmri-results-metrics-heading { text-align: left; }
}

.rmri-results-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rmri-metric-row {
    border-radius: 0.75rem;
    padding: 1.125rem 1.25rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
html.light .rmri-metric-row {
    background: rgba(10,22,40,0.03);
    border-color: rgba(10,22,40,0.06);
}
@media (min-width: 640px) {
    .rmri-metric-row { padding: 1.25rem 1.5rem; }
}

.rmri-metric-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 1rem;
}
.rmri-metric-row__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.rmri-metric-row__title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}
.rmri-metric-row__tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    cursor: help;
}
.rmri-metric-row__tip:hover { color: var(--text-secondary); }
.rmri-metric-row__tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: 16rem;
    padding: 0.625rem 0.875rem;
    background: #0F172A;
    color: #E2E8F0;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
html.light .rmri-metric-row__tooltip {
    background: #fff;
    color: #0F172A;
    box-shadow: 0 10px 30px rgba(10,22,40,0.18);
    border: 1px solid rgba(10,22,40,0.1);
}
.rmri-metric-row__tip:hover .rmri-metric-row__tooltip,
.rmri-metric-row__tip:focus-within .rmri-metric-row__tooltip {
    opacity: 1;
}

.rmri-metric-row__risk-label {
    display: block;
    font-size: 0.75rem;
    margin-top: 0.125rem;
}
.rmri-metric-row__value {
    color: var(--text-primary);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.25vw, 1.875rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.rmri-metric-row__bar-wrap {
    position: relative;
    margin-bottom: 0.5rem;
}
.rmri-metric-row__track {
    height: 8px;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
}
html.light .rmri-metric-row__track { background: rgba(10,22,40,0.08); }
.rmri-metric-row__bar {
    height: 100%;
    width: 0;
    border-radius: 9999px;
    background: currentColor;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.rmri-metric-row__top-marker {
    position: absolute;
    top: -6px;
    left: 0;
    transition: left 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.rmri-metric-row__top-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid rgba(16,185,129,0.7);
    transform: translateX(-4px);
}

.rmri-metric-row__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.625rem;
    color: var(--text-muted);
    gap: 0.25rem;
}
.rmri-metric-row__top-arrow-small {
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid rgba(16,185,129,0.6);
}
.rmri-metric-row__top-val {
    color: rgba(16,185,129,0.8);
    font-weight: 500;
}

/* Media exposure */
.rmri-media-section {
    margin-top: 4rem;
    margin-bottom: 1rem;
}
.rmri-media-divider {
    width: 100%;
    height: 1px;
    margin-bottom: 3rem;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
html.light .rmri-media-divider {
    background: linear-gradient(90deg, transparent, rgba(10,22,40,0.08), transparent);
}

.rmri-media-heading {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    text-align: center;
}
.rmri-media-description {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 2rem;
    line-height: 1.5;
}

.rmri-media-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 48rem;
    margin: 0 auto 2rem;
}
@media (min-width: 640px) {
    .rmri-media-stats { grid-template-columns: repeat(3, 1fr); }
}

.rmri-media-stat {
    border-radius: 0.75rem;
    padding: 1.25rem;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
html.light .rmri-media-stat {
    background: rgba(10,22,40,0.03);
    border-color: rgba(10,22,40,0.06);
}
.rmri-media-stat--primary {
    background: rgba(59,130,246,0.06);
    border-color: rgba(59,130,246,0.15);
}
html.light .rmri-media-stat--primary {
    background: rgba(4,101,174,0.06);
    border-color: rgba(4,101,174,0.15);
}

.rmri-media-stat__label {
    color: var(--text-secondary);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.rmri-media-stat--primary .rmri-media-stat__label {
    color: rgba(96,165,250,0.8);
}
html.light .rmri-media-stat--primary .rmri-media-stat__label {
    color: #0E7490;
}

.rmri-media-stat__value {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rmri-media-stat__value--primary { color: #60a5fa; }
html.light .rmri-media-stat__value--primary { color: #0465ae; }

.rmri-media-stat__sub {
    color: var(--text-muted);
    font-size: 0.625rem;
    margin-top: 0.25rem;
}

.rmri-media-disclaimer {
    max-width: 48rem;
    margin: 0 auto;
    border-radius: 0.75rem;
    padding: 1rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    line-height: 1.5;
}
html.light .rmri-media-disclaimer {
    background: rgba(10,22,40,0.02);
    border-color: rgba(10,22,40,0.05);
}
.rmri-media-disclaimer svg {
    margin-top: 0.125rem;
    flex-shrink: 0;
}
.rmri-media-disclaimer p { margin: 0; }

/* CTA Card */
.rmri-cta-card {
    max-width: 42rem;
    margin: 4rem auto 0;
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    background: rgba(4,101,174,0.08);
    border: 1px solid rgba(4,101,174,0.15);
}
@media (min-width: 640px) {
    .rmri-cta-card { padding: 2.5rem 3rem; }
}

.rmri-cta-card__title {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.rmri-cta-card__desc {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.rmri-cta-card__what {
    text-align: left;
    margin-bottom: 2rem;
}
.rmri-cta-card__what-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}
.rmri-cta-card__what ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.rmri-cta-card__what li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.rmri-cta-card__what li svg {
    color: var(--brand-light);
    flex-shrink: 0;
    margin-top: 0.125rem;
}
html.light .rmri-cta-card__what li svg { color: #0E7490; }
.rmri-cta-card__fine {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.rmri-cta-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #0465ae, #0a7fd4);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(4,101,174,0.35);
}
.rmri-cta-card__btn:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(4,101,174,0.5);
}

.rmri-results-footer-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3.5rem;
    font-size: 0.625rem;
    color: var(--text-muted);
}

/* FAQ on results page — default (standalone usage keeps original margin). */
.rmri-faq {
    max-width: 42rem;
    margin: 5rem auto 2rem;
}
/* When FAQ sits inside a .section-padding wrapper (used on service pages),
   the section already provides outer spacing. Collapse the block's own
   top/bottom margin so the gap matches adjacent sections exactly. */
.section-padding .rmri-faq {
    margin-top: 0;
    margin-bottom: 0;
}
.rmri-faq__heading {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.5rem;
    text-align: center;
}
.rmri-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.rmri-faq__item {
    border-radius: 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
html.light .rmri-faq__item {
    background: rgba(10,22,40,0.03);
    border-color: rgba(10,22,40,0.06);
}
.rmri-faq__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s ease;
}
.rmri-faq__toggle svg {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 1rem;
    /* Match FAQ open/close timing (0.35s) for cohesive motion. */
    transition: transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94), color 0.2s ease;
}
.rmri-faq__toggle:hover svg { color: var(--text-secondary); }
.rmri-faq__toggle.is-open svg { transform: rotate(180deg); }

/* Answer wrapper — JS animates max-height 0 → scrollHeight. Padding lives
   on the inner <p> so collapsed state has no residual padding glitch. */
.rmri-faq__answer {
    padding: 0;
}
.rmri-faq__answer p {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 1.25rem 1rem;
}

/* ══════════════════════════════════════════════════════════════════
   News Headline Infographic (.nh-*)
   Full-width (100vw) edge-to-edge band. Inner content aligns to
   the site container. Ticker + progress bar span the full width.
   ══════════════════════════════════════════════════════════════════ */

/* Screen-reader-only utility for headings that are visually suppressed. */
.nh-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.nh-section {
    padding: 0;
    margin: 0;
    background: transparent;
}
.nh-wrap {
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.nh-hero {
    position: relative;
    width: 100%;
    /* Viewport height minus fixed site header (5rem nav-inner) so the
       section fits exactly below the header when scrolled into view. */
    height: calc(100svh - 5rem);
    min-height: 600px;
    max-height: none;
    overflow: hidden;
    border-radius: 0;
    border: none;
    border-top: 1px solid rgba(31, 184, 236, 0.14);
    border-bottom: 1px solid rgba(31, 184, 236, 0.14);
    background: linear-gradient(160deg, var(--navy-900, #0A1628) 0%, #0B1120 100%);
    color: #F1F5F9;
    font-family: 'Inter', sans-serif;
}
@media (max-width: 767px) {
    .nh-hero {
        height: calc(100svh - 5rem);
        aspect-ratio: auto;
        min-height: 560px;
    }
}
html.light .nh-hero {
    background: linear-gradient(160deg, #0E2A45 0%, #123454 100%);
    border-color: rgba(14, 116, 144, 0.35);
}
html.light .nh-bg-overlay {
    background: linear-gradient(100deg,
        rgba(10, 30, 55, 0.72) 0%,
        rgba(10, 30, 55, 0.58) 40%,
        rgba(4, 60, 110, 0.35) 70%,
        rgba(4, 60, 110, 0.2) 100%);
}
html.light .nh-bg-grid {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}
html.light .nh-bg-glow--1 {
    background: radial-gradient(circle, rgba(14, 116, 144, 0.4) 0%, transparent 70%);
}
html.light .nh-bg-glow--2 {
    background: radial-gradient(circle, rgba(31, 184, 236, 0.25) 0%, transparent 70%);
}
html.light .nh-masthead {
    background: rgba(14, 30, 55, 0.75);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
html.light .nh-ticker {
    background: rgba(14, 30, 55, 0.78);
    border-top-color: rgba(255, 255, 255, 0.15);
}
html.light .nh-card__category,
html.light .nh-tag {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
}
html.light .nh-tag.is-active,
html.light .nh-tag[aria-pressed="true"] {
    background: rgba(31, 184, 236, 0.35);
    border-color: var(--brand-light, #1FB8EC);
}
html.light .nh-nav__btn {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Background image layers */
.nh-bg-layers { position: absolute; inset: 0; z-index: 0; }
.nh-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.nh-bg-img.is-active { opacity: 1; }

.nh-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        rgba(11, 17, 32, 0.9) 0%,
        rgba(11, 17, 32, 0.78) 40%,
        rgba(4, 60, 110, 0.5) 70%,
        rgba(4, 60, 110, 0.3) 100%);
}
.nh-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
}
.nh-bg-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    filter: blur(40px);
}
.nh-bg-glow--1 {
    width: 30rem; height: 30rem;
    top: -7.5rem; left: -3.75rem;
    background: radial-gradient(circle, rgba(4, 101, 174, 0.3) 0%, transparent 70%);
}
.nh-bg-glow--2 {
    width: 20rem; height: 20rem;
    bottom: -5rem; right: 9rem;
    background: radial-gradient(circle, rgba(31, 184, 236, 0.15) 0%, transparent 70%);
}

/* Masthead */
.nh-masthead {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(11, 17, 32, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
}
.nh-masthead__brand { display: flex; align-items: center; gap: 0.625rem; }
.nh-masthead__logo {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    color: #fff;
}
.nh-masthead__logo span { color: var(--brand-light, #1FB8EC); }
.nh-masthead__divider { width: 1px; height: 0.875rem; background: rgba(255, 255, 255, 0.3); }
.nh-masthead__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}
.nh-masthead__badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brand-light, #1FB8EC);
}
.nh-masthead__badge::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--brand-light, #1FB8EC);
    animation: nh-pulse-dot 1.8s ease-in-out infinite;
}
@media (max-width: 767px) {
    .nh-masthead__label,
    .nh-masthead__badge { font-size: 0.5625rem; letter-spacing: 0.12em; white-space: nowrap; }
    .nh-masthead__logo { font-size: 0.75rem; }
    .nh-masthead { padding: 0 0.75rem; }
    .nh-masthead__brand { gap: 0.5rem; }
}
@keyframes nh-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Progress dots */
.nh-progress-dots {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    z-index: 10;
}
@media (min-width: 1400px) {
    .nh-progress-dots { left: calc((100% - 1280px) / 2 - 2.25rem); }
}
.nh-progress-dot {
    /* Keep the visual dot small; enlarge the hit area with padding +
       transparent border so touch targets meet WCAG 2.5.8 (24x24). */
    width: 24px; height: 24px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    position: relative;
    transition: all 0.35s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nh-progress-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.35s ease;
}
.nh-progress-dot:hover::before { background: rgba(255, 255, 255, 0.85); }
.nh-progress-dot.is-active::before {
    background: var(--brand-light, #1FB8EC);
    transform: scale(1.6);
    box-shadow: 0 0 6px rgba(31, 184, 236, 0.7);
}
.nh-progress-dot:focus-visible {
    outline: 2px solid var(--brand-light, #1FB8EC);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Inner row — matches site .i2o-container width (1280px max),
   spans between masthead top and ticker bottom. */
.nh-inner {
    position: absolute;
    left: 0; right: 0;
    top: 2.5rem;
    bottom: 1.625rem;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem 0 2.75rem;
    display: flex;
    align-items: stretch;
    gap: 2rem;
    z-index: 5;
}
@media (min-width: 640px) { .nh-inner { padding: 0 2rem 0 3.25rem; } }
@media (min-width: 1400px) { .nh-inner { padding: 0 2rem; } }

/* Text column */
.nh-content {
    flex: 1 1 auto;
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 0;
}
@media (max-width: 767px) {
    .nh-content { padding: 1.5rem 0; max-width: 100%; }
    .nh-card .nh-card__category,
    .nh-card__category {
        font-size: 0.75rem !important;
        letter-spacing: 0.06em !important;
        padding: 0.25rem 0.6rem !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }
}

.nh-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.125rem;
    opacity: 0;
    animation: nh-fade-up 0.6s 0.2s ease forwards;
}
.nh-eyebrow__line { width: 1.125rem; height: 2px; background: var(--brand-light, #1FB8EC); }
.nh-eyebrow__text {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-light, #1FB8EC);
}
@keyframes nh-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Headline stage + cards */
.nh-stage {
    position: relative;
    width: 100%;
    min-height: 19rem;
    overflow: hidden;
}
@media (max-width: 767px) {
    .nh-stage { min-height: 16rem; }
}
.nh-card {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.nh-card__category {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92); /* AA compliant on dark overlay */
    width: fit-content;
    line-height: 1.8;
    margin: 0;
}
.nh-card__headline {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 40rem;
}
.nh-card__headline .nh-metric,
.nh-card__headline em.nh-metric {
    color: var(--brand-light, #1FB8EC);
    font-weight: 700;
    font-style: normal;
}
.nh-card__sub {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.88); /* was 0.7 — bumped for WCAG AA on overlay */
    max-width: 32rem;
    margin: 0;
}

.nh-card.is-entering { animation: nh-card-enter 0.6s 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.nh-card.is-exiting  { animation: nh-card-exit 0.4s cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes nh-card-enter {
    from { transform: translateY(50px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes nh-card-exit {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(-44px); opacity: 0; }
}
.nh-card.is-entering .nh-card__category { animation: nh-card-enter 0.5s 0.35s  cubic-bezier(0.22,1,0.36,1) both; }
.nh-card.is-entering .nh-card__headline { animation: nh-card-enter 0.6s 0.42s cubic-bezier(0.22,1,0.36,1) both; }
.nh-card.is-entering .nh-card__sub      { animation: nh-card-enter 0.55s 0.5s cubic-bezier(0.22,1,0.36,1) both; }

/* Tags */
.nh-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 2.25rem;
    width: 100%;
    max-width: 40rem;
    opacity: 0;
    animation: nh-fade-up 0.6s 0.5s ease forwards;
}
@media (max-width: 639px) {
    .nh-tags { grid-template-columns: repeat(2, 1fr); }
}
.nh-tag {
    width: 100%;
    text-align: center;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85); /* was 0.55 — AA contrast on dark overlay */
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    line-height: 1.6;
}
.nh-tag:hover { color: #fff; border-color: rgba(31, 184, 236, 0.6); }
.nh-tag:focus-visible {
    outline: 2px solid var(--brand-light, #1FB8EC);
    outline-offset: 2px;
}
.nh-tag.is-active,
.nh-tag[aria-pressed="true"] {
    border-color: var(--brand-light, #1FB8EC);
    background: rgba(31, 184, 236, 0.22);
    color: #fff;
    box-shadow: 0 0 8px rgba(31, 184, 236, 0.3);
}

/* Right accent panel — pinned to container's right edge */
.nh-accent {
    position: relative;
    flex: 0 0 12rem;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem 0 1.5rem 1.75rem;
}
.nh-accent::before {
    content: '';
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.15) 70%, transparent);
}
@media (max-width: 767px) {
    .nh-accent { display: none; }
}

.nh-frame-counter {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.8); /* AA on dark overlay */
    margin: 0 0 1rem;
    line-height: 1.8;
    text-transform: uppercase;
}
.nh-frame-counter strong { color: #fff; font-size: 1rem; }

.nh-mini-stat {
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
}
.nh-mini-stat.is-visible { opacity: 1; transform: translateY(0); }
.nh-mini-stat__value {
    font-family: 'Clash Display', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    background: linear-gradient(135deg, #fff 40%, var(--brand-light, #1FB8EC) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.nh-mini-stat__label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 0.3125rem;
    line-height: 1.6;
}

/* Nav buttons */
.nh-nav {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.nh-nav__btn {
    /* 2.75rem (44px) comfortably meets WCAG 2.5.8. */
    width: 2.75rem; height: 2.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.22s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
}
.nh-nav__btn:hover {
    border-color: var(--brand-light, #1FB8EC);
    color: #fff;
    background: rgba(31, 184, 236, 0.22);
}
.nh-nav__btn:focus-visible {
    outline: 2px solid var(--brand-light, #1FB8EC);
    outline-offset: 2px;
    border-color: var(--brand-light, #1FB8EC);
    background: rgba(31, 184, 236, 0.22);
    color: #fff;
}

/* Progress bar — full-width, sits just above the ticker. */
.nh-progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.625rem; /* sits flush above .nh-ticker (1.625rem tall) */
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 10;
}
.nh-progress-bar__fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0066CC, var(--brand-light, #1FB8EC));
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(31, 184, 236, 0.45);
}

/* BG credit */
/* BG credit — aria-hidden in markup, so contrast requirement is relaxed.
   Still bumped from 0.3 → 0.55 for sighted low-vision users. */
.nh-bg-credit {
    position: absolute;
    bottom: 2rem;
    right: 12.5rem;
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.06em;
    z-index: 10;
    pointer-events: none;
}
@media (max-width: 767px) { .nh-bg-credit { display: none; } }

/* Ticker */
.nh-ticker {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1.625rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(11, 17, 32, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
}
.nh-ticker__label {
    flex-shrink: 0;
    padding: 0 0.875rem;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-light, #1FB8EC);
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    height: 100%;
    display: flex;
    align-items: center;
}
.nh-ticker__track { flex: 1; overflow: hidden; }
.nh-ticker__inner {
    display: flex;
    white-space: nowrap;
    animation: nh-ticker-scroll 28s linear infinite;
}
.nh-ticker__item {
    font-size: 0.5625rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.nh-ticker__item::after {
    content: '•';
    color: rgba(255, 255, 255, 0.45);
    margin: 0 1rem;
    display: inline-block;
}
@keyframes nh-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .nh-ticker__inner { animation-duration: 90s; }
    .nh-bg-img { transition: none; }
    .nh-card.is-entering, .nh-card.is-exiting { animation-duration: 0.01s; }
}

/* ══════════════════════════════════════════════════════════════════
   Blog Single (single.php) — hero parity, no inline CSS
   ══════════════════════════════════════════════════════════════════ */
.blog-single {
    position: relative;
    overflow: hidden;
}
.blog-hero {
    padding-top: 7rem;
    padding-bottom: 2.5rem;
}
.blog-hero__inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
.blog-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.3s ease;
}
.blog-back-link:hover,
.blog-back-link:focus-visible { color: var(--brand-light); }

.blog-hero__eyebrow {
    margin: 0 0 1.25rem;
}
.blog-hero__title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
    color: var(--text-primary);
}
.blog-hero__excerpt {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.7;
    margin: 0 0 1.75rem;
}
.blog-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}
.blog-hero__author {
    font-weight: 500;
    color: var(--text-secondary);
}
.blog-hero__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
}
.blog-body {
    padding-bottom: 5rem;
}
.blog-body__inner {
    max-width: 48rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}
@media (min-width: 640px) {
    .blog-hero { padding-top: 9rem; padding-bottom: 3.5rem; }
    .blog-body { padding-bottom: 7rem; }
}

/* ═══ 404 Error Page ═══ */
.error-main {
    position: relative;
    overflow: hidden;
}
.error-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}
.error-orb--left {
    top: 30vh;
    left: -5rem;
    width: 16rem;
    height: 16rem;
    background: rgba(4, 101, 174, 0.05);
}
.error-orb--right {
    top: 50vh;
    right: -8rem;
    width: 20rem;
    height: 20rem;
    background: rgba(31, 184, 236, 0.05);
}
.error-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-inner {
    max-width: 42rem;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}
.error-code {
    font-family: 'Clash Display', sans-serif;
    font-size: clamp(6rem, 10vw, 9rem);
    font-weight: 700;
    color: rgba(31, 184, 236, 0.2);
    margin-bottom: 1rem;
    text-shadow: 0 0 60px rgba(31, 184, 236, 0.15);
    line-height: 1;
}
.error-title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    margin-bottom: 1rem;
}
.error-desc {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin: 0 auto 2.5rem;
    max-width: 28rem;
}
.error-cta-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.error-cta {
    padding: 1rem 2rem;
}
@media (min-width: 640px) {
    .error-cta-row { flex-direction: row; }
}
.error-helpful {
    margin-top: 4rem;
    border-radius: 1rem;
    padding: 2rem;
}
.error-helpful-title {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.error-links-grid {
    display: grid;
    gap: 0.75rem;
    text-align: left;
}
@media (min-width: 640px) {
    .error-links-grid { grid-template-columns: repeat(2, 1fr); }
}
.error-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}
.error-link:hover,
.error-link:focus-visible {
    color: var(--brand-light);
}
.error-link-icon {
    color: rgba(31, 184, 236, 0.6);
    flex-shrink: 0;
}

/* ═══ Blog Listing (index.php) ═══ */
.blog-main {
    position: relative;
    overflow: hidden;
}
.blog-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    pointer-events: none;
}
.blog-orb--left {
    top: 30vh;
    left: -5rem;
    width: 16rem;
    height: 16rem;
    background: rgba(4, 101, 174, 0.05);
}
.blog-orb--right {
    top: 80vh;
    right: -8rem;
    width: 20rem;
    height: 20rem;
    background: rgba(31, 184, 236, 0.05);
}
.blog-listing-hero {
    padding-top: 8rem;
    padding-bottom: 4rem;
}
.blog-listing-hero__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.blog-listing-hero__center {
    text-align: center;
    max-width: 48rem;
    margin: 0 auto;
}
.blog-listing-hero__eyebrow {
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(31, 184, 236, 0.2);
}
.blog-listing-hero__title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: clamp(1.875rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}
.blog-listing-hero__sub {
    color: var(--text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
}
.blog-listing-grid-section {
    padding-bottom: 6rem;
}
.blog-listing-grid-inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}
.blog-grid {
    display: grid;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(3, 1fr); }
}
.blog-card {
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.blog-card:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.06));
    border-color: rgba(31, 184, 236, 0.1);
}
.blog-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 1rem;
}
.blog-card__title {
    font-family: 'Clash Display', sans-serif;
    font-weight: 700;
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}
.blog-card:hover .blog-card__title {
    color: var(--brand-light);
}
.blog-card__excerpt {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
}
.blog-card__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand-light);
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: auto;
}
.blog-card__arrow {
    transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__arrow {
    transform: translateX(4px);
}
.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}
.blog-pagination-item a,
.blog-pagination-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.blog-pagination-item a:hover,
.blog-pagination-item a:focus-visible {
    color: var(--brand-light);
    background: rgba(4, 101, 174, 0.1);
}
.blog-pagination-item .current {
    background: rgba(4, 101, 174, 0.2);
    color: var(--brand-light);
}
.blog-empty {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.125rem;
    padding: 4rem 0;
}
@media (min-width: 640px) {
    .blog-listing-hero { padding-top: 10rem; padding-bottom: 5rem; }
    .blog-listing-grid-section { padding-bottom: 8rem; }
    .blog-card { padding: 2rem; }
}


/* ───────────────────────────────────────────────────────────
 * Flex section background overrides
 * Editor picks a value from the "Section Background (override)"
 * field on any flex layout — wrapper div gets [data-bg-style="x"].
 * Empty / no wrapper = section's default background applies.
 * Each value is themed for both dark + light HTML modes.
 * ─────────────────────────────────────────────────────────── */
.flex-bg-wrap { display: block; position: relative; }
.flex-bg-wrap > section { background: transparent !important; }

/* Use theme palette CSS vars so light/dark mode auto-flips. Also matches
 * existing site sections that use --navy-950 / --navy-900 directly. */

/* Solid — Dark navy (legacy alias, kept for back-compat).
 * Theme-aware: dark mode = navy, light mode = white so toggle flips correctly. */
[data-bg-style="dark"]              { background: #0B1220; }
html.light [data-bg-style="dark"]   { background: #FFFFFF; }

/* Solid — Navy 950 (page bg) */
[data-bg-style="navy-950"]          { background: var(--navy-950); }

/* Solid — Navy 900 */
[data-bg-style="navy-900"]          { background: var(--navy-900); }

/* Solid — Light (pure white) */
[data-bg-style="light"]             { background: #FFFFFF; }
html.light [data-bg-style="light"]  { background: #FFFFFF; }

/* Solid — Light soft */
[data-bg-style="light-soft"]        { background: #F4F7FB; }

/* Transparent (parent bg shows through) */
[data-bg-style="transparent"]       { background: transparent; }

/* Gradient — Blue (matches existing home/news-headline aesthetic) */
[data-bg-style="gradient-blue"]     { background: linear-gradient(180deg,#0F1B33 0%,#0A2B66 100%); }
html.light [data-bg-style="gradient-blue"] { background: linear-gradient(180deg,#EDF3FF 0%,#DCE7FF 100%); }

/* Gradient — Navy (950 → 900) — same as several built-in sections */
[data-bg-style="gradient-navy"]     { background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%); }

/* Gradient — Cyan glow */
[data-bg-style="gradient-cyan"]     { background: radial-gradient(80% 60% at 50% 0%, rgba(31,184,236,0.25) 0%, transparent 70%), var(--navy-950); }
html.light [data-bg-style="gradient-cyan"] { background: radial-gradient(80% 60% at 50% 0%, rgba(14,116,144,0.10) 0%, transparent 70%), #FFFFFF; }