/* ===========================
   WAVIBOY v2, BLUEPRINT EDITION
   Inspired by "The Creator Blueprint" aesthetic
   Dot grid + floating 3D objects + warm cream accents
   =========================== */

/* --- CUSTOM FONTS, Bootzy (display) + Offset (body) --- */
@font-face {
  font-family: 'Bootzy';
  src: url('fonts/BootzyTM.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OffsetTM';
  src: url('fonts/OffsetTM.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- OVERRIDE TOKENS, Blueprint palette --- */
:root {
  --bp-blue: #1E3A8A;
  --bp-blue-light: #2548A8;
  --bp-blue-dark: #152B6B;
  --bp-grid: rgba(255, 255, 255, 0.08);
  --bp-grid-strong: rgba(255, 255, 255, 0.15);
  --bp-cream: #F5F0E8;
  --bp-cream-dark: #E8DFD0;
  --bp-orange: #5B9CF5;
  --bp-orange-light: #7DB3FF;
  --bp-shadow: rgba(0, 0, 0, 0.25);
  --bp-shadow-strong: rgba(0, 0, 0, 0.4);
  --bp-white: #FFFFFF;
  --bp-text-muted: rgba(255, 255, 255, 0.6);

  /* Kill gothic, replace with Baste everywhere */
  --font-gothic: 'Bootzy', sans-serif;
  --font-display: 'Bootzy', sans-serif;

  /* Override core tokens */
  --bg: #1E3A8A;
  --bg-rgb: 30, 58, 138;
  --bg-2: #1A3377;
  --bg-3: #152B6B;
  --white: #FFFFFF;
  --gold: #5B9CF5;
  --accent: #5B9CF5;
  --gray-200: rgba(255, 255, 255, 0.6);
  --gray-300: rgba(255, 255, 255, 0.35);
  --gray-400: rgba(255, 255, 255, 0.2);
  --gray-500: rgba(255, 255, 255, 0.12);
  --gray-600: rgba(255, 255, 255, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --overlay-bg: rgba(30, 58, 138, 0.9);
}

/* --- ALT THEME, Charcoal + Gold (dark luxury) --- */
[data-theme="light"] {
  --bp-orange: #F2C744;
  --bp-orange-light: #F5D56A;
  --bg: #0A0A0A;
  --bg-rgb: 10, 10, 10;
  --bg-2: #222222;
  --bg-3: #2A2A2A;
  --white: #FFFFFF;
  --gold: #F2C744;
  --accent: #F2C744;
  --gray-200: rgba(255, 255, 255, 0.6);
  --gray-300: rgba(255, 255, 255, 0.35);
  --gray-400: rgba(255, 255, 255, 0.2);
  --gray-500: rgba(255, 255, 255, 0.12);
  --gray-600: rgba(255, 255, 255, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.5);
  --overlay-bg: rgba(26, 26, 26, 0.92);
}

/* --- KILL SCANLINES only --- */
.scanlines {
  display: none !important;
}

/* --- LAYER 1: STATIC PAPER GRAIN, tactile printed texture --- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.45;
  background-image: url('grain.png');
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: soft-light;
}

[data-theme="light"] body::before {
  opacity: 0.3;
  mix-blend-mode: soft-light;
}

/* --- LAYER 2: ANIMATED FILM NOISE, living grain on top --- */
.noise {
  display: block !important;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
}

[data-theme="light"] .noise {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* --- BODY, Space Grotesk as default body font (original) --- */
body {
  background: var(--bp-cream);
  font-family: 'Space Grotesk', sans-serif;
}

[data-theme="light"] body {
  background: #0A0A0A;
}

/* ============================================
   ENTRANCE, DOT GRID HERO
   Moleskine-style dots at regular intervals
   ============================================ */
.entrance {
  background:
    radial-gradient(circle, var(--bp-grid-strong) 1px, transparent 1px),
    var(--bp-blue);
  background-size: 24px 24px;
  border: 16px solid var(--bp-cream);
  border-radius: 20px;
  margin: 12px;
  padding-top: 50px;
  height: calc(100vh - 24px);
  box-sizing: border-box;
  width: calc(100% - 24px);
}

[data-theme="light"] .entrance {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    #F2C744;
  background-size: 24px 24px;
  border-color: #0A0A0A;
}

/* Stamps on gold hero → dark instead of gold */
[data-theme="light"] .stamp {
  background: #1A1A1A;
}

/* --- FLOATING ITEMS, 3D Paper cutout style --- */
.float-item {
  position: absolute !important;
  background: var(--bp-cream);
  border: none;
  border-radius: 12px;
  padding: 0;
  box-shadow:
    0 8px 24px var(--bp-shadow),
    0 2px 4px var(--bp-shadow);
  transform-style: preserve-3d;
  overflow: hidden;
}

.float-item:hover {
  box-shadow:
    0 16px 40px var(--bp-shadow-strong),
    0 4px 8px var(--bp-shadow);
  filter: brightness(1.05);
}

.float-photo {
  filter: none;
  border-radius: 12px;
}

[data-theme="light"] .float-photo {
  filter: none;
}

.float-caption {
  display: none;
}

.float-ai-badge {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 4px;
  font-size: 7px;
  font-weight: 600;
  padding: 3px 8px;
  top: 8px;
  right: 8px;
}

/* --- CHROME SHAPES, bigger, more visible, 3D feel --- */
.chrome-back {
  filter: brightness(1) contrast(1) saturate(0.8) drop-shadow(0 8px 16px rgba(0,0,0,0.3));
}

.chrome-front {
  filter: brightness(1.1) contrast(1) drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}

[data-theme="light"] .chrome-back {
  filter: brightness(1) contrast(1) saturate(0.7) drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}
[data-theme="light"] .chrome-front {
  filter: brightness(1.05) contrast(1) drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}

/* --- ENTRANCE CENTER, Bold, white, centered --- */
.entrance-center {
  max-width: 900px;
}

.entrance-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

[data-theme="light"] .entrance-logo {
  filter: invert(1) drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

.entrance-tagline {
  margin-bottom: 20px;
}

.tag-line {
  font-family: 'IBM Plex Mono', monospace;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  letter-spacing: 5px;
}

[data-theme="light"] .tag-line {
  color: rgba(0, 0, 0, 0.5);
}

.entrance-divider {
  background: rgba(255, 255, 255, 0.3);
  width: 80px;
  margin-bottom: 32px;
}

[data-theme="light"] .entrance-divider {
  background: rgba(0, 0, 0, 0.2);
  opacity: 0.5;
}

/* --- HEADLINE, Baste across the board, tight stack, character shadows --- */
.headline-label {
  font-family: 'Bootzy', sans-serif;
  font-size: clamp(22px, 3vw, 42px);
  color: rgba(255, 255, 255, 0.7);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.15);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: -4px !important;
  line-height: 1;
}

[data-theme="light"] .headline-label {
  color: rgba(0, 0, 0, 0.5);
  opacity: 1;
  text-shadow: none;
}

.headline-title {
  font-family: 'Bootzy', sans-serif;
  font-size: clamp(52px, 8vw, 120px);
  color: #FFFFFF;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.25),
    0 4px 16px rgba(0,0,0,0.2);
  letter-spacing: 0.02em;
  line-height: 0.88;
  margin-bottom: -2px !important;
}

[data-theme="light"] .headline-title {
  color: #1A1A1A;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.04);
}

.headline-anchor {
  font-family: 'Bootzy', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 4px;
  font-size: clamp(20px, 2.5vw, 36px);
  font-weight: 500;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(0,0,0,0.3),
    0 2px 8px rgba(0,0,0,0.15);
  margin-bottom: 0 !important;
}

[data-theme="light"] .headline-anchor {
  color: rgba(0, 0, 0, 0.7);
  text-shadow: none;
}

.headline-sub {
  font-family: 'IBM Plex Mono', monospace;
  color: #FFFFFF;
  font-size: clamp(14px, 2vw, 22px);
  font-weight: 400;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
  line-height: 1.6;
  letter-spacing: 0;
  margin-top: 16px !important;
}

[data-theme="light"] .headline-sub {
  color: #1A1A1A;
  text-shadow: none;
}

/* --- HIGHLIGHTED WORDS, Baste font + yellow bg highlight --- */
.hl-grain {
  font-family: 'Bootzy', sans-serif;
  color: #1A1A1A;
  background: var(--bp-orange);
  padding: 2px 8px;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hl-grain::before {
  display: none;
}

[data-theme="light"] .hl-grain {
  color: var(--bp-orange);
  background: #1A1A1A;
}

/* --- SPECIFICS PILLS, cleaner blueprint style --- */
.entrance-specifics > span:not(.spec-dot) {
  font-family: 'IBM Plex Mono', monospace;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: 8px;
  padding: 5px 12px;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .entrance-specifics > span:not(.spec-dot) {
  color: rgba(0, 0, 0, 0.6);
  border-color: rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.05);
}

/* --- SOCIAL PROOF, stars + student count (sits below CTA) --- */
.entrance-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(20px);
  margin-top: 4px;
}

.proof-stars {
  font-size: 10px;
  color: var(--bp-orange);
  letter-spacing: 1px;
}

.proof-text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .proof-text {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .proof-stars {
  color: #1A1A1A;
}

/* --- CTA BUTTON, blue, bold, rounded --- */
.entrance-cta {
  background: var(--bp-orange);
  color: #FFFFFF;
  border: 2px solid var(--bp-orange);
  border-radius: 50px;
  padding: 14px 36px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(91, 156, 245, 0.3);
  transition: all 0.3s ease;
}

.entrance-cta:hover {
  background: #FFFFFF;
  color: var(--bp-blue);
  border-color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

[data-theme="light"] .entrance-cta {
  background: #1A1A1A;
  color: var(--bp-orange);
  border-color: #1A1A1A;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .entrance-cta:hover {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* --- CORNER MARKS, softer for blueprint --- */
.corner-mark {
  color: rgba(255, 255, 255, 0.15);
  font-size: 20px;
}

[data-theme="light"] .corner-mark {
  color: rgba(0, 0, 0, 0.1);
}

/* --- EDGE LABELS --- */
.edge-label {
  color: rgba(255, 255, 255, 0.25);
}

[data-theme="light"] .edge-label {
  color: rgba(0, 0, 0, 0.15);
}

/* --- SECRET MESSAGE --- */
.secret-text {
  color: var(--bp-orange);
}

/* --- FOUNDING BAR, light blue, rounded --- */
.founding-bar {
  background: var(--bp-orange);
  border-radius: 12px;
  margin: 12px 28px 0;
  left: 0;
  right: 0;
  width: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.founding-text {
  color: #FFFFFF;
}

.founding-login {
  color: rgba(255, 255, 255, 0.6);
}

/* --- THEME TOGGLE, inside founding bar (light blue bg) --- */
.theme-toggle {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

[data-theme="light"] .theme-toggle {
  border-color: rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}

/* --- STICKY NAV, dark pill bar --- */
.sticky-nav {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}

[data-theme="light"] .sticky-nav {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-link {
  color: rgba(255, 255, 255, 0.6);
}

.nav-link:hover,
.nav-link.nav-active {
  color: var(--bp-blue-light);
}

[data-theme="light"] .nav-link {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.nav-active {
  color: var(--bp-blue-light);
}

.sticky-nav-cta {
  background: var(--bp-blue);
  color: #FFFFFF;
}

.sticky-nav-cta:hover {
  background: var(--bp-blue-light);
  color: #FFFFFF;
}

[data-theme="light"] .sticky-nav-cta {
  background: var(--bp-blue);
  color: #FFFFFF;
}

/* --- TOP WIDGETS (What's New + Recent Jobs) --- */
.top-widgets {
  top: 51px !important;
}

/* Cream theme, both toggles */
.whats-new-toggle,
.recent-jobs-toggle {
  background: #FFFFFF;
  border: 1px solid var(--bp-blue);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 6px 14px;
}
.whats-new-toggle:hover,
.recent-jobs-toggle:hover {
  border-color: var(--bp-blue);
  background: #F8F8F8;
}
.whats-new-label,
.recent-jobs-label {
  color: var(--bp-blue);
  font-size: 8px;
}
.whats-new-dot {
  background: var(--bp-blue);
}

/* Cream theme, jobs panel */
.recent-jobs-panel {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.recent-jobs-heading {
  color: var(--bp-blue);
}
.recent-jobs-list li {
  color: #1A1A1A;
}
.recent-jobs-footer {
  color: rgba(0, 0, 0, 0.4);
}

/* Dark theme, both toggles */
[data-theme="light"] .whats-new-toggle,
[data-theme="light"] .recent-jobs-toggle {
  background: #222222;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: none;
}
[data-theme="light"] .whats-new-label,
[data-theme="light"] .recent-jobs-label {
  color: var(--bp-orange);
}

/* Dark theme, jobs panel */
[data-theme="light"] .recent-jobs-panel {
  background: #1A1A1A;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .recent-jobs-heading {
  color: var(--bp-orange);
}
[data-theme="light"] .recent-jobs-list li {
  color: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .recent-jobs-footer {
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   SALES PAGE, Blueprint-flavored sections
   ============================================ */

/* Base sales page background, cream to match body */
.sales-page {
  background: var(--bp-cream);
}

[data-theme="light"] .sales-page {
  background: #0A0A0A;
}

/* Blue sections, content-heavy showcase & proof sections */
.section-portfolio-desk,
.section-pain,
.section-voices,
.section-results,
.section-roadmap,
.section-demand,
.section-stack,
.section-final-cta {
  background: var(--bp-blue);
  border-radius: 20px;
  margin: 0 12px;
}

/* Cream sections, explicit override for sections that stay cream */
.section-logos,
.section-vsl,
.section-qualify,
.section-studio,
.section-testimonials,
.section-who,
.section-bridge,
.section-guarantee,
.section-pricing,
.section-faq {
  background: var(--bp-cream);
  color: #1A1A1A;
}

/* ── ALT THEME (gold), blue sections become gold on dark body ── */
[data-theme="light"] .section-portfolio-desk,
[data-theme="light"] .section-pain,
[data-theme="light"] .section-voices,
[data-theme="light"] .section-results,
[data-theme="light"] .section-roadmap,
[data-theme="light"] .section-demand,
[data-theme="light"] .section-stack,
[data-theme="light"] .section-final-cta {
  background: #F2C744;
  border-radius: 20px;
  margin: 0 12px;
  color: #1A1A1A;
}

[data-theme="light"] .section-logos,
[data-theme="light"] .section-vsl,
[data-theme="light"] .section-qualify,
[data-theme="light"] .section-studio,
[data-theme="light"] .section-testimonials,
[data-theme="light"] .section-who,
[data-theme="light"] .section-bridge,
[data-theme="light"] .section-guarantee,
[data-theme="light"] .section-pricing,
[data-theme="light"] .section-faq {
  background: #222222;
  color: #FFFFFF;
  border-radius: 20px;
  margin: 0 12px;
}

/* ── ALT THEME, gold sections: override ALL tokens for dark-on-gold ── */
[data-theme="light"] .section-portfolio-desk,
[data-theme="light"] .section-pain,
[data-theme="light"] .section-voices,
[data-theme="light"] .section-results,
[data-theme="light"] .section-roadmap,
[data-theme="light"] .section-demand,
[data-theme="light"] .section-stack,
[data-theme="light"] .section-final-cta {
  --white: #1A1A1A;
  --gold: #1A1A1A;
  --accent: #1A1A1A;
  --bp-orange: #1A1A1A;
  --bg: #F2C744;
  --bg-2: #E8B93D;
  --bg-3: #D4A82E;
  --gray-200: rgba(0, 0, 0, 0.5);
  --gray-300: rgba(0, 0, 0, 0.35);
  --gray-400: rgba(0, 0, 0, 0.2);
  --gray-500: rgba(0, 0, 0, 0.12);
  --gray-600: rgba(0, 0, 0, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.15);
}

/* Eyebrows on gold sections → dark */
[data-theme="light"] .section-portfolio-desk .portfolio-eyebrow,
[data-theme="light"] .section-pain .pain-eyebrow,
[data-theme="light"] .section-voices .voices-eyebrow,
[data-theme="light"] .section-results .results-eyebrow,
[data-theme="light"] .section-roadmap .roadmap-eyebrow,
[data-theme="light"] .section-demand .demand-eyebrow,
[data-theme="light"] .section-stack .stack-eyebrow,
[data-theme="light"] .section-pricing .pricing-eyebrow {
  color: rgba(0, 0, 0, 0.6);
}

/* Headlines on gold sections → dark */
[data-theme="light"] .section-portfolio-desk .portfolio-headline,
[data-theme="light"] .section-pain .pain-headline,
[data-theme="light"] .section-voices .voices-headline,
[data-theme="light"] .section-results .results-headline,
[data-theme="light"] .section-roadmap .roadmap-headline,
[data-theme="light"] .section-demand .demand-headline,
[data-theme="light"] .section-stack .stack-headline,
[data-theme="light"] .section-final-cta .final-cta-headline {
  color: #1A1A1A;
}

/* Headline em accents on gold → dark */
[data-theme="light"] .section-portfolio-desk .portfolio-headline em,
[data-theme="light"] .section-pain .pain-headline .pain-keyword,
[data-theme="light"] .section-voices .voices-headline em,
[data-theme="light"] .section-results .results-headline em,
[data-theme="light"] .section-roadmap .roadmap-headline em,
[data-theme="light"] .section-demand .demand-headline em,
[data-theme="light"] .section-stack .stack-headline em,
[data-theme="light"] .section-roadmap .cert-title em {
  color: #1A1A1A;
}

/* Body text on gold → dark gray */
[data-theme="light"] .section-pain .pain-detail,
[data-theme="light"] .section-pain .pain-statement,
[data-theme="light"] .section-pain .pain-accent .pain-word,
[data-theme="light"] .section-stack .stack-sub,
[data-theme="light"] .section-stack .stack-sub-intro,
[data-theme="light"] .section-final-cta .final-cta-sub,
[data-theme="light"] .section-demand .demand-callout p,
[data-theme="light"] .section-roadmap .roadmap-eyebrow {
  color: rgba(0, 0, 0, 0.7);
}

/* Value bridge on gold → dark */
[data-theme="light"] .value-bridge-text {
  color: #1A1A1A;
}
[data-theme="light"] .value-bridge-eyebrow {
  color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .value-bridge-num {
  color: #1A1A1A;
}
[data-theme="light"] .value-bridge-eyebrow .vb-stat {
  color: #1A1A1A;
}

/* Cards on gold sections → dark bg */
[data-theme="light"] .pain-card {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .value-bridge-card {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .stack-card {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Stack value tags on gold → dark bg, gold text (hardcoded, scoped token is dark) */
[data-theme="light"] .stack-value-tag,
[data-theme="light"] .stack-bonus-value-tag {
  background: #1A1A1A;
  color: #F2C744;
}
[data-theme="light"] .stack-bonus-accent {
  background: #1A1A1A;
}

/* Stack footer on gold */
[data-theme="light"] .stack-footer {
  border-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .stack-value-label {
  color: #1A1A1A;
}
[data-theme="light"] .stack-value-actual {
  color: #1A1A1A;
}
[data-theme="light"] .stack-value-strike s {
  text-decoration-color: #1A1A1A;
}
[data-theme="light"] .stack-sub-intro-accent {
  color: #1A1A1A;
}

/* Roadmap on gold → dark accents */
[data-theme="light"] .timeline-progress {
  background: #1A1A1A;
}
[data-theme="light"] .timeline-node.active .node-num,
[data-theme="light"] .timeline-node:hover .node-num {
  color: #1A1A1A;
}
[data-theme="light"] .roadmap-cert {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .panel-list li {
  background: rgba(26, 26, 26, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  color: #E8E3D5;
}
[data-theme="light"] .panel-subtitle {
  color: #1A1A1A;
}
[data-theme="light"] .panel-list li::before {
  background: #FACC15;
}
[data-theme="light"] .panel-list li strong {
  color: #FACC15;
}

/* Final CTA on gold → dark button, gold text (hardcoded, scoped token is dark) */
[data-theme="light"] .final-cta-btn {
  background: #1A1A1A;
  color: #F2C744;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
[data-theme="light"] .final-cta-btn:hover {
  background: #000000;
  color: #F2C744;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .final-cta-amount {
  color: #1A1A1A;
}

/* Showcase name on gold */
[data-theme="light"] .showcase-name {
  color: #1A1A1A;
}

/* Desk caption on gold → dark bg, gold text (hardcoded, scoped token is dark) */
[data-theme="light"] .desk-caption {
  background: #1A1A1A;
  color: #F2C744;
}

/* ── CREAM SECTION TEXT COLORS ──
   Rule: No yellow/orange text on cream. No black text on blue.
   Eyebrows on cream → blue. Headlines on cream → dark. Body on cream → dark gray. */

/* Eyebrows on cream → blue instead of orange */
.section-logos .logos-label,
.section-qualify .qualify-eyebrow,
.section-qualify .receipt-gate-eyebrow,
.section-vsl .vsl-eyebrow,
.section-studio .studio-eyebrow,
.section-testimonials .testimonials-eyebrow,
.section-who .who-eyebrow,
.section-bridge .bridge-dim,
.section-guarantee .guarantee-divider,
.section-pricing .pricing-eyebrow,
.section-faq .faq-eyebrow {
  color: var(--bp-blue);
}

/* Accent text on cream → blue instead of orange */
.section-qualify .qualify-accent,
.section-vsl .vsl-headline em,
.section-studio .studio-headline em,
.section-testimonials .testimonials-headline em,
.section-who .who-pullquote,
.section-who .who-stat-num,
.section-bridge .bridge-statement em,
.section-guarantee .guarantee-headline,
.section-pricing .pricing-headline em,
.section-pricing .pricing-card-badge,
.section-faq .faq-headline em {
  color: var(--bp-blue);
}

/* Headlines on cream → dark */
.section-qualify .receipt-gate-line,
.section-qualify .qualify-headline,
.section-vsl .vsl-headline,
.section-studio .studio-headline,
.section-testimonials .testimonials-headline,
.section-who .who-headline,
.section-bridge .bridge-statement,
.section-guarantee .guarantee-headline,
.section-pricing .pricing-headline,
.section-faq .faq-headline,
.section-faq .faq-item summary {
  color: #1A1A1A;
}

/* Body text on cream → dark gray */
.section-logos .logos-label,
.section-qualify .qualify-principle-body,
.section-vsl .vsl-eyebrow,
.section-studio .studio-sub,
.section-studio .studio-card-text,
.section-testimonials .testimonials-eyebrow,
.section-who .who-body p,
.section-bridge .bridge-dim,
.section-guarantee .guarantee-sub,
.section-guarantee .guarantee-confidence,
.section-pricing .pricing-sub,
.section-pricing .pricing-card-term,
.section-pricing .pricing-footnote,
.section-pricing .pricing-card-positioning,
.section-pricing .pricing-card-features li,
.section-pricing .pricing-perk-card-title,
.section-pricing .pricing-perk-card-desc,
.section-pricing .pricing-team-box-title,
.section-pricing .pricing-team-box-sub,
.section-pricing .pricing-team-box-features li,
.section-pricing .pricing-perks-sublabel,
.section-faq .faq-item p {
  color: #444444;
}

/* Cards & list items on cream → dark text */
.section-qualify .qualify-principle-title,
.section-studio .studio-card,
.section-studio .studio-card-text,
.section-pricing .pricing-card,
.section-pricing .pricing-perk-card {
  color: #1A1A1A;
}

/* ── ALT THEME, cream section text overrides (charcoal+gold) ── */
/* Eyebrows on dark → gold instead of blue */
[data-theme="light"] .section-logos .logos-label,
[data-theme="light"] .section-qualify .qualify-eyebrow,
[data-theme="light"] .section-qualify .receipt-gate-eyebrow,
[data-theme="light"] .section-vsl .vsl-eyebrow,
[data-theme="light"] .section-studio .studio-eyebrow,
[data-theme="light"] .section-testimonials .testimonials-eyebrow,
[data-theme="light"] .section-who .who-eyebrow,
[data-theme="light"] .section-bridge .bridge-dim,
[data-theme="light"] .section-guarantee .guarantee-divider,
[data-theme="light"] .section-pricing .pricing-eyebrow,
[data-theme="light"] .section-faq .faq-eyebrow {
  color: var(--bp-orange);
}

/* Accent text on dark → gold instead of blue */
[data-theme="light"] .section-qualify .qualify-accent,
[data-theme="light"] .section-vsl .vsl-headline em,
[data-theme="light"] .section-studio .studio-headline em,
[data-theme="light"] .section-testimonials .testimonials-headline em,
[data-theme="light"] .section-who .who-pullquote,
[data-theme="light"] .section-who .who-stat-num,
[data-theme="light"] .section-bridge .bridge-statement em,
[data-theme="light"] .section-guarantee .guarantee-headline,
[data-theme="light"] .section-pricing .pricing-headline em,
[data-theme="light"] .section-pricing .pricing-card-badge,
[data-theme="light"] .section-faq .faq-headline em {
  color: var(--bp-orange);
}

/* Headlines on dark → white instead of dark */
[data-theme="light"] .section-qualify .receipt-gate-line,
[data-theme="light"] .section-qualify .qualify-headline,
[data-theme="light"] .section-vsl .vsl-headline,
[data-theme="light"] .section-studio .studio-headline,
[data-theme="light"] .section-testimonials .testimonials-headline,
[data-theme="light"] .section-who .who-headline,
[data-theme="light"] .section-bridge .bridge-statement,
[data-theme="light"] .section-guarantee .guarantee-headline,
[data-theme="light"] .section-pricing .pricing-headline,
[data-theme="light"] .section-faq .faq-headline,
[data-theme="light"] .section-faq .faq-item summary {
  color: #FFFFFF;
}

/* Body text on dark → light gray instead of dark gray */
[data-theme="light"] .section-logos .logos-label,
[data-theme="light"] .section-qualify .qualify-principle-body,
[data-theme="light"] .section-vsl .vsl-eyebrow,
[data-theme="light"] .section-studio .studio-sub,
[data-theme="light"] .section-studio .studio-card-text,
[data-theme="light"] .section-testimonials .testimonials-eyebrow,
[data-theme="light"] .section-who .who-body p,
[data-theme="light"] .section-bridge .bridge-dim,
[data-theme="light"] .section-guarantee .guarantee-sub,
[data-theme="light"] .section-guarantee .guarantee-confidence,
[data-theme="light"] .section-pricing .pricing-sub,
[data-theme="light"] .section-pricing .pricing-card-term,
[data-theme="light"] .section-pricing .pricing-footnote,
[data-theme="light"] .section-pricing .pricing-card-positioning,
[data-theme="light"] .section-pricing .pricing-card-features li,
[data-theme="light"] .section-pricing .pricing-perk-card-title,
[data-theme="light"] .section-pricing .pricing-perk-card-desc,
[data-theme="light"] .section-pricing .pricing-team-box-title,
[data-theme="light"] .section-pricing .pricing-team-box-sub,
[data-theme="light"] .section-pricing .pricing-team-box-features li,
[data-theme="light"] .section-pricing .pricing-perks-sublabel,
[data-theme="light"] .section-faq .faq-item p {
  color: rgba(255, 255, 255, 0.7);
}

/* Cards & list items on dark → white text */
[data-theme="light"] .section-qualify .qualify-principle-title,
[data-theme="light"] .section-studio .studio-card,
[data-theme="light"] .section-studio .studio-card-text,
[data-theme="light"] .section-pricing .pricing-card,
[data-theme="light"] .section-pricing .pricing-perk-card {
  color: #FFFFFF;
}

/* Pricing card prices on cream */
.section-pricing .pricing-card-price {
  color: #1A1A1A;
}

.section-pricing .pricing-card-strike {
  color: #999999;
}

.section-pricing .pricing-card-tier {
  color: #1A1A1A;
}

/* Pricing card badge, blue bg on cream */
.section-pricing .pricing-card-badge {
  background: var(--bp-blue);
  color: #FFFFFF;
}

/* Pricing perk card numbers on cream → blue */
.section-pricing .pricing-perk-card-num {
  color: var(--bp-blue);
}

/* Value tags stay orange (works on cream as small accent) */
.section-pricing .pricing-card-cta--featured {
  background: var(--bp-blue);
  color: #FFFFFF;
}

.section-pricing .pricing-card-cta--featured:hover {
  background: var(--bp-blue-dark);
}

/* Featured card border → blue */
.section-pricing .pricing-card--featured {
  border-color: var(--bp-blue);
}

/* Scarcity dot on cream → blue */
.section-pricing .pricing-card-tag--scarcity .pricing-card-tag-dot {
  background: var(--bp-blue);
}

/* Pricing tick marks → blue on cream */
.section-pricing .pricing-card-features li::before {
  color: var(--bp-blue);
}

.section-pricing .pricing-card-features li.pricing-feature-plus::before {
  color: var(--bp-blue);
}

/* Pricing card borders → blue on cream */
.section-pricing .pricing-card {
  border-color: var(--bp-blue);
}

/* Pricing card dividers → blue tint on cream */
.section-pricing .pricing-card-divider {
  background: rgba(30, 58, 138, 0.15);
}

/* Content tag boxes (65+ hours etc) → yellow bg, blue text */
.section-pricing .pricing-card-tag {
  background: var(--bp-orange);
  color: var(--bp-blue);
}

/* Scarcity tag → also yellow bg blue text */
.section-pricing .pricing-card-tag--scarcity {
  background: var(--bp-orange);
  color: var(--bp-blue);
}

/* Featured card box-shadow → blue (was gold via entrance.css) */
.section-pricing .pricing-card--featured {
  box-shadow: 0 0 0 1px var(--bp-blue), 0 8px 32px rgba(0,0,0,0.12);
}

/* Go Pro button on cream → solid blue bg */
.section-pricing .pricing-card-cta {
  border-color: var(--bp-blue);
  color: #FFFFFF;
  background: var(--bp-blue);
}

.section-pricing .pricing-card-cta:hover {
  background: var(--bp-blue-dark);
  color: #FFFFFF;
  border-color: var(--bp-blue-dark);
}

/* Pricing card positioning text on cream */
.section-pricing .pricing-card-positioning {
  color: #666666;
}

/* Team box on cream, needs cream-appropriate colors */
.section-pricing .pricing-team-box-inner {
  background: var(--bp-blue);
  border-color: var(--bp-blue);
  color: #FFFFFF;
}

.section-pricing .pricing-team-box-title {
  color: #FFFFFF;
}

.section-pricing .pricing-team-box-sub {
  color: rgba(255, 255, 255, 0.7);
}

.section-pricing .pricing-team-box-features li {
  color: rgba(255, 255, 255, 0.85);
}

/* Team box ticks → yellow on blue bg (readable) */
.section-pricing .pricing-team-box-features li::before {
  color: var(--bp-orange);
}

/* Team box CTA → solid white on blue bg */
.section-pricing .pricing-team-box-cta {
  background: #FFFFFF;
  color: var(--bp-blue);
  border: 1px solid #FFFFFF;
}

.section-pricing .pricing-team-box-cta:hover {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-color: var(--bp-orange);
}

/* Who section body em → blue (cream bg) */
.section-who .who-body em {
  color: var(--bp-blue);
}

/* Who section pullquote border */
.section-who .who-pullquote {
  border-left-color: var(--bp-blue);
}

/* Guarantee divider → blue */
.section-guarantee .guarantee-divider {
  background: var(--bp-blue);
}

/* Guarantee image, smaller, centered vertically */
.guarantee-image {
  max-width: 240px;
}

.guarantee-layout {
  align-items: center;
}

/* Mid CTA buttons on cream → blue border & text */
.section-vsl .mid-cta-btn,
.section-testimonials .mid-cta-btn,
.section-who .mid-cta-btn {
  color: #FFFFFF;
  background: var(--bp-blue);
  border-color: var(--bp-blue);
}

.section-vsl .mid-cta-btn:hover,
.section-testimonials .mid-cta-btn:hover,
.section-who .mid-cta-btn:hover {
  background: var(--bp-blue-dark);
  color: #FFFFFF;
}

/* Cream section cards, dark borders */
.section-studio .studio-card,
.section-pricing .pricing-card,
.section-pricing .pricing-perk-card {
  border-color: rgba(30, 58, 138, 0.1);
  background: rgba(30, 58, 138, 0.03);
}

/* Qualify principle border → blue on cream */
.section-qualify .qualify-principle {
  border-left-color: var(--bp-blue);
}

/* Qualify principle title → dark on cream */
.section-qualify .qualify-principle-title {
  color: #1A1A1A;
}

/* Qualify principle body → dark gray on cream */
.section-qualify .qualify-principle-body {
  color: #444444;
  opacity: 1;
}

/* Receipt on cream/blue theme → blue receipt, white text */
.section-qualify .receipt-body {
  background: var(--bp-blue);
}

.section-qualify .receipt-torn-top::after,
.section-qualify .receipt-torn-bottom::before {
  background: var(--bp-blue);
}

.section-qualify .receipt-header {
  color: #FFFFFF;
}

.section-qualify .receipt-intro {
  color: rgba(255, 255, 255, 0.7);
}

.section-qualify .receipt-divider {
  border-top-color: rgba(255, 255, 255, 0.2);
}

.section-qualify .receipt-num {
  color: rgba(255, 255, 255, 0.4);
}

.section-qualify .receipt-principle-title {
  color: #FFFFFF;
}

.section-qualify .receipt-principle-body {
  color: rgba(255, 255, 255, 0.6);
}

.section-qualify .receipt-tick-box {
  border-color: #FFFFFF;
}

.section-qualify .receipt-tick:checked + .receipt-tick-box {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.section-qualify .receipt-tick:checked + .receipt-tick-box::after {
  border-color: var(--bp-blue);
}

.section-qualify .receipt-label {
  color: #FFFFFF;
}

.section-qualify .receipt-body::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.03) 3px,
    rgba(255, 255, 255, 0.03) 4px
  );
}

/* Cream section logo images */
.section-logos .logo-img {
  filter: none;
  opacity: 0.4;
}

/* Stamp on cream → blue */
.section-logos .logos-note {
  color: var(--bp-blue);
  border-color: var(--bp-blue);
}

/* ── ALT THEME, cream section element overrides (charcoal+gold) ── */

/* Pricing prices/tiers → white */
[data-theme="light"] .section-pricing .pricing-card-price {
  color: #FFFFFF;
}
[data-theme="light"] .section-pricing .pricing-card-tier {
  color: #FFFFFF;
}
[data-theme="light"] .section-pricing .pricing-card-strike {
  color: rgba(255, 255, 255, 0.4);
}

/* Pricing card badge → gold bg, dark text (luxury) */
[data-theme="light"] .section-pricing .pricing-card-badge {
  background: var(--bp-orange);
  color: #1A1A1A;
}

/* Pricing perk card numbers → gold */
[data-theme="light"] .section-pricing .pricing-perk-card-num {
  color: var(--bp-orange);
}

/* Featured CTA → gold bg, dark text */
[data-theme="light"] .section-pricing .pricing-card-cta--featured {
  background: var(--bp-orange);
  color: #1A1A1A;
}
[data-theme="light"] .section-pricing .pricing-card-cta--featured:hover {
  background: #D4AD2E;
}

/* Featured card border → gold */
[data-theme="light"] .section-pricing .pricing-card--featured {
  border-color: var(--bp-orange);
  box-shadow: 0 0 0 1px var(--bp-orange), 0 8px 32px rgba(0,0,0,0.3);
}

/* Scarcity dot → red, pulses */
[data-theme="light"] .section-pricing .pricing-card-tag--scarcity .pricing-card-tag-dot {
  background: #E53E3E;
}

/* "Which one is right for you?" compare block (light theme = dark on yellow) */
[data-theme="light"] .pricing-compare {
  background: rgba(26, 26, 26, 0.92);
  border-color: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .pricing-compare-headline {
  color: #FFFFFF;
}
[data-theme="light"] .pricing-compare-col {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .pricing-compare-label {
  color: #E8E3D5;
}
[data-theme="light"] .pricing-compare-label strong {
  color: #FACC15;
}
[data-theme="light"] .pricing-compare-list li {
  color: #E8E3D5;
  border-top-color: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .pricing-compare-list li::before {
  background: #FACC15;
}
[data-theme="light"] .pricing-compare-frame {
  color: #FFFFFF;
}
[data-theme="light"] .pricing-compare-frame strong {
  color: #FACC15;
}
[data-theme="light"] .pricing-card-price-suffix {
  color: rgba(255, 255, 255, 0.7);
}

/* Job Board feature (light theme) — dark card on yellow */
[data-theme="light"] .jobboard-feature {
  background: rgba(26, 26, 26, 0.92);
  border-color: rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .jobboard-img + .jobboard-img {
  border-top-color: rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .jobboard-title {
  color: #FFFFFF;
}
[data-theme="light"] .jobboard-body,
[data-theme="light"] .jobboard-list li {
  color: #E8E3D5;
}
[data-theme="light"] .jobboard-eyebrow,
[data-theme="light"] .jobboard-list li::before {
  color: #FACC15;
  background: #FACC15;
}
[data-theme="light"] .jobboard-eyebrow {
  background: transparent;
}

/* Tick marks → gold */
[data-theme="light"] .section-pricing .pricing-card-features li::before {
  color: var(--bp-orange);
}
[data-theme="light"] .section-pricing .pricing-card-features li.pricing-feature-plus::before {
  color: var(--bp-orange);
}

/* Card borders → subtle white */
[data-theme="light"] .section-pricing .pricing-card {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Pricing card dividers → subtle white */
[data-theme="light"] .section-pricing .pricing-card-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* Tag boxes → gold bg, dark text (same as default) */
[data-theme="light"] .section-pricing .pricing-card-tag {
  background: var(--bp-orange);
  color: #1A1A1A;
}
[data-theme="light"] .section-pricing .pricing-card-tag--scarcity {
  background: var(--bp-orange);
  color: #1A1A1A;
}

/* Go Pro CTA → gold */
[data-theme="light"] .section-pricing .pricing-card-cta {
  border-color: var(--bp-orange);
  color: #1A1A1A;
  background: var(--bp-orange);
}
[data-theme="light"] .section-pricing .pricing-card-cta:hover {
  background: #D4AD2E;
  color: #1A1A1A;
  border-color: #D4AD2E;
}

/* Positioning text → muted white */
[data-theme="light"] .section-pricing .pricing-card-positioning {
  color: rgba(255, 255, 255, 0.5);
}

/* Who section body em → gold */
[data-theme="light"] .section-who .who-body em {
  color: var(--bp-orange);
}

/* Who pullquote border → gold */
[data-theme="light"] .section-who .who-pullquote {
  border-left-color: var(--bp-orange);
}

/* Who stat num → gold */
[data-theme="light"] .section-who .who-stat-num {
  color: var(--bp-orange);
}

/* Who stats border → subtle white */
[data-theme="light"] .section-who .who-stats {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Who stat label → muted white */
[data-theme="light"] .section-who .who-stat-label {
  color: rgba(255, 255, 255, 0.5);
}

/* Guarantee divider → gold */
[data-theme="light"] .section-guarantee .guarantee-divider {
  background: var(--bp-orange);
}

/* Mid CTA buttons on dark sections → gold bg, dark text */
[data-theme="light"] .section-vsl .mid-cta-btn,
[data-theme="light"] .section-testimonials .mid-cta-btn,
[data-theme="light"] .section-who .mid-cta-btn {
  color: #1A1A1A;
  background: var(--bp-orange);
  border-color: var(--bp-orange);
}
[data-theme="light"] .section-vsl .mid-cta-btn:hover,
[data-theme="light"] .section-testimonials .mid-cta-btn:hover,
[data-theme="light"] .section-who .mid-cta-btn:hover {
  background: #D4AD2E;
  color: #1A1A1A;
}

/* Mid CTA buttons on gold sections → dark bg, gold text (hardcoded, scoped token is dark) */
[data-theme="light"] .section-results .mid-cta-btn,
[data-theme="light"] .section-demand .mid-cta-btn,
[data-theme="light"] .section-portfolio-desk .mid-cta-btn,
[data-theme="light"] .section-pain .mid-cta-btn,
[data-theme="light"] .section-voices .mid-cta-btn,
[data-theme="light"] .section-roadmap .mid-cta-btn,
[data-theme="light"] .section-stack .mid-cta-btn,
[data-theme="light"] .section-final-cta .mid-cta-btn {
  background: #1A1A1A;
  color: #F2C744;
  border-color: #1A1A1A;
}
[data-theme="light"] .section-results .mid-cta-btn:hover,
[data-theme="light"] .section-demand .mid-cta-btn:hover,
[data-theme="light"] .section-portfolio-desk .mid-cta-btn:hover,
[data-theme="light"] .section-pain .mid-cta-btn:hover,
[data-theme="light"] .section-voices .mid-cta-btn:hover,
[data-theme="light"] .section-roadmap .mid-cta-btn:hover,
[data-theme="light"] .section-stack .mid-cta-btn:hover,
[data-theme="light"] .section-final-cta .mid-cta-btn:hover {
  background: #000000;
  color: #F2C744;
}

/* Cream section cards → dark bg with subtle white border */
[data-theme="light"] .section-studio .studio-card,
[data-theme="light"] .section-pricing .pricing-card,
[data-theme="light"] .section-pricing .pricing-perk-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

/* Qualify principle border → gold on dark */
[data-theme="light"] .section-qualify .qualify-principle {
  border-left-color: var(--bp-orange);
}

/* Qualify principle title → white on dark */
[data-theme="light"] .section-qualify .qualify-principle-title {
  color: #FFFFFF;
}

/* Qualify principle body → muted white on dark */
[data-theme="light"] .section-qualify .qualify-principle-body {
  color: rgba(255, 255, 255, 0.7);
}

/* Receipt on dark → warm paper, gold accents */
[data-theme="light"] .section-qualify .receipt-body {
  background: #2A2520;
}

[data-theme="light"] .section-qualify .receipt-torn-top::after,
[data-theme="light"] .section-qualify .receipt-torn-bottom::before {
  background: #2A2520;
}

[data-theme="light"] .section-qualify .receipt-header {
  color: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .section-qualify .receipt-intro {
  color: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] .section-qualify .receipt-divider {
  border-top-color: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .section-qualify .receipt-num {
  color: var(--bp-orange);
}

[data-theme="light"] .section-qualify .receipt-principle-title {
  color: #FFFFFF;
}

[data-theme="light"] .section-qualify .receipt-principle-body {
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .section-qualify .receipt-tick-box {
  border-color: var(--bp-orange);
}

[data-theme="light"] .section-qualify .receipt-tick:checked + .receipt-tick-box {
  background: var(--bp-orange);
  border-color: var(--bp-orange);
}

[data-theme="light"] .section-qualify .receipt-tick:checked + .receipt-tick-box::after {
  border-color: #2A2520;
}

[data-theme="light"] .section-qualify .receipt-label {
  color: #FFFFFF;
}

[data-theme="light"] .section-qualify .receipt-body::before {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.02) 3px,
    rgba(255, 255, 255, 0.02) 4px
  );
}

/* Logo images on dark → invert to white */
[data-theme="light"] .section-logos .logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* Stamp on dark → gold */
[data-theme="light"] .section-logos .logos-note {
  color: var(--bp-orange);
  border-color: var(--bp-orange);
}

/* Team box inner → gold bg on dark */
[data-theme="light"] .section-pricing .pricing-team-box-inner {
  background: var(--bp-orange);
  border-color: var(--bp-orange);
  color: #1A1A1A;
}
[data-theme="light"] .section-pricing .pricing-team-box-title {
  color: #1A1A1A;
}
[data-theme="light"] .section-pricing .pricing-team-box-sub {
  color: rgba(0, 0, 0, 0.6);
}
[data-theme="light"] .section-pricing .pricing-team-box-features li {
  color: rgba(0, 0, 0, 0.8);
}
[data-theme="light"] .section-pricing .pricing-team-box-features li::before {
  color: #1A1A1A;
}
[data-theme="light"] .section-pricing .pricing-team-box-cta {
  background: #1A1A1A;
  color: var(--bp-orange);
  border: 1px solid #1A1A1A;
}
[data-theme="light"] .section-pricing .pricing-team-box-cta:hover {
  background: #FFFFFF;
  color: #1A1A1A;
  border-color: #FFFFFF;
}

/* Team badge, sits outside coloured box, on section bg */
/* Dark mode (dark section bg) → light text */
[data-theme="light"] .section-pricing .pricing-team-badge {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme="light"] .section-pricing .pricing-team-badge strong {
  color: rgba(255, 255, 255, 0.9);
}

/* Cream mode (cream section bg) → dark text */
.section-pricing .pricing-team-badge {
  color: rgba(0, 0, 0, 0.4);
}
.section-pricing .pricing-team-badge strong {
  color: rgba(0, 0, 0, 0.75);
}

/* Whats new on dark → gold */
[data-theme="light"] .whats-new-dot {
  background: var(--bp-orange);
}

/* Sticky nav CTA on dark → gold */
[data-theme="light"] .sticky-nav-cta {
  background: var(--bp-orange);
  color: #1A1A1A;
}
[data-theme="light"] .sticky-nav-cta:hover {
  background: #D4AD2E;
  color: #1A1A1A;
}

/* Founding bar on dark → lighter gold bg, dark text */
[data-theme="light"] .founding-bar {
  background: var(--bp-orange-light);
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .founding-text {
  color: #1A1A1A;
}
[data-theme="light"] .founding-login {
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .theme-toggle {
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.8);
}

/* Who glitch border → subtle white */
[data-theme="light"] .section-who .who-glitch {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Studio chrome on dark → brighter */
[data-theme="light"] .section-studio .studio-chrome {
  opacity: 0.8;
}

/* FAQ borders on cream */
.section-faq .faq-item {
  border-color: rgba(30, 58, 138, 0.1);
}

/* Pricing team box on cream, box itself is blue bg, so eyebrow → yellow */
.section-pricing .pricing-team-box-eyebrow {
  color: var(--bp-orange);
}

/* Team box CTA already overridden above to white outline */

/* Who section glitch on cream */
.section-who .who-glitch {
  border-color: rgba(30, 58, 138, 0.1);
}

/* Studio chrome shape on cream, slightly dimmer */
.section-studio .studio-chrome {
  opacity: 0.6;
}

/* ── ALL CTA BUTTONS, bold text, pill-shaped ── */
.entrance-cta,
.mid-cta-btn,
.final-cta-btn,
.pricing-card-cta,
.pricing-card-cta--featured,
.pricing-team-box-cta,
.sticky-nav-cta {
  border-radius: 50px !important;
  font-weight: 700 !important;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* --- SECTION TEXTURES, subtle dot grid --- */
.section--tex::before,
.section--tex-grain::before,
.section--tex-glow::before,
.section--tex-lines::before {
  background: radial-gradient(circle, var(--bp-grid) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  opacity: 0.4 !important;
}

/* Gold section textures → dark dots instead of white */
[data-theme="light"] .section--tex::before,
[data-theme="light"] .section--tex-grain::before,
[data-theme="light"] .section--tex-glow::before,
[data-theme="light"] .section--tex-lines::before {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.08) 1px, transparent 1px) !important;
}

/* --- LOGOS SECTION --- */
.logos-label {
  color: rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .logos-label {
  color: rgba(255, 255, 255, 0.4);
}

.logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.4;
}

[data-theme="light"] .logo-img {
  filter: brightness(0) invert(1);
  opacity: 0.3;
}

/* --- VSL SECTION --- */
.vsl-headline {
  color: #FFFFFF;
}

.vsl-headline em {
  color: var(--bp-orange);
}

[data-theme="light"] .vsl-headline {
  color: #FFFFFF;
}

[data-theme="light"] .vsl-headline em {
  color: var(--bp-orange);
}

.vsl-eyebrow {
  color: var(--bp-orange);
}

.vsl-glow {
  background: radial-gradient(ellipse, rgba(91, 156, 245, 0.15), transparent 70%);
}

/* --- MID CTA BUTTONS --- */
.mid-cta-btn {
  color: #1A1A1A;
  background: var(--bp-orange);
  border-color: var(--bp-orange);
}

.mid-cta-btn:hover {
  background: #FFFFFF;
  color: var(--bp-blue);
  border-color: #FFFFFF;
}

/* --- PORTFOLIO/DESK --- */
.portfolio-eyebrow {
  color: var(--bp-orange);
}

.portfolio-headline {
  color: #FFFFFF;
}

.portfolio-headline em {
  color: var(--bp-orange);
}

[data-theme="light"] .portfolio-headline {
  color: #FFFFFF;
}

[data-theme="light"] .portfolio-headline em {
  color: var(--bp-orange);
}

.desk-photo {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--bp-shadow);
}

.desk-caption {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 4px;
  padding: 3px 8px;
  z-index: 2;
}

/* --- VALUE BRIDGE, lives on blue (portfolio section) --- */
.value-bridge-eyebrow {
  color: rgba(255, 255, 255, 0.7);
}

.value-bridge-eyebrow .vb-stat {
  color: var(--bp-orange);
}

.value-bridge-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .value-bridge-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.value-bridge-num {
  color: var(--bp-orange);
}

.value-bridge-text {
  color: #FFFFFF;
}

/* --- QUALIFY SECTION --- */
.qualify-headline {
  color: #FFFFFF;
}

.qualify-accent {
  color: var(--bp-orange);
}

.qualify-principle {
  border-left-color: var(--bp-orange);
}

.receipt-num {
  color: var(--bp-orange);
}

/* --- PAIN SECTION --- */
.pain-headline .pain-keyword {
  color: var(--bp-orange);
}

.pain-accent .pain-word {
  color: var(--bp-orange);
}

.pain-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 24px;
}

[data-theme="light"] .pain-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.pain-statement {
  color: #FFFFFF;
}

[data-theme="light"] .pain-statement {
  color: #FFFFFF;
}

/* --- STUDENT WORK --- */
.voices-headline em {
  color: var(--bp-orange);
}

.showcase-name {
  color: var(--bp-orange);
}

.masonry-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px var(--bp-shadow);
}

/* --- STUDIO SECTION --- */
.studio-headline em {
  color: var(--bp-orange);
}

.studio-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

[data-theme="light"] .studio-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

/* --- RESULTS SECTION --- */
.results-headline em {
  color: var(--bp-orange);
}

.result-card {
  border-radius: 16px;
  overflow: hidden;
}

.result-proof {
  border-radius: 16px;
  overflow: hidden;
}

/* --- ROADMAP --- */
.roadmap-headline em {
  color: var(--bp-orange);
}

.roadmap-eyebrow {
  color: var(--bp-orange);
}

.timeline-node.active .node-num,
.timeline-node:hover .node-num {
  color: var(--bp-orange);
}

.timeline-progress {
  background: var(--bp-orange);
}

.roadmap-cert {
  background: rgba(91, 156, 245, 0.1);
  border: 1px solid rgba(91, 156, 245, 0.3);
  border-radius: 16px;
}

.cert-title em {
  color: var(--bp-orange);
}

/* --- TESTIMONIALS --- */
.testimonials-eyebrow {
  color: var(--bp-orange);
}

.testimonial-item img {
  border-radius: 12px;
}

/* --- WHO / FOUNDER --- */
.who-eyebrow {
  color: var(--bp-orange);
}

/* Keyword highlights in who headline */
.who-kw {
  padding: 2px 10px;
  border-radius: 6px;
  font-style: normal;
}

/* "tools", yellow bg, blue text */
.who-kw--tools {
  background: var(--bp-orange);
  color: var(--bp-blue);
}

/* "eye", blue bg, yellow text */
.who-kw--eye {
  background: var(--bp-blue);
  color: var(--bp-orange);
}

/* "both", flips colors in sync with the who-glitch image cycle (6s) */
.who-kw--both {
  background: var(--bp-orange);
  color: var(--bp-blue);
  animation: both-flip 6s infinite;
}

@keyframes both-flip {
  0%     { background: var(--bp-orange); color: var(--bp-blue); }
  64%    { background: var(--bp-orange); color: var(--bp-blue); }
  68%    { background: var(--bp-blue); color: var(--bp-orange); }
  88%    { background: var(--bp-blue); color: var(--bp-orange); }
  92%    { background: var(--bp-orange); color: var(--bp-blue); }
  100%   { background: var(--bp-orange); color: var(--bp-blue); }
}

.who-pullquote {
  color: var(--bp-orange);
  border-left-color: var(--bp-orange);
}

.who-stat-num {
  color: var(--bp-blue);
}

.who-stats {
  border-top-color: rgba(30, 58, 138, 0.15);
}

.who-stat-label {
  color: #555555;
}

/* Yellow highlight background for key stats */
.who-highlight {
  background: rgba(201, 169, 98, 0.25);
  padding: 2px 6px;
  border-radius: 4px;
}

/* --- DEMAND PROOF --- */
.demand-eyebrow {
  color: var(--bp-orange);
}

.demand-headline em {
  color: var(--bp-orange);
}

.demand-card {
  border-radius: 16px;
  overflow: hidden;
}

/* --- LIGHTBOX / PHOTO OVERLAY, premium blueprint popup --- */
.photo-overlay-bg {
  background: rgba(10, 25, 60, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

[data-theme="light"] .photo-overlay-bg {
  background: rgba(10, 10, 10, 0.9);
}

.photo-overlay-content {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 58, 138, 0.6);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  padding: 12px;
}

.photo-overlay-image,
.proof-overlay-image {
  border-radius: 16px;
  filter: none;
}

.photo-overlay-caption {
  position: relative;
  bottom: auto;
  left: auto;
  padding: 12px 4px 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

[data-theme="light"] .photo-overlay-content {
  background: rgba(34, 34, 34, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .photo-overlay-caption {
  color: rgba(255, 255, 255, 0.4);
}

/* --- BRIDGE / MISSION --- */

/* Hide the spinning logo, looks awkward on cream */
.section-bridge .bridge-logo {
  display: none;
}

/* Clean typographic divider feel */
.section-bridge {
  padding: 48px 24px;
  text-align: center;
  border-top: 1px solid rgba(30, 58, 138, 0.08);
  border-bottom: 1px solid rgba(30, 58, 138, 0.08);
  position: relative;
}

/* Dot grid background behind bridge section */
.section-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(30, 58, 138, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

.section-bridge .bridge-inner {
  max-width: 640px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.section-bridge .bridge-dim {
  opacity: 1;
  color: #888888;
  font-size: clamp(14px, 2vw, 18px);
  margin-top: 4px;
  display: block;
}

.section-bridge .bridge-statement-2 {
  margin-top: 16px;
  color: #1A1A1A;
}

.bridge-statement em {
  color: var(--bp-orange);
}

/* Bridge charcoal theme overrides */
[data-theme="light"] .section-bridge {
  border-top-color: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .section-bridge::before {
  background-image: radial-gradient(circle, rgba(242, 199, 68, 0.08) 1px, transparent 1px);
}

[data-theme="light"] .section-bridge .bridge-dim {
  color: rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .section-bridge .bridge-statement-2 {
  color: #FFFFFF;
}

/* --- OFFER STACK --- */
.stack-eyebrow {
  color: var(--bp-orange);
}

.stack-headline em {
  color: var(--bp-orange);
}

.stack-sub-intro-accent {
  color: var(--bp-orange);
}

.stack-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

[data-theme="light"] .stack-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.stack-tag {
  border-radius: 20px;
}

.stack-value-tag {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 8px;
}

.stack-bonus-card {
  border-radius: 16px;
}

.stack-bonus-accent {
  background: var(--bp-orange);
}

.stack-bonus-value-tag {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 8px;
}

/* Stack footer, value counter */
.stack-footer {
  border-color: rgba(255, 255, 255, 0.1);
}

.stack-value-label {
  color: var(--bp-orange);
}

.stack-value-strike s {
  text-decoration-color: var(--bp-orange);
}

.stack-value-actual {
  color: var(--bp-orange);
}

/* --- GUARANTEE --- */
.guarantee-headline {
  color: #FFFFFF;
}

[data-theme="light"] .guarantee-headline {
  color: var(--bp-orange);
}

.guarantee-divider {
  background: var(--bp-orange);
}

/* --- PRICING --- */
.pricing-eyebrow {
  color: var(--bp-orange);
}

.pricing-card--featured {
  border-color: var(--bp-orange);
}

.pricing-card-badge {
  background: var(--bp-orange);
  color: #1A1A1A;
}

.pricing-card-cta--featured {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 50px;
}

.pricing-card-cta--featured:hover {
  background: #4A87DD;
}

.pricing-card-cta {
  border-radius: 50px;
}

.pricing-card {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .pricing-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.pricing-card-strike {
  color: rgba(255, 255, 255, 0.4);
}

.pricing-card-tag--scarcity .pricing-card-tag-dot {
  background: var(--bp-orange);
}

.pricing-perk-card {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .pricing-perk-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.pricing-perk-card-num {
  color: var(--bp-orange);
}

.pricing-team-box {
  border-radius: 20px;
}

.pricing-team-box-eyebrow {
  color: var(--bp-orange);
}

.pricing-team-box-cta {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 50px;
}

/* --- FAQ --- */
.faq-headline em {
  color: var(--bp-orange);
}

.faq-item {
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .faq-item {
  border-color: rgba(255, 255, 255, 0.1);
}

.faq-item summary {
  color: #FFFFFF;
}

[data-theme="light"] .faq-item summary {
  color: #FFFFFF;
}

/* --- FINAL CTA --- */
.final-cta-btn {
  background: var(--bp-orange);
  color: #1A1A1A;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(91, 156, 245, 0.3);
}

.final-cta-btn:hover {
  background: #4A87DD;
  box-shadow: 0 8px 32px rgba(91, 156, 245, 0.4);
}

.final-cta-amount {
  color: var(--bp-orange);
}

/* --- FOOTER --- */
.site-footer {
  background: var(--bp-blue-dark);
  border-radius: 20px;
  margin: 0 12px 12px;
}

[data-theme="light"] .site-footer {
  background: #222222;
  border-radius: 20px;
}

/* ============================================
   FLOATING CLOUDS, optional decorative elements
   Adds that playful 3D paper-cutout energy
   ============================================ */

/* We'll add these via pseudo-elements on the entrance */
.entrance::before {
  content: '';
  position: absolute;
  width: 120px;
  height: 70px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
  top: 15%;
  left: 8%;
  z-index: 0;
  animation: cloud-float 8s ease-in-out infinite;
  pointer-events: none;
}

.entrance::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 55px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
  bottom: 20%;
  right: 12%;
  z-index: 0;
  animation: cloud-float 10s ease-in-out infinite reverse;
  pointer-events: none;
}

@keyframes cloud-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ============================================
   RESPONSIVE, Blueprint adjustments
   ============================================ */
@media (max-width: 768px) {
  .entrance {
    border-width: 10px;
    border-radius: 16px;
    margin: 8px;
    padding-top: 44px;
    height: calc(100vh - 16px);
    width: calc(100% - 16px);
  }

  .section-portfolio-desk,
  .section-pain,
  .section-voices,
  .section-results,
  .section-roadmap,
  .section-demand,
  .section-stack,
  .section-final-cta {
    margin: 0 8px;
    border-radius: 16px;
  }

  .site-footer {
    margin: 0 8px 8px;
    border-radius: 16px;
  }

  .founding-bar {
    margin: 8px 8px 0;
    border-radius: 10px;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 8px;
  }

  .founding-right {
    position: static;
    transform: none;
    gap: 8px;
    flex-shrink: 0;
  }

  .founding-text {
    font-size: 8px;
    letter-spacing: 1px;
    flex: 1;
    min-width: 0;
  }

  .headline-title {
    font-size: clamp(40px, 12vw, 72px);
  }

  .headline-label {
    font-size: 8vw;
  }

  .headline-anchor {
    font-size: 6vw;
    letter-spacing: 6px;
  }

  .headline-sub {
    font-size: 3.5vw;
    font-weight: 400;
    line-height: 1.5;
    padding: 0 12px;
  }

  .entrance-cta {
    padding: 14px 32px;
    font-size: 11px;
    margin-top: 12px;
  }

  /* Specifics, strip pill borders on mobile to match entrance.css mobile */
  .entrance-specifics > span:not(.spec-dot) {
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    font-size: 8px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6);
  }

  [data-theme="light"] .entrance-specifics > span:not(.spec-dot) {
    color: rgba(0, 0, 0, 0.5);
  }

  .entrance-specifics {
    margin-bottom: 8px !important;
  }

  /* Social proof, subtle line below CTA on mobile */
  .entrance-proof {
    gap: 5px;
    margin-top: 4px;
  }

  .proof-stars {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .proof-text {
    font-size: 7px;
    letter-spacing: 1px;
  }

  /* VSL video, padding + rounded edges on mobile (match 8px section inset) */
  .section-vsl {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .vsl-player {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
  }

  /* Light theme mobile, swap card margins */
  /* Light theme mobile, all sections are cards on yellow */
  [data-theme="light"] .section-portfolio-desk,
  [data-theme="light"] .section-pain,
  [data-theme="light"] .section-voices,
  [data-theme="light"] .section-results,
  [data-theme="light"] .section-roadmap,
  [data-theme="light"] .section-demand,
  [data-theme="light"] .section-stack,
  [data-theme="light"] .section-final-cta {
    margin: 0 8px;
    border-radius: 16px;
  }

  [data-theme="light"] .section-logos,
  [data-theme="light"] .section-vsl,
  [data-theme="light"] .section-qualify,
  [data-theme="light"] .section-studio,
  [data-theme="light"] .section-testimonials,
  [data-theme="light"] .section-who,
  [data-theme="light"] .section-bridge,
  [data-theme="light"] .section-guarantee,
  [data-theme="light"] .section-pricing,
  [data-theme="light"] .section-faq {
    margin: 0 8px;
    border-radius: 16px;
  }
}

/* ============================================
   GLOBAL TYPOGRAPHY, Baste + Offset overrides
   Baste = display/headlines, Offset = body/descriptions
   ============================================ */

/* All major section headlines → Baste */
.vsl-headline,
.portfolio-headline,
.qualify-headline,
.pain-headline,
.voices-headline,
.studio-headline,
.results-headline,
.roadmap-headline,
.testimonials-headline,
.who-headline,
.demand-headline,
.bridge-statement,
.stack-headline,
.guarantee-headline,
.pricing-headline,
.faq-headline,
.final-cta-headline,
.cert-title {
  font-family: 'Bootzy', sans-serif;
  letter-spacing: 0.06em;
}

/* All body text, descriptions, sub-headlines → Offset */
.vsl-eyebrow,
.portfolio-eyebrow,
.qualify-eyebrow,
.pain-eyebrow,
.voices-eyebrow,
.studio-eyebrow,
.results-eyebrow,
.roadmap-eyebrow,
.testimonials-eyebrow,
.who-eyebrow,
.demand-eyebrow,
.stack-eyebrow,
.pricing-eyebrow,
.faq-eyebrow,
.pain-detail,
.pain-statement,
.stack-sub,
.stack-sub-intro,
.studio-sub,
.studio-card-text,
.value-bridge-text,
.qualify-principle-body,
.who-body p,
.guarantee-sub,
.pricing-card-features li,
.pricing-sub,
.faq-item p,
.faq-item summary,
.final-cta-sub,
.demand-callout p,
.desk-annotation-text,
.panel-list li {
  font-family: 'Space Grotesk', sans-serif;
}

/* Card names, tier names → Baste */
.stack-name,
.stack-bonus-name,
.pricing-card-tier,
.pricing-perk-card-title,
.pricing-team-box-title {
  font-family: 'Bootzy', sans-serif;
}

/* --- FONT SIZE SCALING, Baste renders large, compensate --- */

/* Section headlines, scale down ~25% from original + spaced characters */
.vsl-headline,
.portfolio-headline,
.qualify-headline,
.voices-headline,
.studio-headline,
.results-headline,
.roadmap-headline,
.testimonials-headline,
.who-headline,
.demand-headline,
.stack-headline,
.guarantee-headline,
.pricing-headline,
.faq-headline,
.final-cta-headline {
  font-size: clamp(24px, 3.5vw, 42px);
  line-height: 1.15;
  letter-spacing: 0.12em;
  word-spacing: 0.04em;
}

/* Mobile: tighter sizing on the demand-headline so first sentence fits one line */
@media (max-width: 768px) {
  .demand-headline {
    font-size: 17px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
  }
}

/* Pain headline is bigger in the original, keep it prominent */
.pain-headline {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: 0.12em;
}

/* Bridge statement */
.bridge-statement {
  font-size: clamp(20px, 3vw, 36px);
  line-height: 1.2;
  letter-spacing: 0.12em;
}

/* Card names */
.stack-name,
.stack-bonus-name {
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0.1em;
}

/* Pricing tier names */
.pricing-card-tier {
  font-size: clamp(22px, 2.5vw, 32px);
  letter-spacing: 0.1em;
}

/* Pricing perk card titles + team box title */
.pricing-perk-card-title,
.pricing-team-box-title {
  letter-spacing: 0.1em;
}

/* Cert title */
.cert-title {
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.1em;
}

/* Highlighted words (inline Bootzy) */
.hl-grain {
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Who keyword highlights */
.who-kw {
  letter-spacing: 0.08em;
}

/* Eyebrows, Offset renders bigger than IBM Plex Mono */
.vsl-eyebrow,
.portfolio-eyebrow,
.qualify-eyebrow,
.pain-eyebrow,
.voices-eyebrow,
.studio-eyebrow,
.results-eyebrow,
.roadmap-eyebrow,
.testimonials-eyebrow,
.who-eyebrow,
.demand-eyebrow,
.stack-eyebrow,
.pricing-eyebrow,
.faq-eyebrow {
  font-size: 10px;
  letter-spacing: 3px;
}

/* Body text */
.pain-detail,
.stack-sub,
.stack-sub-intro,
.studio-sub,
.studio-card-text,
.value-bridge-text,
.guarantee-sub,
.pricing-sub,
.final-cta-sub,
.demand-callout p,
.desk-annotation-text,
.who-body p {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.6;
}

/* List items */
.qualify-principle-body,
.pricing-card-features li,
.panel-list li {
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.5;
}

/* FAQ */
.faq-item summary {
  font-size: clamp(14px, 1.3vw, 17px);
}

.faq-item p {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.6;
}