/* ============================================================================
   BRIGHT OWL — DESIGN TOKENS (Kevin's design system, dark-first)
   ============================================================================ */

:root {

  /* --- Palette ---------------------------------------------------------- */
  
  --surface-dark:            #080B15;  /* Deep Night — primary dark surface */
  --surface-dark-alt:        #2D2331;  /* Space Dust — mega menu, secondary dark */
  --surface:                 #FFFFFF;  /* Nova White — light section surface */
  --surface-tint:            #F5F5F7;  /* Very light tint for cards on light */

  --text-body:               #404040;  /* Dark Lunar Grey — body on light */
  --text-heading:            #080B15;  /* Deep Night — headings on light */
  --text-on-dark:            #FFFFFF;  /* Nova White — copy on dark */
  --text-body-on-dark:       #E6E6E6;  /* Light Lunar Grey — body on dark */
  --text-muted:              #A0A0A0;  /* Mid Lunar Grey — placeholders, notes */

  --accent-primary:          #E01D78;  /* Stellar Pink — solid CTAs, links, labels */
  --accent-primary-hover:    #C1155C;
  --accent-secondary:        #FF6347;  /* Cosmic Orange — H1s, hover accents */
  --accent-secondary-hover:  #E5533B;

  --brand-gradient: linear-gradient(90deg, #E01D78 0%, #FF6347 100%);
  --brand-gradient-diagonal: linear-gradient(135deg, #E01D78 0%, #FF6347 100%);

  --surface-accent:          #E01D78;
  --accent-secondary-light:  #FF6347;
  --accent-tertiary:         #FF6347;

  --border-divider:          #E6E6E6;
  --border-divider-on-dark:  rgba(255, 255, 255, 0.1);
  --label-accent:            var(--accent-primary);
  --surface-card:            var(--surface-tint);
  --surface-con:             #F5F5F7;
  --surface-pro:             #FFFFFF;
  --text-on-card:            #080B15;

  /* --- Typography ------------------------------------------------------ */
  
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Typography scale — matches Kevin's Figma exactly (extracted from design JSON) */
  --size-h1:         48px;  --lh-h1:         58px;  --wt-h1:         700;   /* PJS 700 · Hero title only */
  --size-h2:         36px;  --lh-h2:         42px;  --wt-h2:         500;   /* PJS 500 · All section titles */
  --size-h3:         24px;  --lh-h3:         30px;  --wt-h3:         400;   /* PJS 400 · Card + item titles */
  --size-h4:         24px;  --lh-h4:         30px;  --wt-h4:         400;   /* PJS 400 · same */
  --size-display-body: 24px; --lh-display-body: 30px; --wt-display-body: 400; /* PJS 400 · Hero/gradient/centered/CTA body */
  --size-eyebrow:    20px;  --lh-eyebrow:    24px;  --wt-eyebrow:    500;   /* PJS 500 · All eyebrows (Title Case) */
  --size-lead:       20px;  --lh-lead:       24px;  --wt-lead:       500;   /* legacy alias */
  --size-body:       17px;  --lh-body:       27px;  --wt-body:       400;   /* Inter 400 · Nav, buttons, most body */
  --size-body-alt:   17px;  --lh-body-alt:   27px;  --wt-body-alt:   400;
  --size-small:      15px;  --lh-small:      24px;  --wt-small:      400;   /* Inter 400 · Small body */
  --size-caption:    12px;  --lh-caption:    18px;  --wt-caption:    400;   /* Inter 400 · Copyright */

  --wt-body-strong:  700;
  --wt-label:        600;

  /* --- Layout ---------------------------------------------------------- */
  
  --frame-desktop:  1440px;
  --frame-mobile:    428px;

  /* --- Structural sizing (required by elements.css) -------------------- */
  --control-h:       48px;
  --nav-link-gap:    36px;
  --footer-logo-w:  200px;
  --footer-logo-h:  auto;

  /* --- Interactive roles ----------------------------------------------- */
  
  --accent-primary-ink:  #FFFFFF;
  --accent-nav-cta:      #E01D78;

  /* --- Radii, borders, elevation --------------------------------------- */
  --radius-control:   8px;
  --radius-media:     16px;
  --radius-pill:      999px;
  --border-hairline:  1px;
  --shadow-control:   0 4px 20px rgba(224, 29, 120, 0.25);
  --shadow-card:      0 2px 12px rgba(8, 11, 21, 0.08);
  --disabled-opacity: 0.4;

  /* --- Spacing --------------------------------------------------------- */
  --space-10:   10px;
  --space-16:   16px;
  --space-20:   20px;
  --space-24:   24px;
  --space-30:   30px;
  --space-40:   40px;
  --space-50:   50px;
  --space-60:   60px;
  --space-100: 100px;
  --space-200: 200px;

  /* --- Media aspect ratio (was missing, breaking image-text-split rocket image) */
  --media-aspect: 1 / 1;

  /* --- Missing tokens (restored) --- */
  --content-max:    1440px;
  --measure-prose:   922px;
  --measure-cta:     420px;
  --icon:             24px;
  --icon-sm:          16px;
  --icon-lg:          32px;
  --icon-xl:          48px;
  --dot:               6px;
  --check-gap:        12px;
  --field-gap:        12px;
  --field-pad-x:      16px;
  --field-pad-y:      12px;
  --control-pad-x:    24px;
  --focus-ring:      2px solid var(--accent-primary);
  --focus-offset:     2px;
  --text-link-gap:     4px;
  --dur:             200ms;
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --accordion-glyph: "+";
  --jump-nav-offset:  80px;
  --message-h-short:  40px;
  --message-h-tall:   80px;
  --state-error:      #DC2626;
  --state-error-tint: #FEE2E2;
  --lh-body:         var(--lh-body-alt);
  --lh-body-alt:      27px;
  --lh-caption:       18px;
  --lh-display:       68px;
  --lh-lead:          28px;
  --lh-small:         24px;
  --wt-body:          400;
  --wt-caption:       500;
  --wt-display:       800;
  --wt-lead:          400;
  --wt-small:         400;
}


/* ============================================================================
   [2] KEVIN'S DESIGN SYSTEM — component overrides
   ============================================================================ */

/* --- NAV — DARK COSMIC BAR ------------------------------------------------ */
.nav,
.nav--size-desktop,
.nav--size-mobile {
  background: var(--surface-dark) !important;
  border-bottom: none !important;
}
.nav__logo {
  height: 40px;
  width: auto;
  max-width: 240px;
}
.nav__link {
  color: var(--text-on-dark) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}
.nav__link:hover {
  color: var(--accent-secondary) !important;
}
.nav__cta {
  background: var(--accent-primary) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-control) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  height: auto !important;
  transition: background 0.2s ease;
}
.nav__cta:hover {
  background: var(--accent-primary-hover) !important;
}

/* Mobile menu icon inverted for dark bar */
.nav__menu-icon,
.nav__menu-toggle svg {
  filter: brightness(0) invert(1);
}

/* --- MEGA MENU — GRADIENT TOP + SPACE DUST BODY ------------------------- */
.mega-menu,
.mega-menu-panel {
  background: var(--surface-dark-alt) !important;  /* Space Dust */
  color: var(--text-on-dark) !important;
}
.mega-menu__col-title,
.mega-menu__group-title {
  color: var(--text-on-dark) !important;
  font-family: var(--font-display);
  font-weight: 700;
}
.mega-menu__link,
.mega-menu a {
  color: var(--text-body-on-dark) !important;
}
.mega-menu__link:hover {
  color: var(--accent-secondary) !important;
}

/* When mega menu open, nav becomes gradient bar */
.nav--mega-open,
.nav.is-mega-open {
  background: var(--brand-gradient) !important;
}
.nav--mega-open .nav__cta,
.nav.is-mega-open .nav__cta {
  background: #FFFFFF !important;
  color: var(--accent-primary) !important;
}

/* --- BUTTONS — SOLID STELLAR PINK (Kevin's spec — NO gradient CTAs) ---- */
.buttons--style-primary {
  background: var(--accent-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: none !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: var(--radius-control);
  transition: background 0.2s ease;
}
.buttons--style-primary:hover {
  background: var(--accent-primary-hover) !important;
  transform: none;
}

/* --- HEADINGS — H1s IN COSMIC ORANGE, H2s FOLLOW SUIT ----------------- */
/* H1 — Kevin's hero title spec: PJS 700 · 48/58 · LS 0 */
h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 58px !important;
  letter-spacing: 0 !important;
  color: var(--accent-secondary) !important;  /* Cosmic Orange */
}

/* H2 — Kevin's section title spec: PJS 500 · 36/42 · LS 0 */
h2,
.page-title-header__title,
.image-text-split__title,
.centered-text-section__title,
.pricing-tier-cards__title,
.cta-two-button__title,
.cta-single-button__title,
.rates-table__title,
.six-card-grid__title,
.icon-feature-grid__title,
.checklist-grid__title,
.numbered-steps__title,
.intro-side-bullet-list__title,
.comparison-table__title,
.blog-post-grid__title,
.lead-capture-form__title {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 36px !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
  color: var(--accent-secondary) !important;  /* Cosmic Orange */
}

h3, h4, h5, h6,
.pricing-tier-cards__tier-name,
.pricing-tier-cards__price,
.icon-feature-grid__title,
.icon-feature-grid__card-title,
.six-card-grid__title,
.six-card-grid__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Dark-section variants of headings need white color for H3+ */
.section--theme-dark h3,
.section--theme-dark h4,
.section--theme-dark h5,
.section--theme-dark h6,
.section--theme-dark p,
.section--theme-dark .icon-feature-grid__card-title,
.section--theme-dark .six-card-grid__card-title {
  color: var(--text-on-dark);
}

/* --- SECTION LABELS (Eyebrows) ---------------------------------------- */
.section-label,
.section-label__text {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--text-heading) !important;  /* Deep Night on light sections (Kevin's default) */
}
/* Dark section eyebrows: white */
.section--theme-dark .section-label,
.section--theme-dark .section-label__text,
.checklist-dark .section-label,
.checklist-dark .section-label__text {
  color: var(--text-on-dark) !important;
}
/* Add arrow after eyebrow text (Kevin's spec) */
.section-label__text::after {
  content: ' →';
  color: inherit;
}

/* Links */
a { color: var(--accent-primary); }
a:hover { color: var(--accent-secondary); }
.jump-nav__link {
  font-family: var(--font-display);
  font-weight: 700;
}


/* ============================================================================
   [3] KEVIN'S SIGNATURE SECTIONS
   ============================================================================ */

/* --- Astronaut hero (homepage) ---------------------------------------- */
.hero-astronaut {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.85), transparent 40%),
    radial-gradient(1px 1px at 22% 42%, rgba(255,255,255,0.6), transparent 40%),
    radial-gradient(1.2px 1.2px at 8% 68%, rgba(255,255,255,0.7), transparent 40%),
    radial-gradient(1px 1px at 32% 82%, rgba(255,255,255,0.5), transparent 40%),
    radial-gradient(1.5px 1.5px at 45% 25%, rgba(255,255,255,0.9), transparent 40%),
    radial-gradient(1px 1px at 55% 55%, rgba(255,255,255,0.55), transparent 40%),
    radial-gradient(1.2px 1.2px at 42% 75%, rgba(255,255,255,0.75), transparent 40%),
    radial-gradient(1px 1px at 5% 5%, rgba(255,255,255,0.4), transparent 40%),
    radial-gradient(1.5px 1.5px at 15% 92%, rgba(255,255,255,0.6), transparent 40%),
    radial-gradient(1px 1px at 38% 8%, rgba(255,255,255,0.65), transparent 40%),
    radial-gradient(1px 1px at 60% 35%, rgba(255,255,255,0.45), transparent 40%),
    radial-gradient(1.2px 1.2px at 50% 90%, rgba(255,255,255,0.55), transparent 40%),
    var(--surface-dark);
  overflow: hidden;
}
.hero-astronaut__inner {
  max-width: var(--frame-desktop);
  margin: 0 auto;
  padding: 100px 40px 120px 40px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 680px;
}
.hero-astronaut__copy {
  color: var(--text-on-dark);
}
.hero-astronaut__eyebrow {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  color: var(--text-on-dark);
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 24px 0;
}
.hero-astronaut__eyebrow::after {
  content: ' →';
}
.hero-astronaut__title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 58px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent-secondary);
  margin: 0 0 28px 0;
}
.hero-astronaut__lead p {
  font-family: var(--font-body);   /* Inter */
  font-size: 17px;
  line-height: 27px;
  color: var(--text-body-on-dark);
  margin: 0 0 16px 0;
}
.hero-astronaut__cta {
  display: inline-flex;
  margin-top: 20px;
  padding: 16px 32px !important;
  min-width: 240px !important;
  font-family: var(--font-body) !important;   /* Inter */
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  height: auto !important;
}
.hero-astronaut__image {
  width: 100%;
  height: auto;
  max-height: 680px;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: screen;  /* astronaut's black background disappears against dark cosmic hero */
}

/* --- Moon-surface split hero (inner pages) ---------------------------- */
.hero-moon {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--surface);
  overflow: hidden;
}
.hero-moon__inner {
  max-width: var(--frame-desktop);
  margin: 0 auto;
  padding: 80px 40px 100px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  min-height: 620px;
}
.hero-moon__copy {
  color: var(--text-heading);
}
.hero-moon__eyebrow {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  color: var(--text-heading);
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 24px 0;
}
.hero-moon__eyebrow::after {
  content: ' →';
}
.hero-moon__title {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 58px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--accent-secondary);
  margin: 0 0 28px 0;
}
.hero-moon__lead p {
  font-family: var(--font-body);   /* Inter */
  font-size: 17px;
  line-height: 27px;
  color: var(--text-body);
  margin: 0 0 16px 0;
}
.hero-moon__cta {
  margin-top: 20px;
  padding: 16px 32px !important;
  min-width: 240px !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  height: auto !important;
}
.hero-moon__image {
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  border-radius: var(--radius-media);
}

/* --- Pink→orange gradient starfield section --------------------------- */
.section-gradient-cosmic {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background:
    radial-gradient(1.5px 1.5px at 8% 25%, rgba(255,255,255,0.95), transparent 45%),
    radial-gradient(1.2px 1.2px at 18% 55%, rgba(255,255,255,0.85), transparent 45%),
    radial-gradient(2px 2px at 28% 15%, rgba(255,255,255,1), transparent 45%),
    radial-gradient(1px 1px at 35% 75%, rgba(255,255,255,0.75), transparent 40%),
    radial-gradient(1.5px 1.5px at 45% 40%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(1.2px 1.2px at 55% 85%, rgba(255,255,255,0.85), transparent 45%),
    radial-gradient(2px 2px at 65% 20%, rgba(255,255,255,1), transparent 45%),
    radial-gradient(1.5px 1.5px at 75% 60%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,0.8), transparent 40%),
    radial-gradient(1.2px 1.2px at 92% 78%, rgba(255,255,255,0.85), transparent 45%),
    radial-gradient(1.5px 1.5px at 12% 92%, rgba(255,255,255,0.9), transparent 45%),
    radial-gradient(1px 1px at 68% 5%, rgba(255,255,255,0.8), transparent 40%),
    radial-gradient(2px 2px at 40% 50%, rgba(255,255,255,0.95), transparent 45%),
    radial-gradient(1.2px 1.2px at 88% 15%, rgba(255,255,255,0.85), transparent 45%),
    radial-gradient(1px 1px at 22% 85%, rgba(255,255,255,0.7), transparent 40%),
    linear-gradient(135deg, #E01D78 0%, #FF6347 100%);
  padding: 100px 40px;
  color: var(--text-on-dark);
}
.section-gradient-cosmic__inner {
  max-width: var(--frame-desktop);
  margin: 0 auto;
}
.section-gradient-cosmic__eyebrow {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 24px;
  color: #FFFFFF;
  letter-spacing: 0;
  font-weight: 500;
  margin: 0 0 24px 0;
}
.section-gradient-cosmic__eyebrow::after {
  content: ' →';
}
.section-gradient-cosmic__body p {
  font-family: var(--font-display);   /* PJS 400 · 24/30 */
  font-size: 24px;
  line-height: 30px;
  color: #FFFFFF;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0 0 20px 0;
  max-width: 800px;
}
.section-gradient-cosmic__body p:last-child {
  color: var(--surface-dark);
  font-weight: 500;
}

/* --- Dark checklist grid (Deep Night section) ------------------------- */
.checklist-dark {
  background: var(--surface-dark);
  padding: 100px 40px;
  color: var(--text-on-dark);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.checklist-dark__inner {
  max-width: var(--frame-desktop);
  margin: 0 auto;
}


/* --- Rates table on dark ---------------------------------------------- */
.rates-table {
  padding-block: var(--space-100);
  background: var(--surface);
}
.rates-table__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-50);
  max-width: var(--frame-desktop);
  margin: 0 auto;
  padding-inline: var(--space-40);
}
.rates-table__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: 720px;
}
.rates-table__title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: var(--lh-h2);
  font-weight: 800;
  color: var(--accent-secondary);
  margin: 0;
}
.rates-table__paragraph {
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  margin: 0;
}
.rates-table__list {
  display: flex;
  flex-direction: column;
  border: var(--border-hairline) solid var(--border-divider);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.rates-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  align-items: center;
  padding: var(--space-20) var(--space-30);
  gap: var(--space-20);
  border-bottom: var(--border-hairline) solid var(--border-divider);
}
.rates-table__row:last-child { border-bottom: none; }
.rates-table__row--header {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.rates-table__row--header .rates-table__cell {
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 700;
  color: var(--text-on-dark);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.rates-table__price-note {
  display: block;
  font-size: var(--size-caption);
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}
.rates-table__cell--role {
  font-size: var(--size-body);
  color: var(--text-heading);
}
.rates-table__cell--price {
  font-family: var(--font-display);
  font-size: var(--size-lead);
  font-weight: 700;
  text-align: right;
  color: var(--text-heading);
  line-height: 1.15;
}
.rates-table__price-unit {
  font-family: var(--font-body);
  font-size: var(--size-small);
  font-weight: 400;
  color: var(--text-body);
  margin: 0 2px;
}
.rates-table__row--header .rates-table__price-unit { color: var(--text-on-dark); }
.rates-table__role-name {
  font-family: var(--font-display);
  font-size: var(--size-body);
  font-weight: 700;
  color: var(--text-heading);
  margin: 0;
}
.rates-table__footnote {
  font-size: var(--size-small);
  color: var(--text-body);
  margin: 0;
  max-width: 720px;
}
.rates-table__link {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* --- Mobile responsive ---------------------------------------------- */
@media (max-width: 900px) {
  .hero-astronaut__inner,
  .hero-moon__inner {
    grid-template-columns: 1fr;
    padding: 60px 24px;
    gap: 40px;
    min-height: auto;
  }
  .hero-astronaut__title { font-size: 44px; }
  .hero-moon__title { font-size: 40px; }
  .section-gradient-cosmic { padding: 60px 24px; }
  .section-gradient-cosmic__body p { font-size: 17px; }
  .checklist-dark { padding: 60px 24px; }
  
  .rates-table__row {
    grid-template-columns: 1fr 1fr;
    padding: var(--space-20);
    gap: var(--space-10);
  }
  .rates-table__cell--role {
    grid-column: 1 / -1;
    padding-bottom: var(--space-10);
    border-bottom: var(--border-hairline) solid var(--border-divider);
  }
  .rates-table__row--header .rates-table__cell--role { display: none; }
  .rates-table__row--header .rates-table__cell--price { text-align: center; }
}


/* --- Gradient-cosmic section: force white eyebrow (beat the pink section-label rule) --- */
.section-gradient-cosmic .section-gradient-cosmic__eyebrow,
.section-gradient-cosmic .section-label,
.section-gradient-cosmic .section-label__text {
  color: #FFFFFF !important;
}

/* Final CTA on gradient — H2 must be white, not Cosmic Orange */
.section-gradient-cosmic h2 {
  color: #FFFFFF !important;
}


/* --- Starfield textures (Kevin's cosmic aesthetic) --- */
.hero-astronaut {
  background-color: #080B15;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 12%,  rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 18% 32%,  rgba(255,255,255,0.6),  transparent 55%),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(255,255,255,0.95), transparent 55%),
    radial-gradient(1px 1px   at 42% 22%,  rgba(255,255,255,0.5),  transparent 55%),
    radial-gradient(1.3px 1.3px at 52% 88%, rgba(255,255,255,0.8),  transparent 55%),
    radial-gradient(1px 1px   at 6%  54%,  rgba(255,255,255,0.7),  transparent 55%),
    radial-gradient(1.2px 1.2px at 14% 82%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 34% 48%,  rgba(255,255,255,0.5),  transparent 55%),
    radial-gradient(1.4px 1.4px at 22% 5%,  rgba(255,255,255,0.9),  transparent 55%),
    radial-gradient(1px 1px   at 45% 62%,  rgba(255,255,255,0.6),  transparent 55%),
    radial-gradient(1.2px 1.2px at 60% 8%,  rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px   at 88% 92%,  rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(1.3px 1.3px at 75% 45%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 92% 25%,  rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 3%  92%, rgba(255,255,255,0.9),  transparent 55%);
}

/* More visible stars on the pink gradient */
.section-gradient-cosmic {
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,0.9),  transparent 55%),
    radial-gradient(1.2px 1.2px at 24% 58%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.8px 1.8px at 38% 15%, rgba(255,255,255,0.95), transparent 55%),
    radial-gradient(1.2px 1.2px at 50% 72%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.5px 1.5px at 66% 32%, rgba(255,255,255,0.9),  transparent 55%),
    radial-gradient(1.2px 1.2px at 78% 68%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.8px 1.8px at 88% 12%, rgba(255,255,255,0.95), transparent 55%),
    radial-gradient(1.3px 1.3px at 92% 85%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 6%  78%,  rgba(255,255,255,0.7),  transparent 55%),
    radial-gradient(1.5px 1.5px at 30% 92%, rgba(255,255,255,0.9),  transparent 55%),
    radial-gradient(1.2px 1.2px at 58% 5%,  rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 15% 45%, rgba(255,255,255,0.9),  transparent 55%),
    linear-gradient(135deg, #E01D78 0%, #FF6347 100%);
}

/* Fix horizontal overflow from full-bleed sections */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}


/* Kevin's design has no arrow icon BEFORE eyebrows — only the → after via CSS */
.section-label__icon {
  display: none !important;
}


/* Fix 1: Six-card grid numbers are Stellar Pink per Kevin (not orange) */
.six-card-grid__number {
  color: var(--accent-primary) !important;  /* Stellar Pink */
}

/* Fix 2: Centered Text Section eyebrow uses pink (Kevin's exception) */
.centered-text-section .section-label,
.centered-text-section .section-label__text {
  color: var(--accent-primary) !important;  /* Stellar Pink */
}


/* --- Nav typography (Kevin's Figma spec: Inter 400 · 17/27 · LS 0) --- */
.nav__link {
  font-family: var(--font-body) !important;   /* Inter */
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text-on-dark) !important;
}
.nav__cta {
  font-family: var(--font-body) !important;   /* Inter */
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* --- Buttons (Kevin's spec: Inter 400 · 17/27 · LS 0) --- */
.buttons--style-primary,
.buttons--style-secondary,
.buttons {
  font-family: var(--font-body) !important;   /* Inter */
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* --- Card and item titles (Kevin: PJS 400 · 24/30 · LS 0) --- */
.six-card-grid__card-title,
.icon-feature-grid__card-title,
.checklist-grid__card-title,
.numbered-steps__title-per-step,
.pricing-tier-cards__tier-name {
  font-family: var(--font-display) !important;   /* PJS 400 · 24/30 */
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text-heading);
}

/* --- Six-card grid numbers (Kevin: Inter 400 · 17/27, PINK) --- */
.six-card-grid__number {
  font-family: var(--font-body) !important;   /* Inter */
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--accent-primary) !important;  /* Stellar Pink */
}

/* --- Card body (Kevin: Inter 400 · 17/27) --- */
.six-card-grid__card-body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-body);
}

/* --- Centered text section body (Kevin: PJS 400 · 24/30 · display body) --- */
.centered-text-section__paragraph p {
  font-family: var(--font-display) !important;   /* PJS 400 · 24/30 */
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--text-heading);
}
.centered-text-section__paragraph strong,
.centered-text-section__paragraph p strong {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 700 !important;   /* bold emphasis on second paragraph */
  letter-spacing: 0 !important;
  color: var(--text-heading) !important;
}

/* --- Footer (Kevin: tagline Inter 15/24, col titles PJS 500 20/24, copyright Inter 12/18) --- */
.footer__tagline {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.footer__col-title {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.footer__link {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.footer__copyright {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}


/* --- theme-dark modifier — remaps theme-aware roles for dark sections --- */
.theme-dark,
.section--theme-dark {
  background: var(--surface-dark) !important;
  color: var(--text-on-dark);
}
.theme-dark .icon-feature-grid__title,
.theme-dark .checklist-grid__title,
.theme-dark .six-card-grid__title,
.theme-dark .numbered-steps__title,
.theme-dark .intro-side-bullet-list__title,
.section--theme-dark h2 {
  color: var(--accent-secondary) !important;
}
.theme-dark .icon-feature-grid__paragraph,
.theme-dark .checklist-grid__subheader,
.theme-dark .six-card-grid__subheader,
.theme-dark .numbered-steps__subheader,
.theme-dark .intro-side-bullet-list__text {
  color: var(--text-body-on-dark) !important;
}
.theme-dark .bullet-point-items__headline {
  color: var(--text-on-dark) !important;
}
.theme-dark .bullet-point-items__text {
  color: var(--text-body-on-dark) !important;
}
.theme-dark .six-card-grid__card {
  background: rgba(255,255,255,0.05);
}
.theme-dark .six-card-grid__card-title {
  color: var(--text-on-dark);
}
.theme-dark .six-card-grid__card-body {
  color: var(--text-body-on-dark);
}


/* --- Checkmark icon: outlined pink circle with pink checkmark (Kevin's Content Guide spec) --- */
.checkmark-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: 2px solid var(--accent-primary) !important;
  border-radius: 50%;
  flex: none;
}
.checkmark-icon img {
  display: none !important;   /* hide the image-based checkmark */
}
.checkmark-icon::before {
  content: "✓";
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}


/* ============================================================================
   SIMRAN QA FIXES — per Kevin's Figma exact values
   ============================================================================ */

/* --- Fix horizontal overflow: full-bleed sections must use padding INSIDE not on section --- */
.section-gradient-cosmic,
.hero-astronaut,
.checklist-dark {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
.section-gradient-cosmic__inner {
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
  max-width: var(--frame-desktop);
  margin: 0 auto;
}

/* --- Fix Simran: "See The Difference" typography and spacing --- */
.centered-text-section__inner {
  padding-top: 60px !important;    /* Simran: reduce top padding */
  padding-bottom: 60px !important; /* reduce bottom padding */
}
.centered-text-section .section-label,
.centered-text-section .section-label__text {
  font-size: 22px !important;      /* Simran: 20 → 22 */
  line-height: 26px !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;  /* tight spacing to first paragraph */
}
.centered-text-section__paragraph {
  gap: 16px !important;            /* equal margins between text blocks */
}
.centered-text-section__paragraph p {
  font-weight: 400 !important;     /* first paragraph regular */
  margin: 0 0 16px 0 !important;
}
.centered-text-section__paragraph p:last-child,
.centered-text-section__paragraph p strong,
.centered-text-section__paragraph strong {
  font-weight: 700 !important;     /* second paragraph bold per Figma */
}

/* --- Fix Simran: "What Changes" six-card grid spacing --- */
.six-card-grid__inner {
  gap: 40px !important;            /* was 60, Simran: reduce gap header→grid */
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.six-card-grid__header {
  gap: 20px !important;            /* Simran: reduce gap eyebrow→title */
}
.six-card-grid__card {
  padding: 24px !important;        /* consistent card padding */
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;            /* Simran: reduce gap number→title→body */
  height: 100%;
}
.six-card-grid__grid {
  align-items: stretch !important; /* equal card heights */
}
.six-card-grid__card-title {
  font-size: 20px !important;      /* Simran: reduce card titles */
  line-height: 26px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.six-card-grid__card-body {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}
.six-card-grid__number {
  font-size: 15px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* --- Fix Simran: "Your Trusted Partner" image-text split --- */
.image-text-split__inner {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  gap: 60px !important;
  align-items: center !important;
}
.image-text-split__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;            /* Simran: tighten vertical spacing */
}
.image-text-split__title {
  font-size: 32px !important;      /* Simran: reduce H2 weight/size */
  line-height: 38px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}
.image-text-split__paragraph {
  gap: 12px !important;
}
.image-text-split__paragraph p {
  margin: 0 0 12px 0 !important;
}
.image-text-split__cta {
  align-self: flex-start !important;  /* not full-width */
  padding: 12px 24px !important;
  font-size: 15px !important;
  margin-top: 8px !important;
}

/* --- Fix Simran: "Why Us" icon-feature-grid alignment/clipping --- */
.icon-feature-grid,
.icon-feature-grid__inner {
  box-sizing: border-box !important;
  overflow: hidden;
}
.icon-feature-grid__inner {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
  max-width: var(--frame-desktop);
  margin: 0 auto !important;
}
.icon-feature-grid__header {
  gap: 16px !important;            /* Simran: tighten eyebrow→heading */
  margin-bottom: 40px !important;
}
.icon-feature-grid__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 32px 60px !important;
  align-items: start !important;
}
.bullet-point-items__headline {
  font-size: 20px !important;      /* Simran: reduce H3 weight */
  line-height: 26px !important;
  font-weight: 500 !important;
}
.bullet-point-items__text {
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
}
.bullet-point-items {
  align-items: flex-start !important;  /* icon aligned with heading top */
}

/* --- Fix "Your Agency Shouldn't Stop Growing" alignment --- */
.section-gradient-cosmic__inner {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}
.section-gradient-cosmic__eyebrow {
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 24px !important;
}
.section-gradient-cosmic__body p {
  font-size: 18px !important;      /* Simran: reduce body copy size */
  line-height: 26px !important;
  font-weight: 400 !important;
  max-width: 720px;
  margin: 0 0 16px 0 !important;
}
.section-gradient-cosmic__body p:last-child {
  font-weight: 500 !important;     /* second paragraph slightly emphasized */
  color: #080B15 !important;       /* dark for contrast on gradient */
}

/* --- Increase starfield density for both hero and gradient --- */
.hero-astronaut {
  background-color: #080B15;
  background-image:
    radial-gradient(1.5px 1.5px at 4% 8%,  rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1px 1px   at 12% 20%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.5px 1.5px at 18% 42%, rgba(255,255,255,0.95), transparent 55%),
    radial-gradient(1px 1px   at 26% 12%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1.3px 1.3px at 32% 68%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 40% 30%, rgba(255,255,255,0.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 48% 78%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 55% 15%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px   at 62% 88%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1.4px 1.4px at 68% 48%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.5px 1.5px at 76% 22%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 82% 65%, rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1.3px 1.3px at 88% 92%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1px 1px   at 94% 38%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 8%  60%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 22% 82%, rgba(255,255,255,0.5), transparent 55%),
    radial-gradient(1.3px 1.3px at 44% 5%,  rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1.4px 1.4px at 58% 55%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 70% 5%,  rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 90% 12%, rgba(255,255,255,0.9), transparent 55%);
}

.section-gradient-cosmic {
  background:
    radial-gradient(1.5px 1.5px at 6% 12%,  rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.3px 1.3px at 14% 42%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 22% 68%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1.5px 1.5px at 30% 22%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 38% 85%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1.5px 1.5px at 46% 35%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1px 1px   at 54% 58%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(1.3px 1.3px at 62% 12%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1.4px 1.4px at 70% 45%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.2px 1.2px at 78% 78%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1.5px 1.5px at 86% 25%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.3px 1.3px at 92% 62%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 4%  55%, rgba(255,255,255,0.5), transparent 55%),
    radial-gradient(1.5px 1.5px at 18% 92%, rgba(255,255,255,0.9), transparent 55%),
    radial-gradient(1.3px 1.3px at 50% 5%,  rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(1px 1px   at 66% 92%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #E01D78 0%, #FF6347 100%);
}

/* --- Final CTA button sizing (Simran: reduce button size) --- */
.section-gradient-cosmic .buttons {
  padding: 12px 24px !important;
  font-size: 15px !important;
  min-width: 180px !important;
  height: auto !important;
}


/* --- Footer per Simran + Kevin's Figma --- */
.footer {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: 60px 40px;
}
.footer__container {
  max-width: var(--frame-desktop);
  margin: 0 auto;
}
.footer__tagline {
  color: #FFFFFF !important;   /* Simran: change from grey to white */
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;
  max-width: 200px;
  margin-top: 20px;
}
.footer__logotype {
  width: 140px;
  height: auto;
}
.footer__contact-line {
  color: var(--text-body-on-dark);
  font-size: 15px;
  line-height: 24px;
  margin: 4px 0;
}
.footer__contact-line a {
  color: var(--accent-primary);
  text-decoration: underline;
}
.footer__link {
  color: var(--text-body-on-dark) !important;
  font-weight: 400 !important;   /* Simran: reduce from bold to regular */
  text-decoration: underline;
  display: block;
  margin: 4px 0;
}
.footer__social {
  display: inline-flex;
  transition: opacity 0.2s;
}
.footer__social:hover {
  opacity: 0.7;
}


/* ============================================================================
   MOBILE FIXES per Simran
   ============================================================================ */

@media (max-width: 768px) {
  /* Hero: astronaut first, then text (Simran: reverse order) */
  .hero-astronaut__inner {
    display: flex !important;
    flex-direction: column !important;
    padding: 40px 24px !important;
    gap: 32px !important;
    text-align: center !important;
    align-items: center !important;
  }
  .hero-astronaut__media {
    order: -1 !important;   /* image first */
  }
  .hero-astronaut__copy {
    text-align: center !important;
    align-items: center !important;
    display: flex;
    flex-direction: column;
  }
  .hero-astronaut__title {
    font-size: 36px !important;
    line-height: 42px !important;
  }
  .hero-astronaut__image {
    max-height: 400px !important;
  }
  
  /* Pink gradient section (Your Agency Shouldn't Stop Growing) — mobile fixes */
  .section-gradient-cosmic {
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    text-align: center !important;
  }
  .section-gradient-cosmic__inner {
    padding: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .section-gradient-cosmic__eyebrow,
  .section-gradient-cosmic__body p {
    text-align: center !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }
  
  /* Rocket booster / image-text-split — mobile: reduce spacing */
  .image-text-split__inner {
    padding: 40px 24px !important;
    gap: 24px !important;
    grid-template-columns: 1fr !important;
  }
  .image-text-split__text {
    text-align: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .image-text-split__title {
    font-size: 24px !important;
    line-height: 30px !important;
  }
  .image-text-split__cta {
    align-self: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    width: auto !important;
    min-width: 140px !important;
  }
  
  /* Six Card Grid — mobile fixes */
  .six-card-grid__inner {
    padding: 40px 24px !important;
    gap: 24px !important;
  }
  .six-card-grid__header {
    gap: 12px !important;
    text-align: center !important;
  }
  .six-card-grid__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .six-card-grid__card {
    padding: 20px !important;
    gap: 8px !important;
  }
  .six-card-grid__card-title {
    font-size: 18px !important;
    line-height: 24px !important;
  }
  .six-card-grid__card-body {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  
  /* Why Us / Icon Feature Grid — mobile: single column */
  .icon-feature-grid__inner {
    padding: 40px 24px !important;
  }
  .icon-feature-grid__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .bullet-point-items {
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .bullet-point-items__headline {
    font-size: 17px !important;
    line-height: 22px !important;
  }
  .bullet-point-items__text {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  
  /* Centered text section — mobile */
  .centered-text-section__inner {
    padding: 40px 24px !important;
  }
  .centered-text-section__paragraph p {
    font-size: 15px !important;
    line-height: 22px !important;
    text-align: center;
  }
  
  /* Final CTA buttons — equal full-width per Simran */
  .section-gradient-cosmic .buttons {
    display: flex !important;
    width: 100% !important;
    max-width: 300px !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  
  /* Footer — mobile stack */
  .footer {
    padding: 40px 24px !important;
  }
  .footer__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px;
    align-items: center !important;
    text-align: center !important;
  }
  .footer__brand {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
    width: 100%;
  }
  .footer__content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .footer__socials {
    justify-content: center !important;
  }
}

/* Mobile nav / hamburger drawer */
@media (max-width: 768px) {
  .nav__logo {
    height: 32px !important;    /* Simran: reduce logo size on mobile */
  }
  
  .mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: var(--accent-primary);
    z-index: 9999;
    padding: 60px 24px 40px;
    display: none;
    flex-direction: column;
    overflow-y: auto;
  }
  .mobile-nav-drawer.is-open {
    display: flex;
  }
  .mobile-nav-drawer__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 24px;
    cursor: pointer;
  }
  .mobile-nav-drawer__link {
    color: #FFFFFF !important;
    font-family: var(--font-body);
    font-size: 20px;
    line-height: 32px;
    padding: 12px 0;
    text-decoration: none;
    display: block;
  }
  .mobile-nav-drawer__link:hover {
    color: #FFE0EE !important;    /* Simran: better contrast than orange */
  }
  .mobile-nav-drawer__submenu {
    background: var(--surface-dark-alt);   /* Softer dark than pure black */
    border-radius: 12px;
    padding: 16px 20px;
    margin: 8px 0;
  }
  .mobile-nav-drawer__submenu a {
    color: var(--text-body-on-dark) !important;
    font-size: 15px;
    padding: 6px 0;
    display: block;
  }
}


/* Correct checklist-dark: padding INSIDE, ensure box-sizing prevents overflow */
.checklist-dark {
  padding: 60px 40px !important;
  box-sizing: border-box !important;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}
.checklist-dark__inner {
  max-width: var(--frame-desktop);
  margin: 0 auto;
  box-sizing: border-box;
}
.checklist-dark__grid {
  box-sizing: border-box !important;
}

/* Same for hero-astronaut — inner needs box-sizing */
.hero-astronaut {
  padding: 0 !important;
  box-sizing: border-box !important;
}
.hero-astronaut__inner {
  padding: 60px 40px !important;
  box-sizing: border-box !important;
  max-width: var(--frame-desktop);
  margin: 0 auto;
}

/* Section-gradient-cosmic needs inner padding, section itself no padding */
.section-gradient-cosmic {
  padding: 0 !important;
  box-sizing: border-box !important;
}
.section-gradient-cosmic__inner {
  padding: 60px 40px !important;
  box-sizing: border-box !important;
  max-width: var(--frame-desktop);
  margin: 0 auto;
}


/* Fix mobile: Why Us checklist-dark grid should collapse to 1 column */
@media (max-width: 768px) {
  .checklist-dark__grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .checklist-dark {
    padding: 40px 24px !important;
  }
  .checklist-dark__inner {
    padding: 0 !important;
  }
  .checklist-dark__header {
    margin-bottom: 24px !important;
  }
}


/* ============================================================================
   HERO ASTRONAUT — Simran round 2 fixes
   - Transparent astronaut composited on continuous starfield
   - No visible rectangular edge
   ============================================================================ */

/* Layered dense starfield — closer match to Kevin's Figma */
.hero-astronaut {
  background-color: #080B15 !important;
  background-image:
    /* Layer 1: bright close stars */
    radial-gradient(1.8px 1.8px at 3% 8%,   rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 22%,  rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px     at 15% 45%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 12%, rgba(255,255,255,0.85),transparent 60%),
    radial-gradient(1.8px 1.8px at 28% 68%, rgba(255,255,255,0.95),transparent 60%),
    radial-gradient(1.5px 1.5px at 35% 30%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px     at 42% 82%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 18%, rgba(255,255,255,0.85),transparent 60%),
    radial-gradient(1.8px 1.8px at 55% 48%, rgba(255,255,255,0.95),transparent 60%),
    radial-gradient(1.5px 1.5px at 62% 88%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px     at 68% 22%, rgba(255,255,255,1),   transparent 60%),
    radial-gradient(1.5px 1.5px at 75% 62%, rgba(255,255,255,0.85),transparent 60%),
    radial-gradient(1.8px 1.8px at 82% 15%, rgba(255,255,255,0.95),transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(2px 2px     at 94% 92%, rgba(255,255,255,1),   transparent 60%),
    /* Layer 2: mid stars */
    radial-gradient(1.2px 1.2px at 5% 55%,  rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 12% 78%, rgba(255,255,255,0.65),transparent 55%),
    radial-gradient(1.2px 1.2px at 19% 38%, rgba(255,255,255,0.75),transparent 55%),
    radial-gradient(1.2px 1.2px at 26% 5%,  rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 32% 92%, rgba(255,255,255,0.65),transparent 55%),
    radial-gradient(1.2px 1.2px at 39% 58%, rgba(255,255,255,0.75),transparent 55%),
    radial-gradient(1.2px 1.2px at 45% 32%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 52% 72%, rgba(255,255,255,0.65),transparent 55%),
    radial-gradient(1.2px 1.2px at 58% 5%,  rgba(255,255,255,0.75),transparent 55%),
    radial-gradient(1.2px 1.2px at 65% 42%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 71% 78%, rgba(255,255,255,0.65),transparent 55%),
    radial-gradient(1.2px 1.2px at 78% 32%, rgba(255,255,255,0.75),transparent 55%),
    radial-gradient(1.2px 1.2px at 84% 72%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(1.2px 1.2px at 91% 5%,  rgba(255,255,255,0.65),transparent 55%),
    /* Layer 3: distant faint stars */
    radial-gradient(1px 1px at 2% 32%,   rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 10% 65%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 17% 20%,  rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 23% 88%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 30% 50%,  rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 37% 12%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 44% 62%,  rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 50% 92%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 57% 38%,  rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 64% 78%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 71% 8%,   rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 78% 48%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 85% 90%,  rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 92% 65%,  rgba(255,255,255,0.45),transparent 50%),
    radial-gradient(1px 1px at 98% 32%,  rgba(255,255,255,0.4), transparent 50%);
}

/* Transparent astronaut — no visible box */
.hero-astronaut__media {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.hero-astronaut__image {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: 700px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================================
   TRUST PARTNER / IMAGE-TEXT-SPLIT — Simran round 2
   - Height needs to come DOWN
   - Width needs to go UP  
   - CTA sizing to match Figma exactly
   ============================================================================ */

.image-text-split__media {
  aspect-ratio: 4 / 3 !important;   /* Wider aspect — was square */
  max-height: 520px !important;      /* Height cap so it doesn't get too tall */
  overflow: hidden;
}
.image-text-split__media img,
.image-text-split__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* CTA — Kevin's exact sizing */
.image-text-split__cta {
  padding: 10px 24px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  min-width: auto !important;
  width: auto !important;
  align-self: flex-start !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* ============================================================================
   FONT WEIGHT NORMALIZATION — Simran round 2 systemic fix
   - Every text element uses Kevin's exact weight from Figma JSON
   ============================================================================ */

/* Nav — Inter 400 (was 600) */
.nav__link,
.nav__cta,
a.nav__link,
button.nav__cta {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 27px !important;
}

/* All buttons — Inter 400 (default was 700) */
.buttons,
.buttons--style-primary,
.buttons--style-secondary,
a.buttons,
button.buttons {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 27px !important;
  letter-spacing: 0 !important;
}

/* All eyebrows — PJS 500 (weight often defaults heavier) */
.section-label,
.section-label__text,
.hero-astronaut__eyebrow,
.hero-moon__eyebrow,
.section-gradient-cosmic__eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
}

/* H1 — PJS 700 */
h1,
.hero-astronaut__title,
.hero-moon__title,
.page-title-header__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 58px !important;
  letter-spacing: 0 !important;
}

/* H2 — PJS 500 (was often 700) */
h2,
.six-card-grid__title,
.image-text-split__title,
.icon-feature-grid__title,
.centered-text-section__title,
.checklist-grid__title,
.numbered-steps__title,
.intro-side-bullet-list__title,
.cta-single-button__title,
.cta-two-button__title,
.pricing-tier-cards__title,
.blog-post-grid__title,
.rates-table__title,
.comparison-table__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 36px !important;
  line-height: 42px !important;
  letter-spacing: 0 !important;
}

/* Card titles / H3 — PJS 400 (was 700) */
.six-card-grid__card-title,
.icon-feature-grid__card-title,
.bullet-point-items__headline,
.checklist-grid__card-title,
h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
}

/* Six card grid number — Inter 400 pink */
.six-card-grid__number {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 17px !important;
  line-height: 27px !important;
  color: var(--accent-primary) !important;
}

/* Display body — PJS 400 24/30 */
.hero-astronaut__lead p,
.section-gradient-cosmic__body p,
.centered-text-section__paragraph p,
.section-gradient-cosmic h2 + p {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 24px !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
}

/* Emphasized (bold) second paragraph in centered text — PJS 700 */
.centered-text-section__paragraph p strong,
.centered-text-section__paragraph strong,
.section-gradient-cosmic__body p:last-child {
  font-weight: 700 !important;
}

/* Small body — Inter 400 15/24 */
.six-card-grid__card-body,
.bullet-point-items__text,
.icon-feature-grid__card-body,
.checklist-grid__card-body,
.image-text-split__paragraph p {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
}

/* Footer tagline, link, contact-line — Inter 400 15/24 */
.footer__tagline,
.footer__link,
.footer__contact-line,
a.footer__link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
}

/* Footer column titles — PJS 500 20/24 */
.footer__col-title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  line-height: 24px !important;
  letter-spacing: 0 !important;
}

/* Copyright — Inter 400 12/18 */
.footer__copyright {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  letter-spacing: 0 !important;
}


/* ============================================================================
   ROUND 3 FIXES — Simran QA against v6
   ============================================================================ */

/* --- Wire Kevin's actual Figma gradient backgrounds --- */


/* Final CTA gets the Start Growing background */


/* Remove all CSS radial-gradient star layers from these sections */


/* Second occurrence of section-gradient-cosmic (the final CTA) uses Start Growing bg */


/* ============================================================================
   TRUST PARTNER — Simran round 3
   - Height DOWN 2 sizes, width UP 2 sizes
   - Corner radius fix (was messed up)
   - Title should wrap: One Trusted Partner. / Every Specialty Your Agency / Needs.
   - Title weight lighter
   - Spacing between title / paragraphs / CTA tightened
   ============================================================================ */

.image-text-split {
  padding: 60px 0 !important;
}
.image-text-split__inner {
  gap: 60px !important;
  align-items: center !important;
  padding: 40px !important;
}
.image-text-split__media {
  aspect-ratio: 5 / 3 !important;   /* Wider and shorter than 4/3 */
  max-height: 440px !important;      /* Simran: come down by 2 sizes */
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 24px !important;    /* Corner radius fix */
}
.image-text-split__media img,
.image-text-split__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 24px !important;    /* Match container */
  display: block !important;
}
.image-text-split__text {
  gap: 12px !important;              /* Tighten between all children */
}
.image-text-split__title {
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  max-width: none !important;       /* Force 3-line wrap: "One Trusted Partner. / Every Specialty Your Agency / Needs." */
  margin: 0 !important;
}
.image-text-split__paragraph {
  gap: 8px !important;
  margin: 0 !important;
}
.image-text-split__paragraph p {
  margin: 0 0 8px 0 !important;
}
.image-text-split__cta {
  padding: 10px 24px !important;
  font-size: 15px !important;
  align-self: flex-start !important;
  margin-top: 8px !important;
  border-radius: 8px !important;
  width: auto !important;
  min-width: auto !important;
}

/* ============================================================================
   WHAT CHANGES — Simran round 3
   - Bottom padding matches top for consistent gap to next section
   - Mobile: 6 individual cards visible with gaps (not one grey block)
   ============================================================================ */
.six-card-grid {
  padding-top: 80px !important;
  padding-bottom: 80px !important;   /* Match top for equal spacing */
}
.six-card-grid__inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Font weight normalization for What Changes */
.six-card-grid__title {
  font-weight: 500 !important;
}

/* ============================================================================
   FOOTER — Simran round 3
   - Logo 3x bigger
   - Tighter logo→tagline→divider spacing
   - Email inline with "Email:" label
   - Larger column text
   ============================================================================ */
.footer__logotype {
  width: 200px !important;     /* Was 140px — increase substantially */
  height: auto !important;
  display: block;
}
.footer__brand {
  gap: 8px !important;
}
.footer__tagline {
  color: #FFFFFF !important;
  font-size: 15px !important;
  line-height: 22px !important;
  margin-top: 8px !important;   /* Tighten spacing from logo */
  max-width: 220px;
}
.footer__brand::after {
  content: '';
  display: block;
  width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.25);
  margin-top: 16px;             /* Tighter divider under tagline */
}
.footer__contact-line {
  font-size: 15px !important;
  line-height: 22px !important;
  white-space: nowrap;          /* Force "Email: hello@..." on same line */
  margin: 4px 0 !important;
}
.footer__contact-line a {
  display: inline !important;   /* Ensure email stays inline */
  color: #FFFFFF !important;
  text-decoration: underline;
}
.footer__link {
  font-size: 15px !important;   /* Simran: increase column text size */
  line-height: 24px !important;
  font-weight: 400 !important;
}
.footer__col-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

/* ============================================================================
   START GROWING — Simran round 3
   - Both CTA buttons same font size (17px)
   - Body font weight lighter
   ============================================================================ */
.section-gradient-cosmic .buttons,
.section-gradient-cosmic a.buttons,
.section-gradient-cosmic button.buttons {
  font-size: 17px !important;   /* Both buttons same size */
  line-height: 24px !important;
  font-weight: 500 !important;
  padding: 12px 28px !important;
  height: auto !important;
  min-width: 200px !important;
  border-radius: 8px !important;
}
.section-gradient-cosmic__body p {
  font-weight: 400 !important;
}

/* ============================================================================
   WHY US — Simran round 3
   - H3 weight still heavier than Figma; force PJS 400
   - Space between supertitle and heading reduced
   ============================================================================ */
.checklist-dark__header {
  gap: 12px !important;
  margin-bottom: 32px !important;
}
.checklist-dark__item h3,
.checklist-dark__item p[style*="font-family: var(--font-display)"] {
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 26px !important;
}

/* ============================================================================
   30-DAY SECTION MOBILE — Simran round 3
   - Reduce space between supertitle and first paragraph
   - First paragraph font weight
   ============================================================================ */
@media (max-width: 768px) {
  .centered-text-section__inner {
    gap: 16px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  .centered-text-section .section-label {
    margin-bottom: 12px !important;
  }
  .centered-text-section__paragraph p {
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    margin: 0 0 12px 0 !important;
  }
  
  /* Trust Partner mobile: tighter spacing, centered CTA */
  .image-text-split__inner {
    gap: 20px !important;
    padding: 32px 24px !important;
  }
  .image-text-split__text {
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .image-text-split__title {
    max-width: 100% !important;
    font-size: 26px !important;
    line-height: 32px !important;
    text-align: center !important;
  }
  .image-text-split__paragraph {
    gap: 8px !important;
  }
  .image-text-split__cta {
    align-self: center !important;   /* Center-align on mobile — was left */
    margin: 8px auto 0 !important;
  }
  .image-text-split__media {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    max-height: 320px !important;
  }
  
  /* What Changes mobile: 6 individual cards with visible gaps */
  .six-card-grid__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .six-card-grid__card {
    background: #F5F5F7 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-bottom: 0 !important;
  }
  .six-card-grid__card-title {
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 24px !important;
  }
  .six-card-grid__card-body {
    font-weight: 400 !important;
  }
  
  /* Start Growing mobile: both buttons same font size */
  .section-gradient-cosmic .buttons {
    font-size: 15px !important;   /* Force same size on both */
    padding: 10px 20px !important;
    width: 100% !important;
    max-width: 280px !important;
  }
  
  /* Your Agency mobile: reduce supertitle weight */
  .section-gradient-cosmic__eyebrow {
    font-weight: 400 !important;
    font-size: 15px !important;
  }
  .section-gradient-cosmic__body p {
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }
  
  /* Footer mobile: increase logo, tighten spacing */
  .footer__logotype {
    width: 180px !important;
  }
  .footer__brand::after {
    width: 100%;
    max-width: 240px;
  }
}

/* ============================================================================
   HERO TITLE FONT WEIGHT — Simran said hero title still not matching
   Kevin's Figma spec is exactly PJS 700 48/58
   ============================================================================ */
.hero-astronaut__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  font-size: 48px !important;
  line-height: 58px !important;
  letter-spacing: 0 !important;
}
@media (max-width: 768px) {
  .hero-astronaut__title {
    font-size: 36px !important;
    line-height: 42px !important;
  }
}


/* ============================================================================
   MOBILE NAV — Simran round 3
   - X close button clearly visible while scrolling
   - Softer submenu bg (not stark black)
   - Book a Call aligned below Pricing (same treatment)
   - Hover color has contrast against pink
   ============================================================================ */
@media (max-width: 1200px) {
  /* Drawer container */
  .nav__menu[data-open="true"] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: var(--accent-primary) !important;   /* Stellar Pink */
    z-index: 9999 !important;
    padding: 72px 24px 40px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Close button — always visible at top-right, even while scrolling */
  .nav__menu[data-open="true"] .nav__toggle,
  .nav__toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;    /* Above drawer content */
    cursor: pointer !important;
  }
  .nav__toggle[aria-expanded="true"] .nav__menu-icon {
    filter: brightness(0) invert(1) !important;   /* White X */
    width: 20px !important;
    height: 20px !important;
  }
  /* Fallback: draw an X with CSS if icon doesn't render */
  .nav__toggle[aria-expanded="true"]::before {
    content: "\00d7";
    position: absolute;
    color: #FFFFFF;
    font-size: 28px;
    line-height: 1;
    font-weight: 300;
    pointer-events: none;
  }
  .nav__toggle[aria-expanded="true"] .nav__menu-icon {
    opacity: 0 !important;   /* Hide the icon, use the ::before X instead */
  }
  
  /* Drawer nav links — consistent spacing, Book a Call aligned with others */
  .nav__menu[data-open="true"] .nav__link,
  .nav__menu[data-open="true"] a {
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    display: block !important;
  }
  
  /* Book a Call — same treatment as other links, no button-like styling in drawer */
  .nav__menu[data-open="true"] .nav__cta,
  .nav__menu[data-open="true"] a.nav__cta {
    background: transparent !important;
    color: #FFFFFF !important;
    padding: 10px 0 !important;
    font-size: 20px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    display: block !important;
    margin: 0 !important;
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
  }
  
  /* Hover / active state — white with underline (contrast against pink, not orange) */
  .nav__menu[data-open="true"] .nav__link:hover,
  .nav__menu[data-open="true"] .nav__link:focus,
  .nav__menu[data-open="true"] .nav__link[aria-current="page"],
  .nav__menu[data-open="true"] a:hover {
    color: #FFE0EE !important;   /* Light pink — contrast on pink bg */
    text-decoration: underline !important;
    background: transparent !important;
  }
  
  /* Services submenu (mega menu inside drawer) — softer dark, not stark black */
  .nav__menu[data-open="true"] .nav__mega-panel,
  .nav__menu[data-open="true"] #mega-menu,
  .nav__menu[data-open="true"] .mega-menu {
    background: #3D2537 !important;   /* Warm dark that harmonizes with pink */
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 8px 0 !important;
  }
  .nav__menu[data-open="true"] .mega-menu a,
  .nav__menu[data-open="true"] .nav__mega-panel a {
    color: #FFE0EE !important;    /* Soft pink text on warm dark */
    font-size: 15px !important;
    line-height: 22px !important;
    padding: 6px 0 !important;
  }
  .nav__menu[data-open="true"] .mega-menu a:hover {
    color: #FFFFFF !important;
  }
}




/* Final CTA "Start Growing" gradient section — different bg */








/* ============================================================================
   FONT WEIGHT/SIZE CORRECTIONS — Kevin's exact Figma values
   Force these against any earlier definitions
   ============================================================================ */

/* Hero body → Inter 17/27 (Kevin's spec) — was rendering as PJS 24/30 */
body .hero-astronaut__lead p,
html body .hero-astronaut__lead p {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  color: var(--text-body-on-dark) !important;
}

/* Trust Partner H2 → 36/42 (was 32/38) */
body .image-text-split__title,
html body .image-text-split__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  color: var(--accent-secondary) !important;
}

/* Trust Partner body → Inter 17/27 (was 15/24) */
body .image-text-split__paragraph p,
html body .image-text-split__paragraph p {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  line-height: 27px !important;
  font-weight: 400 !important;
  color: var(--text-body) !important;
}

/* Why Us H3 → PJS 400 24/30 (was 20/26) */
body .checklist-dark h3,
body .checklist-dark__item h3,
body .checklist-dark p[style*="var(--font-display)"],
html body .checklist-dark h3 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 400 !important;
  color: var(--text-on-dark) !important;
}

/* Start Growing body → PJS 400 24/30 (was 20/24 500) */
body .section--final-cta p,
html body .section--final-cta p,
body .section--final-cta > div > p:not(.section-gradient-cosmic__eyebrow):not([class*="label"]) {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 24px !important;
  line-height: 30px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
}

/* Start Growing eyebrow stays PJS 500 20/24 */
body .section--final-cta .section-gradient-cosmic__eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
}

/* Start Growing H2 → 36/42 500 white */
body .section--final-cta h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
}


/* ============================================================================
   PHASE A — Simran QA fixes, one authoritative block loaded LAST
   ============================================================================ */

/* --- Gradient sections: Kevin's actual stars over CSS gradient --- */
html body .section-gradient-cosmic,
html body section.section-gradient-cosmic {
  background:
    linear-gradient(135deg, #E01D78 0%, #FF6347 100%) !important;
  background-color: #E01D78 !important;
  position: relative !important;
  overflow: hidden !important;
}



/* Ensure content sits above the star pseudo-layer */
html body .section-gradient-cosmic > * {
  position: relative;
  z-index: 1;
}

/* --- SIX CARD GRID: make 6 individual cards visible on desktop, generous gap --- */
html body .six-card-grid {
  padding-top: 80px !important;
  padding-bottom: 80px !important;   /* Match top per Simran */
}
html body .six-card-grid__grid {
  gap: 40px 30px !important;         /* Row gap larger than column gap for visual separation */
  align-items: stretch !important;
}
html body .six-card-grid__card {
  background: #F5F5F7 !important;
  border-radius: 16px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* --- TRUST PARTNER: consistent corner radius, better text-image alignment --- */
html body .image-text-split__inner {
  align-items: center !important;
  padding: 60px 40px !important;
  gap: 60px !important;
}
html body .image-text-split__media {
  aspect-ratio: 5 / 3 !important;
  max-height: 440px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #080B15;
}
html body .image-text-split__media img,
html body .image-text-split__image {
  border-radius: 0 !important;  /* Container handles the radius; image just fills */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body .image-text-split__title {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--accent-secondary) !important;
  max-width: none !important;
  margin: 0 !important;
}
html body .image-text-split__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  justify-content: center !important;
}

/* --- WHY US: reduce H3 weight, tighter supertitle→heading spacing --- */
html body .checklist-dark__header {
  gap: 12px !important;
  margin-bottom: 32px !important;
}
html body .checklist-dark__item h3,
html body .checklist-dark__item p[style*="font-family"] {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  color: var(--text-on-dark) !important;
  margin: 0 0 8px 0 !important;
}
html body .checklist-dark__item p:last-child,
html body .checklist-dark__item p[style*="Inter"] {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 22px !important;
}

/* --- START GROWING: body copy PJS 400, buttons same font size --- */
html body .section--final-cta h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 36px !important;
  line-height: 42px !important;
  font-weight: 500 !important;
  color: #FFFFFF !important;
}
html body .section--final-cta p:not(.section-gradient-cosmic__eyebrow):not([class*="label"]) {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #FFFFFF !important;
}
html body .section--final-cta .buttons,
html body .section--final-cta a.buttons {
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  min-width: 200px !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* --- FOOTER: bigger logo, tighter spacing, inline email, bigger column text --- */
html body .footer__logotype {
  width: 260px !important;   /* Was 200px — Simran said still small, bump */
  height: auto !important;
}
html body .footer__brand {
  gap: 0 !important;
}
html body .footer__tagline {
  color: #FFFFFF !important;
  font-size: 15px !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}
html body .footer__brand::after {
  margin-top: 12px !important;  /* Tighter divider under tagline */
  width: 200px;
}
html body .footer__contact-line {
  font-size: 15px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  margin: 4px 0 !important;
}
html body .footer__contact-line a {
  display: inline !important;
  white-space: nowrap !important;
}
html body .footer__col-title {
  font-size: 17px !important;
  font-weight: 500 !important;
  margin-bottom: 12px !important;
}
html body .footer__link {
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

/* --- MOBILE responsive fixes --- */
@media (max-width: 768px) {
  /* Six card grid: 1-col with visible card breaks */
  html body .six-card-grid__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body .six-card-grid__card {
    background: #F5F5F7 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 0 !important;
  }
  
  /* Trust Partner mobile: center CTA under paragraph */
  html body .image-text-split__cta {
    align-self: center !important;
    margin: 12px auto 0 !important;
  }
  html body .image-text-split__text {
    align-items: center !important;
    text-align: center !important;
  }
  
  /* 30-day mobile: tighter spacing supertitle → paragraph */
  html body .centered-text-section__inner {
    gap: 12px !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  html body .centered-text-section .section-label {
    margin-bottom: 8px !important;
  }
  html body .centered-text-section__paragraph p {
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 22px !important;
    margin: 0 0 8px 0 !important;
  }
  html body .centered-text-section__paragraph p:last-child,
  html body .centered-text-section__paragraph strong {
    font-weight: 700 !important;
  }
  
  /* Start Growing mobile: both buttons same font-size */
  html body .section--final-cta .buttons {
    font-size: 15px !important;
    padding: 10px 20px !important;
    width: 100% !important;
    max-width: 280px !important;
  }
  
  /* Footer mobile logo — still bigger than before */
  html body .footer__logotype {
    width: 200px !important;
  }
  
  /* Nav logo smaller on mobile */
  html body .nav__logo,
  html body .nav__logotype {
    height: 28px !important;
    width: auto !important;
  }
}

/* --- MOBILE NAV DRAWER: Simran's items --- */
@media (max-width: 1200px) {
  /* Drawer open state */
  html body .nav__menu[data-open="true"] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: var(--accent-primary) !important;
    z-index: 9999 !important;
    padding: 72px 24px 40px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  
  /* X close button — visible, sticky top-right */
  html body .nav__toggle[aria-expanded="true"] {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    border-radius: 50% !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
  }
  html body .nav__toggle[aria-expanded="true"]::before {
    content: "×";
    color: #FFFFFF;
    font-size: 32px;
    line-height: 1;
    font-weight: 300;
    position: absolute;
  }
  html body .nav__toggle[aria-expanded="true"] .nav__menu-icon {
    opacity: 0 !important;
  }
  
  /* All drawer links — same treatment */
  html body .nav__menu[data-open="true"] a,
  html body .nav__menu[data-open="true"] .nav__link,
  html body .nav__menu[data-open="true"] .nav__cta {
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    display: block !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    width: auto !important;
    min-width: 0 !important;
  }
  
  /* Hover / active: light pink NOT orange */
  html body .nav__menu[data-open="true"] a:hover,
  html body .nav__menu[data-open="true"] a:focus,
  html body .nav__menu[data-open="true"] a[aria-current="page"] {
    color: #FFE0EE !important;
    text-decoration: underline !important;
  }
  
  /* Services submenu: softer dark bg */
  html body .nav__menu[data-open="true"] #mega-menu,
  html body .nav__menu[data-open="true"] .nav__mega-panel,
  html body .nav__menu[data-open="true"] .mega-menu {
    background: #3D2537 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin: 8px 0 !important;
  }
  html body .nav__menu[data-open="true"] #mega-menu a,
  html body .nav__menu[data-open="true"] .mega-menu a {
    color: #FFE0EE !important;
    font-size: 15px !important;
    line-height: 22px !important;
    padding: 6px 0 !important;
  }
  html body .nav__menu[data-open="true"] #mega-menu a:hover,
  html body .nav__menu[data-open="true"] .mega-menu a:hover {
    color: #FFFFFF !important;
  }
}


/* ============================================================================
   ULTRA FORCE: gradient sections — kill all earlier rules
   Higher specificity than anything before via html body section.class1.class2
   ============================================================================ */

html body section.section-gradient-cosmic.section--first-gradient,
html body section.section-gradient-cosmic.section--final-cta,
html body section[class*="section-gradient-cosmic"] {
  background-image: linear-gradient(135deg, #E01D78 0%, #FF6347 100%) !important;
  background-color: #E01D78 !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  position: relative !important;
  overflow: hidden !important;
}



/* Content sits above stars */
html body section.section-gradient-cosmic > * {
  position: relative !important;
  z-index: 1 !important;
}

/* ============================================================================
   SIX CARD GRID — force 2 rows of 3 clearly
   Bigger vertical gap so ROWS read as rows, not columns
   ============================================================================ */
html body section.six-card-grid .six-card-grid__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 64px 24px !important;      /* Big vertical gap, tighter horizontal */
  align-items: stretch !important;
}
html body section.six-card-grid .six-card-grid__card {
  background: #F5F5F7 !important;
  border-radius: 16px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  height: 100% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

@media (max-width: 900px) {
  html body section.six-card-grid .six-card-grid__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}
@media (max-width: 600px) {
  html body section.six-card-grid .six-card-grid__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  html body section.six-card-grid .six-card-grid__card {
    padding: 24px !important;
    border-radius: 12px !important;
  }
}


/* ============================================================================
   v11 — Brand Guidelines alignment
   Source of truth: BrightOwl-figma-colors-typography-effectstyles.json
   Load LAST — overrides everything else
   ============================================================================ */

/* --- E1: Formalize BO tokens as CSS custom properties --- */
:root {
  /* Colors — matches Kevin's Figma export */
  --bo-cosmic-orange: #FF6347;
  --bo-stellar-pink: #E01D78;
  --bo-deep-night: #080B15;
  --bo-space-dust: #2D2331;
  --bo-nova-white: #FFFFFF;
  --bo-form-grey: #F5F5F7;         /* A1: NEW token, form input fills */
  --bo-light-lunar-grey: #E6E6E6;
  --bo-mid-lunar-grey: #A0A0A0;
  --bo-dark-lunar-grey: #404040;
  --bo-brand-gradient: linear-gradient(135deg, #E01D78 0%, #FF6347 100%);
  
  /* Typography — token names match the JSON exactly */
  --bo-font-display: 'Plus Jakarta Sans', sans-serif;
  --bo-font-body: 'Inter', sans-serif;
  
  --bo-h1-size: 48px;      --bo-h1-lh: 58px;      --bo-h1-weight: 700;
  --bo-h1-mobile-size: 38px; --bo-h1-mobile-lh: 42px;  /* B1: bumped from 36px */
  --bo-h2-size: 36px;      --bo-h2-lh: 42px;      --bo-h2-weight: 500;
  --bo-h3-size: 30px;      --bo-h3-lh: 36px;      --bo-h3-weight: 400;
  --bo-h4-size: 24px;      --bo-h4-lh: 30px;      --bo-h4-weight: 400;
  --bo-h5-size: 20px;      --bo-h5-lh: 24px;      --bo-h5-weight: 500;
  --bo-cta-size: 17px;     --bo-cta-lh: 27px;     --bo-cta-weight: 400;
  --bo-large-copy-size: 17px;  --bo-large-copy-lh: 27px;
  --bo-bodycopy-size: 15px;    --bo-bodycopy-lh: 24px;   --bo-bodycopy-weight: 400;
  --bo-bodycopy-bold-weight: 700;
  --bo-hyperlink-size: 15px;   --bo-hyperlink-lh: 24px;
  --bo-smallcopy-size: 12px;   --bo-smallcopy-lh: 18px;
  
  /* Effects */
  --bo-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);   /* C1: Kevin's spec */
}

/* --- Mobile H1 responsive (B1) --- */
@media (max-width: 768px) {
  html body .hero-astronaut__title,
  html body h1 {
    font-size: var(--bo-h1-mobile-size) !important;
    line-height: var(--bo-h1-mobile-lh) !important;
  }
}

/* --- C1: Card shadow per Kevin's BO-Shadow spec --- */
html body section.six-card-grid .six-card-grid__card {
  box-shadow: var(--bo-shadow) !important;
}

/* --- B3 option A: Hyperlinks underlined (footer + inline body text) --- */
html body .footer__link,
html body .footer__contact-line a,
html body a.footer__link {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
/* Inline body-text links inside content sections */
html body .section-gradient-cosmic p a,
html body .centered-text-section p a,
html body .image-text-split__paragraph a,
html body .six-card-grid__card-body a,
html body .checklist-dark__item p a {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}
/* Nav links stay bare — not classical hyperlinks */
html body .nav__link,
html body .nav__cta,
html body nav a {
  text-decoration: none !important;
}

/* --- D1: Kevin's official starfield via background-blend-mode: screen --- */
/* Kevin's PNG has BLACK background + WHITE stars. Screen blend makes black transparent. */
html body section.section-gradient-cosmic,
html body section.section-gradient-cosmic.section--first-gradient,
html body section.section-gradient-cosmic.section--final-cta {
  background: 
    url('/assets/starfield.webp') center center / cover no-repeat,
    var(--bo-brand-gradient) !important;
  background-blend-mode: screen, normal !important;
  background-color: var(--bo-stellar-pink) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Remove the ::before star overlay from earlier — no longer needed */
html body section.section-gradient-cosmic::before {
  content: none !important;
  background: none !important;
  display: none !important;
}


/* ============================================================================
   v11.1 — SIX CARD GRID spacing rebalance
   Cards were stretching to card 5's 4-line height, others showed empty bottoms.
   Fix: tighter card padding, closer rows, reduced section padding, content top-anchored.
   ============================================================================ */

html body section.six-card-grid {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
html body section.six-card-grid .six-card-grid__grid {
  gap: 40px 24px !important;   /* was 64px 24px — tighter rows */
  align-items: stretch !important;
}
html body section.six-card-grid .six-card-grid__card {
  padding: 24px !important;    /* was 32px — 16px less per card */
  gap: 8px !important;         /* was 12px — tighter title→body */
  justify-content: flex-start !important;
  box-shadow: var(--bo-shadow) !important;
  border-radius: 16px !important;
  background: #F5F5F7 !important;
  height: 100% !important;
}

/* Number → title spacing (was in the general gap: 12px, now controlled here) */
html body section.six-card-grid .six-card-grid__number {
  margin: 0 !important;
}
html body section.six-card-grid .six-card-grid__card-title {
  margin: 0 0 4px 0 !important;
}
html body section.six-card-grid .six-card-grid__card-body {
  margin: 0 !important;
}


/* ============================================================================
   v11.2 — SIX CARD GRID: kill stretch, cards fit content
   Cards align at top; bottoms ragged where content lengths differ.
   ============================================================================ */
html body section.six-card-grid .six-card-grid__grid {
  align-items: start !important;   /* was stretch — cards no longer match heights */
}
html body section.six-card-grid .six-card-grid__card {
  height: auto !important;         /* was 100% — cards size to content */
  align-self: start !important;
}


/* ============================================================================
   v11.4 — Two fixes:
   (a) Stars: tile at 700px so they render smaller
   (b) Cards: stretch to equal heights, center content vertically
   ============================================================================ */

/* Shrink the starfield tile so stars appear ~35% of native size */
html body section.section-gradient-cosmic,
html body section.section-gradient-cosmic.section--first-gradient,
html body section.section-gradient-cosmic.section--final-cta {
  background:
    url('/assets/starfield.webp') 0 0 / 700px auto repeat,
    var(--bo-brand-gradient) !important;
  background-blend-mode: screen, normal !important;
  background-color: var(--bo-stellar-pink) !important;
}

/* Cards: back to equal heights per row, content centered vertically */
html body section.six-card-grid .six-card-grid__grid {
  align-items: stretch !important;   /* back from `start` — rows equalize card heights */
}
html body section.six-card-grid .six-card-grid__card {
  height: 100% !important;           /* fill row height */
  align-self: auto !important;       /* clear the earlier override */
  justify-content: center !important; /* vertical center content — empty space splits top/bottom */
}


/* ============================================================================
   v11.5 — SIX CARD GRID margins only
   Add horizontal breathing room + bottom gap to next section.
   Nothing else touched.
   ============================================================================ */
html body section.six-card-grid {
  padding: 48px 40px 96px 40px !important;   /* was 48px 0 — add 40px left/right, 96px bottom */
}