@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* --- FORCE brand color variables (prevent GHL theme from redefining) --- */
html, body, html body, html * {
  --teal: #00A49D !important;
  --teal-dark: #007F79 !important;
  --teal-light: #E5F6F5 !important;
  --navy: #2A2F4C !important;
  --navy-deep: #1A1E33 !important;
  --navy-light: #3D4368 !important;
  --paper: #FBFAF6 !important;
  --cream: #F7F4EE !important;
  --ink: #15182A !important;
  --muted: #6B6F7E !important;
  --line: #E2DED4 !important;
}



/* === GHL OVERRIDES START === */
/* Higher-specificity rules with !important to beat GHL's theme + ensure contrast.
   Light backgrounds use navy text. Dark backgrounds use paper-white text. */

/* --- Base typography --- */
html body { background: #FBFAF6 !important; color: #15182A !important; }
html body, html body p, html body li, html body span, html body div, html body a {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  font-family: "League Spartan", "Inter", sans-serif !important;
}

/* Headings: navy by default (light bg) */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 { color: #2A2F4C !important; }

/* ============================================================
   DARK SECTIONS — force ALL text to paper, override every nested element
   ============================================================ */

/* Every text element inside dark-bg sections gets paper color */
html body .btn-secondary,
html body .btn-secondary *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="tag"]):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.stat-num):not(.stat-num *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-hero-stat-num):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-post-issue-badge):not(.fn-post-issue-badge *):not(.fn-feature-issue-badge):not(.fn-feature-issue-badge *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong),
html body .cta-band,
html body .cta-band *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .stats,
html body .stats *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .stats-strip,
html body .stats-strip *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .experts,
html body .experts *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .expert,
html body .expert *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .flexsuite-hero,
html body .flexsuite-hero *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fsc-hero,
html body .fsc-hero *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .footer,
html body .footer *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .podcast-hero,
html body .podcast-hero *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fn-hero,
html body .fn-hero *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fn-post-hero,
html body .fn-post-hero *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fn-feature-card,
html body .fn-feature-card *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fn-pullquote,
html body .fn-pullquote *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fn-post-cta,
html body .fn-post-cta *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .fn-dispatch,
html body .fn-dispatch *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .lead-magnet,
html body .lead-magnet *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .flexsuite-teaser,
html body .flexsuite-teaser *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .suite-hero,
html body .suite-hero *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .hero-img-front,
html body .hero-img-front *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .tier-hex,
html body .tier-hex *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .members-tab,
html body .members-tab *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.script-pre):not(input):not(input *):not([class*="badge"]):not([class*="badge"] *):not([class*="pill"]):not([class*="num"]):not([class*="num"] *):not(.ebook-mock):not(.ebook-mock *):not(.suite-mock-tile):not(.suite-mock-tile *):not(.suite-teaser-icon):not(.suite-teaser-icon *):not(.expert-photo):not(.expert-photo *):not(.expert-day):not(.expert-tag):not(.fsc-date):not(.fn-feature-cta):not(.fn-feature-cta *):not(.fn-dispatch-btn):not(.fn-dispatch-btn *):not(.fn-dispatch-issue-tag):not(.fn-dispatch-issue-tag *):not(.fsc-tagline strong):not(.tier-hex-num):not(.tier-hex-num *),
html body .plan.featured,
html body .plan.featured *:not(.btn-primary):not(.btn-primary *):not(em):not(.eyebrow):not(.plan-name):not(.plan-tag):not(.plan-tag *) {
  color: #FBFAF6 !important;
}

/* --- Section backgrounds enforced --- */
html body .cta-band { background: #2A2F4C !important; }
html body .stats { background: #2A2F4C !important; }
html body .stats-strip { background: #2A2F4C !important; }
html body .experts { background: #2A2F4C !important; }
html body .expert { background: #2A2F4C !important; }
html body .flexsuite-hero { background: #1A1E33 !important; }
html body .fsc-hero { background: #1A1E33 !important; }
html body .footer { background: #1A1E33 !important; }
html body .podcast-hero { background: #2A2F4C !important; }
html body .fn-hero { background: #2A2F4C !important; }
html body .fn-post-hero { background: #2A2F4C !important; }
html body .fn-feature-card { background: #2A2F4C !important; }
html body .fn-pullquote { background: #2A2F4C !important; }
html body .fn-post-cta { background: #1A1E33 !important; }
html body .fn-dispatch { background: #1A1E33 !important; }
html body .plan.featured { background: #2A2F4C !important; }

/* --- Preferred vendor card: teal accents forced to brand hex --- */
html body .plan-tag {
  background: #00A49D !important;
  color: #2A2F4C !important;
  border-color: #00A49D !important;
}
html body .plan-name,
html body .plan.featured .plan-name {
  color: #00A49D !important;
}
html body .plan.featured {
  border-color: #2A2F4C !important;
}
html body .plan.featured .plan-title,
html body .plan.featured .plan-price {
  color: #FBFAF6 !important;
}

/* --- Authority "grow-card" teal variant forced to brand hex --- */
html body .grow-card.teal {
  background: #00A49D !important;
  border-color: #007F79 !important;
  color: #FBFAF6 !important;
}
html body .grow-card.teal h3,
html body .grow-card.teal p,
html body .grow-card.teal .grow-tag,
html body .grow-card.teal * {
  color: #FBFAF6 !important;
}
html body .grow-card {
  background: #1A1E33 !important;
  color: #FBFAF6 !important;
}
html body .grow-card h3,
html body .grow-card p,
html body .grow-card .grow-tag {
  color: #FBFAF6 !important;
}

/* --- All standalone teal utility elements: explicit hex --- */
html body em { color: #00A49D !important; }
html body .eyebrow { color: #007F79 !important; }
html body .lead-magnet { background: #1A1E33 !important; }
html body .flexsuite-teaser { background: #1A1E33 !important; }
html body .suite-hero { background: #1A1E33 !important; }
html body .hero-img-front { background: #2A2F4C !important; }
html body .tier-hex { background: #1A1E33 !important; }
html body .members-tab { background: #2A2F4C !important; }


/* --- Dark section backgrounds enforced --- */
html body .btn-secondary { background: #2A2F4C !important; }
html body .hero-visual { background: #2A2F4C !important; }
html body .plan { background: #2A2F4C !important; }

/* Subtle text variants inside dark sections (slightly transparent for visual hierarchy) */
html body .footer a,
html body .footer p,
html body .footer li,
html body .footer-bottom,
html body .footer-bottom *,
html body .stats p,
html body .stats .stat-label,
html body .stats .stat-context,
html body .experts p,
html body .experts .expert-bio,
html body .experts .expert-role,
html body .expert-role,
html body .expert-bio {
  color: rgba(251, 250, 246, 0.75) !important;
}

/* Section backgrounds enforced */

/* ============================================================
   ACCENT COLORS — eyebrows, italic em, brand-accent numbers
   ============================================================ */

/* Italic em accents — teal everywhere */
html body em,
html body h1 em, html body h2 em, html body h3 em {
  color: #00A49D !important;
  font-style: italic;
  font-weight: 400;
}

/* Eyebrows */
html body .eyebrow {
  font-family: "Montserrat", "Inter", sans-serif !important;
  color: #007F79 !important;
}
html body .cta-band .eyebrow,
html body .stats .eyebrow,
html body .stats-strip .eyebrow,
html body .experts .eyebrow,
html body .expert .eyebrow,
html body .flexsuite-hero .eyebrow,
html body .fsc-hero .eyebrow,
html body .footer .eyebrow,
html body .podcast-hero .eyebrow,
html body .fn-hero .eyebrow,
html body .fn-post-hero .eyebrow,
html body .fn-feature-card .eyebrow,
html body .fn-post-cta .eyebrow,
html body .fn-dispatch .eyebrow,
html body .fn-dispatch-content .eyebrow,
html body .lead-magnet .eyebrow,
html body .flexsuite-teaser .eyebrow,
html body .suite-hero .eyebrow {
  color: #00A49D !important;
}

/* Numbers / stat accents — teal on all backgrounds */
html body .pillar-num,
html body .step-num,
html body .stat-num,
html body .number-display,
html body .benefit-strip-num,
html body .stat-num.is-teal { color: #00A49D !important; }

/* Tags / role pills on dark cards */
html body .expert-tag, html body .expert-day { color: #00A49D !important; }

/* Script-pre */
html body .script-pre {
  font-family: "Montserrat", "Inter", sans-serif !important;
}
html body .script-pre { color: #007F79 !important; }
html body .cta-band .script-pre,
html body .stats .script-pre,
html body .experts .script-pre,
html body .flexsuite-hero .script-pre,
html body .fsc-hero .script-pre,
html body .footer .script-pre,
html body .podcast-hero .script-pre { color: #00A49D !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
html body .btn-primary {
  background: #00A49D !important;
  color: #FBFAF6 !important;
  border: 1px solid #00A49D !important;
}
html body .btn-primary:hover { background: #007F79 !important; border-color: #007F79 !important; color: #FBFAF6 !important; }
html body .btn-secondary {
  color: #2A2F4C !important;
  border: 1px solid #2A2F4C !important;
  background: transparent !important;
}
html body .btn-secondary:hover { background: #2A2F4C !important; color: #FBFAF6 !important; }

/* Secondary buttons on dark sections — paper outline */
html body .cta-band .btn-secondary,
html body .stats .btn-secondary,
html body .flexsuite-hero .btn-secondary,
html body .fsc-hero .btn-secondary,
html body .experts .btn-secondary,
html body .footer .btn-secondary,
html body .podcast-hero .btn-secondary {
  color: #FBFAF6 !important;
  border-color: rgba(251, 250, 246, 0.4) !important;
}
html body .cta-band .btn-secondary:hover,
html body .stats .btn-secondary:hover,
html body .flexsuite-hero .btn-secondary:hover,
html body .fsc-hero .btn-secondary:hover,
html body .experts .btn-secondary:hover,
html body .footer .btn-secondary:hover,
html body .podcast-hero .btn-secondary:hover {
  background: #FBFAF6 !important;
  color: #2A2F4C !important;
}

/* ============================================================
   LINKS
   ============================================================ */
html body a { color: inherit; }
html body a.product-link, html body a.pillar-link { color: #007F79 !important; }
html body .footer a { color: #FBFAF6 !important; }
html body .footer a:hover { color: #00A49D !important; }
html body .footer h5 { color: #FBFAF6 !important; }

/* Hero light section background */
html body .hero { background: #F7F4EE !important; }

/* === GHL OVERRIDES END === */


/* =========================================
   FLEX SPACE NETWORK — DESIGN SYSTEM
   Aesthetic: Editorial Industrial
   Palette: Teal + Navy (from logo)
   ========================================= */

:root {
  /* Brand */
  --teal: #00A49D;
  --teal-dark: #007F79;
  --teal-light: #E5F6F5;
  --navy: #2A2F4C;
  --navy-deep: #1A1E33;
  --navy-light: #3D4368;

  /* Neutrals */
  --cream: #F7F4EE;
  --cream-warm: #F4F1EC;
  --paper: #FBFAF6;
  --ink: #15182A;
  --muted: #6B6F7E;
  --line: #E2DED4;

  /* Semantic */
  --bg: var(--paper);
  --text: var(--ink);
  --accent: var(--teal);

  /* Typography */
  --font-display: "League Spartan", "Inter", -apple-system, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Montserrat", "Inter", sans-serif;
  --font-script: "Montserrat", "Inter", sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3.25rem;
  --s-9: 4rem;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;

  --container: 1280px;
  --container-narrow: 960px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal); }

/* ===== Typography ===== */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--teal);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.875rem); }
h4 { font-size: 1.25rem; line-height: 1.3; font-weight: 600; }

h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 700;
  color: var(--teal);
}

/* Subtitle accent — Montserrat italic, used between eyebrow and headline */
.script-pre {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--teal);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  margin-bottom: 4px;
  display: block;
  letter-spacing: -0.01em;
}
.script-accent {
  font-family: var(--font-script);
  color: var(--teal);
  font-weight: 400;
  font-size: 1.25em;
  letter-spacing: 0;
  font-style: normal;
  line-height: 0.9;
}

p { color: var(--muted); }
p.lead { font-size: 1.25rem; line-height: 1.55; color: var(--navy-light); }

/* ===== Layout ===== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
section { padding: var(--s-9) 0; }
@media (max-width: 768px) { section { padding: var(--s-7) 0; } }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  font-family: var(--font-body);
}
.btn-primary {
  background: var(--navy);
  color: var(--paper);
}
.btn-primary:hover {
  background: var(--teal);
  color: var(--navy);
  transform: translateY(-1px);
}
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-secondary:hover {
  background: var(--navy);
  color: var(--paper);
}
.btn-light {
  background: var(--paper);
  color: var(--navy);
}
.btn-light:hover {
  background: var(--teal);
}
.btn .arrow {
  transition: transform .25s ease;
}
.btn:hover .arrow { transform: translateX(4px); }

/* ===== NAVIGATION ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 246, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--navy);
  text-transform: uppercase;
  flex-shrink: 0;
}
.nav-logo svg { width: 36px; height: 36px; }
.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.nav-logo-img.small {
  height: 36px;
}
/* When nav-logo wraps just an image, hide any text spans */
.nav-logo.image-only span { display: none; }
.nav-links {
  display: flex;
  gap: var(--s-5);
  list-style: none;
  font-size: 15px;
  font-weight: 500;
}
.nav-links a { color: var(--navy); }
.nav-links a:hover { color: var(--teal); }
.nav-links a.active { color: var(--teal); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-login {
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
@media (max-width: 900px) {
  .nav-links { display: none; }
}

/* ===== HERO ===== */
.hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-8);
  overflow: hidden;
  background: var(--paper);
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 75%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--s-7);
  align-items: center;
}
.hero-eyebrow {
  margin-bottom: var(--s-4);
}
.hero h1 {
  margin-bottom: var(--s-4);
}
.hero-sub {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--navy-light);
  margin-bottom: var(--s-5);
  max-width: 540px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: var(--s-5); }
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  max-width: 540px;
}
.hero-trust-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--navy);
  font-variation-settings: "opsz" 144;
  line-height: 1;
}
.hero-trust-num em {
  color: var(--teal);
  font-style: normal;
  font-size: 1.5rem;
  vertical-align: top;
}
.hero-trust-label { font-size: 13px; color: var(--muted); line-height: 1.4; }
.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}
.hero-visual.hex-shape {
  border-radius: 0;
  aspect-ratio: 1;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background: var(--navy);
  overflow: visible; /* allow badge to float outside */
}
.hero-visual.hex-shape > img,
.hero-visual.hex-shape::after {
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}
.hero-visual.hex-shape::after {
  background: linear-gradient(180deg, transparent 60%, rgba(42,47,76,0.35) 100%);
}
.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.95);
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(42,47,76,0.4) 100%);
}
.hero-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(251, 250, 246, 0.95);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
/* Floating variant — sits outside the hex, navy for contrast against any photo */
.hero-visual.hex-shape .hero-badge {
  position: absolute;
  bottom: 8%;
  left: -4%;
  right: auto;
  background: var(--navy);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.4);
  max-width: 260px;
  padding: 18px 22px;
  color: var(--paper);
}
.hero-visual.hex-shape .hero-badge .hero-badge-text {
  color: var(--paper);
}
.hero-visual.hex-shape .hero-badge .hero-badge-text strong {
  color: var(--paper);
}
.hero-visual.hex-shape .hero-badge .hero-badge-icon {
  background: var(--teal);
}
.hero-badge-icon {
  width: 44px; height: 44px;
  background: var(--teal);
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-badge-icon svg { width: 22px; height: 22px; color: white; }
.hero-badge-text {
  font-size: 13px;
  line-height: 1.35;
  color: var(--navy);
}
.hero-badge-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { aspect-ratio: 4/3; max-width: 100%; }
}

/* ===== STATS BAR ===== */
.stats {
  background: var(--navy);
  color: var(--paper);
  padding: var(--s-7) 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}
.stat {
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: var(--s-4);
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: 500;
  line-height: 1;
  color: var(--teal);
  font-variation-settings: "opsz" 144;
  margin-bottom: 8px;
}
.stat-label {
  font-size: 14px;
  color: #FBFAF6;
  line-height: 1.4;
}
@media (max-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SECTION HEADERS ===== */
.section-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  align-items: end;
}
.section-header.center {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section-header.center .eyebrow { justify-content: center; }
.section-header h2 { margin-top: var(--s-3); }
.section-header p {
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 520px;
}
.section-header.center p { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  .section-header { grid-template-columns: 1fr; }
}

/* ===== PILLARS / SERVICES GRID ===== */
.pillars {
  background: var(--cream);
  position: relative;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 0 var(--line);
}
.pillar {
  padding: var(--s-5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: relative;
  transition: background .3s ease;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.pillar:hover { background: var(--cream); }
.pillar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.pillar-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--teal-light);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
  color: var(--teal-dark);
}
.pillar-icon svg { width: 28px; height: 28px; }
.pillar h3 {
  font-size: 1.5rem;
  margin-bottom: var(--s-3);
}
.pillar p {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: var(--s-4);
  flex: 1;
}
.pillar-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pillar-link:hover { color: var(--teal); }
@media (max-width: 1000px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pillars-grid { grid-template-columns: 1fr; }
}

/* ===== FEATURE SPLIT (Image + Content) ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.split.reverse .split-visual { order: 2; }
.split-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: hidden;
}
.split-visual img {
  width: 100%; height: 100%; object-fit: cover;
}
.split-visual video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
.split-visual-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--paper);
  color: var(--navy);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.split-content h2 { margin-bottom: var(--s-4); }
.split-content > p { margin-bottom: var(--s-5); font-size: 1.05rem; line-height: 1.6; }
.split-features { list-style: none; margin-bottom: var(--s-5); }
.split-features li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  align-items: start;
}
.split-features li:last-child { border-bottom: 1px solid var(--line); }
.split-features-icon {
  width: 40px; height: 40px;
  background: var(--teal-light);
  border: 1px solid rgba(0,164,157,0.15);
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--teal-dark);
  margin-top: 2px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.split-features li:hover .split-features-icon {
  background: var(--teal);
  color: var(--paper);
  transform: rotate(-4deg) scale(1.05);
}
.split-features-icon svg { width: 20px; height: 20px; }
.split-features strong {
  display: block;
  color: var(--navy);
  font-size: 16px;
  margin-bottom: 2px;
}
.split-features span { color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-visual { order: 0; }
}

/* ===== EXPERTS / CONSULTING CARDS ===== */
.experts {
  background: var(--navy);
  color: var(--paper);
}
.experts .eyebrow { color: var(--teal); }
.experts .eyebrow::before { background: var(--teal); }
.experts h2 { color: var(--paper); }
.experts h2 em { color: var(--teal); }
.experts .section-header p { color: #FBFAF6; }
.experts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.expert {
  background: var(--navy-deep);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.expert:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
}
.expert-photo {
  width: 100%;
  aspect-ratio: 5/2;
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-dark) 60%, var(--navy) 100%);
  position: relative;
  overflow: hidden;
}
.expert-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), transparent 55%),
    repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255,255,255,0.04) 30px, rgba(255,255,255,0.04) 32px);
  pointer-events: none;
  z-index: 0;
}
.expert-photo img {
  width: 70%;
  height: 90%;
  margin: 0 auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  position: relative;
  z-index: 1;
}
.expert-day {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--teal);
  color: var(--navy);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 2;
}
.expert-body { padding: var(--s-4); }
.expert-body h4 {
  font-family: var(--font-display);
  color: var(--paper);
  font-weight: 500;
  font-size: 1.4rem;
  margin-bottom: 6px;
}
.expert-role {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: var(--s-3);
}
.expert-desc {
  color: #FBFAF6;
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 900px) { .experts-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .experts-grid { grid-template-columns: 1fr; } }

/* ===== PROCESS / NUMBERED STEPS ===== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.process-step {
  position: relative;
}
.process-num {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 500;
  color: var(--teal);
  line-height: 1;
  margin-bottom: var(--s-3);
  font-variation-settings: "opsz" 144;
}
.process-step h4 {
  font-size: 1.25rem;
  margin-bottom: var(--s-2);
}
.process-step p { font-size: 14.5px; line-height: 1.55; }

/* Arrow between process steps — dashed teal line + arrowhead spanning the gap */
.process-step {
  position: relative;
}
.process-step::after {
  content: "";
  position: absolute;
  top: 32px;
  left: calc(100% + 4px);
  width: 14px;
  height: 2px;
  background-image: linear-gradient(to right, var(--teal) 60%, transparent 60%);
  background-size: 5px 2px;
  background-repeat: repeat-x;
  opacity: 0.55;
  z-index: 1;
  pointer-events: none;
}
.process-step::before {
  content: "";
  position: absolute;
  top: 26px;
  left: calc(100% + 18px);
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 9px solid var(--teal);
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}
.process-step:last-child::after,
.process-step:last-child::before {
  display: none;
}
@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2)::after,
  .process-step:nth-child(2)::before,
  .process-step:nth-child(4)::after,
  .process-step:nth-child(4)::before { display: none; }
}
@media (max-width: 600px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-step::after,
  .process-step::before { display: none; }
}

/* ===== TESTIMONIALS ===== */
.testimonials { background: var(--cream); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.testimonial {
  background: var(--paper);
  padding: var(--s-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.testimonial-stars {
  color: var(--teal);
  font-size: 16px;
  margin-bottom: var(--s-3);
  letter-spacing: 2px;
}
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 400;
  margin-bottom: var(--s-4);
  flex: 1;
  font-variation-settings: "opsz" 14;
}
.testimonial-author {
  display: flex; align-items: center; gap: 12px;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream-warm);
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.testimonial-name { font-weight: 600; color: var(--navy); font-size: 15px; }
.testimonial-role { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ===== PRICING ===== */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  max-width: 980px;
  margin: 0 auto;
}
.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan.featured {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
}
.plan-tag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--teal);
  color: var(--navy);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.plan-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: var(--s-3);
}
.plan.featured .plan-name { color: var(--teal); }
.plan-title {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 500;
  margin-bottom: var(--s-3);
  line-height: 1.15;
  color: var(--navy);
}
.plan.featured .plan-title { color: var(--paper); }
.plan-price {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1;
  margin-bottom: var(--s-2);
  font-variation-settings: "opsz" 144;
}
.plan.featured .plan-price { color: var(--paper); }
.plan-price em {
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 4px;
}
html body .plan-price em { color: var(--muted) !important; }
html body .plan.featured .plan-price em { color: #FBFAF6 !important; }
.plan-price-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: var(--s-5);
}
.plan.featured .plan-price-sub { color: #FBFAF6; }
.plan ul {
  list-style: none;
  margin-bottom: var(--s-5);
  flex: 1;
}
.plan ul li {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 14.5px;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.plan.featured ul li {
  border-bottom-color: #FBFAF6;
  color: #FBFAF6;
}
.plan ul li svg {
  width: 18px; height: 18px;
  color: var(--teal);
  margin-top: 2px;
}
.plan .btn { width: 100%; justify-content: center; }
.plan.featured .btn-primary {
  background: var(--teal);
  color: var(--navy);
}
.plan.featured .btn-primary:hover {
  background: var(--paper);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ===== FAQ ===== */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--navy);
  list-style: none;
  gap: var(--s-3);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-toggle {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .25s ease;
  font-size: 14px;
  color: var(--navy);
}
details[open] .faq-toggle {
  background: var(--teal);
  color: white;
  border-color: var(--teal);
  transform: rotate(45deg);
}
.faq-answer {
  padding-top: var(--s-3);
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
  font-size: 15.5px;
}

/* ===== CTA BAND ===== */
.cta-band {
  background: var(--teal);
  color: var(--navy);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42,47,76,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,47,76,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}
.cta-band-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-6);
  align-items: center;
}
.cta-band h2 { color: var(--navy); }
.cta-band h2 em { color: var(--paper); }
.cta-band p { color: rgba(42,47,76,0.8); margin-top: var(--s-3); font-size: 1.05rem; max-width: 560px; }
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.cta-band .btn-primary { background: var(--navy); color: var(--paper); }
.cta-band .btn-primary:hover { background: var(--paper); color: var(--navy); }
@media (max-width: 800px) {
  .cta-band-inner { grid-template-columns: 1fr; }
  .cta-band-actions { justify-content: flex-start; }
}

/* ===== FOOTER ===== */
.footer {
  background: var(--navy-deep);
  color: #FBFAF6;
  padding: var(--s-7) 0 var(--s-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.footer h5 {
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s-3);
}
.footer ul { list-style: none; }
.footer ul li { padding: 6px 0; }
.footer ul a { font-size: 14.5px; color: #FBFAF6; }
.footer ul a:hover { color: var(--teal); }
.footer-brand p { color: #FBFAF6; font-size: 14px; line-height: 1.55; max-width: 320px; margin-top: var(--s-3); }
.footer-social { display: flex; gap: 10px; margin-top: var(--s-4); }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #FBFAF6;
}
.footer-social a:hover { background: var(--teal); border-color: var(--teal); color: var(--navy); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--s-4);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #FBFAF6;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.footer-bottom a { color: #FBFAF6; }
.footer-bottom-links { display: flex; gap: var(--s-4); }
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ===== PAGE HEADER (sub-pages) ===== */
.page-header {
  background: var(--cream);
  padding: var(--s-7) 0 var(--s-7);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at 80% 50%, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 50%, black 10%, transparent 70%);
}
.page-header-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-4);
}
.page-header .breadcrumb {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.page-header .breadcrumb a { color: var(--navy); }
.page-header h1 {
  max-width: 780px;
  margin-bottom: var(--s-4);
}
.page-header p { font-size: 1.15rem; max-width: 640px; line-height: 1.55; color: var(--navy-light); }

/* ===== ANIMATIONS ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero-sub, .hero-actions, .hero-trust, .hero-visual {
  animation: fadeUp 0.8s ease-out backwards;
}
.hero-eyebrow { animation: fadeUp 0.6s ease-out 0.1s backwards; }
.hero h1 { animation-delay: 0.2s; }
.hero-sub { animation-delay: 0.3s; }
.hero-actions { animation-delay: 0.4s; }
.hero-trust { animation-delay: 0.5s; }
.hero-visual { animation-delay: 0.3s; }

/* Logo SVG */
.logo-mark { display: block; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--navy);
}
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
}

/* ===== CATEGORY GRID (Partners directory) ===== */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.category-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 20px 40px -20px rgba(42,47,76,0.12);
}
.category-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.category-card:hover::before { transform: scaleX(1); }
.category-icon {
  width: 52px; height: 52px;
  background: var(--teal-light);
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--teal-dark);
  margin-bottom: var(--s-4);
}
.category-icon svg { width: 26px; height: 26px; }
.category-card h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.category-card p {
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: var(--s-3);
  flex: 1;
}
.category-count {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  font-weight: 500;
}
@media (max-width: 900px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .category-grid { grid-template-columns: 1fr; } }

/* ===== VENDOR PRICING (3-tier) ===== */
.vendor-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.vendor-pricing .plan {
  padding: var(--s-5);
}
.vendor-pricing .plan-price { font-size: 2.75rem; }
@media (max-width: 1000px) { .vendor-pricing { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

/* ===== TWO-COLUMN COMPARE (Ideal/Not a Fit) ===== */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.fit-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.fit-card.no { background: transparent; border-style: dashed; opacity: 0.85; }
.fit-card h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: var(--s-3);
  font-weight: 500;
}
.fit-card.no h4 { color: var(--muted); }
.fit-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: var(--s-4);
  color: var(--navy);
}
.fit-card.no h3 { color: var(--muted); }
.fit-card ul { list-style: none; }
.fit-card ul li {
  padding: 12px 0;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--navy-light);
}
.fit-card.no ul li { color: var(--muted); }
.fit-card ul li svg { width: 18px; height: 18px; margin-top: 2px; }
.fit-card ul li:last-child { border-bottom: none; }
@media (max-width: 800px) { .fit-grid { grid-template-columns: 1fr; } }

/* ===== 5-STEP PROCESS (Vendors) ===== */
.process-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.process-5 .process-step {
  text-align: center;
  padding: var(--s-4) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.process-5 .process-num {
  font-size: 3rem;
  margin-bottom: var(--s-3);
}
.process-5 .process-step::after { display: none; }
@media (max-width: 1000px) {
  .process-5 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== PODCAST: HOST HERO ===== */
.podcast-hero {
  background: var(--navy);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.podcast-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(0,164,157,0.18), transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(0,164,157,0.10), transparent 45%);
}
.podcast-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.podcast-hero h1 { color: var(--paper); }
.podcast-hero h1 em { color: var(--teal); }
.podcast-hero-sub { color: #FBFAF6; font-size: 1.2rem; line-height: 1.55; margin: var(--s-4) 0 var(--s-5); max-width: 540px; }
.podcast-hero .eyebrow { color: var(--teal); }
.podcast-hero .eyebrow::before { background: var(--teal); }
.podcast-cover {
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy-deep) 100%);
  box-shadow: 0 30px 80px -30px rgba(0,164,157,0.5);
}
.podcast-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.play-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 88px; height: 88px;
  background: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 2;
  cursor: pointer;
  transition: transform .25s ease;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.play-icon:hover { transform: scale(1.08); }
.play-icon svg { width: 32px; height: 32px; color: var(--navy); margin-left: 4px; }
.podcast-platforms {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  transition: all .25s ease;
}
.platform-btn:hover {
  background: var(--teal);
  color: var(--navy);
  border-color: var(--teal);
}
.platform-btn svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .podcast-hero-grid { grid-template-columns: 1fr; } }

/* ===== PODCAST EPISODE LIST ===== */
.episode {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s ease;
}
.episode:hover { background: var(--cream); }
.episode-art {
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--cream-warm);
}
.episode-art img { width: 100%; height: 100%; object-fit: cover; }
.episode-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 6px;
}
.episode h4 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 6px;
  line-height: 1.25;
}
.episode p { font-size: 14.5px; line-height: 1.5; max-width: 600px; }
.episode-play {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--navy);
  cursor: pointer;
  transition: all .25s ease;
  flex-shrink: 0;
}
.episode-play:hover { background: var(--teal); border-color: var(--teal); color: var(--paper); }
.episode-play svg { width: 18px; height: 18px; margin-left: 2px; }
@media (max-width: 800px) {
  .episode { grid-template-columns: 80px 1fr; }
  .episode-play { display: none; }
}

/* ===== MEMBERS / FSN CIRCLE ===== */
.members-hero {
  background: linear-gradient(135deg, var(--cream) 0%, var(--paper) 100%);
  position: relative;
  overflow: hidden;
}
.members-card {
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: 0 30px 80px -40px rgba(42,47,76,0.15);
}
.members-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: var(--s-5);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  background: var(--cream);
}
.members-tab {
  padding: 10px 16px;
  text-align: center;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .25s ease;
  border: none;
  background: transparent;
  font-family: var(--font-body);
}
.members-tab.active {
  background: var(--navy);
  color: var(--paper);
}
.form-field {
  margin-bottom: var(--s-3);
}
.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 6px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.form-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: var(--paper);
  transition: border-color .2s ease;
}
.form-field input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,164,157,0.1);
}
.form-link {
  text-align: right;
  font-size: 13px;
  color: var(--teal);
  margin-bottom: var(--s-4);
  margin-top: -8px;
}
.divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--s-4) 0;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.divider-text::before, .divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.benefit-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  text-align: center;
  margin-top: var(--s-6);
}
.benefit-strip-item {
  padding: var(--s-4);
  background: var(--paper);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.benefit-strip-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--teal);
  margin-bottom: 4px;
  line-height: 1;
}
.benefit-strip-label {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 700px) {
  .benefit-strip { grid-template-columns: 1fr; }
}

/* ===== FLEXSUITE: PRODUCT GRID ===== */
.suite-hero {
  background: var(--navy-deep);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.suite-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 50%, rgba(0,164,157,0.18), transparent 60%);
}
.suite-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.suite-hero h1 { color: var(--paper); }
.suite-hero h1 em { color: var(--teal); }
.suite-hero p { color: #FBFAF6; }
.suite-hero .eyebrow { color: var(--teal); }
.suite-hero .eyebrow::before { background: var(--teal); }
.suite-mock {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(0,164,157,0.1), rgba(42,47,76,0.5));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
  padding: var(--s-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
}
.suite-mock-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.suite-mock-tile-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--paper);
  display: grid; place-items: center;
  padding: 4px;
  flex-shrink: 0;
}
.suite-mock-tile-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }
.suite-mock-tile-icon svg { width: 16px; height: 16px; }
.suite-mock-tile-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--paper);
  font-weight: 500;
}
.suite-mock-tile-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
}
.suite-mock-tile-bar::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--teal);
  width: var(--bar, 60%);
}
@media (max-width: 900px) { .suite-hero-grid { grid-template-columns: 1fr; } }

.suite-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
.product-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  position: relative;
  overflow: hidden;
  transition: all .35s ease;
  display: flex;
  flex-direction: column;
  min-height: 380px;
}
.product-card:hover {
  border-color: var(--teal);
  transform: translateY(-4px);
}
.product-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0,164,157,0.08), transparent 70%);
  border-radius: 50%;
  transform: translate(40%, -40%);
}
.product-status {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--teal-light);
  color: var(--teal-dark);
  font-weight: 500;
}
.product-status.coming { background: var(--cream-warm); color: var(--muted); }
.product-icon {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--teal);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
  position: relative;
}
.product-icon svg { width: 32px; height: 32px; }
.product-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.product-name span { color: var(--teal); }
.product-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.product-card p { font-size: 15px; line-height: 1.55; margin-bottom: var(--s-4); flex: 1; }
.product-features {
  list-style: none;
  margin-bottom: var(--s-4);
}
.product-features li {
  font-size: 14px;
  color: var(--navy-light);
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: center;
}
.product-features li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}
.product-link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-link:hover { color: var(--teal); }
@media (max-width: 800px) { .suite-products { grid-template-columns: 1fr; } }

/* ===== INTEGRATION DIAGRAM (Suite) ===== */
.integration {
  background: var(--cream);
  text-align: center;
}
.integration-visual {
  position: relative;
  max-width: 720px;
  margin: var(--s-6) auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: var(--s-3);
}
.integration-node {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--navy);
  font-weight: 500;
  position: relative;
  z-index: 2;
}
.integration-center {
  background: var(--navy);
  color: var(--paper);
  border-color: var(--navy);
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: none;
  letter-spacing: -0.01em;
  padding: var(--s-5);
}

/* =========================================
   HEXAGON UTILITIES (brand motif from print)
   ========================================= */
.hex {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  overflow: hidden;
  background: var(--navy);
}
.hex img { width: 100%; height: 100%; object-fit: cover; }

/* Stat hexagon — for "601+ / 20+ / $60M+" callouts */
.stat-hex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  text-align: center;
}
.stat-hex-wrap { padding: var(--s-3) 0; }
.stat-hex {
  width: 160px;
  aspect-ratio: 1;
  margin: 0 auto var(--s-3);
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--paper);
  display: grid;
  place-items: center;
  position: relative;
}
.stat-hex-num {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  padding: 0 6px;
}
.stat-hex-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
}
@media (max-width: 700px) {
  .stat-hex-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* Tier hexagon (for tier number badges - small) */
.tier-hex {
  width: 56px;
  aspect-ratio: 1;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.tier-hex.teal { background: var(--teal); color: var(--paper); }
.tier-hex.navy { background: var(--navy); color: var(--paper); }
.tier-hex.muted { background: var(--muted); color: var(--paper); }

/* Floating badge that sits on hex hero photo */
.hex-badge {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  z-index: 3;
}
.hex-badge .pulse-dot {
  width: 10px; height: 10px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.hex-badge .pulse-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--teal);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
  opacity: 0;
}
@keyframes pulse {
  0% { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* 3-step process — matches How to Join in PDF */
.process-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.process-3 .process-step {
  text-align: center;
  padding: var(--s-5) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.process-3 .process-step h4 {
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: var(--s-2);
  color: var(--navy);
  font-size: 1.4rem;
}
.process-3 .process-step p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 800px) {
  .process-3 { grid-template-columns: 1fr; }
}

/* ===== HOW VENDORS GROW (PDF-aligned) ===== */
.grow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.grow-card {
  padding: var(--s-5);
  background: var(--navy-deep);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  color: var(--paper);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grow-card.teal {
  background: var(--teal);
  border-color: var(--teal-dark);
  color: var(--paper);
}
.grow-card.teal h3 { color: var(--paper); }
.grow-icon {
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
}
.grow-card.teal .grow-icon { background: rgba(255,255,255,0.18); }
.grow-icon svg { width: 26px; height: 26px; color: var(--paper); }
.grow-card h3 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: var(--s-2);
}
.grow-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FBFAF6;
  margin-bottom: var(--s-3);
}
.grow-card.teal .grow-tag { color: #FBFAF6; }
.grow-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #FBFAF6;
  max-width: 280px;
}
.grow-card.teal p { color: #FBFAF6; }
@media (max-width: 800px) {
  .grow-grid { grid-template-columns: 1fr; }
}

/* ===== VENDOR EXPECTATIONS ===== */
.expectations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.expectation {
  padding: var(--s-4);
  text-align: center;
}
.expectation-num {
  font-family: var(--font-script);
  font-size: 3rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1;
  margin-bottom: var(--s-3);
}
.expectation h4 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: var(--s-2);
}
.expectation p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 800px) {
  .expectations-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .expectations-grid { grid-template-columns: 1fr; }
}

/* ===== MEMBERSHIP COMPARISON TABLE ===== */
.compare-table-wrap {
  margin-top: var(--s-6);
  background: var(--paper);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 720px;
}
.compare-table th, .compare-table td {
  padding: 18px 20px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  color: var(--navy-light);
  vertical-align: middle;
}
.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}
.compare-table thead th {
  padding: var(--s-4) var(--s-3);
  background: var(--cream-warm);
  border-bottom: 2px solid var(--line);
}
.compare-tier-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.compare-tier-name.featured {
  color: var(--teal);
  position: relative;
}
.compare-tier-name.featured::after {
  content: "MOST POPULAR";
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--teal);
  margin-top: 4px;
  font-weight: 500;
}
.compare-row-label {
  font-weight: 500;
  color: var(--navy);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cream);
  width: 220px;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: rgba(0,164,157,0.03); }
.featured-cell {
  background: rgba(0,164,157,0.04);
  font-weight: 500;
  color: var(--navy);
}

/* ===== EDITORIAL STATS BAR (homepage) ===== */
.editorial-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 960px;
  margin: 0 auto;
}
.ed-stat {
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid var(--line);
}
.ed-stat:last-child { border-right: none; }
.ed-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.ed-stat-num em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}
.ed-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  line-height: 1.4;
}
@media (max-width: 700px) {
  .editorial-stats { grid-template-columns: 1fr; gap: 32px; }
  .ed-stat { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 32px; }
  .ed-stat:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ===================================
   EDUCATION SECTION (homepage)
   =================================== */
.education-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.education-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-5);
  text-align: center;
  transition: all .25s ease;
}
.education-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: 0 20px 50px -25px rgba(0,0,0,0.12);
}
.education-icon {
  width: 56px; height: 56px;
  margin: 0 auto var(--s-3);
  background: var(--teal-light);
  color: var(--teal-dark);
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.education-icon svg { width: 28px; height: 28px; }
.education-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.education-num em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}
.education-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: var(--s-2);
  line-height: 1.2;
}
.education-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 900px) {
  .education-grid { grid-template-columns: 1fr; }
}

/* Resource tag strip */
.resource-strip {
  margin-top: var(--s-6);
  padding: var(--s-5);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.resource-strip-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: var(--s-3);
}
.resource-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.resource-tags span {
  display: inline-flex;
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ===================================
   LEAD MAGNET (eBook download)
   =================================== */
.lead-magnet {
  background: var(--navy-deep);
  color: var(--paper);
  position: relative;
  overflow: hidden;
  padding: var(--s-9) 0;
}
.lead-magnet::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 30%, rgba(0,164,157,0.18), transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(0,164,157,0.08), transparent 45%);
}
.lead-magnet-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.lead-magnet h2 em {
  color: var(--teal);
  font-style: italic;
  font-weight: 400;
}
.lead-magnet-form {
  margin-top: var(--s-5);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 540px;
}
.lead-magnet-form input {
  flex: 1;
  min-width: 240px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--paper);
  transition: all .2s ease;
}
.lead-magnet-form input::placeholder { color: #FBFAF6; }
.lead-magnet-form input:focus {
  outline: none;
  border-color: var(--teal);
  background: rgba(255,255,255,0.1);
}
.lead-magnet-form .btn-primary {
  background: var(--teal);
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}
.lead-magnet-form .btn-primary:hover {
  background: var(--paper);
  transform: translateY(-1px);
}
@media (max-width: 900px) {
  .lead-magnet-grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ===== EBOOK MOCK ===== */
.lead-magnet-visual {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
.ebook-mock {
  position: relative;
  width: 320px;
  aspect-ratio: 3/4.2;
  transform: rotateY(-12deg) rotateX(2deg);
  transform-style: preserve-3d;
  filter: drop-shadow(20px 30px 50px rgba(0,0,0,0.5));
}
.ebook-spine {
  position: absolute;
  left: -12px;
  top: 0;
  width: 14px;
  height: 100%;
  background: linear-gradient(90deg, var(--navy-deep) 0%, var(--teal-dark) 50%, var(--navy-deep) 100%);
  transform: rotateY(-90deg);
  transform-origin: right center;
  border-radius: 1px 0 0 1px;
}
.ebook-cover {
  position: absolute;
  inset: 0;
  background: var(--navy-deep);
  border-radius: 4px 12px 12px 4px;
  color: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* === Photo section (top 55% of cover) ============= */
.ebook-cover-photo {
  position: absolute;
  inset: 0;
  height: 65%;
  overflow: hidden;
  z-index: 0;
}
.ebook-cover-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: grayscale(0.4) contrast(1.05) brightness(0.85);
}
/* Teal duotone overlay on the photo */
.ebook-cover-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,164,157,0.35) 0%,
      rgba(0,164,157,0.15) 40%,
      transparent 60%),
    linear-gradient(180deg,
      transparent 50%,
      rgba(26,30,51,0.85) 85%,
      var(--navy-deep) 100%);
  z-index: 1;
}
/* Subtle noise grain on photo */
.ebook-cover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.3;
  z-index: 2;
  pointer-events: none;
}

/* === Content wrapper (sits above photo, full height) ===== */
.ebook-cover-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
}

/* === Top FSN badge ==================================== */
.ebook-cover-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: rgba(0,164,157,0.95);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.2);
}
.ebook-cover-badge-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--paper);
  border-right: 1px solid rgba(255,255,255,0.3);
  padding-right: 10px;
}
.ebook-cover-badge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--paper);
}

/* === Bottom content stack (title + author at bottom) === */
.ebook-cover-bottom {
  margin-top: auto;
}
.ebook-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  text-transform: uppercase;
  color: var(--paper);
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.ebook-title em {
  font-style: normal;
  color: var(--teal);
}
.ebook-rule {
  width: 60px;
  height: 3px;
  background: var(--teal);
  margin-bottom: 14px;
}
.ebook-sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 400;
  color: #FBFAF6;
  margin-bottom: 16px;
}
.ebook-author-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.ebook-author-line {
  width: 28px;
  height: 1px;
  background: var(--teal);
  flex-shrink: 0;
}
.ebook-author {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--paper);
  line-height: 1.4;
}
.ebook-author span {
  display: block;
  font-weight: 400;
  color: #FBFAF6;
  margin-top: 1px;
}

@media (max-width: 600px) {
  .ebook-mock { width: 240px; transform: rotateY(-8deg); }
  .ebook-title { font-size: 1.85rem; }
  .ebook-cover-content { padding: 18px; }
}

/* ========================================
   FLEXSUITE TEASER (homepage)
   ======================================== */
.flexsuite-teaser {
  background: var(--navy-deep);
  color: var(--paper);
  padding: var(--s-9) 0;
  position: relative;
  overflow: hidden;
}
.flexsuite-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(0,164,157,0.18), transparent 50%),
    radial-gradient(circle at 15% 80%, rgba(0,164,157,0.08), transparent 45%);
  pointer-events: none;
}
.flexsuite-teaser .container { position: relative; }
.flexsuite-teaser .section-header { margin-bottom: var(--s-7); }

.suite-teaser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.suite-teaser-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-4);
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
}
.suite-teaser-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--teal);
  transform: translateY(-3px);
}
.suite-teaser-status {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,164,157,0.15);
  color: var(--teal);
  font-weight: 500;
}
.suite-teaser-status.coming {
  background: rgba(255,255,255,0.06);
  color: #FBFAF6;
}
.suite-teaser-icon {
  width: 96px; height: 96px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--teal);
  display: grid; place-items: center;
  margin-bottom: var(--s-4);
  margin-top: var(--s-3);
}
.suite-teaser-icon svg { width: 24px; height: 24px; }
.suite-teaser-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #FBFAF6;
  margin-bottom: 4px;
}
.suite-teaser-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--paper);
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
  line-height: 1;
}
.suite-teaser-name span {
  color: var(--teal);
  font-weight: 400;
}
.suite-teaser-card p {
  font-size: 14px;
  line-height: 1.55;
  color: #FBFAF6;
  flex: 1;
}
@media (max-width: 1100px) {
  .suite-teaser-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .suite-teaser-grid { grid-template-columns: 1fr; }
}

.suite-teaser-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  flex-wrap: wrap;
}

/* ========================================
   FOUNDER HIGHLIGHTS (about page)
   ======================================== */
.founder-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.founder-highlight-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.founder-highlight-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  line-height: 1.45;
}
@media (max-width: 700px) {
  .founder-highlights { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* Founder ventures bullet list */
.founder-ventures {
  list-style: none;
  margin-top: var(--s-5);
  padding: 0;
}
.founder-ventures li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--navy-light);
}
.founder-ventures li svg {
  width: 18px;
  height: 18px;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 4px;
}
.founder-ventures li strong {
  color: var(--navy);
  font-weight: 600;
}

/* ========================================
   MOMENTUM SECTION (about page)
   ======================================== */
.momentum-section {
  padding: var(--s-7) 0;
  background: var(--paper);
}
.momentum-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 520px;
  display: flex;
}
.momentum-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.momentum-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.55);
}
.momentum-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,30,51,0.92) 0%, rgba(26,30,51,0.85) 50%, rgba(0,127,121,0.4) 100%);
}
.momentum-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  padding: var(--s-7);
  width: 100%;
  align-items: center;
}
.momentum-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.momentum-stat {
  padding: var(--s-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.momentum-stat:last-child { border-bottom: none; }
.momentum-stat-num {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 400;
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 6px;
}
.momentum-stat-num em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}
.momentum-stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 8px;
}
.momentum-stat-detail {
  font-size: 14px;
  line-height: 1.55;
  color: #FBFAF6;
}
@media (max-width: 1000px) {
  .momentum-content { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-5); }
  .momentum-stat-num { font-size: 2.5rem; }
}

/* ========================================
   FSN TEAM (Hamza + Rose)
   ======================================== */
.fsn-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-6);
}
.fsn-team-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .25s ease;
}
.fsn-team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -25px rgba(0,0,0,0.18);
}
.fsn-team-photo {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: var(--cream);
}
.fsn-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.fsn-team-photo.placeholder {
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-dark) 100%);
  display: grid;
  place-items: center;
}
.fsn-team-photo-fallback {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  color: var(--paper);
  letter-spacing: 0.05em;
}
.fsn-team-body {
  padding: var(--s-5);
}
.fsn-team-role {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: var(--s-2);
}
.fsn-team-card h3 {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--navy);
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
}
.fsn-team-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: var(--s-3);
}
.fsn-team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fsn-team-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  background: var(--cream);
  color: var(--navy);
  border-radius: 999px;
  border: 1px solid var(--line);
}
@media (max-width: 800px) {
  .fsn-team-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   ANIMATIONS — subtle, premium, performance-friendly
   ===================================================== */

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Scroll fade-up reveal === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger child reveals */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-stagger.in-view > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.55s; }

/* === Hero hex glow pulse === */
.hero-visual.hex-shape {
  position: relative;
}
.hero-visual.hex-shape::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at center, rgba(0,164,157,0.35) 0%, transparent 65%);
  filter: blur(40px);
  z-index: -1;
  animation: hex-glow-pulse 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hex-glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 0.85; transform: scale(1.05); }
}

/* === Hero image gentle parallax via scroll-driven transform === */
.hero-visual.hex-shape > img {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* === Hero floating badge entry === */
.hero-visual.hex-shape .hero-badge {
  animation: badge-float-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
}
@keyframes badge-float-in {
  0% { opacity: 0; transform: translateX(-20px) translateY(10px); }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}

/* === Hero subtle continuous float on the badge === */
.hero-visual.hex-shape .hero-badge {
  animation: badge-float-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both,
             badge-bob 5s ease-in-out 1.3s infinite;
}
@keyframes badge-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* === Image hover zoom on split visuals === */
.split-visual {
  overflow: hidden;
}
.split-visual img {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.split-visual:hover img {
  transform: scale(1.04);
}

/* Same for FSN team card photos */
.fsn-team-photo {
  overflow: hidden;
}
.fsn-team-photo img {
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fsn-team-card:hover .fsn-team-photo img {
  transform: scale(1.05);
}

/* Hover for expert cards too */
.expert-photo {
  overflow: hidden;
}
.expert-photo img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.expert:hover .expert-photo img {
  transform: scale(1.05);
}

/* === Pillar card subtle lift === */
.pillar {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.4s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -25px rgba(42,47,76,0.15);
}

/* === Process step subtle entrance via reveal-stagger === */

/* === FlexSuite teaser card icon spin on hover === */
.suite-teaser-card .suite-teaser-icon {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.3s ease;
}
.suite-teaser-card:hover .suite-teaser-icon {
  transform: rotate(-8deg) scale(1.1);
  background: rgba(0,164,157,0.25);
}

/* === Marquee for resource tags strip === */
.resource-strip {
  overflow: hidden;
}
.resource-tags {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  animation: tag-marquee 35s linear infinite;
  width: max-content;
}
.resource-tags:hover {
  animation-play-state: paused;
}
.resource-tags span {
  flex-shrink: 0;
  white-space: nowrap;
}
@keyframes tag-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === Trust pulse dot on hero badge — already exists but enhance === */
.hero-badge .pulse-dot,
.hero-badge-icon {
  position: relative;
}

/* === Number count-up styling (set via JS) === */
.count-up {
  display: inline-block;
}

/* === Button hover arrow slide === */
.btn .arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* === Cintarini script-pre subtle hand-drawn fade-in === */
.script-pre {
  position: relative;
}
.reveal.in-view .script-pre,
.in-view .script-pre {
  animation: script-draw-in 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
@keyframes script-draw-in {
  0% { opacity: 0; transform: translateX(-8px) rotate(-2deg); }
  60% { opacity: 1; transform: translateX(0) rotate(1deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* === Lead magnet ebook subtle wobble on hover === */
.ebook-mock {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lead-magnet-visual:hover .ebook-mock {
  transform: rotateY(-6deg) rotateX(2deg) scale(1.03);
}

/* === Stat hex hover glow === */
.stat-hex {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stat-hex-wrap:hover .stat-hex {
  transform: scale(1.06);
}

/* === Editorial stat number stagger === */
.editorial-stats {
  /* Each child uses .reveal-stagger from parent */
}


/* ============================================
   HERO — LAYERED OFFSET CARDS (homepage)
   ============================================ */
.hero-visual.layered {
  position: relative;
  aspect-ratio: 4/4.5;
  min-height: 700px;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  max-width: 620px;
  width: 100%;
  margin-left: auto;
}
.hero-visual.layered::after {
  display: none;
}
.hero-img-back {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  height: 90%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  z-index: 1;
  box-shadow: 0 20px 50px -25px rgba(0,0,0,0.2);
}
.hero-img-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.92);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-img-front {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 75%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  z-index: 2;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,0.35);
}
.hero-img-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hero-img-back:hover img,
.hero-img-front:hover img {
  transform: scale(1.04);
}
.hero-floating-stat {
  position: absolute;
  bottom: 28%;
  right: 6%;
  z-index: 3;
  background: var(--navy);
  color: var(--paper);
  padding: 22px 28px;
  border-radius: 14px;
  box-shadow: 0 24px 50px -15px rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  animation: float-bob 5s ease-in-out 1s infinite;
}
@keyframes float-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.hero-floating-num {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-floating-num em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}
.hero-floating-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #FBFAF6;
  margin-top: 6px;
  font-weight: 500;
}

/* Subtle teal glow behind the layered composition */
.hero-visual.layered::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at center, rgba(0,164,157,0.18) 0%, transparent 60%);
  filter: blur(40px);
  z-index: 0;
  animation: hex-glow-pulse 6s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero-visual.layered {
    aspect-ratio: 4/4.5;
    max-width: 480px;
    margin: 0 auto;
  }
  .hero-floating-stat {
    bottom: 25%;
    right: 4%;
    padding: 14px 18px;
  }
  .hero-floating-num { font-size: 1.75rem; }
}

/* ============================================
   FlexSuite teaser — product logo treatment
   Logos are teal+navy on transparent bg; need a light chip to be visible
   on the dark navy-deep section
   ============================================ */
.suite-teaser-logo {
  background: var(--paper);
  border-radius: 12px;
  padding: 18px 20px;
  margin: var(--s-3) 0 var(--s-3);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 90px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease;
}
.suite-teaser-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  display: block;
}
.suite-teaser-card:hover .suite-teaser-logo {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -12px rgba(0,164,157,0.3);
}

/* ============================================
   FlexSuite product cards — logo treatment
   Replaces the icon + Fraunces name combo with the actual product logo
   ============================================ */
.product-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 80px;
  margin-bottom: var(--s-4);
  margin-top: var(--s-2);
}
.product-logo img {
  max-height: 100%;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* =============================================================
   ADDITIONAL TEXTURE & AMBIENT MOTION
   ============================================================= */

/* === GRAIN OVERLAY for dark sections =====================
   SVG noise filter applied as background-image, zero perf impact */
.experts,
.flexsuite-teaser,
.cta-band,
.lead-magnet,
.momentum-section .momentum-card,
.suite-hero,
section[style*="navy"],
section[style*="navy-deep"] {
  position: relative;
}
.experts::after,
.flexsuite-teaser::after,
.cta-band::after,
.lead-magnet::after,
.momentum-section .momentum-card::after,
.suite-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Make sure all content sits ABOVE the grain overlay */
.experts > .container,
.flexsuite-teaser > .container,
.cta-band > .container,
.lead-magnet > .container,
.momentum-section .momentum-card > .momentum-content,
.suite-hero > .container {
  position: relative;
  z-index: 2;
}

/* === DOTTED GRID for light sections =====================
   Editorial graph-paper feel without being loud */
.about-split,
section#platform,
section#education,
.testimonials,
.faq-section {
  position: relative;
}
.about-split::before,
section#platform::before,
section#education::before,
.testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(42, 47, 76, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}
.about-split > .container,
section#platform > .container,
section#education > .container,
.testimonials > .container {
  position: relative;
  z-index: 1;
}

/* === SECTION CORNER ACCENTS ============================
   Tiny architectural hairline marks at section corners */
.experts > .container::before,
.flexsuite-teaser > .container::before,
.momentum-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border-top: 1px solid var(--teal);
  border-left: 1px solid var(--teal);
  opacity: 0.5;
  pointer-events: none;
}

/* === AMBIENT GLOW DRIFT ==============================
   Slow, almost imperceptible color drift in hero */
.hero::before {
  background:
    radial-gradient(60% 50% at 90% 0%, rgba(0,164,157,0.08) 0%, transparent 50%),
    radial-gradient(40% 40% at 10% 100%, rgba(0,164,157,0.05) 0%, transparent 50%);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  0% { transform: translate(0, 0); opacity: 0.7; }
  100% { transform: translate(20px, -10px); opacity: 1; }
}

/* === ANIMATED SECTION ENTRY for script-pre ============
   The Cintarini accents now arrive with a slight ink-bleed feel */
.script-pre {
  position: relative;
  display: inline-block;
}
.script-pre::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--teal);
  opacity: 0.4;
  transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s;
}
.in-view .script-pre::after,
.reveal.in-view .script-pre::after,
.reveal-stagger.in-view .script-pre::after {
  width: 80%;
}

/* === EYEBROW HOVER EFFECT — adds tactility ============
   The mono labels gain a subtle treatment */
.eyebrow {
  position: relative;
  display: inline-block;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--teal);
  vertical-align: middle;
  margin-right: 10px;
  opacity: 0.6;
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.section-header:hover .eyebrow::before,
.split-content:hover .eyebrow::before,
.split-visual:hover ~ .split-content .eyebrow::before {
  width: 32px;
  opacity: 1;
}
/* Don't apply to nav, footer, or eyebrows that are clearly not headers */
nav .eyebrow::before,
footer .eyebrow::before { display: none; }

/* === EYEBROW + HEADLINE INK FLOW =====================
   Section headlines now have a subtle accent line that draws */
.section-header h2,
.section-header h1 {
  position: relative;
}

/* === CARD SHIMMER on hover — subtle gloss sweep ======
   Pillars + testimonials + experts gain a passing highlight */
.pillar,
.testimonial,
.expert,
.education-card,
.suite-teaser-card {
  position: relative;
  overflow: hidden;
}
.pillar::after,
.testimonial::after,
.expert::after,
.education-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255,255,255,0.06) 45%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.06) 55%,
    transparent 100%);
  transition: left 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}
.pillar:hover::after,
.testimonial:hover::after,
.expert:hover::after,
.education-card:hover::after {
  left: 110%;
}

/* === BUTTON RIPPLE PULSE on primary buttons ==========
   Subtle teal ring pulses out from primary CTA buttons every 4s */
.btn-primary {
  position: relative;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--teal);
  opacity: 0;
  z-index: -1;
  animation: btn-ripple 4s ease-out infinite;
  pointer-events: none;
}
@keyframes btn-ripple {
  0% { transform: scale(1); opacity: 0; }
  20% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 0; }
}
/* Don't ripple on nav/footer buttons */
nav .btn-primary::before,
footer .btn-primary::before { display: none; }

/* === STAT NUMBER GLOW on count-up ====================
   Numbers gain a brief teal glow when they finish counting */
.count-up {
  display: inline-block;
  transition: text-shadow 0.6s ease;
}
.count-up.complete {
  text-shadow: 0 0 24px rgba(0,164,157,0.3);
}

/* === SUBTLE GRADIENT BORDER on featured cards =========
   Pricing-tier and pro-card pop with an animated border */
.tier-card.featured,
.pricing-tier.featured {
  position: relative;
  background-clip: padding-box;
}
.tier-card.featured::before,
.pricing-tier.featured::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 50%, var(--teal) 100%);
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: gradient-shift 6s ease-in-out infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* === HOVER LIFT for ALL clickable elements ============
   Subtle but consistent — buttons, cards, links all get a small lift */
.btn,
.suite-teaser-card,
.pillar,
.education-card,
.testimonial,
.expert,
.tier-card,
.partner-card {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
}

/* === NAV SCROLL EFFECT ================================
   Nav background condenses on scroll for tighter feel */
nav {
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
nav.scrolled {
  background: rgba(251, 250, 246, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px -10px rgba(42,47,76,0.08);
}

/* =============================================================
   PROCESS SECTION — animated upgrade
   ============================================================= */
.process-section {
  position: relative;
  padding: var(--s-8) 0;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
  overflow: hidden;
}
.process-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,164,157,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,164,157,0.05) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
  animation: process-bg-drift 20s ease-in-out infinite alternate;
}
@keyframes process-bg-drift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, -20px); }
}
.process-section > .container {
  position: relative;
  z-index: 1;
}

/* Background icon for each step — large, low-opacity, animates on hover */
.process-step {
  position: relative;
  padding: var(--s-5) var(--s-3);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(0,164,157,0.08);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  z-index: 1;
}
.process-step:hover {
  transform: translateY(-6px);
  background: var(--paper);
  border-color: var(--teal);
  box-shadow: 0 24px 60px -25px rgba(0,164,157,0.25);
}

.process-icon-bg {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 60px;
  height: 60px;
  color: var(--teal);
  opacity: 0.15;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.process-icon-bg svg {
  width: 100%;
  height: 100%;
}
.process-step:hover .process-icon-bg {
  opacity: 0.5;
  transform: scale(1.15) rotate(-6deg);
  color: var(--teal-dark);
}

/* Process number — slide-in animation on reveal */
.process-num {
  position: relative;
  z-index: 1;
  transform: translateY(0);
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.process-grid-animated.in-view .process-step:nth-child(1) .process-num {
  animation: process-num-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s both;
}
.process-grid-animated.in-view .process-step:nth-child(2) .process-num {
  animation: process-num-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s both;
}
.process-grid-animated.in-view .process-step:nth-child(3) .process-num {
  animation: process-num-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.7s both;
}
.process-grid-animated.in-view .process-step:nth-child(4) .process-num {
  animation: process-num-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both;
}
@keyframes process-num-in {
  0% {
    transform: translateY(20px) scale(0.5);
    opacity: 0;
    color: var(--navy);
  }
  60% {
    color: var(--teal);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    color: var(--teal);
  }
}

/* Process step h4 hover effect */
.process-step h4 {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease, transform 0.3s ease;
}
.process-step:hover h4 {
  color: var(--teal-dark);
  transform: translateX(4px);
}
.process-step p {
  position: relative;
  z-index: 1;
}

/* Animated arrow between steps — pulses subtly on continuous loop */
.process-step::after {
  animation: arrow-pulse 3s ease-in-out infinite;
}
.process-step::before {
  animation: arrow-pulse 3s ease-in-out infinite;
}
@keyframes arrow-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}



/* =============================================================
   FLEXSUITE PAGE — DRAMATIC SECTION BACKGROUNDS
   Real color/value alternation instead of subtle texture variations
   ============================================================= */

/* === SECTION 2: Products — CREAM-WARM (light, breaks from dark hero) === */
#products.pillars {
  background: var(--cream-warm);
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay — diagonal blueprint lines */
#products.pillars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,164,157,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,164,157,0.06) 0%, transparent 40%),
    repeating-linear-gradient(
      45deg,
      transparent 0,
      transparent 40px,
      rgba(0,127,121,0.04) 40px,
      rgba(0,127,121,0.04) 41px
    );
  pointer-events: none;
  z-index: 0;
}
#products.pillars > .container {
  position: relative;
  z-index: 1;
}

/* === SECTION 3: Integration — TEAL-TINTED LIGHT === */
.integration {
  background: var(--teal-light) !important;
  position: relative;
  overflow: hidden;
}
.integration::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(0,164,157,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(42,47,76,0.06) 0%, transparent 40%),
    linear-gradient(45deg, transparent 49%, rgba(0,127,121,0.04) 50%, transparent 51%),
    linear-gradient(-45deg, transparent 49%, rgba(0,127,121,0.04) 50%, transparent 51%);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.integration > .container {
  position: relative;
  z-index: 1;
}

/* === SECTION 4: Feature Spotlight — PAPER (clean white) === */
.suite-spotlight {
  background: var(--paper) !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,164,157,0.2);
  border-bottom: 1px solid rgba(0,164,157,0.2);
}
.suite-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at top right, rgba(0,164,157,0.10) 0%, transparent 45%),
    radial-gradient(ellipse at bottom left, rgba(42,47,76,0.06) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.suite-spotlight > .container {
  position: relative;
  z-index: 1;
}
.suite-spotlight::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-top: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
  opacity: 0.4;
  pointer-events: none;
}

/* === SECTION 6: Roadmap — PAPER (clean white) === */
.suite-roadmap {
  background: var(--paper);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0,164,157,0.2);
  border-bottom: 1px solid rgba(0,164,157,0.2);
}
.suite-roadmap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 60px,
      rgba(42,47,76,0.05) 60px,
      rgba(42,47,76,0.05) 61px
    ),
    radial-gradient(circle at 50% 50%, rgba(0,164,157,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.suite-roadmap::after {
  content: "";
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 48px;
  height: 48px;
  border-bottom: 2px solid var(--teal);
  border-left: 2px solid var(--teal);
  opacity: 0.4;
  pointer-events: none;
}
.suite-roadmap > .container {
  position: relative;
  z-index: 1;
}

/* === SECTION 7: FAQ — WARM CREAM with dotted graph paper === */
.suite-faq {
  background: var(--cream) !important;
  position: relative;
  overflow: hidden;
}
.suite-faq::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(42,47,76,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.suite-faq > .container {
  position: relative;
  z-index: 1;
}


/* ===== CTA BAND WORD CYCLE ANIMATION ===== */
/* Three accent words cross-fade in sequence; layout stays stable */
.word-cycle {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  font-style: italic;
  font-weight: 400;
  color: var(--paper);
  height: 1em;
  line-height: 1.05;
}
.word-cycle::before {
  /* Phantom widest word to reserve horizontal space — prevents layout shift */
  content: attr(data-widest);
  visibility: hidden;
  white-space: nowrap;
  display: inline-block;
}
.word-cycle .word-cycle-item {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  animation: word-cycle-fade 9s ease-in-out infinite;
}
.word-cycle .word-cycle-item:nth-child(1) { animation-delay: 0s; }
.word-cycle .word-cycle-item:nth-child(2) { animation-delay: 3s; }
.word-cycle .word-cycle-item:nth-child(3) { animation-delay: 6s; }
@keyframes word-cycle-fade {
  0%   { opacity: 0; transform: translateY(8px); }
  4%   { opacity: 1; transform: translateY(0); }
  29%  { opacity: 1; transform: translateY(0); }
  33%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .word-cycle .word-cycle-item { animation: none; opacity: 0; }
  .word-cycle .word-cycle-item:first-child { opacity: 1; }
}


/* ===== HERO SUITE-MOCK: LOGO-FOCAL TILES ===== */
.suite-mock-tile.logo-focal {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--paper) !important;
  border: 1px solid rgba(0,164,157,0.2);
  border-radius: var(--radius);
  padding: 20px 16px;
  min-height: 130px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.suite-mock-tile.logo-focal:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
}
.suite-mock-tile.logo-focal img.suite-mock-logo {
  width: auto !important;
  height: auto !important;
  max-width: 90% !important;
  max-height: 110px !important;
  object-fit: contain;
  display: block;
}
/* Make sure the parent container has guaranteed height even without aspect-ratio */
.suite-mock {
  min-height: 340px;
}