/*
 * ============================================================
 *  CENTER FOR SCALING — Global Stylesheet
 *  File:    assets/css/styles.css
 *  Version: 1.2  |  July 2026
 *  URL:     centerforscaling.com
 *
 *  This is the ONE global stylesheet for all pages.
 *  No page should contain an embedded <style> block.
 *  All component classes live here, organized by section.
 *
 *  Table of Contents:
 *   1.  Reset & Base
 *   2.  Design Tokens
 *   3.  Typography
 *   4.  Layout
 *   5.  Buttons
 *   6.  Cards
 *   7.  Multi-Brand Topbar
 *   8.  Navigation
 *   9.  Hero — Editorial Split (homepage)
 *  10.  Hero — Standard (inner pages)
 *  11.  Breadcrumb
 *  12.  AEO Answer Section
 *  13.  Pain Section
 *  14.  How It Works
 *  15.  Next Level Bridge
 *  16.  Testimonials
 *  17.  FAQ Accordion
 *  18.  Lead Capture / Forms
 *  19.  Scroll Animation
 *  20.  Footer
 *  21.  Page: About
 *  22.  Page: Next Level
 *  23.  Page: Scaling Assessment
 *  24.  Page: Start Here
 * ============================================================
 */


/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scrollbar-gutter: stable both-edges; overflow-y: scroll; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  line-height: 1.75;
  color: #3D3D3D;
  background: #F2EBE0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — v1.2 PALETTE
═══════════════════════════════════════════════════════ */
:root {
  /* v1.1 greens */
  --midnight:       #0D2B22;
  --ink:            #15452F;
  --forest:         #2A6B5A;
  --forest-mid:     #4D9280;
  --sage:           #D8EDE6;
  --sage-border:    #B5D5CA;

  /* Accent */
  --sienna:         #B8622E;
  --sienna-hover:   #8A4420;
  --sienna-50:      #FAF0E8;
  --sienna-100:     #F2D0BA;

  /* Neutrals */
  --parchment:      #F2EBE0;
  --white:          #FFFFFF;
  --charcoal:       #3D3D3D;
  --stone:          #8A8A8A;
  --border:         #D5C8B8;

  /* Type */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-body:      'DM Sans', system-ui, sans-serif;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;

  /* Layout */
  --max-w:    1280px;
  --prose-w:  680px;

  /* Extended palette — referenced in dark sections */
  --dark-text:       var(--sage-border);   /* muted teal on Midnight */
  --dark-text-mid:   var(--sage);          /* slightly brighter teal on dark */
  --dark-accent:     var(--sienna-hover);  /* deep sienna for error / warning text */
  --muted-line:      var(--stone);         /* struck-through stack comparison */

  /* Mono font for labels */
  --font-mono: 'DM Mono', 'Courier New', monospace;
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════ */
h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--midnight);
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--midnight);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--forest);
}
p { max-width: var(--prose-w); }
a { color: var(--forest); }

.lead {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--charcoal);
}
.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-mid);
  margin-bottom: 0.75rem;
}
.eyebrow-sienna { color: var(--sienna); }

/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1024px) { .container { padding: 0 40px; } }
@media (max-width: 640px) { .container { padding: 0 20px; } }

section { padding: 96px 0; }

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
  transition: background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out;
}
.btn-primary {
  background: var(--sienna);
  color: var(--white);
  padding: 14px 28px;
}
.btn-primary:hover { background: var(--sienna-hover); color: var(--white); }

.btn-secondary {
  background: transparent;
  color: var(--forest);
  padding: 13px 28px;
  border: 1.5px solid var(--forest);
}
.btn-secondary:hover { border-color: var(--midnight); color: var(--midnight); }

.btn-ghost {
  background: transparent;
  color: var(--sage);
  padding: 13px 28px;
  border: 1.5px solid rgba(216,237,230,0.4);
}
.btn-ghost:hover { border-color: var(--sage); color: var(--white); }

.btn-group { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ═══════════════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════════════ */
.card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 28px;
  transition: border-color 200ms ease-in-out;
}
.card:hover { border-color: var(--sage-border); }

/* ═══════════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════════ */
.nav {
  position: relative;
  z-index: 100;
  background: rgba(242,235,224,0.95);
  border-bottom: 0.5px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1024px) { .nav-inner { padding: 0 40px; } }
@media (max-width: 640px) { .nav-inner { padding: 0 20px; } }

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 52px;       /* Increased from 36px — rectangle logo is 3:1 so this = ~156px wide */
  width: auto;
  display: block;
}
@media (max-width: 860px) { .nav-logo-img { height: 44px; } }
@media (max-width: 640px) { .nav-logo-img { height: 38px; } }

.footer-logo {
  display: block;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer-logo-img-h {
  height: 48px;       /* Increased from 32px — more prominent in footer */
  width: auto;
  display: block;
  opacity: 0.92;      /* Slightly more opaque than before */
  transition: opacity 180ms;
}
.footer-logo-img-h:hover { opacity: 1; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
/* Each link gets a full padded hit area (not just its text glyphs) so every
   word — including descenders like the "g" in "Blog" — sits inside a
   uniform, comfortably-sized clickable/hoverable box. Links are block-level
   within their <li> rather than bare inline text. */
.nav-links li { display: flex; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  line-height: 1.2;
  transition: color 180ms, background-color 180ms;
}
.nav-links a:hover { color: var(--forest); background: rgba(45,90,61,0.06); }
.nav-cta-wrap { display: flex; align-items: center; gap: 10px; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--charcoal); border-radius: 2px; transition: all 200ms;
}
@media (max-width: 860px) {
  .nav-links, .nav-cta-wrap { display: none; }
  .nav-hamburger { display: flex; }
}

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 76px; left: 0; right: 0;
  background: rgba(242,235,224,0.98);
  backdrop-filter: blur(10px);
  padding: 24px 20px 32px;
  gap: 4px;
  border-bottom: 0.5px solid var(--border);
  z-index: 99;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 0.5px solid var(--border);
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer .drawer-cta { margin-top: 16px; text-align: center; }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero {
  background: var(--parchment);
  padding: 104px 0 96px;
  position: relative;
  overflow: hidden;
}
/* Subtle texture line at very top */
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sienna);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 40px; }
}
@media (max-width: 640px) { .hero-grid { padding: 0 20px; } }

.hero h1 { margin-bottom: 8px; }
.hero-sub {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 600;
  color: var(--sienna);
  margin-bottom: 24px;
  font-style: italic;
}

/* AEO executive answer block */
.hero-answer {
  background: var(--white);
  border-radius: var(--r-md);
  border-left: 3px solid var(--sienna);
  padding: 18px 22px;
  margin-bottom: 36px;
  max-width: var(--prose-w);
}
.hero-answer p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: none;
}
.hero-answer strong { color: var(--midnight); font-weight: 600; }

/* Dark hero modifier — reuses the same Midnight dark-green background as
   .relationship-section, .intro, .lead-section, etc. elsewhere on the site.
   Used on the blog hero so it reads as a clear, separate section instead of
   blending into .blog-listing-section (both were Parchment before this). */
.hero.hero-dark { background: var(--midnight); }
.hero.hero-dark h1 { color: var(--sage); }
.hero.hero-dark .hero-answer {
  background: rgba(216,237,230,0.08);
  border-left-color: var(--sienna);
}
.hero.hero-dark .hero-answer p { color: var(--dark-text); }
.hero.hero-dark .hero-answer strong { color: var(--white); }

/* Blog hero only: the uploaded desk photo, tinted into the brand's dark
   green rather than shown at full color (its blues/oranges would otherwise
   clash with the palette). Opaque over the text column on the left, fading
   out toward the right so the photo — and the pie charts, laptop, glasses
   it holds — reads through clearly with no text sitting on top of it. A
   soft forest-mid glow adds a little warmth/depth rather than flat black. */
.hero.blog-hero-photo {
  background:
    linear-gradient(100deg,
      rgba(13,43,34,0.97) 0%,
      rgba(13,43,34,0.93) 30%,
      rgba(13,43,34,0.74) 55%,
      rgba(13,43,34,0.46) 78%,
      rgba(13,43,34,0.24) 100%),
    radial-gradient(circle at 88% 15%, rgba(77,146,128,0.30) 0%, transparent 48%),
    url('../img/coaches-desk-charts-laptop.webp') right center / cover no-repeat;
}

/* Hero CTA row (next-level.html) — stretch to match the width of the
   hero-answer box and text above, instead of a content-hugging cluster
   sitting off to one side. */
.hero-cta-row { width: 100%; }
.hero-cta-row .btn { flex: 1; text-align: center; min-width: 0; white-space: normal; }
@media (max-width: 480px) {
  .hero-cta-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════
   AEO ANSWER SECTION
═══════════════════════════════════════════════════════ */
.answer-section {
  background: var(--white);
  padding: 80px 0;
}
.answer-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .answer-grid { grid-template-columns: 1fr; gap: 40px; } }

.answer-intro-logo { margin-top: 28px; padding-top: 24px; border-top: 0.5px solid var(--border); }
.answer-intro-logo img { height: 40px; width: auto; display: block; }

.answer-intro h2 { margin-bottom: 16px; }
.answer-intro .lead { color: var(--charcoal); max-width: none; }

.answer-stack { display: flex; flex-direction: column; gap: 14px; }
.answer-card {
  background: var(--parchment);
  border-radius: var(--r-md);
  padding: 22px 26px;
  border-left: 3px solid var(--forest);
}
.answer-card h3 { margin-bottom: 8px; font-size: 0.98rem; color: var(--midnight); font-weight: 600; }
.answer-card p { font-size: 0.93rem; line-height: 1.7; max-width: none; color: var(--charcoal); }

/* ═══════════════════════════════════════════════════════
   PAIN SECTION (dark)
═══════════════════════════════════════════════════════ */
.pain-section {
  background: var(--midnight);
  padding: 96px 0;
}
.pain-section .eyebrow { color: #8FD4C4; letter-spacing: 0.14em; }
.pain-section h2 { color: #FFFFFF; margin-bottom: 16px; max-width: 580px; }
.pain-intro {
  color: var(--dark-text);
  font-size: 1.02rem;
  margin-bottom: 56px;
  max-width: 500px;
}
.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .pain-grid { grid-template-columns: 1fr; } }

.pain-card {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md);
  padding: 26px;
  transition: background 200ms ease-in-out, border-color 200ms ease-in-out;
}
.pain-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(216,237,230,0.2);
}
.pain-icon {
  width: 40px; height: 40px;
  background: var(--sienna);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.pain-card h3 { color: var(--white); margin-bottom: 8px; font-size: 0.98rem; }
.pain-card p { color: #D4EAE4; font-size: 0.88rem; line-height: 1.65; max-width: none; }

/* ═══════════════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════════════ */
.how-section { background: var(--parchment); }
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; gap: 48px; } }

.how-steps { display: flex; flex-direction: column; }
.how-step {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 0.5px solid var(--border);
}
.how-step:last-child { border-bottom: none; }
.step-num {
  width: 34px; height: 34px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--midnight);
  flex-shrink: 0;
  margin-top: 2px;
}
.how-step-body h3 { margin-bottom: 6px; font-size: 1rem; }
.how-step-body p { font-size: 0.9rem; line-height: 1.7; max-width: none; }

.how-visual {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px;
  position: sticky;
  top: 88px;
}
.how-visual-title {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 20px;
}
.path-options { display: flex; flex-direction: column; gap: 10px; }
.path-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--parchment);
  border-radius: var(--r-sm);
  border: 0.5px solid var(--border);
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.path-option:hover, .path-option.active {
  background: var(--sage);
  border-color: var(--forest);
}
.path-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.path-label { font-size: 0.87rem; font-weight: 600; color: var(--midnight); }
.path-desc { font-size: 0.77rem; color: var(--stone); margin-top: 2px; line-height: 1.4; }
.how-cta-strip {
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--sage);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.how-cta-strip p {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--midnight);
  max-width: none;
}

/* ═══════════════════════════════════════════════════════
   NEXT LEVEL BRIDGE
═══════════════════════════════════════════════════════ */
.nl-section { background: var(--white); }
.nl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) { .nl-grid { grid-template-columns: 1fr; gap: 48px; } }

.nl-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sienna);
  background: var(--sienna-50);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.nl-section h2 { margin-bottom: 18px; }
.nl-section .lead { margin-bottom: 26px; }

.feature-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.feature-item { display: flex; gap: 11px; align-items: flex-start; }
.feature-check {
  width: 19px; height: 19px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 3px;
}
.feature-check svg { width: 9px; height: 9px; }
.feature-item p { font-size: 0.9rem; line-height: 1.6; color: var(--charcoal); max-width: none; }
.feature-item strong { color: var(--midnight); font-weight: 600; }

.nl-visual {
  background: var(--parchment);
  border-radius: var(--r-lg);
  padding: 28px;
}
.nl-visual-lbl {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 18px;
}
.stack-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.stack-col-head {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--border);
}
.stack-item {
  font-size: 0.77rem;
  color: var(--stone);
  padding: 5px 0;
  border-bottom: 0.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}
.stack-item:last-child { border-bottom: none; }
.stack-item.out { text-decoration: line-through; color: var(--muted-line); }
.stack-item.in  { color: var(--forest); font-weight: 500; }
.nl-price {
  background: var(--midnight);
  border-radius: var(--r-sm);
  padding: 14px 18px;
}
.nl-price p { font-size: 0.83rem; color: var(--dark-text); max-width: none; line-height: 1.6; }
.nl-price strong { color: var(--white); }

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
.testimonial-section {
  background:
    linear-gradient(180deg,
      rgba(242,235,224,0.97) 0%,
      rgba(242,235,224,0.87) 14%,
      rgba(242,235,224,0.7) 38%,
      rgba(242,235,224,0.76) 74%,
      rgba(242,235,224,0.93) 100%),
    url('../img/therapist-working-on-practice-technology-office.webp') center 20% / cover no-repeat;
  padding: 80px 0;
}
.testimonial-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1024px) { .testimonial-inner { padding: 0 40px; } }
@media (max-width: 640px) { .testimonial-inner { padding: 0 20px; } }

.divider-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}
.divider-line { flex: 1; height: 0.5px; background: var(--sage-border); }
.divider-text {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest);
  white-space: nowrap;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 680px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* Contrast fix — intro text sits directly on the background photo (outside
   the white testimonial cards), so it needs stronger color + a light glow
   to stay legible regardless of what part of the photo is behind it. */
.testimonial-section .divider-line { background: rgba(13,43,34,0.5); }
.testimonial-section .divider-text {
  color: var(--midnight);
  font-weight: 700;
  text-shadow: 0 1px 14px rgba(242,235,224,0.98), 0 1px 3px rgba(242,235,224,0.98);
}
.testimonial-section .testimonial-intro h2 {
  text-shadow: 0 2px 20px rgba(242,235,224,0.96), 0 1px 3px rgba(242,235,224,0.96);
}
.testimonial-section .testimonial-intro p {
  color: var(--charcoal);
  font-size: 0.95rem;
  font-weight: 600;
  text-shadow: 0 1px 14px rgba(242,235,224,0.98), 0 1px 3px rgba(242,235,224,0.98);
}

.testimonial-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-left: 3px solid var(--sienna);
  border-radius: var(--r-md);
  padding: 26px;
  transition: border-color 200ms;
}
.testimonial-card blockquote {
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--charcoal);
  margin-bottom: 14px;
  max-width: none;
}
.testimonial-credit { font-size: 0.78rem; color: #5C5C5C; font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════════ */
.faq-section { background: var(--white); }

/* ═══════════════════════════════════════════════════════
   LEGAL PAGES (terms.html, privacy.html) — simple, single-
   column content pages. Not part of the main marketing flow,
   so deliberately plainer than .hero: a light header band,
   then prose. Typography mirrors the blog's .post-body rules
   but kept as its own class since these pages sit outside
   blog-src/ and shouldn't be coupled to blog-specific CSS.
   ═══════════════════════════════════════════════════════ */
.legal-hero { background: var(--parchment); padding: 64px 0 44px; border-bottom: 0.5px solid var(--border); }
.legal-hero-inner { max-width: var(--prose-w); margin: 0 auto; padding: 0 24px; }
.legal-hero h1 { margin: 10px 0 8px; }
.legal-hero-meta { font-size: 0.85rem; color: var(--stone); }

.legal-page-section { background: var(--white); }
.legal-article { max-width: var(--prose-w); margin: 0 auto; padding: 56px 24px 96px; }
.legal-body { font-size: 1.02rem; line-height: 1.8; color: var(--charcoal); }
.legal-body h2 { font-family: var(--font-display); font-size: 1.35rem; color: var(--midnight); margin: 40px 0 14px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.02rem; color: var(--forest); margin: 24px 0 10px; }
.legal-body p { margin-bottom: 18px; max-width: none; }
.legal-body ul, .legal-body ol { margin: 0 0 18px 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body strong { color: var(--midnight); font-weight: 600; }
.legal-body a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--sage-border); text-underline-offset: 3px; }
.legal-body a:hover { color: var(--sienna); }
.faq-wrap { max-width: 860px; }
.faq-section h2 { margin-bottom: 8px; }
.faq-lead { font-size: 0.97rem; color: var(--stone); margin-bottom: 44px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 0.5px solid var(--border); }

.faq-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  text-align: left;
}
.faq-q {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--midnight);
  line-height: 1.4;
}
.faq-icon {
  width: 24px; height: 24px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 300;
  color: var(--forest);
  transition: background 200ms, transform 200ms;
  line-height: 1;
}
.faq-item.open .faq-icon {
  background: var(--forest);
  color: var(--white);
  transform: rotate(45deg);
}
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease-out; }
.faq-item.open .faq-answer { max-height: 320px; }
.faq-answer-inner {
  padding-bottom: 20px;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--charcoal);
  max-width: var(--prose-w);
}

/* ═══════════════════════════════════════════════════════
   LEAD CAPTURE
═══════════════════════════════════════════════════════ */
.lead-section { background: var(--midnight); padding: 96px 0; position: relative; overflow: hidden; }
.lead-section-watermark {
  position: absolute;
  right: -40px;
  bottom: -50px;
  width: 460px;
  max-width: 55vw;
  opacity: 0.1;
  transform: rotate(-3deg);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.lead-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1024px) { .lead-grid { padding: 0 40px; } }
@media (max-width: 900px) { .lead-grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 640px) { .lead-grid { padding: 0 20px; } }

.lead-copy h2 { color: #FFFFFF; margin-bottom: 14px; }
.lead-copy > p { color: #D4EAE4; font-size: 1rem; line-height: 1.75; max-width: none; }
.lead-paths { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; }
.lead-path { display: flex; align-items: center; gap: 11px; font-size: 0.88rem; color: #E2EFEB; }
.lead-path a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(226,239,235,0.3);
  transition: color 180ms, border-color 180ms;
}
.lead-path a:hover { color: var(--sage); border-color: var(--sienna); }
.lead-path-icon {
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.lead-photo {
  position: relative;
  margin-top: 32px;
  border-radius: var(--r-lg);
  overflow: visible;
}
.lead-photo-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  object-fit: cover;
}
.lead-photo-badge {
  position: absolute;
  bottom: -16px;
  left: 20px;
  width: 56px;
  height: 56px;
  background: var(--sienna);
  border: 3px solid var(--midnight);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}
.lead-photo-badge svg { width: 26px; height: 26px; }
.lead-photo-caption {
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--dark-text-mid);
  padding-left: 20px;
}

.lead-form {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 34px;
}
.form-tabs {
  display: flex;
  background: var(--parchment);
  border-radius: var(--r-sm);
  padding: 4px;
  gap: 2px;
  margin-bottom: 22px;
}
.form-tab {
  flex: 1;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  border: none;
  background: none;
  color: var(--stone);
  border-radius: 6px;
  cursor: pointer;
  transition: background 180ms, color 180ms;
  text-align: center;
}
.form-tab.active { background: var(--white); color: var(--midnight); font-weight: 600; }
.form-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--midnight); margin-bottom: 4px; }
.form-sub { font-size: 0.85rem; color: var(--stone); margin-bottom: 22px; max-width: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.form-group label { font-size: 0.78rem; font-weight: 500; color: var(--charcoal); }
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  background: var(--parchment);
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  padding: 11px 13px;
  outline: none;
  transition: border-color 200ms, background 200ms;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--forest); background: var(--white); }
.form-submit { width: 100%; padding: 15px; font-size: 0.98rem; }
.form-note { font-size: 0.73rem; color: var(--stone); text-align: center; margin-top: 10px; max-width: none; }
.form-success {
  display: none;
  padding: 16px;
  background: var(--sage);
  border-radius: var(--r-sm);
  border-left: 3px solid var(--forest);
  font-size: 0.9rem;
  color: var(--midnight);
  font-weight: 500;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer { background: #0F3324; padding: 64px 0 36px; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand-desc { font-size: 0.87rem; color: #B8D4CB; line-height: 1.7; max-width: 280px; margin-top: 14px; }

/* Address block, left column of footer, below the brand description */
.footer-address { font-size: 0.87rem; color: #B8D4CB; line-height: 1.7; max-width: 280px; margin-top: 18px; font-style: normal; }
.footer-address a { color: #B8D4CB; text-decoration: underline; text-decoration-color: rgba(184,212,203,0.4); text-underline-offset: 3px; }
.footer-address a:hover { color: var(--white); }
.footer-col h4 { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8FD4C4; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul a { font-size: 0.86rem; color: #C5DDD7; text-decoration: none; transition: color 180ms; }
.footer-col ul a:hover { color: var(--white); }
.footer-bottom {
  padding-top: 28px;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-bottom p { font-size: 0.78rem; color: #8FAF9F; max-width: none; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { font-size: 0.78rem; color: #8FAF9F; text-decoration: none; transition: color 180ms; }
.footer-legal a:hover { color: var(--dark-text); }

/* ═══════════════════════════════════════════════════════
   HUBSPOT FORM OVERRIDES — matches CFS brand styling
   Targets the rendered HubSpot form fields and submit btn
═══════════════════════════════════════════════════════ */
#hs-form-container .hs-form fieldset { max-width: none !important; }
#hs-form-container .hs-form .hs-field-desc { font-size: 0.75rem; color: var(--stone); margin-bottom: 4px; }
#hs-form-container .hs-form .hs-form-field { margin-bottom: 14px; }
#hs-form-container .hs-form label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--charcoal);
  display: block;
  margin-bottom: 5px;
}
#hs-form-container .hs-form input[type="text"],
#hs-form-container .hs-form input[type="email"],
#hs-form-container .hs-form input[type="tel"],
#hs-form-container .hs-form select,
#hs-form-container .hs-form textarea {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--charcoal) !important;
  background: var(--parchment) !important;
  border: 0.5px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 11px 13px !important;
  width: 100% !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 200ms, background 200ms;
  -webkit-appearance: none;
}
#hs-form-container .hs-form input:focus,
#hs-form-container .hs-form select:focus,
#hs-form-container .hs-form textarea:focus {
  border-color: var(--forest) !important;
  background: var(--white) !important;
}
#hs-form-container .hs-form .hs-error-msgs {
  list-style: none;
  margin-top: 4px;
}
#hs-form-container .hs-form .hs-error-msgs label {
  font-size: 0.75rem;
  color: var(--sienna);
  font-weight: 500;
}
#hs-form-container .hs-form .hs-button,
#hs-form-container .hs-form input[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  background: var(--sienna) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 15px 28px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 200ms ease-out !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 4px;
}
#hs-form-container .hs-form .hs-button:hover,
#hs-form-container .hs-form input[type="submit"]:hover {
  background: var(--sienna-hover) !important;
}
/* Two-col layout for first/last name fields if HubSpot renders them inline */
#hs-form-container .hs-form fieldset.form-columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  #hs-form-container .hs-form fieldset.form-columns-2 {
    grid-template-columns: 1fr;
  }
}
/* Hide HubSpot GDPR / legal consent copy if shown (CFS uses its own note) */
#hs-form-container .hs-form .legal-consent-container { margin-top: 8px; }
#hs-form-container .hs-form .legal-consent-container p {
  font-size: 0.72rem !important;
  color: var(--stone) !important;
  line-height: 1.5;
}
.fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 320ms ease-out, transform 320ms ease-out;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-center p { margin-left: auto; margin-right: auto; }

/* ═══════════════════════════════════════════════════════
   MULTI-BRAND TOPBAR
═══════════════════════════════════════════════════════ */
.topbar {
  background: var(--midnight);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 1024px) { .topbar-inner { padding: 0 40px; } }
@media (max-width: 640px) { .topbar-inner { padding: 0 20px; } }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.topbar-left::-webkit-scrollbar { display: none; }
.topbar-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(216,237,230,0.38);
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,0.1);
  line-height: 34px;
  white-space: nowrap;
  margin-right: 0;
}
.topbar-brand {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(216,237,230,0.5);
  text-decoration: none;
  padding: 0 14px;
  border-right: 1px solid rgba(255,255,255,0.1);
  transition: color 180ms;
  line-height: 34px;
  white-space: nowrap;
}
.topbar-brand:hover { color: var(--sage); }
.topbar-brand.current {
  color: var(--sage);
  font-weight: 600;
}
.topbar-credit {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(216,237,230,0.3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 180ms;
  white-space: nowrap;
}
.topbar-credit:hover { color: rgba(216,237,230,0.6); }
.topbar-credit-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sienna);
  opacity: 0.7;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .topbar-credit { display: none; }
  .topbar-brand  { padding: 0 10px; font-size: 0.58rem; }
  .topbar-label  { padding-right: 10px; font-size: 0.58rem; }
}

/* ═══════════════════════════════════════════════════════
   NEW HERO — EDITORIAL SPLIT
   Replaces the original parchment hero
═══════════════════════════════════════════════════════ */
.hero-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0; /* Override global section padding */
  position: relative;
}
.hero-editorial::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sienna);
  z-index: 3;
}
@media (max-width: 1024px) {
  .hero-editorial { grid-template-columns: 1fr; min-height: auto; }
}

/* Left column — copy */
.hero-ed-left {
  background: var(--parchment);
  padding: 72px 64px 72px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 0.5px solid var(--border);
  position: relative;
}
@media (max-width: 1024px) {
  .hero-ed-left {
    padding: 72px 40px;
    border-right: none;
    border-bottom: 0.5px solid var(--border);
  }
}
@media (max-width: 640px) { .hero-ed-left { padding: 60px 24px; } }

.hero-ed-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 36px;
}
.hero-ed-kicker-line {
  width: 36px; height: 0.5px;
  background: var(--sienna);
  flex-shrink: 0;
}
.hero-ed-kicker-text {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.hero-ed-h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.5vw, 4.8rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--midnight);
  margin-bottom: 32px;
}
.hero-ed-h1 em {
  font-style: italic;
  color: var(--sienna);
}

.hero-ed-answer {
  border-top: 0.5px solid var(--border);
  padding-top: 24px;
  margin-bottom: 36px;
}
.hero-ed-answer p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--charcoal);
  max-width: 54ch;
}
.hero-ed-answer strong { color: var(--ink); font-weight: 700; }

.hero-ed-cta-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 14px;
}

/* Right column — stat panel */
.hero-ed-right {
  background: var(--midnight);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1024px) { .hero-ed-right { padding: 64px 40px; } }
@media (max-width: 640px) { .hero-ed-right { padding: 52px 24px; } }

.hero-ed-watermark {
  position: absolute;
  right: -24px; bottom: 24px;
  font-family: var(--font-display);
  font-size: 280px; font-weight: 700;
  line-height: 1; letter-spacing: -0.05em;
  color: rgba(216,237,230,0.04);
  pointer-events: none; user-select: none;
  z-index: 2;
}

.hero-ed-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 30%;
  z-index: 0;
}
.hero-ed-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,43,34,0.74) 0%, rgba(13,43,34,0.82) 55%, rgba(13,43,34,0.92) 100%);
  z-index: 1;
}

.hero-ed-stats { position: relative; z-index: 2; }
.hero-ed-stat {
  padding: 26px 0;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.hero-ed-stat:first-child { border-top: 0.5px solid rgba(255,255,255,0.08); }
.hero-ed-stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--sage);
  margin-bottom: 5px;
  text-shadow: 0 2px 14px rgba(13,43,34,0.65);
}
.hero-ed-stat-num span { color: var(--sienna); }
.hero-ed-stat-lbl {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 8px rgba(13,43,34,0.6);
}

.hero-ed-mantra {
  position: relative;
  z-index: 2;
  padding-top: 36px;
}
.hero-ed-mantra-quote {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255,255,255,0.96);
  margin-bottom: 16px;
  max-width: 36ch;
  text-shadow: 0 2px 14px rgba(13,43,34,0.65);
}
.hero-ed-mantra-attr {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-ed-mantra-line {
  width: 22px; height: 0.5px;
  background: var(--sienna);
}
.hero-ed-mantra-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 8px rgba(13,43,34,0.6);
}

/* Mobile drawer offset — below topbar (34px) + nav (76px). Matches the
   860px breakpoint where the hamburger/drawer becomes active (see
   .nav-hamburger's display:flex media query above) so the drawer never
   overlaps the nav bar in the 701–860px range. */
@media (max-width: 860px) { .nav-drawer { top: 110px; } }

/* Scroll animation */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* ============================================================
   7. MULTI-BRAND TOPBAR
   ============================================================ */
@media (max-width: 1024px) { .topbar-inner { padding: 0 40px; } }
@media (max-width: 640px) { .topbar-inner { padding: 0 20px; } }
@media (max-width: 700px) {
  .topbar-credit { display: none; }
  .topbar-brand  { padding: 0 10px; font-size: 0.58rem; }
  .topbar-label  { padding-right: 10px; font-size: 0.58rem; }
}

/* ============================================================
   9. HERO — EDITORIAL SPLIT (Homepage)
   ============================================================ */
@media (max-width: 1024px) { .hero-editorial { grid-template-columns: 1fr; min-height: auto; } }
@media (max-width: 1024px) { .hero-ed-left { padding: 72px 40px; border-right: none; border-bottom: 0.5px solid var(--border); } }
@media (max-width: 640px) { .hero-ed-left { padding: 60px 24px; } }
@media (max-width: 1024px) { .hero-ed-right { padding: 64px 40px; } }
@media (max-width: 640px) { .hero-ed-right { padding: 52px 24px; } }

/* ============================================================
   11. BREADCRUMB
   ============================================================ */
.breadcrumb { background: var(--white); border-bottom: 0.5px solid var(--border); padding: 12px 0; }
.breadcrumb-inner { display: flex; align-items: center; gap: 8px; max-width: var(--max-w); margin: 0 auto; padding: 0 80px; }
@media (max-width: 1024px) { .breadcrumb-inner { padding: 0 40px; } }
@media (max-width: 640px) { .breadcrumb-inner { padding: 0 20px; } }
.breadcrumb a { font-size: 0.78rem; color: var(--stone); text-decoration: none; transition: color 180ms; }
.breadcrumb a:hover { color: var(--forest); }
.breadcrumb-sep { font-size: 0.78rem; color: var(--border); }
.breadcrumb-current { font-size: 0.78rem; color: var(--forest); font-weight: 500; }

/* ============================================================
   Page-specific additions (About, NL, Assessment, Start Here)
   pulled from respective page style blocks
   ============================================================ */

/* === ABOUT page-specific === */
/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

/* ═══════════════════════════════════════════════════
   TOKENS — v1.1
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   TYPE
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {.container{padding:0 40px;}}

@media (max-width: 640px) {.container{padding:0 20px;}}

/* ═══════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════ */

.btn-lg{padding:16px 32px;font-size:1rem;}

/* ═══════════════════════════════════════════════════
   ICONS
═══════════════════════════════════════════════════ */

/* Sizes any <img> to 1em × 1em so it inherits whatever font-size the
   wrapping -icon/-avatar/-mark component class already sets — no new
   per-component sizing values needed. Used to replace decorative emoji
   sitewide with the Botanical Circle Mark favicon. */
img.brand-icon-mark{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;object-fit:contain;}

/* Disclosure box label icon (about.html) — replaces a prior inline
   style="font-size:1rem" per the no-inline-styles rule. */
.disclosure-label-icon{font-size:1rem;display:inline-flex;}

/* ═══════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {.nav-inner{padding:0 40px;}}

@media (max-width: 640px) {.nav-inner{padding:0 20px;}}

.nav-links a.active{color:var(--forest);font-weight:600;}

@media (max-width: 860px) {.nav-links,.nav-cta-wrap{display:none;}.nav-hamburger{display:flex;}}


.nav-drawer a:last-of-type{border-bottom:none;}

/* ═══════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════ */


@media (max-width: 1024px) {.breadcrumb-inner{padding:0 40px;}}

@media (max-width: 640px) {.breadcrumb-inner{padding:0 20px;}}




.breadcrumb-curr{font-size:0.78rem;color:var(--forest);font-weight:500;}

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */


.hero::after{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%,rgba(77,146,128,0.07) 0%,transparent 55%),radial-gradient(circle at 15% 80%,rgba(184,98,46,0.05) 0%,transparent 45%);pointer-events:none;}

.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center;max-width:var(--max-w);margin:0 auto;padding:0 80px;}

@media (max-width: 1024px) {.hero-inner{grid-template-columns:1fr;gap:48px;padding:0 40px;}}

@media (max-width: 640px) {.hero-inner{padding:0 20px;}}

.hero .eyebrow{color:var(--forest-mid);}


/* Mission card (hero right col) — light card on the parchment hero, matching
   the proven .path-roadmap-card treatment (white bg, dark readable text).
   Previously used pale-mint text on a near-transparent panel, which was
   designed for a dark section and was unreadable here. */
.mission-card{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:32px;box-shadow:0 16px 40px rgba(13,43,34,0.08);}

/* Hero persona-illustration band (about.html) — sits inside .hero, below the
   two-column grid. Compares generic "built for everyone" software against
   software built around a specific persona and business model. */
.hero-illustration-band { margin-top: 72px; }
.hero-illo-eyebrow { text-align: center; margin-bottom: 8px; }
.hero-illo-heading { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.hero-illo-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 800px) { .hero-illo-grid { grid-template-columns: 1fr; } }
.hero-illo-vs {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--stone);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media (max-width: 800px) { .hero-illo-vs { text-align: center; margin: -8px 0; } }
.hero-illo-panel {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  border: 0.5px solid var(--border);
}
.hero-illo-panel.persona { border-color: var(--forest); box-shadow: 0 16px 40px rgba(13,43,34,0.08); }
.hero-illo-panel-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.hero-illo-panel.generic .hero-illo-panel-label { color: var(--stone); }
.hero-illo-panel.persona .hero-illo-panel-label { color: var(--forest); }
.hero-illo-panel h3 { font-size: 1rem; margin-bottom: 14px; color: var(--midnight); }
.hero-illo-list { display: flex; flex-direction: column; gap: 9px; }
.hero-illo-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; line-height: 1.5; color: var(--charcoal); list-style: none; }
.hero-illo-list li svg { flex-shrink: 0; margin-top: 3px; }
.hero-illo-caption {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--stone);
}
.hero-illo-caption strong { color: var(--charcoal); }

/* Practitioner photo band — below hero */
.about-photo-band{padding:0 0 96px;}
.about-photo-band-img{width:100%;height:auto;max-height:420px;object-fit:cover;object-position:center 30%;border-radius:var(--r-xl);display:block;}
@media (max-width: 640px) {.about-photo-band{padding:0 0 64px;}.about-photo-band-img{max-height:280px;}}

.mission-card-label{font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:14px;display:block;}

.mission-statement{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.3rem);font-weight:600;font-style:italic;color:var(--midnight);line-height:1.4;margin-bottom:20px;max-width:none;}

.mission-divider{height:0.5px;background:var(--border);margin:0 0 20px;}

.mission-pillars{display:flex;flex-direction:column;gap:10px;}

.mission-pillar{display:flex;align-items:center;gap:10px;font-size:0.85rem;color:var(--charcoal);}

/* ── Hero roadmap card (start-here.html) ──────────────────────────────
   Illustrates the recommended path to scaling, ending in Next Level.
   Sits in the second column of .hero-inner (white card on parchment). */
.path-roadmap-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 30px 32px;
  box-shadow: 0 16px 40px rgba(13,43,34,0.08);
}
.path-roadmap-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-mid);
  margin-bottom: 22px;
}
.path-roadmap-step { display: flex; gap: 14px; }
.path-roadmap-step-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.path-roadmap-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--midnight);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.path-roadmap-num.final { background: var(--sienna); color: var(--white); }
.path-roadmap-connector { width: 2px; background: var(--sage-border); flex: 1; min-height: 22px; margin-top: 4px; }
.path-roadmap-body { padding-bottom: 20px; }
.path-roadmap-step:last-of-type .path-roadmap-body { padding-bottom: 0; }
.path-roadmap-body h3 { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--midnight); margin-bottom: 3px; }
.path-roadmap-body p { font-size: 0.8rem; color: var(--stone); line-height: 1.5; max-width: none; }
.path-roadmap-cta {
  display: block;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 0.5px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sienna);
  text-decoration: none;
}
.path-roadmap-cta:hover { color: var(--sienna-hover); }
@media (max-width: 1024px) { .path-roadmap-card { max-width: 460px; } }

.pillar-dot{width:6px;height:6px;border-radius:50%;background:var(--sienna);flex-shrink:0;}

/* ═══════════════════════════════════════════════════
   AEO ANSWER SECTION
═══════════════════════════════════════════════════ */

@media (max-width: 900px) {.answer-grid{grid-template-columns:1fr;gap:40px;}}

.answer-intro p{font-size:0.97rem;line-height:1.75;color:var(--charcoal);max-width:none;}

/* ═══════════════════════════════════════════════════
   WHY CFS EXISTS
═══════════════════════════════════════════════════ */
.why-section{background:var(--parchment);}

.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}

@media (max-width: 900px) {.why-grid{grid-template-columns:1fr;gap:40px;}}

.why-copy h2{margin-bottom:20px;}

.why-copy p{font-size:0.97rem;line-height:1.8;color:var(--charcoal);margin-bottom:18px;max-width:none;}

.why-pull{background:var(--midnight);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;}

.why-pull blockquote{font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.35rem);font-style:italic;font-weight:600;color:var(--sage);line-height:1.4;max-width:none;}

.why-pull-attr{font-size:0.82rem;color:var(--forest-mid);font-weight:500;}

.why-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px;}

@media (max-width: 500px) {.why-values{grid-template-columns:1fr;}}

.value-chip{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-sm);padding:12px 14px;display:flex;align-items:flex-start;gap:8px;transition:border-color 200ms;}

.value-chip:hover{border-color:var(--sage-border);}

.value-chip-icon{font-size:1rem;flex-shrink:0;}

.value-label{font-size:0.83rem;font-weight:600;color:var(--midnight);margin-bottom:2px;}

.value-desc{font-size:0.75rem;color:var(--stone);line-height:1.4;}

/* ═══════════════════════════════════════════════════
   WHO IS BEHIND CFS
═══════════════════════════════════════════════════ */
.tier-snapshot-section{background:var(--white);padding:80px 0;}
.team-section{background:var(--white);border-top:0.5px solid var(--border);}

.team-section h2{margin-bottom:12px;}

.team-intro{font-size:1rem;color:var(--stone);margin-bottom:48px;max-width:560px;}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

@media (max-width: 900px) {.team-grid{grid-template-columns:1fr 1fr;}}

@media (max-width: 580px) {.team-grid{grid-template-columns:1fr;}}

.team-card{background:var(--parchment);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:28px;transition:border-color 200ms;}

.team-card:hover{border-color:var(--sage-border);}

.team-avatar{width:56px;height:56px;border-radius:50%;background:var(--sage);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:16px;flex-shrink:0;}

.team-name{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:var(--midnight);margin-bottom:3px;}

.team-title{font-size:0.78rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--sienna);margin-bottom:12px;}

.team-bio{font-size:0.88rem;line-height:1.7;color:var(--charcoal);max-width:none;}

/* Founding-organizations card — sits inside .relationship-section (dark
   midnight background), naming Virgo Development as the company that
   builds Next Level and an example founding organization running on it. */
.founding-orgs-card {
  margin-top: 40px;
  background: rgba(216,237,230,0.06);
  border: 0.5px solid rgba(216,237,230,0.16);
  border-radius: var(--r-lg);
  padding: 32px;
}
.founding-orgs-logo-row { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.founding-orgs-logo-row img { height: 30px; width: auto; }
.founding-orgs-card p { font-size: 0.9rem; line-height: 1.75; color: var(--dark-text); max-width: none; }
.founding-orgs-card p + p { margin-top: 14px; }
.founding-orgs-card a { color: var(--sage); text-decoration: underline; text-underline-offset: 2px; }
.founding-orgs-card a:hover { color: var(--white); }
.founding-org-example {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 0.5px solid rgba(216,237,230,0.16);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.founding-org-example-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }

/* Practitioner-built badge row */
.built-by-row{display:flex;align-items:center;gap:14px;margin-top:40px;padding:18px 22px;background:var(--sage);border-radius:var(--r-sm);}

.built-by-icon{font-size:1.3rem;flex-shrink:0;}

.built-by-text{font-size:0.88rem;color:var(--midnight);line-height:1.6;font-weight:500;}

.built-by-text strong{font-weight:700;}

/* ═══════════════════════════════════════════════════
   CFS <> NEXT LEVEL — THE TRANSPARENCY SECTION
═══════════════════════════════════════════════════ */
.relationship-section{background:var(--midnight);padding:88px 0;}

.relationship-inner{max-width:900px;margin:0 auto;}

.relationship-section .eyebrow{color:var(--forest-mid);margin-bottom:12px;}

.relationship-section h2{color:var(--sage);margin-bottom:20px;}

.relationship-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:40px 0;}

@media (max-width: 800px) {.relationship-grid{grid-template-columns:1fr;}}

.rel-card{border-radius:var(--r-lg);padding:28px;}

.rel-card.cfs-card{background:rgba(216,237,230,0.08);border:0.5px solid rgba(216,237,230,0.2);}

.rel-card.nl-card{background:rgba(184,98,46,0.1);border:0.5px solid rgba(184,98,46,0.2);}

.rel-card-label{font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:10px;display:block;}

.rel-card.cfs-card .rel-card-label{color:var(--forest-mid);}

.rel-card.nl-card  .rel-card-label{color:var(--sienna);}

.rel-card h3{margin-bottom:10px;}

.rel-card.cfs-card h3{color:var(--sage);}

.rel-card.nl-card  h3{color:var(--sienna);}

.rel-card p{font-size:0.88rem;color:var(--dark-text);line-height:1.7;max-width:none;}

/* The honest disclosure box */
.disclosure-box{background:var(--white);border-radius:var(--r-lg);padding:32px 36px;margin-top:0;}

.disclosure-label{display:flex;align-items:center;gap:10px;margin-bottom:14px;}

.disclosure-label-text{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--sienna);}

.disclosure-box h3{font-size:1.05rem;color:var(--midnight);margin-bottom:10px;}

.disclosure-box p{font-size:0.92rem;line-height:1.75;color:var(--charcoal);max-width:none;margin-bottom:14px;}

.disclosure-box p:last-of-type{margin-bottom:0;}

/* ═══════════════════════════════════════════════════
   WHO CFS IS BUILT FOR
═══════════════════════════════════════════════════ */
.persona-section{background:var(--parchment);}

.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}

@media (max-width: 900px) {.persona-grid{grid-template-columns:1fr;gap:40px;}}

.persona-copy h2{margin-bottom:16px;}

.persona-copy p{font-size:0.97rem;line-height:1.8;color:var(--charcoal);margin-bottom:18px;max-width:none;}

/* Persona profile card */
.persona-card{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}

.persona-card-header{background:var(--ink);padding:22px 24px;}

.persona-card-header-label{font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--forest-mid);margin-bottom:8px;display:block;}

.persona-card-header h3{color:var(--sage);font-size:1.05rem;margin-bottom:4px;}

.persona-card-header p{font-size:0.82rem;color:var(--dark-text);max-width:none;}

.persona-card-body{padding:24px;}

.persona-traits{display:flex;flex-direction:column;gap:10px;}

.persona-trait{display:flex;align-items:flex-start;gap:12px;padding:11px 13px;background:var(--parchment);border-radius:var(--r-sm);border:0.5px solid var(--border);}

.trait-icon{font-size:1rem;flex-shrink:0;margin-top:1px;}

.trait-text{font-size:0.85rem;color:var(--charcoal);line-height:1.5;max-width:none;}

.trait-text strong{color:var(--midnight);font-weight:600;}

.persona-not-for{margin-top:20px;padding:14px 16px;background:var(--sienna-50);border-radius:var(--r-sm);border-left:3px solid var(--sienna);}

.persona-not-for p{font-size:0.82rem;color:var(--dark-accent);line-height:1.65;max-width:none;}

/* ═══════════════════════════════════════════════════
   BRAND PROMISE & MANTRA
═══════════════════════════════════════════════════ */
.promise-section{background:var(--white);padding:80px 0;}

.promise-inner{max-width:900px;margin:0 auto;}

.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}

@media (max-width: 760px) {.promise-grid{grid-template-columns:1fr;}}

.promise-card{border-radius:var(--r-lg);padding:32px;}

.promise-mantra-card{background:var(--midnight);}

.promise-brand-card{background:var(--parchment);border:0.5px solid var(--border);}

.promise-mantra-card .promise-eyebrow{color:var(--forest-mid);font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px;display:block;}

.promise-mantra{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2rem);font-weight:700;font-style:italic;color:var(--sage);line-height:1.25;margin-bottom:14px;}

.promise-mantra-sienna{color:var(--sienna);}

.promise-mantra-sub{font-size:0.9rem;color:var(--dark-text);line-height:1.7;max-width:none;}

.promise-brand-card .promise-eyebrow{color:var(--forest);font-size:0.68rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:14px;display:block;}

.brand-promise-text{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--midnight);line-height:1.35;margin-bottom:14px;}

.brand-promise-sub{font-size:0.9rem;color:var(--charcoal);line-height:1.7;max-width:none;}

.supporting-mantras{margin-top:20px;display:flex;flex-direction:column;gap:8px;}

.mantra-chip{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-sm);}

.mantra-chip-text{font-size:0.83rem;font-style:italic;color:var(--charcoal);max-width:none;}

.mantra-chip-context{font-size:0.72rem;color:var(--stone);margin-top:1px;max-width:none;}

/* ═══════════════════════════════════════════════════
   ARCHETYPE SECTION
═══════════════════════════════════════════════════ */
.archetype-section{background:var(--parchment);padding:80px 0;}

.archetype-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;}

@media (max-width: 760px) {.archetype-grid{grid-template-columns:1fr;}}

.archetype-card{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:30px;transition:border-color 200ms;}

.archetype-card:hover{border-color:var(--sage-border);}

.archetype-tag{display:inline-block;font-size:0.68rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;margin-bottom:14px;}

.archetype-tag.primary{background:var(--sage);color:var(--midnight);}

.archetype-tag.secondary{background:var(--sienna-50);color:var(--sienna);}

.archetype-card h3{color:var(--midnight);font-size:1.05rem;margin-bottom:10px;}

.archetype-card p{font-size:0.9rem;line-height:1.75;color:var(--charcoal);max-width:none;}

.archetype-quote{margin-top:16px;padding:12px 14px;background:var(--parchment);border-radius:var(--r-sm);border-left:2px solid var(--sage-border);font-size:0.83rem;color:var(--stone);font-style:italic;max-width:none;}

/* ═══════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════ */
.cta-section{background:var(--sage);padding:72px 0;text-align:center;}

.cta-section h2{color:var(--midnight);margin-bottom:10px;font-size:clamp(1.4rem,2.5vw,1.8rem);}

.cta-section p{color:var(--ink);font-size:1rem;margin:0 auto 28px;}

.cta-section .btn-group{justify-content:center;}

/* ═══════════════════════════════════════════════════
   FAQ
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */

@media (max-width: 900px) {.footer-grid{grid-template-columns:1fr 1fr;}}

@media (max-width: 540px) {.footer-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .fade-up{opacity:1;transform:none;transition:none;}
  *{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}
}

/* === NEXT-LEVEL page-specific === */
/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   TOKENS — v1.1
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   TYPE
═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) {.container{padding:0 40px;}}

@media (max-width: 640px) {.container{padding:0 20px;}}


.btn-full{width:100%;justify-content:center;}

@media (max-width: 1024px) {.nav-inner{padding:0 40px;}}

@media (max-width: 640px) {.nav-inner{padding:0 20px;}}


@media (max-width: 860px) {.nav-links,.nav-cta-wrap{display:none;}.nav-hamburger{display:flex;}}



/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */


@media (max-width: 1024px) {.breadcrumb-inner{padding:0 40px;}}

@media (max-width: 640px) {.breadcrumb-inner{padding:0 20px;}}







@media (max-width: 1024px) {.hero-grid{grid-template-columns:1fr;gap:48px;padding:0 40px;}}

@media (max-width: 640px) {.hero-grid{padding:0 20px;}}



/* Hero platform card */
.hero-card{background:var(--white);border-radius:var(--r-lg);overflow:hidden;}

.hero-card-header{background:var(--ink);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;}

.hero-card-title{font-size:0.72rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--sage);}

.hero-card-badge{font-size:0.65rem;font-weight:600;background:rgba(216,237,230,0.15);color:var(--sage);padding:3px 10px;border-radius:999px;border:0.5px solid rgba(216,237,230,0.3);}

.hero-card-body{padding:22px;}

.hero-card-logo-row{
  display:flex;
  justify-content:center;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:0.5px solid var(--border);
}
.hero-card-logo{height:54px;width:auto;display:block;}

/* App mockup tiles */
.app-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}

.app-tile{border-radius:var(--r-sm);padding:12px 10px;text-align:center;border:0.5px solid var(--border);}

.app-tile-icon{font-size:1.3rem;margin-bottom:5px;display:block;}

.app-tile-label{font-size:0.65rem;font-weight:600;color:var(--charcoal);}

.app-tile-sub{font-size:0.6rem;color:var(--stone);margin-top:1px;}

.app-tile.green{background:var(--sage);}

.app-tile.sienna{background:var(--sienna-50);}

.app-tile.parch{background:var(--parchment);}

.hero-card-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}

.hero-stat{background:var(--parchment);border-radius:var(--r-sm);padding:10px;text-align:center;}

.hero-stat-val{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--midnight);display:block;line-height:1;}

.hero-stat-lbl{font-size:0.62rem;color:var(--stone);margin-top:3px;display:block;}

/* ═══════════════════════════════════════════════════════
   HONEST CONTEXT BAND
═══════════════════════════════════════════════════════ */
.context-band{background:var(--sienna-50);border-top:0.5px solid var(--sienna-100);border-bottom:0.5px solid var(--sienna-100);padding:20px 0;}

.context-band-inner{max-width:var(--max-w);margin:0 auto;padding:0 80px;display:flex;align-items:center;gap:14px;}

@media (max-width: 1024px) {.context-band-inner{padding:0 40px;}}

@media (max-width: 640px) {.context-band-inner{padding:0 20px;flex-direction:column;align-items:flex-start;}}

.context-band p{font-size:0.88rem;color:var(--dark-accent);line-height:1.6;max-width:none;}

.context-band strong{font-weight:600;}

@media (max-width: 900px) {.answer-grid{grid-template-columns:1fr;gap:40px;}}


/* ═══════════════════════════════════════════════════════
   STACK REPLACEMENT (dark section)
═══════════════════════════════════════════════════════ */
.stack-section{background:var(--midnight);padding:88px 0;}

.stack-section h2{color:var(--sage);margin-bottom:14px;}

.stack-intro{color:var(--dark-text);font-size:1.02rem;margin-bottom:56px;max-width:560px;}

.stack-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start;}

@media (max-width: 860px) {.stack-grid{grid-template-columns:1fr;}}

.stack-col-head.before{color:var(--dark-text);}

.stack-col-head.after{color:var(--sage);}

.stack-items{display:flex;flex-direction:column;gap:8px;}

.stack-item-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);}

.stack-item-card.before{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.08);}

.stack-item-card.after{background:rgba(216,237,230,0.09);border:0.5px solid rgba(216,237,230,0.15);}

.stack-item-icon{font-size:1rem;flex-shrink:0;width:24px;text-align:center;}

.stack-item-label{font-size:0.85rem;font-weight:500;flex:1;}

.stack-item-card.before .stack-item-label{color:var(--dark-text);text-decoration:line-through;opacity:0.7;}

.stack-item-card.after .stack-item-label{color:var(--sage);}

.stack-item-cost{font-size:0.75rem;color:var(--stone);font-family:var(--font-mono);}

.stack-item-card.after .stack-item-cost{color:var(--forest-mid);}

.stack-arrow-col{display:flex;align-items:center;justify-content:center;padding-top:52px;}

@media (max-width: 860px) {.stack-arrow-col{padding-top:0;}}

.stack-arrow{width:40px;height:40px;background:var(--sienna);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1.1rem;flex-shrink:0;}

.stack-total-row{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;margin-top:20px;padding-top:20px;border-top:0.5px solid rgba(255,255,255,0.1);}

@media (max-width: 860px) {.stack-total-row{grid-template-columns:1fr;}}

.stack-total{padding:14px 18px;border-radius:var(--r-sm);display:flex;justify-content:space-between;align-items:center;gap:16px;}

.stack-total.before{background:rgba(255,255,255,0.05);}

.stack-total.after{background:rgba(184,98,46,0.15);}

.stack-total-label-group{display:flex;flex-direction:column;gap:3px;}

.stack-total-label{font-size:0.82rem;font-weight:600;}

.stack-total.before .stack-total-label{color:var(--dark-text);}

.stack-total.after .stack-total-label{color:var(--sienna);}

.stack-total-note{font-size:0.72rem;font-weight:400;line-height:1.4;color:var(--dark-text-mid);max-width:340px;}

.stack-total-val{font-family:var(--font-display);font-size:1.15rem;font-weight:700;white-space:nowrap;}

.stack-total.before .stack-total-val{color:var(--white);}

.stack-total.after .stack-total-val{color:var(--sienna);}

/* ═══════════════════════════════════════════════════════
   FEATURE DEEP-DIVE
═══════════════════════════════════════════════════════ */
.features-section{
  background:
    linear-gradient(180deg,
      rgba(242,235,224,0.97) 0%,
      rgba(242,235,224,0.9) 16%,
      rgba(242,235,224,0.82) 42%,
      rgba(242,235,224,0.88) 74%,
      rgba(242,235,224,0.96) 100%),
    url('../img/practitioner-reviewing-program-analytics-laptop.webp') center 30% / cover no-repeat;
}

.features-section .eyebrow{
  color:var(--ink);
  text-shadow:0 1px 16px rgba(242,235,224,0.98), 0 1px 3px rgba(242,235,224,0.98);
}

.features-section h2{
  margin-bottom:12px;
  text-shadow:0 2px 20px rgba(242,235,224,0.95), 0 1px 3px rgba(242,235,224,0.95);
}

.features-intro{
  font-size:1.02rem;
  color:var(--charcoal);
  margin-bottom:56px;
  max-width:560px;
  text-shadow:0 1px 16px rgba(242,235,224,0.98), 0 1px 3px rgba(242,235,224,0.98);
}

.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}

@media (max-width: 1024px) {.features-grid{grid-template-columns:repeat(2,1fr);}}

@media (max-width: 600px) {.features-grid{grid-template-columns:1fr;}}

.feature-card{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:28px;transition:border-color 200ms;}

.feature-card:hover{border-color:var(--sage-border);}

.feature-card-icon{width:44px;height:44px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px;flex-shrink:0;}

.feature-card-icon.green{background:var(--sage);}

.feature-card-icon.sienna{background:var(--sienna-50);}

.feature-card h3{color:var(--midnight);font-size:1rem;margin-bottom:8px;}

.feature-card p{font-size:0.88rem;line-height:1.7;color:var(--charcoal);max-width:none;margin-bottom:12px;}

.feature-detail{font-size:0.78rem;color:var(--forest);font-weight:500;background:var(--sage);padding:6px 10px;border-radius:var(--r-sm);display:inline-block;}

/* ═══════════════════════════════════════════════════════
   KAJABI COMPARISON
═══════════════════════════════════════════════════════ */
.compare-section{background:var(--white);}

.compare-section h2{margin-bottom:12px;}

.compare-intro{font-size:1.02rem;color:var(--stone);margin-bottom:48px;max-width:560px;}

/* Comparison note box */
.compare-note{background:var(--sienna-50);border-left:3px solid var(--sienna);border-radius:var(--r-sm);padding:16px 20px;margin-bottom:40px;}

.compare-note p{font-size:0.88rem;color:var(--dark-accent);line-height:1.65;max-width:none;}

/* Comparison table */
.compare-table{width:100%;border-collapse:collapse;font-size:0.88rem;}

.compare-table th{padding:12px 16px;text-align:left;font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;border-bottom:2px solid var(--border);}

.compare-table th.col-feature{color:var(--stone);width:36%;}

.compare-table th.col-nl{color:var(--forest);background:var(--sage);border-radius:var(--r-sm) var(--r-sm) 0 0;text-align:center;}

.compare-table th.col-kajabi{color:var(--stone);text-align:center;}

.compare-table td{padding:13px 16px;border-bottom:0.5px solid var(--border);vertical-align:top;line-height:1.5;color:var(--charcoal);}

.compare-table td.col-nl{background:rgba(216,237,230,0.2);text-align:center;font-weight:500;color:var(--midnight);}

.compare-table td.col-kajabi{text-align:center;color:var(--stone);}

.compare-table tr:last-child td{border-bottom:none;}

.compare-table tr:hover td{background:var(--parchment);}

.compare-table tr:hover td.col-nl{background:rgba(216,237,230,0.35);}

.check{color:var(--forest);font-size:1rem;}

.cross{color:var(--border);font-size:1rem;}

.part{color:var(--forest-mid);font-size:0.82rem;}

.compare-bottom{margin-top:20px;padding:16px 20px;background:var(--parchment);border-radius:var(--r-sm);display:flex;align-items:flex-start;gap:12px;}

.compare-bottom p{font-size:0.85rem;color:var(--charcoal);line-height:1.65;max-width:none;}

/* ═══════════════════════════════════════════════════════
   PRICING
═══════════════════════════════════════════════════════ */
.pricing-section{background:var(--parchment);}

.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:stretch;}

@media (max-width: 900px) {.pricing-grid{grid-template-columns:1fr;gap:40px;}}

.pricing-card{background:var(--white);border:0.5px solid var(--border);border-radius:var(--r-lg);padding:36px;position:relative;overflow:hidden;}

.pricing-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--sienna);}

.pricing-plan-label{font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--stone);margin-bottom:10px;}

.pricing-plan-name{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--midnight);margin-bottom:6px;}

.pricing-amount{display:flex;align-items:baseline;gap:4px;margin-bottom:4px;}

.pricing-amount-val{font-family:var(--font-display);font-size:2.8rem;font-weight:700;color:var(--midnight);line-height:1;}

.pricing-amount-period{font-size:0.88rem;color:var(--stone);}

.pricing-setup{font-size:0.82rem;color:var(--stone);margin-bottom:24px;}

.pricing-setup strong{color:var(--charcoal);}

.pricing-divider{height:0.5px;background:var(--border);margin:0 0 24px;}

.pricing-includes{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:28px;}

.pricing-includes li{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--charcoal);line-height:1.45;}

.pricing-includes li::before{content:'✓';color:var(--forest);font-weight:600;flex-shrink:0;margin-top:1px;}

.roi-card{background:var(--midnight);border-radius:var(--r-lg);padding:32px;}

.roi-card h3{color:var(--sage);margin-bottom:14px;font-size:1.05rem;}

.roi-card p{color:var(--dark-text);font-size:0.9rem;line-height:1.75;max-width:none;margin-bottom:20px;}

.roi-calc{background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.1);border-radius:var(--r-sm);padding:16px 18px;display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}

.roi-row{display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;}

.roi-row-label{color:var(--dark-text);}

.roi-row-val{color:var(--white);font-weight:600;font-family:var(--font-mono);}

.roi-row.total{padding-top:8px;border-top:0.5px solid rgba(255,255,255,0.15);}

.roi-row.total .roi-row-label{color:var(--sage);font-weight:600;}

.roi-row.total .roi-row-val{color:var(--sienna);font-size:1rem;}

.roi-note{font-size:0.78rem;color:var(--stone);line-height:1.6;max-width:none;}

/* ═══════════════════════════════════════════════════════
   SETUP PROCESS
═══════════════════════════════════════════════════════ */
.setup-section{background:var(--white);}

.setup-section h2{margin-bottom:12px;}

.setup-intro{font-size:1.02rem;color:var(--stone);margin-bottom:48px;max-width:560px;}

.setup-steps{display:flex;flex-direction:column;gap:0;max-width:800px;}

.setup-step{display:flex;gap:24px;padding:24px 0;border-bottom:0.5px solid var(--border);position:relative;}

.setup-step:last-child{border-bottom:none;}

.setup-step-left{display:flex;flex-direction:column;align-items:center;gap:0;flex-shrink:0;}

.setup-num{width:36px;height:36px;border-radius:50%;background:var(--sage);color:var(--midnight);font-family:var(--font-display);font-size:0.9rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;z-index:1;}

.setup-connector{width:2px;background:var(--sage-border);flex:1;margin-top:4px;min-height:24px;}

.setup-step:last-child .setup-connector{display:none;}

.setup-step-body h3{color:var(--midnight);font-size:1rem;margin-bottom:6px;}

.setup-step-body p{font-size:0.9rem;line-height:1.7;color:var(--charcoal);max-width:none;}

.setup-timeline{display:inline-block;font-size:0.72rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--sienna);background:var(--sienna-50);padding:3px 10px;border-radius:999px;margin-top:8px;}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
.testimonials-section{
  background:
    linear-gradient(180deg,
      rgba(242,235,224,0.97) 0%,
      rgba(242,235,224,0.87) 14%,
      rgba(242,235,224,0.7) 38%,
      rgba(242,235,224,0.76) 74%,
      rgba(242,235,224,0.93) 100%),
    url('../img/therapist-working-on-practice-technology-office.webp') center 20% / cover no-repeat;
  padding:80px 0;
}

.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}

/* Contrast fix — heading text sits directly on the background photo, outside
   the white testimonial cards, so it needs the same treatment as the
   homepage's .testimonial-section equivalent. */
.testimonials-section .divider-line { background: rgba(13,43,34,0.5); }
.testimonials-section .divider-text {
  color: var(--midnight);
  font-weight: 700;
  text-shadow: 0 1px 14px rgba(242,235,224,0.98), 0 1px 3px rgba(242,235,224,0.98);
}
.testimonials-section h2 {
  text-shadow: 0 2px 20px rgba(242,235,224,0.96), 0 1px 3px rgba(242,235,224,0.96);
}

@media (max-width: 680px) {.testimonials-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════
   VIDEO SECTION (embedded intro/testimonial video)
═══════════════════════════════════════════════════════ */
.video-section{background:var(--sage);padding:80px 0;}

.video-container{max-width:820px;}

.video-intro{text-align:center;margin-bottom:32px;}

.video-intro p{color:var(--charcoal);max-width:560px;margin:12px auto 0;font-size:0.97rem;}

.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:var(--midnight);border:0.5px solid var(--sage-border);}

.video-player{width:100%;height:100%;object-fit:cover;display:block;}

@media (max-width: 640px) {.video-section{padding:56px 0;}.video-frame{border-radius:var(--r-lg);}}

/* ═══════════════════════════════════════════════════════
   DEMO CTA (conversion section)
═══════════════════════════════════════════════════════ */
.demo-section{background:var(--midnight);padding:96px 0;position:relative;}

.demo-section::before{content:'';display:block;height:3px;background:var(--sienna);position:absolute;top:0;left:0;right:0;}

.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}

@media (max-width: 900px) {.demo-grid{grid-template-columns:1fr;gap:48px;}}

.demo-copy h1,.demo-copy h2{color:var(--sage);margin-bottom:14px;}

.demo-copy>p{color:var(--dark-text);font-size:1rem;line-height:1.75;max-width:none;margin-bottom:28px;}

.demo-expectations{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}

.demo-expect{display:flex;align-items:flex-start;gap:10px;font-size:0.88rem;color:var(--dark-text-mid);}

.demo-expect-icon{flex-shrink:0;font-size:0.9rem;margin-top:2px;}

.demo-form-wrap{background:var(--white);border-radius:var(--r-lg);padding:34px;}

.demo-form-title{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--midnight);margin-bottom:4px;}

.demo-form-sub{font-size:0.85rem;color:var(--stone);margin-bottom:22px;max-width:none;}

/* HubSpot overrides in demo form */
#hs-demo-form .hs-form input[type="text"],
#hs-demo-form .hs-form input[type="email"],
#hs-demo-form .hs-form select,
#hs-demo-form .hs-form textarea{font-family:var(--font-body)!important;font-size:0.9rem!important;color:var(--charcoal)!important;background:var(--parchment)!important;border:0.5px solid var(--border)!important;border-radius:var(--r-sm)!important;padding:11px 13px!important;width:100%!important;outline:none!important;box-shadow:none!important;transition:border-color 200ms;}

#hs-demo-form .hs-form input:focus,
#hs-demo-form .hs-form select:focus,
#hs-demo-form .hs-form textarea:focus{border-color:var(--forest)!important;background:var(--white)!important;}

#hs-demo-form .hs-form label{font-family:var(--font-body)!important;font-size:0.78rem!important;font-weight:500!important;color:var(--charcoal)!important;display:block;margin-bottom:5px;}

#hs-demo-form .hs-form .hs-form-field{margin-bottom:13px;}

#hs-demo-form .hs-form .hs-button,
#hs-demo-form .hs-form input[type="submit"]{font-family:var(--font-body)!important;font-size:0.98rem!important;font-weight:600!important;background:var(--sienna)!important;color:var(--white)!important;border:none!important;border-radius:var(--r-sm)!important;padding:14px 28px!important;width:100%!important;cursor:pointer!important;transition:background 200ms!important;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important;margin-top:4px;}

#hs-demo-form .hs-form .hs-button:hover{background:var(--sienna-hover)!important;}

#hs-demo-form .hs-form .hs-error-msgs{list-style:none;margin-top:4px;}

#hs-demo-form .hs-form .hs-error-msgs label{font-size:0.75rem!important;color:var(--sienna)!important;}

#hs-demo-form .hs-form fieldset.form-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

@media (max-width: 480px) {#hs-demo-form .hs-form fieldset.form-columns-2{grid-template-columns:1fr;}}

.demo-success{display:none;padding:16px;background:var(--sage);border-radius:var(--r-sm);border-left:3px solid var(--forest);font-size:0.9rem;color:var(--midnight);font-weight:500;}

.demo-note{font-size:0.73rem;color:var(--stone);text-align:center;margin-top:10px;max-width:none;}

@media (max-width: 900px) {.footer-grid{grid-template-columns:1fr 1fr;}}

@media (max-width: 540px) {.footer-grid{grid-template-columns:1fr;}}


/* ═══════════════════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {.fade-up{opacity:1;transform:none;transition:none;}*{animation-duration:0.01ms!important;transition-duration:0.01ms!important;}}

/* === SCALING-ASSESSMENT page-specific === */
/* ═══════════════════════════════════════════════════════
   TOKENS — v1.1
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   TYPE
═══════════════════════════════════════════════════════ */

@media (max-width: 1024px) { .container { padding: 0 40px; } }

@media (max-width: 640px) { .container { padding: 0 20px; } }



@media (max-width: 1024px) { .nav-inner { padding: 0 40px; } }

@media (max-width: 640px) { .nav-inner { padding: 0 20px; } }

.nav-links a:hover, .nav-links a.active { color: var(--forest); }


@media (max-width: 860px) { .nav-links, .nav-cta-wrap { display: none; } .nav-hamburger { display: flex; } }



/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */

.breadcrumb nav { display: flex; align-items: center; gap: 8px; max-width: var(--max-w); margin: 0 auto; padding: 0 80px; }

@media (max-width: 1024px) { .breadcrumb nav { padding: 0 40px; } }

@media (max-width: 640px) { .breadcrumb nav { padding: 0 20px; } }





/* ═══════════════════════════════════════════════════════
   INTRO SECTION
═══════════════════════════════════════════════════════ */
.intro { background: var(--midnight); padding: 72px 0 64px; position: relative; overflow: hidden; }

.intro::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sienna); }

.intro::after  { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 15%, rgba(77,146,128,0.07) 0%, transparent 55%), radial-gradient(circle at 15% 85%, rgba(184,98,46,0.05) 0%, transparent 45%); pointer-events: none; }

.intro-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: var(--max-w); margin: 0 auto; padding: 0 80px; }

@media (max-width: 900px) { .intro-inner { grid-template-columns: 1fr; gap: 36px; padding: 0 40px; } }

@media (max-width: 640px) { .intro-inner { padding: 0 20px; } }

.intro h1 { color: var(--sage); margin-bottom: 10px; }

.intro-sub { font-family: var(--font-display); font-size: clamp(1rem,2vw,1.15rem); font-style: italic; font-weight: 600; color: var(--sienna); margin-bottom: 20px; }

.intro-body { font-size: 0.97rem; color: var(--dark-text); line-height: 1.75; max-width: none; margin-bottom: 28px; }

.intro-stats { display: flex; gap: 28px; flex-wrap: wrap; }

.intro-stat { display: flex; flex-direction: column; }

.intro-stat-val { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--white); line-height: 1; }

.intro-stat-lbl { font-size: 0.75rem; color: var(--dark-text); margin-top: 3px; }

/* Intro visual card */
.intro-card { background: var(--white); border-radius: var(--r-lg); padding: 28px; }

.intro-card-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 18px; }

.path-preview { display: flex; flex-direction: column; gap: 10px; }

.path-pill { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-sm); border: 0.5px solid var(--border); background: var(--parchment); }

.path-pill-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.path-pill-label { font-size: 0.88rem; font-weight: 600; color: var(--midnight); }

.path-pill-desc  { font-size: 0.75rem; color: var(--stone); margin-top: 1px; }

.intro-card-note { margin-top: 18px; padding: 12px 14px; background: var(--sage); border-radius: var(--r-sm); font-size: 0.8rem; color: var(--ink); font-weight: 500; text-align: center; }

/* ═══════════════════════════════════════════════════════
   ASSESSMENT ENGINE
═══════════════════════════════════════════════════════ */
.assessment-section { background: var(--parchment); padding: 72px 0 96px; }

.assessment-wrap { max-width: 720px; margin: 0 auto; }

/* Progress bar */
.progress-bar-wrap { margin-bottom: 36px; }

.progress-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.progress-label { font-size: 0.78rem; font-weight: 500; color: var(--stone); }

.progress-count { font-size: 0.78rem; font-weight: 600; color: var(--forest); }

.progress-track { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; }

.progress-fill  { height: 4px; background: var(--sienna); border-radius: 999px; transition: width 350ms ease-out; }

/* Question card */
.q-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 40px 40px 32px;
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) { .q-card { padding: 28px 20px 24px; } }

.q-card-eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sienna); margin-bottom: 14px;
}

.q-text {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 600;
  color: var(--midnight);
  line-height: 1.3;
  margin-bottom: 28px;
  flex: 0;
}

.q-context {
  font-size: 0.88rem;
  color: var(--stone);
  margin-bottom: 24px;
  margin-top: -18px;
  max-width: none;
  font-style: italic;
}

/* Answer options */
.options { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.option-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 16px;
  background: var(--parchment);
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--midnight);
  transition: border-color 180ms, background 180ms, color 180ms;
  line-height: 1.4;
}

.option-btn:hover { border-color: var(--forest); background: var(--sage); }

.option-btn.selected { border-color: var(--forest); background: var(--sage); color: var(--midnight); }

.option-btn.selected .opt-indicator { background: var(--forest); border-color: var(--forest); }

.option-btn.selected .opt-indicator::after { opacity: 1; }

.opt-indicator {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms, border-color 180ms;
  position: relative;
}

.opt-indicator::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0;
  transition: opacity 180ms;
}

.opt-text { flex: 1; }

.opt-label { display: block; font-weight: 600; color: var(--midnight); font-size: 0.95rem; }

.opt-sub   { display: block; font-size: 0.78rem; color: var(--stone); font-weight: 400; margin-top: 1px; }

/* Nav row */
.q-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; gap: 12px; }

.q-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.88rem;
  font-weight: 500; color: var(--stone);
  display: flex; align-items: center; gap: 5px;
  padding: 8px 0; transition: color 180ms;
}

.q-back:hover { color: var(--charcoal); }

.q-back:disabled { opacity: 0.3; cursor: default; }

.q-next-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.q-hint { font-size: 0.72rem; color: var(--stone); }

/* Slide transition */
.q-card.slide-out-left  { animation: slideOutLeft  250ms ease-in  forwards; }

.q-card.slide-out-right { animation: slideOutRight 250ms ease-in  forwards; }

.q-card.slide-in-right  { animation: slideInRight  280ms ease-out forwards; }

.q-card.slide-in-left   { animation: slideInLeft   280ms ease-out forwards; }

@keyframes slideOutLeft  { to { opacity:0; transform: translateX(-32px); } }

@keyframes slideOutRight { to { opacity:0; transform: translateX(32px);  } }

@keyframes slideInRight  { from { opacity:0; transform: translateX(32px);  } }

@keyframes slideInLeft   { from { opacity:0; transform: translateX(-32px); } }

/* ═══════════════════════════════════════════════════════
   RESULT SCREEN
═══════════════════════════════════════════════════════ */
.result-wrap { display: none; }

.result-wrap.visible { display: block; }

.result-header {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 40px 40px 32px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 640px) { .result-header { padding: 28px 20px 24px; } }

.result-header.group    { background: var(--midnight); }

.result-header.member   { background: var(--ink); }

.result-header.hybrid   { background: linear-gradient(135deg, var(--midnight) 0%, var(--ink) 100%); }

.result-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(216,237,230,0.15);
  border: 0.5px solid rgba(216,237,230,0.3);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sage);
  margin-bottom: 18px;
}

.result-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sienna); }

.result-header h2 { color: var(--sage); margin-bottom: 10px; }

.result-subtitle { font-family: var(--font-display); font-size: 1.05rem; font-style: italic; font-weight: 600; color: var(--sienna); margin-bottom: 16px; }

.result-summary { font-size: 0.97rem; color: var(--dark-text); line-height: 1.75; max-width: none; }

.result-body {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 36px 40px 40px;
}

@media (max-width: 640px) { .result-body { padding: 24px 20px 28px; } }

.result-body h3 { color: var(--midnight); font-size: 1rem; margin-bottom: 14px; }

.result-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }

.result-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; background: var(--parchment); border-radius: var(--r-sm); border: 0.5px solid var(--border); }

.step-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--sage); color: var(--midnight); font-size: 0.78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.step-title { font-size: 0.92rem; font-weight: 600; color: var(--midnight); margin-bottom: 2px; }

.step-desc  { font-size: 0.83rem; color: var(--stone); line-height: 1.5; max-width: none; }

/* Compact 3-up wrapper for reusing .result-tier-card outside the assessment
   results page — used on about.html's tier-snapshot section. */
.tier-snapshot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tier-snapshot-grid .result-tier-card { margin-bottom: 0; }
@media (max-width: 800px) { .tier-snapshot-grid { grid-template-columns: 1fr; } }

/* Tier recommendation — where to start (free / community / next level) */
.result-tier-card {
  border-radius: var(--r-lg);
  padding: 26px 28px;
  margin-bottom: 32px;
  border-left: 3px solid var(--sienna);
}
.result-tier-card.free      { background: var(--parchment); border-left-color: var(--forest-mid); }
.result-tier-card.community { background: var(--sage); border-left-color: var(--forest); }
.result-tier-card.nextlevel { background: var(--sienna-50); border-left-color: var(--sienna); }
.result-tier-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--forest-mid);
  margin-bottom: 10px;
}
.result-tier-headline { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--midnight); margin-bottom: 8px; }
.result-tier-body { font-size: 0.9rem; color: var(--charcoal); line-height: 1.7; margin-bottom: 18px; max-width: none; }

/* What this path means for you — traits */
.result-traits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 32px; }

@media (max-width: 500px) { .result-traits { grid-template-columns: 1fr; } }

.result-trait { padding: 12px 14px; background: var(--sage); border-radius: var(--r-sm); display: flex; align-items: flex-start; gap: 8px; font-size: 0.83rem; color: var(--ink); line-height: 1.45; }

.result-trait::before { content: '✓'; font-weight: 600; color: var(--forest); flex-shrink: 0; }

/* Divider */
.result-divider { height: 0.5px; background: var(--border); margin: 0 0 28px; }

/* Resource pack lead capture */
.result-capture { background: var(--parchment); border-radius: var(--r-md); padding: 28px; border: 0.5px solid var(--border); margin-bottom: 24px; }

.result-capture-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--midnight); margin-bottom: 6px; }

.result-capture-sub   { font-size: 0.88rem; color: var(--stone); margin-bottom: 20px; max-width: none; }

.result-capture-list  { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }

.result-capture-list li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--charcoal); }

.result-capture-list li::before { content: '→'; color: var(--sienna); font-weight: 600; }

/* Retake link */
.retake-wrap { text-align: center; margin-top: 24px; }

.retake-btn { background: none; border: none; font-family: var(--font-body); font-size: 0.85rem; color: var(--stone); cursor: pointer; text-decoration: underline; transition: color 180ms; }

.retake-btn:hover { color: var(--charcoal); }

/* ═══════════════════════════════════════════════════════
   FAQ STRIP
═══════════════════════════════════════════════════════ */
.faq-strip { background: var(--white); padding: 64px 0; }

.faq-strip-inner { max-width: 720px; margin: 0 auto; }

.faq-strip h2 { margin-bottom: 8px; font-size: clamp(1.3rem, 2vw, 1.6rem); }

.faq-strip-sub { font-size: 0.95rem; color: var(--stone); margin-bottom: 32px; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* === START-HERE page-specific === */
/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — v1.1
═══════════════════════════════════════════════════════ */

.btn-ghost-dark { background: rgba(216,237,230,0.1); color: var(--sage); padding: 13px 26px; border: 1.5px solid rgba(216,237,230,0.3); }

.btn-ghost-dark:hover { background: rgba(216,237,230,0.18); border-color: var(--sage); color: var(--white); }






/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */







/* Subtle geometric background texture */



/* AEO executive answer */

/* ═══════════════════════════════════════════════════════
   PATHS SECTION — the three ways to engage
═══════════════════════════════════════════════════════ */
.paths-section { background: var(--parchment); padding: 80px 0 96px; }

.paths-header { text-align: center; margin-bottom: 56px; }

.paths-header h2 { margin-bottom: 12px; }

.paths-header p { font-size: 1rem; color: var(--stone); margin: 0 auto; }

.paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Each path card */
.path-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 200ms, box-shadow 200ms;
}

.path-card:hover { border-color: var(--sage-border); }

.path-card-top {
  padding: 32px 28px 24px;
  flex: 1;
}

.path-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.path-num.green  { background: var(--sage);    color: var(--midnight); }

.path-num.sienna { background: var(--sienna-50); color: var(--sienna); }

.path-num.mid    { background: rgba(77,146,128,0.15); color: var(--forest); }

.path-icon {
  font-size: 2rem;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}

.path-card h3 { font-size: 1.15rem; margin-bottom: 10px; color: var(--midnight); }

.path-card .path-who {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}

.path-card p { font-size: 0.92rem; line-height: 1.7; color: var(--charcoal); max-width: none; }

/* What you'll get list */
.path-gets {
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.path-gets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--charcoal);
  line-height: 1.5;
}

.path-gets li::before { content: '✓'; color: var(--forest); font-weight: 600; flex-shrink: 0; margin-top: 1px; }

.path-card-bottom {
  padding: 20px 28px 28px;
  border-top: 0.5px solid var(--border);
  background: var(--parchment);
}

.path-time {
  font-size: 0.75rem;
  color: var(--stone);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Path card accent borders */
.path-card.path-assess { border-top: 3px solid var(--forest); }

.path-card.path-learn  { border-top: 3px solid var(--forest-mid); }

.path-card.path-demo   { border-top: 3px solid var(--sienna); }

/* ═══════════════════════════════════════════════════════
   QUICK ANSWER SECTION
═══════════════════════════════════════════════════════ */
.qa-section { background: var(--white); padding: 80px 0; }

.qa-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }

.qa-intro h2 { margin-bottom: 16px; }

.qa-intro p  { font-size: 0.97rem; line-height: 1.75; color: var(--charcoal); max-width: none; }

.qa-stack { display: flex; flex-direction: column; gap: 2px; }

.qa-item {
  border-bottom: 0.5px solid var(--border);
}

.qa-btn {
  width: 100%; background: none; border: none;
  padding: 18px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 16px;
  cursor: pointer; text-align: left;
}

.qa-q { font-family: var(--font-body); font-size: 0.97rem; font-weight: 600; color: var(--midnight); line-height: 1.4; }

.qa-icon {
  width: 22px; height: 22px;
  background: var(--sage);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem; font-weight: 300; color: var(--forest);
  transition: background 200ms, transform 200ms;
  line-height: 1;
}

.qa-item.open .qa-icon { background: var(--forest); color: var(--white); transform: rotate(45deg); }

.qa-answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease-out; }

.qa-item.open .qa-answer { max-height: 280px; }

.qa-answer-inner { padding-bottom: 18px; font-size: 0.92rem; line-height: 1.75; color: var(--charcoal); max-width: var(--prose-w); }

/* ═══════════════════════════════════════════════════════
   NOT SURE SECTION — the quiz prompt
═══════════════════════════════════════════════════════ */
.quiz-section { background: var(--midnight); padding: 80px 0; }

.quiz-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.quiz-copy h2 { color: var(--sage); margin-bottom: 16px; }

.quiz-copy > p { color: var(--dark-text); font-size: 1rem; line-height: 1.75; max-width: none; margin-bottom: 28px; }

.quiz-card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 32px;
}

.quiz-card-label {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sienna);
  background: var(--sienna-50); padding: 4px 12px;
  border-radius: 999px; display: inline-block;
  margin-bottom: 18px;
}

.quiz-card h3 { color: var(--midnight); font-size: 1.1rem; margin-bottom: 10px; }

.quiz-card > p { font-size: 0.92rem; color: var(--charcoal); line-height: 1.7; max-width: none; margin-bottom: 24px; }

.quiz-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.quiz-step { display: flex; gap: 12px; align-items: flex-start; }

.quiz-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sage); color: var(--midnight);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

.quiz-step p { font-size: 0.87rem; color: var(--charcoal); line-height: 1.5; max-width: none; }

.quiz-card .form-note { font-size: 0.73rem; color: var(--stone); text-align: center; margin-top: 10px; max-width: none; }

/* ═══════════════════════════════════════════════════════
   WHAT IS CFS — for first-time visitors who want more context
═══════════════════════════════════════════════════════ */
.context-section { background: var(--parchment); padding: 80px 0; }

.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.context-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
}

.context-card-eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: 12px; display: block;
}

.context-card h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--midnight); }

.context-card p  { font-size: 0.92rem; line-height: 1.7; color: var(--charcoal); max-width: none; margin-bottom: 16px; }

.context-card a.context-link {
  font-size: 0.88rem; font-weight: 600; color: var(--forest);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid var(--sage-border);
  padding-bottom: 2px;
  transition: color 180ms, border-color 180ms;
}

.context-card a.context-link:hover { color: var(--midnight); border-color: var(--sienna); }

.context-mantra {
  background: var(--midnight);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.context-mantra blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 600;
  font-style: italic;
  color: var(--sage);
  line-height: 1.35;
  margin-bottom: 16px;
  max-width: none;
}

.context-mantra p { font-size: 0.88rem; color: var(--dark-text); line-height: 1.7; max-width: none; }

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS — two cards, concise
═══════════════════════════════════════════════════════ */
.stories-section { background: var(--white); padding: 72px 0; }

.stories-header { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; }

.stories-rule { flex: 1; height: 0.5px; background: var(--sage-border); }

.stories-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); white-space: nowrap; }

.stories-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.story-card { background: var(--parchment); border: 0.5px solid var(--border); border-left: 3px solid var(--sienna); border-radius: var(--r-md); padding: 26px; }

.story-card blockquote { font-style: italic; font-size: 0.97rem; line-height: 1.7; color: var(--charcoal); margin-bottom: 12px; max-width: none; }

.story-credit { font-size: 0.77rem; color: var(--stone); font-weight: 500; }

/* ═══════════════════════════════════════════════════════
   FOOTER CTA STRIP
═══════════════════════════════════════════════════════ */
.cta-strip { background: var(--sage); padding: 48px 0; text-align: center; }

.cta-strip h2 { color: var(--midnight); margin-bottom: 10px; font-size: clamp(1.3rem, 2.5vw, 1.7rem); }

.cta-strip p { color: var(--ink); font-size: 0.97rem; margin: 0 auto 28px; }

.cta-strip .btn-group { justify-content: center; }

@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }


/* ═══════════════════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════════════════ */

/* ── ANSWER SECTION INTRO IMAGE ─────────────────────────────────────── */
.answer-intro-image {
  width: 100%;
  max-width: 340px;
}
.answer-intro-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-md);
  object-fit: contain;
}

/* ═══════════════════════════════════════════════════════
   BLOG (Eleventy — blog-src/, builds into /blog)
   Blog pages reuse this same stylesheet via a relative path;
   there is no separate blog CSS file. See docs/blog-notes.md.
═══════════════════════════════════════════════════════ */

/* Listing page (/blog/) */
.blog-listing-section { background: var(--parchment); padding: 80px 0 96px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 780px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { background: var(--white); border: 0.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color 200ms, transform 200ms; }
.blog-card:hover { border-color: var(--sage-border); transform: translateY(-2px); }
.blog-card-link { display: block; text-decoration: none; color: inherit; }
.blog-card-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--parchment); }
.blog-card-body { padding: 28px; }
.blog-card-pillar { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest-mid); margin-bottom: 12px; }
.blog-card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--midnight); margin-bottom: 10px; line-height: 1.3; }
.blog-card-excerpt { font-size: 0.9rem; color: var(--charcoal); line-height: 1.65; margin-bottom: 16px; max-width: none; }
.blog-card-meta { font-size: 0.78rem; color: var(--stone); }

/* Post page (/blog/post-slug/) */
.post-article { max-width: var(--prose-w); margin: 0 auto; padding: 80px 24px 96px; }
.post-header { margin-bottom: 40px; border-bottom: 0.5px solid var(--border); padding-bottom: 32px; }
.post-header h1 { margin: 10px 0 16px; }
.post-meta { font-size: 0.85rem; color: var(--stone); display: flex; align-items: center; gap: 8px; }
.post-meta-sep { color: var(--border); }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.post-tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--forest); background: var(--sage); padding: 4px 10px; border-radius: 999px; }

.post-body { font-size: 1.02rem; line-height: 1.8; color: var(--charcoal); }
.post-body h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--midnight); margin: 44px 0 16px; }
.post-body h3 { font-size: 1.1rem; color: var(--forest); margin: 28px 0 10px; }
.post-body p { margin-bottom: 20px; max-width: none; }
.post-body ul, .post-body ol { margin: 0 0 20px 22px; }
.post-body li { margin-bottom: 8px; }
.post-body strong { color: var(--midnight); font-weight: 600; }
.post-body a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--sage-border); text-underline-offset: 3px; }
.post-body a:hover { color: var(--sienna); }
.post-body blockquote { border-left: 3px solid var(--sienna); padding-left: 20px; margin: 24px 0; font-style: italic; color: var(--stone); }

.post-footer { margin-top: 48px; padding-top: 24px; border-top: 0.5px solid var(--border); }
.post-back { font-size: 0.88rem; font-weight: 600; color: var(--forest); text-decoration: none; }
.post-back:hover { color: var(--sienna); }

/* Embedded post figures — illustrations inside .post-body (markdown posts can
   include raw HTML, since Eleventy's default markdown-it has html:true). */
.post-figure { margin: 40px 0; background: var(--parchment); border: 0.5px solid var(--border); border-radius: var(--r-lg); padding: 30px; }
.post-figure-eyebrow { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--forest-mid); margin-bottom: 6px; }
.post-figure-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--midnight); margin-bottom: 22px; }
.post-body figure.post-figure figcaption.post-figure-caption { font-size: 0.83rem; color: var(--stone); line-height: 1.6; margin-top: 18px; margin-bottom: 0; max-width: none; }

/* Figure — five-layer model. Reuses the .path-roadmap-* numbered-step
   pattern already established for start-here.html's hero card. */
.post-body .path-roadmap-body p { margin-bottom: 0; max-width: none; }

/* Figure — two-column "safe to systemize" vs. "use clinical judgment"
   comparison panel. */
.post-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .post-compare-grid { grid-template-columns: 1fr; } }
.post-compare-panel { background: var(--white); border-radius: var(--r-md); padding: 22px 24px; border: 0.5px solid var(--border); }
.post-compare-panel.do { border-color: var(--forest); }
.post-compare-panel.caution { border-color: var(--sienna); }
.post-compare-panel.before  { border-color: var(--border); }
.post-compare-panel.after   { border-color: var(--forest); }
.post-compare-panel.a { border-color: var(--forest); }
.post-compare-panel.b { border-color: var(--sienna); }
.post-compare-panel-label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.post-compare-panel.do .post-compare-panel-label { color: var(--forest); }
.post-compare-panel.caution .post-compare-panel-label { color: var(--sienna); }
.post-compare-panel.before .post-compare-panel-label { color: var(--stone); }
.post-compare-panel.after  .post-compare-panel-label { color: var(--forest); }
.post-compare-panel.a .post-compare-panel-label { color: var(--forest); }
.post-compare-panel.b .post-compare-panel-label { color: var(--sienna); }
.post-compare-list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.post-compare-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; line-height: 1.5; color: var(--charcoal); }
.post-compare-list li svg { flex-shrink: 0; margin-top: 3px; }

/* Stat callout — a single highlighted figure + label, used to lead into a
   cited research point (e.g. the Bain & Company retention figure). */

/* Simple illustrative bar chart — hand-set bar heights via inline style
   (one-off values, not worth a CSS class per figure), shared chrome here. */
.post-bar-chart { display: flex; align-items: flex-end; gap: 28px; height: 160px; padding: 0 8px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.post-bar-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; }
.post-bar { width: 100%; max-width: 88px; border-radius: 6px 6px 0 0; }
.post-bar.baseline { background: var(--sage-border); }
.post-bar.lift { background: linear-gradient(to top, var(--forest) 0%, var(--forest) 55%, var(--sage) 55%, var(--sage) 100%); }
.post-bar-value { font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: var(--midnight); margin-bottom: 6px; }
.post-bar-labels { display: flex; gap: 28px; padding: 0 8px; }
.post-bar-labels .post-bar-col-label { flex: 1; text-align: center; font-size: 0.78rem; color: var(--stone); max-width: 130px; }
.post-figure-source { font-size: 0.76rem; color: var(--stone); margin-top: 4px; }
.post-figure-source a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--sage-border); text-underline-offset: 2px; }