/* =========================================================================
   apex.css -- Sitewide canonical stylesheet for The Annuity Institute.
   Supersedes the previous per-layer split (apex.css base + apex-home.css).

   Load order:  style.css (tokens/reset) -> apex.css (this file, all pages)
   Future pages load ONLY this file (+ style.css). The homepage additionally
   loads apex-home.css until Task 5 switches it to this file.

   ALL selectors are scoped under body.apex-page to prevent leak into LP,
   matchmaker, booking, post-booking, etc.
   =========================================================================

   TABLE OF CONTENTS
   1.  Page base + depth tokens
   2.  Global header
   3.  Hero
   4.  Buttons
   5.  Trust strip
   6.  Generic section
   7.  Advisor showcase
   8.  Education hub cards
   9.  Newsletter block
   10. FAQ accordion
   11. Footer
   12. Legal pages
   13. Inline figure
   14. Button hover lift
   15. Card hover shadow
   16. Nav dropdown (Phase B)
   17. Breadcrumb
   18. Shelf index pages
   19. Coming-soon stub
   20. Reveal-on-scroll animations
   21. Report shell (ai-report)
   22. Income estimate block
   ---- Homepage layer (promoted from apex-home.css) ----
   23. Homepage token overrides
   24. Hero: income-forward split
   25. Income card
   26. Trust strip icons
   27. Carriers strip + marquee
   28. How it works flow steps
   29. What we do balance breakdown
   30. How we vet checklist
   31. Honest guidance layout
   32. Education hub blog cards
   33. Testimonials
   34. Final CTA banner
   35. Section color blocking
   36. Reduced-motion: homepage
   ---- Sitewide additions (new in this file) ----
   37. Nav: mega menu panel (Annuity Guide)
   38. Active / current-page nav state
   39. Page hero band (.apex-pagehero)
   40. Prose column (.apex-prose)
   41. Related topics row (.apex-related)
   42. CTA band (.apex-ctaband)
   ========================================================================= */


/* =========================================================================
   0. DESIGN TOKENS (self-sufficient :root block)
   Mirrors the full set from style.css so that pages loading ONLY apex.css
   (+ apex-anim.css) receive all custom properties without also needing
   style.css. Duplicate definitions on pages that do load style.css are
   harmless -- identical values, last-write wins with the same result.
   ========================================================================= */

:root {
  /* Brand palette */
  --ai-navy:        #0a1f3a;
  --ai-navy-deep:   #061528;
  --ai-navy-soft:   #1c3454;
  /* --ai-slate: lighter, desaturated navy used for the guide-page CTA band.
     Distinct from --ai-navy (footer) so the band and footer read as separate
     blocks. Gold button maintains strong contrast against this tone. */
  --ai-slate:       #1e3a5f;
  --ai-gold:        #c9a961;
  --ai-gold-deep:   #a88846;
  --ai-gold-soft:   #e8d4a3;
  --ai-cream:       #fbf8f1;
  --ai-cream-deep:  #f3ede0;
  --ai-paper:       #ffffff;

  --ai-text:        #0a1f3a;
  --ai-text-muted:  #4a5b73;
  --ai-text-soft:   #7c8a9e;
  --ai-text-on-navy: #f5ecd2;

  --ai-border:      #d7cdb8;
  --ai-border-soft: #e8e0cf;
  --ai-error:       #b91c1c;
  --ai-success:     #15803d;

  /* Type */
  --ai-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ai-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --ai-space-1: 4px;
  --ai-space-2: 8px;
  --ai-space-3: 12px;
  --ai-space-4: 16px;
  --ai-space-5: 24px;
  --ai-space-6: 32px;
  --ai-space-7: 48px;
  --ai-space-8: 64px;
  --ai-space-9: 96px;

  /* Radius */
  --ai-radius-sm: 4px;
  --ai-radius-md: 8px;
  --ai-radius-lg: 14px;

  /* Shadows */
  --ai-shadow-sm: 0 1px 2px rgba(10, 31, 58, 0.06);
  --ai-shadow-md: 0 4px 16px rgba(10, 31, 58, 0.08);
  --ai-shadow-lg: 0 12px 32px rgba(10, 31, 58, 0.12);

  /* Motion */
  --ai-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ai-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =========================================================================
   1. PAGE BASE + DEPTH TOKENS
   ========================================================================= */

body.apex-page {
  background: var(--ai-cream);
  color: var(--ai-text);
  font-family: var(--ai-font-body);
}

/* Depth helpers shared across homepage + sub-pages. */
body.apex-page {
  --ai-shadow-card: 0 18px 50px -18px rgba(10, 31, 58, 0.40);
  --ai-shadow-gold: 0 8px 22px -8px rgba(201, 169, 97, 0.55);
  --ai-grid-line: rgba(10, 31, 58, 0.035);
}


/* =========================================================================
   2. GLOBAL HEADER
   ========================================================================= */

body.apex-page .apex-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ai-navy-deep);
  border-bottom: 1px solid var(--ai-gold-deep);
}
body.apex-page .apex-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: var(--ai-space-4) var(--ai-space-5);
  display: flex; align-items: center; justify-content: space-between;
}
body.apex-page .apex-brand { display: inline-flex; align-items: center; gap: var(--ai-space-3); text-decoration: none; }
body.apex-page .apex-brand__mark { height: 48px; width: auto; display: block; }
body.apex-page .apex-brand__text { display: flex; flex-direction: column; line-height: 1; }
body.apex-page .apex-brand__the { font-family: var(--ai-font-display); font-size: 0.78rem; font-style: italic; color: var(--ai-gold-soft); }
body.apex-page .apex-brand__name { font-family: var(--ai-font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ai-cream); }
body.apex-page .apex-nav { display: flex; gap: var(--ai-space-5); align-items: center; }
body.apex-page .apex-nav a {
  color: var(--ai-cream); text-decoration: none; font-size: 15px;
}
body.apex-page .apex-nav a:hover { color: var(--ai-gold-soft); }
body.apex-page .apex-nav a.apex-btn--gold { color: var(--ai-navy); }
body.apex-page .apex-nav a.apex-btn--gold:hover { color: var(--ai-navy); }
body.apex-page .apex-nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  font-size: 22px; color: var(--ai-cream);
}

@media (max-width: 720px) {
  body.apex-page .apex-nav { display: none; }
  body.apex-page .apex-nav-toggle { display: inline-flex; }
  body.apex-page .apex-nav.is-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ai-navy-deep); padding: var(--ai-space-5);
    border-bottom: 1px solid var(--ai-gold-deep);
  }
}


/* =========================================================================
   3. HERO
   ========================================================================= */

body.apex-page .apex-hero {
  padding: var(--ai-space-8) var(--ai-space-5);
  text-align: center;
}
body.apex-page .apex-hero__inner { max-width: 760px; margin: 0 auto; }

/* Split hero: text-left + photo-right on desktop, stacks on mobile. */
body.apex-page .apex-hero--split {
  padding: var(--ai-space-7) var(--ai-space-5);
  text-align: left;
}
body.apex-page .apex-hero--split .apex-hero__inner {
  max-width: 1200px;
  display: grid; gap: var(--ai-space-7);
  grid-template-columns: 1fr;
  align-items: center;
}
body.apex-page .apex-hero__text { max-width: 560px; }
body.apex-page .apex-hero--split .apex-eyebrow,
body.apex-page .apex-hero--split .apex-doric { text-align: left; }
body.apex-page .apex-hero--split .apex-hero__sub { margin-left: 0; }
body.apex-page .apex-hero--split .apex-cta-row { justify-content: flex-start; }
body.apex-page .apex-hero--split .apex-trust-strip { justify-content: flex-start; }
body.apex-page .apex-hero__media {
  position: relative;
  border-radius: var(--ai-radius-lg);
  overflow: hidden;
  box-shadow: var(--ai-shadow-lg);
  aspect-ratio: 4 / 3;
}
body.apex-page .apex-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  body.apex-page .apex-hero--split { text-align: center; }
  body.apex-page .apex-hero--split .apex-eyebrow,
  body.apex-page .apex-hero--split .apex-doric { text-align: center; }
  body.apex-page .apex-hero--split .apex-hero__sub { margin: 0 auto var(--ai-space-6); }
  body.apex-page .apex-hero--split .apex-cta-row { justify-content: center; }
  body.apex-page .apex-hero--split .apex-trust-strip { justify-content: center; }
  body.apex-page .apex-hero__media { aspect-ratio: 16 / 10; }
}
@media (min-width: 900px) {
  body.apex-page .apex-hero--split .apex-hero__inner {
    grid-template-columns: 1.05fr 1fr;
  }
}
body.apex-page .apex-eyebrow {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ai-gold-deep); margin-bottom: var(--ai-space-3);
}
body.apex-page .apex-doric {
  color: var(--ai-gold); font-family: var(--ai-font-display);
  margin: var(--ai-space-2) 0 var(--ai-space-4);
}
body.apex-page .apex-hero h1 {
  font-family: var(--ai-font-display);
  font-size: 36px; line-height: 1.1; margin: 0 0 var(--ai-space-4);
  color: var(--ai-navy);
}
body.apex-page .apex-hero h1 em { color: var(--ai-gold-deep); font-style: italic; }
@media (min-width: 720px) {
  body.apex-page .apex-hero h1 { font-size: 52px; }
}
body.apex-page .apex-hero__sub {
  font-size: 15px; color: var(--ai-text-muted);
  max-width: 520px; margin: 0 auto var(--ai-space-6);
}
@media (min-width: 720px) {
  body.apex-page .apex-hero__sub { font-size: 16px; }
}


/* =========================================================================
   4. BUTTONS
   ========================================================================= */

body.apex-page .apex-cta-row {
  display: flex; gap: var(--ai-space-3); justify-content: center; flex-wrap: wrap;
}
body.apex-page .apex-btn {
  display: inline-block; padding: 14px 24px;
  border-radius: var(--ai-radius-md); font-weight: 600; text-decoration: none;
  border: 2px solid var(--ai-navy); transition: all 150ms var(--ai-ease-out);
  cursor: pointer; font-family: var(--ai-font-body); font-size: 15px;
}
body.apex-page .apex-btn--primary {
  background: var(--ai-navy); color: var(--ai-cream);
}
body.apex-page .apex-btn--primary { box-shadow: var(--ai-shadow-gold); }
body.apex-page .apex-btn--primary:hover { background: var(--ai-navy-deep); }
body.apex-page .apex-btn--outline {
  background: transparent; color: var(--ai-navy);
}
body.apex-page .apex-btn--outline:hover {
  background: var(--ai-navy); color: var(--ai-cream);
}
/* Nav CTA fix: `.apex-nav a` (0,2,2) was overriding `.apex-btn--primary` (0,2,1)
   text color, painting the filled CTA navy-on-navy. Raise specificity here. */
body.apex-page .apex-nav a.apex-btn--primary { color: var(--ai-cream); }
body.apex-page .apex-nav a.apex-btn--primary:hover { color: var(--ai-cream); }
body.apex-page .apex-btn[disabled],
body.apex-page .apex-btn:disabled {
  opacity: 0.55; cursor: not-allowed;
}
/* Small button variant */
body.apex-page .apex-btn--sm {
  padding: 9px 16px; font-size: 14px;
}


/* =========================================================================
   5. TRUST STRIP
   ========================================================================= */

body.apex-page .apex-trust-strip {
  display: flex; gap: var(--ai-space-5); justify-content: center; flex-wrap: wrap;
  margin-top: var(--ai-space-5); font-size: 13px; color: var(--ai-text-muted);
}
/* Trust-strip items use SVG icons; no bullet pseudo needed. */


/* =========================================================================
   6. GENERIC SECTION
   ========================================================================= */

body.apex-page .apex-section { padding: var(--ai-space-8) var(--ai-space-5); background: var(--ai-paper); }
body.apex-page .apex-section--alt { background: var(--ai-cream-deep); }
body.apex-page .apex-section__inner { max-width: 1080px; margin: 0 auto; }
body.apex-page .apex-section h2 {
  font-family: var(--ai-font-display);
  font-size: 30px; line-height: 1.2; margin: var(--ai-space-3) 0 var(--ai-space-5);
  color: var(--ai-navy);
}
@media (min-width: 720px) {
  body.apex-page .apex-section h2 { font-size: 40px; }
}


/* =========================================================================
   7. ADVISOR SHOWCASE
   ========================================================================= */

body.apex-page .apex-advisors {
  display: grid; gap: var(--ai-space-5); grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  body.apex-page .apex-advisors { grid-template-columns: 1fr 1fr; }
}
body.apex-page .apex-advisor-card {
  background: var(--ai-cream); border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-lg); padding: var(--ai-space-6);
  display: flex; flex-direction: column; gap: var(--ai-space-3); align-items: center;
  text-align: center;
}
body.apex-page .apex-advisor-card img {
  width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
}


/* =========================================================================
   8. EDUCATION HUB CARDS
   ========================================================================= */

body.apex-page .apex-edu-cards {
  display: grid; gap: var(--ai-space-4); grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  body.apex-page .apex-edu-cards { grid-template-columns: repeat(3, 1fr); }
}
body.apex-page .apex-edu-card {
  background: var(--ai-paper); border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md); padding: var(--ai-space-5);
}
body.apex-page .apex-edu-card__badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  background: var(--ai-gold-soft); color: var(--ai-gold-deep);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: var(--ai-space-3);
}


/* =========================================================================
   9. NEWSLETTER BLOCK
   ========================================================================= */

body.apex-page .apex-newsletter {
  margin-top: var(--ai-space-6);
  background: var(--ai-cream-deep);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-6);
  text-align: center;
}
body.apex-page .apex-newsletter__form {
  display: flex; gap: var(--ai-space-3);
  justify-content: center; max-width: 520px; margin: var(--ai-space-4) auto 0;
  flex-wrap: wrap;
}
body.apex-page .apex-newsletter__form input {
  flex: 1; min-width: 200px; padding: 12px 14px;
  border: 1px solid var(--ai-border);
  border-radius: var(--ai-radius-md); font-size: 15px;
}


/* =========================================================================
   10. FAQ ACCORDION
   ========================================================================= */

body.apex-page .apex-faq details {
  border-bottom: 1px solid var(--ai-border-soft);
  padding: var(--ai-space-4) 0;
}
body.apex-page .apex-faq summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
body.apex-page .apex-faq summary::-webkit-details-marker { display: none; }
body.apex-page .apex-faq summary::after {
  content: "+"; color: var(--ai-gold-deep); font-size: 22px;
}
body.apex-page .apex-faq details[open] summary::after { content: "-"; }
body.apex-page .apex-faq__body {
  margin-top: var(--ai-space-3); color: var(--ai-text-muted);
}


/* =========================================================================
   11. FOOTER
   ========================================================================= */

body.apex-page .apex-footer {
  background: var(--ai-navy); color: var(--ai-text-on-navy);
  padding: var(--ai-space-7) var(--ai-space-5);
}
body.apex-page .apex-footer__inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; gap: var(--ai-space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  /* Phase B: 4 equal columns. Learn / Tools / Company / Legal (spec section 6.4). */
  body.apex-page .apex-footer__inner { grid-template-columns: repeat(4, 1fr); }
}
body.apex-page .apex-footer h4 {
  font-family: var(--ai-font-display); font-size: 16px; margin: 0 0 var(--ai-space-3);
  color: var(--ai-cream);
}
body.apex-page .apex-footer ul { list-style: none; padding: 0; margin: 0; }
body.apex-page .apex-footer li { margin-bottom: var(--ai-space-2); }
body.apex-page .apex-footer a {
  color: var(--ai-text-on-navy); text-decoration: none;
}
body.apex-page .apex-footer a:hover { color: var(--ai-gold); }
body.apex-page .apex-footer__legal {
  border-top: 1px solid rgba(245, 236, 210, 0.15);
  margin-top: var(--ai-space-6); padding-top: var(--ai-space-4);
  font-size: 12px; color: var(--ai-text-soft); text-align: center;
}


/* =========================================================================
   12. LEGAL PAGES (/privacy, /terms)
   ========================================================================= */

body.apex-page .apex-legal { max-width: 760px; margin: 0 auto; }
body.apex-page .apex-legal h1 {
  font-family: var(--ai-font-display);
  font-size: 36px; color: var(--ai-navy);
  margin: var(--ai-space-3) 0 var(--ai-space-2);
}
body.apex-page .apex-legal h2 {
  font-family: var(--ai-font-display);
  margin-top: var(--ai-space-6);
}
body.apex-page .apex-legal h3 {
  font-family: var(--ai-font-display);
  margin-top: var(--ai-space-5);
}
body.apex-page .apex-legal__meta { color: var(--ai-text-muted); }
body.apex-page .apex-legal hr {
  margin: var(--ai-space-8) 0;
  border: 0; border-top: 1px solid var(--ai-border-soft);
}


/* =========================================================================
   13. INLINE FIGURE
   ========================================================================= */

body.apex-page .apex-inline-figure {
  margin: var(--ai-space-6) 0;
  border-radius: var(--ai-radius-lg);
  overflow: hidden;
  box-shadow: var(--ai-shadow-md);
  aspect-ratio: 16 / 9;
}
body.apex-page .apex-inline-figure img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}


/* =========================================================================
   14. BUTTON HOVER LIFT
   ========================================================================= */

body.apex-page .apex-btn:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: var(--ai-shadow-md);
}
body.apex-page .apex-btn:not(:disabled):active {
  transform: translateY(0);
  box-shadow: var(--ai-shadow-sm);
}


/* =========================================================================
   15. CARD HOVER SHADOW
   ========================================================================= */

body.apex-page .apex-advisor-card,
body.apex-page .apex-edu-card {
  transition: transform 200ms var(--ai-ease-out),
              box-shadow 200ms var(--ai-ease-out);
}
body.apex-page .apex-advisor-card:hover,
body.apex-page .apex-edu-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ai-shadow-md);
}


/* =========================================================================
   16. NAV DROPDOWN (Phase C)
   Hover-to-open (with CSS :hover + :focus-within for keyboard). Each
   .apex-nav__dd is a div+button, replacing the old details/summary pattern.
   Desktop: absolutely-positioned white panels, gold outline, centered under
   trigger. Mobile (inside .apex-nav.is-open drawer): menus expand inline
   via .is-open toggled by apex-nav.js.
   ========================================================================= */

/* --- Trigger button base --- */
body.apex-page .apex-nav__trigger {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ai-cream);
  font-family: var(--ai-font-body);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}
body.apex-page .apex-nav__trigger::after {
  content: "\25BE";
  font-size: 11px;
  color: var(--ai-gold-deep);
  transition: transform 200ms var(--ai-ease-out);
  display: inline-block;
}
body.apex-page .apex-nav__trigger:hover,
body.apex-page .apex-nav__trigger:focus-visible {
  color: var(--ai-gold-soft);
  outline: none;
}

/* --- Dropdown wrapper --- */
body.apex-page .apex-nav__dd {
  position: relative;
}

/* Rotate chevron while open */
body.apex-page .apex-nav__dd:hover > .apex-nav__trigger::after,
body.apex-page .apex-nav__dd:focus-within > .apex-nav__trigger::after,
body.apex-page .apex-nav__dd.is-open > .apex-nav__trigger::after {
  transform: rotate(180deg);
}

/* --- Standard dropdown panel (hidden by default) --- */
body.apex-page .apex-nav__menu {
  display: flex;
  flex-direction: column;
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms var(--ai-ease-out),
              transform 180ms var(--ai-ease-out);
}

/* Revealed by hover or keyboard focus-within */
body.apex-page .apex-nav__dd:hover > .apex-nav__menu,
body.apex-page .apex-nav__dd:focus-within > .apex-nav__menu,
body.apex-page .apex-nav__dd.is-open > .apex-nav__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Standard menu links (mobile base) */
body.apex-page .apex-nav__menu a {
  font-size: 15px;
  padding: 6px 0;
  color: var(--ai-cream);
  text-decoration: none;
  white-space: nowrap;
}
body.apex-page .apex-nav__menu a:hover { color: var(--ai-gold-soft); }

body.apex-page .apex-nav__cta { margin-left: var(--ai-space-2); }

/* --- Tapered gold divider --- */
body.apex-page .apex-nav__divider {
  height: 1px;
  width: 80%;
  margin: 4px 0 4px var(--ai-space-3);
  background: linear-gradient(
    to right,
    var(--ai-gold) 0%,
    var(--ai-gold) 55%,
    transparent 100%
  );
  opacity: 0.35;
  border: none;
}

/* --- Desktop styles --- */
@media (min-width: 721px) {
  /* Invisible hover bridge: fills the gap between trigger and panel so the
     panel does not vanish while the mouse travels down toward it. */
  body.apex-page .apex-nav__dd > .apex-nav__trigger::before {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: auto;
  }

  /* Desktop panel: white bg, gold border, centered, high z-index */
  body.apex-page .apex-nav__menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--ai-gold);
    border-radius: var(--ai-radius-md);
    box-shadow: 0 8px 24px rgba(10, 31, 58, 0.13);
    padding: var(--ai-space-3) 0;
    z-index: 200;
  }

  /* Revealed on desktop: undo the translateY offset (X stays -50%) */
  body.apex-page .apex-nav__dd:hover > .apex-nav__menu,
  body.apex-page .apex-nav__dd:focus-within > .apex-nav__menu,
  body.apex-page .apex-nav__dd.is-open > .apex-nav__menu {
    transform: translateX(-50%) translateY(0);
  }

  /* Desktop menu links: navy text on white background */
  body.apex-page .apex-nav__menu a {
    display: block;
    color: var(--ai-navy);
    font-size: 14px;
    padding: 8px var(--ai-space-4);
    border-radius: 0;
    text-decoration: none;
    white-space: nowrap;
  }
  body.apex-page .apex-nav__menu a:hover {
    color: var(--ai-navy);
    background: var(--ai-cream-deep);
  }

  /* Desktop divider: sits within the padded panel */
  body.apex-page .apex-nav__divider {
    margin: 4px var(--ai-space-3);
  }
}

/* --- Mobile dropdown (accordion inside .apex-nav.is-open drawer) --- */
@media (max-width: 720px) {
  body.apex-page .apex-nav__dd { position: static; }

  /* On mobile: always visible (stacked accordion). The is-open class is
     toggled by apex-nav.js tap handler; CSS opacity/transition still applies
     but the panel is visible once .is-open is set. */
  body.apex-page .apex-nav__menu {
    /* Override desktop absolute positioning */
    position: static;
    transform: none;
    left: auto;
    top: auto;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: var(--ai-space-3) 0 var(--ai-space-3) var(--ai-space-4);
    gap: 4px;
    /* Start hidden; .is-open reveals it */
    display: none;
  }
  body.apex-page .apex-nav__dd.is-open > .apex-nav__menu {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  /* Mobile menu links: cream on dark drawer */
  body.apex-page .apex-nav__menu a {
    color: var(--ai-cream);
    padding: 6px 0;
  }
  body.apex-page .apex-nav__menu a:hover { color: var(--ai-gold-soft); }

  /* Mobile divider: subtle on dark bg */
  body.apex-page .apex-nav__divider {
    opacity: 0.25;
    margin-left: 0;
  }

  body.apex-page .apex-nav__cta { margin: var(--ai-space-3) 0 0; }
}


/* =========================================================================
   17. BREADCRUMB
   ========================================================================= */

body.apex-page .apex-breadcrumb {
  max-width: 1080px; margin: 0 auto;
  padding: var(--ai-space-4) var(--ai-space-5) 0;
  font-size: 13px; color: var(--ai-text-muted);
}
body.apex-page .apex-breadcrumb a { color: var(--ai-text-muted); text-decoration: none; }
body.apex-page .apex-breadcrumb a:hover { color: var(--ai-gold-deep); }
body.apex-page .apex-breadcrumb span::before { content: "\203A"; margin: 0 8px; color: var(--ai-border); }


/* =========================================================================
   18. SHELF INDEX PAGES (/tools/, /learn/)
   Reuses .apex-edu-cards / .apex-edu-card grid. A shelf groups cards under
   an optional sub-heading and makes the whole card a link.
   ========================================================================= */

body.apex-page .apex-shelf__group { margin-top: var(--ai-space-7); }
body.apex-page .apex-shelf__group:first-of-type { margin-top: var(--ai-space-5); }
body.apex-page .apex-shelf__group h3 {
  font-family: var(--ai-font-display); font-size: 22px;
  color: var(--ai-navy); margin: 0 0 var(--ai-space-4);
}
body.apex-page a.apex-edu-card {
  display: block; text-decoration: none; color: inherit;
}
body.apex-page a.apex-edu-card h4 {
  font-family: var(--ai-font-display); font-size: 18px;
  color: var(--ai-navy); margin: 0 0 6px;
}
body.apex-page a.apex-edu-card p {
  font-size: 14px; color: var(--ai-text-muted); margin: 0;
}
body.apex-page .apex-edu-card--soon { opacity: 0.72; }


/* =========================================================================
   19. COMING-SOON STUB
   ========================================================================= */

body.apex-page .apex-comingsoon {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: var(--ai-space-8) 0;
}
body.apex-page .apex-comingsoon h1 {
  font-family: var(--ai-font-display); font-size: 36px;
  color: var(--ai-navy); margin: var(--ai-space-3) 0 var(--ai-space-4);
}
body.apex-page .apex-comingsoon p {
  color: var(--ai-text-muted); margin: 0 auto var(--ai-space-6); max-width: 480px;
}


/* =========================================================================
   20. REVEAL-ON-SCROLL ANIMATIONS
   Elements with data-reveal start hidden + slid down 16px, then JS toggles
   .is-revealed via IntersectionObserver.
   ========================================================================= */

body.apex-page [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ai-ease-out),
              transform 600ms var(--ai-ease-out);
}
body.apex-page [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger index drives the transition-delay for advisor cards. */
body.apex-page [data-reveal-stagger] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ai-ease-out),
              transform 500ms var(--ai-ease-out);
}
body.apex-page [data-reveal-stagger="0"] { transition-delay: 0ms; }
body.apex-page [data-reveal-stagger="1"] { transition-delay: 120ms; }
body.apex-page [data-reveal-stagger="2"] { transition-delay: 240ms; }
body.apex-page [data-reveal-stagger].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero content is visible on initial paint; no entrance animation.
   The data-reveal="hero" hooks are kept in HTML for future layering. */
body.apex-page [data-reveal="hero"],
body.apex-page [data-reveal="hero-photo"] {
  opacity: 1;
  transform: none;
}

/* Respect prefers-reduced-motion. Buttons keep their hover lift (affordance). */
@media (prefers-reduced-motion: reduce) {
  body.apex-page [data-reveal],
  body.apex-page [data-reveal-stagger],
  body.apex-page [data-reveal="hero"] > *,
  body.apex-page [data-reveal="hero-photo"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* =========================================================================
   21. REPORT SHELL
   Responsive padding + definition-list styles (Task 15 fixes).
   Not scoped under body.apex-page -- the report page uses a different shell.
   ========================================================================= */

main.ai-report {
  padding: 2rem;
}

@media (max-width: 720px) {
  main.ai-report {
    padding: 1rem;
  }
}

/* "Your Info" definition list */
.ai-report dl {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: 0.5rem 1rem;
  margin: 1rem 0 1.5rem;
}

.ai-report dt {
  font-weight: 600;
  color: var(--ai-text, #0f172a);
}

.ai-report dd {
  margin: 0;
  color: var(--ai-text-muted, #334155);
}

@media (max-width: 540px) {
  .ai-report dl {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .ai-report dt { margin-top: 0.5rem; }
}


/* =========================================================================
   22. INCOME ESTIMATE BLOCK
   Rendered by report/[lead_token].ts when leads.income_estimate_snapshot
   is non-null. Scoped under .ai-report to prevent leak into apex pages.
   ========================================================================= */

.ai-report .estimate-block {
  margin: 1.5rem 0;
  padding: 1.25rem 1.25rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

.ai-report .estimate-headline {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #0f172a;
}

.ai-report .estimate-lede {
  margin: 0 0 0.75rem;
  color: #334155;
}

.ai-report .estimate-figure {
  margin: 0 0 0.25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.ai-report .estimate-figure-unit {
  font-size: 1rem;
  font-weight: 500;
  color: #475569;
}

.ai-report .estimate-annual {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #475569;
}

.ai-report .estimate-disclaimer {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: #64748b;
  line-height: 1.5;
}

.ai-report .estimate-disclaimer em {
  font-style: italic;
}


/* =========================================================================
   HOMEPAGE LAYER (promoted from apex-home.css)
   These rules were previously only loaded by index.html via apex-home.css.
   They are now part of the canonical sitewide stylesheet so that the
   homepage can drop apex-home.css in Task 5 with no visual change.
   ========================================================================= */


/* =========================================================================
   23. HOMEPAGE TOKEN OVERRIDES
   ========================================================================= */

body.apex-page { --apex-tint-gold: #f7f1e3; }


/* =========================================================================
   24. HERO: INCOME-FORWARD SPLIT LAYOUT
   ========================================================================= */

/* Modifier for the income-focused hero variant. */
body.apex-page .apex-hero--income {
  position: relative;
  overflow: hidden;
  padding: var(--ai-space-7) var(--ai-space-5) var(--ai-space-8);
  background: radial-gradient(120% 120% at 85% -10%, #ffffff 0%, #ffffff 55%, var(--ai-cream) 100%);
  text-align: left;
}

/* Gold grid texture overlaid on the hero background. */
body.apex-page .apex-hero--income::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ai-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ai-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(80% 80% at 80% 0%, #000, transparent 75%);
  mask-image: radial-gradient(80% 80% at 80% 0%, #000, transparent 75%);
}

/* Two-column grid: text (1.08fr) + media figure (0.92fr) on wide screens. */
body.apex-page .apex-hero__grid {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ai-space-7);
  align-items: center;
}

@media (min-width: 900px) {
  body.apex-page .apex-hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
  }
}

/* Text column: keep content above the texture pseudo. */
body.apex-page .apex-hero--income .apex-hero__text {
  position: relative;
}

/* Override center-align from .apex-hero for income variant. */
body.apex-page .apex-hero--income .apex-eyebrow,
body.apex-page .apex-hero--income h1 {
  text-align: left;
}

body.apex-page .apex-hero--income .apex-cta-row {
  justify-content: flex-start;
}

body.apex-page .apex-hero--income .apex-trust-strip {
  justify-content: flex-start;
}

body.apex-page .apex-hero--income .apex-hero__sub {
  margin-left: 0;
}

/* Mobile: center everything when stacked. */
@media (max-width: 899px) {
  body.apex-page .apex-hero--income {
    text-align: center;
  }
  body.apex-page .apex-hero--income .apex-eyebrow,
  body.apex-page .apex-hero--income h1 {
    text-align: center;
  }
  body.apex-page .apex-hero--income .apex-cta-row {
    justify-content: center;
  }
  body.apex-page .apex-hero--income .apex-trust-strip {
    justify-content: center;
  }
  body.apex-page .apex-hero--income .apex-hero__sub {
    margin: 0 auto var(--ai-space-6);
  }
}

/* Hero media figure (image-led variant). */
body.apex-page .apex-hero__media { margin: 0; }


/* =========================================================================
   25. INCOME CARD (navy dark anchor)
   Kept for backwards compat; hero now uses a figure.
   ========================================================================= */

body.apex-page .apex-income-card {
  position: relative;
  background: linear-gradient(
    160deg,
    var(--ai-navy-soft),
    var(--ai-navy) 60%,
    var(--ai-navy-deep)
  );
  border: 1px solid rgba(201, 169, 97, 0.28);
  border-radius: var(--ai-radius-lg);
  box-shadow: var(--ai-shadow-card);
  padding: var(--ai-space-6);
}

/* Floating "60 seconds" pill anchored to top-right corner. */
body.apex-page .apex-income-card__chip {
  position: absolute;
  top: -14px;
  right: -12px;
  background: var(--ai-paper);
  color: var(--ai-navy);
  border-radius: 30px;
  padding: 7px 14px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid rgba(10, 31, 58, 0.08);
  box-shadow: 0 10px 24px -10px rgba(10, 31, 58, 0.5);
  white-space: nowrap;
}

/* "Your monthly income gap" label. */
body.apex-page .apex-income-card__k {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-gold);
  margin-bottom: var(--ai-space-3);
}

/* The big dollar figure. */
body.apex-page .apex-income-card__big {
  font-family: var(--ai-font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--ai-text-on-navy);
  line-height: 1;
}

body.apex-page .apex-income-card__big small {
  font-family: var(--ai-font-body);
  font-size: 18px;
  font-weight: 400;
  color: rgba(174, 188, 205, 1);
}

/* "Example" tag so the number is never read as guaranteed. */
body.apex-page .apex-income-card__tag {
  display: inline-block;
  margin-left: var(--ai-space-2);
  font-family: var(--ai-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ai-gold);
  opacity: 0.72;
  vertical-align: middle;
  line-height: 1;
}

/* Description line under the figure. */
body.apex-page .apex-income-card__desc {
  font-size: 13px;
  color: rgba(174, 188, 205, 1);
  margin-top: var(--ai-space-3);
  line-height: 1.5;
}

/* Progress bar track + gold fill. */
body.apex-page .apex-income-card__bar {
  height: 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: var(--ai-space-5);
  overflow: hidden;
}

body.apex-page .apex-income-card__bar i {
  display: block;
  height: 100%;
  width: 62%;
  background: linear-gradient(90deg, var(--ai-gold), var(--ai-gold-deep));
}

/* "See how to close it" link. */
body.apex-page .apex-income-card__link {
  display: inline-block;
  margin-top: var(--ai-space-4);
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-gold);
  text-decoration: none;
}

body.apex-page .apex-income-card__link:hover {
  color: var(--ai-gold-soft);
}


/* =========================================================================
   26. TRUST STRIP ICONS (navy)
   ========================================================================= */

body.apex-page .apex-trust-strip__item { display: inline-flex; align-items: center; gap: var(--ai-space-2); }
body.apex-page .apex-ico { width: 18px; height: 18px; flex-shrink: 0; color: var(--ai-navy); }


/* =========================================================================
   27. CARRIERS STRIP + MARQUEE
   ========================================================================= */

body.apex-page .apex-carriers {
  text-align: center;
  padding: var(--ai-space-7) var(--ai-space-5);
}

body.apex-page .apex-carriers__inner {
  max-width: 1080px;
  margin: 0 auto;
}

body.apex-page .apex-carriers__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-text-soft);
  margin-bottom: var(--ai-space-4);
}

body.apex-page .apex-carriers__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
body.apex-page .apex-carriers__track {
  display: flex;
  align-items: center;
  gap: var(--ai-space-8);
  width: max-content;
  animation: apex-marquee 40s linear infinite;
}
body.apex-page .apex-carriers__track img {
  height: 38px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1);
  flex-shrink: 0;
}
@keyframes apex-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }


/* =========================================================================
   28. HOW IT WORKS: FLOW STEPS
   ========================================================================= */

body.apex-page .apex-flow { display: flex; flex-direction: column; gap: var(--ai-space-3); align-items: stretch; margin-top: var(--ai-space-6); }
body.apex-page .apex-flow__step { flex: 1; background: var(--ai-paper); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); padding: var(--ai-space-6); box-shadow: var(--ai-shadow-sm); text-align: center; transition: border-color 150ms var(--ai-ease-out), box-shadow 150ms var(--ai-ease-out); }
body.apex-page .apex-flow__step:hover { border-color: var(--ai-navy); box-shadow: var(--ai-shadow-md); }
body.apex-page .apex-flow__num { font-family: var(--ai-font-display); font-size: 56px; font-weight: 700; line-height: 1; color: var(--ai-gold-deep); margin-bottom: var(--ai-space-2); }
body.apex-page .apex-flow__step h3 { font-family: var(--ai-font-display); color: var(--ai-navy); margin-bottom: var(--ai-space-2); }
body.apex-page .apex-flow__step p { font-size: 14px; color: var(--ai-text-muted); }
body.apex-page .apex-flow__arrow { display: flex; align-items: center; justify-content: center; color: var(--ai-gold); }
body.apex-page .apex-flow__arrow svg { width: 26px; height: 26px; transform: rotate(90deg); }
@media (min-width: 820px) {
  body.apex-page .apex-flow { flex-direction: row; align-items: stretch; gap: var(--ai-space-2); }
  body.apex-page .apex-flow__arrow svg { transform: none; }
}


/* =========================================================================
   29. WHAT WE DO: BALANCE BREAKDOWN
   ========================================================================= */

body.apex-page .apex-balance { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-4); margin-top: var(--ai-space-6); align-items: stretch; }
@media (min-width: 820px) { body.apex-page .apex-balance { grid-template-columns: 1fr 1.15fr 1fr; } }
body.apex-page .apex-balance__side { background: var(--ai-cream); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); padding: var(--ai-space-5); text-align: center; transition: transform 150ms var(--ai-ease-out), background 150ms var(--ai-ease-out); }
body.apex-page .apex-balance__best { position: relative; background: #fffdf6; border: 2px solid var(--ai-gold); border-radius: var(--ai-radius-lg); padding: var(--ai-space-6); text-align: center; box-shadow: 0 16px 40px -16px rgba(201,169,97,0.6); }
body.apex-page .apex-balance__check { width: 34px; height: 34px; margin: 0 auto var(--ai-space-2); border-radius: 50%; background: var(--ai-gold); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
body.apex-page .apex-balance__tag { font-family: var(--ai-font-display); font-size: 19px; color: var(--ai-text-muted); margin-bottom: var(--ai-space-2); }
body.apex-page .apex-balance__best-tag { font-family: var(--ai-font-display); font-size: 23px; color: var(--ai-gold-deep); margin-bottom: var(--ai-space-2); }
body.apex-page .apex-balance__side p { font-size: 15px; color: var(--ai-text-muted); line-height: 1.55; }
body.apex-page .apex-balance__best p { font-size: 15px; color: var(--ai-navy); line-height: 1.55; }
body.apex-page .apex-balance__note { max-width: 680px; margin: var(--ai-space-6) auto 0; text-align: center; }
body.apex-page .apex-balance__note p { color: var(--ai-text-muted); line-height: 1.65; }
body.apex-page .apex-balance__side:hover { transform: scale(1.02); outline: 2px solid var(--ai-navy); outline-offset: -1px; background: var(--ai-paper); }
body.apex-page .apex-balance__side:hover .apex-balance__tag { color: var(--ai-navy); }
body.apex-page .apex-balance__side:hover p { color: var(--ai-text); }
body.apex-page .apex-balance__best { transition: transform 200ms var(--ai-ease-out), box-shadow 200ms var(--ai-ease-out); }
body.apex-page .apex-balance__best:hover { transform: scale(1.04); box-shadow: 0 26px 64px -16px rgba(201,169,97,0.9); }


/* =========================================================================
   30. HOW WE VET: CHECKLIST
   ========================================================================= */

body.apex-page .apex-vet__list {
  list-style: none;
  padding: 0;
  margin: var(--ai-space-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-4);
}

body.apex-page .apex-vet__item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--ai-space-4); padding: var(--ai-space-4) var(--ai-space-5); background: var(--ai-paper); border: 1px solid rgba(10,31,58,0.14); border-radius: var(--ai-radius-md); box-shadow: var(--ai-shadow-md); transition: transform 150ms var(--ai-ease-out), outline-color 150ms var(--ai-ease-out); }
body.apex-page .apex-vet__item:hover { transform: scale(1.02); outline: 2px solid var(--ai-navy); outline-offset: -1px; }

body.apex-page .apex-vet__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ai-navy);
  font-size: 16px;
  font-weight: 700;
  margin-top: 1px;
}

body.apex-page .apex-vet__check svg {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

body.apex-page .apex-vet__body strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ai-navy);
  margin-bottom: var(--ai-space-1);
}

body.apex-page .apex-vet__body p {
  font-size: 14px;
  color: var(--ai-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 760px) { body.apex-page .apex-vet__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ai-space-4); } }


/* =========================================================================
   31. HONEST GUIDANCE: TRUST LIST + MEDIA FIGURE
   ========================================================================= */

/* Two-column layout: trust list on left, figure/photo on right. */
body.apex-page .apex-guidance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ai-space-7);
  align-items: center;
  margin-top: var(--ai-space-6);
}

@media (min-width: 900px) {
  body.apex-page .apex-guidance {
    grid-template-columns: 1fr 1fr;
  }
}

body.apex-page .apex-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-5);
}

body.apex-page .apex-trust-list__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ai-space-3);
}

/* Gold check for trust list items. */
body.apex-page .apex-trust-list__check {
  flex-shrink: 0;
  color: var(--ai-gold-deep);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 2px;
}

body.apex-page .apex-trust-list__check svg {
  width: 18px;
  height: 18px;
  display: block;
}

body.apex-page .apex-trust-list__body strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--ai-navy);
  margin-bottom: 4px;
}

body.apex-page .apex-trust-list__body p {
  font-size: 14px;
  color: var(--ai-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Media figure within the honest-guidance section. */
body.apex-page .apex-guidance__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--ai-radius-lg);
  box-shadow: var(--ai-shadow-card);
}


/* =========================================================================
   32. EDUCATION HUB: BLOG CARD GRID
   ========================================================================= */

body.apex-page .apex-blog { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-5); margin-top: var(--ai-space-6); }
@media (min-width: 720px) { body.apex-page .apex-blog { grid-template-columns: repeat(3, 1fr); } }
body.apex-page .apex-blog-card { display: block; text-decoration: none; background: var(--ai-paper); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); overflow: hidden; box-shadow: var(--ai-shadow-sm); transition: transform 150ms var(--ai-ease-out), box-shadow 150ms var(--ai-ease-out); }
body.apex-page .apex-blog-card:hover { transform: scale(1.02); outline: 2px solid var(--ai-navy); box-shadow: var(--ai-shadow-md); }
body.apex-page .apex-blog-card__media { background: var(--ai-cream); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; }
body.apex-page .apex-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.apex-page .apex-blog-card__body { padding: var(--ai-space-5); }
body.apex-page .apex-blog-card__cat { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ai-gold-deep); margin-bottom: var(--ai-space-2); }
body.apex-page .apex-blog-card__body h4 { font-family: var(--ai-font-display); font-size: 20px; color: var(--ai-navy); margin-bottom: var(--ai-space-2); line-height: 1.2; }
body.apex-page .apex-blog-card__body p { font-size: 14px; color: var(--ai-text-muted); margin-bottom: var(--ai-space-3); line-height: 1.5; }
body.apex-page .apex-blog-card__read { font-size: 13px; font-weight: 600; color: var(--ai-navy); }


/* =========================================================================
   33. TESTIMONIALS
   ========================================================================= */

body.apex-page .apex-tmons { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-5); margin-top: var(--ai-space-6); }
@media (min-width: 720px) { body.apex-page .apex-tmons { grid-template-columns: repeat(3, 1fr); } }
body.apex-page .apex-tmon { background: var(--ai-paper); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); padding: var(--ai-space-6); box-shadow: var(--ai-shadow-sm); margin: 0; }
body.apex-page .apex-tmon__stars { color: var(--ai-gold); letter-spacing: 2px; margin-bottom: var(--ai-space-3); }
body.apex-page .apex-tmon blockquote { font-family: var(--ai-font-display); font-size: 19px; line-height: 1.4; color: var(--ai-navy); margin: 0 0 var(--ai-space-4); }
body.apex-page .apex-tmon figcaption { font-size: 13px; color: var(--ai-text-muted); font-weight: 600; }
body.apex-page .apex-tmon__person { display: flex; align-items: center; gap: var(--ai-space-3); }
body.apex-page .apex-tmon__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }


/* =========================================================================
   34. FINAL CTA: FULL-BLEED BACKGROUND IMAGE + NAVY OVERLAY
   ========================================================================= */

body.apex-page .apex-cta-banner { position: relative; padding: var(--ai-space-9) var(--ai-space-5); background: url("/images/apex/cta-bg.png") center/cover no-repeat; text-align: center; overflow: hidden; }
body.apex-page .apex-cta-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,31,58,0.58), rgba(6,21,40,0.70)); }
body.apex-page .apex-cta-banner__content { position: relative; max-width: 640px; margin: 0 auto; }
body.apex-page .apex-cta-banner__content h2 { font-family: var(--ai-font-display); font-size: 34px; color: var(--ai-cream); margin-bottom: var(--ai-space-3); }
@media (min-width: 720px) { body.apex-page .apex-cta-banner__content h2 { font-size: 44px; } }
body.apex-page .apex-cta-banner__content p { color: rgba(245,236,210,0.85); margin-bottom: var(--ai-space-6); line-height: 1.6; }
body.apex-page .apex-btn--gold { background: var(--ai-gold); color: var(--ai-navy); border-color: var(--ai-gold); }
body.apex-page .apex-btn--gold:hover { background: var(--ai-gold-deep); border-color: var(--ai-gold-deep); }


/* =========================================================================
   35. SECTION COLOR BLOCKING (homepage section-rhythm backgrounds)
   ========================================================================= */

body.apex-page #carriers { background: var(--ai-paper); }
body.apex-page #how-it-works { background: var(--ai-cream-deep); }
body.apex-page #how-we-vet { background: var(--ai-paper); }
body.apex-page #what-we-do { background: var(--apex-tint-gold); }
body.apex-page #honest-guidance { background: var(--ai-paper); }
body.apex-page #education-hub { background: var(--ai-cream-deep); }
body.apex-page #testimonials { background: var(--ai-paper); }
body.apex-page #faq { background: var(--ai-cream-deep); }


/* =========================================================================
   36. REDUCED-MOTION: HOMEPAGE-SPECIFIC DISABLES
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  body.apex-page .apex-blog-card {
    transform: none;
    transition: none;
  }
  body.apex-page .apex-blog-card:hover {
    transform: none;
  }
  body.apex-page .apex-carriers__track { animation: none; }
  body.apex-page .apex-balance__best:hover,
  body.apex-page .apex-balance__side:hover,
  body.apex-page .apex-vet__item:hover { transform: none; }
}


/* =========================================================================
   SITEWIDE ADDITIONS
   New selectors introduced in this consolidation pass. Not in apex.css or
   apex-home.css previously. All scoped under body.apex-page and reference
   only existing CSS custom properties.
   ========================================================================= */


/* =========================================================================
   37. NAV: ANNUITY GUIDE VERTICAL PANEL + FLYOUTS
   The .apex-nav__dd--guide variant uses a vertical list of category rows
   (.apex-nav__cat), each revealing a flyout submenu (.apex-nav__flyout)
   to the right on hover/focus. A "Browse the full learning hub" link at
   the bottom spans the full panel.
   ========================================================================= */

/* Guide panel: wider to accommodate category rows and right-flyouts. */
@media (min-width: 721px) {
  body.apex-page .apex-nav__dd--guide > .apex-nav__menu {
    min-width: 260px;
    padding: var(--ai-space-2) 0;
  }
}

/* Category row: positioned so the flyout can emerge from its right edge. */
body.apex-page .apex-nav__cat {
  position: relative;
  cursor: default;
}

body.apex-page .apex-nav__cat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px var(--ai-space-4);
  font-size: 14px;
  color: var(--ai-navy);
  font-family: var(--ai-font-body);
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
  gap: var(--ai-space-3);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}
body.apex-page .apex-nav__cat:hover > .apex-nav__cat-label,
body.apex-page .apex-nav__cat:focus-within > .apex-nav__cat-label {
  background: var(--ai-cream-deep);
}

body.apex-page .apex-nav__chevron {
  color: var(--ai-gold-deep);
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 150ms var(--ai-ease-out);
}

/* Flyout submenu: hidden until parent cat is hovered/focused. */
body.apex-page .apex-nav__flyout {
  display: flex;
  flex-direction: column;
  /* Hidden state */
  opacity: 0;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 160ms var(--ai-ease-out),
              transform 160ms var(--ai-ease-out);
}

body.apex-page .apex-nav__cat:hover > .apex-nav__flyout,
body.apex-page .apex-nav__cat:focus-within > .apex-nav__flyout {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Desktop flyout positioning */
@media (min-width: 721px) {
  body.apex-page .apex-nav__flyout {
    position: absolute;
    /* Sit flush with the right edge of the parent panel */
    left: 100%;
    top: -2px;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--ai-gold);
    border-radius: var(--ai-radius-md);
    box-shadow: 0 8px 24px rgba(10, 31, 58, 0.13);
    padding: var(--ai-space-2) 0;
    z-index: 201;
  }

  /* Viewport-edge safety: if the flyout would overflow right, flip to left. */
  body.apex-page .apex-nav__cat--flip > .apex-nav__flyout {
    left: auto;
    right: 100%;
    transform: translateX(-6px);
  }
  body.apex-page .apex-nav__cat--flip:hover > .apex-nav__flyout,
  body.apex-page .apex-nav__cat--flip:focus-within > .apex-nav__flyout {
    transform: translateX(0);
  }

  /* Invisible hover bridge between category row and flyout */
  body.apex-page .apex-nav__cat::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 10px;
    pointer-events: auto;
  }

  body.apex-page .apex-nav__flyout a {
    display: block;
    color: var(--ai-navy);
    font-size: 14px;
    padding: 8px var(--ai-space-4);
    text-decoration: none;
    white-space: nowrap;
  }
  body.apex-page .apex-nav__flyout a:hover {
    background: var(--ai-cream-deep);
  }

  /* Dividers inside flyout panels use the same tapered gold style, scoped margin. */
  body.apex-page .apex-nav__flyout .apex-nav__divider {
    margin: 4px var(--ai-space-3);
  }
}

/* Browse all link at the bottom of the Guide panel */
body.apex-page .apex-nav__hub-link {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-gold-deep);
  text-decoration: none;
  padding: 9px var(--ai-space-4);
  white-space: nowrap;
}
body.apex-page .apex-nav__hub-link:hover {
  color: var(--ai-navy);
}

/* The foot divider before the hub link uses a slightly different opacity */
body.apex-page .apex-nav__divider--foot {
  opacity: 0.45;
  margin: 6px var(--ai-space-3);
}

/* Mobile: category rows expand inline (accordion). */
@media (max-width: 720px) {
  body.apex-page .apex-nav__cat { position: static; }
  body.apex-page .apex-nav__cat-label {
    color: var(--ai-cream);
    background: transparent;
    padding: 6px 0;
  }
  body.apex-page .apex-nav__cat:hover > .apex-nav__cat-label { background: transparent; }

  /* On mobile the flyout expands below the category row. */
  body.apex-page .apex-nav__flyout {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    padding: 0 0 var(--ai-space-2) var(--ai-space-4);
    border: none;
    box-shadow: none;
    background: transparent;
  }
  body.apex-page .apex-nav__flyout a {
    display: block;
    color: var(--ai-cream);
    font-size: 14px;
    padding: 5px 0;
    text-decoration: none;
    white-space: normal;
  }
  body.apex-page .apex-nav__flyout a:hover { color: var(--ai-gold-soft); }

  body.apex-page .apex-nav__hub-link {
    color: var(--ai-gold);
    padding: 6px 0;
  }
}


/* =========================================================================
   38. ACTIVE / CURRENT-PAGE NAV STATE
   Set by the chrome injector on the matching nav link for the current page.
   Subtle gold underline on plain links; gold text on dropdown triggers.
   ========================================================================= */

/* Plain nav links (e.g., Blog, direct hrefs). */
body.apex-page .apex-nav a.is-active,
body.apex-page .apex-nav a[aria-current="page"] {
  color: var(--ai-gold-soft);
  text-decoration: underline;
  text-decoration-color: var(--ai-gold-deep);
  text-underline-offset: 3px;
}

/* Dropdown trigger when its section is current. */
body.apex-page .apex-nav__dd.is-active > .apex-nav__trigger,
body.apex-page .apex-nav__dd[aria-current="page"] > .apex-nav__trigger {
  color: var(--ai-gold-soft);
}

/* Links inside dropdown menus and flyouts. */
body.apex-page .apex-nav__menu a.is-active,
body.apex-page .apex-nav__menu a[aria-current="page"],
body.apex-page .apex-nav__flyout a.is-active,
body.apex-page .apex-nav__flyout a[aria-current="page"] {
  color: var(--ai-gold-deep);
  background: rgba(201, 169, 97, 0.10);
}


/* =========================================================================
   39. PAGE HERO BAND (.apex-pagehero)
   Fix #3: compact, anchored page header. Reduced padding removes the
   "floating in whitespace" feel. A subtle cream-deep background tint +
   thin gold bottom border give the band visual definition so it reads as
   a page header rather than orphaned text above the body.
   ========================================================================= */

body.apex-page .apex-pagehero {
  /* Reduced from space-8/space-7 to space-6/space-5 for a compact, defined header */
  padding: var(--ai-space-6) var(--ai-space-5) var(--ai-space-5);
  /* Subtle tint distinguishes this from the plain white page body */
  background: var(--ai-cream-deep);
  /* Left-aligned: standard editorial header layout */
  text-align: left;
  /* Gold bottom border anchors the band visually */
  border-bottom: 2px solid rgba(201, 169, 97, 0.30);
}

body.apex-page .apex-pagehero--navy {
  background: var(--ai-navy-deep);
  border-bottom-color: rgba(201, 169, 97, 0.20);
}

body.apex-page .apex-pagehero__inner {
  max-width: 760px;
  margin: 0 auto;
}

body.apex-page .apex-pagehero h1 {
  font-family: var(--ai-font-display);
  font-size: 36px;
  line-height: 1.1;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-2);
}

body.apex-page .apex-pagehero--navy h1 {
  color: var(--ai-cream);
}

@media (min-width: 720px) {
  body.apex-page .apex-pagehero h1 { font-size: 46px; }
}

body.apex-page .apex-pagehero__sub {
  font-size: 16px;
  color: var(--ai-text-muted);
  max-width: 560px;
  margin: 0 0 var(--ai-space-2);
  line-height: 1.6;
}

body.apex-page .apex-pagehero--navy .apex-pagehero__sub {
  color: var(--ai-gold-soft);
}


/* =========================================================================
   40. PROSE COLUMN (.apex-prose)
   Readable max-width body text column for long-form education content.
   Comfortable line-height, sensible heading scale, link styling.
   ========================================================================= */

body.apex-page .apex-prose {
  max-width: 70ch;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 18px;
  /* Body text uses muted dark so navy headings stand out on white background */
  color: var(--ai-text-muted);
}

body.apex-page .apex-prose h2 {
  font-family: var(--ai-font-display);
  font-size: 28px;
  color: var(--ai-navy);
  margin: var(--ai-space-7) 0 var(--ai-space-3);
  line-height: 1.2;
}

body.apex-page .apex-prose h3 {
  font-family: var(--ai-font-display);
  font-size: 21px;
  color: var(--ai-navy);
  margin: var(--ai-space-6) 0 var(--ai-space-2);
  line-height: 1.25;
}

body.apex-page .apex-prose p {
  margin: 0 0 var(--ai-space-4);
}

body.apex-page .apex-prose ul,
body.apex-page .apex-prose ol {
  padding-left: var(--ai-space-6);
  margin: 0 0 var(--ai-space-4);
}

body.apex-page .apex-prose li {
  margin-bottom: var(--ai-space-2);
}

body.apex-page .apex-prose a {
  color: var(--ai-gold-deep);
  text-decoration: underline;
  text-decoration-color: var(--ai-gold-deep);
  text-underline-offset: 2px;
}

body.apex-page .apex-prose a:hover {
  color: var(--ai-gold);
  text-decoration-color: var(--ai-gold);
}

body.apex-page .apex-prose strong {
  font-weight: 600;
  color: var(--ai-navy);
}

body.apex-page .apex-prose blockquote {
  border-left: 3px solid var(--ai-gold);
  margin: var(--ai-space-5) 0;
  padding: var(--ai-space-3) var(--ai-space-5);
  font-family: var(--ai-font-display);
  font-size: 19px;
  color: var(--ai-navy);
  background: var(--ai-cream-deep);
  border-radius: 0 var(--ai-radius-sm) var(--ai-radius-sm) 0;
}

@media (min-width: 720px) {
  body.apex-page .apex-prose { font-size: 18px; }
  body.apex-page .apex-prose h2 { font-size: 30px; }
  body.apex-page .apex-prose h3 { font-size: 22px; }
}


/* =========================================================================
   41. RELATED TOPICS ROW (.apex-related)
   A row/grid of related-topic link cards shown at the bottom of guide pages.
   Reuses .apex-edu-card visuals; wraps to two columns on tablet, three on
   desktop.
   ========================================================================= */

body.apex-page .apex-related {
  margin-top: var(--ai-space-7);
  /* Fix #1: breathing room before the CTA band that follows */
  padding-bottom: var(--ai-space-8);
}

body.apex-page .apex-related__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-text-soft);
  margin-bottom: var(--ai-space-4);
}

body.apex-page .apex-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ai-space-4);
}

@media (min-width: 540px) {
  body.apex-page .apex-related__grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  body.apex-page .apex-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Each related card is an anchor; reuses edu-card shell. */
body.apex-page .apex-related__card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-4) var(--ai-space-5);
  transition: transform 150ms var(--ai-ease-out), box-shadow 150ms var(--ai-ease-out);
}

body.apex-page .apex-related__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ai-shadow-md);
}

body.apex-page .apex-related__card-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-gold-deep);
  margin-bottom: var(--ai-space-2);
}

body.apex-page .apex-related__card h4 {
  font-family: var(--ai-font-display);
  font-size: 19px;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-2);
  line-height: 1.25;
}

body.apex-page .apex-related__card p {
  font-size: 15px;
  color: var(--ai-text-muted);
  margin: 0;
  line-height: 1.5;
}


/* =========================================================================
   42. CTA BAND (.apex-ctaband)
   A full-width call-to-action band used on guide and company pages.
   Uses --ai-slate (a lighter, desaturated mid-navy) so the band reads as
   visually distinct from the footer (--ai-navy). A thin gold top border on
   the footer provides an additional separation cue. Gold button keeps strong
   contrast against the slate field.
   ========================================================================= */

body.apex-page .apex-ctaband {
  background: var(--ai-slate);
  padding: var(--ai-space-8) var(--ai-space-5);
  text-align: center;
}

/* Fix #2 continued: thin gold divider at the top of the footer so the
   CTA band and footer never read as a single merged navy block. */
body.apex-page .apex-footer {
  border-top: 2px solid rgba(201, 169, 97, 0.35);
}

body.apex-page .apex-ctaband__inner {
  max-width: 640px;
  margin: 0 auto;
}

body.apex-page .apex-ctaband h2 {
  font-family: var(--ai-font-display);
  font-size: 32px;
  color: var(--ai-cream);
  margin: 0 0 var(--ai-space-3);
  line-height: 1.2;
}

@media (min-width: 720px) {
  body.apex-page .apex-ctaband h2 { font-size: 40px; }
}

body.apex-page .apex-ctaband p {
  color: rgba(245, 236, 210, 0.85);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 var(--ai-space-6);
}

/* The gold button variant is already defined in section 34 (.apex-btn--gold).
   No new color values needed here. */


/* =========================================================================
   GUIDE PAGE COMPONENTS (added for richer guide archetype)
   Both components are token-based: no hardcoded colors. They are designed
   to sit inside .apex-section > .apex-section__inner > .apex-prose so they
   inherit the readable 70ch column naturally.
   ========================================================================= */


/* =========================================================================
   43. KEY TAKEAWAYS BOX (.apex-takeaways)
   A calm, premium callout box that appears near the top of guide pages,
   just after the hero band and before the first body section.
   - cream/paper background with a 3px gold left-border accent
   - small uppercase gold "Key takeaways" label
   - tight bullet list of 3-5 items
   - comfortable padding, brand radius
   - revealed on scroll (add data-reveal to the wrapping section)
   ========================================================================= */

body.apex-page .apex-takeaways {
  background: var(--ai-paper);
  border-left: 3px solid var(--ai-gold);
  border-radius: 0 var(--ai-radius-md) var(--ai-radius-md) 0;
  padding: var(--ai-space-5) var(--ai-space-6);
  margin: 0 0 var(--ai-space-6);
  box-shadow: var(--ai-shadow-sm);
}

/* Optional: place inside a full-width section with cream alt background */
body.apex-page .apex-section--alt .apex-takeaways {
  background: var(--ai-cream);
}

body.apex-page .apex-takeaways__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ai-gold-deep);
  margin-bottom: var(--ai-space-4);
}

body.apex-page .apex-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-3);
}

body.apex-page .apex-takeaways li {
  display: flex;
  align-items: flex-start;
  gap: var(--ai-space-3);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ai-text);
}

/* Gold bullet dot */
body.apex-page .apex-takeaways li::before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-gold);
  margin-top: 8px;
}

@media (min-width: 720px) {
  body.apex-page .apex-takeaways {
    padding: var(--ai-space-6) var(--ai-space-7);
  }
  body.apex-page .apex-takeaways li {
    font-size: 18px;
  }
}


/* =========================================================================
   44. FAQ ACCORDION (.apex-faq) - GUIDE PAGE VARIANT
   Uses native <details>/<summary> for accessibility and keyboard support.
   Replaces and supersedes the older section 10 definition with a richer,
   on-brand visual treatment:
   - summary uses display font + navy color
   - +/chevron indicator that rotates on open (CSS transform)
   - tapered gold divider between items (same gradient approach as nav divider)
   - open animation respects prefers-reduced-motion
   - scoped under .apex-faq so existing homepage FAQ (section 10) is unchanged
   ========================================================================= */

body.apex-page .apex-faq {
  margin: 0;
}

/* Optional section label above the FAQ block */
body.apex-page .apex-faq__heading {
  font-family: var(--ai-font-display);
  font-size: 28px;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-5);
  line-height: 1.2;
}

@media (min-width: 720px) {
  body.apex-page .apex-faq__heading { font-size: 32px; }
}

body.apex-page .apex-faq details {
  /* Tapered gold divider as top border, except the first item */
  border-top: none;
  padding: 0;
}

/* Gold tapered separator between items */
body.apex-page .apex-faq details + details {
  border-top: 1px solid transparent;
  border-image: linear-gradient(
    to right,
    var(--ai-gold) 0%,
    var(--ai-gold) 40%,
    transparent 100%
  ) 1;
}

body.apex-page .apex-faq summary {
  font-family: var(--ai-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ai-navy);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ai-space-4);
  padding: var(--ai-space-5) 0;
  line-height: 1.25;
  /* Remove default marker on all browsers */
  -webkit-appearance: none;
  appearance: none;
}

body.apex-page .apex-faq summary::-webkit-details-marker { display: none; }
body.apex-page .apex-faq summary::marker { display: none; }

/* Chevron indicator: rotates from + to x on open */
body.apex-page .apex-faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--ai-font-body);
  font-size: 22px;
  font-weight: 300;
  color: var(--ai-gold-deep);
  line-height: 1;
  transition: transform 200ms var(--ai-ease-out);
  display: inline-block;
  width: 22px;
  text-align: center;
}

body.apex-page .apex-faq details[open] > summary::after {
  content: "+";
  transform: rotate(45deg);
}

body.apex-page .apex-faq summary:hover {
  color: var(--ai-gold-deep);
}

/* Answer prose */
body.apex-page .apex-faq__body {
  padding: 0 0 var(--ai-space-5);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ai-text-muted);
  max-width: 66ch;
}

body.apex-page .apex-faq__body p {
  margin: 0 0 var(--ai-space-3);
}

body.apex-page .apex-faq__body p:last-child {
  margin-bottom: 0;
}

@media (min-width: 720px) {
  body.apex-page .apex-faq summary { font-size: 21px; }
  body.apex-page .apex-faq__body { font-size: 18px; }
}

/* Open animation: answer slides in gently */
@media (prefers-reduced-motion: no-preference) {
  body.apex-page .apex-faq details[open] > .apex-faq__body {
    animation: apex-faq-open 250ms var(--ai-ease-out) both;
  }
}

@keyframes apex-faq-open {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect prefers-reduced-motion: disable chevron rotation + slide-in */
@media (prefers-reduced-motion: reduce) {
  body.apex-page .apex-faq summary::after {
    transition: none;
  }
  body.apex-page .apex-faq details[open] > .apex-faq__body {
    animation: none;
  }
}


/* =========================================================================
   45. EDITORIAL BYLINE (.apex-byline)
   Fix #5: article-style meta row that appears directly under the page hero
   h1. Muted, small type with a gold dot separator. Makes guide pages read
   like real editorial content. All pages share this via the template.
   ========================================================================= */

body.apex-page .apex-byline {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--ai-space-2);
  /* Sits inside the hero band, close under the sub text */
  margin-top: var(--ai-space-3);
  font-size: 12px;
  font-family: var(--ai-font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-text-soft);
}

/* Byline icon: small SVG before each byline segment, vertically centered */
body.apex-page .apex-byline__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--ai-gold-deep);
  vertical-align: middle;
  margin-right: 3px;
  opacity: 0.85;
}

body.apex-page .apex-byline__item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Gold dot separator between byline segments */
body.apex-page .apex-byline__sep {
  color: var(--ai-gold-deep);
  font-size: 10px;
}

body.apex-page .apex-pagehero--navy .apex-byline {
  color: rgba(245, 236, 210, 0.60);
}

body.apex-page .apex-pagehero--navy .apex-byline__sep {
  color: var(--ai-gold);
}


/* =========================================================================
   46. FEATURE GRID (.apex-featuregrid / .apex-featurecard)
   Fix #4: 3-up card grid for breaking categorized content (e.g. "three
   jobs an annuity can do") out of prose paragraphs into scannable visual
   blocks. Each card gets an icon/badge area, title, and short description.
   Stacks on mobile, 3-column on desktop.
   ========================================================================= */

/* Feature grid: always stacks vertically as full-width bars.
   Each card is a horizontal bar: gold number badge on the left,
   title + body text to the right, full container width. */
body.apex-page .apex-featuregrid {
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-4);
  margin: var(--ai-space-6) 0;
}

body.apex-page .apex-featurecard {
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-lg);
  padding: var(--ai-space-5) var(--ai-space-6);
  /* Horizontal bar: badge on left, content on right */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--ai-space-5);
  box-shadow: var(--ai-shadow-sm);
  transition: box-shadow 180ms var(--ai-ease-out);
}

body.apex-page .apex-featurecard:hover {
  box-shadow: var(--ai-shadow-md);
}

/* Gold number badge: fixed size, left-anchored.
   flex centering is already set; line-height:1 prevents the display font's
   built-in ascender/descender from nudging the number off-center. */
body.apex-page .apex-featurecard__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: var(--ai-gold-soft);
  color: var(--ai-gold-deep);
  font-family: var(--ai-font-body); /* Inter numerals center cleanly in the flex circle (display-font digits sat low) */
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* Content column: title + body stacked */
body.apex-page .apex-featurecard__content {
  display: flex;
  flex-direction: column;
  gap: var(--ai-space-2);
  flex: 1;
}

body.apex-page .apex-featurecard__title {
  font-family: var(--ai-font-display);
  font-size: 21px;
  font-weight: 600;
  color: var(--ai-navy);
  line-height: 1.2;
  margin: 0;
}

body.apex-page .apex-featurecard__body {
  font-size: 16px;
  color: var(--ai-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Reduced-motion: no hover lift since we removed translateY */
@media (prefers-reduced-motion: reduce) {
  body.apex-page .apex-featurecard { transition: none; }
}


/* =========================================================================
   47. PULL-QUOTE (.apex-pullquote)
   Fix #4 continued: mid-page callout for rhythm and visual break. Large
   display-font quote with a gold left-border accent and oversized gold
   opening-quote mark. Use sparingly (once per page maximum).
   ========================================================================= */

body.apex-page .apex-pullquote {
  position: relative;
  margin: var(--ai-space-7) 0;
  padding: var(--ai-space-5) var(--ai-space-6) var(--ai-space-5) var(--ai-space-8);
  border-left: 3px solid var(--ai-gold);
  background: var(--ai-cream-deep);
  border-radius: 0 var(--ai-radius-md) var(--ai-radius-md) 0;
}

/* Oversized gold opening-quote mark */
body.apex-page .apex-pullquote::before {
  content: "\201C";
  position: absolute;
  top: var(--ai-space-3);
  left: var(--ai-space-3);
  font-family: var(--ai-font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--ai-gold);
  opacity: 0.60;
}

body.apex-page .apex-pullquote p {
  font-family: var(--ai-font-display);
  font-size: 20px;
  line-height: 1.45;
  color: var(--ai-navy);
  margin: 0;
  font-style: italic;
}

@media (min-width: 720px) {
  body.apex-page .apex-pullquote p { font-size: 22px; }
}


/* =========================================================================
   47b. SEGMENTATION VARIETY PALETTE
   Variety pass: a set of distinct in-article visual blocks so guide pages
   stop defaulting to the same vertical number-card grid in the same slot.
   Each guide page picks ONE of these as its signature block, in a varied
   position. All share the brand tokens (cream/navy/gold, same radii/shadows).
   Components: .apex-iconrow / .apex-compare / .apex-statstrip /
   .apex-checklist / .apex-figslot.
   ========================================================================= */

/* --- ICON ROW: stacked rows, gold-soft icon disc + heading + body.
   Like the feature grid but icon-led (not number-led) and lighter weight. --- */
body.apex-page .apex-iconrow { display: flex; flex-direction: column; gap: var(--ai-space-4); margin: var(--ai-space-6) 0; }
body.apex-page .apex-iconrow__item { display: flex; flex-direction: row; align-items: flex-start; gap: var(--ai-space-5); padding: var(--ai-space-4) var(--ai-space-5); border-radius: var(--ai-radius-lg); border: 1px solid var(--ai-border-soft); background: var(--ai-cream); transition: border-color 160ms var(--ai-ease-out), background 160ms var(--ai-ease-out); }
body.apex-page .apex-iconrow__item:hover { border-color: var(--ai-gold); background: var(--ai-paper); }
body.apex-page .apex-iconrow__ico { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: var(--ai-gold-soft); color: var(--ai-gold-deep); flex-shrink: 0; }
body.apex-page .apex-iconrow__ico svg { width: 24px; height: 24px; }
body.apex-page .apex-iconrow__content { display: flex; flex-direction: column; gap: var(--ai-space-1); flex: 1; }
body.apex-page .apex-iconrow__title { font-family: var(--ai-font-display); font-size: 20px; font-weight: 600; color: var(--ai-navy); line-height: 1.2; margin: 0; }
body.apex-page .apex-iconrow__body { font-size: 16px; color: var(--ai-text-muted); line-height: 1.65; margin: 0; }

/* --- COMPARE: two side-by-side panels (A vs B). Compact and top-aligned so
   the cards hug their content (short scannable bullets, NOT paragraphs) and
   never stretch into tall skinny pillars in the 720px article column.
   One panel may carry the --pref modifier for a soft gold highlight.
   Stacks full-width on mobile. --- */
body.apex-page .apex-compare { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-3); margin: var(--ai-space-6) 0; align-items: start; }
@media (min-width: 680px) { body.apex-page .apex-compare { grid-template-columns: 1fr 1fr; } }
body.apex-page .apex-compare__col { background: var(--ai-paper); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); padding: var(--ai-space-4) var(--ai-space-5); box-shadow: var(--ai-shadow-sm); }
body.apex-page .apex-compare__col--pref { border: 2px solid var(--ai-gold); background: #fffdf6; box-shadow: var(--ai-shadow-gold); }
body.apex-page .apex-compare__tag { font-family: var(--ai-font-display); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ai-gold-deep); margin: 0 0 2px; }
body.apex-page .apex-compare__h { font-family: var(--ai-font-display); font-size: 19px; font-weight: 600; color: var(--ai-navy); line-height: 1.2; margin: 0 0 var(--ai-space-3); }
body.apex-page .apex-compare__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
body.apex-page .apex-compare__list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--ai-text-muted); line-height: 1.45; }
body.apex-page .apex-compare__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--ai-gold); }

/* --- STAT STRIP: horizontal strip of big illustrative-figure callouts.
   Display-font big number + small caption. 2-up mobile, up to 4-up desktop. --- */
body.apex-page .apex-statstrip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ai-space-3); margin: var(--ai-space-6) 0; }
@media (min-width: 760px) { body.apex-page .apex-statstrip { grid-template-columns: repeat(var(--cols, 3), 1fr); } }
body.apex-page .apex-statstrip__cell { background: var(--ai-cream-deep); border: 1px solid var(--ai-border-soft); border-radius: var(--ai-radius-lg); padding: var(--ai-space-5) var(--ai-space-4); text-align: center; }
body.apex-page .apex-statstrip__big { font-family: var(--ai-font-display); font-size: 40px; font-weight: 700; line-height: 1; color: var(--ai-gold-deep); margin: 0 0 var(--ai-space-2); }
body.apex-page .apex-statstrip__lab { font-size: 14px; color: var(--ai-text-muted); line-height: 1.45; margin: 0; }
body.apex-page .apex-statstrip__note { grid-column: 1 / -1; font-size: 13px; color: var(--ai-text-soft); text-align: center; margin: var(--ai-space-1) 0 0; font-style: italic; }

/* --- CHECKLIST: two-column "good fit / not a fit" qualifying signals.
   Gold check on the fit side, muted dash on the not-fit side. --- */
body.apex-page .apex-checklist { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-3); margin: var(--ai-space-6) 0; align-items: start; }
@media (min-width: 680px) { body.apex-page .apex-checklist { grid-template-columns: 1fr 1fr; } }
body.apex-page .apex-checklist__col { border-radius: var(--ai-radius-lg); padding: var(--ai-space-4) var(--ai-space-5); border: 1px solid var(--ai-border-soft); }
body.apex-page .apex-checklist__col--yes { background: var(--ai-cream); }
body.apex-page .apex-checklist__col--no { background: var(--ai-paper); }
body.apex-page .apex-checklist__h { font-family: var(--ai-font-display); font-size: 18px; font-weight: 600; color: var(--ai-navy); margin: 0 0 var(--ai-space-3); }
body.apex-page .apex-checklist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
body.apex-page .apex-checklist li { position: relative; padding-left: 22px; font-size: 14px; color: var(--ai-text-muted); line-height: 1.45; }
body.apex-page .apex-checklist__col--yes li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--ai-gold-deep); }
body.apex-page .apex-checklist__col--no li::before { content: "\2013"; position: absolute; left: 2px; top: 0; font-weight: 700; color: var(--ai-text-soft); }

/* --- FIG SLOT: captioned infographic frame. Holds a Gemini infographic
   (Task E). Until the image ships it shows a soft dashed placeholder so the
   layout reserves its space. Add the .is-ready class once an <img> is in. --- */
body.apex-page .apex-figslot { margin: var(--ai-space-7) 0; }
body.apex-page .apex-figslot__frame { border-radius: var(--ai-radius-lg); overflow: hidden; border: 1px solid var(--ai-border-soft); background: var(--ai-cream-deep); }
body.apex-page .apex-figslot__frame img { display: block; width: 100%; height: auto; }
body.apex-page .apex-figslot:not(.is-ready) .apex-figslot__frame { border-style: dashed; border-color: var(--ai-gold); min-height: 160px; display: flex; align-items: center; justify-content: center; }
body.apex-page .apex-figslot:not(.is-ready) .apex-figslot__frame::after { content: "Infographic"; font-family: var(--ai-font-display); font-size: 15px; color: var(--ai-text-soft); letter-spacing: 0.04em; }
body.apex-page .apex-figslot:not(.is-ready) img { display: none; }
body.apex-page .apex-figslot__cap { font-size: 13px; color: var(--ai-text-soft); text-align: center; margin: var(--ai-space-2) 0 0; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  body.apex-page .apex-iconrow__item { transition: none; }
}


/* =========================================================================
   47c. INCOME ESTIMATOR TOOL (.apex-estimator)
   Self-contained form + illustrative result card for /tools/income-estimator/.
   No PII; pure client-side calculation.
   ========================================================================= */
body.apex-page .apex-estimator { display: grid; grid-template-columns: 1fr; gap: var(--ai-space-5); margin: var(--ai-space-6) 0; align-items: start; }
@media (min-width: 820px) { body.apex-page .apex-estimator { grid-template-columns: 1fr 1fr; } }

body.apex-page .apex-estimator__form { background: var(--ai-paper); border: 1px solid var(--ai-border); border-radius: var(--ai-radius-lg); padding: var(--ai-space-6); box-shadow: var(--ai-shadow-sm); display: flex; flex-direction: column; gap: var(--ai-space-4); }
body.apex-page .apex-estimator__field { display: flex; flex-direction: column; gap: var(--ai-space-2); }
body.apex-page .apex-estimator__field label { font-family: var(--ai-font-display); font-size: 16px; font-weight: 600; color: var(--ai-navy); }
body.apex-page .apex-estimator__field input,
body.apex-page .apex-estimator__field select { font-family: var(--ai-font-body); font-size: 17px; color: var(--ai-text); padding: 12px 14px; border: 1px solid var(--ai-border); border-radius: var(--ai-radius-md); background: var(--ai-cream); transition: border-color 150ms var(--ai-ease-out); }
body.apex-page .apex-estimator__field input:focus,
body.apex-page .apex-estimator__field select:focus { outline: none; border-color: var(--ai-gold); }
body.apex-page .apex-estimator__check { flex-direction: row; align-items: center; gap: var(--ai-space-3); }
body.apex-page .apex-estimator__check input { width: 20px; height: 20px; accent-color: var(--ai-gold-deep); }
body.apex-page .apex-estimator__check label { font-weight: 500; }

body.apex-page .apex-estimator__result { background: var(--ai-cream-deep); border: 2px solid var(--ai-gold); border-radius: var(--ai-radius-lg); padding: var(--ai-space-6); box-shadow: var(--ai-shadow-gold); text-align: center; }
body.apex-page .apex-estimator__result-label { font-family: var(--ai-font-display); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ai-gold-deep); margin: 0 0 var(--ai-space-3); }
body.apex-page .apex-estimator__big { font-family: var(--ai-font-display); font-size: 34px; font-weight: 700; line-height: 1.15; color: var(--ai-navy); margin: 0 0 var(--ai-space-2); }
@media (min-width: 480px) { body.apex-page .apex-estimator__big { font-size: 40px; } }
body.apex-page .apex-estimator__annual { font-size: 16px; color: var(--ai-text-muted); margin: 0 0 var(--ai-space-4); }
body.apex-page .apex-estimator__disc { font-size: 13px; color: var(--ai-text-soft); line-height: 1.55; font-style: italic; margin: 0; border-top: 1px solid var(--ai-border-soft); padding-top: var(--ai-space-4); }
body.apex-page .apex-estimator__hint { color: var(--ai-text-muted); font-style: italic; }


/* =========================================================================
   47d. BLOG INDEX TOOLS (.apex-blogtools): search + category filter pills +
   empty state for /blog/. Card grid reuses .apex-blog / .apex-blog-card.
   ========================================================================= */
body.apex-page .apex-blogtools { display: flex; flex-direction: column; gap: var(--ai-space-4); margin: var(--ai-space-6) 0 var(--ai-space-7); }
body.apex-page .apex-blog-search { position: relative; max-width: 460px; width: 100%; margin: 0 auto; }
body.apex-page .apex-blog-search input { width: 100%; font-family: var(--ai-font-body); font-size: 16px; color: var(--ai-text); padding: 13px 16px 13px 44px; border: 1px solid var(--ai-border); border-radius: 999px; background: var(--ai-paper); transition: border-color 150ms var(--ai-ease-out); }
body.apex-page .apex-blog-search input:focus { outline: none; border-color: var(--ai-gold); }
body.apex-page .apex-blog-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ai-text-soft); pointer-events: none; }
body.apex-page .apex-blog-pills { display: flex; flex-wrap: wrap; gap: var(--ai-space-2); justify-content: center; }
body.apex-page .apex-blog-pill { font-family: var(--ai-font-body); font-size: 14px; font-weight: 500; color: var(--ai-text-muted); background: var(--ai-paper); border: 1px solid var(--ai-border); border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: all 150ms var(--ai-ease-out); }
body.apex-page .apex-blog-pill:hover { border-color: var(--ai-gold); color: var(--ai-navy); }
body.apex-page .apex-blog-pill.is-active { background: var(--ai-gold-soft); border-color: var(--ai-gold); color: var(--ai-gold-deep); font-weight: 600; }
body.apex-page .apex-blog-empty { text-align: center; padding: var(--ai-space-8) var(--ai-space-5); color: var(--ai-text-muted); }
body.apex-page .apex-blog-empty h3 { font-family: var(--ai-font-display); font-size: 22px; color: var(--ai-navy); margin: 0 0 var(--ai-space-2); }
body.apex-page .apex-blog-empty p { font-size: 16px; line-height: 1.6; max-width: 480px; margin: 0 auto; }


/* =========================================================================
   48. VIDEO EMBED SLOT (.apex-video)
   Fix #7: responsive 16:9 container for optional Frank Whitaker / voiceover
   video embeds on guide pages. Place inside the content column anywhere a
   video would add value. Currently used only via comments in the template.
   ========================================================================= */

body.apex-page .apex-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--ai-radius-lg);
  overflow: hidden;
  background: var(--ai-navy);
  box-shadow: var(--ai-shadow-md);
  margin: var(--ai-space-6) 0;
}

body.apex-page .apex-video iframe,
body.apex-page .apex-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* =========================================================================
   49. ARTICLE HEADER: CENTERED EDITORIAL LAYOUT (.apex-article-header)
   RetireWizard-archetype: white background, centered H1, pills row,
   educator-reviewed badge, icon byline. Replaces .apex-pagehero on
   guide/article pages that opt in.
   ========================================================================= */

body.apex-page .apex-article-header {
  background: var(--ai-paper);
  /* Symmetric: space under the byline matches the space above the pill */
  padding: var(--ai-space-5);
  text-align: center;
  border-bottom: 1px solid var(--ai-border-soft);
}

body.apex-page .apex-article-header__inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Category pill row above the H1 (badge removed; pill only) */
body.apex-page .apex-article-header__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ai-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ai-space-4);
}

/* Reusable category pill */
body.apex-page .apex-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  /* Default: gold tint (Annuities 101) */
  background: rgba(201, 169, 97, 0.14);
  color: var(--ai-gold-deep);
  border: 1px solid rgba(201, 169, 97, 0.30);
}

/* Colored dot inside a pill */
body.apex-page .apex-pill__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

/* Category color variants.
   All variants use the same gold treatment as the base .apex-pill so every
   pill renders identically regardless of which modifier class is present.
   Only the text inside the pill changes. */
body.apex-page .apex-pill--annuities-101,
body.apex-page .apex-pill--annuity-types,
body.apex-page .apex-pill--annuity-income,
body.apex-page .apex-pill--retirement-planning,
body.apex-page .apex-pill--working-with-advisors {
  background: rgba(201, 169, 97, 0.14);
  color: var(--ai-gold-deep);
  border-color: rgba(201, 169, 97, 0.30);
}

/* Educator-reviewed badge */
body.apex-page .apex-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  background: rgba(21, 128, 61, 0.09);
  color: #166534;
  border: 1px solid rgba(21, 128, 61, 0.22);
}

/* SVG check icon inside badge */
body.apex-page .apex-badge__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
}

/* Centered H1 */
body.apex-page .apex-article-header h1 {
  font-family: var(--ai-font-display);
  font-size: 42px;
  line-height: 1.1;
  color: var(--ai-navy);
  margin: 0 0 var(--ai-space-4);
}

@media (min-width: 720px) {
  body.apex-page .apex-article-header h1 { font-size: 46px; }
}

/* Centered subhead */
body.apex-page .apex-article-header__sub {
  font-size: 20px;
  color: var(--ai-text-muted);
  max-width: 680px;
  margin: 0 auto var(--ai-space-4);
  line-height: 1.6;
}

@media (min-width: 720px) {
  body.apex-page .apex-article-header__sub { font-size: 20px; }
}

/* Byline override for centered article header: larger, centered */
body.apex-page .apex-article-header .apex-byline {
  justify-content: center;
  font-size: 15px;
  margin-top: 0;
  letter-spacing: 0.04em;
  text-transform: none;
}

body.apex-page .apex-article-header .apex-byline__icon {
  width: 15px;
  height: 15px;
}


/* =========================================================================
   50. TWO-COLUMN ARTICLE LAYOUT (.apex-article-body)
   Left: main prose column (max ~720px). Right: sticky TOC sidebar (~280px).
   Centered max-width container. Collapses to single column on mobile.
   ========================================================================= */

body.apex-page .apex-article-body {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--ai-space-5);
  display: grid;
  grid-template-columns: minmax(0, 720px) 280px;
  gap: var(--ai-space-8);
  align-items: start;
}

/* Narrow two-column at 960px breakpoint */
@media (max-width: 960px) {
  body.apex-page .apex-article-body {
    grid-template-columns: 1fr;
  }
}

/* Main content column */
body.apex-page .apex-article-main {
  min-width: 0;
  /* White article background for all sections inside */
  background: var(--ai-paper);
}

/* Article sections inside the two-column layout drop the section padding
   and use the body wrapper for horizontal rhythm instead.
   Vertical padding is tight (16px each) so adjacent sections produce ~32px
   total inter-section gap -- RetireWizard-like editorial rhythm. The h2
   top-margin inside .apex-prose is also reduced so headings don't add a
   second large gap on top of the section padding. */
body.apex-page .apex-article-main .apex-section {
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--ai-space-4);    /* 16px -- tight top cap */
  padding-bottom: var(--ai-space-4); /* 16px -- tight bottom cap; adjacent sections sum to ~32px */
}

body.apex-page .apex-article-main .apex-section__inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Override alt background for sections inside the article column so the
   page stays white. Cream-deep is reserved for the key-takeaways box only. */
body.apex-page .apex-article-main .apex-section--alt {
  background: var(--ai-paper);
}

/* Inside the article column, reduce h2 top-margin so the heading does not
   add a second large gap on top of the section's own top padding.
   The section provides 16px padding; the h2 adds another 24px = 40px total
   from section-start to heading baseline, which is clean without being tight. */
body.apex-page .apex-article-main .apex-prose h2 {
  margin-top: var(--ai-space-5); /* 24px (was 48px globally) */
}

/* Featuregrid inside article column: reduce bottom margin so the gap after
   the 1/2/3 cards and the next section heading stays consistent. */
body.apex-page .apex-article-main .apex-featuregrid {
  margin-bottom: var(--ai-space-4); /* 16px (was 32px via --ai-space-6) */
}

/* FAQ section inside article column: no extra top gap needed since the
   section padding already provides breathing room. */
body.apex-page .apex-article-main .apex-faq {
  margin-top: 0;
}

/* Related topics and CTA band stay full-width (outside .apex-article-body) */


/* =========================================================================
   51. STICKY TOC SIDEBAR (.apex-toc)
   "IN THIS ARTICLE" jump-link list. Sticky on desktop, collapses to a
   <details> block on mobile.
   ========================================================================= */

body.apex-page .apex-toc {
  position: sticky;
  /* Clear the fixed header (~68px) with comfortable breathing room on scroll */
  top: 96px;
  /* Push the TOC panel down to align its top with the Key Takeaways box.
     The first .apex-section inside .apex-article-main has top padding of
     var(--ai-space-4) = 16px. This margin-top provides comfortable visual
     alignment without overshooting. */
  margin-top: var(--ai-space-4);
  align-self: start;
  background: var(--ai-paper);
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md);
  padding: var(--ai-space-4) var(--ai-space-5);
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-shadow: var(--ai-shadow-sm);
}

/* Hide TOC entirely on mobile; JS may also render a <details> variant */
@media (max-width: 960px) {
  body.apex-page .apex-toc {
    display: none;
  }
}

/* "IN THIS ARTICLE" label */
body.apex-page .apex-toc__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-gold-deep);
  margin: 0 0 var(--ai-space-3);
  display: block;
}

/* Jump-link list */
body.apex-page .apex-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.apex-page .apex-toc__list li {
  margin: 0;
}

body.apex-page .apex-toc__list a {
  display: block;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ai-text-muted);
  text-decoration: none;
  padding: 5px var(--ai-space-3);
  border-radius: var(--ai-radius-sm);
  border-left: 2px solid transparent;
  transition: color 140ms var(--ai-ease-out),
              border-color 140ms var(--ai-ease-out),
              background 140ms var(--ai-ease-out);
}

body.apex-page .apex-toc__list a:hover,
body.apex-page .apex-toc__list a.is-active {
  color: var(--ai-navy);
  border-left-color: var(--ai-gold);
  background: rgba(201, 169, 97, 0.08);
}

/* Mobile collapsed TOC (details/summary pattern, shown only on small screens) */
body.apex-page .apex-toc-mobile {
  display: none;
  margin: var(--ai-space-5) 0 0;
  border: 1px solid var(--ai-border-soft);
  border-radius: var(--ai-radius-md);
  overflow: hidden;
}

@media (max-width: 960px) {
  body.apex-page .apex-toc-mobile {
    display: block;
  }
}

body.apex-page .apex-toc-mobile > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ai-space-3) var(--ai-space-4);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai-gold-deep);
  background: var(--ai-paper);
  list-style: none;
  user-select: none;
}

body.apex-page .apex-toc-mobile > summary::-webkit-details-marker { display: none; }

body.apex-page .apex-toc-mobile > summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 300;
  color: var(--ai-gold-deep);
  transition: transform 200ms var(--ai-ease-out);
  display: inline-block;
}

body.apex-page .apex-toc-mobile[open] > summary::after {
  transform: rotate(45deg);
}

body.apex-page .apex-toc-mobile .apex-toc__list {
  padding: var(--ai-space-2) var(--ai-space-4) var(--ai-space-3);
}

body.apex-page .apex-toc-mobile .apex-toc__list a {
  padding: 6px var(--ai-space-3);
}


/* =========================================================================
   52. ARTICLE PAGE BACKGROUND OVERRIDE
   Guide/article pages using the new two-column layout have a white body.
   The class .apex-page--article on <body> activates this.
   ========================================================================= */

body.apex-page.apex-page--article {
  background: var(--ai-paper);
}

/* Key-takeaways box gets the cream-deep tint when on white background */
body.apex-page.apex-page--article .apex-takeaways {
  background: var(--ai-cream-deep);
  border-left-color: var(--ai-gold);
}

/* Restore cream-deep alt for the key-takeaways box even on white pages */
body.apex-page.apex-page--article .apex-section--alt .apex-takeaways {
  background: var(--ai-cream-deep);
}