/* ==========================================================================
   KIDCOMIC GPT BUILDER™ — "Comic Workshop" Design System
   Vibe: Ink & Markers — warm, playful, professional, conversion-focused
   Typography: Fredoka (Display) + Nunito (Body) + JetBrains Mono (Labels)
   Palette: Comic Ink Blue + Marker Orange + Comic Green on Warm Paper
   Standard: Mobile-First, Container Queries, Fluid Typography, 44px Touch
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* ── Color Palette: "Ink & Markers" ── */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-primary-soft: rgba(37, 99, 235, 0.08);
  --color-primary-border: rgba(37, 99, 235, 0.2);

  --color-secondary: #F97316;
  --color-secondary-hover: #EA580C;
  --color-secondary-soft: rgba(249, 115, 22, 0.08);
  --color-secondary-border: rgba(249, 115, 22, 0.25);

  --color-accent: #16A34A;
  --color-accent-hover: #15803D;
  --color-accent-soft: rgba(22, 163, 74, 0.08);
  --color-accent-border: rgba(22, 163, 74, 0.2);

  --color-danger: #DC2626;
  --color-danger-soft: rgba(220, 38, 38, 0.07);
  --color-danger-border: rgba(220, 38, 38, 0.2);

  /* ── Surfaces ── */
  --bg-light: #FAFAF8;
  --bg-white: #FFFFFF;
  --bg-muted: #F1F0ED;
  --bg-dark: #1E1B2E;
  --bg-dark-card: #29263D;
  --bg-dark-elevated: #332F4A;

  /* ── Text ── */
  --text-heading: #1E293B;
  --text-body: #374151;
  --text-muted: #64748B;
  --text-light: #FAFAF8;
  --text-light-muted: rgba(250, 250, 248, 0.7);

  /* ── Borders & Shadows ── */
  --border-light: #E5E3DF;
  --border-card: rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.06);
  --shadow-cta: 0 8px 30px rgba(22, 163, 74, 0.3), 0 4px 12px rgba(22, 163, 74, 0.15);
  --shadow-img: 0 16px 48px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.06);

  /* ── Typography ── */
  --font-display: 'Fredoka', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── Fluid Type Scale ── */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.82rem);
  --text-sm: clamp(0.82rem, 0.78rem + 0.3vw, 0.94rem);
  --text-base: clamp(0.95rem, 0.88rem + 0.4vw, 1.1rem);
  --text-lg: clamp(1.1rem, 1rem + 0.55vw, 1.3rem);
  --text-xl: clamp(1.25rem, 1.1rem + 0.8vw, 1.55rem);
  --text-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.8rem, 1.45rem + 1.8vw, 2.65rem);
  --text-4xl: clamp(2.2rem, 1.7rem + 2.5vw, 3.5rem);

  /* ── Fluid Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: clamp(16px, 12px + 1vw, 24px);
  --space-8: clamp(24px, 18px + 1.5vw, 32px);
  --space-10: clamp(32px, 24px + 2vw, 44px);
  --space-12: clamp(40px, 28px + 2.5vw, 52px);
  --space-16: clamp(52px, 36px + 3.5vw, 72px);
  --space-20: clamp(64px, 44px + 4.5vw, 96px);

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 180ms;
  --duration-std: 300ms;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-light);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }

/* ── Global Text Wrapping & Overflow Prevention ── */
h1, h2, h3, h4, h5, h6, p, span, a, li, div, blockquote, figcaption, label {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: normal;
  max-width: 100%;
}

/* ── Universal Dynamic Heights & Section Spacing ── */
section,
.section,
.section-light,
.section-white,
.section-dark,
.section-gradient-cta,
.hero-section,
.authority-section,
.offer-reveal-section,
.bonus-stack-section,
.value-pricing-section,
.guarantee-section,
.faq-section,
.urgency-section,
.workflow-section,
.transformation-section,
.how-it-works-section,
.deep-dive-section,
.testimonials-section,
.case-studies-section,
.problem-section {
  height: auto !important;
  min-height: auto;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

/* ── Universal Container Flexibility ── */
.container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  height: auto;
  box-sizing: border-box;
}

.text-center { text-align: center; }

/* ── Section spacing & breathing room ── */
.section,
.section-light {
  background-color: var(--bg-light);
  padding-block: var(--space-16);
  height: auto !important;
}
.bg-light {
  background-color: var(--bg-light);
}
.section-white {
  background-color: var(--bg-white);
  padding-block: var(--space-16);
  height: auto !important;
}
.section-dark {
  background-color: var(--bg-dark);
  color: var(--text-light);
  padding-block: var(--space-16);
  position: relative;
  height: auto !important;
}
.section-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.section-dark > .container { position: relative; z-index: 1; }

.section-gradient-cta {
  background: linear-gradient(135deg, #065F46 0%, #16A34A 40%, #22C55E 100%);
  color: #fff;
  padding-block: var(--space-16);
  height: auto !important;
}

/* ── Dynamic Button & Card Overflow Protections ── */
.card,
.hero-box,
.offer-master-box,
.bonus-flagship-card,
.bonus-subcard,
.value-table-card,
.pricing-master-card,
.guarantee-box,
.faq-card,
.urgency-box,
.cta-banner-card,
.benefit-hero-card,
.feature-card,
.testimonial-card,
.module-card,
.niche-card,
.problem-card {
  height: auto !important;
  max-height: none;
  overflow: visible;
  box-sizing: border-box;
}

.btn-cta,
.btn-cta-hero,
.btn-purchase-cta,
.btn-primary,
.btn-secondary,
.btn-accent,
.cta-btn-main,
.btn-cta-white,
.btn-outline,
.no-thanks-link {
  white-space: normal !important;
  height: auto !important;
  min-height: 48px;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
}


/* ==========================================================================
   4. SCROLL ANIMATION SYSTEM
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-animate="fade"] { transform: translateY(0); }
[data-animate="slide-left"] { transform: translateX(-32px); }
[data-animate="slide-right"] { transform: translateX(32px); }
[data-animate="scale"] { transform: scale(0.94); }

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-bounce);
}
[data-stagger] > .is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   5. SHARED COMPONENTS
   ========================================================================== */

/* ── Section Badge ── */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.badge-blue { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid var(--color-primary-border); }
.badge-orange { background: var(--color-secondary-soft); color: var(--color-secondary); border: 1px solid var(--color-secondary-border); }
.badge-green { background: var(--color-accent-soft); color: var(--color-accent); border: 1px solid var(--color-accent-border); }
.badge-red { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.badge-dark { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.12); }

/* ── Section Heading ── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  max-width: 880px;
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.section-dark .section-title { color: var(--text-light); }

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 760px;
  line-height: 1.65;
  text-wrap: balance;
}
.section-dark .section-subtitle { color: var(--text-light-muted); }

/* ── Auto-centered headers ── */
.section-header { margin-bottom: var(--space-10); }
.section-header.text-center .section-title,
.section-header.text-center .section-subtitle { margin-inline: auto; }

/* ── Highlight text ── */
.hl-blue { color: var(--color-primary); }
.hl-orange { color: var(--color-secondary); }
.hl-green { color: var(--color-accent); }
.hl-red { color: var(--color-danger); }

/* ── SVG Icon wrapper ── */
.icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box svg { width: 22px; height: 22px; }
.icon-box-blue { background: var(--color-primary-soft); color: var(--color-primary); }
.icon-box-orange { background: var(--color-secondary-soft); color: var(--color-secondary); }
.icon-box-green { background: var(--color-accent-soft); color: var(--color-accent); }
.icon-box-red { background: var(--color-danger-soft); color: var(--color-danger); }
.icon-box-dark { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); }

/* ── Card base ── */
.card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-std) var(--ease-out),
              box-shadow var(--duration-std) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.section-dark .card {
  background: var(--bg-dark-card);
  border-color: rgba(255,255,255,0.08);
}
.section-dark .card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ── Image frame ── */
.img-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-img);
  aspect-ratio: 16 / 9;
}
.img-frame img { width: 100%; height: 100%; object-fit: cover; }
.section-dark .img-frame { border-color: rgba(255,255,255,0.1); }

/* ── Primary CTA Button ── */
.btn-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 36px;
  min-height: 56px;
  height: auto !important;
  max-width: 100%;
  background: var(--color-accent);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  position: relative;
  overflow: visible;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  margin-bottom: var(--space-4);
  transition: transform var(--duration-std) var(--ease-out),
              box-shadow var(--duration-std) var(--ease-out),
              background var(--duration-fast);
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(22, 163, 74, 0.4);
  background: var(--color-accent-hover);
}
.btn-cta-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.btn-cta-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  opacity: 0.9;
  margin-top: 4px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ── Secondary outline btn ── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 24px;
  min-height: 48px;
  height: auto !important;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: 2px solid var(--color-primary-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: break-word;
  box-sizing: border-box;
  transition: all var(--duration-fast);
}
.btn-outline:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}

/* ==========================================================================
   6. HERO SECTION (01 + 02)
   ========================================================================== */
.hero-section {
  background: var(--bg-light);
  padding-block: var(--space-10) var(--space-16);
  height: auto !important;
  overflow: visible;
}

/* ── Status Pill ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6);
  min-height: 44px;
  flex-wrap: wrap;
  justify-content: center;
}
.status-dot {
  width: 8px; height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
.status-pill-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  text-transform: uppercase;
}
.status-pill-divider { color: var(--color-accent-border); font-size: var(--text-xs); }
.status-pill-sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

/* ── Hero Split Layout ── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  text-align: left;
}

.hero-content { order: 2; }
.hero-visual { order: 1; }

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--text-heading);
  margin-bottom: var(--space-6);
}
.hero-title .hl-orange { display: inline; }

.hero-desc {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: var(--space-8);
  line-height: 1.7;
}
.hero-desc strong { color: var(--text-heading); font-weight: 700; }

.hero-img-frame {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-light);
  aspect-ratio: 16 / 9;
  position: relative;
}
.hero-img-frame img { width: 100%; height: 100%; object-fit: cover; }

.hero-img-badge {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-light);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-heading);
  backdrop-filter: blur(8px);
}
.hero-img-badge svg { width: 16px; height: 16px; color: var(--color-secondary); }

/* ── Feature Chips ── */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-heading);
  min-height: 44px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-fast), transform var(--duration-fast);
}
.chip:hover { border-color: var(--color-primary-border); transform: translateY(-1px); }
.chip svg { width: 18px; height: 18px; flex-shrink: 0; }
.chip-blue svg { color: var(--color-primary); }
.chip-orange svg { color: var(--color-secondary); }
.chip-green svg { color: var(--color-accent); }

/* ── Dime sale urgency ── */
.urgency-strip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-danger-soft);
  border: 1px solid var(--color-danger-border);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-danger);
  margin-bottom: var(--space-4);
  min-height: 44px;
}
.urgency-strip svg { width: 18px; height: 18px; }

/* ── Hero trust micro ── */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.trust-micro {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}
.trust-micro svg { width: 16px; height: 16px; color: var(--color-accent); }

/* ==========================================================================
   7. WORKFLOW SECTION (03)
   ========================================================================== */
.workflow-section { padding-block: var(--space-16); }

.bonus-flagship-grid {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 768px) {
  .bonus-flagship-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
  .faq-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.guarantee-box-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 768px) {
  .guarantee-box-split {
    grid-template-columns: 220px 1fr;
  }
}

.urgency-mockup-frame {
  max-width: 480px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.workflow-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  counter-reset: step;
}
.workflow-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.step-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  border-radius: var(--radius-md);
}
.step-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-1);
}
.step-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Workflow trust footer ── */
.workflow-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
  max-width: 900px;
  margin-inline: auto;
}
.workflow-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 600;
}
.workflow-trust-item svg { width: 18px; height: 18px; color: var(--color-primary); }

/* ==========================================================================
   8. ECOSYSTEM / HERO VISUAL (04) — Dark Section
   ========================================================================== */
.ecosystem-header-text { max-width: 820px; margin-inline: auto; }

.ecosystem-showcase {
  max-width: 1000px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  position: relative;
}
.ecosystem-showcase .img-frame {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
}

.ecosystem-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
}
.pillar {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-light);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}
.pillar-desc {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--space-3);
}
.pillar-status {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pillar-status svg { width: 16px; height: 16px; }

/* ==========================================================================
   9. CTA VAULT (05) — Gradient Section
   ========================================================================== */
.cta-section { text-align: center; }

.cta-card {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 640px;
  margin-inline: auto;
  backdrop-filter: blur(12px);
}
.cta-price-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--space-2);
}
.cta-price-old {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.5);
  text-decoration: line-through;
  font-weight: 600;
}
.cta-price-main {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  line-height: 1;
  color: #fff;
  margin: var(--space-1) 0 var(--space-2);
}
.cta-price-currency {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-top: 6px;
}
.cta-price-amount {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.cta-price-cents {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-top: 6px;
}
.cta-price-type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-6);
}

.btn-cta-white {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 32px;
  min-height: 60px;
  background: #fff;
  color: #065F46;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform var(--duration-std) var(--ease-out),
              box-shadow var(--duration-std) var(--ease-out);
}
.btn-cta-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.btn-cta-white .btn-cta-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #065F46;
}
.btn-cta-white .btn-cta-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.cta-guarantee {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-6);
  text-align: left;
}
.cta-guarantee svg { width: 24px; height: 24px; color: rgba(255,255,255,0.8); flex-shrink: 0; margin-top: 2px; }
.cta-guarantee-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
}
.cta-guarantee-desc {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
  line-height: 1.45;
}

.cta-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
  text-align: left;
}
.cta-check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
.cta-check-item svg { width: 18px; height: 18px; color: rgba(255,255,255,0.9); flex-shrink: 0; margin-top: 2px; }
.cta-check-item strong { color: #fff; }

/* ==========================================================================
   10. TRUST BAR (06)
   ========================================================================== */
.trust-bar-section {
  background: var(--bg-white);
  padding-block: var(--space-8);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.trust-bar-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}
.trust-bar-item svg { width: 20px; height: 20px; }
.trust-bar-item.trust-green svg { color: var(--color-accent); }
.trust-bar-item.trust-blue svg { color: var(--color-primary); }
.trust-bar-item.trust-orange svg { color: var(--color-secondary); }

.platform-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.platform-tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}

/* ==========================================================================
   11. PROBLEM SECTION (07) — Editorial, typography-driven
   ========================================================================== */
.problem-section { position: relative; }

.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.problem-points {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pain-point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--color-danger);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}
.pain-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-danger);
  line-height: 1;
  flex-shrink: 0;
}
.pain-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.pain-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.pain-desc strong { color: var(--text-heading); }

.root-cause-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}
.root-cause-box svg { width: 28px; height: 28px; color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.root-cause-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.root-cause-desc {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
}

/* ==========================================================================
   12. AGITATION SECTION (08) — Dark, metric-driven
   ========================================================================== */
.agitation-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.agitation-card {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.agitation-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: 4px;
}
.agitation-card-desc {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  line-height: 1.6;
}
.agitation-card-desc strong { color: var(--text-light); }

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
}
.metric-card {
  background: var(--bg-dark-elevated);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}
.metric-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 2px;
}
.metric-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.metric-desc {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
}

/* ==========================================================================
   13. DESIRED FUTURE (09) — Light, comparison table
   ========================================================================== */
.future-showcase {
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 900px;
  margin-inline: auto;
}
.comparison-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.comparison-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.comparison-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.comparison-row + .comparison-row { border-top: 1px solid var(--border-light); padding-top: var(--space-3); }
.comparison-before { color: var(--text-muted); }
.comparison-after { color: var(--text-heading); font-weight: 600; }
.comparison-row svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.comparison-row svg.icon-red { color: var(--color-danger); }
.comparison-row svg.icon-green { color: var(--color-accent); }

/* ==========================================================================
   14. SOLUTION INTRO (10)
   ========================================================================== */
.solution-showcase {
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  position: relative;
}

.solution-flow-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
}
.flow-step-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.06em;
}
.flow-step-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 600;
}
.flow-step.active { background: var(--color-primary-soft); border-radius: var(--radius-md); }
.flow-step.active .flow-step-label { color: var(--color-primary); }
.flow-step.active .flow-step-text { color: var(--text-heading); }
.flow-arrow {
  font-size: var(--text-lg);
  color: var(--text-muted);
}

.solution-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}
.sol-pillar .card { height: 100%; display: flex; flex-direction: column; }
.sol-pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-heading);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}
.sol-pillar-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: var(--space-3);
}
.sol-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Formula card ── */
.formula-card {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-top: var(--space-8);
  text-align: center;
}
.formula-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.formula-header svg { width: 20px; height: 20px; color: var(--color-primary); }
.formula-header span {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}
.formula-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
}
.formula-op { color: var(--color-primary); font-size: var(--text-xl); }
.formula-result { color: var(--color-accent); font-size: var(--text-lg); }

/* ==========================================================================
   15. UNIQUE MECHANISM (11) — Dark horizontal pipeline
   ========================================================================== */
.mechanism-showcase {
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.mechanism-stages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.mech-stage {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.mech-stage-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.mech-stage-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.mech-stage-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}
.mech-stage-desc {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.mech-stage-desc strong { color: var(--text-light); }
.mech-result-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mech-result-tag svg { width: 14px; height: 14px; }

.mechanism-contrast {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.contrast-side {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.contrast-label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.contrast-old .contrast-label { color: var(--color-danger); }
.contrast-new .contrast-label { color: var(--color-accent); }
.contrast-text {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  line-height: 1.6;
}

/* ==========================================================================
   16. CORE BENEFITS (12) — Bento grid
   ========================================================================== */
.benefits-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.benefit-hero-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.benefit-hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
.benefit-hero-visual .img-frame { border-radius: 0; border: none; box-shadow: none; }
.benefit-hero-content {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.benefit-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.benefit-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.benefit-lead {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}
.benefit-lead strong { color: var(--text-heading); }

.benefit-metrics {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.b-metric { text-align: center; }
.b-metric-val {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}
.b-metric-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* ── Benefit pillar cards ── */
.benefit-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.benefit-pillar-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.benefit-pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}
.benefit-pillar-cat {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.benefit-pillar-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.benefit-outcome-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}
.benefit-outcome-tag svg { width: 14px; height: 14px; }

/* ── Supporting strip ── */
.supporting-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-6);
  background: var(--bg-muted);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.supp-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-body);
  font-weight: 600;
}
.supp-item svg { width: 20px; height: 20px; color: var(--color-primary); }

/* ── Value synthesis ── */
.value-synthesis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.value-synthesis svg { width: 28px; height: 28px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.synthesis-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.synthesis-desc {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
}

/* ==========================================================================
   17. FEATURES BREAKDOWN (13) — Alternating layouts
   ========================================================================== */

/* ── Feature spotlight (asymmetric split) ── */
.feature-spotlight {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-md);
}
.feature-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
.feature-visual .img-frame { border-radius: var(--radius-lg); }
.feature-visual-chip {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  backdrop-filter: blur(8px);
}
.feature-visual-chip .live-dot {
  width: 6px; height: 6px;
  background: var(--color-primary);
  border-radius: 50%;
}
.feature-content { text-align: left; }
.feature-num-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.feature-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}
.feature-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.outcome-list { display: flex; flex-direction: column; gap: var(--space-3); }
.outcome-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}
.outcome-item strong { color: var(--text-heading); }
.outcome-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }

/* ── Niche vault ── */
.niche-vault {
  background: var(--bg-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-10);
}
.vault-header {
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}
.vault-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.vault-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}
.vault-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
}

.niche-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-4);
}
.niche-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.niche-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.niche-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.niche-icon { font-size: 1.5rem; } /* Kept as emoji for niche flavor */
.niche-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.niche-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-1);
}
.niche-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: var(--space-3);
}
.niche-demand {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}

/* ── Reseller modules ── */
.reseller-vault {
  background: var(--bg-white);
  border: 2px solid var(--color-secondary-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-lg);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--space-4);
}
.module-card {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-fast) var(--ease-out);
}
.module-card:hover { transform: translateY(-2px); }
.module-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.module-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
  line-height: 1.3;
}
.module-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: var(--space-3);
}
.module-value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
}

/* ── Capabilities strip ── */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.cap-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.cap-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}
.cap-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Completeness box ── */
.completeness-box {
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-secondary-soft) 100%);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}
.completeness-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}
.completeness-desc {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
}

/* ── Section bridge ── */
.section-bridge { max-width: 760px; margin-inline: auto; }
.bridge-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: inline-block;
}
.bridge-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}
.bridge-desc {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}
.scroll-hint {
  display: flex;
  justify-content: center;
}
.scroll-hint svg {
  width: 24px; height: 24px;
  color: var(--text-muted);
  animation: bounce-down 2s ease-in-out infinite;
}

/* ==========================================================================
   18. SECTION 14 — TRANSFORMATION
   ========================================================================== */
.transformation-section {
  position: relative;
  overflow: hidden;
}

/* ── Split Dual-State Showcase ── */
.transformation-showcase {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-12);
  align-items: stretch;
  position: relative;
}

.transformation-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-std) var(--ease-out), box-shadow var(--duration-std) var(--ease-out);
}

.transformation-card.card-before {
  background: rgba(30, 27, 46, 0.7);
  border: 1px solid rgba(220, 38, 38, 0.3);
}

.transformation-card.card-after {
  background: rgba(41, 38, 61, 0.95);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 30px rgba(22, 163, 74, 0.15), var(--shadow-lg);
}

.transformation-card:hover {
  transform: translateY(-4px);
}

.state-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
  align-self: flex-start;
}

.badge-before {
  background: var(--color-danger-soft);
  color: #F87171;
  border: 1px solid var(--color-danger-border);
}

.badge-after {
  background: var(--color-accent-soft);
  color: #4ADE80;
  border: 1px solid var(--color-accent-border);
}

.state-visual-wrapper {
  margin-bottom: var(--space-6);
  position: relative;
}

.state-visual-badge {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-light);
  backdrop-filter: blur(8px);
}

.state-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}

.state-card-desc {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.state-points-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}

.state-point-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.card-before .state-point-item {
  color: rgba(250, 250, 248, 0.75);
}

.card-after .state-point-item {
  color: var(--text-light);
}

.state-point-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.card-before .state-point-item svg {
  color: #F87171;
}

.card-after .state-point-item svg {
  color: #4ADE80;
}

/* ── Transformation Conduit Bridge ── */
.transformation-bridge-conduit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  text-align: center;
  background: var(--bg-dark-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

.conduit-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #60A5FA;
  animation: pulse-dot 2.5s infinite;
}

.conduit-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

.conduit-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60A5FA;
}

.conduit-sub {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-light-muted);
}

/* ── Dimensional Transformation Matrix ── */
.dimensions-header {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  text-align: center;
}

.dimensions-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}

.dimensions-subtitle {
  font-size: var(--text-base);
  color: var(--text-light-muted);
  max-width: 680px;
  margin-inline: auto;
}

.dimensions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
}

.dimension-card {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast);
}

.dimension-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.dimension-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.dim-name-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dim-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  color: #60A5FA;
}

.dim-icon svg {
  width: 20px;
  height: 20px;
}

.dim-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-light);
}

.dim-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.15);
  color: #93C5FD;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.dim-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.dim-step {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.dim-step-before {
  background: rgba(220, 38, 38, 0.08);
  border-left: 3px solid #EF4444;
  color: rgba(250, 250, 248, 0.7);
}

.dim-step-before strong {
  color: #F87171;
}

.dim-step-after {
  background: rgba(22, 163, 74, 0.1);
  border-left: 3px solid #22C55E;
  color: var(--text-light);
}

.dim-step-after strong {
  color: #4ADE80;
}

.dim-impact {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: var(--space-2);
}

.dim-impact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Transformation Synthesis ── */
.transformation-synthesis-box {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.synthesis-quote-icon {
  width: 44px;
  height: 44px;
  margin-inline: auto;
  margin-bottom: var(--space-3);
  color: var(--color-secondary);
}

.synthesis-quote-icon svg {
  width: 100%;
  height: 100%;
}

.synthesis-headline {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.synthesis-paragraph {
  font-size: var(--text-base);
  color: var(--text-light-muted);
  max-width: 800px;
  margin-inline: auto;
  line-height: 1.7;
}

.synthesis-paragraph strong {
  color: var(--text-light);
}

/* ==========================================================================
   19. SECTION 16 — HOW IT WORKS
   ========================================================================== */
.how-it-works-section {
  position: relative;
}

.how-spotlight-wrapper {
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  position: relative;
}

.how-spotlight-chip {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-light);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-heading);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}

.how-spotlight-chip svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

/* ── Process Steps Grid ── */
.how-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.how-step-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--duration-std) var(--ease-out), box-shadow var(--duration-std) var(--ease-out);
}

.how-step-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.how-step-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.how-step-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.step-badge-01 { background: var(--color-primary-soft); color: var(--color-primary); border: 1px solid var(--color-primary-border); }
.step-badge-02 { background: var(--color-secondary-soft); color: var(--color-secondary); border: 1px solid var(--color-secondary-border); }
.step-badge-03 { background: var(--color-accent-soft); color: var(--color-accent); border: 1px solid var(--color-accent-border); }
.step-badge-04 { background: rgba(147, 51, 234, 0.08); color: #9333EA; border: 1px solid rgba(147, 51, 234, 0.2); }

.how-step-time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.how-step-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: var(--space-2);
}

.how-step-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

/* ── Split Responsibility Pills ── */
.responsibility-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  background: var(--bg-muted);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.resp-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.resp-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.tag-you {
  background: #E2E8F0;
  color: #1E293B;
}

.tag-ai {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
}

.resp-text {
  color: var(--text-body);
}

.how-step-outcome {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.how-step-outcome svg {
  width: 14px;
  height: 14px;
}

/* ── Post-Purchase Instant Delivery Box ── */
.post-purchase-box {
  background: var(--bg-white);
  border: 2px solid var(--color-primary-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-md);
}

.purchase-flow-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.purchase-flow-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-1);
}

.purchase-flow-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.delivery-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.delivery-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.delivery-step-num {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.delivery-step-content {
  flex-grow: 1;
}

.delivery-step-title {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.delivery-step-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.45;
}

/* ── Friction Removal Checklist ── */
.friction-checklist-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-6);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-8);
}

.friction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-heading);
}

.friction-pill svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

/* ==========================================================================
   20. SECTION 17 — PRODUCT DEEP DIVE
   ========================================================================== */
.deep-dive-section {
  position: relative;
  overflow: hidden;
}

/* ── Deep Dive Station Card ── */
.deep-dive-station {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-10);
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: border-color var(--duration-fast);
}

.deep-dive-station:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.station-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.station-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(37, 99, 235, 0.15);
  color: #60A5FA;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

.station-pill-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-light-muted);
}

.station-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.station-content-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.station-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.25;
}

.station-lead {
  font-size: var(--text-base);
  color: var(--text-light-muted);
  line-height: 1.6;
}

.station-features-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.station-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-light);
  line-height: 1.5;
}

.station-feature-item svg {
  width: 18px;
  height: 18px;
  color: #4ADE80;
  flex-shrink: 0;
  margin-top: 2px;
}

.station-feature-item strong {
  color: #F8FAFC;
}

/* ── Live Script Console Preview ── */
.script-console-box {
  background: #0B0A12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: var(--space-4);
}

.console-top-bar {
  background: #181524;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.console-dots {
  display: flex;
  gap: 6px;
}

.console-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.dot-red { background: #EF4444; }
.dot-yellow { background: #F59E0B; }
.dot-green { background: #10B981; }

.console-filename {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-light-muted);
}

.console-code-body {
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #E2E8F0;
  max-height: 220px;
  overflow-y: auto;
}

.code-highlight {
  color: #60A5FA;
}

.code-sfx {
  color: #F97316;
  font-weight: 700;
}

.code-dialogue {
  color: #4ADE80;
}

.code-prompt {
  color: #C084FC;
}

/* ── Niche Breakdown Micro-Pills ── */
.niche-micro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.niche-micro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--text-light);
}

/* ── Deep Dive Tour Synthesis Callout ── */
.deep-dive-synthesis {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  max-width: 960px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.deep-dive-synthesis-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}

.deep-dive-synthesis-text {
  font-size: var(--text-base);
  color: var(--text-light-muted);
  max-width: 780px;
  margin-inline: auto;
  line-height: 1.7;
}

/* ==========================================================================
   21. RESPONSIVE BREAKPOINTS (Mobile-First)
   ========================================================================== */

@media (min-width: 640px) {
  .hero-chips { gap: var(--space-3); }
  .agitation-cards { grid-template-columns: repeat(3, 1fr); }
  .comparison-grid { grid-template-columns: repeat(2, 1fr); }
  .niche-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .delivery-timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1fr 1.1fr; }
  .hero-content { order: 1; }
  .hero-visual { order: 2; }

  .workflow-timeline { grid-template-columns: repeat(3, 1fr); }

  .problem-grid { grid-template-columns: 1fr 1.1fr; }

  .benefit-hero-inner { grid-template-columns: 1.1fr 0.9fr; }
  .benefit-hero-visual .img-frame { border-radius: var(--radius-lg) 0 0 var(--radius-lg); height: 100%; }

  .feature-split { grid-template-columns: 1.1fr 0.9fr; }

  .mechanism-stages { grid-template-columns: repeat(2, 1fr); }
  .mechanism-contrast { grid-template-columns: 1fr 1fr; }

  .comparison-grid { grid-template-columns: repeat(4, 1fr); }

  .transformation-showcase {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
  }
  .transformation-bridge-conduit {
    flex-direction: column;
    padding: var(--space-6) var(--space-3);
    min-width: 120px;
  }
  .dim-flow {
    grid-template-columns: 1fr 1fr;
  }

  .station-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================================
   21. SECTION 18 — TESTIMONIALS
   ========================================================================== */
.testimonials-section {
  position: relative;
}

.testimonial-hero-card {
  background: var(--bg-white);
  border: 2px solid var(--color-primary-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.testimonial-hero-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: var(--color-primary);
}

.hero-quote-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
}

.hero-quote-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.35;
  margin-bottom: var(--space-4);
}

.hero-quote-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}

.author-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.author-avatar-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.author-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
}

.author-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.author-tag-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-accent-border);
}

/* ── Supporting Testimonials Grid ── */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.testimonial-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-std) var(--ease-out), box-shadow var(--duration-std) var(--ease-out);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  color: #F59E0B;
  margin-bottom: var(--space-3);
}

.testimonial-stars svg {
  width: 16px;
  height: 16px;
}

.testimonial-body {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

.testimonial-body strong {
  color: var(--text-heading);
}

.testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}

.author-micro {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.author-micro-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.avatar-blue { background: var(--color-primary); }
.avatar-orange { background: var(--color-secondary); }
.avatar-green { background: var(--color-accent); }
.avatar-purple { background: #9333EA; }

.author-micro-name {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-heading);
}

.author-micro-role {
  font-size: 11px;
  color: var(--text-muted);
}

.verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ── Social Proof Metrics Strip ── */
.proof-metrics-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  background: var(--bg-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  text-align: center;
}

.proof-metric-val {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--text-heading);
}

.proof-metric-lbl {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

/* ==========================================================================
   22. SECTION 19 — CASE STUDIES / PROOF (Deep Ink Dark)
   ========================================================================== */
.case-studies-section {
  position: relative;
  overflow: hidden;
}

.case-study-hero {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.case-study-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.case-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4ADE80;
  background: rgba(34, 197, 94, 0.15);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(34, 197, 94, 0.3);
  margin-bottom: var(--space-3);
}

.case-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.case-desc {
  font-size: var(--text-sm);
  color: var(--text-light-muted);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.case-timeline-flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.case-flow-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-light);
}

.case-step-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.tag-problem { background: rgba(239, 68, 68, 0.2); color: #F87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.tag-pipeline { background: rgba(59, 130, 246, 0.2); color: #60A5FA; border: 1px solid rgba(59, 130, 246, 0.3); }
.tag-outcome { background: rgba(34, 197, 94, 0.2); color: #4ADE80; border: 1px solid rgba(34, 197, 94, 0.3); }

.case-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.case-metric-num {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: #4ADE80;
}

.case-metric-label {
  font-size: 10px;
  color: var(--text-light-muted);
}

/* ── Supporting Case Studies Grid ── */
.case-studies-subgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-10);
}

.case-subcard {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}

.case-subcard-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  color: #FB923C;
  margin-bottom: var(--space-2);
}

.case-subcard-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-light);
  margin-bottom: var(--space-2);
}

.case-subcard-text {
  font-size: var(--text-xs);
  color: var(--text-light-muted);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  flex-grow: 1;
}

.case-subcard-metric {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #4ADE80;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   23. SECTION 20 — AUTHORITY (Warm Paper / Studio Light)
   ========================================================================== */
.authority-section {
  position: relative;
}

.authority-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-10);
}

.authority-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--text-heading);
  line-height: 1.25;
  margin-bottom: var(--space-3);
}

.authority-manifesto {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: var(--space-6);
}

.authority-manifesto strong {
  color: var(--text-heading);
}

/* ── 4 Authority Pillars ── */
.authority-pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.authority-pillar-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.pillar-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pillar-icon svg {
  width: 22px;
  height: 22px;
}

.pillar-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 2px;
}

.pillar-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Authority Trust Banner ── */
.authority-trust-banner {
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
  margin-bottom: var(--space-10);
}

/* ==========================================================================
   21. SECTION 21 — OFFER REVEAL (Warm Paper / Crisp White)
   ========================================================================== */
.offer-reveal-section {
  padding-block: var(--space-12);
  background-color: var(--bg-white);
  position: relative;
}

.offer-master-box {
  background: var(--bg-light);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.offer-master-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
}

.offer-reveal-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

.offer-core-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.offer-summary-text {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.offer-items-list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.offer-item-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.offer-item-row:hover {
  transform: translateX(4px);
  border-color: var(--color-primary);
}

.offer-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.offer-item-name {
  font-weight: 700;
  color: var(--text-heading);
  font-size: var(--text-sm);
  display: block;
}

.offer-item-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.4;
}

.offer-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.offer-meta-pill {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(22, 163, 74, 0.1);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   22. SECTION 22 — BONUS STACK (Deep Ink Dark #1E1B2E)
   ========================================================================== */
.bonus-stack-section {
  padding-block: var(--space-12);
  background-color: var(--bg-dark);
  color: #FFFFFF;
  position: relative;
}

.bonus-flagship-card {
  background: var(--bg-dark-card);
  border: 2px solid var(--color-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15);
  position: relative;
  overflow: hidden;
}

.bonus-flagship-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-secondary);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 9999px;
  margin-bottom: var(--space-3);
}

.bonus-flagship-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: #FFFFFF;
  margin-bottom: var(--space-2);
}

.bonus-flagship-desc {
  font-size: var(--text-sm);
  color: #CBD5E1;
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.bonus-grid {
  display: grid;
  gap: var(--space-4);
}

.bonus-subcard {
  background: rgba(41, 38, 61, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.bonus-subcard:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.25);
}

.bonus-num-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  display: block;
}

.bonus-subcard-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: #FFFFFF;
  margin-bottom: var(--space-2);
}

.bonus-subcard-text {
  font-size: var(--text-xs);
  color: #94A3B8;
  line-height: 1.5;
}

.bonus-val-tag {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #22C55E;
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}

/* ==========================================================================
   23. SECTION 23 — VALUE STACK & 24. PRICE REVEAL (Crisp White / Warm Paper)
   ========================================================================== */
.value-pricing-section {
  padding-block: var(--space-12);
  background-color: var(--bg-light);
  position: relative;
}

.value-table-card {
  background: var(--bg-white);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.value-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--border-color);
}

.value-item-row:last-child {
  border-bottom: none;
}

.value-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.value-check-icon {
  color: var(--color-accent);
  flex-shrink: 0;
}

.value-item-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-heading);
}

.value-item-worth {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
}

.value-total-box {
  background: rgba(37, 99, 235, 0.05);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
}

.value-total-label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
}

.value-total-num {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
}

/* Master Pricing Card (Section 24) */
.pricing-master-card {
  background: var(--bg-white);
  border: 3px solid var(--color-accent);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 40px rgba(22, 163, 74, 0.15);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 680px;
  margin-inline: auto;
}

.pricing-ribbon {
  position: absolute;
  top: 18px;
  right: -32px;
  transform: rotate(45deg);
  background: var(--color-secondary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px 36px;
  box-shadow: var(--shadow-sm);
}

.price-strike-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.price-strike {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  color: var(--color-danger);
  text-decoration: line-through;
  font-weight: 700;
}

.price-discount-pill {
  background: rgba(220, 38, 38, 0.1);
  color: var(--color-danger);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
}

.price-hero-num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.price-hero-sub {
  font-size: var(--text-sm);
  color: var(--text-body);
  font-weight: 600;
  margin-bottom: var(--space-6);
}

.btn-purchase-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 520px;
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 800;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  margin-bottom: var(--space-4);
}

.btn-purchase-cta:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.45);
}

.post-click-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.post-click-badges span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   26. SECTION 26 — 30-DAY GUARANTEE (Premium Certificate Style)
   ========================================================================== */
.guarantee-section {
  padding-block: var(--space-16);
  background-color: var(--bg-white);
  position: relative;
}

.guarantee-cert-card {
  max-width: 960px;
  margin-inline: auto;
  background: linear-gradient(135deg, #FFFDF0 0%, #FEF9C3 50%, #FEF08A 100%);
  border: 2px solid #EAB308;
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  box-shadow: 0 10px 30px rgba(234, 179, 8, 0.15), inset 0 0 0 4px rgba(254, 240, 138, 0.5);
  position: relative;
  overflow: hidden;
}

.guarantee-cert-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .guarantee-cert-grid {
    grid-template-columns: 200px 1fr;
    gap: var(--space-10);
  }
}

.guarantee-seal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.guarantee-gold-seal {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FDE047 0%, #EAB308 60%, #CA8A04 100%);
  border: 4px solid #FEF08A;
  box-shadow: 0 8px 24px rgba(202, 138, 4, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #713F12;
  text-align: center;
  position: relative;
}

.guarantee-seal-stars {
  font-size: 11px;
  letter-spacing: 2px;
  color: #713F12;
  margin-bottom: 2px;
}

.guarantee-seal-days {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: #451A03;
}

.guarantee-seal-sub {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #713F12;
  margin-top: 2px;
}

.guarantee-content-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.guarantee-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(161, 98, 7, 0.12);
  color: #713F12;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 9999px;
  width: fit-content;
  border: 1px solid rgba(161, 98, 7, 0.2);
}

.guarantee-main-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 800;
  color: #451A03;
  line-height: 1.25;
  margin: 0;
}

.guarantee-lead-text {
  font-size: var(--text-base);
  color: #713F12;
  line-height: 1.65;
  margin: 0;
}

.guarantee-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.guarantee-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: #582C05;
  line-height: 1.5;
}

.guarantee-bullet-item svg {
  color: #15803D;
  background: #DCFCE7;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ==========================================================================
   27. SECTION 27 — FAQ / OBJECTION HANDLING (Deep Ink Dark)
   ========================================================================== */
.faq-section {
  padding-block: var(--space-16);
  background-color: var(--bg-dark);

  color: #FFFFFF;
  position: relative;
}

.faq-list {
  display: grid;
  gap: var(--space-4);
  max-width: 820px;
  margin-inline: auto;
}

.faq-card {
  background: var(--bg-dark-card);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-fast);
}

.faq-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
}

.faq-q {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.faq-q-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-primary);
  background: rgba(37, 99, 235, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
}

.faq-a {
  font-size: var(--text-sm);
  color: #CBD5E1;
  line-height: 1.6;
  padding-left: calc(var(--space-3) + 24px);
}

/* ==========================================================================
   28. SECTION 28 — URGENCY & FOOTER (Deep Ink Dark)
   ========================================================================== */
.urgency-section {
  padding-block: var(--space-12);
  background: linear-gradient(180deg, var(--bg-dark) 0%, #110E1C 100%);
  color: #FFFFFF;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.urgency-box {
  background: rgba(220, 38, 38, 0.08);
  border: 2px solid rgba(220, 38, 38, 0.3);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.urgency-badge {
  background: var(--color-danger);
  color: #FFFFFF;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 9999px;
  display: inline-block;
  margin-bottom: var(--space-3);
}

.urgency-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: #FFFFFF;
  margin-bottom: var(--space-3);
}

.urgency-desc {
  font-size: var(--text-sm);
  color: #CBD5E1;
  line-height: 1.6;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.site-footer {
  padding-block: var(--space-8);
  background-color: #0B0A12;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: #64748B;
  font-size: var(--text-xs);
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.footer-links a {
  color: #94A3B8;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-disclaimer {
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.5;
}

/* ==========================================================================
   24. RESPONSIVE BREAKPOINTS (Mobile-First)
   ========================================================================== */

@media (min-width: 640px) {
  .hero-chips { gap: var(--space-3); }
  .agitation-cards { grid-template-columns: repeat(3, 1fr); }
  .comparison-grid { grid-template-columns: repeat(2, 1fr); }
  .niche-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .delivery-timeline { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-metrics-strip { grid-template-columns: repeat(4, 1fr); }
  .case-studies-subgrid { grid-template-columns: repeat(2, 1fr); }
  .authority-pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .bonus-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .hero-grid { grid-template-columns: 1fr 1.1fr; }
  .hero-content { order: 1; }
  .hero-visual { order: 2; }

  .workflow-timeline { grid-template-columns: repeat(3, 1fr); }

  .problem-grid { grid-template-columns: 1fr 1.1fr; }

  .benefit-hero-inner { grid-template-columns: 1.1fr 0.9fr; }
  .benefit-hero-visual .img-frame { border-radius: var(--radius-lg) 0 0 var(--radius-lg); height: 100%; }

  .feature-split { grid-template-columns: 1.1fr 0.9fr; }

  .mechanism-stages { grid-template-columns: repeat(2, 1fr); }
  .mechanism-contrast { grid-template-columns: 1fr 1fr; }

  .comparison-grid { grid-template-columns: repeat(4, 1fr); }

  .transformation-showcase {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4);
  }
  .transformation-bridge-conduit {
    flex-direction: column;
    padding: var(--space-6) var(--space-3);
    min-width: 120px;
  }
  .dim-flow {
    grid-template-columns: 1fr 1fr;
  }

  .station-grid {
    grid-template-columns: 1fr 1fr;
  }

  .case-study-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .authority-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .offer-reveal-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .guarantee-box {
    grid-template-columns: 180px 1fr;
  }
}

@media (min-width: 1024px) {
  .ecosystem-pillars { grid-template-columns: repeat(4, 1fr); }
  .mechanism-stages { grid-template-columns: repeat(4, 1fr); }
  .niche-grid { grid-template-columns: repeat(4, 1fr); }
  .module-grid { grid-template-columns: repeat(3, 1fr); }
  .dimensions-grid { grid-template-columns: repeat(2, 1fr); }
  .dimension-card:nth-child(5) { grid-column: span 2; }
  .how-steps-grid { grid-template-columns: repeat(4, 1fr); }
  .delivery-timeline { grid-template-columns: repeat(4, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   25. KEYFRAMES
   ========================================================================== */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

@keyframes bounce-down {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(6px); }
  60% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot, .scroll-hint svg { animation: none; }
}

/* ==========================================================================
   26. OTO & FUNNEL SPECIFIC COMPONENTS
   ========================================================================== */

/* Top Urgency Header Bar */
.oto-alert-header {
  background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
  color: #FFFFFF;
  padding: 12px 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.oto-alert-header .alert-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.oto-alert-header svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  animation: pulse-dot 1.5s infinite ease-in-out;
}

/* Step Progress Indicator */
.funnel-progress-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: var(--space-4) auto var(--space-6);
  flex-wrap: wrap;
}

.funnel-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--font-display);
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-muted);
  border: 1px solid rgba(0,0,0,0.06);
}

.funnel-step.completed {
  background: rgba(22, 163, 74, 0.1);
  color: #16A34A;
  border-color: rgba(22, 163, 74, 0.25);
}

.funnel-step.active {
  background: #2563EB;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  border-color: #2563EB;
}

.funnel-step-arrow {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* No Thanks Decline Link Section */
.no-thanks-wrap {
  text-align: center;
  padding: var(--space-8) var(--space-4) var(--space-12);
  max-width: 720px;
  margin: 0 auto;
}

.no-thanks-link {
  display: inline-block;
  color: #64748B;
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.02rem);
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color var(--duration-fast) ease, transform var(--duration-fast) ease;
  line-height: 1.5;
  cursor: pointer;
}

.no-thanks-link:hover {
  color: #DC2626;
  transform: translateY(-1px);
}

.no-thanks-disclaimer {
  font-size: 0.82rem;
  color: #94A3B8;
  margin-top: var(--space-2);
  line-height: 1.4;
}

/* ==========================================================================
   27. THANK YOU PORTAL SPECIFIC COMPONENTS
   ========================================================================== */
.thankyou-hero {
  background: linear-gradient(180deg, #EFF6FF 0%, #FAFAF8 100%);
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: 1px solid var(--border-light);
}

/* High-Contrast Email & SPAM Alert Notice */
.spam-alert-box {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #F59E0B;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-6) 0 var(--space-10);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.18);
  position: relative;
  overflow: hidden;
}

.spam-alert-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #D97706;
}

.spam-alert-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}

.spam-alert-header svg {
  width: 32px;
  height: 32px;
  color: #D97706;
  flex-shrink: 0;
  animation: bounce-down 2s infinite ease-in-out;
}

.spam-alert-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 700;
  color: #92400E;
  line-height: 1.3;
}

.spam-alert-desc {
  font-size: clamp(0.92rem, 0.88rem + 0.25vw, 1.05rem);
  color: #78350F;
  line-height: 1.6;
}

.spam-alert-desc strong {
  color: #B45309;
  background: rgba(245, 158, 11, 0.15);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Access Downloads Grid */
.access-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-8) 0;
}

@media (min-width: 768px) {
  .access-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.access-product-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.access-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.access-product-card.featured {
  border-color: #2563EB;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12);
}

.access-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  font-family: var(--font-mono);
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}

.badge-fe { background: rgba(37, 99, 235, 0.1); color: #2563EB; }
.badge-oto1 { background: rgba(249, 115, 22, 0.1); color: #EA580C; }
.badge-oto2 { background: rgba(22, 163, 74, 0.1); color: #16A34A; }

.access-card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}

.access-card-desc {
  font-size: 0.92rem;
  color: var(--text-body);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

.access-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  background: #16A34A;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
  transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.access-btn:hover {
  background: #15803D;
  transform: translateY(-2px);
}

.access-btn-alt {
  background: #2563EB;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.access-btn-alt:hover {
  background: #1D4ED8;
}

/* Step Onboarding Cards */
.onboard-step-item {
  display: flex;
  gap: var(--space-4);
  background: var(--bg-white);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-4);
  align-items: flex-start;
}

.onboard-number {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2563EB;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.onboard-content h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.onboard-content p {
  font-size: 0.92rem;
  color: var(--text-body);
}

/* Support Help Card */
.support-hub-card {
  background: linear-gradient(135deg, #1E1B2E 0%, #29263D 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8);
  text-align: center;
  margin: var(--space-10) 0;
}

.support-hub-card h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin-bottom: var(--space-2);
  color: #FFFFFF;
}

.support-hub-card p {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto var(--space-6);
}

/* ==========================================================================
   28. JV PAGE SPECIFIC STYLING
   ========================================================================== */
.jv-top-strip {
  background: #111827;
  color: #F3F4F6;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-size: 0.9rem;
}

.jv-top-strip .strip-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.jv-launch-date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #F59E0B;
}

.wplus-badge-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #F59E0B;
  color: #111827;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-decoration: none;
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease;
}

.wplus-badge-btn:hover {
  background: #D97706;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* Contest Cards */
.contest-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (min-width: 768px) {
  .contest-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.contest-card {
  background: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.contest-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

.contest-card.gold-tier {
  border-color: #F59E0B;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
  box-shadow: 0 12px 35px rgba(245, 158, 11, 0.2);
}

.contest-card.silver-tier {
  border-color: #94A3B8;
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
}

.contest-card.bronze-tier {
  border-color: #D97706;
  background: linear-gradient(180deg, #FFF7ED 0%, #FFFFFF 100%);
}

.prize-amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  margin: var(--space-3) 0 var(--space-2);
}

.gold-tier .prize-amount { color: #D97706; }
.silver-tier .prize-amount { color: #475569; }
.bronze-tier .prize-amount { color: #C2410C; }

.sales-milestone {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: var(--space-4);
}

/* Email Swipe Boxes */
.swipe-accordion-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.swipe-header {
  background: #F8FAFC;
  padding: var(--space-4) var(--space-6);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 12px;
}

.swipe-header h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-heading);
}

.copy-swipe-btn {
  background: #2563EB;
  color: #FFFFFF;
  border: none;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--duration-fast) ease;
}

.copy-swipe-btn:hover {
  background: #1D4ED8;
}

.swipe-content {
  padding: var(--space-6);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-body);
  background: #FFFFFF;
}

.swipe-subject-line {
  background: #EFF6FF;
  border-left: 3px solid #2563EB;
  padding: 8px 14px;
  margin-bottom: var(--space-4);
  font-weight: 700;
  color: #1E40AF;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ==========================================================================
   29. LEGAL & CONTACT PAGES DESIGN SYSTEM
   ========================================================================== */

/* Legal & Contact Global Nav Bar */
.site-nav-header {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-4) 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
}

.site-nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--text-heading);
}

.site-logo-badge {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.site-nav-links a {
  color: var(--text-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: all var(--duration-fast) ease;
}

.site-nav-links a:hover,
.site-nav-links a.active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.site-nav-cta {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 18px !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.site-nav-cta:hover {
  background: var(--color-primary-hover) !important;
  color: #FFFFFF !important;
}

/* Legal Page Header Banner */
.legal-hero {
  background: linear-gradient(180deg, #1E1B2E 0%, #12101D 100%);
  color: #FFFFFF;
  padding: var(--space-12) 0 var(--space-10);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.legal-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 260px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.3) 0%, rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}

.legal-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-light-muted);
  margin-bottom: var(--space-3);
  position: relative;
}

.legal-breadcrumb a {
  color: #93C5FD;
  text-decoration: none;
}

.legal-breadcrumb a:hover {
  text-decoration: underline;
}

.legal-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3rem);
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: #FFFFFF;
  position: relative;
}

.legal-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-light-muted);
  background: rgba(255, 255, 255, 0.08);
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

/* Legal Document Body Container */
.legal-page-body {
  padding: var(--space-10) 0 var(--space-16);
  background: var(--bg-light);
}

.legal-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(24px, 18px + 2vw, 56px);
  box-shadow: var(--shadow-md);
  max-width: 920px;
  margin: 0 auto;
}

.legal-card h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--text-heading);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
}

.legal-card h2:first-of-type {
  margin-top: 0;
}

.legal-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-heading);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.legal-card p,
.legal-card li {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: var(--space-4);
}

.legal-card ul,
.legal-card ol {
  padding-left: 24px;
  margin-bottom: var(--space-4);
}

.legal-card li {
  margin-bottom: 8px;
}

.legal-card strong {
  color: var(--text-heading);
}

.legal-callout-box {
  background: #EFF6FF;
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-6);
  margin: var(--space-6) 0;
}

.legal-callout-box.warning {
  background: #FEF3C7;
  border-left-color: #D97706;
}

.legal-callout-box.success {
  background: #ECFDF5;
  border-left-color: var(--color-accent);
}

.legal-callout-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-heading);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-email-badge {
  display: inline-block;
  background: #DBEAFE;
  color: #1E40AF;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}

.legal-email-badge:hover {
  background: #BFDBFE;
}

/* Contact Us Specific Styling */
.contact-hub-wrapper {
  max-width: 960px;
  margin: 0 auto;
}

.contact-hero-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 24px + 2vw, 56px);
  text-align: center;
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}

.contact-hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
}

.contact-hero-icon {
  width: 64px;
  height: 64px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--color-primary);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.contact-hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.5rem);
  color: var(--text-heading);
  margin-bottom: var(--space-2);
}

.contact-hero-desc {
  font-family: var(--font-body);
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto var(--space-6);
  line-height: 1.7;
}

.contact-hero-email-box {
  background: #F8FAFC;
  border: 2px dashed rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 580px;
  width: 100%;
  margin-bottom: var(--space-6);
}

.contact-email-link {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.45rem);
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  word-break: break-all;
  transition: color var(--duration-fast) ease;
}

.contact-email-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.contact-btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.btn-contact-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1D4ED8 100%);
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: all var(--duration-fast) ease;
  border: none;
  cursor: pointer;
}

.btn-contact-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.btn-contact-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  border: 1.5px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-fast) ease;
  cursor: pointer;
}

.btn-contact-secondary:hover {
  background: #F1F5F9;
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.contact-info-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.contact-info-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.contact-icon-wrapper.blue { background: rgba(37, 99, 235, 0.1); color: var(--color-primary); }
.contact-icon-wrapper.orange { background: rgba(249, 115, 22, 0.1); color: var(--color-secondary); }
.contact-icon-wrapper.green { background: rgba(22, 163, 74, 0.1); color: var(--color-accent); }

.contact-card-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.contact-card-text {
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 0;
}

.contact-checklist-card {
  background: #F8FAFC;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-12);
}

.contact-checklist-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-heading);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-checklist-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}

.contact-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-body);
  line-height: 1.5;
}

.contact-checklist-item svg {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Toast Message */
.toast-notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1E293B;
  color: #FFFFFF;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  z-index: 1000;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: all 300ms var(--ease-out);
}

.toast-notice.show {
  opacity: 1;
  transform: translateY(0);
}