/* ============================================================
   5 STAR REACH — style.css
   Mission: Business Web Care | Build v1.0
   Primary domain: 5starreach.com
   ============================================================ */

/* === DESIGN TOKEN MANIFEST === */
/* Single source of truth for all visual decisions.
   All component rules reference only these tokens.
   Do not hardcode raw values in component rules. */

:root {

  /* --- Colors --- */
  --color-charcoal:           #2D2D2D;   /* Primary dark — hero, nav, footer */
  --color-charcoal-deep:      #1A1A1A;   /* Deeper dark — hover states, emphasis */
  --color-charcoal-mid:       #3D3D3D;   /* Mid dark — cards on dark bg */
  --color-gold:               #F4C430;   /* Review Gold — CTAs, stars, accents */
  --color-gold-dark:          #D4A820;   /* Gold hover/pressed state */
  --color-gold-deeper:        #B8901A;   /* Gold active state */
  --color-gold-subtle:        rgba(244, 196, 48, 0.12); /* Gold tint for cards */
  --color-gold-glow:          rgba(244, 196, 48, 0.25); /* Gold shadow/glow */
  --color-white:              #FFFFFF;
  --color-surface:            #F8F8F8;   /* Alternating section bg */
  --color-surface-alt:        #F2F2F2;   /* Card backgrounds on white */
  --color-text-primary:       #1A1A1A;   /* Body text on light bg */
  --color-text-secondary:     #555555;   /* Secondary text */
  --color-text-muted:         #888888;   /* Muted / captions */
  --color-text-on-dark:       #FFFFFF;   /* Text on charcoal bg */
  --color-text-on-dark-sub:   rgba(255, 255, 255, 0.78); /* Subtext on dark */
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.5);  /* Muted on dark */
  --color-border:             #E5E5E5;   /* Light borders */
  --color-border-dark:        rgba(255, 255, 255, 0.12); /* Borders on dark bg */
  --color-success:            #2D9B5A;   /* Positive / confirmed states */
  --color-danger:             #C0392B;   /* Error states */

  /* --- Typography --- */
  --font-display:   'Montserrat', sans-serif;   /* Headlines, nav, CTAs */
  --font-body:      'Inter', sans-serif;         /* Body copy, UI */
  --font-data:      'Sora', sans-serif;          /* Stats, numbers, pricing */

  /* --- Font Sizes (fluid with clamp) --- */
  --text-display:   clamp(2.5rem,  6vw,  4.5rem);   /* Hero H1 */
  --text-h1:        clamp(2.25rem, 5vw,  3.5rem);
  --text-h2:        clamp(1.6rem,  3.5vw, 2.5rem);
  --text-h3:        clamp(1.2rem,  2.5vw, 1.5rem);
  --text-h4:        clamp(1rem,    2vw,   1.25rem);
  --text-body-lg:   clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body:      clamp(1rem,    1.5vw,  1.125rem);
  --text-small:     0.9375rem;  /* 15px */
  --text-xs:        0.8125rem;  /* 13px */
  --text-label:     0.75rem;    /* 12px — badges, labels */

  /* --- Font Weights --- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 900;

  /* --- Line Heights --- */
  --leading-tight:    1.15;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;
  --leading-loose:    1.8;

  /* --- Letter Spacing --- */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.12em;

  /* --- Spacing (8px base unit) --- */
  --space-1:    0.5rem;    /*  8px */
  --space-2:    1rem;      /* 16px */
  --space-3:    1.5rem;    /* 24px */
  --space-4:    2rem;      /* 32px */
  --space-5:    2.5rem;    /* 40px */
  --space-6:    3rem;      /* 48px */
  --space-8:    4rem;      /* 64px */
  --space-10:   5rem;      /* 80px */
  --space-12:   6rem;      /* 96px */
  --space-16:   8rem;      /* 128px */

  /* --- Section Padding --- */
  --section-padding-y:  clamp(3.5rem, 8vw, 6.5rem);
  --section-padding-x:  1.5rem;

  /* --- Max Widths --- */
  --max-width:        1240px;
  --max-width-text:   740px;
  --max-width-narrow: 580px;
  --max-width-wide:   1440px;

  /* --- Border Radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 9999px;

  /* --- Shadows --- */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.18);
  --shadow-gold:  0 4px 24px rgba(244, 196, 48, 0.30);
  --shadow-gold-lg: 0 8px 40px rgba(244, 196, 48, 0.40);

  /* --- Transitions --- */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index Scale --- */
  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* --- Breakpoints (reference only — used in media queries) ---
     --bp-sm:  480px
     --bp-md:  768px
     --bp-lg:  1024px
     --bp-xl:  1280px
  */
}

/* ============================================================
   RESET & BASE
   ============================================================ */

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

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

/* Smooth scroll only on desktop — on mobile it causes scroll to feel sticky between sections */
@media (min-width: 768px) {
  html {
    scroll-behavior: smooth;
  }
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Dark mode — minimal adjustment, not a full theme */
@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--color-charcoal-deep);
    color: var(--color-text-on-dark);
  }
}

/* Defensive CSS — content stress test */
img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

img,
video {
  object-fit: cover;
}

iframe,
embed {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

p {
  overflow-wrap: break-word;
}

/* Prevent long strings from blowing out containers */
* {
  overflow-wrap: break-word;
}

/* Focus styles for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip to main content */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-1) var(--space-2);
  background: var(--color-gold);
  color: var(--color-charcoal-deep);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  border-radius: var(--radius-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-2);
}

/* Print */
@media print {
  .site-header,
  .mobile-nav,
  .hero-cta-group,
  .platforms-section,
  footer {
    display: none;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

.container--narrow {
  max-width: var(--max-width-narrow);
}

.container--text {
  max-width: var(--max-width-text);
}

/* ============================================================
   NAVIGATION
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-border-dark);
  transition: box-shadow var(--transition-base);
}

.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 72px;
}

/* Logo */
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 48px;
  width: auto;
}

@media (max-width: 480px) {
  .nav-logo img {
    height: 44px;
    width: auto;
  }
}

/* Nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}

.nav-links a {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark-sub);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--color-gold);
  background-color: rgba(244, 196, 48, 0.08);
}

.nav-links a[aria-current="page"] {
  color: var(--color-gold);
}

/* Nav actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav-phone {
  display: none;
  font-family: var(--font-data);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark-sub);
  letter-spacing: var(--tracking-wide);
  transition: color var(--transition-fast);
}

@media (min-width: 1024px) {
  .nav-phone {
    display: block;
  }
}

.nav-phone:hover {
  color: var(--color-gold);
}

/* Hide nav CTA button on mobile — mobile nav has its own CTA */
.nav-actions .btn {
  display: none;
}

@media (min-width: 768px) {
  .nav-actions .btn {
    display: inline-flex;
  }
}

/* Hamburger */
.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: var(--space-1);
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}

@media (min-width: 768px) {
  .nav-hamburger {
    display: none;
  }
}

.nav-hamburger:hover {
  background-color: var(--color-border-dark);
}

.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text-on-dark);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  flex-direction: column;
  background-color: var(--color-charcoal-deep);
  border-top: 1px solid var(--color-border-dark);
  padding: var(--space-3) var(--space-4) var(--space-4);
  gap: var(--space-1);
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark-sub);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav a:hover {
  color: var(--color-gold);
  background-color: var(--color-gold-subtle);
}

.mobile-nav-cta {
  margin-top: var(--space-2);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  padding: 0.875rem 2rem;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-spring);
  border: 2px solid transparent;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}

.btn:active {
  transform: scale(0.97);
}

/* Primary — gold, the single CTA color */
.btn-primary {
  background-color: var(--color-gold);
  color: var(--color-charcoal-deep);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-gold-dark);
  box-shadow: var(--shadow-gold-lg);
  transform: translateY(-1px);
}

/* Secondary — outline on dark */
.btn-secondary {
  background-color: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-border-dark);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-border-dark);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Ghost — outline on light */
.btn-ghost {
  background-color: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-border);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background-color: var(--color-surface);
  border-color: var(--color-charcoal);
}

/* Size variants */
.btn-lg {
  font-size: var(--text-body);
  padding: 1.125rem 2.5rem;
}

.btn-sm {
  font-size: var(--text-xs);
  padding: 0.625rem 1.25rem;
}

/* With sub-label */
.btn-stack {
  flex-direction: column;
  gap: 2px;
  padding: 1rem 2rem;
}

.btn-stack .btn-label {
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.btn-stack .btn-sublabel {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  opacity: 0.8;
}

/* Full width */
.btn-full {
  width: 100%;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero-section {
  position: relative;
  background-color: var(--color-charcoal);
  overflow: hidden;
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(4rem, 10vw, 8rem);
}

/* Star watermark — brand motif execution #1 */
.hero-star-watermark {
  position: absolute;
  top: 50%;
  right: -5%;
  transform: translateY(-50%);
  width: clamp(300px, 55vw, 700px);
  height: auto;
  opacity: 0.08;
  pointer-events: none;
  z-index: var(--z-base);
  filter: brightness(1.2) saturate(0.6);
}

.hero-section .container {
  position: relative;
  z-index: var(--z-raised);
}

.hero-content {
  max-width: var(--max-width-text);
}

/* Trust bar above H1 */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-gold);
  flex-shrink: 0;
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-4);
}

.hero-h1 em {
  font-style: normal;
  color: var(--color-gold);
}

.hero-subhead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-sub);
  max-width: 600px;
  margin-bottom: var(--space-6);
}

/* CTA group */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-5);
}

@media (max-width: 480px) {
  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta-group .btn {
    width: 100%;
    text-align: center;
  }
  .btn-label {
    font-size: var(--text-xs);
    white-space: normal;
  }
}

/* Trust badges row */
.hero-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-on-dark-muted);
  letter-spacing: var(--tracking-wide);
}

.trust-badge .star-icon {
  color: var(--color-gold);
  font-size: 0.875rem;
  flex-shrink: 0;
}

/* ============================================================
   PLATFORMS STRIP
   ============================================================ */

.platforms-section {
  background-color: var(--color-charcoal-deep);
  border-top: 1px solid var(--color-border-dark);
  border-bottom: 1px solid var(--color-border-dark);
  padding-block: var(--space-4);
  overflow: hidden;
}

.platforms-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  text-align: center;
  margin-bottom: var(--space-3);
}

.platforms-track-wrapper {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.platforms-track {
  display: flex;
  gap: 120px;
  width: max-content;
  animation: platforms-scroll 28s linear infinite;
}

.platforms-track:hover {
  animation-play-state: paused;
}

@keyframes platforms-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

.platform-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity var(--transition-base);
}

.platform-item:hover {
  opacity: 1;
}

.platform-logo-placeholder {
  /* CLIENT: Replace with actual platform SVG logo */
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

.platform-logo-placeholder img {
  height: 22px;
  width: auto;
  filter: brightness(0) invert(1);
}

/* ============================================================
   SECTION COMMON STYLES
   ============================================================ */

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.section-eyebrow--light {
  color: var(--color-gold);
}

.section-eyebrow--dark {
  color: var(--color-text-muted);
}

.section-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}

.section-h2--light {
  color: var(--color-text-on-dark);
}

.section-h2--dark {
  color: var(--color-text-primary);
}

.section-h2 em {
  font-style: normal;
  color: var(--color-gold);
}

.section-intro {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  max-width: var(--max-width-text);
  margin-bottom: var(--space-6);
}

.section-intro--light {
  color: var(--color-text-on-dark-sub);
}

.section-intro--dark {
  color: var(--color-text-secondary);
}

/* ============================================================
   PROBLEM SECTION
   ============================================================ */

.problem-section {
  background-color: var(--color-white);
  padding-block: var(--section-padding-y);
}

.problem-lead {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--max-width-text);
  margin-bottom: var(--space-3);
}

.problem-lead strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}

.problem-statement {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  border-left: 4px solid var(--color-gold);
  padding-left: var(--space-3);
  margin-block: var(--space-6);
  max-width: var(--max-width-narrow);
}

.problem-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

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

.problem-card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.problem-card:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.problem-card-icon {
  width: 44px;
  height: 44px;
  background-color: var(--color-gold-subtle);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
}

.problem-card h3 {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.problem-card p {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ============================================================
   GUIDE / CREDENTIALS SECTION
   ============================================================ */

.guide-section {
  background-color: var(--color-charcoal);
  padding-block: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

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

@media (min-width: 768px) {
  .guide-inner {
    grid-template-columns: 1fr 1fr;
  }
}

.guide-content p {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-on-dark-sub);
  margin-bottom: var(--space-3);
}

.guide-content p:last-child {
  margin-bottom: 0;
}

.guide-stat-card {
  background-color: var(--color-charcoal-mid);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-align: center;
}

.guide-stat-number {
  font-family: var(--font-data);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-1);
}

.guide-stat-label {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-dark-sub);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.guide-stat-source {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--space-3);
}

.guide-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.guide-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background-color: transparent;
  border: 1px solid rgba(244, 196, 48, 0.4);
  border-radius: var(--radius-pill);
  padding: 0.375rem var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ============================================================
   STAKES SECTION
   ============================================================ */

.stakes-section {
  background-color: var(--color-surface);
  padding-block: var(--section-padding-y);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.stakes-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .stakes-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-12);
    align-items: center;
  }
}

.stakes-hook {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.stakes-hook em {
  font-style: italic;
  color: var(--color-gold-dark);
}

.stakes-body {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}

.stakes-harvard {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block: var(--space-4);
}

.stakes-harvard-stat {
  font-family: var(--font-data);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--weight-bold);
  color: var(--color-charcoal);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stakes-harvard-stat span {
  color: var(--color-gold);
}

.stakes-harvard-body {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.stakes-harvard-source {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}

.stakes-revenue-card {
  background-color: var(--color-charcoal);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
}

.stakes-revenue-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-3);
}

.stakes-revenue-number {
  font-family: var(--font-data);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.stakes-revenue-sub {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-muted);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}

.stakes-cta-wrapper {
  margin-top: var(--space-5);
}

/* ============================================================
   PLAN SECTION — 3 Steps
   ============================================================ */

.plan-section {
  background-color: var(--color-white);
  padding-block: var(--section-padding-y);
}

.plan-header {
  text-align: center;
  max-width: var(--max-width-text);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.plan-header p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}

.plan-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  position: relative;
}

@media (min-width: 768px) {
  .plan-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.plan-step {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.plan-step:hover {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-md);
}

.plan-step-number {
  font-family: var(--font-data);
  font-size: 4.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  line-height: 1;
  opacity: 0.15;
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  pointer-events: none;
  letter-spacing: var(--tracking-tight);
}

.plan-step-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-gold);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  font-size: 1.375rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-gold);
}

.plan-step h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.plan-step p {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ============================================================
   SENTIMENT GATE DIAGRAM
   ============================================================ */

.gate-section {
  background-color: var(--color-charcoal);
  padding-block: var(--section-padding-y);
  position: relative;
  overflow: hidden;
}

.gate-header {
  text-align: center;
  max-width: var(--max-width-text);
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.gate-header p {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark-sub);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
}

/* The diagram */
.gate-diagram {
  max-width: 820px;
  margin-inline: auto;
}

/* Trigger — the SMS */
.gate-trigger {
  text-align: center;
  margin-bottom: var(--space-5);
}

.gate-trigger-bubble {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  background-color: var(--color-charcoal-mid);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-5);
}

.gate-trigger-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}

.gate-trigger-text {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark);
}

/* Decision point — the star gate (brand motif execution #2) */
.gate-decision {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  position: relative;
}

.gate-connector-line {
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-border-dark), var(--color-gold));
}

.gate-star-node {
  width: 80px;
  height: 72px;
  background-color: var(--color-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: var(--shadow-gold-lg);
  flex-shrink: 0;
}

.gate-star-node-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
}

/* Two outcome paths */
.gate-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .gate-paths {
    gap: var(--space-5);
  }
}

.gate-path {
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gate-path--positive {
  background-color: rgba(45, 155, 90, 0.12);
  border: 1px solid rgba(45, 155, 90, 0.3);
}

.gate-path--negative {
  background-color: rgba(192, 57, 43, 0.10);
  border: 1px solid rgba(192, 57, 43, 0.25);
}

.gate-path-trigger {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.25rem var(--space-2);
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
}

.gate-path--positive .gate-path-trigger {
  background-color: rgba(45, 155, 90, 0.2);
  color: #5BC98A;
}

.gate-path--negative .gate-path-trigger {
  background-color: rgba(192, 57, 43, 0.2);
  color: #E67E74;
}

.gate-path-arrow {
  font-family: var(--font-data);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark-sub);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.gate-path-arrow::before {
  content: '→';
  font-size: 1rem;
}

.gate-path-result {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.gate-path--positive .gate-path-result {
  color: #5BC98A;
}

.gate-path--negative .gate-path-result {
  color: #E67E74;
}

.gate-path-detail {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
}

/* Compliance note */
.gate-compliance {
  margin-top: var(--space-6);
  text-align: center;
  max-width: var(--max-width-narrow);
  margin-inline: auto;
}

.gate-compliance p {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
}

.gate-compliance strong {
  color: var(--color-gold);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   OFFER / PRICING SECTION
   ============================================================ */

.offer-section {
  background-color: var(--color-white);
  padding-block: var(--section-padding-y);
}

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

@media (min-width: 768px) {
  .offer-inner {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-10);
  }
}

/* Pricing card */
.pricing-card {
  background-color: var(--color-charcoal);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

/* Gold accent bar at top of card */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--color-gold-deeper),
    var(--color-gold),
    var(--color-gold-deeper)
  );
}

.pricing-card-tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}

.pricing-card-name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-1);
}

.pricing-card-tagline {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.pricing-price {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.pricing-currency {
  font-family: var(--font-data);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  color: var(--color-text-on-dark-sub);
  margin-top: 0.5rem;
}

.pricing-amount {
  font-family: var(--font-data);
  font-size: clamp(3.5rem, 7vw, 5rem);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.pricing-period {
  font-family: var(--font-data);
  font-size: var(--text-small);
  color: var(--color-text-on-dark-muted);
  align-self: flex-end;
  margin-bottom: 0.5rem;
}

.pricing-annual {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-5);
}

.pricing-annual strong {
  color: var(--color-gold);
}

/* Feature list */
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
}

.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-on-dark-sub);
  line-height: var(--leading-snug);
}

.pricing-feature-check {
  color: var(--color-gold);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-card-cta {
  width: 100%;
}

.pricing-guarantee-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  margin-top: var(--space-2);
}

/* Guarantee panel */
.guarantee-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.guarantee-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
}

.guarantee-card-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.guarantee-card h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  line-height: var(--leading-snug);
}

.guarantee-card p {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.no-risk-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.no-risk-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

.no-risk-item::before {
  content: '✓';
  color: var(--color-success);
  font-weight: var(--weight-bold);
  flex-shrink: 0;
}

/* ============================================================
   SOCIAL PROOF / TESTIMONIALS
   ============================================================ */

.proof-section {
  background-color: var(--color-surface);
  padding-block: var(--section-padding-y);
  border-top: 1px solid var(--color-border);
}

.proof-header {
  text-align: center;
  margin-bottom: var(--space-8);
  max-width: var(--max-width-text);
  margin-inline: auto;
}

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

@media (min-width: 640px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.testimonial-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition-base);
}

.testimonial-card:hover {
  box-shadow: var(--shadow-md);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--color-gold);
  font-size: 1rem;
}

.testimonial-quote {
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  flex: 1;
  font-style: italic;
}

.testimonial-quote.is-placeholder {
  color: var(--color-text-muted);
  font-style: normal;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background-color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-xs);
}

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.testimonial-name {
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.testimonial-title {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.testimonial-result {
  font-family: var(--font-data);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-gold-dark);
  background-color: var(--color-gold-subtle);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  display: inline-block;
  align-self: flex-start;
}

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  background-color: var(--color-charcoal);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

@media (min-width: 640px) {
  .stats-bar {
    padding: var(--space-6) var(--space-8);
  }
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background-color: var(--color-border-dark);
}

.stat-number {
  font-family: var(--font-data);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

.faq-section {
  background-color: var(--color-white);
  padding-block: var(--section-padding-y);
}

.faq-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .faq-inner {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.faq-sidebar {
  position: sticky;
  top: 96px;
}

/* Disable sticky on mobile — causes FAQ sidebar to overlap sections above */
@media (max-width: 767px) {
  .faq-sidebar {
    position: static;
  }
}

.faq-sidebar p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.faq-item.is-open {
  border-color: var(--color-gold);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  text-align: left;
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  line-height: var(--leading-snug);
}

.faq-question:hover {
  background-color: var(--color-surface);
  color: var(--color-charcoal);
}

.faq-item.is-open .faq-question {
  color: var(--color-charcoal);
  background-color: var(--color-gold-subtle);
}

.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: transform var(--transition-base), color var(--transition-base);
}

.faq-item.is-open .faq-chevron {
  transform: rotate(180deg);
  color: var(--color-gold-dark);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.is-open .faq-answer {
  max-height: 600px;
}

.faq-answer-inner {
  padding: var(--space-1) var(--space-4) var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

.faq-answer-inner p + p {
  margin-top: var(--space-2);
}

.faq-all-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  color: var(--color-gold-dark);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-4);
  transition: gap var(--transition-fast);
}

.faq-all-link:hover {
  gap: var(--space-2);
}

/* ============================================================
   FINAL CTA SECTION
   ============================================================ */

.final-cta-section {
  background-color: var(--color-charcoal);
  padding-block: var(--section-padding-y);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Subtle gold radial glow */
.final-cta-section::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(244, 196, 48, 0.08) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.final-cta-section .container {
  position: relative;
  z-index: var(--z-raised);
}

.final-cta-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.final-cta-h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  color: var(--color-text-on-dark);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: var(--max-width-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.final-cta-body {
  font-size: var(--text-body-lg);
  color: var(--color-text-on-dark-sub);
  line-height: var(--leading-relaxed);
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.final-cta-body strong {
  color: var(--color-text-on-dark);
  font-weight: var(--weight-semibold);
}

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.final-cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-charcoal-deep);
  border-top: 1px solid var(--color-border-dark);
  padding-block: var(--space-10) var(--space-6);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

@media (min-width: 640px) {
  .footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.footer-brand img {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin-right: auto;
  margin-bottom: var(--space-3);
}

.footer-tagline {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
  max-width: 280px;
  margin-bottom: var(--space-4);
}

.footer-veteran {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold);
}

.footer-nav-group h4 {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-3);
}

.footer-nav-group ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav-group a {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-sub);
  transition: color var(--transition-fast);
  line-height: var(--leading-snug);
}

.footer-nav-group a:hover {
  color: var(--color-gold);
}

.footer-address {
  font-style: normal;
}

.footer-address p {
  font-size: var(--text-small);
  color: var(--color-text-on-dark-sub);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-1);
}

.footer-address a {
  color: var(--color-text-on-dark-sub);
  transition: color var(--transition-fast);
}

.footer-address a:hover {
  color: var(--color-gold);
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-dark);
}

.footer-legal {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  line-height: var(--leading-relaxed);
}

.footer-legal a {
  color: var(--color-text-on-dark-muted);
  transition: color var(--transition-fast);
}

.footer-legal a:hover {
  color: var(--color-gold);
}

.footer-legal-links {
  display: flex;
  gap: var(--space-3);
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.text-gold { color: var(--color-gold); }
.text-center { text-align: center; }
.text-left { text-align: left; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Fade-in on scroll */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }

/* === HERO CTA MICROCOPY === */
.hero-cta-microcopy {
  font-size: var(--text-xs);
  color: var(--color-text-on-dark-muted);
  letter-spacing: var(--tracking-wide);
  margin-top: calc(-1 * var(--space-1));
  margin-bottom: var(--space-1);
}

/* === PROBLEM STATEMENT — HERO VARIANT === */
/* Increased weight for the "money line" */
.problem-statement--hero {
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  border-left-width: 6px;
  background-color: var(--color-surface);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.problem-statement--hero em {
  font-style: normal;
  color: var(--color-charcoal);
  font-weight: var(--weight-extrabold);
  display: block;
  margin-top: var(--space-1);
}

/* === MOBILE FIXES === */
/* Eyebrow — prevent awkward two-line break on small screens */
@media (max-width: 480px) {
  .hero-eyebrow {
    font-size: 0.625rem;
    letter-spacing: 0.08em;
  }
}

/* === GLOBAL MOBILE OVERFLOW PREVENTION === */
@media (max-width: 767px) {
  /* Prevent any grid or flex child from exceeding viewport */
  .container,
  .hero-content,
  .plan-steps,
  .stakes-inner,
  .guide-inner,
  .offer-inner,
  .testimonials-grid,
  .comparison-grid,
  .about-prose-layout,
  .about-founder-layout,
  .about-values-inner {
    min-width: 0;
    overflow-x: hidden;
  }

  /* Ensure all cards stay within bounds */
  .plan-step,
  .problem-card,
  .testimonial-card,
  .pricing-card,
  .guarantee-card,
  .stakes-revenue-card,
  .guide-stat-card,
  .about-stat-card,
  .about-mechanism-card {
    min-width: 0;
    max-width: 100%;
  }
}

/* === GATE FAVICON STAR === */
.gate-favicon-star {
  width: 96px;
  height: 96px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 16px rgba(244, 196, 48, 0.5));
}

/* === MOBILE CTA + OVERFLOW FIXES === */
@media (max-width: 767px) {

  /* CTA button text too long on mobile — reduce font size */
  .btn {
    white-space: normal;
    word-break: break-word;
  }

  .btn-label {
    white-space: normal;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
  }

  /* Stakes section — prevent card overflow */
  .stakes-section {
    overflow-x: hidden;
  }

  .stakes-revenue-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Pricing card CTA — constrain width */
  .pricing-card {
    overflow: hidden;
  }

  .pricing-card-cta {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    white-space: normal;
    word-break: break-word;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  /* Guide section card — prevent overflow */
  .guide-stat-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* Contain sections within viewport width without creating scroll contexts */
  section {
    max-width: 100vw;
    contain: layout;
  }
}

/* Hide price suffix on very small screens to prevent button overflow */
@media (max-width: 420px) {
  .btn-price {
    display: none;
  }
}

/* === SVG ICON SYSTEM === */
/* Icons inherit currentColor — set color on parent */

.problem-card-icon svg {
  color: var(--color-gold);
  stroke: var(--color-gold);
}

.plan-step-icon svg {
  color: var(--color-charcoal-deep);
  stroke: var(--color-charcoal-deep);
}

.gate-path-trigger svg {
  flex-shrink: 0;
}

.gate-path--positive .gate-path-trigger svg {
  color: #5BC98A;
  stroke: #5BC98A;
}

.gate-path--negative .gate-path-trigger svg {
  color: #E67E74;
  stroke: #E67E74;
}

.guarantee-card-icon svg {
  color: var(--color-gold);
  stroke: var(--color-gold);
}

.about-values-badge-icon svg {
  color: var(--color-gold);
  stroke: var(--color-gold);
}

.signup-placeholder-icon svg {
  color: var(--color-gold);
  stroke: var(--color-gold);
}

.hiw-gate-path--positive .hiw-gate-path-icon svg {
  color: #5BC98A;
  stroke: #5BC98A;
}

.hiw-gate-path--negative .hiw-gate-path-icon svg {
  color: #E67E74;
  stroke: #E67E74;
}