/* ==========================================================================
   reven.you — homepage theme layer
   --------------------------------------------------------------------------
   This page is the current marketing homepage (all of its content) with a
   light/dark toggle layered on top.

   The page's structure, layout and copy live in index.html, which carries the
   original inline stylesheet. This file does NOT redeclare the layout — it
   only (a) defines the colour tokens for both themes, and (b) overrides the
   handful of hard-coded light colours the original sheet wrote directly
   (`#fff`, `rgba(18,19,23,…)`, `#f8f9fa`, …) so they follow the active theme.

   Theme resolution
     <html> has no data-theme        → follow the operating system
     <html data-theme="light">       → forced light
     <html data-theme="dark">        → forced dark

   The dark palette is the one used by the /loaders page (near-black canvas,
   hairline borders, one blue accent). The light palette is the one the
   homepage has always had.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — LIGHT (the homepage's original palette)
   -------------------------------------------------------------------------- */
:root,
:root[data-theme='light'] {
    --bg-primary: #ffffff;
    --text-primary: #121317;
    --text-secondary: #5f6368;
    --accent-blue: #1a73e8;
    --border-color: rgba(33, 34, 38, 0.08);
    --font-family: 'Google Sans Flex', sans-serif;
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Surface + strong-line tokens the original sheet did not have; used by
       the overrides at the bottom so both themes share one vocabulary. */
    --surface-solid: #ffffff;
    --surface-2: rgba(255, 255, 255, 0.85);
    --surface-soft: rgba(18, 19, 23, 0.02);
    --surface-soft-2: rgba(18, 19, 23, 0.04);
    --line-soft: rgba(18, 19, 23, 0.04);
    --line-softer: rgba(18, 19, 23, 0.02);
    --scrim: rgba(248, 249, 250, 0.5);
    --glow-blue: rgba(26, 115, 232, 0.04);
    --glow-blue-2: rgba(26, 115, 232, 0.02);
    --hairline: rgba(18, 19, 23, 0.06);
    --shadow-pop: rgba(18, 19, 23, 0.08);
    color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Tokens — DARK (the /loaders palette)
   -------------------------------------------------------------------------- */
:root[data-theme='dark'] {
    --bg-primary: #07080c;
    --text-primary: #eceef5;
    --text-secondary: #888ea2;
    --accent-blue: #3b82f6;
    --border-color: rgba(255, 255, 255, 0.09);
    --card-bg: #0e111a;
    --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

    --surface-solid: #0e111a;
    --surface-2: rgba(14, 17, 26, 0.85);
    --surface-soft: rgba(255, 255, 255, 0.03);
    --surface-soft-2: rgba(255, 255, 255, 0.05);
    --line-soft: rgba(255, 255, 255, 0.06);
    --line-softer: rgba(255, 255, 255, 0.03);
    --scrim: rgba(11, 13, 19, 0.5);
    --glow-blue: rgba(59, 130, 246, 0.08);
    --glow-blue-2: rgba(59, 130, 246, 0.05);
    --hairline: rgba(255, 255, 255, 0.08);
    --shadow-pop: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

/* System dark, and the visitor has not chosen — same as forced dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg-primary: #07080c;
        --text-primary: #eceef5;
        --text-secondary: #888ea2;
        --accent-blue: #3b82f6;
        --border-color: rgba(255, 255, 255, 0.09);
        --card-bg: #0e111a;
        --card-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);

        --surface-solid: #0e111a;
        --surface-2: rgba(14, 17, 26, 0.85);
        --surface-soft: rgba(255, 255, 255, 0.03);
        --surface-soft-2: rgba(255, 255, 255, 0.05);
        --line-soft: rgba(255, 255, 255, 0.06);
        --line-softer: rgba(255, 255, 255, 0.03);
        --scrim: rgba(11, 13, 19, 0.5);
        --glow-blue: rgba(59, 130, 246, 0.08);
        --glow-blue-2: rgba(59, 130, 246, 0.05);
        --hairline: rgba(255, 255, 255, 0.08);
        --shadow-pop: rgba(0, 0, 0, 0.5);
        color-scheme: dark;
    }
}

/* Smooth the colour change when the visitor flips the toggle. */
html.theme-anim,
html.theme-anim body,
html.theme-anim .page-wrapper {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --------------------------------------------------------------------------
   3. Overrides for the hard-coded colours in the page's inline sheet
   --------------------------------------------------------------------------
   Everything below maps a literal from the original stylesheet onto a token.
   Selectors mirror the originals so specificity wins by source order (this
   file is loaded after the inline sheet).
   -------------------------------------------------------------------------- */

/* Buttons — the primary button was a fixed near-black; in dark mode it must
   invert so it still reads as the strongest element on the page. */
.btn-primary {
    background-color: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}
.btn-primary:hover {
    background-color: var(--text-secondary);
    border-color: var(--text-secondary);
    box-shadow: 0 4px 12px var(--shadow-pop);
}
.btn-outline {
    background: var(--surface-solid);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar-track { background: var(--surface-soft); }
::-webkit-scrollbar-thumb { background: var(--surface-soft-2); }
::selection {
    background: var(--surface-soft-2);
    color: var(--text-primary);
}

/* Comparison-table check / cross / neutral circles. In dark mode the "yes"
   tick is the same accent blue the /loaders page uses for its highlighted
   word (--accent: #3b82f6), so it reads as one deliberate colour; light mode
   keeps the original near-black circle. */
:root[data-theme='dark'] .check-icon-circle { background-color: #3b82f6; color: #ffffff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .check-icon-circle { background-color: #3b82f6; color: #ffffff; }
}

/* Surfaces that were literal white / near-white rgba */
.showcase img { background-color: var(--surface-solid); }
.calculator-controls,
.results-card,
.retail-markup-settings { background-color: var(--surface-2); }
.tooltip-content { background-color: var(--surface-solid); }
.tooltip-arrow { border-color: var(--surface-solid) transparent transparent transparent; }
.view-toggle-btn.active {
    background-color: var(--surface-solid);
    box-shadow: 0 2px 6px var(--shadow-pop);
}
.feature-carousel-arrow { background: var(--surface-solid); }

/* Soft tinted rows / panels */
.toggle-card {
    background-color: var(--surface-soft);
    border-color: var(--line-soft);
}
.diff-icon,
.feature-item-icon,
.feature-item-badge,
.view-toggle-container,
.bar-container,
.comparison-table th.col-nextgen,
.comparison-table td.col-nextgen,
.platform-price-row td.price-accent { background-color: var(--surface-soft-2); }
.input, input[type='number'] {
    background-color: var(--surface-soft);
    border-color: var(--line-soft);
}

/* Comparison-table hairlines and hovers */
.comparison-table td { border-bottom-color: var(--line-soft); }
.comparison-table tr.section-header-row td { background-color: var(--line-softer); }
.comparison-table tr:hover td { background-color: var(--line-softer); }
.comparison-table tr:hover td.col-nextgen { background-color: var(--glow-blue-2); }
.comparison-table th { background-color: var(--surface-soft-2); }
.comparison-table th.col-nextgen { background-color: var(--surface-soft-2); }

/* Sliders + switches */
input[type='range'] { background: var(--surface-soft-2); }
.slider-toggle { background-color: var(--surface-soft-2); }
.slider-toggle:before { background-color: var(--surface-solid); }

/* Cookie-consent banner (shared component cookie-consent.js). It is authored
   light-only, so on this page we re-skin its card to the active theme. Scoped
   to this page's stylesheet only — other pages are unaffected. */
/* Forced dark. */
:root[data-theme='dark'] .crm-cc-card {
    background: #0e111a;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
:root[data-theme='dark'] .crm-cc-title,
:root[data-theme='dark'] .crm-cc-row-title,
:root[data-theme='dark'] .crm-cc-text a { color: #eceef5; }
:root[data-theme='dark'] .crm-cc-text,
:root[data-theme='dark'] .crm-cc-row-desc { color: #888ea2; }
:root[data-theme='dark'] .crm-cc-state {
    color: #eceef5;
    background: rgba(255, 255, 255, 0.06);
}
:root[data-theme='dark'] .crm-cc-toggle { color: #eceef5; }
:root[data-theme='dark'] .crm-cc-btn-primary { background: #eceef5; color: #07080c; }
:root[data-theme='dark'] .crm-cc-btn-primary:hover { background: #ffffff; }
:root[data-theme='dark'] .crm-cc-btn-ghost {
    background: transparent;
    color: #eceef5;
    border-color: rgba(255, 255, 255, 0.2);
}
:root[data-theme='dark'] .crm-cc-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }
:root[data-theme='dark'] .crm-cc-detail { border-top-color: rgba(255, 255, 255, 0.08); }
:root[data-theme='dark'] .crm-cc-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
:root[data-theme='dark'] .crm-cc-footer-link { color: #eceef5; }
:root[data-theme='dark'] .crm-cc-btn { border-color: rgba(255, 255, 255, 0.2); }

/* System dark, and the visitor has not chosen a theme. The card alone used to
   be re-skinned here, which left the title near-black on the dark card and
   turned the ghost button's hover into dark-on-dark. Mirror the whole forced-
   dark block so both dark paths are identical. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .crm-cc-card {
        background: #0e111a;
        border: 1px solid rgba(255, 255, 255, 0.09);
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
    }
    :root:not([data-theme]) .crm-cc-title,
    :root:not([data-theme]) .crm-cc-row-title,
    :root:not([data-theme]) .crm-cc-text a { color: #eceef5; }
    :root:not([data-theme]) .crm-cc-text,
    :root:not([data-theme]) .crm-cc-row-desc { color: #888ea2; }
    :root:not([data-theme]) .crm-cc-state {
        color: #eceef5;
        background: rgba(255, 255, 255, 0.06);
    }
    :root:not([data-theme]) .crm-cc-toggle { color: #eceef5; }
    :root:not([data-theme]) .crm-cc-btn-primary { background: #eceef5; color: #07080c; }
    :root:not([data-theme]) .crm-cc-btn-primary:hover { background: #ffffff; }
    :root:not([data-theme]) .crm-cc-btn-ghost {
        background: transparent;
        color: #eceef5;
        border-color: rgba(255, 255, 255, 0.2);
    }
    :root:not([data-theme]) .crm-cc-btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }
    :root:not([data-theme]) .crm-cc-detail { border-top-color: rgba(255, 255, 255, 0.08); }
    :root:not([data-theme]) .crm-cc-row { border-bottom-color: rgba(255, 255, 255, 0.06); }
    :root:not([data-theme]) .crm-cc-footer-link { color: #eceef5; }
    :root:not([data-theme]) .crm-cc-btn { border-color: rgba(255, 255, 255, 0.2); }
}

/* Glows */
.showcase-glow { background: radial-gradient(circle, var(--glow-blue) 0%, rgba(255, 255, 255, 0) 70%); }
.comparison-glow,
.calculator-glow,
.results-card-glow { background: radial-gradient(circle, var(--glow-blue-2) 0%, rgba(255, 255, 255, 0) 70%); }

/* Footer */
.footer {
    border-top-color: var(--hairline);
    background-color: var(--scrim);
}
.savings-highlight { border-top-color: var(--hairline); }
.platform-price-row td { background-color: var(--glow-blue) !important; }

/* Footer link lists (Privacy / Terms / DPA / … and the comparison links).
   On desktop they keep the original single row; on mobile each link stacks
   onto its own line. */
@media (max-width: 960px) {
    .footer-links,
    .footer-compare {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}

/* Mobile drawer */
.mobile-drawer { background: var(--bg-primary); }
.mobile-link:hover { background: var(--surface-soft); }

/* Muted greys that were literal hex in the original sheet */
.result-desc,
.result-subtext,
.footer-logo-text,
.footer-copyright,
.retail-desc { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   4. Theme toggle button (same control the /new and /reva.new pages use)
   -------------------------------------------------------------------------- */
.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--surface-solid);
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--text-secondary); }
.theme-toggle .ico {
    position: absolute;
    width: 18px;
    height: 18px;
    transition: opacity 0.26s ease, transform 0.26s ease;
}
.theme-toggle .ico-sun,
.theme-toggle .ico-moon { opacity: 0; transform: scale(0.6) rotate(-30deg); }

:root[data-theme='dark'] .theme-toggle .ico-sun { opacity: 0; }
:root[data-theme='dark'] .theme-toggle .ico-moon { opacity: 1; transform: none; }
:root[data-theme='light'] .theme-toggle .ico-sun { opacity: 1; transform: none; }
:root[data-theme='light'] .theme-toggle .ico-moon { opacity: 0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .theme-toggle .ico-moon { opacity: 1; transform: none; }
    :root:not([data-theme]) .theme-toggle .ico-sun { opacity: 0; }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .theme-toggle .ico-sun { opacity: 1; transform: none; }
    :root:not([data-theme]) .theme-toggle .ico-moon { opacity: 0; }
}

/* Where the toggle sits in the header, and the mobile drawer variant. */
.nav-cta { display: flex; align-items: center; gap: 12px; }
.theme-toggle-mobile { display: none; }

@media (max-width: 960px) {
    .theme-toggle { display: none; }          /* header is tight on phones … */
    .theme-toggle-mobile { display: grid; }    /* … so the drawer carries it */
    .mobile-drawer-header { gap: 12px; }
}

/* --------------------------------------------------------------------------
   5. Signup form (placeholder popup)
   --------------------------------------------------------------------------
   Styled but dormant: nothing opens it yet. Included so the launch popup can
   be switched from the Facebook group to this form with a one-line change.
   -------------------------------------------------------------------------- */
.rv-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.rv-field { display: flex; flex-direction: column; gap: 6px; }
.rv-field label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.rv-field input {
    font-family: var(--font-family);
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-soft);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rv-field input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-blue) 22%, transparent);
}
.rv-field input.rv-invalid { border-color: #ea4335; }
.rv-error { font-size: 12px; color: #ea4335; min-height: 0; }
.rv-submit {
    margin-top: 4px;
    border: 1px solid var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
    border-radius: 100px;
    padding: 13px 24px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.rv-submit:hover { opacity: 0.88; }
.rv-submit:active { transform: scale(0.99); }
.rv-success { text-align: center; padding: 8px 0; }
.rv-success .rv-success-mark {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
}
.rv-success h3 { font-size: 20px; font-weight: 500; color: var(--text-primary); margin: 0 0 8px; }
.rv-success p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ==========================================================================
   CAROUSELS (all three: features, AI agents, reviews)
   --------------------------------------------------------------------------
   Card colours follow the page theme (no inversion). The features carousel
   (the first one, under the product image) keeps the /loaders blue (#3b82f6)
   for its icon tiles and active pagination dot.

   Clipping fix: the carousel viewport clipped its own cards with
   `overflow: hidden` and only 20px of top / 60px of bottom padding. The active
   card is scaled 1.15x, so its top was trimmed and the card shadows were sliced
   off at the bottom. The viewport still needs `overflow: hidden` (the track
   really must clip horizontally as cards slide), but padding sits *inside* the
   clip box, so generous vertical padding gives both the scaled card and its
   shadow room to breathe.
   ========================================================================== */

.feature-carousel-viewport {
    padding: 56px 0 120px;
}

/* /loaders blue accents on the features carousel. */
.features-section .feature-carousel-card .feature-item-icon {
    background: rgba(59, 130, 246, 0.12);
    color: #2c64ed;
}
:root[data-theme='dark'] .features-section .feature-carousel-card .feature-item-icon {
    background: rgba(59, 130, 246, 0.16);
    color: #6f92ff;
}
.features-section .feature-carousel-dot.active { background: #3b82f6; }

/* ---- Light mode only: make the carousel cards stand out ----
   On a plain white page the cards used --card-bg (75% white) with a very faint
   shadow, so they barely separated from the background. In light mode they get
   a solid #ebebeb surface plus a stronger, softer shadow for real elevation.
   Dark mode is untouched — it already reads via the accent-tinted cards. */
:root[data-theme='light'] .feature-carousel-card {
    background: #ebebeb;
    border-color: rgba(18, 19, 23, 0.10);
    box-shadow: 0 12px 34px rgba(18, 19, 23, 0.13), 0 2px 6px rgba(18, 19, 23, 0.07);
}
/* The icon tiles and badges sit on the darker card, so nudge them lighter/
   cleaner to keep their contrast against #ebebeb. */
:root[data-theme='light'] .feature-carousel-card .feature-item-icon {
    background: #ffffff;
    color: #2c64ed;
    box-shadow: 0 1px 3px rgba(18, 19, 23, 0.08);
}
:root[data-theme='light'] .feature-carousel-card .feature-item-badge {
    background: rgba(255, 255, 255, 0.7);
    color: #5f6368;
}
/* The active card is the focal point: lift it a little further. */
:root[data-theme='light'] .feature-carousel-card.is-active {
    background: #e6e6e6;
    box-shadow: 0 18px 50px rgba(18, 19, 23, 0.16), 0 3px 10px rgba(18, 19, 23, 0.08);
}

/* Also covers a visitor with no saved choice whose OS is light. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .feature-carousel-card {
        background: #ebebeb;
        border-color: rgba(18, 19, 23, 0.10);
        box-shadow: 0 12px 34px rgba(18, 19, 23, 0.13), 0 2px 6px rgba(18, 19, 23, 0.07);
    }
    :root:not([data-theme]) .feature-carousel-card .feature-item-icon {
        background: #ffffff;
        color: #2c64ed;
        box-shadow: 0 1px 3px rgba(18, 19, 23, 0.08);
    }
    :root:not([data-theme]) .feature-carousel-card .feature-item-badge {
        background: rgba(255, 255, 255, 0.7);
        color: #5f6368;
    }
    :root:not([data-theme]) .feature-carousel-card.is-active {
        background: #e6e6e6;
        box-shadow: 0 18px 50px rgba(18, 19, 23, 0.16), 0 3px 10px rgba(18, 19, 23, 0.08);
    }
}


/* ==========================================================================
   PAGE BACKGROUND
   --------------------------------------------------------------------------
   The four coloured blobs are removed. The page is a plain surface: white in
   light mode, and the same near-black (#07080c, --bg-primary) as /loaders in
   dark mode.
   ========================================================================== */
.backdrop-blobs { display: none; }

/* ==========================================================================
   "WHAT MAKES REVEN.YOU DIFFERENT" CARDS
   --------------------------------------------------------------------------
   .diff-card used --card-bg (75% white) with --border-color (8% black) and a 3%
   shadow. On a plain white page that made the cards almost indistinguishable
   from the background — barely readable as separate cards. Light mode now gives
   them the same treatment as the carousels: a solid #ebebeb surface, a firmer
   border and a real two-layer shadow. Matches the carousel card vocabulary so
   the page reads consistently.

   Dark mode keeps its own look (a dark card on a near-black page already reads
   clearly); these rules are light-mode only.
   ========================================================================== */

:root[data-theme='light'] .diff-card {
    background-color: #ebebeb;
    border-color: rgba(18, 19, 23, 0.10);
    box-shadow: 0 12px 34px rgba(18, 19, 23, 0.13), 0 2px 6px rgba(18, 19, 23, 0.07);
}
/* The icon tile sat on a 4% tint, which vanishes on the grey card. Give it a
   white chip so the glyph keeps its contrast (as on the carousel cards). */
:root[data-theme='light'] .diff-icon {
    background-color: #ffffff;
    color: #2c64ed;
    box-shadow: 0 1px 3px rgba(18, 19, 23, 0.08);
}
/* Hover already lifts the card; keep the lift but deepen the resting shadow's
   successor so the state change still reads on the grey surface. */
:root[data-theme='light'] .diff-card:hover {
    box-shadow: 0 20px 50px rgba(18, 19, 23, 0.18), 0 4px 12px rgba(18, 19, 23, 0.09);
}

/* Same, for a visitor with no saved choice whose OS is light. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .diff-card {
        background-color: #ebebeb;
        border-color: rgba(18, 19, 23, 0.10);
        box-shadow: 0 12px 34px rgba(18, 19, 23, 0.13), 0 2px 6px rgba(18, 19, 23, 0.07);
    }
    :root:not([data-theme]) .diff-icon {
        background-color: #ffffff;
        color: #2c64ed;
        box-shadow: 0 1px 3px rgba(18, 19, 23, 0.08);
    }
    :root:not([data-theme]) .diff-card:hover {
        box-shadow: 0 20px 50px rgba(18, 19, 23, 0.18), 0 4px 12px rgba(18, 19, 23, 0.09);
    }
}

/* ==========================================================================
   MEGA MENU — DARK MODE
   --------------------------------------------------------------------------
   The mega menu is hard-coded light in the page's own stylesheet: a
   rgba(255,255,255,0.97) panel, an almost invisible 6% black shadow, and two
   dark tints (rgba(18,19,23,0.03) hover, 0.04 icon chip) that vanish entirely
   on a dark surface. Text and borders already use the theme tokens, so only the
   surfaces need overriding here.
   ========================================================================== */

:root[data-theme='dark'] .mega-menu {
    background: #0e111a;                       /* the card surface, not white */
    border-bottom-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
:root[data-theme='dark'] .mega-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
:root[data-theme='dark'] .mega-menu-item-icon {
    background: rgba(255, 255, 255, 0.06);
    color: #6f92ff;                            /* /loaders blue, as elsewhere */
}

/* Same treatment when the visitor has no saved choice and the OS is dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .mega-menu {
        background: #0e111a;
        border-bottom-color: rgba(255, 255, 255, 0.09);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    }
    :root:not([data-theme]) .mega-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
    :root:not([data-theme]) .mega-menu-item-icon {
        background: rgba(255, 255, 255, 0.06);
        color: #6f92ff;
    }
}

/* ---- Mobile drawer: same dark tints, same fix ---- */
:root[data-theme='dark'] .mobile-link:hover { background: rgba(255, 255, 255, 0.06); }
:root[data-theme='dark'] .mobile-drawer { box-shadow: -8px 0 30px rgba(0, 0, 0, 0.5); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .mobile-link:hover { background: rgba(255, 255, 255, 0.06); }
    :root:not([data-theme]) .mobile-drawer { box-shadow: -8px 0 30px rgba(0, 0, 0, 0.5); }
}

/* --------------------------------------------------------------------------
   6. Mobile header sizing
   --------------------------------------------------------------------------
   The header rule in index.html's inline <style> hides .nav-cta and the
   desktop theme toggle below 960px, but that sheet is loaded BEFORE this file,
   so the '.nav-cta { display: flex }' declaration above was winning and the
   full-size "Create Your Free Account" button (217px) plus the 24px wordmark
   crowded the 390px bar. These rules are last, so they win again.

   The CTA stays in the header (it is the primary conversion action) — it is
   just scaled down and given room; the hamburger still carries the full menu.
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .navbar { padding: 10px 16px; gap: 12px; }
    .nav-logo-text { font-size: 1.15rem; }

    .nav-cta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .nav-cta .btn-primary {
        font-size: 12px;
        padding: 8px 16px;
        white-space: nowrap;
    }

    .hamburger { margin-left: 4px; }
}

/* Very small phones: keep the CTA but let it shrink further. */
@media (max-width: 400px) {
    .navbar { padding: 10px 12px; gap: 8px; }
    .nav-logo-text { font-size: 1.05rem; }
    .nav-cta .btn-primary { font-size: 11px; padding: 7px 12px; }
}