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

/* ── Smooth page transitions ───────────────────────────────────────────
   Cross-document View Transitions: a quick cross-fade between same-origin
   navigations instead of the white flash of a hard reload. Chromium-only
   (Chrome/Edge); other browsers ignore these rules and navigate as before.
   Gated on no-preference so reduced-motion users keep the instant default.
   Paired with the <script type="speculationrules"> in _Layout, which
   prefetches the next page on hover so the swap is near-instant. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 0.2s; }

    /* In-session soft-nav (softnav.js) mounts each page in a .spa-page wrapper.
       A short opacity fade gives the swap a smooth feel - geometry-based, so it
       doesn't interfere with the lazy IntersectionObservers the way a frozen
       view-transition snapshot would. */
    .spa-page { animation: spa-fade-in 0.18s ease both; }
}
@keyframes spa-fade-in { from { opacity: 0; } to { opacity: 1; } }

:root {
    --bg:     #040d1a;
    --bg2:    #0a1a2e;
    --bg3:    #0e2138;
    --bg4:    #132a44;
    --bg5:    #18334f;
    --navy:   #0a2550;
    --blue:   #1e6fff;
    --cyan:   #00c2ff;
    --violet: #7b5cff;
    --teal:   #00e5c8;
    --sky:    #38bdf8;
    --border:  rgba(100,170,255,0.15);
    --border2: rgba(100,170,255,0.07);
    --green:  #30d158;
    --green2: rgba(48,209,88,0.15);
    --orange: #ff9f0a;
    --amber:  #f59e0b;
    --amber2: rgba(245,158,11,0.15);
    --red:    #ff453a;
    --txt:  #eaf1ff;
    --txt2: #9db4d6;
    --txt3: #6a86aa;
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
    --mono: 'JetBrains Mono', "SF Mono", monospace;
    --nav-w: 56px;
}

/* ══════════════════════════════════════
   LIGHT THEME - activated via <html data-theme="light">.
   Mirrors the dark palette in clean, warm-cool light tones; accents are
   darkened just enough to stay readable on near-white surfaces. Most of the
   site is variable-driven, so these overrides + a handful of surface fixes
   below cover the whole site.
   ══════════════════════════════════════ */
:root[data-theme="light"] {
    /* Muted, low-glare light theme. The page is a soft blue-grey (NOT white);
       cards/surfaces sit lighter than the page so they read as raised, and
       borders/text stay strong for detail. */
    --bg:     #e6ebf2;   /* page - soft, not blasting white */
    --bg2:    #fbfcfe;   /* most-raised: modals, code, inputs */
    --bg3:    #f3f6fb;   /* cards (pricing/how/team/dash/endpoint) */
    --bg4:    #e9eef6;
    --bg5:    #dde5f0;
    --navy:   #d4e0f4;
    --blue:   #1761e3;
    --cyan:   #0a82b1;
    --violet: #6446d2;
    --teal:   #0a9486;
    --sky:    #1380c4;
    --border:  rgba(22,45,95,0.22);   /* clearer card outlines / dividers */
    --border2: rgba(22,45,95,0.12);
    --green:  #1c9a47;
    --green2: rgba(28,154,71,0.15);
    --orange: #cf7400;
    --amber:  #b0720b;
    --amber2: rgba(176,114,11,0.15);
    --red:    #d33529;
    --txt:  #122236;     /* strong near-black navy */
    --txt2: #3c4e67;     /* secondary - readable, not washed */
    --txt3: #5d6f88;
}

/* ── Light-theme surface overrides (selectors that hardcode dark colours) ── */
[data-theme="light"] .grid-bg {
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(30,111,255,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(123,92,255,0.06) 0%, transparent 55%),
        radial-gradient(ellipse 45% 60% at 50% 90%, rgba(0,150,200,0.05) 0%, transparent 50%);
}
[data-theme="light"] .aurora-orb { opacity: 0.09; }
[data-theme="light"] .side-nav { background: rgba(255,255,255,0.72); }
[data-theme="light"] .side-nav-tooltip { background: rgba(255,255,255,0.97); }
[data-theme="light"] .top-bar { background: rgba(255,255,255,0.74); }
[data-theme="light"] .top-logo-text { background: linear-gradient(135deg, #102338 30%, #c96a12 100%); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .hero-gradient { background: linear-gradient(120deg, #1763e6 0%, #6a4bd6 35%, #0a86b6 70%, #1763e6 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .feat-icon-wrap { border-color: rgba(20,50,110,0.28); }
[data-theme="light"] .feat-slide:hover { background: rgba(20,50,110,0.025); }
[data-theme="light"] .pricing-overlay { background: rgba(244,247,252,0.55); }
[data-theme="light"] .map-layer-toggle { background: rgba(20,50,110,0.05); }
[data-theme="light"] .coverage-tooltip,
[data-theme="light"] .coverage-tooltip:before { background: rgba(255,255,255,0.97); border-top-color: rgba(255,255,255,0.97); }
[data-theme="light"] #coverage-map,
[data-theme="light"] .leaflet-container { background: #dfe7f2 !important; }
[data-theme="light"] .toast { background: rgba(255,255,255,0.97); }
[data-theme="light"] #backToTop { background: rgba(255,255,255,0.9); }
[data-theme="light"] .how-tag { background: rgba(20,50,110,0.04); }
[data-theme="light"] .map-header-bar { background: rgba(20,50,110,0.02); }
/* Cookie notice - dark-themed by hardcoded values; recolour for light */
[data-theme="light"] .cookie-notice { background: rgba(255,255,255,0.96); border-color: rgba(20,50,110,0.12); color: var(--txt2); }
[data-theme="light"] .cookie-notice__text { color: var(--txt2); }
[data-theme="light"] .cookie-notice__text strong { color: var(--txt); }
[data-theme="light"] .cookie-notice__dismiss { background: rgba(20,50,110,0.08); border-color: rgba(20,50,110,0.15); color: var(--txt); }
[data-theme="light"] .cookie-notice__dismiss:hover { background: rgba(20,50,110,0.14); }
/* Feature icons are hardcoded white in the SVG markup - keep their chip dark in
   light mode so they stay visible (matches the night-style canvases). */
[data-theme="light"] .feat-icon-wrap { background: #0e2138; border-color: rgba(20,50,110,0.18); }
/* Amber-on-faint-amber that goes low-contrast on a light bg */
[data-theme="light"] .feat-badge { color: var(--amber); background: var(--amber2); border-color: rgba(185,119,12,0.32); }
[data-theme="light"] .pricing-notice-text { color: var(--amber); }
/* Raised-card depth in light mode - separation + detail vs the soft page bg.
   (Selectors span site.css + pages.css cards; harmless where not present.) */
[data-theme="light"] .pricing-card,
[data-theme="light"] .how-step,
[data-theme="light"] .about-card,
[data-theme="light"] .pricing-page-card,
[data-theme="light"] .team-card,
[data-theme="light"] .endpoint-card,
[data-theme="light"] .dash-card,
[data-theme="light"] .dash-stat-card {
    box-shadow: 0 1px 2px rgba(20,45,95,0.06), 0 10px 28px rgba(20,45,95,0.07);
}
[data-theme="light"] .map-wrapper { box-shadow: 0 12px 40px rgba(20,45,95,0.13); }
/* Feature-canvas panels go light in light mode (the canvases draw a matching
   light palette in site.js); they stay #071120 in dark mode (rule below). */
[data-theme="light"] .traffic-visual,
[data-theme="light"] .weather-visual,
[data-theme="light"] .roadq-visual,
[data-theme="light"] .signs-visual { background: #c4d0e2; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
    background: var(--bg);
    color: var(--txt);
    font-family: var(--font);
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.65;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 3px; }

/* ── ANIMATED BG ── */
.grid-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(30,111,255,0.14) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 80% 70%, rgba(123,92,255,0.11) 0%, transparent 55%),
        radial-gradient(ellipse 45% 60% at 50% 90%, rgba(0,194,255,0.09) 0%, transparent 50%);
    animation: iridShift 20s ease-in-out infinite alternate;
}
@keyframes iridShift {
    0%   { filter: hue-rotate(0deg) brightness(1); }
    50%  { filter: hue-rotate(20deg) brightness(1.04); }
    100% { filter: hue-rotate(-10deg) brightness(0.98); }
}

.aurora {
    position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora-orb {
    position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.3;
}
.aurora-orb:nth-child(1) {
    width: 550px; height: 380px; top: -80px; left: -120px;
    background: radial-gradient(ellipse, rgba(30,111,255,0.5) 0%, transparent 70%);
    animation: orbFloat1 22s ease-in-out infinite alternate;
}
.aurora-orb:nth-child(2) {
    width: 450px; height: 450px; bottom: 10%; right: -80px;
    background: radial-gradient(ellipse, rgba(123,92,255,0.4) 0%, transparent 70%);
    animation: orbFloat2 28s ease-in-out infinite alternate;
}
.aurora-orb:nth-child(3) {
    width: 350px; height: 260px; top: 40%; left: 40%;
    background: radial-gradient(ellipse, rgba(0,229,200,0.3) 0%, transparent 70%);
    animation: orbFloat3 32s ease-in-out infinite alternate;
}
@keyframes orbFloat1 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(100px,60px) scale(1.15)} }
@keyframes orbFloat2 { 0%{transform:translate(0,0) scale(1)} 100%{transform:translate(-80px,-50px) scale(0.92)} }
@keyframes orbFloat3 { 0%{transform:translate(0,0)} 50%{transform:translate(-60px,40px)} 100%{transform:translate(50px,-30px)} }

/* ── SIDE NAV ── */
.side-nav {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    background: rgba(4,13,26,0.55);
    border-radius: 0 14px 14px 0;
    border: 1px solid var(--border2);
    border-left: none;
    backdrop-filter: saturate(150%) blur(20px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
}
.side-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--txt3);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.25s;
    position: relative;
}
.side-nav a:hover { color: var(--txt2); background: rgba(30,111,255,0.08); }
.side-nav a.active {
    color: var(--cyan);
    background: rgba(0,194,255,0.1);
    box-shadow: inset 0 0 0 1px rgba(0,194,255,0.25);
}
.side-nav a svg { width: 18px; height: 18px; }
.side-nav-tooltip {
    position: absolute;
    left: 52px;
    background: rgba(10,22,40,0.95);
    color: var(--txt);
    font-size: 0.78rem;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateX(-4px);
    border: 1px solid var(--border2);
}
.side-nav a:hover .side-nav-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* ── TOP BAR ── */
.top-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 60px;
    background: rgba(4,13,26,0.7);
    border-bottom: 1px solid var(--border2);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    transition: box-shadow 0.3s;
}
.top-logo {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none;
}
.top-logo-mark {
    width: 32px; height: 32px;
    background: url('/images/viscar-logo.png') center/cover no-repeat;
    border-radius: 9px;
    flex-shrink: 0;
}
.top-logo-text {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--txt);
    /* Copper gradient - picks up the right-side highlight of the logo arrow. */
    background: linear-gradient(135deg, #fff 30%, #d97520 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.top-actions {
    display: flex; align-items: center; gap: 0.8rem;
}
.top-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.42rem 1rem;
    border-radius: 0.55rem;
    text-decoration: none; color: var(--txt2);
    font-size: 0.84rem; font-weight: 500;
    background: rgba(30,111,255,0.06);
    border: 1px solid var(--border2);
    transition: all 0.2s; white-space: nowrap;
}
.top-btn:hover { border-color: var(--blue); background: rgba(30,111,255,0.14); color: var(--txt); }
.top-btn svg { width: 15px; height: 15px; }
.top-btn-primary {
    background: rgba(30,111,255,0.15);
    border-color: rgba(30,111,255,0.3);
    color: var(--txt);
}

/* ── Theme toggle (top-right, left of the auth buttons) ── */
.top-right { display: flex; align-items: center; gap: 0.7rem; }
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 0.55rem; cursor: pointer; flex-shrink: 0;
    background: rgba(120,150,200,0.08); border: 1px solid var(--border2);
    color: var(--txt2); transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--txt); background: rgba(30,111,255,0.12); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .theme-ic-moon { display: none; }
.theme-toggle .theme-ic-sun { display: block; }
[data-theme="light"] .theme-toggle .theme-ic-sun { display: none; }
[data-theme="light"] .theme-toggle .theme-ic-moon { display: block; }

/* ── SECTIONS ── */
.section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 6rem 2.5rem;
    position: relative;
    z-index: 1;
}
.section-label {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--txt3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.7rem;
    font-weight: 500;
}
.section-title {
    font-size: clamp(1.9rem, 3.8vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.9rem;
    letter-spacing: -0.025em;
}
.section-sub {
    color: var(--txt2);
    max-width: 520px;
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
}

/* ── HERO ── */
#hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 100px 2.5rem 3rem;
    text-align: center;
    position: relative; z-index: 1;
    background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(30,111,255,0.16) 0%, transparent 65%);
}

.hero-title {
    font-size: clamp(2.6rem, 6.5vw, 5.2rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 1.3rem;
    letter-spacing: -0.035em;
    animation: fadeDown 0.7s ease both;
}
.hero-gradient {
    background: linear-gradient(120deg, #60a5fa 0%, #a78bfa 35%, #22d3ee 70%, #60a5fa 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 7s linear infinite;
}
@keyframes shimmer { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

.hero-sub {
    max-width: 560px;
    margin: 0 auto 2.2rem;
    color: var(--txt2);
    font-size: 1.08rem;
    line-height: 1.75;
    font-weight: 400;
    animation: fadeDown 0.7s 0.1s ease both;
}

.hero-cta {
    display: flex; gap: 0.9rem; flex-wrap: wrap; justify-content: center;
    animation: fadeDown 0.7s 0.2s ease both;
}

.btn-appstore {
    display: inline-flex; align-items: center; gap: 0.7rem;
    padding: 0.65rem 1.3rem;
    background: rgba(30,111,255,0.08);
    color: var(--txt);
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-appstore:hover { border-color: var(--blue); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(30,111,255,0.25); background: rgba(30,111,255,0.16); }
.btn-appstore svg { width: 22px; height: 22px; flex-shrink: 0; }
.btn-appstore-label { font-size: 0.65rem; color: var(--txt2); display: block; }
.btn-appstore-name { font-size: 0.95rem; font-weight: 600; display: block; letter-spacing: -0.01em; }

/* Join Waitlist - primary gradient pill (hero CTA) */
.btn-waitlist {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.8rem 1.5rem; border: none; border-radius: 0.8rem; cursor: pointer;
    font-family: inherit; font-size: 0.98rem; font-weight: 600; color: #fff; letter-spacing: -0.01em;
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    box-shadow: 0 8px 24px rgba(30,111,255,0.30);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.btn-waitlist:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(30,111,255,0.42); filter: brightness(1.06); }
.btn-waitlist .btn-waitlist-ic { width: 18px; height: 18px; flex-shrink: 0; }
/* Green "joined" overlay - cross-fades over the blue gradient in 0.2s so the
   state change is smooth (gradients can't transition directly). */
.btn-waitlist::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(135deg, var(--green), #17a046);
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.btn-waitlist > * { position: relative; z-index: 1; }
.btn-waitlist.joined::after { opacity: 1; }
.btn-waitlist.joined { box-shadow: 0 8px 24px rgba(28,154,71,0.30); }

/* Waitlist modal */
.waitlist-overlay {
    position: fixed; inset: 0; z-index: 1000; display: none;
    align-items: center; justify-content: center; padding: 1.2rem;
    background: rgba(2,8,20,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.waitlist-overlay.show { display: flex; }
.waitlist-modal {
    position: relative; width: 100%; max-width: 420px; text-align: center;
    background: var(--bg2); border: 1px solid var(--border); border-radius: 1.1rem;
    padding: 2rem 1.8rem; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.waitlist-close {
    position: absolute; top: 0.6rem; right: 0.9rem; background: none; border: none;
    color: var(--txt2); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0.2rem;
}
.waitlist-close:hover { color: var(--txt); }
.waitlist-icon {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 1rem;
    display: flex; align-items: center; justify-content: center;
    background: rgba(30,111,255,0.12); border: 1px solid var(--border); color: var(--cyan);
}
.waitlist-icon svg { width: 26px; height: 26px; }
.waitlist-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; }
.waitlist-sub { color: var(--txt2); font-size: 0.92rem; line-height: 1.6; margin-bottom: 1.3rem; }
.waitlist-input {
    width: 100%; padding: 0.8rem 1rem; border-radius: 0.7rem; margin-bottom: 0.8rem;
    background: var(--bg); border: 1px solid var(--border); color: var(--txt);
    font-family: inherit; font-size: 1rem;
}
.waitlist-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,111,255,0.18); }
.waitlist-submit {
    width: 100%; padding: 0.8rem 1rem; border-radius: 0.7rem; border: none; cursor: pointer;
    background: var(--blue); color: #fff; font-family: inherit; font-size: 0.95rem; font-weight: 600;
    transition: background 0.2s, opacity 0.2s;
}
.waitlist-submit:hover:not(:disabled) { background: #1a63e6; }
.waitlist-submit:disabled { opacity: 0.6; cursor: default; }

.btn-ghost {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.75rem 1.6rem;
    background: rgba(30,111,255,0.06);
    color: var(--txt2);
    border: 1px solid var(--border2);
    border-radius: 0.7rem;
    font-size: 0.92rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: all 0.2s;
}
.btn-ghost:hover { border-color: var(--blue); background: rgba(30,111,255,0.14); color: var(--txt); }
.btn-ghost svg { width: 16px; height: 16px; }

/* Stats */
.hero-stats {
    display: flex; gap: 3rem; flex-wrap: wrap; justify-content: center;
    margin-top: 3.5rem;
    animation: fadeDown 0.7s 0.35s ease both;
}
.h-stat { text-align: center; }
.h-stat-val {
    display: block; font-family: var(--mono);
    font-size: 2rem; font-weight: 700; color: var(--txt);
}
.h-stat-lbl {
    font-size: 0.74rem; color: var(--txt2);
    letter-spacing: 0.04em; text-transform: uppercase;
    margin-top: 0.15rem; font-weight: 400;
}

@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ── COVERAGE ── */
.map-wrapper {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: 0 16px 50px rgba(0,0,0,0.35);
    margin-top: 2.5rem;
}
.map-header-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid var(--border2);
    background: rgba(255,255,255,0.015);
    flex-wrap: wrap; gap: 0.8rem;
}
.map-title-txt { font-family: var(--mono); font-size: 0.8rem; color: var(--txt2); letter-spacing: 0.06em; font-weight: 500; }
.map-legend { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--txt2); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
#coverage-map {
    width: 100%;
    height: clamp(320px, 48vh, 500px);
    background: #1a1a2e;
}
.leaflet-container { background: #1a1a2e !important; }
.coverage-tooltip {
    background: rgba(10,22,40,0.96);
    color: var(--txt);
    border: 1px solid rgba(100,170,255,0.18);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    padding: 0;
}
.coverage-tooltip:before { border-top-color: rgba(10,22,40,0.96); }

/* Coverage-map POPUP — shown on TAP. Mobile/iOS has no hover, so tapping a zone
   opens this Leaflet popup (not the tooltip); unstyled it inherits Leaflet's
   default WHITE wrapper, and the var(--txt) label was white-on-white in dark
   mode. Match the tooltip surface; the light theme gets a light wrapper. */
/* Open popups/tooltips INSTANTLY at their final size. Leaflet animates the
   overlay on open (the .leaflet-popup fade/zoom), which read as the label
   scaling small → big on click. Killing the transition/animation fixes the
   size — it just appears. */
.leaflet-popup,
.leaflet-popup-content-wrapper,
.leaflet-popup-tip,
.leaflet-tooltip {
    transition: none !important;
    animation: none !important;
}
.leaflet-popup-content-wrapper {
    background: rgba(10,22,40,0.96);
    color: var(--txt);
    border: 1px solid rgba(100,170,255,0.18);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.leaflet-popup-tip { background: rgba(10,22,40,0.96); }
.leaflet-popup-close-button { color: var(--txt3) !important; }
.leaflet-popup-close-button:hover { color: var(--txt) !important; }
[data-theme="light"] .leaflet-popup-content-wrapper { background: rgba(255,255,255,0.97); border-color: rgba(20,50,110,0.15); }
[data-theme="light"] .leaflet-popup-tip { background: rgba(255,255,255,0.97); }

/* Region HOVER label (bindTooltip, class "coverage-tooltip"). Leaflet's default
   tooltip is WHITE; the label text is var(--txt) which is light in dark mode, so
   it was white-on-white. Give it the same dark surface as the popup (light in
   light theme), so the text always contrasts. 2-class selector to beat Leaflet's
   own .leaflet-tooltip rule regardless of stylesheet order. */
.leaflet-tooltip.coverage-tooltip {
    background: rgba(10,22,40,0.96);
    color: var(--txt);
    border: 1px solid rgba(100,170,255,0.18);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    padding: 0;                 /* the inner <span> carries the padding */
}
.leaflet-tooltip.coverage-tooltip::before { display: none; }   /* hide the white arrow */
[data-theme="light"] .leaflet-tooltip.coverage-tooltip { background: rgba(255,255,255,0.97); border-color: rgba(20,50,110,0.15); }

/* ── FEATURES ── */
.features-showcase {
    margin-top: 3rem;
    display: grid; gap: 2px;
    border: 1px solid var(--border);
    border-radius: 1.1rem;
    overflow: hidden;
}
.feat-slide {
    display: grid; grid-template-columns: 1fr 1fr;
    min-height: 420px;
    border-bottom: 1px solid var(--border2);
    position: relative; overflow: hidden;
    transition: background 0.3s;
}
.feat-slide:last-child { border-bottom: none; }
.feat-slide:hover { background: rgba(255,255,255,0.008); }

.feat-info {
    padding: 3rem 2.5rem;
    display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid var(--border2);
}
.feat-icon-wrap {
    width: 52px; height: 52px; border-radius: 13px; margin-bottom: 1.4rem;
    background: transparent; border: 1px solid rgba(255,255,255,0.35);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feat-icon-wrap svg { width: 36px; height: 36px; }
.feat-h { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.7rem; letter-spacing: -0.02em; }
.feat-badge {
    display: inline-block; vertical-align: middle; margin-left: 0.6rem;
    padding: 0.18rem 0.6rem; border-radius: 999px;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
    color: #ffb340; background: rgba(255,159,10,0.12); border: 1px solid rgba(255,159,10,0.32);
    white-space: nowrap;
}
.feat-p { color: var(--txt2); line-height: 1.75; font-size: 0.95rem; }

.feat-visual {
    display: flex; align-items: stretch; justify-content: stretch;
    position: relative; overflow: hidden; min-height: 420px;
}

/* Feature canvases are night-style visualisations - keep their panel a fixed
   dark navy (matches the canvas fill #071120) in BOTH themes so there's no
   lighter frame, and so they read as embedded "screens" on the light page. */
/* Traffic canvas */
.traffic-visual { background: #071120; align-items: center; justify-content: center; padding: 1.5rem; }
#trafficCanvas { width: 100%; height: 100%; display: block; }

/* Weather canvas */
.weather-visual { background: #071120; align-items: center; justify-content: center; padding: 1.5rem; }
#weatherCanvas { width: 100%; height: 100%; display: block; }

/* Road quality canvas */
.roadq-visual { background: #071120; align-items: center; justify-content: center; padding: 1.5rem; }
#roadqCanvas { width: 100%; height: 100%; display: block; }

/* Signs canvas */
.signs-visual { background: #071120; align-items: center; justify-content: center; padding: 1.5rem; }
#signsCanvas { width: 100%; height: 100%; display: block; }

/* ── PRICING ── */
.pricing-notice {
    display: flex; align-items: flex-start; gap: 0.9rem;
    padding: 1.1rem 1.3rem;
    background: rgba(255,159,10,0.06);
    border: 1px solid rgba(255,159,10,0.18);
    border-radius: 0.8rem; margin: 2.5rem 0;
}
.pricing-notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.pricing-notice-text { font-size: 0.92rem; color: #ffd060; line-height: 1.55; }
.pricing-notice-text strong { color: var(--txt); }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.pricing-card {
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 0.9rem; padding: 2rem; position: relative; overflow: hidden;
    opacity: 0.5;
}
.pricing-card.featured { border-color: rgba(255,255,255,0.1); }
.pricing-card-label { font-family: var(--mono); font-size: 0.72rem; color: var(--txt2); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; }
.pricing-card-price { font-size: 2.2rem; font-weight: 800; color: var(--txt); margin-bottom: 0.2rem; letter-spacing: -0.03em; }
.pricing-card-price sub { font-size: 0.9rem; font-weight: 400; color: var(--txt2); }
.pricing-card-desc { color: var(--txt2); font-size: 0.9rem; margin-bottom: 1.2rem; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pricing-features li { font-size: 0.85rem; color: var(--txt2); display: flex; align-items: center; gap: 0.5rem; }
.pricing-features li::before { content: '-'; color: var(--txt3); }
.pricing-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(4,13,26,0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.coming-soon-badge {
    padding: 0.38rem 0.9rem; border: 1px solid var(--orange); border-radius: 2rem;
    color: var(--orange); font-family: var(--mono); font-size: 0.72rem;
    letter-spacing: 0.07em; background: rgba(255,159,10,0.07);
}

/* ── CONTACT ── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3rem; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-icon-box {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px; background: var(--bg3); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.contact-icon-box svg { width: 18px; height: 18px; }
.contact-info-label { font-family: var(--mono); font-size: 0.68rem; color: var(--txt3); margin-bottom: 0.15rem; letter-spacing: 0.08em; }
.contact-info-val { font-size: 0.95rem; color: var(--txt); }
.contact-info-val a { color: var(--txt2); text-decoration: none; transition: color 0.2s; }
.contact-info-val a:hover { color: var(--txt); }
.gh-icon { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-label { font-family: var(--mono); font-size: 0.7rem; color: var(--txt3); letter-spacing: 0.08em; }
.form-input, .form-textarea {
    padding: 0.75rem 1rem;
    background: var(--bg3); border: 1px solid var(--border2);
    border-radius: 0.6rem; color: var(--txt);
    font-family: var(--font); font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus, .form-textarea:focus {
    outline: none; border-color: rgba(245,158,11,0.5);
    box-shadow: 0 0 0 3px rgba(245,158,11,0.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--txt3); }
.form-textarea { resize: vertical; min-height: 120px; }

.btn-primary {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.78rem 1.8rem;
    background: linear-gradient(135deg, var(--amber) 0%, #f97316 100%);
    color: #0a0a0a; border: none; border-radius: 0.65rem;
    font-family: var(--font); font-size: 0.95rem; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: all 0.2s;
    box-shadow: 0 4px 18px rgba(245,158,11,0.35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(245,158,11,0.5); filter: brightness(1.06); }

/* ── FOOTER ── */
footer {
    padding: 2rem 2.5rem;
    border-top: 1px solid var(--border2);
    text-align: center; position: relative; z-index: 1;
}
.footer-inner { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; }
.footer-copy { font-size: 0.78rem; color: var(--txt3); font-family: var(--mono); }
.footer-links { display: flex; gap: 1rem; align-items: center; }
.footer-links a { color: var(--txt3); text-decoration: none; font-size: 0.8rem; transition: color 0.2s; display: inline-flex; align-items: center; gap: 0.3rem; }
.footer-links a:hover { color: var(--txt2); }
.footer-links a svg { width: 14px; height: 14px; }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── MAP LAYER TOGGLE ── */
.map-layer-toggle {
    display: flex;
    background: rgba(10,22,40,0.6);
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    padding: 3px;
    gap: 2px;
}
.map-layer-btn {
    padding: 0.3rem 0.85rem;
    border-radius: 0.38rem;
    border: none;
    background: transparent;
    color: var(--txt3);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.map-layer-btn:hover { color: var(--txt2); background: rgba(245,158,11,0.07); }
.map-layer-btn.active {
    background: rgba(245,158,11,0.15);
    color: var(--amber);
    box-shadow: inset 0 0 0 1px rgba(245,158,11,0.25);
}

/* ── TOAST ── */
#toast-container {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
    display: flex; flex-direction: column; gap: 0.6rem; pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    background: rgba(7,17,32,0.97);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    font-size: 0.88rem; color: var(--txt);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    pointer-events: auto;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    max-width: 320px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-icon { flex-shrink: 0; width: 18px; height: 18px; }
.toast.toast-error { border-color: rgba(255,69,58,0.35); }
.toast.toast-success { border-color: rgba(48,209,88,0.35); }
.toast.toast-error .toast-icon { color: var(--red); }
.toast.toast-success .toast-icon { color: var(--green); }

/* ── CHAR COUNTER ── */
.form-group-footer { display: flex; justify-content: flex-end; margin-top: 0.25rem; }
.char-counter { font-family: var(--mono); font-size: 0.68rem; color: var(--txt3); transition: color 0.2s; }
.char-counter.warn { color: var(--orange); }
.char-counter.over { color: var(--red); }

/* ── BACK TO TOP ── */
#backToTop {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 400;
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    background: rgba(7,17,32,0.85);
    border: 1px solid var(--border);
    border-radius: 2rem;
    color: var(--txt2); font-size: 0.8rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, border-color 0.2s, color 0.2s;
}
#backToTop.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#backToTop:hover { border-color: var(--amber); color: var(--amber); }
#backToTop svg { width: 14px; height: 14px; }

/* ── HOW IT WORKS ── */
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    position: relative;
}
.how-grid::before {
    content: '';
    position: absolute;
    top: 38px; left: calc(16.66% + 1rem); right: calc(16.66% + 1rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    pointer-events: none;
}
.how-step {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 2rem 1.5rem;
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 1rem;
    position: relative;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.how-step:hover {
    border-color: rgba(245,158,11,0.3);
    box-shadow: 0 8px 32px rgba(245,158,11,0.07);
}
.how-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
    color: var(--amber); margin-bottom: 1.2rem; flex-shrink: 0;
}
.how-icon { margin-bottom: 1rem; color: var(--txt2); }
.how-icon svg { width: 28px; height: 28px; }
.how-h { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.015em; }
.how-p { font-size: 0.88rem; color: var(--txt2); line-height: 1.7; }
.how-tag {
    margin-top: 1.1rem;
    font-family: var(--mono); font-size: 0.66rem;
    color: var(--txt3); letter-spacing: 0.07em;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border2);
    border-radius: 2rem; padding: 0.22rem 0.7rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .side-nav { display: none; }
    .feat-slide { grid-template-columns: 1fr; }
    .feat-info { border-right: none; border-bottom: 1px solid var(--border2); padding: 2rem 1.5rem; }
    .feat-visual { min-height: 340px; }
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .section { padding: 3.4rem 1rem; }
    .hero-stats { gap: 1.4rem; }
    .top-bar {
        padding: max(0.6rem, env(safe-area-inset-top)) 1rem 0.6rem;
        min-height: 52px;
        height: auto;
        /* Mobile perf: drop the live backdrop-blur. It re-blurs the content
           behind the bar whenever that content changes - i.e. on EVERY soft-nav
           transition - which janks on phones. An opaque bar costs nothing. */
        background: rgba(4,13,26,0.94);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-theme="light"] .top-bar { background: rgba(248,250,253,0.96); }
    /* Mobile perf: stop continuously re-blurring the aurora orbs (static, the
       90px blur is a one-time cached layer), and skip the per-swap page fade
       (a full-page opacity rasterize). Both free up the transition frame. */
    .aurora-orb { animation: none !important; }
    .spa-page { animation: none !important; }
    .top-logo-text { font-size: 1.3rem; }
    #hero {
        min-height: auto;
        padding: calc(88px + env(safe-area-inset-top)) 1rem 2.2rem;
    }
    #coverage-map { height: clamp(280px, 42vh, 420px); }
    .map-header-bar { padding: 0.9rem 1rem; }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
    .how-grid { grid-template-columns: 1fr; }
    .how-grid::before { display: none; }
}
@media (max-width: 480px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta > * { justify-content: center; }
    .hero-stats {
        gap: 1rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 360px;
    }
    .h-stat-val { font-size: 1.6rem; }
    .h-stat-lbl { font-size: 0.66rem; }
    .hero-sub { font-size: 1rem; }
    .btn-appstore, .btn-waitlist, .btn-ghost { width: 100%; justify-content: center; }
    .feat-info { padding: 1.6rem 1rem; }
    .feat-visual { min-height: 300px; }
    .weather-visual, .roadq-visual, .traffic-visual, .signs-visual { padding: 1rem; }
    .map-legend { gap: 0.9rem; }
    .legend-item { font-size: 0.74rem; }
    .footer-inner { justify-content: center; text-align: center; }
    .footer-links { width: 100%; justify-content: center; flex-wrap: wrap; }
}

/* ── PREFERS REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .aurora-orb { animation: none !important; }
    .grid-bg { animation: none !important; }
    .hero-gradient { animation: none !important; background-position: 0% 50%; }
    .reveal { opacity: 1 !important; transform: none !important; }
}

/* ══════════════════════════════════════
   BETA MODE - UI elements
   To remove all beta UI: simply remove this block
   and set "BetaMode": false in appsettings.json.
   ══════════════════════════════════════ */

/* ── Beta pill badge (hero) ── */
.beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 1rem;
    margin-bottom: 1.2rem;
    background: rgba(196,163,95,0.08);
    border: 1px solid rgba(196,163,95,0.25);
    border-radius: 2rem;
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: #c4a35f;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    animation: betaBadgeFade 0.8s ease both;
}
@keyframes betaBadgeFade { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: translateY(0);} }

.beta-badge-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #c4a35f;
    box-shadow: 0 0 8px #c4a35f;
    animation: betaBadgePulse 2.4s ease-in-out infinite;
}
@keyframes betaBadgePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.beta-badge-divider { color: var(--txt3); margin: 0 -0.15rem; }
.beta-badge-sub { color: var(--txt2); font-weight: 400; text-transform: none; letter-spacing: 0.02em; }

/* ── Beta banner (dashboard, persistent) ── */
.beta-banner {
    max-width: 1140px;
    margin: 0 auto 1.5rem;
    padding: 1rem 1.4rem;
    background: rgba(196,163,95,0.06);
    border: 1px solid rgba(196,163,95,0.25);
    border-radius: 0.7rem;
    color: var(--txt2);
    font-size: 0.9rem;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    position: relative;
    z-index: 1;
}
.beta-banner svg { width: 18px; height: 18px; flex-shrink: 0; color: #c4a35f; margin-top: 1px; }
.beta-banner strong { color: #c4a35f; font-weight: 700; }
.beta-banner a { color: #c4a35f; text-decoration: none; font-weight: 600; }
.beta-banner a:hover { color: #d4b76e; text-decoration: underline; }

/* ── Beta notice block (pricing, docs, etc.) ── */
.beta-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.3rem;
    background: rgba(196,163,95,0.06);
    border: 1px solid rgba(196,163,95,0.22);
    border-radius: 0.8rem;
    color: var(--txt2);
    font-size: 0.92rem;
    line-height: 1.6;
}
.beta-notice svg { width: 20px; height: 20px; flex-shrink: 0; color: #c4a35f; margin-top: 1px; }
.beta-notice strong { color: var(--txt); font-weight: 700; }
.beta-notice a { color: #c4a35f; text-decoration: none; font-weight: 600; margin-left: 0.4rem; white-space: nowrap; }
.beta-notice a:hover { color: #d4b76e; }

/* ── Footer beta line ── */
.footer-beta-line { color: #c4a35f; opacity: 0.85; }

/* ── "Coming Soon" overlay on locked pricing cards ── */
.pricing-card.beta-locked,
.pricing-page-card.beta-locked {
    position: relative;
    overflow: hidden;
}
.pricing-card.beta-locked > *:not(.pricing-coming-soon),
.pricing-page-card.beta-locked > *:not(.pricing-coming-soon) {
    filter: blur(2.5px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.pricing-card.beta-locked button,
.pricing-page-card.beta-locked button {
    pointer-events: none !important;
}

/* "Coming Soon" badge in top-right corner */
.pricing-coming-soon {
    position: absolute;
    top: 0.9rem; right: 0.9rem;
    padding: 0.25rem 0.65rem;
    background: rgba(196,163,95,0.15);
    border: 1px solid rgba(196,163,95,0.4);
    border-radius: 0.4rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    color: #c4a35f;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    z-index: 2;
}

/* "BETA" badge on the active free card */
.pricing-card.beta-current,
.pricing-page-card.beta-current {
    position: relative;
    border-color: rgba(48,209,88,0.3);
    box-shadow: 0 0 0 1px rgba(48,209,88,0.1), 0 8px 32px rgba(48,209,88,0.06);
}
.beta-current-badge {
    position: absolute;
    top: 0.9rem; right: 0.9rem;
    padding: 0.25rem 0.65rem;
    background: rgba(48,209,88,0.15);
    border: 1px solid rgba(48,209,88,0.4);
    border-radius: 0.4rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--green);
    letter-spacing: 0.08em;
    z-index: 2;
}

/* ── Legal documents (Beta Agreement + Privacy) ── */
.legal-doc {
    max-width: 820px;
    margin: 0 auto;
    padding: 1rem 2.5rem 4rem;
    position: relative;
    z-index: 1;
}
.legal-doc h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 2rem 0 0.7rem;
    color: var(--txt);
    padding-top: 1rem;
    border-top: 1px solid var(--border2);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; }
.legal-doc h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--txt); }
.legal-doc p { color: var(--txt2); line-height: 1.75; margin-bottom: 0.9rem; font-size: 0.93rem; }
.legal-doc ul, .legal-doc ol { color: var(--txt2); line-height: 1.8; margin: 0.8rem 0 1.2rem 1.4rem; font-size: 0.93rem; }
.legal-doc li { margin-bottom: 0.35rem; }
.legal-doc strong { color: var(--txt); font-weight: 600; }
.legal-doc a { color: var(--cyan); text-decoration: none; }
.legal-doc a:hover { text-decoration: underline; }
.legal-doc-meta {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--txt3);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border2);
}

/* ── Registration agreement checkbox ── */
.auth-agree-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.4rem 0 1rem;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--txt2);
}
.auth-agree-row input[type="checkbox"] {
    margin-top: 0.25rem;
    accent-color: var(--cyan);
    width: 14px; height: 14px;
    cursor: pointer;
    flex-shrink: 0;
}
.auth-agree-row label { cursor: pointer; }
.auth-agree-row a {
    color: var(--cyan);
    text-decoration: none;
    font-weight: 500;
}
.auth-agree-row a:hover { text-decoration: underline; }

.auth-btn:disabled {
    opacity: 0.4;
    pointer-events: none;
    box-shadow: none;
}

/* ── API key consent step ── */
.key-consent-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.key-consent-list li {
    font-size: 0.85rem;
    color: var(--txt2);
    padding-left: 1.4rem;
    position: relative;
    line-height: 1.55;
}
.key-consent-list li::before {
    content: '•';
    position: absolute;
    left: 0.4rem;
    color: var(--cyan);
    font-weight: 700;
}
.key-consent-actions { display: flex; gap: 0.7rem; }
.key-consent-actions .auth-btn { margin: 0; flex: 1; }
.key-consent-actions .dash-btn { flex: 0 0 auto; padding: 0.75rem 1.2rem; }

/* ── Cookie consent notice (informational, essential-only) ──
   Spec: cookie_banner_spec v1.0.0.
   Bottom-left floating card. No CMP - upgrade if non-essential cookies added. */
.cookie-notice {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 1000;
    width: 360px;
    max-width: 360px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "icon text"
        "btn  btn";
    column-gap: 12px;
    row-gap: 12px;
    padding: 16px 18px;
    background: rgba(20,25,40,0.92);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255,255,255,0.85);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    animation: cookieNoticeIn 300ms ease-out 800ms backwards;
}
.cookie-notice[hidden] { display: none; }

@keyframes cookieNoticeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cookie-notice--exiting {
    animation: cookieNoticeOut 200ms ease-in forwards;
}
@keyframes cookieNoticeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(20px); }
}

.cookie-notice__icon {
    grid-area: icon;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    color: #c4a35f;
    margin-top: 1px;
}
.cookie-notice__icon svg { width: 18px; height: 18px; }

.cookie-notice__text {
    grid-area: text;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
}
.cookie-notice__text strong {
    font-weight: 500;
    color: rgba(255,255,255,1);
}
.cookie-notice__text a {
    color: var(--cyan);
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-left: 0.25rem;
    white-space: nowrap;
}
.cookie-notice__text a:hover { text-decoration: underline; }

.cookie-notice__dismiss {
    grid-area: btn;
    justify-self: end;
    padding: 8px 16px;
    min-height: 32px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.cookie-notice__dismiss:hover { background: rgba(255,255,255,0.15); }
.cookie-notice__dismiss:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* Mobile: full-width card with button stretched to full row (≥44px tap target) */
@media (max-width: 640px) {
    .cookie-notice {
        width: calc(100vw - 24px);
        max-width: none;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        padding: 14px 16px;
    }
    .cookie-notice__dismiss {
        justify-self: stretch;
        width: 100%;
        min-height: 44px;
        padding: 10px 16px;
    }
}

/* Respect prefers-reduced-motion (spec section 6 - accessibility) */
@media (prefers-reduced-motion: reduce) {
    .cookie-notice { animation: none; }
    .cookie-notice--exiting { animation: none; opacity: 0; transition: opacity 100ms; }
}

/* ── Legal update modal (injected by legal.js when an authenticated user
       has not yet accepted the current material version of a document) ── */
.legal-update-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;          /* above cookie banner (1000) and top-bar (200) */
    background: rgba(4, 9, 18, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: legalOverlayIn 0.25s ease-out;
}
@keyframes legalOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.legal-update-modal {
    width: 100%;
    max-width: 560px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.6rem 1.8rem 1.4rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    color: var(--txt);
    animation: legalModalIn 0.3s ease-out;
}
@keyframes legalModalIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.legal-update-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
.legal-update-body {
    margin: 0 0 1rem;
    color: var(--txt2);
    font-size: 0.95rem;
    line-height: 1.6;
}

.legal-update-doc-list {
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.legal-update-doc-list li {
    background: var(--bg3);
    border: 1px solid var(--border2);
    border-radius: 0.65rem;
    padding: 0.8rem 0.95rem;
}
.legal-update-doc-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--txt);
    margin-bottom: 0.3rem;
}
.legal-update-doc-link {
    color: var(--cyan);
    text-decoration: none;
    font-size: 0.84rem;
}
.legal-update-doc-link:hover { text-decoration: underline; }

.legal-update-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.legal-update-accept {
    width: 100%;
    padding: 0.78rem 1rem;
    background: linear-gradient(135deg, var(--blue) 0%, #4f8dff 100%);
    border: none;
    border-radius: 0.6rem;
    color: #fff;
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, box-shadow 0.2s;
    box-shadow: 0 6px 20px rgba(30, 111, 255, 0.3);
}
.legal-update-accept:hover { filter: brightness(1.08); box-shadow: 0 8px 28px rgba(30, 111, 255, 0.45); }
.legal-update-accept:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.legal-update-decline {
    background: none;
    border: none;
    color: var(--txt3);
    font-family: var(--font);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.5rem;
}
.legal-update-decline:hover { color: var(--txt2); }
.legal-update-decline:focus-visible { outline: 2px solid var(--txt3); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 600px) {
    .legal-update-modal { padding: 1.3rem 1.1rem 1.1rem; }
    .legal-update-title { font-size: 1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .legal-update-overlay,
    .legal-update-modal { animation: none; }
}
