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

/* Brand name inline style — wrap any in-text mention of "WispherFlow"
   with <span class="brand-name">WispherFlow</span> so the brand word is
   rendered in the same Nunito 300 used by the header wordmark, matching
   the rest of the brand identity. Inherits font-size from parent so it
   reads naturally inside headings AND body paragraphs. */
.brand-name {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* ── Self-hosted fonts (eliminates Google Fonts round-trip) ── */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@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(--white);
  --bg-card: var(--white);
  --bg-elevated: var(--white);
  --bg-subtle: var(--canvas-50);
  --text-primary: var(--canvas-950);
  --text-secondary: #5c5848; /* ~6.5:1 on white — sharp and readable */
  --text-muted: #6f6a5a; /* ~5.2:1 on white — clear even at small sizes */
  --dark-text: #1f1d18; /* analytics intel / coach headings — matches canvas-900 in light */
  --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);

  /* Emil Kowalski easing curves — snappier than CSS defaults */
  --ease-out-snap: cubic-bezier(0.23, 1, 0.32, 1); /* entries, popovers */
  --ease-in-out-snap: cubic-bezier(0.77, 0, 0.175, 1); /* morphing, state changes */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer/overlay */
  --ease-press: cubic-bezier(0.2, 0.6, 0.35, 1); /* button press feedback */

  /* ── VSCALE: Intelligent Fluid Scaling Tokens ─────────────────
       Use these variables throughout the landing page to ensure
       every viewport from 375px mobile to 3440px ultrawide gets
       proportional, unclipped layout with no manual breakpoints.
       ─────────────────────────────────────────────────────────── */
  --scale-px: clamp(1rem, 5vw, 6rem);
  --scale-py: clamp(2.5rem, 7vw, 8rem);
  --scale-gap: clamp(1rem, 2.5vw, 2rem);
  --scale-radius: clamp(8px, 1.5vw, 20px);
  --scale-max-content: clamp(900px, 80vw, 1400px);
  --scale-max-narrow: clamp(600px, 60vw, 900px);
  /* Fluid typography scale */
  --fluid-hero: clamp(1.75rem, 4vw + 0.5rem, 5rem);
  --fluid-h2: clamp(1.4rem, 3vw + 0.25rem, 3rem);
  --fluid-h3: clamp(1.1rem, 2vw + 0.2rem, 1.75rem);
  --fluid-body: clamp(0.875rem, 1.2vw + 0.15rem, 1.05rem);
  --fluid-small: clamp(0.75rem, 0.9vw + 0.1rem, 0.875rem);
}

/* ============================================================
   VSCALE — Intelligent Auto-Scale System
   Every user on every device (375px→3440px) sees the same
   complete, unclipped visual experience. No compromises.
   ============================================================ */

/* Prevent iOS font inflation */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Ultrawide base font upscale — content feels proportional at 2K/4K */
@media (min-width: 2560px) {
  :root {
    font-size: 18px;
  }
}
@media (min-width: 3440px) {
  :root {
    font-size: 20px;
  }
}

/* Safe area insets for notch / home-bar devices */
.hero,
.section:last-of-type {
  padding-bottom: max(var(--scale-py, 4rem), env(safe-area-inset-bottom, 0px));
}

/* Demo / App Preview — aspect-ratio-locked fluid container */
.ap-stage {
  width: min(100%, clamp(320px, 88vw, 1120px));
  margin-left: auto;
  margin-right: auto;
}

/* Section inner content — never stretches to 3440px */
.hero-inner,
.features-inner,
.section-inner,
.pricing-inner,
.how-it-works-inner,
.proof-inner,
.compare-inner,
.faq-inner,
.closing-inner {
  width: 100%;
  max-width: var(--scale-max-content, clamp(900px, 80vw, 1400px));
  margin-left: auto;
  margin-right: auto;
}

/* Feature card grid — auto-fit, no fixed column count */
.features-grid,
.f-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--scale-gap, clamp(1rem, 2.5vw, 2rem));
  width: 100%;
}

/* Pricing grid — fluid, stacks on mobile */
.pricing-grid,
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--scale-gap, clamp(1rem, 2vw, 1.75rem));
  align-items: start;
  width: 100%;
  max-width: clamp(700px, 90vw, 1400px);
  margin: 0 auto;
}

/* Comparison table — horizontal scroll on small screens only */
.compare-wrap,
.comparison-table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tap target minimum — 44px for all interactive elements */
.btn,
button,
a[href],
[role='button'] {
  min-height: 44px;
}

/* Ultrawide: background fills full bleed, content is capped */
@media (min-width: 1920px) {
  .hero {
    background-size: cover;
  }
  .hero .hero-inner,
  .section .section-inner {
    max-width: clamp(1000px, 65vw, 1400px);
  }
}

@media (min-width: 3440px) {
  .hero .hero-inner,
  .section .section-inner {
    max-width: clamp(1200px, 50vw, 1600px);
  }
  /* Pricing cards don't stretch absurdly wide on ultrawide */
  .pricing-grid,
  .pricing-cards {
    max-width: min(1400px, 70vw);
  }
}

/* Mobile: stack pricing cards, full width */
@media (max-width: 767px) {
  .pricing-grid,
  .pricing-cards {
    grid-template-columns: 1fr;
    max-width: min(420px, calc(100vw - 2rem));
    margin: 0 auto;
  }
  /* App preview — stage size set here, transform applied by JS (_apScale) */
  .ap-stage {
    width: calc(100vw - 1.5rem);
    border-radius: 10px;
    overflow: hidden;
  }
}

/* ====================================================
   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 */
  --dark-text: #f0ede8; /* analytics intel / coach headings — near-white on dark panels */
  --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;
}

/* ── Film grain noise overlay — premium tactile texture ──
   Canvas needs EXPLICIT width/height in CSS because its bitmap is 128x128
   (set by JS for performance). `inset: 0` alone doesn't override the
   intrinsic canvas size on iOS Safari → the canvas renders as a 128px
   square block in the top-left corner instead of stretching to viewport.
   Also disabling entirely on mobile: the grain is a desktop polish detail
   that adds zero value on a phone and risks visible blending artefacts
   when mix-blend-mode behaves inconsistently across mobile browsers. */
#noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
}
[data-theme='dark'] #noise-overlay {
  opacity: 0.065;
}
@media (max-width: 900px) {
  #noise-overlay {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #noise-overlay {
    display: none;
  }
}

/* Hero — clean background, content lifted above any decorative layers */
.hero > * {
  position: relative;
  z-index: 1;
}

/* ── 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);
}

/* ── Autofill override — prevent browser highlight breaking dark/light theme ── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
  -webkit-text-fill-color: var(--canvas-950) !important;
  caret-color: var(--canvas-950) !important;
  transition: background-color 5000s ease-in-out 0s;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation; /* kill double-tap zoom + 300ms tap delay */
  -webkit-text-size-adjust: 100%; /* prevent text inflation on orientation change */
  -ms-text-size-adjust: 100%;
}
body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg);
  line-height: 1.6;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none; /* kill rubber-band bounce on iOS Safari 16+ */
  -webkit-overflow-scrolling: touch; /* momentum scroll on older iOS */
}

/* ── Mobile viewport lock ──
   iOS Safari auto-zooms ANY input with font-size < 16px.
   !important overrides every component-level font-size so no CSS anywhere
   can drop inputs below the zoom threshold on touch devices / tablets.
   pointer:coarse = touchscreens; max-width:1024px = tablet fallback. */
@media (pointer: coarse), (max-width: 1024px) {
  input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* 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;
  background-color: var(--bg);
  -webkit-user-select: none;
  user-select: none;
}
/* Full-width hero gradient wash — sits below the floating orb canvas */
#screen-landing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 680px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 100% 55% at 50% 0%,
      rgba(88, 100, 245, 0.13) 0%,
      rgba(148, 68, 228, 0.07) 45%,
      transparent 70%
    ),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(217, 119, 87, 0.07) 0%, transparent 60%);
}
[data-theme='dark'] #screen-landing::before {
  background:
    radial-gradient(
      ellipse 100% 55% at 50% 0%,
      rgba(88, 100, 245, 0.18) 0%,
      rgba(148, 68, 228, 0.1) 45%,
      transparent 70%
    ),
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(217, 119, 87, 0.09) 0%, transparent 60%);
}
[data-theme='dark'] #screen-landing {
  background-color: var(--bg);
}
#screen-landing.active {
  overflow-y: auto;
  overflow-x: clip;
  -webkit-overflow-scrolling: touch;
}
#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: clamp(12px, 1.2vw, 14.5px);
  font-weight: 500;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 101;
  /* Collapse transition */
  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.5s 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.1;
}
.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.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-200);
  color: var(--canvas-800);
}
[data-theme='dark'] .announce-text {
  color: var(--canvas-700);
}
[data-theme='dark'] .announce-close {
  color: var(--canvas-600);
}
[data-theme='dark'] .announce-close:hover {
  color: var(--canvas-950);
}
/* 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.3) 30%,
    rgba(217, 119, 87, 0.3) 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.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.07s);
  position: relative;
  z-index: 1;
}
@keyframes splashWavePulse {
  0% {
    height: 8px;
    opacity: 0.2;
  }
  100% {
    height: calc(12px + var(--i) * 9px);
    opacity: 0.8;
  }
}
@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,
.splash-logo-text .logo-o circle {
  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) {
  /* Hide "Apply Now" link — bar is too narrow; pill + text alone fit cleanly */
  .announce-link {
    display: none;
  }
  .announce-bar-inner {
    gap: 6px;
  }
}

/* --- Nav — floating glass bar --- */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 48px);
  min-height: 64px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
  transition: background 0.3s ease;
  overflow: visible;
}
/* 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;
}

/* ── Book a Demo — shimmer + 34° arrow ── */
.nav-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}
/* Periodic shimmer sweep */
.nav-demo-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-140%);
  animation: demo-shimmer 4.5s ease-in-out infinite;
  animation-delay: 1.8s;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes demo-shimmer {
  0% {
    transform: translateX(-140%);
  }
  35% {
    transform: translateX(240%);
  }
  100% {
    transform: translateX(240%);
  }
}
/* Arrow — rotated -11° from 45° NE = 34° from vertical */
.nav-demo-btn .demo-arrow {
  transform: rotate(-11deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}
.nav-demo-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
}
.nav-demo-btn:hover .demo-arrow {
  transform: rotate(-11deg) translate(2.5px, -2.5px);
}
.nav-demo-btn:active {
  transform: translateY(0);
}
/* Inverted nav shimmer stays subtle */
.nav-bar.nav-inverted .nav-demo-btn::after {
  background: linear-gradient(108deg, transparent 30%, rgba(255, 255, 255, 0.14) 50%, transparent 70%);
}
.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);
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}
/* Scrolled state — glass solidifies */
.glass.nav-scrolled {
  background: rgba(250, 249, 240, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .glass.nav-scrolled {
  background: rgba(17, 17, 16, 0.78);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 20px rgba(0, 0, 0, 0.3);
}
.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;
  line-height: 1;
}
/* Logo "O" — real text character with needle SVG overlaid */
.logo-o-wrap {
  position: relative;
  display: inline-block;
}
.logo-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.3em;
  height: 2.2em;
  transform: translate(-45%, -35%);
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0.5px 1px 1.5px rgba(0, 0, 0, 0.12));
}
.logo-needle polygon {
  fill: var(--bg, #fff);
  stroke: currentColor;
  stroke-width: 3;
  stroke-linejoin: round;
}
[data-theme='dark'] .logo-needle polygon {
  fill: var(--bg, #111);
}
[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;
  position: relative;
}
/* ── Hanging price-tag badge — drops below the nav bar, tilted ── */
.nav-rec-badge {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) rotate(-7deg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(135deg, #d97757 0%, #a855f7 45%, #0ea5e9 100%);
  background-size: 280% 280%;
  animation:
    aurora-shift 3.5s ease infinite,
    tag-sway 4s ease-in-out infinite;
  box-shadow:
    0 2px 12px rgba(168, 85, 247, 0.45),
    0 1px 4px rgba(217, 119, 87, 0.25);
  pointer-events: none;
  z-index: 101;
}
/* Thread line connecting badge to Download button */
.nav-rec-badge::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(7deg); /* counter-rotate thread to stay vertical */
  width: 1.5px;
  height: 8px;
  background: linear-gradient(to top, rgba(168, 85, 247, 0.6), rgba(168, 85, 247, 0.15));
  pointer-events: none;
}
.rec-dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
  display: inline-block;
  animation: rec-blink 1.5s ease-in-out infinite;
}
@keyframes aurora-shift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
/* Gentle sway — like a tag hanging on a string */
@keyframes tag-sway {
  0%,
  100% {
    transform: translateX(-50%) rotate(-7deg);
  }
  50% {
    transform: translateX(-50%) rotate(-3deg);
  }
}
@keyframes rec-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}
/* Sway for mobile hanging badge (smaller rotation range) */
@keyframes tag-sway-sm {
  0%,
  100% {
    transform: translateX(-50%) rotate(-5deg);
  }
  50% {
    transform: translateX(-50%) rotate(-2deg);
  }
}

/* Nav link underline reveal + active section indicator */
.nav-actions .btn-ghost {
  position: relative;
}
.nav-actions .btn-ghost::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: calc(100% - 20px);
  height: 1.5px;
  background: var(--terra, #d95f3b);
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition:
    transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.22s ease;
  opacity: 0;
}
.nav-actions .btn-ghost:hover::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 0.7;
}
.nav-actions .btn-ghost.nav-active::after {
  transform: translateX(-50%) scaleX(1);
  opacity: 1;
}
.nav-actions .btn-ghost.nav-active {
  color: var(--canvas-900);
}
/* Inverted (dark bg) state */
.nav-bar.nav-inverted .nav-actions .btn-ghost::after {
  background: rgba(255, 255, 255, 0.85);
}
.nav-bar.nav-inverted .nav-actions .btn-ghost.nav-active {
  color: #fff;
}
[data-theme='dark'] .nav-actions .btn-ghost.nav-active {
  color: var(--canvas-800);
}

/* 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: 8px;
  margin-left: auto;
  overflow: visible;
}
.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;
  position: relative;
  overflow: visible;
}
.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;
}
/* Hanging Rec badge — always below the download icon */
.nav-rec-badge--dl {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  animation:
    aurora-shift 3.5s ease infinite,
    tag-sway-sm 3.5s ease-in-out infinite;
  font-size: 6px;
  padding: 2px 7px;
  letter-spacing: 0.09em;
  pointer-events: none;
}
.nav-rec-badge--dl::before {
  display: none;
}
.nav-mobile-signin {
  font-size: 14.5px;
  padding: 8px 18px;
  font-weight: 600;
}

/* 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: transparent;
  border-radius: 10px;
  color: var(--canvas-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s,
    transform 0.15s;
  flex-shrink: 0;
}
.nav-drawer-close:hover {
  background: transparent;
  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);
}

/* Download link — inline RECOMMENDED badge (drawer) */
.nav-mobile-link--download .nav-rec-badge {
  position: static;
  animation: aurora-shift 3.5s ease infinite;
  transform: none;
  margin-left: 14px;
  display: inline-flex;
}
.nav-mobile-link--download .nav-rec-badge::before {
  display: none;
}

/* 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: 15px;
  color: var(--canvas-500);
  cursor: pointer;
  padding: 12px 4px 4px;
  text-align: center;
  transition: color 0.15s;
  width: 100%;
}
.nav-mobile-signin-link span {
  color: var(--canvas-950);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.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.95);
}
[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-50);
  border-bottom-color: transparent;
}
[data-theme='dark'] .auth-back-btn {
  color: var(--canvas-600);
}
[data-theme='dark'] .auth-back-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--canvas-950);
}

/* 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: 8px;
    align-items: center;
    overflow: visible;
  }
  .nav-bar {
    padding: 0 16px;
    min-height: 56px;
    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;
  }
  /* Download icon — 40×40 with hanging Rec badge */
  .nav-mobile-download {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: visible;
  }
  .nav-rec-badge--dl {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    animation:
      aurora-shift 3.5s ease infinite,
      tag-sway-sm 3.5s ease-in-out infinite;
    font-size: 6px;
    padding: 2px 7px;
    letter-spacing: 0.09em;
    pointer-events: none;
  }
  .nav-rec-badge--dl::before {
    display: none;
  }
  /* Sign In button — rectangle with rounded corners */
  .nav-mobile-signin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: 0 22px;
    height: 44px;
    border-radius: 10px;
    background: var(--canvas-950);
    color: #fff;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
      background 0.15s,
      transform 0.1s;
  }
  .nav-mobile-signin:hover {
    background: var(--canvas-700);
  }
  .nav-mobile-signin:active {
    transform: scale(0.97);
  }
  [data-theme='dark'] .nav-mobile-signin {
    background: #fff;
    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 — viewport-filling, centered, auto-scaling --- */
.hero {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(48px, 10vh, 120px) clamp(20px, 5vw, 80px) clamp(16px, 3vh, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Hero background is now pure CSS on #screen-landing — no canvas, no JS */

/* 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 clamp(12px, 2vh, 32px);
  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 3s ease-in-out infinite;
}
.gb-veins path:nth-child(2) {
  animation-delay: 0.15s;
}
.gb-veins path:nth-child(3) {
  animation-delay: 0.3s;
}
.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.4s;
}
.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 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.3s 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.6s 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 — anchored to the output node (254/320=79.4%, 111/300=37%) */
.gb-answer-panel {
  display: block; /* visible at all sizes — auto-scales */
  position: absolute;
  /* Anchor at output node: SVG (254,111) in viewBox(320,300) → 79.4%, 37% */
  top: 37%;
  left: calc(79.4% + 20px); /* 20px gap for the connecting dash */
  transform: translateY(-50%);
  width: clamp(120px, 14vw, 220px);
  min-height: 48px;
  padding: 8px 10px 8px 28px; /* extra left padding for the dash line */
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(8px, 0.5vw + 5px, 10.5px);
  line-height: 1.65;
  color: rgba(217, 119, 87, 0.9);
  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: 2;
  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.5);
  margin-bottom: 4px;
  font-weight: 600;
}

/* Connecting dash — bridges from the answer-node dot to the panel */
.gb-answer-panel::after {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 1.5px;
  background: rgba(217, 119, 87, 0.4);
  border-radius: 1px;
}

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

/* Hero content — always centered column */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: min(960px, 92vw);
  width: 100%;
}
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-desc {
  margin-left: auto;
  margin-right: auto;
}

/* Desktop — keep centered, just allow illustration if visible */
@media (min-width: 900px) {
  .hero {
    overflow: visible;
  }
  /* Illustration lives in right column */
  #glass-brain-wrap {
    width: clamp(200px, 22vw, 320px);
    height: clamp(200px, 22vw, 320px);
    flex-shrink: 0;
  }
  /* Answer panel — anchored at brain's answer-node dot, visible on desktop */
  .gb-answer-panel {
    display: block;
    width: clamp(130px, 13vw, 210px);
    font-size: clamp(8.5px, 0.45vw + 6px, 10.5px);
    padding: 8px 10px 8px 24px;
  }
}

/* Mobile/narrow — stack vertically */
@media (max-width: 767px) {
  .hero {
    min-height: auto;
    padding: 56px 24px 36px;
  }
  .hero-title {
    font-size: clamp(32px, 8.5vw, 48px);
  }
  .hero-desc {
    font-size: 15.5px;
    max-width: 100%;
    line-height: 1.65;
  }
  .hero-illust-row {
    width: 160px;
    margin-bottom: 8px;
    overflow: visible;
  }
  #glass-brain-wrap {
    width: 140px;
    height: 140px;
    overflow: visible;
  }
  /* Answer panel — compact for mobile, stays at dot */
  .gb-answer-panel {
    width: 68px;
    font-size: 5.5px;
    padding: 4px 5px 4px 12px;
    min-height: 24px;
    left: calc(74.4% + 8px);
    border-radius: 4px;
    line-height: 1.5;
  }
  .gb-answer-panel::before {
    font-size: 4px;
    margin-bottom: 1px;
    letter-spacing: 0.1em;
  }
  .gb-answer-panel::after {
    width: 8px;
    left: -8px;
    height: 1px;
  }
  .hero-visual {
    max-width: calc(100vw - 48px);
    margin: 0 auto;
  }
  /* Landing layout — tablet (font sizes handled by fluid clamp in base) */
  .lp-price-card {
    padding: 26px 20px 22px;
  }
  .lp-price-btn {
    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;
  }
  .lp-price-icon {
    width: 44px;
    height: 44px;
  }
  .f-card {
    padding: 24px;
  }
  .persona-icon {
    width: 56px;
    height: 56px;
  }
}

/* Tablet only (768–899px) — brain centered, answer panel scaled */
@media (min-width: 768px) and (max-width: 899px) {
  .hero-illust-row {
    width: clamp(200px, 26vw, 280px);
    overflow: visible;
  }
  #glass-brain-wrap {
    width: clamp(180px, 24vw, 260px);
    height: clamp(180px, 24vw, 260px);
    overflow: visible;
  }
  .gb-answer-panel {
    width: clamp(100px, 14vw, 160px);
    font-size: 8px;
    padding: 6px 8px 6px 18px;
    left: calc(74.4% + 14px);
  }
  .gb-answer-panel::after {
    width: 14px;
    left: -14px;
  }
}

/* Desktop (1024px+) — refine sizes */
@media (min-width: 1024px) {
  .hero {
  }
  #glass-brain-wrap {
    width: clamp(240px, 22vw, 320px);
    height: clamp(240px, 22vw, 320px);
  }
  .gb-answer-panel {
    width: clamp(150px, 14vw, 220px);
    font-size: 10px;
  }
}

/* ── PC / standard laptop (1024–1499px) ──────────────────────────────────
   Without this, calc(4vw + 14px) = ~65px at 1280px and the title floats
   small in the center. Push it to 74–82px so it fills the viewport like
   it does on widescreen, and widen the content block to match. ───────── */
@media (min-width: 1024px) and (max-width: 1499px) {
  .hero-title {
    font-size: clamp(64px, calc(5.5vw + 4px), 82px);
  }
  .hero-content {
    max-width: min(1080px, 94vw);
  }
  .hero-desc {
    max-width: 700px;
    font-size: clamp(17px, calc(0.65vw + 13px), 20px);
  }
  .hero {
    padding-top: clamp(36px, 7vh, 80px);
    padding-bottom: clamp(18px, 3vh, 48px);
  }
}

/* Large desktop (1400px+) */
@media (min-width: 1400px) {
  #glass-brain-wrap {
    width: 310px;
    height: 310px;
  }
  .gb-answer-panel {
    width: 210px;
    font-size: 10px;
  }
}

/* Ultra-wide (1700px+) */
@media (min-width: 1700px) {
  #glass-brain-wrap {
    width: 340px;
    height: 340px;
  }
  .gb-answer-panel {
    width: 230px;
    font-size: 10.5px;
  }
}

/* Super ultra-wide (2200px+) — scale up hero to fill more of the viewport */
@media (min-width: 2200px) {
  .hero {
    padding-top: clamp(48px, 5vh, 80px);
    padding-bottom: clamp(16px, 2vh, 32px);
  }
  .hero-content {
    max-width: min(980px, 90vw);
  }
  .hero-desc {
    max-width: 660px;
    line-height: 1.85;
  }
  .hero-buttons .btn-xl {
    padding: 16px 32px;
  }
  .hero-metrics {
    gap: 40px;
  }
  #glass-brain-wrap {
    width: 380px;
    height: 380px;
  }
  .gb-answer-panel {
    width: 250px;
    font-size: 11px;
  }
  .hero-illust-row {
    min-height: 320px;
  }
  .logo-strip-section {
    padding: 16px 0 36px;
  }
  .logo-marquee-track {
    gap: 64px;
  }
  .company-logo {
    height: 34px !important;
    max-height: 34px !important;
    max-width: 130px;
  }
}

/* Extreme ultra-wide (3000px+) */
@media (min-width: 3000px) {
  .hero-content {
    max-width: min(1100px, 80vw);
  }
  .hero-desc {
    max-width: 720px;
  }
  #glass-brain-wrap {
    width: 420px;
    height: 420px;
  }
  .gb-answer-panel {
    width: 270px;
    font-size: 11.5px;
  }
  .logo-marquee-track {
    gap: 80px;
  }
  .company-logo {
    height: 38px !important;
    max-height: 38px !important;
    max-width: 150px;
  }
}

/* Vertical / portrait monitors (tall aspect ratio, width 900-1200px) */
@media (min-width: 900px) and (min-aspect-ratio: 2/3) and (max-aspect-ratio: 9/10) {
  .hero {
    max-width: 100%;
    padding: 40px 32px 24px;
  }
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
  .hero-text {
    order: 1;
    text-align: center;
  }
  .hero-title {
    text-align: center;
  }
  .hero-desc {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-buttons {
    justify-content: center;
  }
  .hero-metrics {
    justify-content: center;
  }
  .hero-illust-row {
    order: 2;
    justify-content: center;
    min-height: auto;
  }
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: clamp(14px, calc(0.5vw + 11.5px), 20px);
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: clamp(12px, 2vh, 24px);
  text-transform: uppercase;
}
/* ── Hero: cursor-tracking warm glow ── */
/* ── Hero chip: ambient life pulse ── */
@keyframes heroChipPulse {
  0%,
  100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}
.hero-chip {
  animation: heroChipPulse 3s ease-in-out infinite;
}

/* ── Hero orb canvas — lives on #screen-landing, full viewport width ── */
#hero-orb-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Reduced motion: no pulse ── */
@media (prefers-reduced-motion: reduce) {
  .hero-chip {
    animation: none;
    opacity: 1;
  }
}

.chip-dot {
  display: none;
}
.chip-icon {
  flex-shrink: 0;
  opacity: 0.65;
  width: clamp(16px, calc(0.5vw + 13px), 22px);
  height: clamp(16px, calc(0.5vw + 13px), 22px);
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(36px, calc(4vw + 14px), 96px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  color: var(--canvas-950);
}
/* Hero typing animation */
.ht-phrase {
  display: inline;
}
.ht-cursor {
  display: inline-block;
  color: var(--canvas-950);
  font-weight: 300;
  animation: htBlink 0.7s step-end infinite;
  margin-left: 1px;
  vertical-align: baseline;
  transition:
    color 0.2s ease,
    opacity 0.4s ease;
}
.ht-cursor.ht-terra {
  color: var(--terra);
}
.ht-cursor.ht-done {
  opacity: 0;
  animation: none;
}
@keyframes htBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* Elements that appear after typing completes */
.hero-after-type {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-after-type.ht-visible {
  opacity: 1;
  transform: translateY(0);
}
.hero-after-type.ht-visible-d1 {
  transition-delay: 0.12s;
}
.hero-after-type.ht-visible-d2 {
  transition-delay: 0.24s;
}

.text-gradient {
  color: var(--terra);
  position: relative;
  white-space: nowrap;
}
.text-gradient::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--terra);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
}
.text-gradient.ht-underline::after {
  opacity: 0.25;
  animation: underlineDraw 0.8s var(--ease) forwards;
}
@keyframes underlineDraw {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ht-cursor {
    animation: none;
    opacity: 0;
  }
  .hero-after-type {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .text-gradient::after {
    opacity: 0.25;
    transform: scaleX(1);
  }
}
.hero-desc {
  font-size: clamp(16px, calc(0.5vw + 14px), 22px);
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: clamp(16px, 2.5vh, 36px);
}
.hero-buttons {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 3vh, 48px);
  justify-content: center;
}
.hero-metrics {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  justify-content: center;
}
@media (min-width: 900px) {
  .hero-buttons {
    justify-content: flex-start;
  }
  .hero-metrics {
    justify-content: flex-start;
    padding-left: 6px;
  }
}
.metric {
  display: flex;
  flex-direction: column;
}
.metric-val {
  font-family: var(--font-display);
  font-size: clamp(18px, calc(0.6vw + 13px), 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--canvas-900);
}
.metric-lbl {
  font-size: clamp(13px, calc(0.2vw + 11px), 16px);
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 4px;
}
.metric-sep {
  width: 1px;
  height: 28px;
  background: var(--canvas-300);
  opacity: 0.5;
}

/* ═══ HERO FLOW — questions → [waveform CTA] → answers ═══ */
/* Flow lives inside .hero-buttons — always vertically centered on the button row.
   100vw width centered via left:50%+translateX(-50%) spans full viewport.
   clamp() font/padding auto-scales: same layout on PC, monitor, mobile, vertical. */
.hero-buttons {
  position: relative;
  z-index: 3;
}
.hero-flow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 34px;
  pointer-events: none;
  z-index: -1;
  display: flex;
  align-items: center;
}
.hero-flow-q,
.hero-flow-a {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  font-family: var(--font);
  font-size: 16px;
  letter-spacing: 0.025em;
  line-height: 1;
}
.hero-flow-q {
  left: 0;
  right: 0;
  color: var(--canvas-500);
  font-style: italic;
}
.hero-flow-a {
  left: 0;
  right: 0;
  color: var(--canvas-700);
  font-weight: 600;
}
.hf-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
.hf-track span {
  flex-shrink: 0;
  padding: 0 clamp(4px, 0.6vw, 10px);
}
.hf-sep {
  flex-shrink: 0;
  opacity: 0.2;
  padding: 0 2px;
}
[data-theme='dark'] .hero-flow-q {
  color: rgba(255, 255, 255, 0.2);
}
[data-theme='dark'] .hero-flow-a {
  color: rgba(255, 255, 255, 0.4);
}
.hero-content {
  position: relative;
  z-index: 3;
}

/* ═══ HERO CTA — waveform button (bars stacked above label) ═══ */
.hv-cta-btn {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 36px 16px !important;
  min-width: 220px;
  line-height: 1;
}
.hv-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 24px;
  width: 100%;
  padding: 0 4px;
}
.hv-bar {
  width: 2.5px;
  flex-shrink: 0;
  min-height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.85;
  will-change: height;
  transition: height 60ms linear;
}
.hv-cta-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: inherit;
  font-weight: inherit;
}

/* Mobile */
@media (max-width: 479px) {
  .hv-cta-btn {
    min-width: 180px;
    padding: 12px 26px 14px !important;
    gap: 6px;
  }
  .hv-bars {
    height: 18px;
    gap: 1.5px;
  }
  .hv-bar {
    width: 2px;
    transition: height 50ms linear;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hv-bar {
    height: 4px !important;
    opacity: 0.6;
  }
}

/* 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);
  position: relative;
}
/* Subtle gradient divider between sections */
.section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 600px);
  height: 1px;
  background: radial-gradient(ellipse at center, var(--canvas-200) 0%, transparent 70%);
  pointer-events: none;
}
.section:last-child::after,
.faq-section::after,
.closing-cta-section::after {
  display: none;
}
.section-label {
  display: inline-block;
  padding: 4px 14px;
  background: var(--canvas-950);
  color: var(--canvas-400);
  border-radius: var(--radius-full);
  font-size: clamp(11px, calc(0.15vw + 9.5px), 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(26px, calc(1.2vw + 16px), 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  color: var(--canvas-950);
}
.section-desc {
  font-size: clamp(15px, calc(0.3vw + 12.5px), 20px);
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 600px;
  line-height: 1.7;
}

/* Features — card-style with soft shadows */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px;
}
.f-card {
  padding: 24px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border-left: 3px solid transparent;
  /* Emil Kowalski: snappy card hover with spring easing */
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
  overflow: hidden;
}
.f-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 119, 87, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}
.f-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-left-color: var(--terra);
  background: var(--canvas-50);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.f-card:hover .f-icon {
  transform: scale(1.12);
}
.f-card .f-icon {
  transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.f-card:hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(217, 119, 87, 0.35));
}
.f-card:hover::after {
  opacity: 1;
}

/* Color-matched glow per icon type */
.f-card:has(.i-blue)::after {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, transparent 70%);
}
.f-card:has(.i-blue):hover {
  border-left-color: #3b82f6;
}
.f-card:has(.i-blue):hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.35));
}

.f-card:has(.i-green)::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
}
.f-card:has(.i-green):hover {
  border-left-color: var(--emerald-500);
}
.f-card:has(.i-green):hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.35));
}

.f-card:has(.i-orange)::after {
  background: radial-gradient(circle, rgba(196, 104, 73, 0.2) 0%, transparent 70%);
}
.f-card:has(.i-orange):hover {
  border-left-color: var(--terra-600);
}
.f-card:has(.i-orange):hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(196, 104, 73, 0.4));
}

.f-card:has(.i-pink)::after {
  background: radial-gradient(circle, rgba(232, 129, 74, 0.2) 0%, transparent 70%);
}
.f-card:has(.i-pink):hover {
  border-left-color: var(--terra-400);
}
.f-card:has(.i-pink):hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(232, 129, 74, 0.4));
}

.f-card:has(.i-teal)::after {
  background: radial-gradient(circle, rgba(5, 150, 105, 0.18) 0%, transparent 70%);
}
.f-card:has(.i-teal):hover {
  border-left-color: var(--emerald-600);
}
.f-card:has(.i-teal):hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(5, 150, 105, 0.35));
}

.f-card:has(.i-atlas)::after {
  background: radial-gradient(circle, rgba(184, 134, 11, 0.2) 0%, transparent 70%);
}
.f-card:has(.i-atlas):hover {
  border-left-color: #b8860b;
}
.f-card:has(.i-atlas):hover .f-icon svg {
  filter: drop-shadow(0 0 8px rgba(184, 134, 11, 0.4));
}
.f-icon {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.f-icon svg {
  width: 28px;
  height: 28px;
}
.i-purple {
  color: var(--terra);
}
.i-blue {
  color: #3b82f6;
}
.i-green {
  color: var(--emerald-500);
}
.i-orange {
  color: var(--terra-600);
}
.i-pink {
  color: var(--terra-400);
}
.i-teal {
  color: var(--emerald-600);
}
.i-atlas {
  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: 15px;
  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: clamp(15px, calc(0.2vw + 13px), 19px);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--canvas-900);
  position: relative;
  z-index: 1;
}
.f-card p {
  font-size: clamp(14px, calc(0.2vw + 12px), 18px);
  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);
  border-top: 2px solid transparent;
  transition: all 0.3s var(--ease);
}
.hw-step:hover {
  transform: translateY(-3px);
  border-top-color: var(--terra);
  background: var(--canvas-50);
}
.hw-step:hover .hw-num {
  color: var(--terra);
  text-shadow: 0 0 20px rgba(217, 119, 87, 0.25);
}
.hw-num {
  font-family: var(--font-display);
  font-size: clamp(24px, calc(0.6vw + 18px), 36px);
  font-weight: 900;
  color: var(--terra-100);
  letter-spacing: -0.04em;
  margin-bottom: clamp(8px, 1.5vw, 16px);
  line-height: 1;
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}
.hw-step h3 {
  font-family: var(--font-display);
  font-size: clamp(15px, calc(0.2vw + 13px), 19px);
  font-weight: 700;
  margin-bottom: clamp(6px, 1vw, 10px);
  color: var(--canvas-900);
}
.hw-step p {
  font-size: clamp(14px, calc(0.2vw + 12px), 18px);
  color: var(--text-secondary);
  line-height: 1.7;
}
.hw-arrow {
  padding-top: 56px;
  color: var(--canvas-400);
  opacity: 0.5;
  animation: hw-arrow-travel 2.4s ease-in-out infinite;
}
@keyframes hw-arrow-travel {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(5px);
    opacity: 0.75;
  }
}

@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;
  }
  .hw-step h3 {
    margin-bottom: 2px;
  }
  .hw-step p {
    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: clamp(14px, calc(0.15vw + 12px), 17px);
  color: var(--text-muted);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-links a {
  font-size: clamp(13px, calc(0.15vw + 11.5px), 16px);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover {
  color: var(--text-primary);
}
.footer-dot {
  font-size: clamp(12px, calc(0.1vw + 10.5px), 14px);
  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: clamp(16px, 2vh, 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;
}
/* "Don't have an account? Sign up" CTA below Continue on the email step.
   Industry-standard pairing — the question line is muted gray so it doesn't
   compete with the primary CTA, and the action word ("Sign up") picks up the
   terra accent so it's obviously interactive. */
.auth-switch-cta {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-secondary, #6b7280);
  font-family: var(--font);
}
.auth-switch-link {
  background: none;
  border: 0;
  padding: 0;
  margin-left: 4px;
  color: var(--terra);
  font-weight: 600;
  font-size: 13.5px;
  font-family: var(--font);
  cursor: pointer;
}
.auth-switch-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;
}
/* ── Dark mode: auth box text ── */
[data-theme='dark'] .auth-box h2 {
  color: var(--text-primary);
}
[data-theme='dark'] .auth-box p {
  color: var(--text-secondary);
}

/* 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-50);
    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: 1fr;
    background: var(--white);
  }
  /* Hide animation panel on mobile */
  .auth-right {
    display: none;
  }
  .auth-visual {
    padding: 0 16px;
  }
  .auth-illust-text {
    margin-top: 0 !important;
    zoom: 0.6;
  }
  .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: 10vh 24px;
    flex: 1;
    overflow-y: auto;
    justify-content: center;
  }
  .auth-box {
    flex: 0;
    justify-content: center;
    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;
    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) — layout only, font sizes handled by fluid clamp */
@media (max-width: 479px) {
  .hero {
    padding: 20px 18px 8px !important;
  }
  .hero-content {
    max-width: 100% !important;
  }
  .hero-illust-row {
    width: 110px !important;
    margin-bottom: 10px !important;
  }
  .hero-desc {
    max-width: 100% !important;
  }
  .hero-chip {
    padding: 5px 12px;
  }
  .hero-metrics {
    gap: 20px;
  }
  .features-grid {
    grid-template-columns: 1fr;
  }
  .steps-row {
    flex-direction: column;
  }
  .hw-arrow {
    display: none;
  }
  .hero-visual {
    display: none;
  }
  .section-label {
    padding: 4px 10px;
    margin-bottom: 12px;
  }
  .section-title {
    margin-bottom: 10px;
  }
  .section-desc {
    margin-bottom: 28px;
  }
  .lp-price-card {
    padding: 20px 16px 18px;
  }
  .lp-price-story {
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .lp-price-detail {
    margin-bottom: 14px;
  }
  .lp-price-btn {
    padding: 8px 20px;
    width: auto;
    max-width: 70%;
    margin: 0 auto;
    display: block;
    text-align: center;
  }
  .lp-price-badge {
    padding: 2px 10px;
  }
  .lp-price-icon {
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
  }
  .lp-price-hero .lp-price-btn {
    padding: 8px 20px;
    display: inline-flex;
    max-width: 70%;
    margin: 0 auto;
  }
  .f-card {
    padding: 20px 16px;
  }
  .f-icon {
    margin-bottom: 10px;
  }
  .persona-card {
    padding: 22px 18px;
  }
  .persona-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }
  .faq-q {
    padding: 14px 0;
  }
  .proof-quote {
    padding: 20px;
  }
  .security-card {
    padding: 22px 18px;
  }
  .security-icon {
    width: 36px;
    height: 36px;
  }
  .desktop-badge {
    padding: 5px 11px;
  }
  .creator-badge {
    padding: 4px 12px;
  }
  .creator-inner {
    padding: 28px 20px;
  }
  /* 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;
    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) — layout only */
@media (max-width: 360px) {
  .hero {
    padding: 16px 14px 8px !important;
  }
  .hero-illust-row {
    width: 90px !important;
    margin-bottom: 8px !important;
  }
  .hero-desc {
    max-width: 100% !important;
  }
  .hero-chip {
    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;
  }
  .auth-box .btn-full {
    padding: 4px 18px;
    font-size: 10.5px;
  }
  .persona-card {
    padding: 20px 18px;
  }
  .security-card {
    padding: 20px 18px;
  }
  .proof-quote {
    padding: 20px;
  }
  .creator-inner {
    padding: 24px 18px;
  }
  .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;
    scroll-behavior: auto !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: #0a0a0f;
  border: none;
  border-radius: 24px;
  margin: 24px auto;
  width: calc(100% - clamp(24px, 4vw, 48px));
  max-width: 1400px;
  padding: clamp(60px, 9vh, 110px) clamp(32px, 5vw, 80px);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  color: #fff;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
}
/* Particle canvas — behind all content */
#desktop-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Hide old triangle canvas — replaced by particle canvas */
#desktop-tri-canvas {
  display: none;
}
.desktop-section > *:not(canvas) {
  position: relative;
  z-index: 1;
}

.desktop-inner {
  position: relative;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

.desktop-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  padding: 5px 14px 5px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  margin-bottom: 20px;
}

.desktop-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}

.desktop-title {
  font-family: var(--font-display);
  font-size: clamp(28px, calc(1vw + 20px), 44px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #fff;
  text-rendering: geometricPrecision;
  margin-bottom: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.desktop-desc {
  font-size: clamp(15px, calc(0.3vw + 12.5px), 20px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  -webkit-font-smoothing: antialiased;
  max-width: 520px;
  margin: 0 auto clamp(20px, 4vh, 48px);
}

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

.dp-pillar {
  background: rgba(8, 8, 22, 0.86);
  border: 1px solid rgba(100, 115, 240, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: clamp(16px, 2.2vh, 24px) clamp(16px, 1.8vw, 22px);
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;
}
.dp-pillar:hover {
  background: rgba(14, 14, 34, 0.94);
  border-color: rgba(110, 128, 255, 0.45);
  box-shadow:
    0 0 0 1px rgba(100, 115, 240, 0.18),
    0 8px 32px rgba(80, 95, 220, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}

.dp-icon {
  width: clamp(34px, 5vh, 42px);
  height: clamp(34px, 5vh, 42px);
  background: rgba(100, 115, 240, 0.1);
  border: 1px solid rgba(100, 115, 240, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(160, 175, 255, 0.9);
  margin-bottom: clamp(10px, 1.5vh, 14px);
}

.dp-pillar strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 5px;
}

.dp-pillar span {
  font-size: 13px;
  line-height: 1.58;
  color: rgba(210, 215, 255, 0.72);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

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

.desktop-dl-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 1.8vh, 16px) 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s ease;
  min-width: 200px;
}
.desktop-dl-btn:hover {
  background: #fff;
  border-color: #fff;
  color: #0a0a0f;
  transform: translateY(-2px);
}
.desktop-dl-btn:hover .dl-sub {
  color: rgba(10, 10, 15, 0.5);
}
.desktop-dl-btn:hover .dl-platform {
  color: #0a0a0f;
}
.desktop-dl-btn:hover .dl-btn-icon {
  color: #0a0a0f;
}
.dl-btn-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.dl-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: color 0.3s ease;
}
.dl-platform {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: color 0.3s ease;
}
.dl-btn-icon {
  transition: color 0.3s ease;
}

/* ── "In the lab" floating status chip ──────────────────────────────── */
.soon-lab {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 9px 3.5px 7px;
  background: linear-gradient(135deg, #c9643e 0%, #d97757 55%, #e8855a 100%);
  border-radius: 100px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #fff;
  box-shadow:
    0 2px 14px rgba(217, 119, 87, 0.5),
    0 0 0 1.5px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}
.soon-lab::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  flex-shrink: 0;
  animation: soon-lab-blink 1.7s ease-in-out infinite;
}
@keyframes soon-lab-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(0.6);
  }
}

.desktop-footnote {
  font-size: 13.5px;
  color: rgba(242, 240, 235, 0.35);
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   DESKTOP SECTION — MOTION SYSTEM
   ══════════════════════════════════════════ */

/* 1. Badge dot — live pulse */
@keyframes dskDotPulse {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.4);
  }
}
.desktop-badge-dot {
  animation: dskDotPulse 3s ease-in-out infinite;
}

/* 2. Word-split reveal — H2 slices up per word */
.dsk-word-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  /* match H2 line-height so clip doesn't cut descenders */
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.dsk-word-inner {
  display: inline-block;
  transform: translateY(108%);
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.dsk-word-inner.dsk-in {
  transform: translateY(0);
}

/* 3. General fade-rise for badge, desc, footnote */
.dsk-fade {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.dsk-fade.dsk-in {
  opacity: 1;
  transform: translateY(0);
}

/* 4. Pillar — materialise (scale + slide) */
.dp-pillar.dsk-fade {
  transform: translateY(22px) scale(0.97);
}
.dp-pillar.dsk-fade.dsk-in {
  transform: translateY(0) scale(1);
}

/* 5. Download button — bloom from centre */
.desktop-dl-btn.dsk-fade {
  transform: scale(0.93);
}
.desktop-dl-btn.dsk-fade.dsk-in {
  transform: scale(1);
}

/* 6. Pillar icon — terra ignition on hover */
.dp-icon {
  transition:
    background 0.28s ease,
    box-shadow 0.28s ease,
    color 0.28s ease;
}
.dp-pillar:hover .dp-icon {
  background: rgba(110, 128, 255, 0.18);
  border-color: rgba(110, 128, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(110, 128, 255, 0.2),
    0 4px 20px rgba(90, 108, 240, 0.22);
  color: rgba(180, 192, 255, 1);
}

/* 7. Download button — shimmer sweep + spring press */
.desktop-dl-btn {
  position: relative;
  overflow: hidden;
}
.desktop-dl-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.desktop-dl-btn:hover::after {
  left: 140%;
}
.desktop-dl-btn:active {
  transform: scale(0.96) !important;
  transition: transform 0.08s ease !important;
}

/* 8. Reduced-motion: everything visible, no animation */
@media (prefers-reduced-motion: reduce) {
  .dsk-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .dsk-word-inner {
    transform: translateY(0) !important;
    transition: none !important;
  }
  .desktop-badge-dot {
    animation: none !important;
    opacity: 0.7;
  }
  .desktop-dl-btn::after {
    display: none;
  }
}

@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: clamp(16px, 2vh, 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(auto-fit, minmax(min(100%, 260px), 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: clamp(18px, calc(0.4vw + 14px), 26px);
  font-weight: 700;
  color: var(--canvas-950);
  margin-bottom: 6px;
}

/* Story comes before price — narrative frames the number */
.lp-price-story {
  font-size: clamp(14px, calc(0.2vw + 12px), 18px);
  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: clamp(26px, calc(0.6vw + 20px), 38px);
  font-weight: 800;
  color: var(--canvas-950);
  letter-spacing: -0.03em;
  margin-bottom: 3px;
}
.lp-price-interval {
  font-size: clamp(13px, calc(0.15vw + 11.5px), 16px);
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.lp-price-detail {
  display: block;
  font-size: clamp(14px, calc(0.15vw + 12px), 17px);
  color: var(--text-secondary);
  margin-bottom: 14px;
}

.lp-price-btn {
  width: 100%;
  text-align: center;
  padding: 9px 18px;
  font-size: clamp(15px, calc(0.2vw + 13px), 18px);
  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: clamp(15px, calc(0.2vw + 13px), 19px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.lp-pricing-trust {
  font-size: clamp(13px, calc(0.15vw + 11.5px), 16px);
  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);
  }
}

/* ============================================
   App Preview Section
   ============================================ */
.app-preview-section {
  padding: clamp(48px, 8vw, 80px) clamp(16px, 5vw, 48px) clamp(40px, 6vw, 60px);
  text-align: center;
}
.app-preview-section .section-desc {
  margin-left: auto;
  margin-right: auto;
}
.ap-stage {
  position: relative;
  max-width: 1080px;
  margin: 48px auto 60px;
}
.ap-glow {
  position: absolute;
  inset: -60px;
  background: radial-gradient(ellipse 60% 40% at 50% 55%, rgba(217, 119, 87, 0.08) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
/* Browser window */
.ap-window {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5) inset,
    0 20px 60px rgba(0, 0, 0, 0.13),
    0 4px 16px rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ap-chrome {
  height: 44px;
  background: #f0ede8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  flex-shrink: 0;
}
[data-theme='dark'] .ap-chrome {
  background: #2a2a2c;
  border-bottom-color: #3a3a3c;
}
.ap-tls {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ap-tls span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}
.ap-addr {
  flex: 1;
  max-width: 360px;
  height: 26px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 5px;
  font-size: 12px;
  color: #555;
}
[data-theme='dark'] .ap-addr {
  background: #3a3a3c;
  border-color: #52525b;
  color: #c0c0c0;
}
/* App body / screens */
.ap-body {
  position: relative;
  min-height: clamp(320px, 55vh, 640px);
  background: #fefdfb;
  overflow: hidden;
}
[data-theme='dark'] .ap-body {
  background: #18181f;
}
.ap-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ap-screen.ap-screen-on {
  opacity: 1;
  pointer-events: all;
}
/* Page header shared */
.ap-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ap-hd-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f1d18;
  margin-bottom: 2px;
}
.ap-hd-sub {
  font-size: 11px;
  color: #9c9680;
}
.ap-hd-acts {
  display: flex;
  gap: 8px;
  align-items: center;
}
[data-theme='dark'] .ap-hd-title {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-hd-sub {
  color: rgba(242, 240, 235, 0.4);
}
/* Create Session button */
.ap-btn-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease;
}
.ap-btn-new.ap-click {
  transform: scale(0.93);
}
.ap-btn-del {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  color: #ef4444;
  border: none;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
/* Table */
/* .ap-hh = "hidden header" columns (Type, Created, Actions) — hide at narrow viewports */
@media (max-width: 960px) {
  .app-preview-section .ap-hh {
    display: none;
  }
}
.ap-tbl {
  width: 100%;
  border-collapse: collapse;
}
.ap-tbl thead tr {
  background: #faf9f0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ap-tbl thead th {
  padding: 8px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: #9c9680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ap-tbl tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ap-tbl tbody tr:hover {
  background: rgba(217, 119, 87, 0.03) !important;
}
.ap-tbl td {
  padding: 10px 14px;
  font-size: 12px;
  color: #6f6a5a;
  white-space: nowrap;
}
.ap-tt {
  font-weight: 600 !important;
  color: #1f1d18 !important;
}
.ap-lnk {
  cursor: pointer;
}
.ap-lnk:hover,
.ap-lnk.ap-lnk-hi {
  color: #d97757 !important;
}
.ap-ta {
  background: rgba(250, 249, 240, 0.6);
}
/* New row */
.ap-nr {
  display: none;
}
.ap-nr.ap-nr-show {
  display: table-row !important;
  animation: apNrIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes apNrIn {
  from {
    opacity: 0;
    background: rgba(217, 119, 87, 0.25);
  }
  60% {
    background: rgba(217, 119, 87, 0.1);
  }
  to {
    opacity: 1;
    background: rgba(217, 119, 87, 0.04);
  }
}
/* Mode / Status badges */
.ap-live {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ap-prac {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(20, 184, 166, 0.12);
  color: #0d9488;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ap-done {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
}
.ap-ready {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ap-completed {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.05);
  color: #9c9680;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 600;
}
[data-theme='dark'] .ap-completed {
  background: rgba(255, 255, 255, 0.06);
  color: #7a7567;
}
/* Table action buttons */
.ap-acts {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ap-act-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 0;
  background: #1a1a1a;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  color: white;
  padding: 0;
  flex-shrink: 0;
}
.ap-act-play.ap-act-done {
  background: rgba(0, 0, 0, 0.08);
  color: #aaa;
}
.ap-act-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-height: 0;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  cursor: pointer;
  color: #6f6a5a;
  padding: 0;
  flex-shrink: 0;
}
.ap-act-ic.ap-act-dim {
  color: #c0bdb0;
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .ap-act-play {
  background: #2a2a2c;
}
[data-theme='dark'] .ap-act-play.ap-act-done {
  background: rgba(255, 255, 255, 0.06);
  color: #5a5a5a;
}
[data-theme='dark'] .ap-act-ic {
  border-color: rgba(255, 255, 255, 0.1);
  color: #9c9680;
}
/* Mode cards */
.ap-mode-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.ap-mc {
  flex: 1;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ap-mc.ap-mc-on {
  border-color: #d97757;
  background: rgba(217, 119, 87, 0.04);
}
.ap-mc-icon {
  color: #9c9680;
}
.ap-mc-icon.ap-mc-icon-prac {
  color: #d97757;
}
.ap-mc.ap-mc-on .ap-mc-icon {
  color: #d97757;
}
.ap-mc-lbl {
  font-size: 13px;
  font-weight: 700;
  color: #1f1d18;
}
.ap-mc.ap-mc-on .ap-mc-lbl {
  color: #d97757;
}
.ap-mc-sub {
  font-size: 11px;
  color: #9c9680;
}
[data-theme='dark'] .ap-mc {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}
[data-theme='dark'] .ap-mc.ap-mc-on {
  border-color: #d97757;
  background: rgba(217, 119, 87, 0.08);
}
[data-theme='dark'] .ap-mc-lbl {
  color: #f2f0eb;
}
/* Step indicator */
.ap-m-hd {
  display: flex;
  align-items: center;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  gap: 10px;
}
.ap-m-ttl {
  font-size: 14px;
  font-weight: 700;
  color: #1f1d18;
  flex: 1;
}
.ap-m-steps {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ap-m-si {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #9c9680;
}
.ap-m-si.ap-m-si-on {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.ap-m-si.ap-m-si-done {
  border-color: rgba(0, 0, 0, 0.1);
  color: #9c9680;
  font-size: 12px;
  width: auto;
  padding: 0 2px;
}
.ap-m-sl {
  width: 20px;
  height: 1.5px;
  background: rgba(0, 0, 0, 0.12);
}
[data-theme='dark'] .ap-m-ttl {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-m-si {
  border-color: rgba(255, 255, 255, 0.15);
  color: #7a7567;
}
[data-theme='dark'] .ap-m-si.ap-m-si-on {
  background: #f2f0eb;
  color: #1a1a1a;
  border-color: #f2f0eb;
}
/* Job description */
.ap-jd-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.ap-jd-tabs {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}
.ap-jd-t {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: #9c9680;
  background: transparent;
  transition:
    background 0.15s,
    color 0.15s;
}
.ap-jd-t.ap-jd-t-on {
  background: #d97757;
  color: #fff;
}
.ap-jd-ta {
  min-height: 56px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  color: #1f1d18;
  position: relative;
}
.ap-jd-ph {
  color: #9c9680;
  position: absolute;
  top: 8px;
  left: 10px;
  pointer-events: none;
}
[data-theme='dark'] .ap-jd-ta {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .ap-jd-ph {
  color: #4a4a4a;
}
/* Upload resume link */
.ap-upload-lnk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #d97757;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  padding: 2px 0;
}
/* Modal footer buttons */
.ap-m-cancel {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6f6a5a;
  cursor: pointer;
}
.ap-m-back {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6f6a5a;
  cursor: pointer;
}
.ap-m-next {
  background: #1a1a1a;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
[data-theme='dark'] .ap-m-cancel,
[data-theme='dark'] .ap-m-back {
  border-color: rgba(255, 255, 255, 0.15);
  color: #9c9680;
}
[data-theme='dark'] .ap-m-next {
  background: #f2f0eb;
  color: #1a1a1a;
}
/* AI model card */
.ap-ai-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1.5px solid rgba(20, 163, 127, 0.35);
  border-radius: 12px;
  background: rgba(20, 163, 127, 0.04);
  margin: 8px 0 4px;
}
.ap-ai-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(16, 163, 127, 0.1);
  color: #10a37f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ap-ai-name {
  font-size: 13px;
  font-weight: 700;
  color: #1f1d18;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ap-ai-fast {
  background: rgba(217, 119, 87, 0.15);
  color: #d97757;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
.ap-ai-sub {
  font-size: 11.5px;
  color: #9c9680;
  margin-top: 2px;
}
[data-theme='dark'] .ap-ai-name {
  color: #f2f0eb;
}
.ap-show-mdl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #6f6a5a;
  cursor: pointer;
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  margin-bottom: 8px;
}
/* Toggles */
.ap-tog-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  gap: 12px;
}
.ap-tog-lbl {
  font-size: 13px;
  font-weight: 600;
  color: #1f1d18;
  margin-bottom: 3px;
}
.ap-tog-sub {
  font-size: 11px;
  color: #9c9680;
}
.ap-tog {
  width: 36px;
  height: 20px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  flex-shrink: 0;
  position: relative;
}
.ap-tog::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-theme='dark'] .ap-tog-lbl {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-show-mdl {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme='dark'] .ap-tog-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ap-rl {
  color: #3b82f6;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  transition: background 0.15s;
}
.ap-rl:hover,
.ap-rl.ap-rl-hi {
  background: rgba(59, 130, 246, 0.1);
}
[data-theme='dark'] .ap-tt {
  color: #f2f0eb !important;
}
[data-theme='dark'] .ap-tbl thead tr {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .ap-ta {
  background: rgba(255, 255, 255, 0.02);
}
/* Analytics screen */
.ap-an-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ap-an-s {
  padding: 16px 16px 14px;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-an-s:last-child {
  border-right: none;
}
.ap-an-s0 {
  border-bottom: 2px solid #d97757;
}
.ap-an-v {
  font-size: 22px;
  font-weight: 800;
  color: #1f1d18;
  letter-spacing: -0.02em;
}
.ap-an-l {
  font-size: 10.5px;
  color: #9c9680;
}
[data-theme='dark'] .ap-an-v {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-an-l {
  color: rgba(242, 240, 235, 0.4);
}
.ap-an-act {
  padding: 16px 18px 14px;
}
.ap-an-act-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ap-an-fltrs {
  display: flex;
  gap: 4px;
}
.ap-an-f {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  cursor: pointer;
  color: #6f6a5a;
}
.ap-an-f-on {
  background: #1a1a1a;
  color: #fff;
  font-weight: 600;
}
.ap-an-meta {
  display: flex;
  gap: 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ap-an-meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ap-an-meta b {
  font-size: 13px;
  font-weight: 700;
  color: #1f1d18;
}
.ap-an-meta span {
  font-size: 10.5px;
  color: #9c9680;
}
[data-theme='dark'] .ap-an-meta b {
  color: #f2f0eb;
}
/* Heatmap (built by JS) */
#ap-an-hm {
  display: flex;
  gap: 3px;
  margin: 10px 0;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.ap-hm-cell {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.ap-hm-0 {
  background: rgba(0, 0, 0, 0.06);
}
.ap-hm-1 {
  background: rgba(217, 119, 87, 0.25);
}
.ap-hm-2 {
  background: rgba(217, 119, 87, 0.55);
}
.ap-hm-3 {
  background: #d97757;
}
[data-theme='dark'] .ap-hm-0 {
  background: rgba(255, 255, 255, 0.07);
}
/* Dropdown highlight (JS animation) */
.ap-ms.ap-ms-sel {
  border-color: #d97757;
  background: rgba(217, 119, 87, 0.06);
}
/* Create Session modal */
.ap-ov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 10;
}
.ap-ov.ap-ov-on {
  opacity: 1;
  pointer-events: all;
}
.ap-modal {
  background: #fefdfb;
  border-radius: 14px;
  width: 400px;
  max-width: 92%;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.07);
  transform: translateY(16px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.ap-ov.ap-ov-on .ap-modal {
  transform: translateY(0) scale(1);
}
[data-theme='dark'] .ap-modal {
  background: #1e1e26;
  border-color: rgba(255, 255, 255, 0.08);
}
.ap-m-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13.5px;
  font-weight: 700;
  color: #1f1d18;
}
[data-theme='dark'] .ap-m-hd {
  color: #f2f0eb;
  border-color: rgba(255, 255, 255, 0.07);
}
.ap-m-x {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #6f6a5a;
}
.ap-m-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ap-mf {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-mf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ap-ml {
  font-size: 11px;
  font-weight: 600;
  color: #6f6a5a;
}
[data-theme='dark'] .ap-ml {
  color: rgba(242, 240, 235, 0.5);
}
.ap-mi {
  height: 34px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: #1f1d18;
  transition: border-color 0.2s;
}
.ap-mi.ap-mi-on {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.1);
}
[data-theme='dark'] .ap-mi {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #f2f0eb;
}
.ap-caret {
  width: 1.5px;
  height: 13px;
  background: #d97757;
  flex-shrink: 0;
  animation: apCaret 1s step-start infinite;
}
@keyframes apCaret {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.ap-ms {
  height: 34px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #9c9680;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.ap-ms.ap-ms-f {
  color: #1f1d18;
}
.ap-ms.ap-ms-hi {
  border-color: #d97757;
  background: rgba(217, 119, 87, 0.05);
  color: #1f1d18;
}
[data-theme='dark'] .ap-ms {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.ap-mt {
  display: flex;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  overflow: hidden;
  height: 34px;
}
.ap-mt-o {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: #9c9680;
  transition:
    background 0.2s,
    color 0.2s;
}
.ap-mt-o.ap-mt-on {
  background: #1a1a1a;
  color: #fff;
}
.ap-mt-o.ap-mt-live {
  background: #d97757;
  color: #fff;
}
.ap-m-ft {
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
[data-theme='dark'] .ap-m-ft {
  border-color: rgba(255, 255, 255, 0.07);
}
.ap-m-sub {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s;
}
.ap-m-sub.ap-click {
  transform: scale(0.97);
}
/* Session Review modal */
.ap-rv-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 9;
}
.ap-rv-bg.ap-rv-on {
  opacity: 1;
  pointer-events: all;
}
.ap-rv {
  background: #fefdfb;
  width: 660px;
  max-width: 94%;
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.22),
    0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ap-rv-bg.ap-rv-on .ap-rv {
  transform: scale(1);
}
[data-theme='dark'] .ap-rv {
  background: #1e1e26;
}
.ap-rv-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 18px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
.ap-rv-title {
  font-size: 14px;
  font-weight: 700;
  color: #1f1d18;
  margin-bottom: 5px;
}
[data-theme='dark'] .ap-rv-title {
  color: #f2f0eb;
}
.ap-rv-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #6f6a5a;
}
.ap-rv-x {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: #6f6a5a;
}
.ap-rv-row {
  display: flex;
  gap: 16px;
  padding: 8px 18px;
  font-size: 11.5px;
  color: #9c9680;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.ap-rv-row span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ap-rv-tabs {
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}
[data-theme='dark'] .ap-rv-tabs {
  border-color: rgba(255, 255, 255, 0.07);
}
.ap-rv-tab {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #9c9680;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  margin-bottom: -1px;
}
.ap-rv-tab.ap-rv-tab-on {
  color: #1f1d18;
  border-bottom-color: #1f1d18;
  font-weight: 600;
}
[data-theme='dark'] .ap-rv-tab.ap-rv-tab-on {
  color: #f2f0eb;
  border-bottom-color: #d97757;
}
/* Review panels */
.ap-rv-panel {
  display: none;
  padding: 14px 18px;
  overflow-y: auto;
  flex: 1;
}
.ap-rv-panel.ap-rv-p-on {
  display: block;
  animation: apPanelIn 0.3s ease forwards;
}
@keyframes apPanelIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ap-rv-qa {
  margin-bottom: 12px;
}
.ap-rv-q,
.ap-rv-a {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.ap-rv-ql {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #6f6a5a;
  margin-top: 1px;
}
.ap-rv-al {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #d97757;
  margin-top: 1px;
}
.ap-rv-q span:last-child {
  color: #1f1d18;
  font-weight: 600;
}
.ap-rv-a span:last-child {
  color: #4a4740;
}
[data-theme='dark'] .ap-rv-q span:last-child {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-rv-a span:last-child {
  color: rgba(242, 240, 235, 0.6);
}
.ap-rv-ig {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
.ap-rv-is {
  padding: 14px;
  background: #fefdfb;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
[data-theme='dark'] .ap-rv-is {
  background: #1e1e26;
}
.ap-rv-iv {
  font-size: 20px;
  font-weight: 800;
  color: #1f1d18;
  letter-spacing: -0.02em;
}
.ap-rv-il {
  font-size: 9.5px;
  font-weight: 700;
  color: #9c9680;
  letter-spacing: 0.06em;
}
[data-theme='dark'] .ap-rv-iv {
  color: #f2f0eb;
}
.ap-rv-ai-intro {
  font-size: 11.5px;
  color: #6f6a5a;
  margin-bottom: 10px;
  line-height: 1.5;
}
.ap-rv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ap-rv-chips span {
  padding: 5px 11px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  font-size: 11px;
  color: #1f1d18;
  cursor: pointer;
  transition: background 0.15s;
}
.ap-rv-chips span:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .ap-rv-chips span {
  border-color: rgba(255, 255, 255, 0.12);
  color: #f2f0eb;
}
.ap-rv-ainput {
  display: flex;
  gap: 8px;
}
.ap-rv-ainput input {
  flex: 1;
  height: 34px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  color: #9c9680;
  font-family: inherit;
  background: #fff;
  outline: none;
}
[data-theme='dark'] .ap-rv-ainput input {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(242, 240, 235, 0.4);
}
.ap-rv-ainput button {
  width: 34px;
  height: 34px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
/* Resume panel */
.ap-rp {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  background: #fefdfb;
  border-left: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 7;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ap-rp.ap-rp-on {
  transform: translateX(0);
}
[data-theme='dark'] .ap-rp {
  background: #1e1e26;
  border-color: rgba(255, 255, 255, 0.07);
}
.ap-rp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #faf9f0;
  flex-shrink: 0;
}
[data-theme='dark'] .ap-rp-hd {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.07);
}
.ap-rp-ttl {
  font-size: 11.5px;
  font-weight: 700;
  color: #1f1d18;
}
[data-theme='dark'] .ap-rp-ttl {
  color: #f2f0eb;
}
.ap-rp-x {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #6f6a5a;
}
.ap-rp-body {
  padding: 14px 14px 20px;
  overflow-y: auto;
  flex: 1;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ap-rp-name {
  font-size: 17px;
  font-weight: 800;
  color: #1f1d18;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.ap-rp-role {
  font-size: 11.5px;
  font-weight: 500;
  color: #d97757;
  margin-bottom: 10px;
}
.ap-rp-rule {
  height: 2px;
  background: #1f1d18;
  border-radius: 1px;
  margin-bottom: 10px;
}
[data-theme='dark'] .ap-rp-rule {
  background: rgba(242, 240, 235, 0.15);
}
.ap-rp-sec {
  font-size: 9.5px;
  font-weight: 800;
  color: #9c9680;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ap-rp-job {
  margin-bottom: 10px;
}
.ap-rp-jt {
  font-size: 11.5px;
  font-weight: 700;
  color: #1f1d18;
  margin-bottom: 1px;
}
.ap-rp-jt span {
  color: #d97757;
}
.ap-rp-jp {
  font-size: 10.5px;
  color: #9c9680;
  margin-bottom: 4px;
}
.ap-rp-job ul {
  margin-left: 12px;
}
.ap-rp-job li {
  font-size: 10.5px;
  color: #4a4740;
  line-height: 1.5;
  margin-bottom: 2px;
}
.ap-rp-edu {
  font-size: 11.5px;
  font-weight: 700;
  color: #1f1d18;
}
.ap-rp-edu span {
  color: #d97757;
}
.ap-rp-yr {
  color: #9c9680 !important;
  font-weight: 400 !important;
  font-size: 10px !important;
}
.ap-rp-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ap-rp-skills span {
  padding: 3px 8px;
  background: #f5f0e8;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  font-size: 10.5px;
  color: #4a4740;
  font-weight: 500;
}
[data-theme='dark'] .ap-rp-name,
[data-theme='dark'] .ap-rp-jt,
[data-theme='dark'] .ap-rp-edu {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-rp-job li {
  color: rgba(242, 240, 235, 0.6);
}
[data-theme='dark'] .ap-rp-skills span {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(242, 240, 235, 0.7);
}
/* Cursor */
.ap-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 18px;
  height: 22px;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: translate(-40px, 300px);
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18));
}
.ap-cursor.ap-cur-on {
  opacity: 1;
}

/* Floating badges (Live / Count) */
.app-preview-badge {
  position: absolute;
  bottom: -14px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.22),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  white-space: nowrap;
  z-index: 2;
  transition: opacity 0.25s ease;
}
.ap-badge-live {
  left: 24px;
}
.ap-badge-count {
  left: 188px;
}
.ap-live-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  animation: ap-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ap-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.25);
  }
}
/* Hide badges when any overlay is open */
.ap-stage.ap-busy .app-preview-badge {
  opacity: 0;
  pointer-events: none;
}

/* Eye icon on resume links */
.ap-rl-lnk {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ap-rl-eic {
  opacity: 0.4;
  transition: opacity 0.2s;
  flex-shrink: 0;
}
.ap-rl-lnk:hover .ap-rl-eic {
  opacity: 0.85;
}

/* Share Your Interview Screen modal */
.ap-sh-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 20;
}
.ap-sh-bg.ap-sh-on {
  opacity: 1;
  pointer-events: all;
}
.ap-sh {
  background: #fefdfb;
  border-radius: 18px;
  width: 460px;
  max-width: 92%;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.22),
    0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.ap-sh-bg.ap-sh-on .ap-sh {
  transform: scale(1);
}
.ap-sh-hd {
  font-size: 15px;
  font-weight: 800;
  color: #1f1d18;
  padding: 22px 22px 8px;
}
.ap-sh-desc {
  font-size: 12px;
  color: #6f6a5a;
  padding: 0 22px 16px;
  line-height: 1.6;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.ap-sh-opts {
  display: flex;
  gap: 12px;
  padding: 18px 22px;
}
.ap-sh-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s;
  text-align: center;
  color: #9c9680;
}
.ap-sh-opt.ap-sh-sel {
  border-color: #d97757;
  background: rgba(217, 119, 87, 0.05);
  color: #d97757;
}
.ap-sh-ol {
  font-size: 12.5px;
  font-weight: 700;
  color: #1f1d18;
}
.ap-sh-opt.ap-sh-sel .ap-sh-ol {
  color: #d97757;
}
.ap-sh-os {
  font-size: 10.5px;
  color: #9c9680;
}
.ap-sh-ft {
  padding: 0 22px 18px;
  display: flex;
  justify-content: flex-end;
}
.ap-sh-cancel {
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #6f6a5a;
  cursor: pointer;
  padding: 6px 12px;
}
[data-theme='dark'] .ap-sh {
  background: #1e1e26;
}
[data-theme='dark'] .ap-sh-hd {
  color: #f2f0eb;
}
[data-theme='dark'] .ap-sh-opt {
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .ap-sh-ol {
  color: #f2f0eb;
}

/* Delete Confirmation modal */
.ap-dl-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 20;
}
.ap-dl-bg.ap-dl-on {
  opacity: 1;
  pointer-events: all;
}
.ap-dl {
  background: #fefdfb;
  border-radius: 16px;
  width: 340px;
  max-width: 90%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 28px 24px 20px;
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ap-dl-bg.ap-dl-on .ap-dl {
  transform: scale(1);
}
.ap-dl-icon {
  margin-bottom: 12px;
}
.ap-dl-title {
  font-size: 15px;
  font-weight: 800;
  color: #1f1d18;
  margin-bottom: 8px;
}
.ap-dl-desc {
  font-size: 12px;
  color: #6f6a5a;
  line-height: 1.6;
  margin-bottom: 20px;
}
.ap-dl-ft {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.ap-dl-cancel {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: #6f6a5a;
  cursor: pointer;
}
.ap-dl-del {
  background: #fef2f2;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 12.5px;
  font-weight: 700;
  color: #ef4444;
  cursor: pointer;
}
[data-theme='dark'] .ap-dl {
  background: #1e1e26;
}
[data-theme='dark'] .ap-dl-title {
  color: #f2f0eb;
}

/* ============================================
   Creator Program v2 — Sticky Scroll Storytelling
   ============================================ */

/* ── Sticky shell: 250vh tall container. Section pins at top for 2.5x
   viewport of scrolling. Zero cursor lock — browser scrolls freely.
   Progress (0→1) drives phased animations via JS scroll listener. ── */
.creator-sticky-shell {
  position: relative;
  height: 250vh;
}
.creator-sticky-shell .creator-section-v2 {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
/* Mobile: disable sticky (content taller than viewport when stacked),
   use IntersectionObserver autoplay instead (handled in JS) */
@media (max-width: 768px) {
  .creator-sticky-shell {
    height: auto;
    overflow: hidden;
  }
  .creator-sticky-shell .creator-section-v2 {
    position: relative;
    height: auto;
    display: block;
    overflow: hidden;
    padding-top: clamp(48px, 8vw, 80px);
    padding-bottom: clamp(48px, 8vw, 80px);
    padding-left: clamp(16px, 5vw, 40px);
    padding-right: clamp(16px, 5vw, 40px);
  }
}

.creator-section-v2 {
  position: relative;
  background: #131314;
  color: #f2f0eb;
  padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 80px);
  overflow: hidden;
}
[data-theme='dark'] .creator-section-v2 {
  background: #0a0a0f;
}
.creator-bg-curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
}
.creator-v2-content {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.creator-v2-left .creator-badge {
  background: linear-gradient(135deg, rgba(217, 119, 87, 0.15) 0%, rgba(244, 162, 97, 0.08) 100%);
  color: #fff;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
  border: 1px solid rgba(242, 240, 235, 0.12);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.creator-v2-left .creator-title {
  color: #fff;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
  font-size: clamp(24px, 2.5vw, 36px);
}
.creator-v2-left .creator-desc {
  color: rgba(242, 240, 235, 0.55);
  max-width: 420px;
}
.creator-v2-left .creator-footnote {
  color: rgba(242, 240, 235, 0.35);
}
/* Creator perks row — compact horizontal tags */
.creator-perks-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 4px;
}
.creator-perk-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(242, 240, 235, 0.7);
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.creator-perk-tag svg {
  color: var(--terra);
  flex-shrink: 0;
}
.creator-perk-tag:hover {
  background: rgba(217, 119, 87, 0.1);
  border-color: rgba(217, 119, 87, 0.2);
  color: rgba(242, 240, 235, 0.95);
}

/* Creator right — screenshot */
.creator-v2-right {
  position: relative;
  align-self: center;
}

/* ── Aurora ambient glow behind the frame ── */
.creator-aurora-glow {
  position: absolute;
  inset: -40% -30%;
  background: radial-gradient(
    ellipse at 55% 50%,
    rgba(217, 119, 87, 0.14) 0%,
    rgba(168, 85, 247, 0.07) 45%,
    transparent 70%
  );
  pointer-events: none;
  animation: creator-aurora-pulse 5s ease-in-out infinite;
  z-index: 0;
}
@keyframes creator-aurora-pulse {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

/* ── Browser chrome frame ── */
.ss-browser-frame {
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.07);
  position: relative;
  z-index: 1;
}
.ss-chrome-bar {
  height: 32px;
  background: #1c1c1e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
}
.ss-chrome-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.ss-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red {
  background: #ff5f57;
}
.dot-yellow {
  background: #febc2e;
}
.dot-green {
  background: #28c840;
}
.ss-chrome-url-pill {
  flex: 1;
  max-width: 210px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 3px 10px;
  text-align: center;
  overflow: hidden;
}
.ss-chrome-url-pill span {
  font-size: 10px;
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  color: rgba(255, 255, 255, 0.38);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* Remove clip's own shadow/border-radius — frame provides it now */
.ss-browser-frame .creator-ss-img-clip {
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ── Floating stat chips ── */
.css-float-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 10px;
  border-radius: 14px;
  background: rgba(30, 30, 35, 0.75);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  /* initial: hidden off-screen */
  opacity: 0;
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.chip-a {
  top: 48px;
  right: -18px;
  transform: translate(52px, -14px);
}
.chip-b {
  bottom: 68px;
  left: -18px;
  transform: translate(-52px, 14px);
}
.css-float-chip.visible {
  opacity: 1;
  transform: translate(0, 0);
  animation: chip-bob 3.6s ease-in-out infinite;
}
.chip-b.visible {
  animation-duration: 4.2s;
  animation-delay: 0.35s;
}

/* Swap: fade out → change text → fade in */
.css-float-chip.swapping {
  opacity: 0 !important;
  transform: translate(0, -6px) !important;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease !important;
  animation: none !important;
}

.css-float-chip .chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.css-float-chip .chip-icon.chip-icon-a {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.css-float-chip .chip-icon.chip-icon-b {
  background: rgba(217, 119, 87, 0.18);
  color: #d97757;
}
.chip-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.chip-val {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  transition: opacity 0.2s ease;
}
.chip-lbl {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.2;
}
@keyframes chip-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ── Scroll progress bar — thin vertical line, right edge of wrap ── */
.creator-scroll-progress {
  position: absolute;
  right: -14px;
  top: 8%;
  height: 84%;
  width: 2px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 2px;
}
.csp-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to bottom, #d97757, #a855f7);
  border-radius: 2px;
  transition: height 0.07s linear;
}

.creator-screenshot-wrap {
  position: relative;
  z-index: 1;
}
/* !! DO NOT CHANGE !! — locked to match QA exactly (cdemo-stage: 36px chrome + 348px body = 384px total) */
.creator-ss-img-clip {
  width: 100%;
  height: 384px; /* !! LOCKED — DO NOT CHANGE !! */
  overflow: hidden; /* !! LOCKED — contains 3D transform overflow !! */
  border-radius: 12px; /* !! LOCKED !! */
  background: #fefdfb;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.creator-screenshot-wrap:hover .creator-ss-img-clip {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}
/* Stacked cross-fade — payout rises up from behind dashboard on scroll */
.creator-ss-stack {
  position: relative;
  width: 100%;
  height: 100%;
}
.creator-ss-stack .ss-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  will-change: transform, opacity;
}
/* Dashboard: visible, sits in place */
.creator-ss-stack .ss-slide:nth-child(1) {
  z-index: 2;
  transform: translateY(0) scale(1);
  opacity: 1;
  transition:
    transform 0.7s cubic-bezier(0.4, 0, 0.6, 1),
    opacity 0.5s ease;
}
/* Payout: parked below the clip boundary, always opaque, z-index above dashboard */
.creator-ss-stack .ss-slide:nth-child(2) {
  z-index: 3;
  transform: translateY(101%);
  opacity: 1;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── show-payout: payout rises from below, dashboard recedes into depth ── */
.creator-ss-stack.show-payout .ss-slide:nth-child(1) {
  transform: translateY(-6%) scale(0.93);
  opacity: 0.25;
  z-index: 1;
}
.creator-ss-stack.show-payout .ss-slide:nth-child(2) {
  transform: translateY(0);
}
/* ── container pulse on transition ── */
.creator-ss-img-clip.is-transitioning {
  transform: perspective(1000px) rotateY(-2deg) rotateX(1deg) scale(1.018) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
/* Slide dots */
.creator-ss-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
}
.creator-ss-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition:
    background 0.3s,
    transform 0.3s;
  cursor: pointer;
}
.creator-ss-dot.active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.3);
}
.creator-ss-badge {
  position: absolute;
  border-radius: 100px;
  padding: 7px 13px 7px 10px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.css-badge-earnings {
  top: -14px;
  left: -10px;
  background: rgba(217, 119, 87, 0.95);
  color: #fff;
  backdrop-filter: blur(8px);
}
.css-badge-signups {
  bottom: -14px;
  right: -10px;
  background: rgba(20, 184, 166, 0.92);
  color: #fff;
  backdrop-filter: blur(8px);
}

/* Obsolete — kept for safety */
.creator-perk-v2:nth-child(2) {
  transition-delay: 0.04s;
}
.creator-perk-v2:nth-child(3) {
  transition-delay: 0.08s;
}
.creator-perk-v2:nth-child(4) {
  transition-delay: 0.12s;
}
/* Earnings curve float */
/* Curve line — subtle glow pulse */
.cr-flow-line {
  animation: crLinePulse 4s ease-in-out infinite alternate;
}
@keyframes crLinePulse {
  0% {
    opacity: 0.7;
    filter: none;
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(217, 119, 87, 0.3));
  }
}
@keyframes crCurveBreathe {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
@keyframes crFillBreathe {
  0%,
  100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-flow-line {
    animation: none;
  }
}
.creator-perk-v2 svg {
  flex-shrink: 0;
}
.creator-perk-v2 strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  text-rendering: geometricPrecision;
}
.creator-perk-v2 span {
  display: block;
  font-size: 12.5px;
  color: rgba(242, 240, 235, 0.45);
  margin-top: 2px;
}
@media (max-width: 768px) {
  .creator-v2-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .creator-v2-left .creator-desc {
    margin-left: auto;
    margin-right: auto;
  }
  .creator-perks-row {
    justify-content: center;
  }

  /* Scale the locked 384px height proportionally on mobile */
  .creator-ss-img-clip {
    height: clamp(200px, calc((100vw - 40px) * 384 / 600), 384px);
    /* Kill perspective tilt — it bleeds past viewport on narrow screens */
    transform: none !important;
    transition: none !important;
  }
  .creator-screenshot-wrap:hover .creator-ss-img-clip {
    transform: none !important;
  }
  .creator-screenshot-wrap img {
    transform: none;
  }

  /* Constrain right column so screenshot never overflows */
  .creator-v2-right {
    max-width: 100%;
    overflow: hidden;
  }
  .creator-screenshot-wrap {
    max-width: 100%;
    overflow: hidden;
  }

  /* Float chips with negative offsets overflow viewport — hide on mobile */
  .chip-a,
  .chip-b {
    display: none;
  }

  /* Badge chips: tuck inside bounds */
  .css-badge-earnings {
    left: 8px;
  }
  .css-badge-signups {
    right: 8px;
  }
}

/* Legacy — kept for studio creator tab */
.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: 8px;
  background: var(--canvas-900);
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.creator-badge::before {
  display: none;
}

.creator-title {
  font-family: var(--font-display);
  font-size: clamp(26px, calc(0.7vw + 18px), 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--canvas-950);
  margin-bottom: 12px;
  -webkit-font-smoothing: antialiased;
}

.creator-desc {
  font-size: clamp(15px, calc(0.2vw + 13px), 19px);
  line-height: 1.7;
  color: var(--canvas-600);
  margin: 0 auto 36px;
  max-width: 460px;
  -webkit-font-smoothing: antialiased;
}

/* 2x2 perk grid */
.creator-perks {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 24px 40px;
  justify-content: center;
  margin-bottom: clamp(16px, 2vh, 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 — launch pad */
.creator-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 28px 14px 34px;
  background: linear-gradient(135deg, #e8825a 0%, #d97757 45%, #c55e3a 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 12px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(217, 119, 87, 0.35);
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: cta-breathe 3.2s ease-in-out infinite;
}
/* Shimmer sweep on hover */
.creator-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  transform: translateX(-150%);
  pointer-events: none;
}
.creator-cta:hover::before {
  transform: translateX(200%);
  transition: transform 0.52s ease;
}
.creator-cta:hover {
  transform: translateY(-4px) scale(1.025);
  box-shadow:
    0 10px 42px rgba(217, 119, 87, 0.6),
    0 2px 10px rgba(0, 0, 0, 0.18);
  animation: none;
}
.creator-cta:active {
  transform: translateY(-1px) scale(0.98);
  transition: transform 0.1s ease;
}
/* Circular arrow badge */
.cta-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  transition:
    background 0.3s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.creator-cta:hover .cta-arrow-wrap {
  background: rgba(255, 255, 255, 0.28);
  transform: translate(2px, -2px); /* whole circle rockets NE */
}
.cta-arrow {
  display: block;
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.creator-cta:hover .cta-arrow {
  transform: translate(1px, -1px) scale(1.1); /* arrow nudges further NE inside circle */
}
/* Idle breathing glow */
@keyframes cta-breathe {
  0%,
  100% {
    box-shadow:
      0 4px 24px rgba(217, 119, 87, 0.35),
      0 0 0 rgba(217, 119, 87, 0);
  }
  50% {
    box-shadow:
      0 4px 32px rgba(217, 119, 87, 0.55),
      0 0 22px rgba(217, 119, 87, 0.18);
  }
}

@media (max-width: 767px) {
  /* Space between perk tags and CTA button */
  .creator-cta {
    margin-top: 28px;
  }
}

.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-desc {
    margin-bottom: 24px;
  }
  .creator-cta {
    padding: 11px 24px;
  }
}

/* ============================================
   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 — dark mode */
[data-theme='dark'] .desktop-section {
  background: linear-gradient(168deg, #141316 0%, #1a1820 40%, #18161e 100%);
  border-color: rgba(217, 119, 87, 0.12);
  color: #f5f0eb;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 12px 48px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .desktop-section::before {
  background: radial-gradient(
    ellipse at center,
    rgba(217, 119, 87, 0.1) 0%,
    rgba(217, 119, 87, 0.03) 50%,
    transparent 70%
  );
}
[data-theme='dark'] .desktop-title {
  color: #f5f0eb;
}
[data-theme='dark'] .desktop-desc {
  color: rgba(245, 240, 235, 0.85);
}
[data-theme='dark'] .desktop-badge {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme='dark'] .dp-pillar {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
  border-left-color: var(--terra);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
[data-theme='dark'] .dp-pillar:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  border-left-color: var(--terra);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
[data-theme='dark'] .dp-pillar strong {
  color: #f5f0eb;
}
[data-theme='dark'] .dp-pillar span {
  color: rgba(245, 240, 235, 0.5);
}
[data-theme='dark'] .desktop-dl-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .desktop-dl-btn:hover {
  background: var(--terra, #d97757);
  border-color: var(--terra, #d97757);
}
[data-theme='dark'] .desktop-footnote {
  color: rgba(245, 240, 235, 0.35);
}

/* 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: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.7);
}
[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 colors — no backgrounds needed */

/* Hero chip — keep readable */
[data-theme='dark'] .hero-chip {
  background: none;
  border: none;
  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: 0 clamp(16px, 4vw, 48px) 4px;
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: clamp(28px, 4vh, 48px) 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(auto-fit, minmax(min(100%, 220px), 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) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}
.persona-icon svg {
  width: 100%;
  height: 100%;
}
.persona-card h3 {
  font-family: var(--font-display);
  font-size: clamp(15px, calc(0.2vw + 13px), 19px);
  font-weight: 700;
  color: var(--canvas-900);
  margin-bottom: 8px;
}
.persona-card p {
  font-size: clamp(14px, calc(0.2vw + 12px), 18px);
  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 WispherFlow — 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: clamp(14px, calc(0.15vw + 12px), 17px);
  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;
  position: relative;
}
.compare-table thead th.compare-highlight::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--terra);
  border-radius: 2px;
  animation: compare-glow-pulse 3s ease-in-out infinite;
}
@keyframes compare-glow-pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 4px rgba(217, 119, 87, 0.4);
  }
  50% {
    opacity: 0.75;
    box-shadow: 0 0 12px rgba(217, 119, 87, 0.7);
  }
}
/* Compare table rows staggered entrance */
.compare-table tbody tr {
  transition:
    background 0.2s ease,
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.compare-table tbody tr.row-hidden {
  opacity: 0;
  transform: translateY(12px);
}
.compare-table tbody tr.row-visible {
  opacity: 1;
  transform: translateY(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);
}
/* Compare table — alternating rows + hover */
.compare-table tbody tr:nth-child(even) td {
  background: var(--canvas-100);
}
.compare-table tbody tr:nth-child(even) td.compare-highlight {
  background: var(--terra-50);
}
.compare-table tbody tr {
  transition: background 0.2s ease;
}
.compare-table tbody tr:hover td {
  background: var(--canvas-200);
}
.compare-table tbody tr:hover td.compare-highlight {
  background: rgba(217, 119, 87, 0.12);
}
[data-theme='dark'] .compare-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .compare-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .compare-table tbody tr:hover td.compare-highlight {
  background: rgba(224, 124, 88, 0.14);
}
.compare-yes {
  font-size: 15px;
}
.compare-no {
  font-size: 15px;
}

@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;
  }
}

/* ============================================
   Scroll Reveal Animations
   ============================================ */
/* Zoom-in variant — full cinematic zoom, for large hero elements (video, big cards) */
.reveal.reveal-zoom {
  transform: scale(0.82);
  transform-origin: center bottom;
  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.reveal-zoom.visible {
  transform: scale(1) !important;
}
/* Gentle zoom — for card grids (subtle lift, not jarring) */
.reveal.reveal-zoom-sm {
  transform: translateY(14px) scale(0.94);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.reveal-zoom-sm.visible {
  transform: translateY(0) scale(1) !important;
}

/* Emil Kowalski: snappier reveals — start from scale(0.98), tighter timing */
.reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition:
    opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal.revealed,
.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Emil Kowalski: acceleration stagger — tighter intervals (60ms beat) */
.reveal-delay-1 {
  transition-delay: 0.06s;
}
.reveal-delay-2 {
  transition-delay: 0.12s;
}
.reveal-delay-3 {
  transition-delay: 0.18s;
}
.reveal-delay-4 {
  transition-delay: 0.24s;
}
.reveal-delay-5 {
  transition-delay: 0.3s;
}
.reveal-delay-6 {
  transition-delay: 0.36s;
}

/* Directional reveal variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}
/* Respect reduced motion for all variants */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    transition-duration: 0.01s !important;
    transform: none !important;
  }
}

/* ============================================
   CTA Buttons — Larger, bolder for landing
   ============================================ */
/* Emil Kowalski: CTA buttons — spring hover, tactile press */
.hero-buttons .btn-xl {
  padding: 14px 32px;
  font-size: clamp(16px, calc(0.2vw + 14px), 20px);
  font-weight: 700;
  border-radius: var(--radius-xl);
  transition: all 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hero-buttons .btn-xl:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.hero-buttons .btn-xl:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 100ms;
}
.hero-buttons .btn-primary.btn-xl:hover {
  box-shadow: 0 8px 28px rgba(217, 119, 87, 0.35);
}

/* ============================================
   Demo Video — Fullscreen controls
   ============================================ */
.demo-video-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.demo-video-frame:hover .demo-video-controls {
  opacity: 1;
}
/* Always show controls in theater mode — collapse button must be reachable on mobile */
.demo-video-container.theater .demo-video-controls {
  opacity: 1;
}
/* Hide expand/collapse on mobile — video is already full-width */
@media (max-width: 768px) {
  .demo-video-controls {
    display: none !important;
  }
}
.demo-video-controls button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(10, 10, 20, 0.7);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.demo-video-controls button:hover {
  background: rgba(217, 119, 87, 0.8);
  border-color: rgba(217, 119, 87, 0.6);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.3);
}
/* Theater mode — video fixed on screen, page scrolls freely behind */
.demo-video-container {
  position: relative;
  z-index: 2;
}
.demo-video-container.theater {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: 92vw;
  max-width: 1100px;
  margin: 0;
  animation: theaterVideoIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.demo-video-container.theater .demo-video-frame {
  border-radius: var(--radius-2xl);
  border-color: rgba(217, 119, 87, 0.3);
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(217, 119, 87, 0.1);
}
@keyframes theaterVideoIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
/* Closing animation — video shrinks back into its container */
.demo-video-container.theater-closing {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  width: 92vw;
  max-width: 1100px;
  margin: 0;
  animation: theaterVideoOut 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}
@keyframes theaterVideoOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.75);
  }
}
.demo-theater-scrim.scrim-closing {
  display: block;
  animation: theaterScrimOut 0.3s ease both;
}
@keyframes theaterScrimOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Scrim — visual dim only, scroll passes through */
.demo-theater-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
.demo-theater-scrim.active {
  display: block;
  animation: theaterScrimIn 0.35s ease both;
}
@keyframes theaterScrimIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Toggle icon swap */
.demo-video-container.theater .demo-expand-icon {
  display: none !important;
}
.demo-video-container.theater .demo-collapse-icon {
  display: block !important;
}
/* Close button visible in theater mode */
.demo-video-container .demo-theater-close {
  display: none;
}
.demo-video-container.theater .demo-theater-close {
  display: flex;
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.2s ease;
  z-index: 2;
}
.demo-video-container.theater .demo-theater-close:hover {
  background: rgba(217, 119, 87, 0.8);
  border-color: var(--terra);
  transform: rotate(90deg) scale(1.1);
}

/* ============================================
   Dark Mode — Illustration SVG adaptation
   ============================================ */
[data-theme='dark'] #glass-brain-wrap svg {
  filter: brightness(0.85) saturate(0.9);
}
[data-theme='dark'] #glass-brain-wrap {
  background: radial-gradient(circle, rgba(217, 119, 87, 0.06) 0%, transparent 70%);
  border-radius: 50%;
}

/* ============================================
   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: clamp(26px, calc(0.6vw + 20px), 36px);
  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(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
  max-width: clamp(760px, 80vw, 1100px);
  margin: 0 auto;
}
.proof-quote {
  padding: 28px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  border-left: 3px solid transparent;
  text-align: left;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s ease,
    background 0.25s ease;
}
.proof-quote:hover {
  transform: translateY(-3px);
  border-left-color: var(--terra);
  background: var(--canvas-50);
}
.proof-quote p {
  font-size: clamp(15px, calc(0.2vw + 13px), 19px);
  line-height: 1.7;
  color: var(--canvas-800);
  margin-bottom: 14px;
  font-style: italic;
}
.proof-author {
  font-size: clamp(13px, calc(0.15vw + 11.5px), 16px);
  font-weight: 600;
  color: var(--text-muted);
}
@media (max-width: 768px) {
  .proof-stats {
    gap: 24px;
  }
  .proof-num {
    font-size: 25px;
  }
  /* Horizontal scroll snap on mobile */
  .proof-quotes {
    grid-template-columns: none;
    display: flex;
    gap: 16px;
    max-width: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 16px;
    scrollbar-width: none;
  }
  .proof-quotes::-webkit-scrollbar {
    display: none;
  }
  .proof-quote {
    flex: 0 0 85%;
    max-width: 320px;
    scroll-snap-align: center;
  }
}

/* Proof quotes — vertical stack on small screens */
@media (max-width: 640px) {
  .proof-quotes {
    display: flex;
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 16px;
    padding: 4px 0 8px;
  }
  .proof-quote {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    scroll-snap-align: none;
  }
}

/* ============================================
   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: clamp(16px, calc(0.2vw + 14px), 20px);
  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);
  /* Emil Kowalski: spring bounce on chevron rotation */
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    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);
}
/* Animated content wrapper — grid-row trick for smooth height */
.faq-item .faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.faq-item[open] .faq-a-wrap {
  grid-template-rows: 1fr;
}
.faq-a {
  font-size: clamp(15px, calc(0.2vw + 13px), 18px);
  line-height: 1.7;
  color: var(--text-secondary);
  padding: 0 0 16px;
  max-width: 600px;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.25s ease 0.05s;
}
.faq-item[open] .faq-a {
  opacity: 1;
}
/* Closing state — animate grid rows back to 0 before [open] is removed */
.faq-item.faq-closing .faq-a-wrap {
  grid-template-rows: 0fr;
}
.faq-item.faq-closing .faq-a {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.faq-item.faq-closing .faq-q .faq-chevron {
  transform: rotate(45deg);
}
.faq-item.faq-closing .faq-q {
  color: var(--canvas-900);
}

/* ============================================
   Security & Privacy
   ============================================ */
.security-section {
  text-align: center;
}
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
  max-width: clamp(700px, 75vw, 1000px);
  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: clamp(15px, calc(0.2vw + 13px), 19px);
  font-weight: 700;
  color: var(--canvas-900);
}
.security-card span {
  font-size: clamp(14px, calc(0.2vw + 12px), 18px);
  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;
  will-change: transform;
}
#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: clamp(24px, calc(0.7vw + 16px), 36px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.closing-cta-desc {
  font-size: clamp(15px, calc(0.2vw + 13px), 19px);
  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 — Antigravity layout
   ============================================ */

/* ── Footer container — full width, no max-width cap ── */
.lp-footer {
  padding: 0 clamp(24px, 5vw, 80px);
  border-top: 1px solid var(--canvas-200);
}

/* ── Top row: tagline left, two link columns right ── */
.lp-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  padding: 56px 0 48px;
}
.lp-footer-left {
  flex: 0 0 auto;
  max-width: 320px;
}
.lp-footer-tagline {
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin: 0;
}
.lp-footer-right {
  display: flex;
  gap: clamp(40px, 6vw, 100px);
}
.lp-footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-footer-col a {
  font-size: 15px;
  line-height: 1 !important;
  min-height: unset !important;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}
.lp-footer-col a:hover {
  color: var(--text-primary);
}

/* ── Bottom bar: brand left, legal right ──
   Sits OUTSIDE .lp-footer in the DOM (after the full-width wordmark),
   so it needs its own horizontal padding to keep the brand mark away
   from the viewport edge. Mirror the parent's clamp() to match. */
.lp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 5vw, 80px) 24px;
  border-top: 1px solid var(--canvas-200);
}
.lp-footer-brand {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  position: relative;
}
.lp-footer-brand .logo-o-wrap {
  position: relative;
  display: inline-block;
}
.lp-footer-brand .logo-needle {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 80%;
  color: var(--terra);
}
.lp-footer-legal {
  display: flex;
  align-items: center;
  gap: 24px;
}
.lp-footer-legal a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.lp-footer-legal a:hover {
  color: var(--text-primary);
}
.lp-footer-legal span {
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Full-width wordmark ── */
.footer-wordmark {
  width: 100%;
  overflow: visible;
  padding: 0;
  margin: 0;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}
.footer-wm-inner {
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 14vw;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.88;
  color: #0a0a0a;
  white-space: nowrap;
  padding: 0 0 0.06em;
}
[data-theme='dark'] .footer-wm-inner {
  color: rgba(255, 255, 255, 0.88);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .lp-footer {
    padding: 0 20px;
  }
  .lp-footer-top {
    flex-direction: column;
    gap: 32px;
    padding: 40px 0 32px;
  }
  .lp-footer-left {
    max-width: 100%;
  }
  .lp-footer-tagline {
    font-size: clamp(20px, 5.5vw, 28px);
  }
  .lp-footer-right {
    gap: 40px;
  }
  .lp-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px 20px;
  }
  .lp-footer-legal {
    flex-wrap: wrap;
    gap: 12px;
  }
  /* legacy selector kept for other references */
  .footer-bottom {
    padding: 14px 0 0;
  }
  .landing-footer {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .proof-stats {
    flex-wrap: wrap;
  }
  .closing-cta-inner {
    border-radius: 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-col {
    gap: 6px;
  }
  .proof-stats {
    gap: 16px;
  }
  .proof-sep {
    display: none;
  }
  .faq-q {
    padding: 14px 0;
  }
  .compare-feature {
    white-space: normal;
  }
  /* 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;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * MOBILE BROWSER SETTINGS ALIGNMENT — global 360° consistency
 *
 * User reported: on mobile browser (not Capacitor app), settings page content
 * rows are flush to the left screen edge while section headers have different
 * padding, causing visual inconsistency as you scroll.
 *
 * Fix applies to ALL settings content on mobile browser (not Capacitor app):
 * - Uses LOGICAL properties (padding-inline) so RTL languages (Arabic, Hebrew,
 *   Persian) get proper mirrored padding automatically.
 * - Uses env(safe-area-inset-*) so notched phones (iPhone X+, Pixel with
 *   punch-holes) don't have content cut off behind rounded corners or notches.
 * - Single source of truth: one rule for the whole settings panel, every
 *   section inherits the same horizontal padding.
 * - Explicitly targets ALL settings children so no row can escape alignment.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body:not(.is-capacitor) #tab-settings .tab-body,
  body:not(.is-capacitor) .settings-body {
    padding-inline-start: max(18px, env(safe-area-inset-left, 18px));
    padding-inline-end: max(18px, env(safe-area-inset-right, 18px));
    padding-block-start: 14px;
    box-sizing: border-box;
  }
  /* Every section gets uniform spacing — no row is allowed to break out */
  body:not(.is-capacitor) #tab-settings .settings-section {
    padding-inline: 0; /* parent tab-body provides the edge padding */
    margin-inline: 0;
    box-sizing: border-box;
  }
  /* All row types — consistent horizontal alignment, no escaping to the edge */
  body:not(.is-capacitor) #tab-settings .settings-row,
  body:not(.is-capacitor) #tab-settings .toggle-row,
  body:not(.is-capacitor) #tab-settings .settings-shortcut,
  body:not(.is-capacitor) #tab-settings .settings-about-row,
  body:not(.is-capacitor) #tab-settings .settings-profile-card,
  body:not(.is-capacitor) #tab-settings .settings-card,
  body:not(.is-capacitor) #tab-settings .pill-group {
    margin-inline: 0;
    padding-inline: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
  /* Section header labels get the same left alignment */
  body:not(.is-capacitor) #tab-settings .settings-section h3,
  body:not(.is-capacitor) #tab-settings .settings-hint {
    padding-inline: 0;
    margin-inline: 0;
  }
  /* Prevent child element overflow that would look like misalignment */
  body:not(.is-capacitor) #tab-settings .settings-row > *,
  body:not(.is-capacitor) #tab-settings .toggle-row > * {
    min-width: 0; /* allow flex items to shrink below their content size */
  }
}

/* Even tighter padding on very narrow phones */
@media (max-width: 400px) {
  body:not(.is-capacitor) #tab-settings .tab-body,
  body:not(.is-capacitor) .settings-body {
    padding-inline-start: max(14px, env(safe-area-inset-left, 14px));
    padding-inline-end: max(14px, env(safe-area-inset-right, 14px));
  }
}

/* ── 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;
}
.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: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
}
/* 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 — hidden on desktop (sidebar has it), shown on mobile */
.sessions-analytics-shortcut {
  display: none !important;
}
@media (max-width: 640px) {
  .sessions-analytics-shortcut {
    display: inline-flex !important;
  }
  /* Mobile: hide only Select — Analytics and Clear All stay */
  #sessions-select-toggle {
    display: none !important;
  }
  /* Clear All: icon-only on mobile (hide text label) */
  .sessions-clear-label {
    display: none !important;
  }
}

/* Header Clear All button styling */
.sessions-clear-all-btn {
  color: var(--red-400) !important;
  flex-shrink: 0;
}
.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;
  }

  /* Hero: centered layout, no padding offset needed */

  /* 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: 180px;
  }
  #glass-brain-wrap {
    width: 160px;
    height: 160px;
  }
  .gb-answer-panel {
    font-size: 8px;
    left: 78%;
    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: #1c1b19;
  border: 1px solid rgba(255, 255, 255, 0.08);
  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.25),
    0 2px 8px rgba(0, 0, 0, 0.12);
  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(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.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: 20px 0 32px;
  margin-top: -1px; /* eliminate any subpixel gap */
  width: 100%;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
[data-theme='dark'] .logo-strip-section {
  border-top-color: rgba(255, 255, 255, 0.06);
  background: var(--bg);
}
.logo-strip-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b0a89e;
  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 90s linear infinite;
  width: max-content;
  will-change: transform;
}
.company-logo {
  height: 30px !important;
  max-height: 30px !important;
  max-width: 110px;
  width: auto;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  user-select: none;
  opacity: 0.85;
  overflow: hidden;
  transition: opacity 0.25s ease;
}
.company-logo:hover {
  opacity: 1;
}
[data-theme='dark'] .company-logo {
  filter: brightness(0) invert(1);
  opacity: 0.65;
}
[data-theme='dark'] .company-logo:hover {
  opacity: 1;
}
@keyframes marquee {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-50%) translateZ(0);
  }
}
/* Pause on hover */
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
  }
}
@media (max-width: 768px) {
  .logo-strip-section {
    padding: 20px 0 28px;
  }
  .logo-marquee-track {
    gap: 36px;
  }
  .company-logo {
    height: 24px !important;
    max-height: 24px !important;
    max-width: 95px;
  }
}
@media (max-width: 480px) {
  .logo-strip-section {
    padding: 16px 0 24px;
  }
  .logo-marquee-track {
    gap: 24px;
    animation-duration: 50s;
  }
  .company-logo {
    height: 20px !important;
    max-height: 20px !important;
    max-width: 80px;
  }
}

/* ── 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: 1080px;
  margin: 4px auto 0;
}
.demo-video-section {
  max-width: 1200px;
  padding-left: clamp(16px, 3vw, 40px);
  padding-right: clamp(16px, 3vw, 40px);
}
.demo-video-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  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,
    transform 0.5s var(--ease);
}
.demo-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.demo-video-frame.demo-in-view {
  border-color: rgba(217, 119, 87, 0.5);
  box-shadow:
    0 8px 60px rgba(217, 119, 87, 0.18),
    0 0 0 1px rgba(217, 119, 87, 0.12);
}
.demo-video-frame:hover {
  border-color: var(--terra);
  box-shadow:
    0 12px 80px rgba(217, 119, 87, 0.22),
    0 0 0 1px rgba(217, 119, 87, 0.2);
}
/* Ambient glow orbs behind the video */
.demo-video-container {
  position: relative;
}
.demo-video-container::before,
.demo-video-container::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: -1;
}
.demo-video-container::before {
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(217, 119, 87, 0.22), transparent 70%);
  top: 20%;
  left: -8%;
}
.demo-video-container::after {
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(100, 115, 240, 0.18), transparent 70%);
  top: 20%;
  right: -8%;
}
.demo-video-container.visible::before,
.demo-video-container.visible::after {
  opacity: 1;
}
.demo-video-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.4s ease;
}
.demo-video-play svg circle {
  transition: stroke 0.3s ease;
}
.demo-video-frame:hover .demo-video-play svg circle {
  stroke: rgba(217, 119, 87, 0.6);
}
.demo-video-play svg {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1),
    filter 0.3s ease;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.4));
}
.demo-video-frame:hover .demo-video-play svg {
  transform: scale(1.12);
  filter: drop-shadow(0 4px 24px rgba(217, 119, 87, 0.35));
}
/* Pulse ring on play button */
.demo-video-play svg::after {
  content: '';
}
@keyframes play-ring-pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
.demo-video-play-ring {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: play-ring-pulse 2s ease-out infinite;
  pointer-events: none;
}
.demo-video-label {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

/* ── 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(0.16, 1, 0.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: 0 24px;
  min-height: 56px;
  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 {
  display: flex;
  align-items: center;
  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: 34px;
  height: 34px;
  border-radius: 10px;
  background: transparent;
  border: none;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}
.footer-social-link:hover {
  transform: translateY(-2px);
  opacity: 0.8;
}
/* Brand colors for each platform */
.footer-social-link[aria-label*='X'],
.footer-social-link[aria-label*='Twitter'] {
  color: #000;
}
.footer-social-link[aria-label*='LinkedIn'] {
  color: #0a66c2;
}
.footer-social-link[aria-label*='YouTube'] {
  color: #ff0000;
}
.footer-social-link[aria-label*='Instagram'] {
  color: #e4405f;
}
/* Dark mode — keep brand colors but brighten X */
[data-theme='dark'] .footer-social-link[aria-label*='X'],
[data-theme='dark'] .footer-social-link[aria-label*='Twitter'] {
  color: #fff;
}

/* ── Footer App Store Badges ── */
.footer-app-badges {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 12px; /* room for the soon-lab chip overhanging upward */
}

/* Wrapper anchors the soon-lab chip to the badge corner */
.footer-badge-wrap {
  position: relative;
  display: inline-flex;
}
.footer-badge-wrap .soon-lab {
  position: absolute !important;
  top: -10px;
  right: -10px;
  display: inline-flex !important;
  white-space: nowrap !important;
}

.footer-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  background: var(--canvas-900);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  border: 1.2px solid rgba(255, 255, 255, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.footer-store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.store-badge-icon {
  flex-shrink: 0;
  color: #fff;
}
.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.store-badge-sub {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.store-badge-title {
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
[data-theme='dark'] .footer-store-badge {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .footer-store-badge:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
[data-theme='dark'] .store-badge-icon {
  color: #fff;
}

/* ── 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;
}

/* "Zero" blur-to-sharp reveal */
.proof-num.blur-reveal {
  filter: blur(10px);
  opacity: 0;
  transition:
    filter 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.7s ease;
}
.proof-num.blur-reveal.blur-in {
  filter: blur(0);
  opacity: 1;
}

/* How It Works — sequential reveal state */
.hw-step.hw-hidden {
  opacity: 0;
  transform: translateY(20px);
}
.hw-step.hw-shown {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.hw-arrow.hw-hidden {
  opacity: 0 !important;
}
.hw-arrow.hw-shown {
  opacity: 0.5 !important;
  transition: opacity 0.4s ease !important;
}
/* Arrow draw path */
.hw-arrow svg path {
  stroke-dasharray: 32px;
  stroke-dashoffset: 32px;
  transition: stroke-dashoffset 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.hw-arrow.hw-drawn svg path {
  stroke-dashoffset: 0;
}

/* ============================================
   Page Loader — Windows-style chasing dots
   ============================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--bg, #ffffff);
  transition: opacity 0.5s ease;
}
body.is-capacitor .page-loader {
  display: none !important;
}
.page-loader.loaded {
  opacity: 0;
  pointer-events: none;
}
.page-loader-dots {
  width: 52px;
  height: 52px;
  position: relative;
}
.page-loader-dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--canvas-800, #3d3a35);
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.15),
    0 0 14px rgba(0, 0, 0, 0.05);
  top: 0;
  left: 50%;
  margin-left: -3px;
  transform-origin: 3px 26px;
  animation: pageLoaderChase 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.page-loader-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.page-loader-dot:nth-child(3) {
  animation-delay: 0.3s;
}
.page-loader-dot:nth-child(4) {
  animation-delay: 0.45s;
}
.page-loader-dot:nth-child(5) {
  animation-delay: 0.6s;
}
@keyframes pageLoaderChase {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  85% {
    transform: rotate(540deg);
    opacity: 0;
  }
  100% {
    transform: rotate(540deg);
    opacity: 0;
  }
}
.page-loader-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(0, 0, 0, 0.25));
  user-select: none;
}

/* Dark theme page loader */
[data-theme='dark'] .page-loader {
  background: var(--bg, #111110);
}
[data-theme='dark'] .page-loader-dot {
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.4),
    0 0 14px rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .page-loader-text {
  color: rgba(255, 255, 255, 0.25);
}

/* ── Mobile browser safe-area + UX (non-Capacitor) ── */
@media (max-width: 767px) {
  /* Safe-area bottom padding for notched iPhones in browser */
  body:not(.is-capacitor) .studio-main {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow-x: hidden;
    touch-action: pan-y;              /* tell Android to pass vertical pan to this scroll container */
    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
    overscroll-behavior: contain;      /* stop scroll chaining to locked ancestors */
  }
  body:not(.is-capacitor) .tab-content {
    overflow-x: hidden;
    max-width: 100vw;
  }
  body:not(.is-capacitor) .tab-body {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    overflow-x: hidden;
  }

  /* ── Apple HIG / Material Design mobile typography ──
       Large Title: 28px  |  Title 2: 22px  |  Title 3: 20px
       Headline: 17px semibold  |  Body: 16px  |  Subhead: 15px
       Caption: 13px  |  Min readable: 12px
    */

  /* Studio tab headers — Title 2 */
  .tab-header h1 {
    font-size: 20px;
    font-weight: 700;
  }

  /* Tab body — Body */
  .tab-body {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Section headings inside tabs — Title 3 */
  .tab-body h2,
  .tab-body h3,
  .section-title {
    font-size: 17px;
    font-weight: 600;
  }

  /* Section subheadings — Subheadline */
  .tab-body h4,
  .section-subtitle,
  .section-desc {
    font-size: 15px;
  }

  /* Body text, paragraphs — Body */
  .tab-body p,
  .tab-body li {
    font-size: 15px;
    line-height: 1.55;
  }

  /* Labels, hints — Caption */
  .tab-body label,
  .input-group label {
    font-size: 14px !important;
  }

  /* Buttons — Headline */
  .tab-body .btn {
    font-size: 15px;
    padding: 10px 18px;
    min-height: 44px;
  }

  /* Cards — Body */
  .stat-num {
    font-size: 22px;
  }
  .stat-lbl {
    font-size: 13px;
  }

  /* Auth page — bigger for readability */
  .auth-box h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
  }
  .auth-box p {
    font-size: 15px !important;
  }
  .auth-box .btn-primary {
    font-size: 16px !important;
    min-height: 48px;
  }
  .auth-box .btn-ghost {
    font-size: 14px !important;
  }
}

/* ============================================
   MOBILE-FIRST ENHANCEMENTS
   All rules mobile-only — never affect desktop
   ============================================ */
@media (max-width: 767px) {
  /* Prevent any horizontal overflow on mobile */
  body,
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* Safe-area padding for notched devices */
  .nav-bar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .section-inner,
  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  /* CTA buttons — comfortable tap target */
  .btn-primary,
  .btn-cta,
  .hero-cta,
  .nav-demo-btn {
    min-height: 52px;
  }

  /* Hero improvements */
  .hero {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .hero-title {
    font-size: clamp(28px, 8vw, 44px);
  }
  .hero-sub {
    font-size: clamp(15px, 4vw, 18px);
  }

  /* Section spacing — breathing room on mobile */
  section,
  .lp-section {
    scroll-margin-top: 64px;
  }

  /* Feature / info cards — full width, no cutoff */
  .features-grid,
  .how-grid {
    grid-template-columns: 1fr;
  }
  .feature-card,
  .how-card {
    width: 100%;
  }

  /* Reduce heavy animations on mobile for perf */
  @media (prefers-reduced-motion: no-preference) {
    [data-animate] {
      transition-duration: 0.25s !important;
    }
  }
}

/* ================================================================
   BULK SELECT — Sessions + Resumes
   ================================================================ */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-strong);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
  animation: bulk-slide-in 0.18s ease;
}
@keyframes bulk-slide-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.bulk-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 72px;
}
.bulk-quick {
  display: flex;
  gap: 4px;
  align-items: center;
}
.bulk-filter-btn {
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.bulk-filter-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}
.bulk-filter-btn.bulk-filter-active {
  background: var(--terra-50);
  border-color: rgba(217, 119, 87, 0.25);
  color: var(--terra);
  font-weight: 600;
}
.bulk-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Checkbox column */
.sel-col {
  width: 32px;
}
input.sel-cb,
input.sel-cb-all {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--terra);
}

/* Row hover in select mode */
.sel-row {
  cursor: default !important;
  transition: background 0.12s ease;
}
.sel-row:hover {
  background: var(--bg-subtle) !important;
}

/* Active state for Select toggle button */
.btn.btn-active {
  background: var(--terra-50) !important;
  color: var(--terra) !important;
  border-color: rgba(217, 119, 87, 0.25) !important;
}

/* ================================================================
   CREATOR DEMO STAGE — real PC browser window + app UI
   ================================================================ */

/* --- Stage outer shell --- */
.cdemo-stage {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transform: perspective(1000px) rotateY(-4deg) rotateX(2deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}
.creator-v2-right:hover .cdemo-stage {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

/* --- Browser chrome --- */
.cdemo-chrome {
  height: 36px;
  background: #252527;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  flex-shrink: 0;
}
.cdemo-tls {
  display: flex;
  gap: 5px;
  align-items: center;
}
.cdemo-tls span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}
.cdemo-addr {
  flex: 1;
  height: 22px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  font-family: inherit;
}

/* --- App body: horizontal flex — sidebar + main --- */
.cdemo-body {
  display: flex;
  flex-direction: row;
  height: 348px;
  overflow: hidden;
  font-family: inherit;
}

/* --- Light theme variable overrides --- */
.cdemo-light {
  background: #fefdfb;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-subtle: #f7f5f2;
  --border: rgba(0, 0, 0, 0.05);
  --border-strong: rgba(0, 0, 0, 0.08);
  --text-primary: #131314;
  --text-secondary: #5c5848;
  --text-muted: #6f6a5a;
  --shadow-sm: 0 1px 4px rgba(19, 19, 20, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --terra: #d97757;
  --terra-50: #fef3ee;
  --canvas-900: #1f1d18;
  --canvas-950: #131314;
  --radius-lg: 9px;
  --radius-sm: 7px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* --- Mini sidebar --- */
.cdemo-sidebar {
  width: 68px;
  height: 100%;
  background: #fefdfb;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 10px;
  gap: 2px;
  flex-shrink: 0;
}
.cdemo-sb-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.cdemo-sb-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: 0 7px;
}
.cdemo-sb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 0;
  border-radius: 6px;
  color: #a09880;
  font-size: 7.5px;
  font-weight: 500;
  cursor: default;
  width: 100%;
}
.cdemo-sb-item svg {
  opacity: 0.6;
}
.cdemo-sb-active {
  background: rgba(217, 119, 87, 0.1);
  color: #d97757;
}
.cdemo-sb-active svg {
  opacity: 1;
}
.cdemo-sb-user {
  margin-top: auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #d97757;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
}

/* --- Main content panel --- */
.cdemo-main {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

/* --- Screen layout (inside .cdemo-main) --- */
.cdemo-screen {
  position: absolute;
  inset: 0;
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 1;
  transition: opacity 0.38s ease;
  overflow: hidden;
}
.cdemo-screen-off {
  opacity: 0;
  pointer-events: none;
}

/* --- Content page header --- */
.cdemo-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cdemo-page-title {
  font-size: 12px;
  font-weight: 700;
  color: #131314;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1.2;
}
.cdemo-page-sub {
  font-size: 9px;
  color: #6f6a5a;
  margin-top: 1px;
}
.cdemo-payout-pill {
  font-size: 9px;
  font-weight: 600;
  color: #d97757;
  background: #fef3ee;
  border: 1px solid rgba(217, 119, 87, 0.2);
  border-radius: 100px;
  padding: 3px 9px;
  cursor: default;
  flex-shrink: 0;
  font-family: inherit;
}

/* --- 4-column stat cards grid (scaled down) --- */
.cdemo-stats-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  flex-shrink: 0;
}
.cdemo-stats-4 .creator-stat-card {
  padding: 8px 10px !important;
  gap: 7px !important;
  border-radius: 8px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.cdemo-stats-4 .csc-icon {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
}
.cdemo-stats-4 .csc-icon svg {
  width: 13px !important;
  height: 13px !important;
}
.cdemo-stats-4 .csc-label {
  font-size: 7.5px !important;
  margin-bottom: 1px !important;
}
.cdemo-stats-4 .csc-value {
  font-size: 14px !important;
}
.cdemo-stats-4 .csc-data {
  display: flex;
  flex-direction: column;
}

/* --- Heatmap card --- */
.cdemo-heatmap-card {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 9px;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 9px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
}
.cdemo-hm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.cdemo-hm-title {
  font-size: 10px;
  font-weight: 700;
  color: #131314;
  font-family: 'Space Grotesk', sans-serif;
}
.cdemo-hm-tabs {
  display: flex;
  gap: 2px;
}
.cdemo-hm-tab {
  font-size: 8px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 100px;
  color: #6f6a5a;
  cursor: default;
}
.cdemo-hm-tab-on {
  background: rgba(217, 119, 87, 0.1);
  color: #d97757;
  font-weight: 600;
}
.cdemo-hm-grid {
  flex: 1;
  display: flex;
  gap: 2px;
  overflow: hidden;
}
.cdemo-hm-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cdemo-hm-cell {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transition: opacity 0.3s ease;
}
.cdemo-hm-l0 {
  background: rgba(0, 0, 0, 0.06);
}
.cdemo-hm-l1 {
  background: rgba(217, 119, 87, 0.2);
}
.cdemo-hm-l2 {
  background: rgba(217, 119, 87, 0.45);
}
.cdemo-hm-l3 {
  background: rgba(217, 119, 87, 0.7);
}
.cdemo-hm-l4 {
  background: #d97757;
}
.cdemo-hm-footer {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.cdemo-hm-legend-lbl {
  font-size: 8px;
  color: #a09880;
}

/* --- Creator ref section (scaled inside demo) --- */
.cdemo-main .creator-ref-section {
  padding: 9px 10px !important;
  border-radius: 8px !important;
  flex-shrink: 0;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.cdemo-main .creator-ref-input {
  font-size: 9.5px !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
}
.cdemo-main .creator-copy-btn {
  font-size: 9px !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  height: auto !important;
}
.cdemo-main .creator-promo-code {
  font-size: 9px !important;
}
.cdemo-main .creator-referrals-card {
  padding: 9px 10px !important;
  border-radius: 8px !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.05) !important;
}
.cdemo-main .creator-referral-row {
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}
.cdemo-rr-item {
  transition:
    opacity 0.28s ease,
    transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.cdemo-rr-item.cdemo-rr-in {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* --- Payout tabs --- */
.cdemo-payout-tabs {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 0;
  margin-bottom: 2px;
}
.cdemo-pt {
  font-size: 9.5px;
  font-weight: 500;
  color: #6f6a5a;
  padding: 3px 10px 6px;
  border-bottom: 2px solid transparent;
  cursor: default;
  margin-bottom: -1px;
}
.cdemo-pt-active {
  color: #d97757 !important;
  border-bottom-color: #d97757 !important;
  font-weight: 700 !important;
}

/* --- Po balance card override for demo --- */
.cdemo-main .po-balance-card {
  display: flex !important;
  flex-direction: row !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  flex-shrink: 0;
}
.cdemo-main .po-balance-card > div {
  padding: 8px 10px !important;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  flex: 1;
}
.cdemo-main .po-balance-card > div:last-child {
  border-right: none !important;
}
.cdemo-main .po-bal-label {
  font-size: 7.5px !important;
  margin-bottom: 3px !important;
}
.cdemo-main .po-bal-amount {
  font-size: 13px !important;
}
.cdemo-main .po-bal-muted {
  font-size: 11px !important;
}
.cdemo-main .po-bal-action {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 12px !important;
  flex: 0 0 auto !important;
  min-width: 100px;
}
.cdemo-main .po-request-btn {
  padding: 6px 11px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  background: #131314 !important;
  white-space: nowrap;
}
.cdemo-main .po-request-btn.cdemo-pressed {
  transform: scale(0.95);
}
.cdemo-main .po-info-strip {
  padding: 2px 0 !important;
  gap: 4px !important;
  flex-shrink: 0;
}
.cdemo-main .po-info-chip {
  font-size: 8px !important;
  padding: 3px 6px !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  border-radius: 100px !important;
  gap: 3px !important;
}
.cdemo-main .po-info-chip svg {
  width: 8px !important;
  height: 8px !important;
}

/* --- Stripe row --- */
.cdemo-stripe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}
.cdemo-stripe-info {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.cdemo-stripe-logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #635bff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
}
.cdemo-stripe-btn {
  font-size: 8.5px;
  font-weight: 700;
  color: #fff;
  background: #635bff;
  border: none;
  border-radius: 5px;
  padding: 5px 9px;
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}

/* --- Success states --- */
.cdemo-success-check {
  filter: drop-shadow(0 0 10px rgba(22, 163, 74, 0.35));
  animation: cdemo-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes cdemo-pop {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.cdemo-success-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #f0fdf4;
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-radius: 8px;
  padding: 9px 11px;
  box-shadow: 0 2px 10px rgba(22, 163, 74, 0.1);
}
.cdemo-spinner {
  animation: cdemo-spin 0.75s linear infinite;
  display: block;
}
@keyframes cdemo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* --- Cursor (positioned relative to .cdemo-body) --- */
.cdemo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 18px;
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transform: translate(80px, 100px);
  transition:
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.25s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}
.cdemo-cursor.cdemo-cur-on {
  opacity: 1;
}

/* --- Notification (light style) --- */
.cdemo-notif {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 9.5px;
  color: #131314;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 20;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  font-family: inherit;
  max-width: calc(100% - 16px);
}

/* ==========================================================================
   SESSIONS SHOWCASE — Landing page section
   Dark atmospheric, step-by-step product story
   Prefix: sshowcase-  |  ss-
   ========================================================================== */

.sessions-showcase {
  position: relative;
  background: var(--canvas-50, #fefdfb);
  padding-top: clamp(4rem, 8vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 10rem);
}

/* Atmospheric effects — subtle on light bg */
.sessions-atmos {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sessions-atmos::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: var(--canvas-200, #f0ede2);
}

.sessions-atmos::after {
  content: none;
}

/* ── Scroll-driven deck system ── */

/* Outer: 5× viewport height — gives sticky element its scroll budget */
.ss-scroll-outer {
  position: relative;
  /* 6 × 100vh: 1 entry + 5 screens × 1 full viewport each */
  height: calc(var(--vh, 1vh) * 100 * 6);
  z-index: 1;
}

/* Full-width sticky pin — inherits section bg */
.ss-sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas-50, #fefdfb);
  overflow: hidden;
  padding: 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* Centered max-width content — flexbox so deck-panel gets fixed pixel width */
.ss-stage-inner {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(2.5rem, 4vw, 5rem);
}

/* ── Copy panel (flex: 1, shrinks/grows, never bleeds) ── */
.ss-copy-panel {
  flex: 1;
  min-width: 0;
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: center;
}

.ss-copy-block {
  position: absolute;
  width: 100%;
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}

.ss-copy-ghost {
  position: absolute;
  top: -36px;
  left: -6px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(60px, 7vw, 96px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 119, 87, 0.2);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
}

.ss-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.ss-step-line {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--terra, #d97757);
  opacity: 0.8;
  flex-shrink: 0;
}

.ss-step-lbl {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 500;
  color: var(--terra, #d97757);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ss-copy-heading {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.03em;
  color: var(--canvas-900, #1f1d18);
  margin-bottom: 13px;
}

.ss-copy-body {
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--canvas-600, #6f6a56);
  margin-bottom: 20px;
}

/* ── Deck panel — fixed 600px, never expands ── */
.ss-deck-panel {
  flex: 0 0 600px;
  width: 600px;
  position: relative;
}

/* Deck wrapper — full panel width */
.ss-deck-wrap {
  position: relative;
  width: 100%;
}

.ss-deck-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 2px;
}

.ss-hud-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.ss-hud-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  transition:
    width 0.3s ease,
    background 0.3s ease;
  flex-shrink: 0;
}

.ss-hud-dot.ss-dot-active {
  width: 16px;
  border-radius: 3px;
  background: var(--terra, #d97757);
  box-shadow: 0 0 7px rgba(217, 119, 87, 0.45);
}

.ss-hud-counter {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: rgba(0, 0, 0, 0.28);
  display: flex;
  gap: 1px;
}

.ss-hud-num {
  color: rgba(0, 0, 0, 0.55);
}
.ss-hud-sep {
  color: rgba(0, 0, 0, 0.18);
}

/* Deck: padding-bottom aspect ratio — immune to intrinsic image dimensions */
.ss-deck {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 61.67%;
  overflow: visible;
}

/* Cards: absolutely stacked, JS drives all transforms */
.ss-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Chrome wrap: fills card absolutely, no hover, JS owns the transform */
.ss-deck .sshowcase-chrome-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  transition: none;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.12),
    0 28px 56px rgba(0, 0, 0, 0.1);
}

.ss-deck .sshowcase-chrome-wrap:hover {
  transform: none;
}

/* Light mac-chrome bar for deck cards — matches reference screenshot */
.ss-deck .sshowcase-chrome {
  background: #e8e8e8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ss-deck .ssc-title {
  color: rgba(0, 0, 0, 0.38);
}

.ss-deck .sshowcase-chrome-wrap img {
  flex: 1;
  object-fit: cover;
  min-height: 0;
  display: block;
  width: 100%;
}

/* ── Tablet 861–1100px: shrink deck panel, tighten gap ── */
@media (max-width: 1100px) and (min-width: 861px) {
  .ss-stage-inner {
    gap: 2rem;
  }
  .ss-deck-panel {
    flex: 0 0 460px;
    width: 460px;
  }
}

/* ── Mobile ≤860px: kill sticky, show plain vertical layout ── */
@media (max-width: 860px) {
  .ss-scroll-outer {
    height: auto;
  }

  .ss-sticky-stage {
    position: relative;
    height: auto;
    display: block;
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 1.5rem);
    overflow: visible;
  }

  .ss-stage-inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 100%;
  }

  .ss-copy-panel {
    min-height: auto;
  }

  .ss-copy-block {
    position: relative;
    width: 100%;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    display: none;
  }

  .ss-copy-block[data-slide='0'] {
    display: block;
  }

  .ss-deck-panel {
    justify-content: center;
  }
  .ss-deck-wrap {
    max-width: 100%;
  }
  .ss-deck-hud {
    display: none;
  }

  .ss-deck {
    height: auto;
    aspect-ratio: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .ss-card {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
  }

  .ss-deck .sshowcase-chrome-wrap {
    height: auto;
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.2),
      0 12px 32px rgba(0, 0, 0, 0.45);
  }

  .ss-copy-ghost {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SESSIONS SHOWCASE — iframe-based scroll deck additions
   ═══════════════════════════════════════════════════════════════════ */

/* Add transitions to copy blocks (existing rule sets opacity/transform, this adds the transition) */
.ss-copy-block {
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Widen copy panel min-height to give room for CTA below the text */
.ss-copy-panel {
  min-height: 340px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
}

/* CTA always pinned at bottom of copy panel */
.ss-cta-row {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ss-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: var(--canvas-950, #131314);
  color: #fff;
  border-radius: 9px;
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.15s;
}
.ss-cta-btn:hover {
  opacity: 0.82;
}

.ss-cta-note {
  font-size: 12px;
  color: var(--canvas-500, #9c9680);
  letter-spacing: 0.01em;
}

/* ── Mac-style chrome frame wrapping the screen stack ── */
.ss-chrome-frame {
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.09),
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 14px 36px rgba(0, 0, 0, 0.1),
    0 32px 64px rgba(0, 0, 0, 0.09);
}

.ss-chrome-bar {
  height: 28px;
  background: #e8e8e8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding: 0 12px;
  flex-shrink: 0;
  gap: 0;
}

.ss-chrome-dots-row {
  display: flex;
  gap: 5.5px;
  align-items: center;
  flex-shrink: 0;
}

.ss-chrome-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ss-chrome-url-bar {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10.5px;
  color: rgba(0, 0, 0, 0.38);
  background: rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  padding: 3px 14px;
  margin: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Screen stack: stacked iframes inside chrome ── */
.ss-screen-stack {
  position: relative;
  /* Height = 900 × (600/1440) ≈ 375px */
  height: 375px;
  background: var(--canvas-100, #faf9f0);
  overflow: hidden;
}

.ss-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* First screen visible by default (JS overrides from here) */
.ss-screen[data-slide='0'] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ss-screen iframe {
  width: 1440px;
  height: 900px;
  border: none;
  /* scale = 600/1440 = 0.41667 */
  transform: scale(0.41667);
  transform-origin: top left;
  pointer-events: none;
  display: block;
}

/* Tablet: deck shrinks to 460px, recalculate iframe scale */
@media (max-width: 1100px) and (min-width: 861px) {
  .ss-screen-stack {
    height: 288px;
  } /* 900 × (460/1440) */
  .ss-screen iframe {
    transform: scale(0.31944);
  } /* 460/1440 */
  .ss-chrome-url-bar {
    display: none;
  }
}

/* Mobile: hide chrome frame, use single flat card */
@media (max-width: 860px) {
  .ss-chrome-frame {
    border-radius: 8px;
  }
  .ss-screen-stack {
    height: auto;
    aspect-ratio: 1440 / 900;
  }
  .ss-screen {
    position: relative;
    transform: none !important;
    opacity: 1 !important;
  }
  .ss-screen + .ss-screen {
    display: none;
  }
  .ss-screen iframe {
    transform: scale(1);
    width: 100%;
    height: auto;
  }
  .ss-cta-row {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: 20px;
  }
}

.sshowcase-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(900px, 82vw, 1400px);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ── Header ── */
.sshowcase-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.sshowcase-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra, #d97757);
  margin-bottom: 1.1rem;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}

.sshowcase-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--terra, #d97757);
  opacity: 0.6;
}

.sshowcase-label.ss-visible {
  opacity: 1;
  transform: translateY(0);
}

.sshowcase-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(2rem, 4.5vw + 0.5rem, 4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--canvas-900, #1f1d18);
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease) 0.08s,
    transform 0.6s var(--ease) 0.08s;
}

.sshowcase-title .ss-accent {
  color: var(--terra, #d97757);
}

.sshowcase-title.ss-visible {
  opacity: 1;
  transform: translateY(0);
}

.sshowcase-subtitle {
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: clamp(1rem, 1.5vw + 0.1rem, 1.2rem);
  color: var(--canvas-600, #6f6a56);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.65;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease) 0.16s,
    transform 0.6s var(--ease) 0.16s;
}

.sshowcase-subtitle.ss-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Steps flow ── */
.sshowcase-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
}

/* Each step row: alternating layout */
.ss-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.ss-step.ss-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Odd steps: content left, frame right — already default */
/* Even steps: content right, frame left */
.ss-step:nth-child(even) .ss-step-content {
  order: 2;
}
.ss-step:nth-child(even) .ss-step-frame-wrap {
  order: 1;
}

/* ── Step content (text side) ── */
.ss-step-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ss-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.12);
  border: 1px solid rgba(217, 119, 87, 0.25);
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--terra, #d97757);
  flex-shrink: 0;
}

.ss-step-heading {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(1.35rem, 2.5vw + 0.1rem, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f2f0eb;
  margin: 0;
}

.ss-step-body {
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: clamp(0.9rem, 1.2vw + 0.05rem, 1.05rem);
  color: rgba(178, 174, 166, 0.82);
  line-height: 1.72;
  margin: 0;
}

.ss-step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 4px;
}

.ss-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--canvas-100, #faf9f0);
  border: 1px solid var(--canvas-200, #f0ede2);
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--canvas-700, #504b3c);
  white-space: nowrap;
}

.ss-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra, #d97757);
  flex-shrink: 0;
}

/* ── Frame wrapper (screenshot side) ── */
.ss-step-frame-wrap {
  position: relative;
}

/* macOS browser chrome */
.sshowcase-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #1e1e24;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.ssc-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ssc-r {
  background: #ff5f57;
}
.ssc-y {
  background: #febc2e;
}
.ssc-g {
  background: #28c840;
}

.ssc-title {
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.01em;
  transform: translateX(-17px); /* visually center between dots and edge */
}

/* The screenshot frame itself */
.sshowcase-frame {
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: none;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 32px 64px rgba(0, 0, 0, 0.3);
  transition:
    box-shadow 0.45s var(--ease),
    transform 0.45s var(--ease);
  display: block;
  width: 100%;
}

.sshowcase-chrome-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 32px 64px rgba(0, 0, 0, 0.3);
  transition:
    box-shadow 0.45s var(--ease),
    transform 0.45s var(--ease);
}

.sshowcase-chrome-wrap:hover {
  transform: translateY(-5px) scale(1.005);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.28),
    0 24px 56px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(217, 119, 87, 0.1);
}

.sshowcase-chrome-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Callout annotation bubble ── */
.ss-callout {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(15, 13, 11, 0.92);
  border: 1px solid rgba(217, 119, 87, 0.3);
  border-radius: 10px;
  padding: 9px 13px;
  max-width: 210px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(217, 119, 87, 0.08);
  z-index: 10;
  pointer-events: none;
}

.ss-callout-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(217, 119, 87, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--terra, #d97757);
  font-size: 11px;
}

.ss-callout-text {
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(240, 237, 230, 0.9);
  line-height: 1.45;
}

/* Callout positions per step */
.ss-callout-tr {
  top: -20px;
  right: -16px;
}
.ss-callout-br {
  bottom: -18px;
  right: -14px;
}
.ss-callout-tl {
  top: -20px;
  left: -16px;
}
.ss-callout-bl {
  bottom: -18px;
  left: -14px;
}

/* ── Connector line between steps ── */
.ss-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1px;
  position: relative;
  margin: 0;
}

.ss-connector::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: clamp(3rem, 6vw, 6rem);
  background: linear-gradient(to bottom, rgba(217, 119, 87, 0.35), rgba(217, 119, 87, 0.05));
}

/* ── Bottom CTA strip ── */
.sshowcase-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin-top: clamp(4rem, 7vw, 6.5rem);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s var(--ease) 0.1s,
    transform 0.7s var(--ease) 0.1s;
}

.sshowcase-cta.ss-visible {
  opacity: 1;
  transform: translateY(0);
}

.sshowcase-cta-title {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  color: var(--canvas-900, #1f1d18);
  letter-spacing: -0.018em;
}

.sshowcase-cta-note {
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 13.5px;
  color: var(--canvas-500, #9c9680);
}

.ss-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  background: var(--terra, #d97757);
  color: #fff;
  font-family: var(--font, 'DM Sans', sans-serif);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: 0 4px 18px rgba(217, 119, 87, 0.35);
}

.ss-btn-primary:hover {
  background: #c86843;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(217, 119, 87, 0.45);
}

@media (max-width: 500px) {
  .sessions-showcase {
    padding-top: 3rem;
    padding-bottom: 4rem;
  }
}

/* Tablet deck size for new 600px base */
@media (max-width: 1100px) and (min-width: 861px) {
  .ss-deck-panel {
    flex: 0 0 460px;
    width: 460px;
  }
}
.cdemo-notif.cdemo-notif-in {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════════════════════════════════════════════
   INFINISCALE — Full-spectrum responsive overhaul (landing page)
   Appended — additive only, scoped to specific viewports
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tiny mobile — 375px and below ──────────────────────────────────────── */
@media (max-width: 375px) {
  /* Global safe padding */
  .section-inner,
  .lp-section-inner,
  .hero-inner,
  .footer-inner {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero text */
  .hero-title {
    font-size: clamp(1.7rem, 9vw, 2.2rem) !important;
  }
  .hero-desc {
    font-size: 14px !important;
  }

  /* Pricing grid — single column with safe width */
  .lp-pricing-grid {
    max-width: calc(100vw - 28px) !important;
  }

  /* Features: at 375px auto-fit gives 1 col naturally — but enforce gap */
  .features-grid {
    gap: 12px !important;
  }

  /* Personas: enforce 2 cols even at 375px for short cards */
  .personas-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Security: single column */
  .security-grid {
    max-width: calc(100vw - 28px) !important;
  }

  /* Prevent iOS input zoom on auth forms */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Desktop download buttons — stack vertically */
  .desktop-downloads {
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ── QHD monitors — 1920px ───────────────────────────────────────────────── */
@media (min-width: 1920px) {
  :root {
    font-size: 17px;
  }

  .section-inner,
  .lp-section-inner,
  .hero-inner,
  .footer-inner,
  .nav-inner {
    max-width: clamp(1300px, 75vw, 1600px);
  }

  .proof-quotes {
    max-width: clamp(1000px, 65vw, 1400px);
  }
  .security-grid {
    max-width: clamp(900px, 60vw, 1200px);
  }
  .lp-pricing-grid {
    max-width: clamp(900px, 65vw, 1100px);
  }
}

/* ── QHD — 2560px ────────────────────────────────────────────────────────── */
@media (min-width: 2560px) {
  :root {
    font-size: 18px;
  }

  .section-inner,
  .lp-section-inner,
  .hero-inner,
  .footer-inner,
  .nav-inner {
    max-width: clamp(1400px, 65vw, 1800px);
  }

  .proof-quotes {
    max-width: clamp(1100px, 58vw, 1600px);
  }
  .security-grid {
    max-width: clamp(1000px, 55vw, 1400px);
  }
  .lp-pricing-grid {
    max-width: clamp(1000px, 60vw, 1300px);
  }
  .features-grid {
    gap: 24px;
  }
  .personas-grid {
    gap: 28px;
  }
}

/* ── Ultrawide — 3440px ───────────────────────────────────────────────────── */
@media (min-width: 3440px) {
  :root {
    font-size: 20px;
  }

  .section-inner,
  .lp-section-inner,
  .hero-inner,
  .footer-inner,
  .nav-inner {
    max-width: clamp(1600px, 55vw, 2000px);
  }

  /* Cap grids so cards don't stretch to absurd widths */
  .features-grid {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
  }
  .personas-grid {
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;
  }
  .proof-quotes {
    max-width: 1800px;
  }
  .security-grid {
    max-width: 1600px;
  }
  .lp-pricing-grid {
    max-width: clamp(1200px, 50vw, 1600px);
  }

  /* Extra breathing room */
  .section-inner,
  .lp-section-inner {
    padding-left: clamp(2rem, 6vw, 6rem);
    padding-right: clamp(2rem, 6vw, 6rem);
  }
}

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

/* ══════════════════════════════════════════════════════════════════
   WORKSPACE SELECTOR — Desktop app only, before auth
   ══════════════════════════════════════════════════════════════════ */
#screen-workspace-select {
  position: relative;
  background: #0a0a12;
  min-height: 100vh;
  overflow: hidden;
}
#screen-workspace-select.active {
  display: flex;
  align-items: center;
  justify-content: center;
}
#ws-tri-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.ws-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 40px 20px;
  max-width: 600px;
}
.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.ws-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  animation: wsPulse 2s ease-in-out infinite;
}
@keyframes wsPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.ws-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}
.ws-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 36px 0;
}
.ws-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 32px;
}
.ws-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s;
  font-family: var(--font);
  text-align: center;
  cursor: pointer;
}
.ws-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
.ws-card:active {
  background: rgba(255, 255, 255, 0.1);
}
.ws-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 16px;
}
.ws-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.ws-card-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
}
.ws-footnote {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
  margin: 0;
}