/* ============================================
   NOPROXi — Design System
   Smooth, shadow-driven, borderless enterprise
   Warm ivory canvas · terracotta accent
   ============================================ */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,800,900&display=swap');

:root {
    --white: #FFFFFF;
    --black: #131314;

    --canvas-50: #FEFDFB;
    --canvas-100: #FAF9F0;
    --canvas-200: #F0EDE2;
    --canvas-300: #E3DFD1;
    --canvas-400: #C4BFA9;
    --canvas-500: #9C9680;
    --canvas-600: #6F6A56;
    --canvas-700: #504B3C;
    --canvas-800: #35322A;
    --canvas-900: #1F1D18;
    --canvas-950: #131314;

    --terra: #D97757;
    --terra-50: #FEF3EE;
    --terra-100: #FCE2D2;
    --terra-200: #F8C4A5;
    --terra-300: #F0A07A;
    --terra-400: #E8814A;
    --terra-500: #D97757;
    --terra-600: #C46849;
    --terra-700: #A1452A;
    --terra-800: #833A28;
    --terra-900: #6B3224;

    --ivory: #FAF9F0;
    --ivory-warm: #F5F0E3;

    --emerald-50: #ECFDF5;
    --emerald-400: #34D399;
    --emerald-500: #10B981;
    --emerald-600: #059669;
    --red-50: #FEF2F2;
    --red-400: #F87171;
    --red-500: #EF4444;
    --amber-50: #FFFBEB;
    --amber-400: #FBBF24;

    --bg: var(--ivory);
    --bg-card: var(--white);
    --bg-elevated: var(--white);
    --bg-subtle: var(--canvas-50);
    --text-primary: var(--canvas-950);
    --text-secondary: var(--canvas-600);
    --text-muted: #807A6A;   /* overridden from canvas-500 for WCAG AA ~4.5:1 on white */
    --border: transparent;
    --border-strong: rgba(0,0,0,0.06);

    /* Soft shadow system — replaces all hard borders */
    --shadow-border: 0 0 0 1px rgba(0,0,0,0.04);
    --shadow-xs: 0 1px 2px rgba(19,19,20,0.04);
    --shadow-sm: 0 2px 8px rgba(19,19,20,0.04), 0 0 0 1px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 20px rgba(19,19,20,0.06), 0 0 0 1px rgba(0,0,0,0.02);
    --shadow-lg: 0 12px 40px rgba(19,19,20,0.07), 0 2px 8px rgba(19,19,20,0.03);
    --shadow-xl: 0 24px 60px rgba(19,19,20,0.1), 0 4px 12px rgba(19,19,20,0.04);
    --shadow-soft: 0 1px 4px rgba(19,19,20,0.03);
    --shadow-glow: 0 0 24px rgba(217,119,87,0.08);

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    --font-display: 'Space Grotesk', 'Satoshi', 'DM Sans', -apple-system, sans-serif;
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ====================================================
   DARK MODE — Cool Zinc + Terracotta Accent

   Philosophy: Cool-neutral dark surfaces let the warm
   terracotta accent pop brilliantly (warm/cool contrast).
   3 clearly distinct depth layers, high text contrast.

   Layer 0  #0F0F12  Page canvas   (studio-layout bg)
   Layer 1  #1C1C22  Floating card (studio-main / modals)
   Layer 2  #252529  Hover surface (buttons, items hover)
   Layer 3  #32323A  Active/lifted (selected items)
   ==================================================== */
[data-theme="dark"] {
    /* ── Surfaces — warm 5-layer elevation ── */
    --white:        #1C1B19;   /* floating card / modal  (Layer 1) */
    --bg:           #111110;   /* page canvas            (Layer 0) */
    --bg-card:      #1C1B19;   /* cards, panels          (Layer 1) */
    --bg-elevated:  #252420;   /* popovers, dropdowns    (Layer 2) */
    --bg-subtle:    #0C0C0B;   /* deepest / behind bg    (below 0) */
    --bg-lifted:    #2E2C28;   /* active/selected items  (Layer 3) */
    --bg-overlay:   #363330;   /* tooltips, toasts       (Layer 4) */

    /* ── Text — warm cream hierarchy ── */
    --text-primary:   #F2F0EB;   /* headings, labels */
    --text-secondary: #B8B4AD;   /* body copy */
    --text-muted:     #A09880;   /* hints, placeholders — #A09880 ~4.5:1 on dark bg */
    --border-strong:  rgba(255,255,255,0.12);

    /* ── Full canvas scale inversion — warm-tinted ──
       50-400 → dark surfaces  |  500 → mid  |  600-950 → light text */
    --canvas-50:  #1C1B19;   /* subtle within-card surface (table headers etc) */
    --canvas-100: #111110;   /* page / layout background */
    --canvas-200: #252420;   /* hover states */
    --canvas-300: #2E2C28;   /* active / selected */
    --canvas-400: #3E3C38;   /* borders, dividers */
    --canvas-500: #5C5850;   /* disabled / very muted */
    --canvas-600: #8A8680;   /* secondary icons, placeholder */
    --canvas-700: #B8B4AD;   /* body text */
    --canvas-800: #CCC8C0;   /* slightly stronger body */
    --canvas-900: #E0DDD6;   /* headings */
    --canvas-950: #F2F0EB;   /* primary text / white-button bg */

    /* ── Terracotta — vivid on warm dark ── */
    --terra:      #F08968;   /* lightened from #E07C58 for WCAG AA contrast on dark bg */
    --terra-50:   rgba(240,137,104,0.09);
    --terra-100:  rgba(240,137,104,0.16);
    --terra-200:  rgba(240,137,104,0.24);

    /* ── Shadows — deep and atmospheric ── */
    --shadow-border: 0 0 0 1px rgba(255,255,255,0.09);
    --shadow-xs:  0 1px 4px rgba(0,0,0,0.55);
    --shadow-sm:  0 2px 12px rgba(0,0,0,0.5),  0 0 0 1px rgba(255,255,255,0.07);
    --shadow-md:  0 4px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    --shadow-lg:  0 12px 48px rgba(0,0,0,0.65), 0 2px 8px rgba(0,0,0,0.4);
    --shadow-xl:  0 24px 72px rgba(0,0,0,0.75), 0 4px 16px rgba(0,0,0,0.45);
    --shadow-glow: 0 0 32px rgba(224,124,88,0.32);
}

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

/* ── Accessibility: focus-visible global defaults ── */
:focus-visible {
    outline: 2px solid var(--terra, #D97757);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* ── Accessibility: placeholder contrast ── */
input::placeholder, textarea::placeholder { color: var(--text-muted); }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; overflow: hidden; }
body {
    font-family: var(--font);
    color: var(--text-primary);
    background: var(--bg);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

/* Electron transparency is handled via insertCSS in main.js
   which reliably clears html/body/screen backgrounds at dom-ready */

.screen { display: none; height: 100%; overflow: hidden; }
.screen.active { display: block; }
#screen-landing { position: relative; }
#screen-landing.active { overflow-y: auto; }
#screen-live.active { display: flex; }

/* --- Announcement bar (above nav) --- */
.announce-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px clamp(16px, 4vw, 48px);
    background: var(--canvas-950);
    color: var(--canvas-200);
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 101;
}
/* Collapse transition */
.announce-bar {
    max-height: 50px;
    overflow: hidden;
    transition: max-height 350ms cubic-bezier(0.34,1.56,0.64,1),
                opacity 200ms ease;
}
.announce-bar.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* Collapsed creators tab — Animated gradient shift pill (Option A) */
.announce-tab {
    position: fixed;
    right: 16px;
    top: 40%;
    /* Bronze → Silver → Gold → Platinum → Bronze */
    background: linear-gradient(270deg, #cd7f32, #a8a9ad, #f5c842, #dce9f5, #cd7f32);
    background-size: 300% 300%;
    color: #1a1209;
    text-shadow: 0 1px 3px rgba(255,255,255,0.25);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 10px 16px 10px 12px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    z-index: 102;
    white-space: nowrap;
    overflow: hidden;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: -3px 5px 22px rgba(205,127,50,0.5),
                inset 0 1px 0 rgba(255,255,255,0.55);
    transition: transform 450ms cubic-bezier(0.34,1.56,0.64,1),
                opacity 350ms ease,
                box-shadow 0.3s;
}
.announce-tab.visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
    animation: creatorGradientShift 4s ease infinite;
}
@keyframes creatorGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.announce-tab:hover {
    box-shadow: -4px 6px 30px rgba(245,200,66,0.65),
                inset 0 1px 0 rgba(255,255,255,0.55);
    transform: translateX(-5px);
}
/* Shimmer sweep every 3.5s */
.announce-tab::after {
    content: '';
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    transform: skewX(-15deg);
    animation: atbShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes atbShimmer {
    0%, 30% { left: -75%; }
    70%, 100% { left: 140%; }
}

/* Orb icon — dark engraved dot on gradient pill */
.announce-tab-orb {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.atb-core {
    position: relative;
    z-index: 2;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1a1209;
    box-shadow: 0 0 6px rgba(26,18,9,0.5), 0 1px 2px rgba(0,0,0,0.3);
    animation: atbCorePulse 1.8s ease-in-out infinite;
}
@keyframes atbCorePulse {
    0%, 100% { box-shadow: 0 0 5px rgba(26,18,9,0.45); transform: scale(1); }
    50%       { box-shadow: 0 0 10px rgba(26,18,9,0.7); transform: scale(1.2); }
}
.atb-ripple {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(26,18,9,0.55);
    animation: atbRipple 2s ease-out infinite;
}
.atb-ripple-1 { width: 8px; height: 8px; animation-delay: 0s; }
.atb-ripple-2 { width: 8px; height: 8px; animation-delay: 0.75s; }
@keyframes atbRipple {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* ================================================================
   Creator Transition — Warm fintech earnings chart
   Premium dark-mode: oranges, golds, browns, warm grays
   Auto-scales: 360px phones → tablets → monitors → ultrawide
   ================================================================ */
/* ── Overlay ── */
.creator-transition { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; visibility: hidden; }
.creator-transition.active { pointer-events: auto; opacity: 1; visibility: visible; }
.ct-bg { position: absolute; inset: 0; background: linear-gradient(160deg, #1A1210 0%, #14100D 40%, #0D0A08 100%); opacity: 0; }
.creator-transition.active .ct-bg { animation: ctBgIn 0.35s ease-out forwards; }
@keyframes ctBgIn { to { opacity: 1; } }

/* ── Tier tabs (top-left) ── */
.ct-tier-tabs {
    position: absolute;
    top: clamp(16px, 3vh, 32px);
    left: clamp(20px, 3vw, 48px);
    display: flex; gap: 8px; z-index: 3; opacity: 0;
}
.creator-transition.active .ct-tier-tabs { animation: ctFadeIn 0.5s ease-out 0.2s forwards; }
.ct-tab {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(9px, 0.7vw, 11px);
    font-weight: 700; letter-spacing: 0.08em;
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid rgba(232,132,92,0.2);
    color: rgba(138,126,117,0.5); background: transparent;
    transition: all 0.3s ease;
}
.ct-tab.ct-tab-active { background: #E8845C; color: #fff; border-color: #E8845C; }

/* ── Stats (top-right) ── */
.ct-stats {
    position: absolute;
    top: clamp(16px, 3vh, 32px);
    right: clamp(20px, 3vw, 48px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    z-index: 3; opacity: 0;
}
.creator-transition.active .ct-stats { animation: ctFadeIn 0.5s ease-out 0.3s forwards; }
.ct-stats-amount {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(14px, 1.4vw, 22px); font-weight: 800;
    color: #F5EDE6; line-height: 1; letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}
.ct-stats-tier {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(9px, 0.75vw, 11px); font-weight: 700;
    color: #E8845C; text-transform: uppercase; letter-spacing: 0.06em;
}
.ct-stats-conv {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(9px, 0.65vw, 10px); font-weight: 500;
    color: #C4A35A;
}

/* ── Layout ── */
.ct-layout {
    position: absolute;
    inset: clamp(60px,10vh,100px) clamp(20px,3vw,48px) clamp(20px,3vh,40px) clamp(60px,6vw,90px);
    display: flex; flex-direction: column; opacity: 0;
}
.creator-transition.active .ct-layout { animation: ctFadeIn 0.5s ease-out 0.15s forwards; }
@keyframes ctFadeIn { to { opacity: 1; } }

/* ── Y-axis — overlays chart left edge ── */
.ct-yaxis {
    position: absolute; left: 0; top: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: space-between;
    align-items: flex-end; pointer-events: none; z-index: 2;
    transform: translateX(calc(-100% - clamp(6px,0.8vw,12px)));
}
.ct-yaxis span {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(9px, 0.75vw, 11px); color: #8A7E75;
    font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}

/* ── Chart container — fills full layout width ── */
.ct-chart-wrap { flex: 1; position: relative; min-height: 0; overflow: visible; }
.ct-chart { width: 100%; height: 100%; display: block; }

/* ── Grid — hidden ── */
.ct-grid { display: none; }

/* ── Area fill ── */
.ct-area { opacity: 0; transition: opacity 0.6s ease-out; }
.creator-transition.active .ct-area { opacity: 1; }

/* ── Glow + Line — round joins so arrowhead looks like a natural pen flick ── */
.ct-glow { fill: none; stroke: #E8845C; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.10; }
.ct-line { fill: none; stroke-width: 1.26; stroke-linecap: round; stroke-linejoin: round; }

/* ── Tier dots — HTML spans, always perfect circles ── */
.ct-dot {
    position: absolute;
    width: clamp(4px, 0.45vw, 6px); height: clamp(4px, 0.45vw, 6px);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; transition: opacity 0.35s ease-out;
    border: 1px solid rgba(255,255,255,0.3);
    z-index: 6;
}
/* Dot pop-in animation (enhanced mode) */
.ct-dot.ct-dot-reveal {
    animation: ctDotPop 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes ctDotPop {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
    60%  { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

/* ── Sonar pulse rings ── */
.ct-sonar-ring {
    position: absolute;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid;
    transform: translate(-50%,-50%) scale(0);
    opacity: 0;
    pointer-events: none;
    animation: ctSonarRing 0.7s cubic-bezier(0.0,0.0,0.2,1) forwards;
    will-change: transform, opacity;
    z-index: 5;
}
@keyframes ctSonarRing {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.55; }
    100% { transform: translate(-50%,-50%) scale(1); opacity: 0; }
}

/* ── Odometer counter ── */
.ct-stats-amount.ct-odo {
    display: inline-flex; align-items: baseline;
    overflow: visible; line-height: 1;
}
.ct-odo-prefix { line-height: 1; }
.ct-odo-comma { line-height: 1; }
.ct-odo-col {
    display: inline-block;
    overflow: hidden;
    position: relative;
    line-height: 1;
}
.ct-odo-strip {
    display: block;
    transition: transform 120ms cubic-bezier(0.23,1,0.32,1);
    will-change: transform;
}
.ct-odo-strip > span {
    display: block; text-align: center;
}

/* ── Tier labels floating above dots ── */
.ct-tier-labels { position: absolute; inset: 0; pointer-events: none; }
.ct-tlabel {
    position: absolute; transform: translate(-50%, -100%);
    font-family: var(--font-display, sans-serif);
    font-size: clamp(10px, 0.85vw, 12px); font-weight: 700;
    white-space: nowrap; opacity: 0; transition: opacity 0.35s ease-out;
    padding-bottom: 8px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.ct-tlabel-bronze  { color: #F2C94C; }
.ct-tlabel-silver  { color: #B8A9D4; }
.ct-tlabel-gold    { color: #E8845C; }
.ct-tlabel-platinum { color: #F4A261; }

/* ── X-axis ── */
.ct-xaxis {
    display: flex; justify-content: space-between;
    padding-top: clamp(6px,0.8vh,12px); flex-shrink: 0;
}
.ct-xaxis span {
    font-family: var(--font-display, sans-serif);
    font-size: clamp(11px, 1.1vw, 15px); color: #8A7E75; font-weight: 600;
}
.ct-xaxis-title {
    text-align: center; flex-shrink: 0;
    font-family: var(--font-display, sans-serif);
    font-size: clamp(12px, 1.2vw, 16px); color: rgba(138,126,117,0.5);
    font-weight: 600; padding-top: clamp(2px,0.3vh,6px); letter-spacing: 0.02em;
}

/* ── Exit — slow dissolve reveals creator section beneath ── */
.creator-transition.exit { transition: opacity 0.9s ease-in; opacity: 0 !important; }
@keyframes ctBgOut { to { opacity: 0; } }
@keyframes ctFadeUp { to { opacity: 0; transform: translateY(-18px); } }

/* ── Responsive ── */
@media (max-width: 600px) {
    .ct-layout { inset: 48px 14px 14px 44px; }
    .ct-tier-tabs { top: 10px; left: 10px; gap: 4px; }
    .ct-tab { font-size: 8px; padding: 3px 7px; }
    .ct-stats { top: 10px; right: 10px; }
    .ct-stats-amount { font-size: 13px; }
    .ct-stats-tier { font-size: 8px; }
    .ct-stats-conv { font-size: 8px; }
    .ct-yaxis span { font-size: 8px; }
    .ct-xaxis span { font-size: 8px; }
    .ct-xaxis-title { font-size: 8px; padding-top: 2px; }
    .ct-tlabel { font-size: 7px; padding-bottom: 4px; }
    .ct-dot { width: 3px; height: 3px; }
}
@media (max-width: 400px) {
    .ct-layout { inset: 38px 8px 12px 38px; }
    .ct-stats-amount { font-size: 11px; }
    .ct-yaxis span, .ct-xaxis span { font-size: 7px; }
    .ct-tlabel { font-size: 7px; }
    .ct-tab { font-size: 7px; padding: 2px 5px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .ct-layout { inset: 44px 10px 10px 44px; }
    .ct-yaxis span, .ct-xaxis span { font-size: 8px; }
}
/* ── Chart: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .ct-dot.ct-dot-reveal { animation: none; opacity: 1; transform: translate(-50%,-50%) scale(1); }
    .ct-sonar-ring { animation: none; display: none; }
    .ct-odo-strip { transition: none; }
}
/* ── Chart: mobile sonar + particles sizing ── */
@media (max-width: 600px) {
    .ct-sonar-ring { width: 28px; height: 28px; border-width: 1px; }
}
.announce-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.announce-pill {
    display: inline-block;
    background: var(--terra);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    line-height: 1.5;
}
.announce-text { color: var(--canvas-300); }
.announce-link {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.15s;
}
.announce-link:hover { opacity: 0.82; }
.announce-link svg { flex-shrink: 0; width: 14px; height: 14px; }
.announce-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--canvas-400);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.15s;
}
.announce-close:hover { color: #fff; }

.announce-highlight { color: var(--terra); font-weight: 700; }

/* Dark theme adjustments for announce bar */
[data-theme="dark"] .announce-bar {
    background: var(--canvas-900);
}
/* Hide announce bar & tab in Electron desktop app */
body.is-electron .announce-bar { display: none; }
body.is-electron .announce-tab { display: none !important; }
/* Hide social login buttons on Electron desktop — Google/Apple SSO is for web + mobile only */
body.is-electron .social-btns,
body.is-electron .auth-divider { display: none !important; }

/* Capacitor (iOS/Android): safe area insets for notch/home indicator */
body.is-capacitor {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Hide desktop-only elements in Capacitor native app */
body.is-capacitor .nav-bar { display: none; }
body.is-capacitor #screen-landing { display: none !important; }
body.is-capacitor .announce-bar { display: none; }
body.is-capacitor .announce-tab { display: none !important; }
/* On Capacitor, auth-back-btn goes back to the animation splash page */

/* ============================================
   SPLASH SCREEN — Frequency Animation
   Shows on Capacitor mobile only (cold start).
   Frequency bars pulse on a dark canvas then
   fade out to reveal the sign-in screen.
   ============================================ */
.splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #131314;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top, 24px)) 32px max(28px, env(safe-area-inset-bottom, 28px));
}
/* Show on Capacitor only */
body.is-capacitor .splash-screen { display: flex; }

/* Fade-out when .exit class is added */
.splash-screen.exit {
    animation: splashScreenOut 0.55s ease-in forwards;
    pointer-events: none;
}
@keyframes splashScreenOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ─── Rotating rings canvas ─── */
.splash-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ─── Frequency waveform (reuses apWave animation from auth-right) ─── */
.splash-waveform {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 160px;
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
    animation: splashWaveIn 0.5s ease-out 0.2s both;
}
.splash-waveform::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%; height: 1.5px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(217,119,87,0.15) 8%,
        rgba(217,119,87,0.30) 30%,
        rgba(217,119,87,0.30) 70%,
        rgba(217,119,87,0.15) 92%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}
.splash-waveform span {
    width: 4px;
    border-radius: 3px;
    background: #D97757;
    animation: splashWavePulse 1.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * 0.07s);
    position: relative;
    z-index: 1;
}
@keyframes splashWavePulse {
    0%   { height: 8px;  opacity: 0.20; }
    100% { height: calc(12px + var(--i) * 9px); opacity: 0.80; }
}
@keyframes splashWaveIn {
    from { opacity: 0; transform: scaleY(0.3); }
    to   { opacity: 1; transform: scaleY(1); }
}
.splash-screen.exit .splash-waveform {
    animation: splashWaveOut 0.35s ease-in forwards !important;
}
@keyframes splashWaveOut {
    to { opacity: 0; transform: scaleY(0.08); }
}

/* ─── Wordmark ─── */
.splash-wordmark {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: splashWordIn 0.4s ease-out 0.25s both;
}
.splash-screen.exit .splash-wordmark {
    animation: splashWordOut 0.35s ease-in 0.05s forwards !important;
}
@keyframes splashWordIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes splashWordOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}
.splash-logo-text {
    font-family: 'Space Grotesk', var(--font-display, 'Satoshi', -apple-system, sans-serif);
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}
.splash-logo-text .logo-o path { stroke: #ffffff; }
.splash-logo-text .logo-o polygon { fill: #ffffff; }
/* Landscape: compress waveform height */
@media (orientation: landscape) and (max-height: 500px) {
    .splash-waveform { height: 80px; margin-bottom: 16px; }
    .splash-logo-text { font-size: 24px; }
}

/* Announce bar — mobile */
@media (max-width: 768px) {
    .announce-bar { padding: 8px 40px 8px 16px; font-size: 13.5px; }
    .announce-pill { font-size: 10px; padding: 2px 6px; }
    .announce-tab {
        font-size: 12.5px; padding: 10px 18px 10px 14px; gap: 6px;
        top: auto; bottom: 80px; right: 12px;
        border-radius: 50px;
    }
    .announce-tab-icon { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
    .announce-text .announce-full { display: none; }
    .announce-bar-inner { gap: 6px; }
}

/* --- Nav — floating glass bar --- */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px clamp(16px, 4vw, 48px);
    position: sticky; top: 0; z-index: 100;
    flex-wrap: wrap;
    transition: background 0.3s ease;
}
/* Nav text inversion when over dark sections */
.nav-bar.nav-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.nav-bar.nav-inverted .btn-ghost { color: rgba(255,255,255,0.85); }
.nav-bar.nav-inverted .btn-ghost:hover { background: rgba(255,255,255,0.1); color: #fff; }
.nav-bar.nav-inverted .logo-name { color: #F0EDE6; }
.nav-bar.nav-inverted .nav-mobile-download { color: rgba(255,255,255,0.85); }
.nav-bar.nav-inverted .nav-mobile-signin { color: rgba(255,255,255,0.85); }
.nav-bar.nav-inverted .signin-chevron { border-color: rgba(255,255,255,0.7); }
.nav-bar.nav-inverted .nsm-label { color: #F0EDE6; }
.nav-bar.nav-inverted .nav-demo-btn { background: #fff; color: var(--canvas-950); }
.nav-bar.nav-inverted .nav-demo-btn:hover { background: #F0EDE6; }
.nav-bar.nav-inverted.glass {
    background: rgba(10,10,20,0.45);
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.glass {
    background: rgba(250,249,240,0.32);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.nav-left { display: flex; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; cursor: pointer; }
.logo-name {
    font-family: 'Space Grotesk', var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--canvas-950);
    text-transform: uppercase;
}
/* Inline blade-O mark replacing the letter "O" — scales with font-size.
   viewBox frames the circle at cap-height; needle overflows below. */
.logo-o {
    display: inline-block;
    width: 0.72em;
    height: 0.72em;
    vertical-align: baseline;
    margin: 0 0.06em 0 -0.06em;
    overflow: visible;
}
.logo-o path { stroke: currentColor; fill: none; }
.logo-o polygon { fill: currentColor; }
[data-theme="dark"] .logo-name,
.dark .logo-name { color: var(--canvas-950); }
/* Body/subheading brand mentions — same font, normal O (no blade mark) */
.brand-text {
    font-family: 'Space Grotesk', var(--font-display);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.nav-actions { display: flex; gap: 10px; align-items: center; }
.nav-download-btn { display: inline-flex; align-items: center; gap: 6px; }

/* Hamburger menu button — hidden on desktop */
.nav-menu-btn {
    display: none;
    width: 36px; height: 36px;
    border: none; background: transparent;
    border-radius: var(--radius-sm);
    color: var(--canvas-700);
    cursor: pointer;
    align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.nav-menu-btn:hover { background: var(--canvas-100); color: var(--canvas-900); }
.nav-menu-btn.open svg path:nth-child(1) {
    transform: rotate(45deg) translate(2px, -2px);
    transform-origin: center;
}
.nav-menu-btn.open svg path:nth-child(2) { opacity: 0; }
.nav-menu-btn.open svg path:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 2px);
    transform-origin: center;
}
.nav-menu-btn svg path { transition: all 0.2s var(--ease); }

/* Mobile right actions — hidden on desktop, shown on mobile */
.nav-mobile-right {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.nav-mobile-download {
    width: 32px; height: 32px;
    border: none; background: transparent;
    border-radius: var(--radius-sm);
    color: var(--canvas-600);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.nav-mobile-download:hover { background: var(--canvas-100); color: var(--canvas-900); }
[data-theme="dark"] .nav-mobile-download { color: var(--canvas-400); }
[data-theme="dark"] .nav-mobile-download:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-mobile-signin {
    font-size: 13.5px;
    padding: 6px 12px;
}

/* Mobile nav overlay — transparent click-catcher behind dropdown */
.nav-mobile-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    z-index: 998;
}
.nav-mobile-overlay.open { display: block; }

/* Mobile nav drawer — compact dropdown card */
.nav-mobile-drawer {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 6px; left: 8px; right: 8px;
    background: var(--white);
    z-index: 999;
    padding: 6px;
    border-radius: 20px;
    box-shadow: 0 12px 48px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.04);
    border: 1px solid var(--canvas-150, var(--canvas-100));
    transform: translateY(-10px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.22s ease;
}
.nav-mobile-drawer.open { display: flex; }
.nav-mobile-drawer.open.visible { transform: translateY(0) scale(1); opacity: 1; }

/* Drawer header — 3-column grid: [✕ close] [logo centered] [spacer] */
.nav-drawer-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 12px 6px;
    flex-shrink: 0;
}
.nav-drawer-header .nav-drawer-close { justify-self: start; }
.nav-drawer-header .logo { justify-self: center; cursor: pointer; }

.nav-drawer-header .logo-name { font-size: 14.5px; font-weight: 700; }
.nav-drawer-header-spacer { width: 30px; }
.nav-drawer-close {
    width: 30px; height: 30px;
    border: none;
    background: var(--canvas-50);
    border-radius: 10px;
    color: var(--canvas-500);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.nav-drawer-close:hover { background: var(--canvas-100); color: var(--canvas-900); }
.nav-drawer-close:active { transform: scale(0.95); }

/* Links section */
.nav-drawer-links {
    display: flex;
    flex-direction: column;
    padding: 4px 4px;
}
.nav-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--canvas-700);
    cursor: pointer;
    text-align: left;
    position: relative;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), background 0.15s, color 0.15s;
}
.nav-mobile-link:last-child { border-bottom: none; }
.nav-mobile-chevron {
    color: var(--canvas-300);
    transition: transform 0.15s ease, color 0.15s;
    flex-shrink: 0;
}
.nav-mobile-link:hover { background: var(--canvas-50); color: var(--canvas-900); }
.nav-mobile-link:hover .nav-mobile-chevron { transform: translateX(2px); color: var(--canvas-500); }
.nav-mobile-link:active { background: var(--canvas-100); }

/* Staggered entrance */
.nav-mobile-drawer.open.visible .nav-mobile-link { opacity: 1; transform: translateY(0); }
.nav-mobile-drawer.open.visible .nav-mobile-link:nth-child(1) { transition-delay: 0.04s; }
.nav-mobile-drawer.open.visible .nav-mobile-link:nth-child(2) { transition-delay: 0.08s; }
.nav-mobile-drawer.open.visible .nav-mobile-link:nth-child(3) { transition-delay: 0.12s; }

/* Footer section */
.nav-drawer-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 4px 6px;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease 0.1s, transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) 0.1s;
}
.nav-mobile-drawer.open.visible .nav-drawer-footer { opacity: 1; transform: translateY(0); }

.nav-mobile-cta {
    width: 100%;
    padding: 11px 20px;
    background: var(--canvas-950);
    color: var(--white);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, transform 0.1s;
}
.nav-mobile-cta:hover { background: var(--canvas-800); }
.nav-mobile-cta:active { transform: scale(0.97); }

.nav-mobile-signin-link {
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 13px;
    color: var(--canvas-400);
    cursor: pointer;
    padding: 8px 4px 2px;
    text-align: center;
    transition: color 0.15s;
}
.nav-mobile-signin-link span {
    color: var(--canvas-600);
    font-weight: 600;
}
.nav-mobile-signin-link:hover span { color: var(--terra); }
.nav-mobile-theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--canvas-500);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}
.nav-mobile-theme-btn:hover {
    color: var(--canvas-900);
}
.nav-mobile-theme-btn .tcb-icon {
    width: 16px;
    height: 16px;
}
.nav-mobile-theme-btn .tcb-icon svg {
    width: 16px;
    height: 16px;
}
[data-theme="dark"] .nav-mobile-theme-btn {
    color: var(--canvas-400);
}
[data-theme="dark"] .nav-mobile-theme-btn:hover {
    color: #fff;
}
[data-theme="dark"] .nav-mobile-drawer { background: #1c1c1e; box-shadow: 0 8px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06); }
[data-theme="dark"] .nav-drawer-close { background: rgba(255,255,255,0.08); color: var(--canvas-400); }
[data-theme="dark"] .nav-drawer-close:hover { background: rgba(255,255,255,0.14); color: #fff; }
[data-theme="dark"] .nav-mobile-link { color: var(--canvas-800); }
[data-theme="dark"] .nav-mobile-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="dark"] .nav-mobile-chevron { color: rgba(255,255,255,0.45); }
[data-theme="dark"] .nav-mobile-link:hover .nav-mobile-chevron { color: rgba(255,255,255,0.7); }
[data-theme="dark"] .nav-mobile-cta { background: #fff; color: #111; }
[data-theme="dark"] .nav-mobile-cta:hover { background: #e8e8e8; }
[data-theme="dark"] .nav-mobile-signin-link { color: rgba(255,255,255,0.55); }
[data-theme="dark"] .nav-mobile-signin-link span { color: rgba(255,255,255,0.75); }
[data-theme="dark"] .nav-mobile-signin-link:hover span { color: var(--terra); }
[data-theme="dark"] .nav-menu-btn { color: var(--canvas-400); }
[data-theme="dark"] .nav-menu-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
[data-theme="dark"] .nav-mobile-overlay { background: rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .nav-mobile-signin { color: var(--canvas-400); }
[data-theme="dark"] .nav-mobile-signin:hover { color: #fff; }

/* Back / Home button — used on auth, studio, live */
.back-home-btn {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; background: transparent;
    border-radius: var(--radius-sm);
    color: var(--canvas-600);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.back-home-btn:hover { background: var(--canvas-100); color: var(--canvas-900); }
[data-theme="dark"] .back-home-btn { color: var(--canvas-400); }
[data-theme="dark"] .back-home-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Auth top bar — logo + back on mobile, hidden on desktop */
.auth-topbar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--white);
}
.auth-back-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: 1.5px solid var(--canvas-200);
    background: var(--white);
    border-radius: 50%;
    color: var(--canvas-600);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}
.auth-back-btn:hover { background: var(--canvas-50); color: var(--canvas-900); border-color: var(--canvas-300); }
[data-theme="dark"] .auth-topbar { background: var(--canvas-950); border-bottom-color: transparent; }
[data-theme="dark"] .auth-back-btn { color: var(--canvas-400); }
[data-theme="dark"] .auth-back-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* Mobile nav: show hamburger, hide desktop links */
@media (max-width: 768px) {
    .nav-menu-btn { display: flex; }
    .nav-actions { display: none; }
    .nav-mobile-right { display: flex; gap: 2px; }
    .nav-bar {
        padding: 10px 16px;
        background: rgba(242, 230, 216, 0.88);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-bottom: 1px solid rgba(200, 180, 160, 0.18);
    }
    [data-theme="dark"] .nav-bar {
        background: var(--canvas-950);
        border-bottom-color: rgba(255,255,255,0.06);
    }
    .nav-left { gap: 6px; }
    .logo-name { font-size: 14.5px; font-weight: 700; }
    .nav-menu-btn { width: 34px; height: 34px; border-radius: 10px; }
    .nav-mobile-download { width: 34px; height: 34px; border-radius: 10px; }
    .nav-mobile-signin {
        font-size: 13px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 10px;
        background: var(--canvas-950);
        color: var(--white);
        border: none;
        transition: background 0.15s, transform 0.1s;
    }
    .nav-mobile-signin:hover { background: var(--canvas-800); }
    .nav-mobile-signin:active { transform: scale(0.97); }
    [data-theme="dark"] .nav-mobile-signin { background: var(--white); color: var(--canvas-950); }
    [data-theme="dark"] .nav-mobile-signin:hover { background: var(--canvas-200); }
    .nav-mobile-theme-btn { width: 34px; height: 34px; border-radius: 10px; }
}

/* --- Hero --- */
.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(48px, 8vw, 80px) clamp(20px, 4vw, 48px) clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-height: 540px;
    overflow: hidden;
}

/* Aurora canvas — anchored to #screen-landing (position:relative), height set by JS */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height is set dynamically by resize() in hero-canvas.js */
    z-index: 0;
    pointer-events: none;
    display: block;
}

/* Hero content lifts above the aurora canvas */
.hero-content,
.hero-visual {
    position: relative;
    z-index: 1;
}
/* ═══════════════════════════════════════════════════════
   HERO ILLUSTRATION ROW
   Flex container: [SVG face profile] [External answer panel]
   Absolutely positioned in hero on the left side.
   The answer panel is a SIBLING of the SVG — never overlapping it.
   ═══════════════════════════════════════════════════════ */

.hero-illust-row {
    display: flex;
    position: relative;
    align-items: center;
    gap: 0;
    pointer-events: none;
    z-index: 1;
    width: clamp(180px, 28vw, 280px);
    margin: 0 auto 40px;
    justify-content: center;
}

/* SVG wrapper — fixed square, holds the brain/face illustration */
#glass-brain-wrap {
    position: relative;
    flex-shrink: 0;
    width: clamp(160px, 24vw, 260px);
    height: clamp(160px, 24vw, 260px);
    overflow: visible;
}

#glass-brain-wrap svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Head silhouette styles ── */
.gb-head-silhouette {
    transition: fill 0.6s ease;
}
.gb-head-shadow {
    animation: gb-head-breathe 4s ease-in-out infinite;
}
@keyframes gb-head-breathe {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* ── Scan beam sweep animation (clipped to head) ── */
.gb-scan-beam {
    animation: gb-scan-sweep 3.8s ease-in-out infinite;
}
@keyframes gb-scan-sweep {
    0%   { transform: translateX(40px); }
    50%  { transform: translateX(280px); }
    100% { transform: translateX(40px); }
}

/* ── Signal pathway pulse ── */
.gb-veins path {
    animation: gb-vein-pulse 2.6s ease-in-out infinite;
}
.gb-veins path:nth-child(2) { animation-delay: 0.15s; }
.gb-veins path:nth-child(3) { animation-delay: 0.30s; }
.gb-veins path:nth-child(4) { animation-delay: 0.45s; }
.gb-veins path:nth-child(5) { animation-delay: 0.55s; }
.gb-veins path:nth-child(6) { animation-delay: 0.65s; }
.gb-veins path:nth-child(7) { animation-delay: 0.40s; }
.gb-veins path:nth-child(8) { animation-delay: 0.55s; }
.gb-veins path:nth-child(9) { animation-delay: 0.25s; }
.gb-veins path:nth-child(10) { animation-delay: 0.35s; }
@keyframes gb-vein-pulse {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 1; }
}

/* ── Audio waveform bars ── */
.hi-audio {
    animation: gb-audio-fade 3s ease-in-out infinite;
}
@keyframes gb-audio-fade {
    0%, 100% { opacity: 0.08; }
    40%, 60% { opacity: 0.22; }
}
.gb-bar { transform-origin: center bottom; }
.gb-bar-1 { animation: gb-bar-bounce 1.2s ease-in-out 0.0s infinite; }
.gb-bar-2 { animation: gb-bar-bounce 1.2s ease-in-out 0.15s infinite; }
.gb-bar-3 { animation: gb-bar-bounce 1.2s ease-in-out 0.30s infinite; }
.gb-bar-4 { animation: gb-bar-bounce 1.2s ease-in-out 0.45s infinite; }
.gb-bar-5 { animation: gb-bar-bounce 1.2s ease-in-out 0.60s infinite; }
@keyframes gb-bar-bounce {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.6); }
}

/* ── Answer node corona glow ── */
.gb-corona {
    animation: gb-corona-pulse 3s ease-in-out infinite;
}
@keyframes gb-corona-pulse {
    0%, 100% { opacity: 0; r: 18; }
    50%      { opacity: 0.6; r: 24; }
}
.gb-node-core {
    animation: gb-core-pulse 3s ease-in-out infinite;
}
@keyframes gb-core-pulse {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 0.55; }
}

/* Answer panel — floats from the answer-node on the head illustration */
.gb-answer-panel {
    position: absolute;
    top: 38%;
    left: 60%;
    width: clamp(120px, 50%, 180px);
    min-height: 60px;
    padding: 8px 10px 8px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(7.5px, 0.55vw + 4.5px, 9.5px);
    line-height: 1.65;
    color: rgba(217, 119, 87, 0.90);
    background: rgba(247, 237, 228, 0.85);
    border: 1px solid rgba(217, 119, 87, 0.28);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 0;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* "AI ANSWER" label header */
.gb-answer-panel::before {
    content: 'AI ANSWER';
    display: block;
    font-size: 6.5px;
    letter-spacing: 0.14em;
    color: rgba(217, 119, 87, 0.50);
    margin-bottom: 4px;
    font-weight: 600;
}

/* Thin connecting line from panel back toward the answer node */
.gb-answer-panel::after {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 1px;
    background: rgba(217, 119, 87, 0.35);
}

.gb-answer-panel.gbp-on {
    opacity: 1;
}

/* Hero content — text block, centered below illustration */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 680px;
    width: 100%;
    padding-left: 0;
}

/* Mobile/narrow — stack vertically */
@media (max-width: 767px) {
    .hero {
        min-height: auto;
        padding: 48px 20px 40px;
        overflow-x: hidden;
    }
    .hero-illust-row {
        width: 160px;
        margin-bottom: 8px;
    }
    #glass-brain-wrap {
        width: 140px;
        height: 140px;
    }
    .gb-answer-panel {
        position: absolute;
        top: auto;
        bottom: -24%;
        left: 50%;
        transform: translateX(-50%);
        width: clamp(140px, 70%, 220px);
        font-size: 8px;
        min-height: 44px;
    }
    .gb-answer-panel::after {
        display: none;
    }
    .hero-visual {
        max-width: calc(100vw - 48px);
        margin: 0 auto;
    }
    /* Landing text scaling — tablet */
    .hero-title { font-size: 32px; }
    .hero-desc { font-size: 14px; }
    .section-label { font-size: 11px; padding: 4px 12px; }
    .section-title { font-size: 22px; }
    .section-desc { font-size: 13.5px; }
    /* Pricing cards */
    .lp-price-card { padding: 26px 20px 22px; }
    .lp-price-name { font-size: 18px; }
    .lp-price-story { font-size: 13.5px; line-height: 1.55; }
    .lp-price-amount { font-size: 25px; }
    .lp-price-interval { font-size: 12.5px; }
    .lp-price-detail { font-size: 12.5px; }
    .lp-price-btn { font-size: 13px; padding: 9px 20px; width: auto; max-width: 75%; margin: 0 auto; display: block; text-align: center; }
    .lp-price-hero .lp-price-btn { display: inline-flex; max-width: 75%; margin: 0 auto; padding: 10px 20px; font-size: 13.5px; }
    .lp-price-badge { font-size: 9.5px; }
    .lp-price-icon { width: 44px; height: 44px; }
    /* How It Works — inherits from 900px breakpoint */
    /* Feature cards */
    .f-card { padding: 24px; }
    .f-card h3 { font-size: 13.5px; }
    .f-card p { font-size: 13px; }
    /* Persona cards */
    .persona-card h3 { font-size: 13.5px; }
    .persona-card p { font-size: 13px; }
    .persona-icon { width: 56px; height: 56px; }
    /* FAQ */
    .faq-q { font-size: 14.5px; }
    .faq-a { font-size: 13.5px; }
    /* Proof quotes */
    .proof-quote p { font-size: 13.5px; }
    .proof-author { font-size: 12.5px; }
    /* Security cards */
    .security-card strong { font-size: 13.5px; }
    .security-card span { font-size: 13px; }
    /* Compare table */
    .compare-table { font-size: 12.5px; }
    /* Creator section */
    .creator-title { font-size: 22px; }
    .creator-desc { font-size: 13.5px; }
    .creator-badge { font-size: 10px; }
    /* Closing CTA */
    .closing-cta-title { font-size: 20px; }
    .closing-cta-desc { font-size: 13.5px; }
}

/* Tablet (768px+) */
@media (min-width: 768px) {
    .hero-illust-row { width: clamp(200px, 26vw, 280px); }
    #glass-brain-wrap { width: clamp(180px, 24vw, 260px); height: clamp(180px, 24vw, 260px); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
    .hero { min-height: 540px; }
    .hero-illust-row { width: clamp(220px, 22vw, 300px); }
    #glass-brain-wrap { width: clamp(200px, 22vw, 280px); height: clamp(200px, 22vw, 280px); }
    .gb-answer-panel { font-size: 9.5px; padding: 10px 12px 10px 14px; }
}

/* Large desktop (1400px+) */
@media (min-width: 1400px) {
    .hero { max-width: 1400px; min-height: 560px; }
    .hero-illust-row { width: 300px; }
    #glass-brain-wrap { width: 280px; height: 280px; }
    .gb-answer-panel { left: 55%; width: clamp(140px, 48%, 185px); font-size: 9.5px; }
}

/* Ultra-wide (1700px+) */
@media (min-width: 1700px) {
    .hero { max-width: 1600px; min-height: 580px; }
    .hero-illust-row { width: 320px; }
    #glass-brain-wrap { width: 300px; height: 300px; }
    .gb-answer-panel { left: 52%; width: clamp(150px, 46%, 195px); font-size: 10px; }
}
.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 18px;
    background: var(--canvas-950);
    color: var(--canvas-400);
    border-radius: var(--radius-full);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 28px;
    text-transform: uppercase;
}
.chip-dot {
    width: 6px; height: 6px;
    background: var(--terra);
    border-radius: 50%;
    animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(217,119,87,0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(217,119,87,0); }
}
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(25px, 2.2vw, 32px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.045em;
    margin-bottom: 20px;
    color: var(--canvas-950);
}
.text-gradient {
    color: var(--terra);
    position: relative;
}
.text-gradient::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 0; right: 0;
    height: 3px;
    background: var(--terra);
    border-radius: 2px;
    opacity: 0.25;
    animation: underlineDraw 1s var(--ease) 0.6s both;
}
@keyframes underlineDraw {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}
.hero-desc {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 460px;
    line-height: 1.7;
    margin-bottom: 32px;
}
.hero-buttons { display: flex; gap: 12px; margin-bottom: 40px; justify-content: center; }
.hero-metrics { display: flex; align-items: center; gap: 32px; justify-content: center; }
.metric { display: flex; flex-direction: column; }
.metric-val {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--canvas-900);
}
.metric-lbl { font-size: 13.5px; color: var(--text-muted); font-weight: 500; margin-top: 2px; }
.metric-sep { width: 1px; height: 28px; background: var(--canvas-300); opacity: 0.5; }

/* Hero Visual */
.hero-visual { perspective: 1200px; position: relative; width: 100%; max-width: 640px; }
.demo-card {
    background: var(--canvas-950);
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 80px rgba(19,19,20,0.18), 0 4px 12px rgba(19,19,20,0.08);
    overflow: hidden;
    transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
    width: 100%;
    max-width: 420px;
    margin-left: auto;
}
.demo-card:hover {
    box-shadow: 0 32px 100px rgba(19,19,20,0.22), 0 8px 20px rgba(19,19,20,0.1);
    transform: translateY(-4px);
}
.demo-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.demo-dots { display: flex; gap: 6px; }
.demo-dots span { width: 10px; height: 10px; border-radius: 50%; }
.demo-dots span:nth-child(1) { background: #FF5F57; }
.demo-dots span:nth-child(2) { background: #FEBC2E; }
.demo-dots span:nth-child(3) { background: #28C840; }
.demo-title { font-size: 12.5px; color: rgba(255,255,255,0.5); font-weight: 600; flex: 1; text-align: center; }
.demo-live {
    display: flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; color: #EF4444;
    letter-spacing: 0.06em;
}
.demo-body { padding: 18px 20px 20px; }
.demo-q, .demo-a { margin-bottom: 14px; }
.demo-q:last-child, .demo-a:last-child { margin-bottom: 0; }
.demo-speaker {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: rgba(255,255,255,0.35); margin-bottom: 8px; display: block;
}
.ai-speaker { color: var(--terra); }
.demo-q p, .demo-a p { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,0.7); }
.demo-a p {
    background: rgba(217,119,87,0.08);
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--terra);
    color: rgba(255,255,255,0.8);
}
/* Typing cursor in AI answer */
.demo-a p::after {
    content: '|';
    color: var(--terra);
    font-weight: 300;
    animation: demoBlink 1s step-end infinite;
    margin-left: 2px;
}
@keyframes demoBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Dark mode — demo card already dark, tweak for dark bg */
[data-theme="dark"] .demo-card {
    background: #1C1C22;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.25);
}

/* --- Sections --- */
.section { max-width: 1080px; margin: 0 auto; padding: clamp(48px, 8vw, 88px) clamp(16px, 4vw, 48px); }
.section-label {
    display: inline-block; padding: 4px 14px;
    background: var(--canvas-950); color: var(--canvas-400);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 14px;
}
.section-title {
    font-family: var(--font-display);
    font-size: clamp(19px, 1.6vw, 22px); font-weight: 800;
    letter-spacing: -0.035em; margin-bottom: 10px;
    color: var(--canvas-950);
}
.section-desc {
    font-size: 13px; color: var(--text-secondary);
    margin-bottom: 40px; max-width: 520px; line-height: 1.7;
}

/* Features — card-style with soft shadows */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.f-card {
    padding: 24px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}
.f-card::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: var(--terra-50);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.f-card:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(-4px);
}
.f-card:hover::after { opacity: 1; }
.f-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); margin-bottom: 14px;
    position: relative; z-index: 1;
}
.f-icon svg { width: 18px; height: 18px; }
.i-purple { background: var(--terra-50); color: var(--terra); }
.i-blue { background: #EFF6FF; color: #3B82F6; }
.i-green { background: var(--emerald-50); color: var(--emerald-500); }
.i-orange { background: var(--terra-100); color: var(--terra-600); }
.i-pink { background: var(--terra-50); color: var(--terra-400); }
.i-teal { background: var(--emerald-50); color: var(--emerald-600); }
.i-atlas { background: #FDF6EE; color: #B8860B; }

/* Atlas — orbits draw themselves one after another, then fade and repeat */
/* Total cycle: 6s. Each ring: draw (1s) + visible (3.5s) + fade (1.5s) */
.atlas-ring {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    opacity: 0;
}
/* Ring 1: starts at 0s */
.atlas-r1 { animation: atlas-r1-anim 6s ease-in-out infinite; }
/* Ring 2: offset by ~1s */
.atlas-r2 { animation: atlas-r2-anim 6s ease-in-out infinite; }
/* Ring 3: offset by ~2s */
.atlas-r3 { animation: atlas-r3-anim 6s ease-in-out infinite; }

@keyframes atlas-r1-anim {
    0%   { stroke-dashoffset: 44; opacity: 0; }
    3%   { opacity: 0.7; }
    17%  { stroke-dashoffset: 0; opacity: 0.7; }
    75%  { stroke-dashoffset: 0; opacity: 0.35; }
    90%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 44; opacity: 0; }
}
@keyframes atlas-r2-anim {
    0%, 17%  { stroke-dashoffset: 44; opacity: 0; }
    20%  { opacity: 0.7; }
    33%  { stroke-dashoffset: 0; opacity: 0.7; }
    80%  { stroke-dashoffset: 0; opacity: 0.35; }
    93%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 44; opacity: 0; }
}
@keyframes atlas-r3-anim {
    0%, 33%  { stroke-dashoffset: 44; opacity: 0; }
    36%  { opacity: 0.7; }
    50%  { stroke-dashoffset: 0; opacity: 0.7; }
    85%  { stroke-dashoffset: 0; opacity: 0.35; }
    96%  { stroke-dashoffset: 0; opacity: 0; }
    100% { stroke-dashoffset: 44; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .atlas-ring { stroke-dashoffset: 0; opacity: 0.35; animation: none; }
}

/* ---- Zero-Prompt AI: sparkle twinkle ---- */
.wand-sparkle {
    transform-origin: center;
}
.wand-s1 { animation: wand-twinkle 3s ease-in-out infinite; }
.wand-s2 { animation: wand-twinkle 3s ease-in-out infinite 1s; }
.wand-s3 { animation: wand-twinkle 3s ease-in-out infinite 2s; }

@keyframes wand-twinkle {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.2; transform: scale(0.6); }
}

/* ---- Hears Everything: signal wave pulse ---- */
.signal-wave {
    transform-origin: 12px 15.5px;
}
.signal-w1 { animation: signal-pulse 4s ease-in-out infinite; }
.signal-w2 { animation: signal-pulse 4s ease-in-out infinite 0.6s; }
.signal-w3 { animation: signal-pulse 4s ease-in-out infinite 1.2s; }

@keyframes signal-pulse {
    0%, 100% { opacity: 0.1; }
    30%, 50% { opacity: 0.7; }
    70%      { opacity: 0.1; }
}

/* ---- Voice Readback: headphone sound waves ---- */
.hp-wave {
    transform-origin: center;
}
.hp-w1 { animation: hp-pulse 3.5s ease-in-out infinite; }
.hp-w2 { animation: hp-pulse 3.5s ease-in-out infinite 0.5s; }

@keyframes hp-pulse {
    0%, 100% { opacity: 0.1;  transform: scale(1); }
    40%, 55% { opacity: 0.55; transform: scale(1.1); }
    70%      { opacity: 0.1;  transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wand-sparkle,
    .signal-wave,
    .hp-wave { animation: none; }
}

/* Monitor face — animated eyes, natural idle gaze */
.monitor-face { overflow: visible; }
.monitor-pupil {
    animation: eyes-look 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes eyes-look {
    0%, 20%  { transform: translate(0, 0); }
    24%      { transform: translate(1.5px, 0); }
    28%, 38% { transform: translate(1.5px, 0); }
    42%      { transform: translate(0, 0); }
    46%, 55% { transform: translate(0, 0); }
    59%      { transform: translate(-1.5px, 0); }
    63%, 73% { transform: translate(-1.5px, 0); }
    77%      { transform: translate(0, -1px); }
    82%, 90% { transform: translate(0, 0); }
    100%     { transform: translate(0, 0); }
}

/* Code Interview terminal prompt icon */
.code-prompt-icon {
    display: flex; align-items: center; gap: 2px;
    color: currentColor;
}
.code-chevron { flex-shrink: 0; }
.code-cursor {
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 20px; font-weight: 600; line-height: 1;
    animation: blink-cursor 1s step-end infinite;
}
@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ---- Neural network icon animation ---- */
.nn-icon { overflow: visible; }

/* Wires: dim by default, pulse bright in sequence */
.nn-wire { opacity: 0.1; transition: opacity 0.3s; }
.nn-w-ih { animation: nn-wire-flash 3s ease-in-out infinite; }
.nn-w-ho { animation: nn-wire-flash 3s ease-in-out infinite 1s; }

@keyframes nn-wire-flash {
    0%, 20% { opacity: 0.08; }
    30%, 50% { opacity: 0.4; stroke-width: 0.9; }
    60%, 100% { opacity: 0.08; }
}

/* Nodes: pulse opacity in waves across layers */
.nn-node { transition: opacity 0.3s; }
.nn-input {
    opacity: 0.3;
    animation: nn-node-fire 3s ease-in-out infinite;
}
.nn-hidden {
    opacity: 0.2;
    animation: nn-node-fire 3s ease-in-out infinite 0.6s;
}
.nn-output {
    opacity: 0.25;
    animation: nn-node-fire 3s ease-in-out infinite 1.2s;
}

@keyframes nn-node-fire {
    0%, 15% { opacity: 0.2; transform: scale(1); }
    25%, 45% { opacity: 1; transform: scale(1.15); }
    60%, 100% { opacity: 0.2; transform: scale(1); }
}

.f-card h3 {
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 700; margin-bottom: 6px;
    color: var(--canvas-900); position: relative; z-index: 1;
}
.f-card p {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.65; position: relative; z-index: 1;
}

/* How It Works */
.steps-row { display: flex; align-items: flex-start; gap: clamp(10px, 1.5vw, 16px); }
.hw-step {
    flex: 1; padding: clamp(20px, 3vw, 36px);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease);
}
.hw-step:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.hw-num {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 29px); font-weight: 900;
    color: var(--terra-100); letter-spacing: -0.04em; margin-bottom: clamp(8px, 1.5vw, 16px); line-height: 1;
}
.hw-step h3 {
    font-family: var(--font-display);
    font-size: clamp(12.5px, 1.2vw, 14px); font-weight: 700; margin-bottom: clamp(6px, 1vw, 10px); color: var(--canvas-900);
}
.hw-step p { font-size: clamp(12px, 1.1vw, 13.5px); color: var(--text-secondary); line-height: 1.7; }
.hw-arrow { padding-top: 56px; color: var(--canvas-400); opacity: 0.5; }

@media (max-width: 900px) {
    .steps-row { flex-direction: column; gap: 10px; }
    .hw-arrow { display: none; }
    .hw-step {
        display: grid;
        grid-template-columns: 36px 1fr;
        grid-template-rows: auto auto;
        gap: 0 12px;
        padding: 18px 20px;
    }
    .hw-num {
        grid-row: 1 / -1;
        align-self: center;
        margin-bottom: 0;
        font-size: 22px;
    }
    .hw-step h3 { font-size: 14.5px; margin-bottom: 2px; }
    .hw-step p { font-size: 13px; line-height: 1.5; }
}

/* Footer */
.landing-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 32px clamp(16px, 4vw, 48px);
    max-width: 1080px; margin: 0 auto;
    opacity: 0.6;
}
.footer-text { font-size: 13.5px; color: var(--text-muted); }
.footer-links { display: flex; align-items: center; gap: 8px; }
.footer-links a { font-size: 12.5px; color: var(--text-muted); text-decoration: none; transition: color 0.15s; }
.footer-links a:hover { color: var(--text-primary); }
.footer-dot { font-size: 11px; color: var(--text-muted); }

/* --- Auth --- */
.auth-layout { display: grid; grid-template-columns: 1fr 1fr; height: 100%; overflow: hidden; }
.auth-left {
    display: flex; flex-direction: column;
    align-items: center;
    padding: clamp(32px, 5vh, 64px) clamp(24px, 5vw, 64px);
    justify-content: center;
    background: var(--white);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.auth-left::-webkit-scrollbar { display: none; }
.auth-left .logo { margin-bottom: 0; }
.auth-box { width: 100%; max-width: 420px; flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center; }
.auth-step { display: none; }
.auth-step.active { display: block; animation: fadeUp 0.4s var(--ease); }
.auth-box h2 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 700;
    letter-spacing: -0.03em; margin-bottom: 12px;
    color: #222;
    text-shadow: none;
}
.auth-box p { font-size: 14px; color: #666; margin-bottom: 36px; text-shadow: none; }
.auth-box .input-group { margin-bottom: 24px; }
.auth-box .btn-full { margin-top: 6px; }
/* Auth Continue/Sign In buttons stay black — no terra glow on btn-ready */
.auth-box .btn-primary.btn-ready,
.auth-box .btn-primary.btn-ready:hover {
    background: var(--canvas-950);
    color: var(--canvas-100);
    box-shadow: 0 4px 12px rgba(19,19,20,0.15);
    transform: translateY(-1px);
}
/* Auth error banner — Google-style inline error */
.auth-error-banner {
    display: none;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: var(--red-50, #fef2f2);
    border: 1px solid var(--red-200, #fecaca);
    border-radius: 10px;
    margin-bottom: 14px;
    animation: authErrorIn 0.35s var(--ease);
}
.auth-error-banner.visible { display: flex; }
.auth-error-banner.shake { animation: authShake 0.4s ease; }
.auth-error-icon { flex-shrink: 0; color: var(--red-500, #ef4444); margin-top: 1px; }
.auth-error-text { font-size: 13.5px; font-weight: 500; color: var(--red-700, #b91c1c); line-height: 1.45; }
[data-theme="dark"] .auth-error-banner { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); }
[data-theme="dark"] .auth-error-text { color: #f87171; }
[data-theme="dark"] .auth-error-icon { color: #f87171; }
/* Error state on inputs */
.input-group.has-error input { border-color: var(--red-400, #f87171) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.08); }
.input-group.has-error label { color: var(--red-500, #ef4444); }
[data-theme="dark"] .input-group.has-error input { border-color: rgba(248,113,113,0.5) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1); }
@keyframes authErrorIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes authShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-6px); }
    30% { transform: translateX(5px); }
    45% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}
/* ── Password Strength Meter ── */
.pw-strength {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.pw-strength.visible { display: flex; }
.pw-strength-bars {
  display: flex;
  gap: 4px;
  flex: 1;
}
.pw-strength-bars span {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--canvas-200);
  transition: background 0.25s ease;
}
.pw-strength-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
  transition: color 0.25s ease;
}
/* Strength levels */
.pw-strength[data-level="1"] .pw-strength-bars span:nth-child(1) { background: #EF4444; }
.pw-strength[data-level="1"] .pw-strength-label { color: #EF4444; }
.pw-strength[data-level="2"] .pw-strength-bars span:nth-child(-n+2) { background: #F59E0B; }
.pw-strength[data-level="2"] .pw-strength-label { color: #F59E0B; }
.pw-strength[data-level="3"] .pw-strength-bars span:nth-child(-n+3) { background: #3B82F6; }
.pw-strength[data-level="3"] .pw-strength-label { color: #3B82F6; }
.pw-strength[data-level="4"] .pw-strength-bars span { background: #10B981; }
.pw-strength[data-level="4"] .pw-strength-label { color: #10B981; }

.auth-links { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.auth-forgot-link {
    border: none; background: none; padding: 4px 0;
    font-size: 13.5px; color: var(--terra); cursor: pointer;
    font-family: var(--font); font-weight: 500;
}
.auth-forgot-link:hover { text-decoration: underline; }
.auth-step-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: var(--canvas-50);
    color: var(--canvas-500);
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.15s ease, color 0.15s ease;
}
.auth-step-back:hover { background: var(--canvas-100); color: var(--canvas-900); }
[data-theme="dark"] .auth-step-back { background: rgba(255,255,255,0.06); color: var(--canvas-400); }
[data-theme="dark"] .auth-step-back:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Welcome back email row */
.auth-welcome-email-display {
    margin: 6px 0 20px;
    font-size: 14px;
    color: var(--canvas-500);
    font-weight: 400;
    word-break: break-all;
}

.auth-right {
    background: #0f0f10;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
/* ── Breath Graph canvas ── */
.auth-breath-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}
/* auth-visual: text centered vertically in the panel */
.auth-visual {
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 32px;
    box-sizing: border-box;
}
.auth-illust-text {
    margin-top: 0;
}

/* Text */
.auth-illust-text h3 {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 12px;
    letter-spacing: -0.02em;
}
.auth-illust-text p { font-size: 14.5px; color: rgba(255,255,255,0.35); line-height: 1.7; max-width: 320px; }

/* --- Animations --- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.anim-fade-up { opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s var(--ease) forwards; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.16s; }
.d3 { animation-delay: 0.24s; }
.d4 { animation-delay: 0.32s; }
.d5 { animation-delay: 0.5s; }

/* Scrollbar — thin, subtle, rounded */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
::-webkit-scrollbar-thumb { background: var(--canvas-200); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--canvas-300); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

::selection { background: var(--terra-100); color: var(--terra-900); }

/* Desktop: hide auth-topbar, show desktop logo + back button */
.auth-topbar { display: none; }
.auth-logo-desktop { display: flex; }
.auth-desktop-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    margin-bottom: 32px;
}
.auth-back-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px 6px 10px;
    border: 1px solid var(--canvas-200);
    background: transparent;
    border-radius: 8px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--canvas-500);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    font-family: var(--font-body);
}
.auth-back-desktop:hover {
    background: var(--canvas-50);
    color: var(--canvas-800);
    border-color: var(--canvas-300);
}
.auth-back-desktop svg { flex-shrink: 0; }
[data-theme="dark"] .auth-back-desktop { color: var(--canvas-400); border-color: var(--canvas-700); }
[data-theme="dark"] .auth-back-desktop:hover { background: rgba(255,255,255,0.06); color: #fff; border-color: var(--canvas-500); }
/* Electron: swap back button label and icon */
body.is-electron .auth-back-label-web { display: none; }
body.is-electron .auth-back-label-electron { display: inline !important; }
body.is-electron .auth-back-desktop .auth-back-chevron { display: none; }
body.is-electron .auth-back-desktop .auth-back-external { display: inline-flex !important; }

/* Tablet / vertical screen: side-by-side but taller panel — pull animation up */

/* Tablet auth: stack vertically — topbar → animation → form */
@media (max-width: 767px) {
    #screen-auth.active { display: flex; flex-direction: column; }
    #screen-auth { position: relative; }
    /* Show mobile topbar header */
    .auth-topbar {
        display: flex !important;
        padding: 10px 16px;
        background: var(--white);
        border-bottom: 1px solid var(--canvas-150, var(--canvas-100));
        gap: 8px;
        position: relative;
        z-index: 25;
    }
    .auth-topbar .auth-back-btn {
        width: 34px; height: 34px;
        border-radius: 10px;
    }
    .auth-topbar .logo-name { font-size: 14.5px; font-weight: 700; }
    [data-theme="dark"] .auth-topbar {
        background: var(--canvas-950);
        border-bottom-color: rgba(255,255,255,0.06);
    }
    .auth-logo-desktop { display: none !important; }
    .auth-desktop-toprow { display: contents; }
    .auth-back-desktop { display: none; }
    /* Layout: animation 35vh top, form rest bottom */
    .auth-layout {
        flex: 1; min-height: 0;
        grid-template-columns: 1fr;
        grid-template-rows: 40vh 1fr;
        background: var(--white);
    }
    /* Animation: top section */
    .auth-right {
        order: -1;
        position: relative;
        z-index: 2;
        border-radius: 0 0 24px 24px;
    }
    .auth-visual {
        padding: 0 16px;
    }
    .auth-illust-text {
        margin-top: 0 !important;
        zoom: 0.60;
    }
    .auth-illust-text h3 { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 6px !important; }
    .auth-illust-text p { font-size: 14.5px !important; line-height: 1.5 !important; max-width: 320px !important; display: block !important; }
    /* Form: bottom section */
    .auth-left {
        padding: 28px clamp(20px, 5vw, 40px) 16px;
        flex: 1;
        overflow-y: auto;
        justify-content: flex-start;
    }
    .auth-box { flex: 0; justify-content: flex-start; }
    .auth-step-back { width: 24px; height: 24px; margin-bottom: 6px; }
    .auth-box { max-width: 100%; }
    .auth-box h2 { font-size: 16px; margin-bottom: 2px; }
    .auth-box p { font-size: 12px; margin-bottom: 8px; }
    .auth-box .input-group { margin-bottom: 7px; }
    .auth-box .input-group label { font-size: 11px; margin-bottom: 2px; }
    .auth-box .input-group input { padding: 6px 16px; font-size: 12.5px; border-radius: var(--radius-sm); }
    .auth-box .btn-full { padding: 6px 18px; font-size: 12px; border-radius: var(--radius-sm); }
    .auth-box .input-row { gap: 8px; }
    .auth-links { gap: 2px; }
    .auth-links .btn-sm { font-size: 12.5px; padding: 6px 12px; }
    .auth-forgot-link { font-size: 12.5px; }
}

/* Extra small mobile (< 480px) */
@media (max-width: 479px) {
    .hero { padding: 48px 20px; }
    .hero-title { font-size: 25px; }
    .hero-desc { font-size: 13.5px; }
    .hero-chip { font-size: 10px; padding: 5px 12px; }
    .hero-metrics { gap: 20px; }
    .metric-val { font-size: 13.5px; }
    .metric-lbl { font-size: 12.5px; }
    .features-grid { grid-template-columns: 1fr; }
    .steps-row { flex-direction: column; }
    .hw-arrow { display: none; }
    .hero-visual { display: none; }
    /* Landing section text */
    .section-label { font-size: 10px; padding: 4px 10px; margin-bottom: 12px; }
    .section-title { font-size: 20px; margin-bottom: 10px; }
    .section-desc { font-size: 13px; margin-bottom: 28px; }
    /* Pricing cards */
    .lp-price-card { padding: 20px 16px 18px; }
    .lp-price-name { font-size: 18px; }
    .lp-price-story { font-size: 13px; line-height: 1.5; margin-bottom: 14px; }
    .lp-price-amount { font-size: 25px; }
    .lp-price-interval { font-size: 11px; }
    .lp-price-detail { font-size: 12.5px; margin-bottom: 14px; }
    .lp-price-btn { font-size: 12.5px; padding: 8px 20px; width: auto; max-width: 70%; margin: 0 auto; display: block; text-align: center; }
    .lp-price-badge { font-size: 9px; padding: 2px 10px; }
    .lp-price-icon { width: 36px; height: 36px; margin-bottom: 12px; }
    .lp-price-hero .lp-price-btn { font-size: 12.5px; padding: 8px 20px; display: inline-flex; max-width: 70%; margin: 0 auto; }
    .lp-pricing-trust { font-size: 11px; }
    /* How It Works — inherits grid layout from 900px breakpoint */
    /* Feature cards */
    .f-card { padding: 20px 16px; }
    .f-card h3 { font-size: 13px; }
    .f-card p { font-size: 12.5px; }
    .f-icon { width: 40px; height: 40px; margin-bottom: 14px; }
    /* Persona cards */
    .persona-card { padding: 22px 18px; }
    .persona-card h3 { font-size: 13px; }
    .persona-card p { font-size: 12.5px; }
    .persona-icon { width: 48px; height: 48px; margin-bottom: 12px; }
    /* FAQ */
    .faq-q { font-size: 14px; padding: 14px 0; }
    .faq-a { font-size: 13px; }
    /* Proof / testimonials */
    .proof-quote { padding: 20px; }
    .proof-quote p { font-size: 13px; }
    .proof-author { font-size: 12px; }
    /* Security cards */
    .security-card { padding: 22px 18px; }
    .security-card strong { font-size: 13px; }
    .security-card span { font-size: 12.5px; }
    .security-icon { width: 36px; height: 36px; }
    /* Compare table */
    .compare-table { font-size: 12px; }
    /* Desktop app section */
    .desktop-badge { font-size: 10px; padding: 4px 12px; }
    .desktop-title { font-size: 18px; }
    /* Creator section */
    .creator-title { font-size: 20px; }
    .creator-desc { font-size: 12.5px; }
    .creator-badge { font-size: 10px; padding: 4px 12px; }
    .creator-inner { padding: 28px 20px; }
    /* Closing CTA */
    .closing-cta-title { font-size: 18px; }
    .closing-cta-desc { font-size: 13px; }
    /* Auth */
    .auth-visual { padding: 0; }
    .auth-illust-text { margin-top: 0 !important; }
    .auth-illust-text h3 { font-size: 10px !important; margin-bottom: 2px !important; }
    .auth-illust-text p { font-size: 8.5px !important; max-width: 220px !important; }
    .auth-left { padding: 14px 20px; }
    .auth-box h2 { font-size: 14.5px; margin-bottom: 1px; }
    .auth-box p { font-size: 11px; margin-bottom: 6px; }
    .auth-box .input-group { margin-bottom: 5px; }
    .auth-box .input-group label { font-size: 10.5px; margin-bottom: 1px; }
    .auth-box .input-group input { padding: 5px 16px; font-size: 12px; border-radius: var(--radius-sm); }
    .auth-box .btn-full { padding: 5px 18px; font-size: 11px; border-radius: var(--radius-sm); }
    .auth-box .input-row { gap: 6px; }
}

/* Ultra-small (360px — iPhone SE, older devices) */
@media (max-width: 360px) {
    .hero { padding: 36px 16px; }
    .hero-title { font-size: 22px; }
    .hero-chip { font-size: 10px; padding: 5px 12px; }
    .auth-left { padding: 10px 16px; }
    .auth-left .logo { top: 8px; left: 12px; }
    .auth-illust-text { margin-top: 0 !important; }
    .auth-illust-text h3 { font-size: 10px !important; }
    .auth-illust-text p { font-size: 8px !important; max-width: 190px !important; }
    .auth-box .input-group input { padding: 5px 16px; font-size: 11px; }
    .auth-box .btn-full { padding: 4px 18px; font-size: 10.5px; }
    .section-title { font-size: 18px; }
    .section-desc { font-size: 12.5px; }
    .persona-card { padding: 20px 18px; }
    .security-card { padding: 20px 18px; }
    .proof-quote { padding: 20px; }
    .creator-inner { padding: 24px 18px; }
    .creator-title { font-size: 20px; }
    .desktop-section { border-radius: 20px; }
    .closing-cta-inner { border-radius: 16px; }
    .model-tag { padding: 3px 8px; font-size: 11px; }
}

/* Small mobile to vertical tablet (480px–767px) — show demo card with responsive sizing */
@media (min-width: 480px) and (max-width: 767px) {
    #glass-brain-wrap { width: 190px; height: 190px; }
    .hero-visual {
        margin-right: 20px;
        max-width: 100%;
    }
    .demo-card {
        max-height: 500px;
    }
}

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

/* ============================================
   Section Scroll-Linked Zoom
   ============================================ */
.scroll-zoom {
    transform-origin: center center;
    will-change: transform;
    transition: transform 0.3s ease-out;
}

/* ============================================
   Desktop Download Section
   ============================================ */
.desktop-section {
    background: var(--canvas-950);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 28px;
    margin: 24px auto;
    width: calc(100% - clamp(32px, 6vw, 80px));
    max-width: 1200px;
    padding: clamp(40px, 6vh, 72px) clamp(20px, 4vw, 60px);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
                0 24px 48px -12px rgba(0,0,0,0.15);
}
/* Ambient glow — pushed higher so it doesn't bleed over text */
.desktop-section::before {
    content: '';
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 500px; height: 250px;
    background: radial-gradient(ellipse at center, rgba(16,185,129,0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* Triangle grid canvas — desktop section */
#desktop-tri-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#desktop-tri-canvas.visible { opacity: 1; }
.desktop-section > *:not(canvas) { position: relative; z-index: 1; }

.desktop-inner { position: relative; text-align: center; max-width: 700px; margin: 0 auto; }

.desktop-badge {
    display: inline-block;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 20px; padding: 5px 16px;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: #10b981; margin-bottom: clamp(10px, 2vh, 24px);
}

.desktop-title {
    font-size: clamp(20px, 3vh, 27px); font-weight: 800;
    line-height: 1.18; letter-spacing: -0.02em;
    color: #fff; margin-bottom: clamp(10px, 1.5vh, 18px);
}

.desktop-desc {
    font-size: clamp(12.5px, 1.5vh, 13.5px); line-height: 1.7;
    color: rgba(255,255,255,0.65);
    max-width: 520px; margin: 0 auto clamp(20px, 4vh, 48px);
}

.desktop-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.5vw, 20px);
    margin-bottom: clamp(20px, 4vh, 48px);
    text-align: left;
}

.dp-pillar {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: clamp(14px, 2vh, 22px) clamp(14px, 1.5vw, 20px);
}

.dp-icon {
    width: clamp(32px, 5vh, 44px); height: clamp(32px, 5vh, 44px);
    background: rgba(16,185,129,0.1);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #10b981;
    margin-bottom: clamp(8px, 1.5vh, 14px);
}

.dp-pillar strong {
    display: block;
    font-size: clamp(12.5px, 1.5vh, 13.5px); font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.dp-pillar span {
    font-size: clamp(12px, 1.4vh, 13.5px); line-height: 1.5;
    color: rgba(255,255,255,0.58);
}

.desktop-downloads {
    display: flex; justify-content: center; gap: 16px;
    flex-wrap: wrap;
    margin-bottom: clamp(10px, 1.5vh, 20px);
}

.desktop-dl-btn {
    display: inline-flex; align-items: center; gap: 14px;
    padding: clamp(10px, 1.5vh, 14px) 28px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    text-decoration: none;
    color: rgba(255,255,255,0.85);
    transition: all 0.2s ease;
    min-width: 190px;
}
.desktop-dl-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.dl-btn-text { display: flex; flex-direction: column; text-align: left; }
.dl-sub { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.dl-platform { font-size: 14.5px; font-weight: 700; }

.desktop-footnote {
    font-size: 13.5px; color: rgba(255,255,255,0.25);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .desktop-section { margin: 20px 16px; padding: 28px 18px; }
    .desktop-title { font-size: 20px; }
    .desktop-pillars {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .dp-pillar {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 12px;
    }
    .dp-icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 36px; height: 36px;
        border-radius: 10px;
    }
    .dp-pillar strong {
        font-size: 13.5px;
        margin-bottom: 2px;
    }
    .dp-pillar span {
        font-size: 12.5px;
        line-height: 1.45;
    }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .section-desc { margin-bottom: 36px; }
}

/* ============================================
   Landing Page — Pricing Section
   ============================================ */
.pricing-section { text-align: center; }
.pricing-section .section-desc { margin-left: auto; margin-right: auto; }

.lp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 880px;
    margin: 0 auto 28px;
}

.lp-price-card {
    position: relative;
    background: var(--bg-card);
    border: 1.5px solid var(--canvas-200);
    border-radius: var(--radius-xl);
    padding: 28px 22px 24px;
    text-align: left;
    transition: all 0.25s var(--ease);
    display: flex;
    flex-direction: column;
}
.lp-price-card:hover {
    transform: translateY(-3px);
    border-color: var(--terra-200);
    box-shadow: 0 4px 20px rgba(217,119,87,0.1);
}

.lp-price-popular {
    border-color: var(--terra-200);
}
.lp-price-popular:hover { border-color: var(--terra); }
.lp-price-best {
    border-color: var(--terra-300);
}
.lp-price-best:hover { border-color: var(--terra); }

.lp-price-icon svg { width: 22px; height: 22px; }
.lp-price-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--terra);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.lp-price-best .lp-price-badge {
    background: linear-gradient(135deg, var(--terra), var(--terra-700));
}

.lp-price-icon {
    width: 44px; height: 44px;
    background: var(--canvas-50);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: var(--canvas-600);
    margin-bottom: 14px;
    transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.lp-price-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--terra-100);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
    z-index: -1;
}
.lp-price-card:hover .lp-price-icon::before {
    transform: scaleY(1);
}
.lp-price-card:hover .lp-price-icon {
    transform: scale(1.1) rotate(-3deg);
    color: var(--terra-700);
}

.lp-price-name {
    font-size: 15px; font-weight: 700;
    color: var(--canvas-950);
    margin-bottom: 6px;
}

/* Story comes before price — narrative frames the number */
.lp-price-story {
    font-size: 13px;
    line-height: 1.6;
    color: var(--canvas-600);
    margin: 0 0 16px;
    flex-grow: 1;
}

.lp-price-amount {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 800;
    color: var(--canvas-950);
    letter-spacing: -0.03em;
    margin-bottom: 3px;
}
.lp-price-interval {
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0;
}

.lp-price-detail {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.lp-price-btn {
    width: 100%;
    text-align: center;
    padding: 9px 18px;
    font-size: 13.5px; font-weight: 600;
}

/* Hero card — free trial gets the visual weight */
.lp-price-hero {
    border-color: var(--canvas-300);
}
.lp-price-hero .lp-price-btn {
    padding: 11px 18px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.lp-pricing-trust {
    font-size: 12.5px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
    opacity: 0.7;
}

/* Dark mode */
[data-theme="dark"] .lp-price-card {
    background: var(--canvas-50);
    border-color: var(--canvas-200);
}
[data-theme="dark"] .lp-price-card:hover {
    border-color: rgba(224,124,88,0.4);
    box-shadow: 0 4px 20px rgba(224,124,88,0.1);
}
[data-theme="dark"] .lp-price-hero { border-color: var(--canvas-300); }
[data-theme="dark"] .lp-price-popular { border-color: rgba(224,124,88,0.3); }
[data-theme="dark"] .lp-price-best { border-color: rgba(224,124,88,0.4); }
[data-theme="dark"] .lp-price-icon { background: var(--canvas-100); color: var(--canvas-400); }
[data-theme="dark"] .lp-price-icon::before { background: rgba(224,124,88,0.15); }
[data-theme="dark"] .lp-price-card:hover .lp-price-icon { color: #e07c58; }
[data-theme="dark"] .lp-price-badge { background: #e07c58; }

/* Responsive */
@media (max-width: 768px) {
    .lp-pricing-grid { grid-template-columns: 1fr; max-width: 360px; }
    .lp-price-card { text-align: center; align-items: center; padding: 32px 24px 28px; }
    .lp-price-icon { margin-left: auto; margin-right: auto; }
    .lp-price-btn { align-self: center; }
}

/* ============================================
   Creator Program Section (compact strip)
   ============================================ */
/* Highlight pulse when scrolled-to from Creators tab */
.section-highlight .creator-inner {
    animation: highlight-fade 1.2s ease-out;
}
@keyframes highlight-fade {
    0%   { box-shadow: var(--shadow-md), 0 0 0 3px rgba(217,119,87,0.35); }
    100% { box-shadow: var(--shadow-md), 0 0 0 3px rgba(217,119,87,0); }
}

.creator-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.creator-inner {
    background: var(--canvas-100);
    border-radius: 20px;
    border-left: 4px solid var(--terra-200);
    padding: 48px 56px;
    text-align: center;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.creator-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--terra-50);
    border: 1px solid var(--terra-200);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--terra-700);
    margin-bottom: 20px;
}
.creator-badge::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--terra-700);
    border-radius: 50%;
}

.creator-title {
    font-family: var(--font-display);
    font-size: 29px; font-weight: 800;
    line-height: 1.2; letter-spacing: -0.02em;
    color: var(--canvas-950);
    margin-bottom: 12px;
}

.creator-desc {
    font-size: 14.5px; line-height: 1.7;
    color: var(--canvas-600);
    margin: 0 auto 36px;
    max-width: 460px;
}

/* 2x2 perk grid */
.creator-perks {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 24px 40px;
    justify-content: center;
    margin-bottom: 36px;
}

.creator-perk {
    display: flex;
    align-items: center;
    gap: 10px;
}

.creator-perk-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    background: var(--terra-50);
    border: 1px solid var(--terra-100);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--terra);
}

.creator-perk strong {
    font-size: 14px; font-weight: 700;
    color: var(--canvas-800);
}

/* CTA button */
.creator-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 32px;
    background: var(--terra);
    color: #fff;
    font-size: 16px; font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}
.creator-cta:hover {
    background: var(--terra-600);
    transform: translateY(-1px);
}

.creator-footnote {
    font-size: 12.5px;
    color: var(--canvas-500);
    margin-top: 14px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .creator-section { padding: 0 16px; }
    .creator-inner { padding: 28px 20px; }
    .creator-perks {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .creator-perk {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 14px 10px;
        background: var(--canvas-50);
        border-radius: 12px;
        gap: 8px;
    }
    .creator-perk-icon {
        width: 34px; height: 34px;
        border-radius: 9px;
    }
    .creator-perk strong { font-size: 13px; }
    .creator-title { font-size: 22px; }
    .creator-desc { font-size: 13.5px; margin-bottom: 24px; }
    .creator-cta { font-size: 14.5px; padding: 11px 24px; }
    .creator-footnote { font-size: 11px; }
}

/* ============================================
   DARK MODE — Landing Page Overrides
   ============================================ */

/* Navbar glass — dark frosted */
[data-theme="dark"] .glass {
    background: rgba(15,15,18,0.82);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
}

/* Desktop App section — keep dark background */
[data-theme="dark"] .desktop-section {
    background: #18181D;
}

/* Creator section — dark mode: revert to dark card */
[data-theme="dark"] .creator-inner {
    background: #1C1C22;
    border-left-color: var(--terra-200);
    box-shadow: var(--shadow-md);
}
[data-theme="dark"] .creator-title { color: var(--canvas-950); }
[data-theme="dark"] .creator-desc { color: var(--text-secondary); }
[data-theme="dark"] .creator-perk strong { color: var(--text-primary); }
[data-theme="dark"] .creator-perk-icon { background: var(--terra-50); border-color: var(--terra-100); }
[data-theme="dark"] .creator-badge { background: var(--terra-50); border-color: var(--terra-100); color: var(--terra); }
[data-theme="dark"] .creator-footnote { color: var(--text-muted); }
@media (max-width: 768px) {
    [data-theme="dark"] .creator-perk { background: rgba(255,255,255,0.05); }
}

/* Feature icon backgrounds that are hardcoded light */
[data-theme="dark"] .i-blue { background: rgba(59,130,246,0.1); }
[data-theme="dark"] .i-atlas { background: rgba(184,134,11,0.1); }

/* Hero chip — keep readable */
[data-theme="dark"] .hero-chip {
    background: #1C1C22;
    color: var(--canvas-600);
}

/* Nav theme toggle button */
.nav-theme-btn {
    width: 32px; height: 32px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    /* strip all card/ghost styling — bare icon only */
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--text-muted);
}
.nav-theme-btn:hover {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--text-primary);
    opacity: 0.8;
}
.nav-theme-btn .tcb-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-theme-btn .tcb-icon svg {
    width: 16px;
    height: 16px;
}

/* ============================================
   AI Models Trust Strip
   ============================================ */
.models-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px clamp(16px, 4vw, 48px) 10px;
    max-width: 1080px;
    margin: -28px auto 0;
    flex-wrap: wrap;
}
.models-label {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}
.models-logos {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.model-tag {
    display: inline-block;
    padding: 4px 12px;
    background: var(--bg-card);
    border-radius: var(--radius-full);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--canvas-700);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.model-tag-more {
    color: var(--terra);
    background: var(--terra-50);
}
[data-theme="dark"] .model-tag {
    background: var(--canvas-200);
    color: var(--canvas-700);
}
[data-theme="dark"] .model-tag-more {
    background: rgba(224,124,88,0.1);
    color: #e07c58;
}

/* ============================================
   Who It's For — Personas
   ============================================ */
.personas-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.persona-card {
    padding: 28px 24px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s var(--ease);
}
.persona-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}
.persona-icon {
    width: 68px; height: 68px;
    margin-bottom: 18px;
    flex-shrink: 0;
    animation: personaFloat 3.5s ease-in-out infinite;
}
.persona-card:nth-child(2) .persona-icon { animation-delay: 0.5s; }
.persona-card:nth-child(3) .persona-icon { animation-delay: 1s; }
.persona-card:nth-child(4) .persona-icon { animation-delay: 1.5s; }
@keyframes personaFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.persona-icon svg { width: 100%; height: 100%; }
.persona-card h3 {
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 8px;
}
.persona-card p {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}
@media (max-width: 768px) {
    .personas-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .personas-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Mid-Page CTA
   ============================================ */
.midpage-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    text-align: center;
}
.midpage-cta-note {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* ============================================
   Why NOPROXi — Comparison Table
   ============================================ */
.compare-section { text-align: center; }
.compare-section .section-desc { margin-left: auto; margin-right: auto; }
.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 740px;
    margin: 0 auto;
}
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
    text-align: center;
}
.compare-table th,
.compare-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--canvas-200);
}
.compare-table thead th {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    padding-bottom: 12px;
}
.compare-table thead th.compare-highlight {
    color: var(--terra);
}
.compare-table td.compare-highlight {
    background: var(--terra-50);
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:last-child td.compare-highlight {
    border-radius: 0 0 12px 12px;
}
.compare-table thead th.compare-highlight {
    background: var(--terra-50);
    border-radius: 12px 12px 0 0;
}
.compare-feature {
    text-align: left;
    font-weight: 600;
    color: var(--canvas-800);
    white-space: nowrap;
}
.compare-yes {
    color: var(--terra);
    font-weight: 600;
}
.compare-no {
    color: var(--text-muted);
    opacity: 0.5;
}
.compare-meh {
    color: var(--text-secondary);
    font-size: 13.5px;
}
[data-theme="dark"] .compare-table td.compare-highlight,
[data-theme="dark"] .compare-table thead th.compare-highlight {
    background: rgba(224,124,88,0.08);
}
@media (max-width: 600px) {
    .compare-table { font-size: 12.5px; }
    .compare-table th, .compare-table td { padding: 10px 8px; }
    .compare-feature { font-size: 12.5px; }
}

/* ============================================
   Launch Pricing Banner
   ============================================ */
.launch-banner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 20px;
    background: var(--terra-50);
    color: var(--terra-700);
    border-radius: var(--radius-full);
    font-size: 13.5px;
    font-weight: 600;
}
[data-theme="dark"] .launch-banner {
    background: rgba(224,124,88,0.1);
    color: #e07c58;
}

/* ============================================
   Social Proof
   ============================================ */
.proof-section { text-align: center; }
.proof-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 48px;
}
.proof-stat { display: flex; flex-direction: column; align-items: center; }
.proof-num {
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 800;
    color: var(--canvas-950);
    letter-spacing: -0.03em;
}
.proof-label {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 3px;
}
.proof-sep {
    width: 1px; height: 36px;
    background: var(--canvas-300);
    opacity: 0.5;
}
.proof-quotes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 960px;
    margin: 0 auto;
}
.proof-quote {
    padding: 28px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-align: left;
}
.proof-quote p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--canvas-800);
    margin-bottom: 14px;
    font-style: italic;
}
.proof-author {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .proof-stats { gap: 24px; }
    .proof-num { font-size: 25px; }
    .proof-quotes { grid-template-columns: 1fr; max-width: 400px; }
}

/* ============================================
   FAQ Section
   ============================================ */
.faq-section { max-width: 720px; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
    border-bottom: 1px solid var(--canvas-200);
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--canvas-900);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-chevron {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
    transition: transform 0.25s ease, border-color 0.2s;
    flex-shrink: 0;
    margin-left: 16px;
}
.faq-item[open] .faq-q .faq-chevron {
    transform: rotate(-135deg);
}
.faq-item[open] .faq-q { color: var(--terra); }
.faq-q:hover { color: var(--terra); }
.faq-a {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 0 0 16px;
    max-width: 600px;
}

/* ============================================
   Security & Privacy
   ============================================ */
.security-section { text-align: center; }
.security-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 860px;
    margin: 0 auto;
}
.security-card {
    padding: 22px 20px;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.security-icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--emerald-50);
    color: var(--emerald-500);
    margin-bottom: 4px;
}
.security-icon svg { width: 18px; height: 18px; }
.security-card strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--canvas-900);
}
.security-card span {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}
[data-theme="dark"] .security-icon {
    background: rgba(16,185,129,0.1);
}
@media (max-width: 768px) {
    .security-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
}

/* ============================================
   Closing CTA
   ============================================ */
.closing-cta-section {
    text-align: center;
    padding-bottom: 40px;
    position: relative;
}
/* Ambient terra glow — warm spotlight behind the card */
.closing-cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse at center,
        rgba(217,119,87,0.14) 0%,
        rgba(217,119,87,0.06) 35%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: cta-glow-pulse 4s ease-in-out infinite alternate;
}
@keyframes cta-glow-pulse {
    0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .closing-cta-section::before { animation: none; opacity: 1; }
}

.closing-cta-inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--canvas-950);
    border-radius: 28px;
    padding: clamp(32px, 6vw, 64px) clamp(20px, 4vw, 48px);
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid rgba(217,119,87,0.3);
    box-shadow:
        0 24px 60px rgba(19,19,20,0.25),
        0 0 80px rgba(217,119,87,0.08),
        0 0 160px rgba(217,119,87,0.04);
}
/* Triangle grid canvas — sits behind all card content */
#cta-tri-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}
#cta-tri-canvas.visible { opacity: 1; }
/* Lift all direct children above the canvas */
.closing-cta-inner > *:not(canvas) { position: relative; z-index: 1; }

/* Terra edge highlights — vertical gradient lines on sides */
.closing-cta-inner::before,
.closing-cta-inner::after {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(217,119,87,0.2),
        transparent);
    pointer-events: none;
}
.closing-cta-inner::before { left: 0; }
.closing-cta-inner::after  { right: 0; }

.closing-cta-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.closing-cta-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.55);
    margin-bottom: 24px;
    line-height: 1.6;
}
/* CTA button — terra with warm glow */
.closing-cta-inner .btn-primary {
    background: var(--terra);
    color: #fff;
    box-shadow:
        0 4px 20px rgba(217,119,87,0.3),
        0 0 40px rgba(217,119,87,0.15);
}
.closing-cta-inner .btn-primary:hover {
    background: var(--terra-600);
    color: #fff;
    transform: translateY(-2px);
    box-shadow:
        0 8px 28px rgba(217,119,87,0.4),
        0 0 60px rgba(217,119,87,0.2);
}

/* Dark mode */
[data-theme="dark"] .closing-cta-inner {
    background: #1C1C22;
}
[data-theme="dark"] .closing-cta-section::before {
    background: radial-gradient(ellipse at center,
        rgba(217,119,87,0.1) 0%,
        rgba(217,119,87,0.04) 35%,
        transparent 70%);
}

/* ============================================
   Expanded Footer
   ============================================ */
.landing-footer-full {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 48px) 32px;
}
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding: 40px 0;
    border-top: 1px solid var(--canvas-200);
}
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-tagline {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 280px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4 {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-600);
    margin-bottom: 4px;
}
.footer-col a {
    font-size: 13.5px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.15s;
}
.footer-col a:hover { color: var(--terra); }
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0 0;
    border-top: 1px solid var(--canvas-200);
}
.footer-copy {
    font-size: 12.5px;
    color: var(--text-muted);
}
@media (max-width: 768px) {
    .landing-footer-full { padding: 0 16px 24px; }
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 28px 0;
    }
    .footer-brand {
        grid-column: 1 / -1;
    }
    .footer-brand .logo { font-size: 14.5px; }
    .footer-brand .logo img { width: 28px; height: 28px; }
    .footer-tagline { font-size: 12.5px; }
    .footer-col { gap: 7px; }
    .footer-col h4 { font-size: 10.5px; margin-bottom: 2px; }
    .footer-col a { font-size: 12.5px; }
    .footer-bottom { padding: 14px 0 0; }
    .footer-copy { font-size: 11px; }
    .landing-footer { flex-direction: column; gap: 8px; text-align: center; }
    .proof-stats { flex-wrap: wrap; }
    .closing-cta-inner { border-radius: 20px; }
    .closing-cta-title { font-size: 20px; }
    .creator-section { padding: 0 16px; }
}
@media (max-width: 480px) {
    .landing-footer { padding: 24px 16px; }
    .landing-footer-full { padding: 0 14px 20px; }
    .footer-top { gap: 16px; padding: 24px 0; }
    .footer-tagline { font-size: 12px; }
    .footer-col { gap: 6px; }
    .footer-col h4 { font-size: 10px; }
    .footer-col a { font-size: 12px; }
    .footer-copy { font-size: 10.5px; }
    .proof-stats { gap: 16px; }
    .proof-sep { display: none; }
    .proof-num { font-size: 22px; }
    .faq-q { font-size: 14px; padding: 14px 0; }
    .faq-a { font-size: 13px; }
    .compare-feature { white-space: normal; }
    .closing-cta-title { font-size: 18px; }
    .closing-cta-desc { font-size: 13px; }
    /* Hero buttons stack vertically */
    .hero-buttons { flex-direction: column; gap: 10px; }
    .hero-buttons .btn-xl { width: 100%; justify-content: center; }
    /* Feature cards compact */
    .f-card { padding: 20px 16px; }
    /* Pricing grid responsive */
    .lp-pricing-grid { max-width: calc(100vw - 32px); }
    /* Security cards max-width */
    .security-grid { max-width: calc(100vw - 32px); }
    /* Proof quotes max-width */
    .proof-quotes { max-width: calc(100vw - 32px); }
    /* Persona cards compact */
    .persona-card { padding: 20px 16px; }
    .persona-icon { width: 48px; height: 48px; margin-bottom: 12px; }
    /* How it works — inherits from 900px breakpoint */
}

/* ============================================================
   CAPACITOR MOBILE — Font & Layout Overrides
   Overrides the PC-compact density for comfortable mobile UX.
   All rules scoped to body.is-capacitor (set by platform.js).
   ============================================================ */

body.is-capacitor {
    font-size: 16px;
    line-height: 1.6;
}

/* Base text — scope carefully; do NOT override component-level spans/small */
body.is-capacitor p,
body.is-capacitor li {
    font-size: 16px;
}

/* Page / section headings */
body.is-capacitor .tab-header h2,
body.is-capacitor .tab-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}
body.is-capacitor .section-heading,
body.is-capacitor .settings-section h3,
body.is-capacitor h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Sidebar navigation */
body.is-capacitor .nav-item {
    font-size: 14px !important;
    padding: 12px 14px !important;
}
body.is-capacitor .nav-item svg {
    width: 20px !important;
    height: 20px !important;
}
body.is-capacitor .user-name {
    font-size: 14px !important;
}
body.is-capacitor .plan-badge {
    font-size: 13px !important;
    padding: 4px 9px !important;
}

/* Studio tab body */
body.is-capacitor .tab-body {
    padding: 20px !important;
}

/* Buttons */
body.is-capacitor .btn,
body.is-capacitor button.btn {
    font-size: 16px !important;
    padding: 12px 20px !important;
    min-height: 48px;
}
body.is-capacitor .btn-sm {
    font-size: 14px !important;
    padding: 10px 16px !important;
    min-height: 44px;
}
body.is-capacitor .btn-xs {
    font-size: 13px !important;
    padding: 7px 13px !important;
    min-height: 38px;
}

/* Form inputs — 16px prevents iOS zoom-on-focus */
body.is-capacitor input,
body.is-capacitor select,
body.is-capacitor textarea {
    font-size: 16px !important;
}
body.is-capacitor .input-group label {
    font-size: 14px !important;
}
body.is-capacitor .input-group input,
body.is-capacitor .input-group select,
body.is-capacitor .input-group textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
}
body.is-capacitor .csel-trigger {
    font-size: 15px !important;
    padding: 11px 14px !important;
    min-height: 44px;
}
body.is-capacitor .csel-item {
    font-size: 14px !important;
    padding: 11px 14px !important;
}

/* Session cards */
body.is-capacitor .session-card-title {
    font-size: 17px !important;
    font-weight: 600 !important;
}
body.is-capacitor .session-card-meta,
body.is-capacitor .session-card-date {
    font-size: 13px !important;
}

/* Resume cards */
body.is-capacitor .resume-card-name {
    font-size: 17px !important;
    font-weight: 600 !important;
}
body.is-capacitor .resume-card-meta {
    font-size: 13px !important;
}

/* Settings toggles */
body.is-capacitor .toggle-row {
    font-size: 16px !important;
    padding: 14px 0 !important;
    line-height: 1.6 !important;
}
body.is-capacitor .toggle-switch {
    width: 42px !important;
    height: 24px !important;
    flex-shrink: 0;
}
body.is-capacitor .toggle-slider::before {
    width: 18px !important;
    height: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
}
body.is-capacitor .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px) !important;
}

/* Analytics — 2-column grid on mobile (4-col causes cramping) */
body.is-capacitor .analytics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}
/* Analytics panel text — keep smaller sizes to prevent overlap */
body.is-capacitor .intel-hero-label { font-size: 10px !important; }
body.is-capacitor .intel-hero-trend { font-size: 13px !important; }
body.is-capacitor .analytics-panel-sub { font-size: 12px !important; }
body.is-capacitor .analytics-panel-desc { font-size: 12px !important; }

/* Stat cards */
body.is-capacitor .stat-card-value {
    font-size: 26px !important;
}
body.is-capacitor .stat-card-label {
    font-size: 11px !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
}

/* Empty state text */
body.is-capacitor .empty-state-title {
    font-size: 20px !important;
    font-weight: 700 !important;
}
body.is-capacitor .empty-state-desc,
body.is-capacitor .empty-hint {
    font-size: 15px !important;
}

/* Modals */
body.is-capacitor .modal-head h3 {
    font-size: 19px !important;
    font-weight: 700 !important;
}
body.is-capacitor .modal-desc {
    font-size: 15px !important;
}

/* Touch targets — session card action buttons */
body.is-capacitor .session-card-action,
body.is-capacitor .card-action-btn {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* Settings rows & about section */
body.is-capacitor .settings-row,
body.is-capacitor .settings-about-row,
body.is-capacitor .settings-about-row span {
    font-size: 16px !important;
    line-height: 1.6 !important;
}
body.is-capacitor .settings-about-link {
    font-size: 16px !important;
}
body.is-capacitor .settings-section h3,
body.is-capacitor .settings-section-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
    margin-bottom: 8px !important;
}

/* Line height: all body-level text */
body.is-capacitor p,
body.is-capacitor li,
body.is-capacitor .tab-body {
    line-height: 1.6 !important;
}

/* Toast notifications */
body.is-capacitor .toast,
body.is-capacitor .toast-message {
    font-size: 14px !important;
}

/* Atlas AI chat text */
body.is-capacitor .atlas-message-text,
body.is-capacitor .atlas-user-text {
    font-size: 16px !important;
    line-height: 1.65 !important;
}

/* Hide keyboard shortcuts strip on mobile (no physical keyboard) */
body.is-capacitor #shortcuts-strip {
    display: none !important;
}
/* Hide keyboard shortcuts settings section on mobile — Ctrl+N etc. irrelevant on touch */
body.is-capacitor #settings-kb-section {
    display: none !important;
}

/* ── Capacitor: auth page is sign-in form only (no animation panel) ── */
body.is-capacitor .auth-right {
    display: none !important;
}
body.is-capacitor .auth-layout {
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    grid-template-rows: unset;
}
body.is-capacitor .auth-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(40px, 10vh, 72px) clamp(28px, 8vw, 56px) clamp(32px, 6vh, 56px);
}
body.is-capacitor .auth-box {
    max-width: 100%;
    width: 100%;
}
/* Auth — H1/subtitle/label hierarchy + matched input/button widths */
body.is-capacitor .auth-box h2 {
    font-size: 30px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 8px !important;
    line-height: 1.15 !important;
}
body.is-capacitor .auth-box > p {
    font-size: 16px !important;
    margin-bottom: 28px !important;
    color: var(--text-secondary) !important;
    line-height: 1.5 !important;
}
body.is-capacitor .auth-box .input-group {
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.is-capacitor .auth-box .input-group label {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
}
body.is-capacitor .auth-box .input-group input {
    font-size: 16px !important;
    padding: 14px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
    min-height: 52px !important;
}
body.is-capacitor .auth-box .btn-full {
    padding: 14px 20px;
    font-size: 16px;
    margin-top: 6px;
    min-height: 52px;
}
body.is-capacitor .auth-links {
    margin-top: 10px;
    gap: 8px;
}
body.is-capacitor .auth-links .btn-sm {
    font-size: 14px;
    padding: 10px 16px;
}
body.is-capacitor .auth-forgot-link {
    font-size: 14px;
}
body.is-capacitor .auth-desktop-toprow {
    display: none;
}
body.is-capacitor .auth-topbar {
    padding: max(14px, env(safe-area-inset-top, 14px)) 20px 10px;
}
body.is-capacitor .auth-topbar .logo-name {
    font-size: 17px;
}
body.is-capacitor .auth-step-back {
    width: 28px;
    height: 28px;
}

/* ── Bug fixes: Mobile sidebar, bell, glow, splash sign-in ── */

/* Bug 3: Mobile sidebar full-width when open */
body.is-capacitor .sidebar.mobile-open {
    width: 220px !important;
    min-width: 220px !important;
}

/* ── Global: remove blue tap highlight on all interactive elements ── */
body.is-capacitor *,
body.is-capacitor *:before,
body.is-capacitor *:after {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
}
body.is-capacitor button,
body.is-capacitor a,
body.is-capacitor [role="button"],
body.is-capacitor input,
body.is-capacitor select,
body.is-capacitor textarea {
    outline: none !important;
}
body.is-capacitor button:focus-visible,
body.is-capacitor a:focus-visible,
body.is-capacitor [role="button"]:focus-visible,
body.is-capacitor input:focus-visible,
body.is-capacitor select:focus-visible,
body.is-capacitor textarea:focus-visible {
    outline: 2px solid var(--terra, #D97757) !important;
    outline-offset: 2px !important;
}

/* Sidebar bell — hidden on mobile */
body.is-capacitor #notif-bell {
    display: none !important;
}

/* ── Floating Notification Bell (Capacitor only) ── */
.notif-float-btn {
    display: none; /* hidden on desktop */
}

body.is-capacitor .notif-float-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    right: 16px;
    left: auto;
    z-index: 400;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: none;
    border: none;
    box-shadow: none;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), opacity 0.12s ease;
    cursor: pointer;
}

body.is-capacitor .notif-float-btn:active {
    transform: scale(0.85);
    opacity: 0.6;
}

/* Hide during live session — two-class specificity beats single-class Capacitor rule above */
body.is-capacitor.is-live-session .notif-float-btn,
body.is-capacitor.is-auth .notif-float-btn {
    display: none !important;
}

/* ── Referral link row — fix copy button overflow on mobile ── */
body.is-capacitor .creator-ref-row {
    flex-direction: column !important;
    gap: 10px !important;
}
body.is-capacitor .creator-ref-input {
    width: 100% !important;
    font-size: 13px !important;
}
body.is-capacitor .creator-copy-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px !important;
    font-size: 15px !important;
}

/* Auth logo — not interactive */
.auth-topbar-logo {
    cursor: default !important;
    pointer-events: none !important;
}

/* Unread dot — terra circle, no number */
.notif-float-dot {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--terra);
    border: 2px solid var(--bg-card);
    display: none;
}

.notif-float-dot.visible {
    display: block;
}

/* Pulse animation when there are unread notifications */
@keyframes notif-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.4); opacity: 0.7; }
}
.notif-float-dot.visible {
    animation: notif-dot-pulse 2s ease-in-out infinite;
}

/* ── Notification Panel — Drop & Close Animation ── */
@keyframes notif-panel-drop {
    0%   { opacity: 0; transform: translateY(-20px) scale(0.94); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes notif-panel-rise {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-16px) scale(0.95); }
}

body.is-capacitor .notif-panel {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    left: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    width: auto !important;
    max-height: 68vh !important;
    border-radius: 22px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 48px rgba(0,0,0,0.22), 0 2px 12px rgba(0,0,0,0.12) !important;
    z-index: 380 !important;
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: top right;
}

[data-theme="dark"] body.is-capacitor .notif-panel,
body.is-capacitor [data-theme="dark"] .notif-panel {
    box-shadow: 0 8px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.07) !important;
}

body.is-capacitor .notif-panel.notif-open {
    display: flex !important;
    animation: notif-panel-drop 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
}

body.is-capacitor .notif-panel.notif-closing {
    display: flex !important;
    animation: notif-panel-rise 0.22s ease-in forwards;
}

/* Close button — top right of panel */
body.is-capacitor .notif-panel-close-btn {
    display: flex !important;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    z-index: 2;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

body.is-capacitor .notif-panel-close-btn:active {
    transform: scale(0.88);
}

/* Notification list */
body.is-capacitor .notif-panel-body {
    overflow-y: auto;
    flex: 1;
    padding: 8px 0 0;
    -webkit-overflow-scrolling: touch;
}

/* Individual notification items */
body.is-capacitor .notif-item {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}

body.is-capacitor .notif-item:last-child {
    border-bottom: none !important;
}

body.is-capacitor .notif-item.unread {
    background: rgba(217,119,87,0.06) !important;
}

body.is-capacitor .notif-title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

body.is-capacitor .notif-msg {
    font-size: 13px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    margin-top: 3px !important;
}

body.is-capacitor .notif-time {
    font-size: 11px !important;
    margin-top: 5px !important;
    display: block;
}

body.is-capacitor .notif-empty {
    font-size: 14px !important;
    padding: 48px 20px !important;
}

/* Footer — Clear all */
body.is-capacitor .notif-panel-footer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

body.is-capacitor .notif-clear-all-btn {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--terra) !important;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

body.is-capacitor .notif-clear-all-btn:active {
    opacity: 0.6;
}

/* Adjust user-pill spacing */
body.is-capacitor .user-pill {
    gap: 6px;
}

/* Hide desktop panel header on mobile (close btn replaces it) */
body.is-capacitor .notif-panel-head {
    display: none !important;
}

/* ── Atlas topbar: clear notification bell (44px wide at right:16px → ends at 60px from edge) ── */
body.is-capacitor .atlas-topbar {
    padding-right: 16px !important;
}

/* Push the right-side buttons (< and +) away from the floating bell */
body.is-capacitor .atlas-topbar-right {
    margin-right: 52px !important;
}

/* ── Tab headers: frosted glass — fully opaque blur, no fade so buttons fully mask scrolled text ── */
body.is-capacitor .tab-header {
    background: rgba(250, 249, 240, 0.93) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    /* NO mask-image — gradient fade was making bottom of header transparent,
       letting scrolled content show through behind buttons */
    -webkit-mask-image: none !important;
    mask-image: none !important;
    /* Stack title + buttons vertically on mobile */
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
}

[data-theme="dark"] body.is-capacitor .tab-header,
body.is-capacitor [data-theme="dark"] .tab-header {
    background: rgba(17, 17, 16, 0.85) !important;
}

/* Buttons row — full width, left-aligned on mobile */
body.is-capacitor .tab-header > div[style*="flex"],
body.is-capacitor .tab-header > .tab-header-actions {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

/* Buttons in header — compact sizing on mobile */
body.is-capacitor .tab-header .btn {
    min-height: 38px !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    border-radius: 20px !important;
}

/* Bug 6: Splash screen Sign In button */
.splash-signin-btn {
    position: absolute;
    bottom: max(40px, env(safe-area-inset-bottom, 40px));
    left: 50%;
    transform: translateX(-50%);
    background: #D97757;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 14px 48px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-body, -apple-system, sans-serif);
    cursor: pointer;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 4px 20px rgba(217,119,87,0.45);
    animation: splashBtnIn 0.4s ease-out both;
}
@keyframes splashBtnIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   CAPACITOR MOBILE — Bottom Tab Navigation (2026 pattern)
   Replaces the hamburger+sidebar pattern on mobile.
   Scoped entirely to body.is-capacitor.
   ============================================================ */

/* Hide topbar on mobile — floating bell is used instead */
body.is-capacitor .studio-mobile-topbar {
    display: none !important;
}

/* Reset the screen-studio layout — no topbar flex offset needed */
body.is-capacitor #screen-studio.active {
    display: flex;
    flex-direction: column;
    padding-top: max(0px, env(safe-area-inset-top, 0px));
}
body.is-capacitor .studio-layout {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Add bottom clearance to studio-main so content clears the nav bar */
body.is-capacitor .studio-main {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Bottom Tab Bar ── */
.mobile-bottom-nav {
    display: none; /* hidden on desktop */
}
body.is-capacitor .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--bg-card);
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 200;
    -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] body.is-capacitor .mobile-bottom-nav,
body.is-capacitor [data-theme="dark"] .mobile-bottom-nav {
    border-top-color: rgba(255,255,255,0.09);
}

/* Each tab item */
body.is-capacitor .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 8px 4px 10px;
    border: none;
    background: transparent;
    color: var(--canvas-500);
    cursor: pointer;
    position: relative;
    min-height: 60px;
    transition: color 0.18s var(--ease);
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font);
}

/* Active indicator pill behind icon (Material 3 pattern) */
body.is-capacitor .mbn-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border-radius: 16px;
    transition: background 0.22s var(--ease);
    position: relative;
}
body.is-capacitor .mbn-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
body.is-capacitor .mbn-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

/* Active state */
body.is-capacitor .mbn-item.active {
    color: var(--terra);
}
body.is-capacitor .mbn-item.active .mbn-icon-wrap {
    background: rgba(217,119,87,0.12);
}
[data-theme="dark"] body.is-capacitor .mbn-item.active .mbn-icon-wrap,
body.is-capacitor [data-theme="dark"] .mbn-item.active .mbn-icon-wrap {
    background: rgba(224,124,88,0.16);
}

/* Notification dot on Sessions tab */
body.is-capacitor .mbn-item .mbn-notif-dot {
    position: absolute;
    top: 2px; right: 10px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--terra);
    border: 2px solid var(--bg-card);
    display: none;
}
body.is-capacitor .mbn-item .mbn-notif-dot.visible {
    display: block;
}

/* In atlas mode: hide bottom nav + clear the studio-main bottom padding */
body.is-capacitor #screen-studio.atlas-active .mobile-bottom-nav {
    display: none !important;
}
body.is-capacitor #screen-studio.atlas-active .studio-main {
    padding-bottom: 0 !important;
}
/* Atlas input bar: add safe-area padding at bottom */
body.is-capacitor .atlas-input-bar {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Settings mobile navigation links (Plan / Creator / Sign Out) ── */
.settings-mobile-links { display: none; } /* hidden on desktop */
body.is-capacitor .settings-mobile-links { display: block; }
.settings-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.smn-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: left;
    border-bottom: 1px solid var(--canvas-100);
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.smn-item:last-child { border-bottom: none; }
.smn-item:active { background: var(--canvas-50); }
.smn-icon { display: flex; align-items: center; color: var(--text-muted); flex-shrink: 0; }
.smn-label { flex: 1; }
.smn-arrow { color: var(--text-muted); flex-shrink: 0; }
.smn-item-danger { color: var(--red-500) !important; }
.smn-item-danger .smn-icon { color: var(--red-500) !important; }

[data-theme="dark"] .settings-mobile-nav { background: var(--bg-elevated); }
[data-theme="dark"] .smn-item { border-bottom-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .smn-item:active { background: var(--bg-lifted); }

/* ============================================================
   PREMIUM MOBILE DESIGN 2026 - Warm Obsidian
   Phases 1-7: Settings, Nav, Cards, Typography, Auth, Buttons, Atlas
   All rules scoped to body.is-capacitor — desktop untouched
   ============================================================ */

/* ── Phase 4: Typography Hierarchy ── */
body.is-capacitor .tab-title,
body.is-capacitor .tab-header h1,
body.is-capacitor .tab-header h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
}

body.is-capacitor .settings-section h3,
body.is-capacitor .settings-section-title,
body.is-capacitor .section-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: var(--text-muted) !important;
}

body.is-capacitor .session-card-title,
body.is-capacitor .resume-card-title,
body.is-capacitor .card-title {
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

body.is-capacitor .stat-card-value {
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--terra) !important;
}

body.is-capacitor .stat-card-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}

/* ── Phase 1: Settings — Grouped Card Layout ── */
body.is-capacitor .settings-body {
    padding: 0 !important;
    max-width: 100% !important;
}

body.is-capacitor .settings-section {
    background: var(--bg-card) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04) !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

[data-theme="dark"] body.is-capacitor .settings-section,
body.is-capacitor [data-theme="dark"] .settings-section {
    box-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
}

body.is-capacitor .settings-section h3 {
    padding: 14px 18px 10px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    background: transparent !important;
}

[data-theme="dark"] body.is-capacitor .settings-section h3,
body.is-capacitor [data-theme="dark"] .settings-section h3 {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body.is-capacitor .settings-section .settings-row {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    margin: 0 !important;
    min-height: 52px !important;
}

body.is-capacitor .settings-section .settings-row:last-child {
    border-bottom: none !important;
}

body.is-capacitor .settings-section .toggle-row {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
    margin: 0 !important;
    min-height: 52px !important;
    font-size: 16px !important;
}

[data-theme="dark"] body.is-capacitor .settings-section .settings-row,
[data-theme="dark"] body.is-capacitor .settings-section .toggle-row,
body.is-capacitor [data-theme="dark"] .settings-section .settings-row,
body.is-capacitor [data-theme="dark"] .settings-section .toggle-row {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* Profile card — flatten inside section */
body.is-capacitor .settings-profile-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 18px !important;
    margin: 0 !important;
}

body.is-capacitor .settings-profile-avatar {
    width: 46px !important;
    height: 46px !important;
    font-size: 18px !important;
    border-radius: 14px !important;
}

body.is-capacitor .settings-profile-name {
    font-size: 16px !important;
    font-weight: 600 !important;
}

body.is-capacitor .settings-profile-email {
    font-size: 13px !important;
}

body.is-capacitor .settings-section .settings-hint {
    font-size: 13px !important;
    padding: 4px 18px 12px !important;
    margin: 0 !important;
    color: var(--text-muted) !important;
    line-height: 1.5 !important;
}

/* Theme card — flatten inside section */
body.is-capacitor .settings-theme-card {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    width: 100% !important;
}

body.is-capacitor .settings-shortcut {
    padding: 13px 18px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

[data-theme="dark"] body.is-capacitor .settings-shortcut,
body.is-capacitor [data-theme="dark"] .settings-shortcut {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body.is-capacitor .settings-about-row {
    padding: 14px 18px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

[data-theme="dark"] body.is-capacitor .settings-about-row,
body.is-capacitor [data-theme="dark"] .settings-about-row {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body.is-capacitor .settings-pm-card,
body.is-capacitor .settings-pm-empty {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

body.is-capacitor .settings-pm-card:last-child {
    border-bottom: none !important;
}

body.is-capacitor .settings-password-form {
    padding: 14px 18px !important;
    margin: 0 !important;
}

body.is-capacitor .settings-row-label {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
}

/* SMN items (Plan/Creator/Sign Out) inside settings card */
body.is-capacitor .settings-mobile-nav {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

body.is-capacitor .smn-item {
    padding: 16px 18px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

body.is-capacitor .smn-item:last-child {
    border-bottom: none !important;
}

[data-theme="dark"] body.is-capacitor .smn-item,
body.is-capacitor [data-theme="dark"] .smn-item {
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

/* ── Phase 2: Bottom Nav Refinements ── */
/* Active-only label */
body.is-capacitor .mbn-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    line-height: 1 !important;
    opacity: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.2s ease, max-height 0.2s ease !important;
    margin-top: 2px !important;
}

body.is-capacitor .mbn-item.active .mbn-label {
    opacity: 1 !important;
    max-height: 16px !important;
    color: var(--terra) !important;
}

body.is-capacitor .mobile-bottom-nav {
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    height: auto !important;
}

body.is-capacitor .mbn-item {
    padding: 10px 4px 8px !important;
    min-height: 56px !important;
}

body.is-capacitor .mbn-item.active .mbn-icon-wrap {
    width: 60px !important;
    height: 34px !important;
}

/* Tab body bottom padding — clears nav bar */
body.is-capacitor .tab-body {
    padding-bottom: calc(20px + 76px + env(safe-area-inset-bottom, 16px)) !important;
}

/* Settings tab gets side padding too */
body.is-capacitor #tab-settings .tab-body {
    padding: 16px 16px calc(20px + 76px + env(safe-area-inset-bottom, 16px)) !important;
}

/* ── Phase 3: Card Redesign ── */
body.is-capacitor .session-card {
    border-radius: 20px !important;
    transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.12s ease !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.is-capacitor .session-card:active {
    transform: scale(0.97) !important;
}

[data-theme="dark"] body.is-capacitor .session-card,
body.is-capacitor [data-theme="dark"] .session-card {
    box-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

body.is-capacitor .resume-card {
    border-radius: 20px !important;
    transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1) !important;
    -webkit-tap-highlight-color: transparent !important;
}

body.is-capacitor .resume-card:active {
    transform: scale(0.97) !important;
}

[data-theme="dark"] body.is-capacitor .resume-card,
body.is-capacitor [data-theme="dark"] .resume-card {
    box-shadow: 0 2px 14px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

body.is-capacitor .empty-state {
    padding: 48px 24px !important;
    /* Fill available height so content centers vertically (no dead whitespace below) */
    min-height: calc(100dvh - 280px);
}

body.is-capacitor .empty-state-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}

body.is-capacitor .empty-state-desc {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--text-secondary) !important;
}

/* ── Phase 5: Auth Screen ── */
body.is-capacitor .auth-box h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
}

body.is-capacitor .auth-box .input-group input {
    min-height: 56px !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    font-size: 16px !important;
}

body.is-capacitor .auth-box .btn-full {
    border-radius: 28px !important;
    min-height: 56px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-top: 8px !important;
}

/* ── Phase 6: Button System ── */
body.is-capacitor .btn-primary {
    background: linear-gradient(135deg, #E08060 0%, #C96840 100%) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 4px 18px rgba(201,104,64,0.38), inset 0 1px 0 rgba(255,255,255,0.12) !important;
    transition: transform 0.12s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.12s ease !important;
}

body.is-capacitor .btn-primary:active {
    transform: scale(0.96) !important;
    box-shadow: 0 2px 8px rgba(201,104,64,0.25) !important;
}

body.is-capacitor .btn-primary.btn-ready {
    box-shadow: 0 0 0 3px rgba(217,119,87,0.25), 0 6px 28px rgba(217,119,87,0.45), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

body.is-capacitor .btn:not(.btn-primary):active,
body.is-capacitor .pill-btn:active {
    transform: scale(0.96) !important;
}

body.is-capacitor .pill-btn {
    border-radius: 20px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    min-height: 38px !important;
    transition: transform 0.1s ease !important;
}

/* ── Phase 7: Atlas input bar — fully transparent, pill floats on page ── */
body.is-capacitor .atlas-input-bar {
    background: transparent !important;
    border-top: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

body.is-capacitor .btn-send:not(:disabled) {
    background: linear-gradient(135deg, #E08060, #C96840) !important;
    box-shadow: 0 3px 12px rgba(201,104,64,0.4) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

body.is-capacitor .atlas-msg.user {
    border-radius: 20px 20px 6px 20px !important;
    padding: 14px 16px !important;
}

/* Tab header subtitle */
body.is-capacitor .tab-header p {
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* ── Creator Tab Attention Animation ── */

/* Periodic wiggle + glow burst on the icon — rests 75% of the time */
@keyframes mbn-creator-attention {
    0%, 75%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 0px transparent);
    }
    78% {
        transform: scale(1.22) rotate(-14deg);
        filter: drop-shadow(0 0 7px rgba(217,119,87,0.85));
    }
    82% {
        transform: scale(1.12) rotate(10deg);
        filter: drop-shadow(0 0 5px rgba(217,119,87,0.65));
    }
    86% {
        transform: scale(1.18) rotate(-7deg);
        filter: drop-shadow(0 0 6px rgba(217,119,87,0.75));
    }
    90% {
        transform: scale(1.08) rotate(4deg);
        filter: drop-shadow(0 0 3px rgba(217,119,87,0.4));
    }
    95% {
        transform: scale(1.02) rotate(-1deg);
        filter: drop-shadow(0 0 1px rgba(217,119,87,0.15));
    }
}

/* Subtle terra glow pulse on the icon wrap */
@keyframes mbn-creator-glow {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 10px 2px rgba(217,119,87,0.35); }
}

body.is-capacitor #mbn-creator-tab .mbn-icon-wrap svg {
    animation: mbn-creator-attention 4s ease-in-out 1.5s infinite !important;
    transform-origin: center;
}

body.is-capacitor #mbn-creator-tab .mbn-icon-wrap {
    animation: mbn-creator-glow 2.5s ease-in-out 1.5s infinite !important;
    color: var(--terra) !important;
}

/* Stop animating when the tab is active */
body.is-capacitor #mbn-creator-tab.active .mbn-icon-wrap svg,
body.is-capacitor #mbn-creator-tab.active .mbn-icon-wrap {
    animation: none !important;
}

body.is-capacitor #mbn-creator-tab.mbn-creator-approved .mbn-icon-wrap {
    color: var(--terra) !important;
}

/* ── Desktop Sidebar Creator Nav Attention Animation ── */

@keyframes creatorNavGlow {
    0%, 100% { box-shadow: none; }
    50%      { box-shadow: 0 0 12px 3px rgba(217,119,87,0.3); }
}
@keyframes creatorNavDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.7; }
}

.nav-item[data-tab="creator"]:not(.creator-visited) {
    position: relative;
    animation: creatorNavGlow 3s ease-in-out 2s infinite;
    border-radius: 10px;
}
.nav-item[data-tab="creator"]:not(.creator-visited) svg {
    color: var(--terra);
}
.nav-item[data-tab="creator"]:not(.creator-visited)::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--terra);
    animation: creatorNavDot 2s ease-in-out 2s infinite;
}
/* Stop animation when active or visited */
.nav-item[data-tab="creator"].active,
.nav-item[data-tab="creator"].creator-visited {
    animation: none;
}
.nav-item[data-tab="creator"].active::after,
.nav-item[data-tab="creator"].creator-visited::after {
    display: none;
}

/* ── Creator Tab Entrance Animation ── */

@keyframes creatorTabReveal {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.creator-tab-body.entering {
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(217,119,87,0.06) 30%,
        rgba(217,119,87,0.12) 50%,
        rgba(217,119,87,0.06) 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: creatorTabReveal 0.8s ease-out forwards;
}

/* ── Atlas Bottom Nav Icon Animation ── */

@keyframes mbn-atlas-orbit-cw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes mbn-atlas-orbit-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}
@keyframes mbn-atlas-pulse {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
}

/* Atlas nav atom — SVG size locked via inline style; just add animation + wrap sizing */
body.is-capacitor .mbn-atlas-wrap {
    width: 48px !important;
    height: 48px !important;
    overflow: visible !important;
}

/* Suppress the generic 22px rule — SVG uses inline style="width:44px;height:44px" anyway */
body.is-capacitor .mbn-item[data-tab="atlas"] svg {
    min-width: 44px !important;
    min-height: 44px !important;
}

/* ── Atlas footer icon — static atom, glows only when tab is active ──────
   No continuous animation. Clean and undistracting. The atom lights up
   with a warm glow when the user is on the Atlas tab. */

.mbn-atlas-ring { opacity: 0.75; }
.mbn-center-dot { opacity: 0.75; }

/* Active tab: rings and dot go full opacity */
body.is-capacitor .mbn-item[data-tab="atlas"].active .mbn-atlas-ring,
body.is-capacitor .mbn-item[data-tab="atlas"][aria-selected="true"] .mbn-atlas-ring {
    opacity: 1;
}
body.is-capacitor .mbn-item[data-tab="atlas"].active .mbn-center-dot,
body.is-capacitor .mbn-item[data-tab="atlas"][aria-selected="true"] .mbn-center-dot {
    opacity: 1;
}

/* Active tab: warm glow on the wrapper */
body.is-capacitor .mbn-item[data-tab="atlas"].active .mbn-atlas-wrap,
body.is-capacitor .mbn-item[data-tab="atlas"][aria-selected="true"] .mbn-atlas-wrap {
    filter: drop-shadow(0 0 5px rgba(217,119,87,0.8))
            drop-shadow(0 0 10px rgba(217,119,87,0.4)) !important;
    overflow: visible !important;
}

body.is-capacitor .mbn-atlas-svg,
body.is-capacitor .mbn-atr1,
body.is-capacitor .mbn-atr2,
body.is-capacitor .mbn-atr3,
body.is-capacitor .mbn-center-dot { animation: none !important; }

/* ── Session action buttons — bigger touch targets on Capacitor ── */
body.is-capacitor .table-icon-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
}
body.is-capacitor .table-icon-btn svg {
    width: 18px !important;
    height: 18px !important;
}
body.is-capacitor .table-actions {
    gap: 8px !important;
}

/* ── Resumes table on Capacitor — match sessions visual treatment ── */
/* Font sizes: title = 17px (matches session-card-title), meta = 13px */
body.is-capacitor #tab-resumes .data-table tbody td:first-child {
    font-size: 17px !important;
    font-weight: 600 !important;
}
body.is-capacitor #tab-resumes .data-table tbody td:not(:first-child):not(:last-child) {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}
/* Actions cell — full-width bottom row on mobile card, matching sessions' action group placement */
body.is-capacitor #tab-resumes .data-table tbody td:last-child {
    width: 100% !important;
    padding-top: 6px !important;
    border-top: 1px solid var(--canvas-100) !important;
    margin-top: 2px !important;
}
[data-theme="dark"] body.is-capacitor #tab-resumes .data-table tbody td:last-child {
    border-top-color: var(--canvas-200) !important;
}

/* ── Clear All Sessions zone — below sessions list, all platforms ── */
.sessions-clear-all-zone {
    padding: 4px 0 24px;
    display: flex;
    justify-content: center;
}

.sessions-clear-all-zone .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--red-400);
    background: transparent;
    border: 1.5px solid rgba(239,68,68,0.25);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.sessions-clear-all-zone .btn:hover {
    background: var(--red-50);
    color: var(--red-500);
    border-color: rgba(239,68,68,0.5);
}
[data-theme="dark"] .sessions-clear-all-zone .btn:hover {
    background: rgba(239,68,68,0.1);
}

/* Bigger on Capacitor mobile */
body.is-capacitor .sessions-clear-all-zone .btn {
    width: 100%;
    padding: 15px 20px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    justify-content: center;
}

/* Analytics shortcut in Sessions header —
   Desktop: hidden (Analytics is already in the sidebar nav).
   Mobile (≤480px): shown, because the sidebar collapses to icon-only with no labels. */
.sessions-analytics-shortcut { display: none !important; }
@media (max-width: 480px) {
    .sessions-analytics-shortcut { display: inline-flex !important; }
}

/* Header Clear All button styling */
.sessions-clear-all-btn { color: var(--red-400) !important; }
.sessions-clear-all-btn:hover { background: var(--red-50) !important; color: var(--red-500) !important; }
[data-theme="dark"] .sessions-clear-all-btn:hover { background: rgba(239,68,68,0.1) !important; }

/* On Capacitor: show Clear All icon-only in header (hide text label to save space) */
body.is-capacitor .sessions-clear-label { display: none !important; }

/* Remove old mobile class — now using static HTML zone */
.sessions-clear-all-mobile {
    display: none;
}
.UNUSED_sessions-clear-all-mobile .btn {
    width: 100%;
    padding: 14px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(239,68,68,0.3) !important;
    gap: 8px;
}

/* ── Capacitor — Confirm/Action Card Redesign ── */
/* Bottom-sheet style: full-width, slide up, stacked tall buttons */

@keyframes cap-sheet-up {
    from { transform: translateY(40px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

body.is-capacitor .confirm-action-card {
    width: calc(100vw - 32px) !important;
    max-width: 440px !important;
    padding: 32px 24px 28px !important;
    border-radius: 28px !important;
    animation: cap-sheet-up 0.32s cubic-bezier(0.34,1.4,0.64,1) !important;
    text-align: center;
}

body.is-capacitor .confirm-action-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    margin-bottom: 18px !important;
}

body.is-capacitor .confirm-action-icon svg {
    width: 28px !important;
    height: 28px !important;
}

body.is-capacitor .confirm-action-title {
    font-size: 20px !important;
    margin-bottom: 10px !important;
    letter-spacing: -0.3px !important;
}

body.is-capacitor .confirm-action-msg {
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
    color: var(--text-secondary) !important;
}

/* Stacked full-width buttons — action on top, cancel below */
body.is-capacitor .confirm-action-btns {
    flex-direction: column-reverse !important;
    gap: 10px !important;
    width: 100% !important;
}

body.is-capacitor .confirm-action-btns .btn {
    width: 100% !important;
    min-height: 54px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Cancel button — subtle ghost */
body.is-capacitor .confirm-action-btns .btn-ghost {
    background: transparent !important;
    border: 2px solid var(--border-strong) !important;
    color: var(--text-secondary) !important;
    font-weight: 500 !important;
}

/* Danger action button — softer filled red */
body.is-capacitor .confirm-action-btns .btn-danger {
    background: var(--red-400) !important;
    border: none !important;
    color: #fff !important;
}

/* Session launch heads-up card */
.session-launch-card {
    width: calc(100vw - 32px);
    max-width: 440px;
    padding: 32px 24px 28px;
    border-radius: 28px;
    text-align: center;
    animation: cap-sheet-up 0.32s cubic-bezier(0.34,1.4,0.64,1);
}
.session-launch-icon {
    width: 72px; height: 72px;
    border-radius: 22px;
    background: var(--terra-50);
    color: var(--terra);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
}
[data-theme="dark"] .session-launch-icon { background: rgba(217,119,87,0.15); }
.session-launch-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.session-launch-badge.mode-practice {
    background: rgba(217,119,87,0.12);
    color: var(--terra);
}
.session-launch-badge.mode-live {
    background: rgba(34,197,94,0.12);
    color: #16a34a;
}
[data-theme="dark"] .session-launch-badge.mode-live { color: #4ade80; }
.session-launch-title {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}
.session-launch-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}
.session-launch-tip {
    background: var(--bg-card);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
    text-align: left;
    display: flex; gap: 10px; align-items: flex-start;
}
[data-theme="dark"] .session-launch-tip { background: var(--bg-elevated); }
.session-launch-tip-icon { flex-shrink: 0; margin-top: 1px; color: var(--terra); }
.session-launch-btns {
    display: flex; flex-direction: column; gap: 10px; width: 100%;
}
.session-launch-btns .btn {
    width: 100%;
    min-height: 54px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.session-launch-btns .btn-ghost {
    background: transparent;
    border: 2px solid var(--border-strong);
    color: var(--text-secondary);
    font-weight: 500;
}

/* ── Shared Chat Viewer Screen ── */
.shared-chat-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    max-width: 720px;
    margin: 0 auto;
    padding: 0 16px;
}
.shared-chat-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-strong);
    margin-bottom: 24px;
}
.shared-chat-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.shared-chat-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 17px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.shared-chat-cta {
    font-size: 13px !important;
    padding: 7px 16px !important;
    min-height: unset !important;
}
.shared-chat-header {
    margin-bottom: 20px;
}
.shared-chat-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.shared-chat-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}
.shared-chat-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 40px;
}
.shared-chat-loading {
    display: flex;
    gap: 6px;
    padding: 24px;
    justify-content: center;
}
.shared-chat-msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.shared-chat-msg-role {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 4px;
}
.shared-chat-msg.user .shared-chat-msg-role { color: var(--terra); }
.shared-chat-msg-bubble {
    padding: 14px 16px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-primary);
}
.shared-chat-msg.user .shared-chat-msg-bubble {
    background: var(--bg-card);
    border-radius: 16px 16px 4px 16px;
    box-shadow: var(--shadow-sm);
}
.shared-chat-msg.assistant .shared-chat-msg-bubble {
    background: transparent;
    padding-left: 4px;
    padding-right: 4px;
}
.shared-chat-error {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.shared-chat-error-icon { font-size: 32px; margin-bottom: 12px; }
.shared-chat-error h2 { font-size: 20px; color: var(--text-primary); margin-bottom: 8px; }
.shared-chat-footer {
    text-align: center;
    padding: 20px 0 32px;
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-strong);
    margin-top: 16px;
}
.shared-chat-link { color: var(--terra); text-decoration: none; font-weight: 600; }
[data-theme="dark"] .shared-chat-msg.user .shared-chat-msg-bubble {
    background: var(--bg-elevated);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================
   Tablet / Narrow Desktop Breakpoints
   UX-001 FIX: 641–899px range previously had
   no intermediate treatment — used full desktop
   3-column grids in viewports too narrow for them.
   ============================================ */

/* Tablet: 641px–899px — 2-column grids, tighter hero */
@media (min-width: 641px) and (max-width: 899px) {
    /* Landing features: 3-col → 2-col */
    .features-grid { grid-template-columns: repeat(2, 1fr); }

    /* Landing pricing: 3-col → 2-col + 1 centered, or stack to 1 */
    .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 600px; }

    /* Nav links: slightly tighter spacing to fit more at 800px */
    .nav-links { gap: 4px; }
    .nav-links a { font-size: 13px; padding: 6px 10px; }

    /* Reduce hero section top padding */
    .hero { padding: 36px clamp(16px, 4vw, 40px) 40px; }

    /* Desktop section pillars: 2-col at tablet */
    .desktop-pillars { grid-template-columns: repeat(2, 1fr); }
}

/* Narrow tablet: 641px–767px — fine-tune hero visual */
@media (min-width: 641px) and (max-width: 767px) {
    .hero-illust-row { width: 170px; }
    #glass-brain-wrap { width: 155px; height: 155px; }
    .gb-answer-panel { font-size: 8px; left: 62%; width: clamp(100px, 50%, 140px); }
    .demo-card { max-height: 420px; }
}

/* ── Cookie Consent Banner ── */
.cookie-consent {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: calc(100% - 32px);
  max-width: 680px;
  background: var(--canvas-950);
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  gap: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
  animation: cookieSlideUp 0.4s ease-out;
}
@keyframes cookieSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cookie-consent-content {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.cookie-consent-content p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  flex: 1;
  line-height: 1.5;
}
.cookie-consent-content p a {
  color: var(--terra);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent-content p a:hover {
  color: var(--terra-400);
}
.cookie-consent-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-consent-actions .btn-primary {
  background: var(--terra);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cookie-consent-actions .btn-primary:hover {
  background: var(--terra-600);
}
.cookie-consent-actions .btn-secondary {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  transition: color 0.2s ease, background 0.2s ease;
}
.cookie-consent-actions .btn-secondary:hover {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.06);
}
@media (max-width: 600px) {
  .cookie-consent {
    bottom: 12px;
    padding: 14px 18px;
    border-radius: 14px;
  }
  .cookie-consent-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════════════════
   P0 LANDING ENHANCEMENTS — Scroll Reveal, Logo Strip,
   Sticky CTA, Integrations, Video Demo, Social Links
   ══════════════════════════════════════════════════════════ */

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Company Logo Marquee ── */
.logo-strip-section {
  text-align: center;
  padding: 10px 0 32px;
  width: 100%;
  overflow: hidden;
  background: transparent;
}
.logo-strip-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9E9690;
  margin-bottom: 20px;
  font-weight: 500;
}
[data-theme="dark"] .logo-strip-label {
  color: #6B6560;
}
.logo-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.logo-marquee-track {
  display: flex;
  gap: 48px;
  align-items: center;
  animation: marquee 45s linear infinite;
  width: max-content;
  will-change: transform;
}
.company-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  user-select: none;
  font-family: 'Inter', var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #3C322D;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease;
  opacity: 0.7;
}
.company-logo:hover {
  opacity: 1;
}
/* Brand-specific colors */
.company-logo[data-brand="google"] { font-family: 'Product Sans', 'Inter', sans-serif; font-weight: 600; }
.company-logo[data-brand="google"] .g-blue { color: #4285F4; }
.company-logo[data-brand="google"] .g-red { color: #EA4335; }
.company-logo[data-brand="google"] .g-yellow { color: #FBBC05; }
.company-logo[data-brand="google"] .g-green { color: #34A853; }
.company-logo[data-brand="amazon"] { color: #232F3E; font-weight: 800; letter-spacing: -0.02em; }
.company-logo[data-brand="meta"] { color: #0081FB; font-weight: 700; }
.company-logo[data-brand="nvidia"] { color: #76B900; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.company-logo[data-brand="netflix"] { color: #E50914; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }
.company-logo[data-brand="salesforce"] { color: #00A1E0; font-weight: 700; }
.company-logo[data-brand="adobe"] { color: #FF0000; font-weight: 700; }
.company-logo[data-brand="coinbase"] { color: #0052FF; font-weight: 600; }
.company-logo[data-brand="stripe"] { color: #635BFF; font-weight: 800; }
.company-logo[data-brand="shopify"] { color: #96BF48; font-weight: 800; }
.company-logo[data-brand="twilio"] { color: #F22F46; font-weight: 700; }
.company-logo[data-brand="cloudflare"] { color: #F38020; font-weight: 800; }
.company-logo[data-brand="datadog"] { color: #632CA6; font-weight: 700; }
.company-logo[data-brand="mongodb"] { color: #00ED64; font-weight: 800; }
.company-logo[data-brand="airbnb"] { color: #FF5A5F; font-weight: 800; }
.company-logo[data-brand="uber"] { color: #000000; font-weight: 800; }
.company-logo[data-brand="tesla"] { color: #CC0000; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.company-logo[data-brand="apple"] { color: #000000; font-weight: 600; }
.company-logo[data-brand="microsoft"] { color: #737373; font-weight: 600; }
.company-logo[data-brand="ibm"] { color: #0530AD; font-weight: 700; letter-spacing: 0.04em; }
.company-logo[data-brand="oracle"] { color: #C74634; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.company-logo[data-brand="spacex"] { color: #000000; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.company-logo[data-brand="palantir"] { color: #000000; font-weight: 600; }
.company-logo[data-brand="snowflake"] { color: #29B5E8; font-weight: 700; }
.company-logo[data-brand="databricks"] { color: #FF3621; font-weight: 700; }
[data-theme="dark"] .company-logo {
  color: #CCC8C0;
  opacity: 0.5;
}
[data-theme="dark"] .company-logo:hover {
  opacity: 0.85;
}
[data-theme="dark"] .company-logo[data-brand="apple"],
[data-theme="dark"] .company-logo[data-brand="uber"],
[data-theme="dark"] .company-logo[data-brand="spacex"],
[data-theme="dark"] .company-logo[data-brand="palantir"] {
  color: #E0DDD6;
}
[data-theme="dark"] .company-logo[data-brand="amazon"] { color: #FF9900; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 600px) {
  .logo-strip-section { padding: 0 0 32px; }
  .logo-marquee-track { gap: 32px; }
  .company-logo { font-size: 12px; }
}

/* ── Video Demo Section ── */
.demo-video-section { text-align: center; }
.demo-video-section .section-desc,
.integrations-section .section-desc {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.demo-video-container {
  max-width: 800px;
  margin: 32px auto 0;
}
.demo-video-frame {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0A0A14, #1a1a2e);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.demo-video-frame:hover {
  border-color: var(--terra);
  box-shadow: 0 0 40px rgba(217,119,87,0.15);
}
.demo-video-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255,255,255,0.7);
}
.demo-video-play svg {
  transition: transform 0.3s;
}
.demo-video-frame:hover .demo-video-play svg {
  transform: scale(1.1);
}
.demo-video-label {
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Integrations Section ── */
.integrations-section {
  text-align: center;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--canvas-200);
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.integrations-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.integration-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-card);
  border: 1px solid var(--canvas-200);
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 500;
  color: var(--canvas-600);
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
}
.integration-badge svg {
  color: var(--terra);
  flex-shrink: 0;
}
.integration-badge:hover {
  border-color: var(--terra);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(217,119,87,0.1);
}
@media (max-width: 600px) {
  .integrations-grid { gap: 10px; }
  .integration-badge { padding: 8px 14px; font-size: 13px; }
}

/* ── Sticky CTA Bar ── */
.sticky-cta {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), opacity 0.35s ease;
  pointer-events: none;
}
.sticky-cta.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  background: rgba(10,10,20,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(217,119,87,0.15);
}
.sticky-cta-brand {
  color: #F0EDE6;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.sticky-cta-brand:hover {
  opacity: 0.8;
}
.sticky-cta .btn-sm {
  padding: 6px 16px;
  font-size: 12px;
}
@media (max-width: 600px) {
  .sticky-cta-inner { padding: 6px 16px; }
  .sticky-cta-brand { font-size: 14px; }
}

/* ── Footer Social Links ── */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--canvas-400);
  background: var(--bg-card);
  border: 1px solid var(--canvas-200);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.footer-social-link:hover {
  color: var(--terra);
  border-color: var(--terra);
  background: rgba(217,119,87,0.08);
}

/* ── Stats Counter Animation ── */
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.proof-num.counted {
  animation: countPulse 0.4s ease;
}