/* ============================================
   LYME TUTOR — Healing Garden Design System v2
   ============================================ */

:root {
  /* ══ FOREST & AMBER — complete tonal system ══ */

  /* Leaf scale */
  --green-900:  #0D1A0C;   /* deepest                   */
  --green-800:  #162A14;   /* very dark                 */
  --green-700:  #22381C;   /* hero / footer dark        */
  --green-600:  #3A6835;   /* deep leaf                 */
  --green-500:  #5E9455;   /* PRIMARY — Leaf            */
  --green-400:  #78AD70;   /* leaf light                */
  --green-300:  #96C490;   /* mid green                 */
  --green-200:  #BDD9B8;   /* soft green                */
  --green-100:  #D8EDD5;   /* pale green                */
  --green-50:   #EDF6EB;   /* lightest green tint       */

  /* Walnut scale — warm brown accent */
  --walnut-900: #1E110A;   /* darkest walnut            */
  --walnut-700: #3A2218;   /* dark walnut               */
  --walnut-500: #5C3D2E;   /* PRIMARY walnut            */
  --walnut-400: #7A5444;   /* walnut mid                */
  --walnut-300: #A07868;   /* warm brown                */
  --walnut-100: #EAD9D0;   /* pale walnut               */
  --walnut-50:  #F5EEEA;   /* lightest walnut tint      */

  /* Amber scale — dark to pale */
  --amber-700:  #7A4E00;   /* darkest amber             */
  --amber-600:  #A06800;   /* deep amber                */
  --amber-500:  #C08010;   /* PRIMARY amber             */
  --amber-400:  #D4950A;   /* warm amber                */
  --amber-300:  #EDB030;   /* bright amber / hero em    */
  --amber-200:  #F5D878;   /* light amber               */
  --amber-100:  #F5E8C0;   /* pale amber — section bg   */
  --amber-50:   #FBF7ED;   /* lightest amber tint       */

  /* ── Semantic aliases ── */
  --forest:      var(--green-700);
  --moss:        var(--green-500);
  --moss-light:  var(--green-400);
  --moss-pale:   var(--green-100);
  --moss-dark:   var(--green-600);
  --walnut:      var(--walnut-500);
  --walnut-pale: var(--walnut-50);
  --brown:       var(--amber-500);
  --brown-light: var(--amber-400);
  --brown-pale:  var(--amber-100);
  --amber-hero:  var(--amber-300);

  /* ── Section surfaces ── */
  --cream:       #FFFFFF;
  --cream-deep:  var(--green-50);
  --cream-card:  #FFFFFF;
  --sage-tint:   var(--green-50);
  --sage-mid:    var(--green-100);
  --amber-tint:  var(--amber-100);
  --amber-mid:   var(--amber-200);
  --sage-border: rgba(94,148,85,.22);
  --amber-border: rgba(192,128,16,.22);

  /* ── Text ── */
  --text-dark:   #3A6835;   /* deep leaf — main headings */
  --text-mid:    #3D3530;   /* warm dark — body text */
  --text-light:  #6A7268;
  --border:      #E0E6DC;
  --white:       #FFFFFF;
  --sky-tint:    var(--green-50);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-quote:   'Inter', system-ui, sans-serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --shadow-sm:  0 2px 12px rgba(44,36,25,.07);
  --shadow-md:  0 6px 32px rgba(44,36,25,.10);
  --shadow-lg:  0 16px 56px rgba(44,36,25,.12);

  --max-content: 760px;
  --max-wide:    1100px;
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 17px; }
body {
  font-family: var(--font-body);
  font-size: 1rem;
  background: #FFFFFF;
  color: var(--text-dark);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--moss); text-decoration: none; }
a:hover { color: var(--moss-light); }

/* Body content links — inline within paragraphs */
.why-text a, .section p a, .card p a, .herb-card p a, .overlap-note p a,
.testing-item p a, .support-story p a, .herbs-safety-box p a, .herbs-subpage-text p a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(74,103,65,.4);
  font-weight: 500;
}
.why-text a:hover, .section p a:hover, .card p a:hover, .herb-card p a:hover,
.overlap-note p a:hover, .testing-item p a:hover, .support-story p a:hover,
.herbs-safety-box p a:hover, .herbs-subpage-text p a:hover {
  text-decoration-color: var(--moss);
  color: var(--moss);
}

/* Replaces all inline padding-top on body */
.page-body { padding-top: 0; }

/* ---- UTILITY ---- */
.container { width: 100%; max-width: var(--max-wide); margin: 0 auto; padding: 0 2rem; }
.container--narrow { max-width: var(--max-content); margin: 0 auto; padding: 0 2rem; }
.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; }

/* ============================================
   NAVIGATION (consistent across all pages)
   ============================================ */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}

/* Scrolled — white with blur */
#site-nav.scrolled {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* Nav logo — white on hero, green when scrolled */
#site-nav:not(.scrolled) .nav-logo {
  color: rgba(255,255,255,.95);
  transition: color .4s ease;
}
/* Nav links — white on hero */
#site-nav:not(.scrolled) .nav-links li a {
  color: rgba(255,255,255,.88);
}
/* Burger icon — white lines on hero */
#site-nav:not(.scrolled) .nav-burger span {
  background: rgba(255,255,255,.9);
}
#site-nav:not(.scrolled) .nav-links li a:hover {
  color: #fff;
}
#site-nav:not(.scrolled) .nav-links li a::after {
  background: var(--amber-300);
}
#site-nav:not(.scrolled) .nav-links li a.active {
  color: #fff;
}
#site-nav:not(.scrolled) .nav-links li a.active::after {
  background: var(--amber-300);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 2rem;
  height: 70px;
  gap: 1rem;
}

.nav-logo {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--green-600);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.nav-logo span {
  color: var(--amber-300);
  font-weight: 700;
  font-style: italic;
}
.nav-logo:hover { opacity: .88; text-decoration: none; }

/* Footer variant — light on dark */
#site-footer .nav-logo { color: var(--green-200); }
#site-footer .nav-logo span { color: var(--amber-300); }
#site-footer .nav-logo:hover { opacity: .92; }
.footer-logo { font-size: 1.85rem; }

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 0;
}

.nav-links li a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-dark);
  padding: .45rem .82rem;
  white-space: nowrap;
  display: block;
  position: relative;
  transition: color .22s;
  text-decoration: none;
}

/* Animated underline — grows from left on hover */
.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 0; left: .82rem;
  width: 0;
  height: 2px;
  background: var(--amber-500);
  border-radius: 2px;
  transition: width .25s ease;
}
.nav-links li a:hover { color: var(--green-600); }
.nav-links li a:hover::after { width: calc(100% - 1.64rem); }

/* Active state — full underline */
.nav-links li a.active {
  color: var(--green-600);
  font-weight: 600;
}
.nav-links li a.active::after {
  width: calc(100% - 1.64rem);
  background: var(--green-400);
}

.nav-cta {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  background: var(--moss) !important;
  padding: .5rem 1.25rem !important;
  border-radius: 100px !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  box-shadow: 0 2px 12px rgba(94,148,85,.3) !important;
}
.nav-cta:hover {
  background: var(--moss-light) !important;
  color: var(--white) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(94,148,85,.38) !important;
}

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  flex-shrink: 0;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}

@media (max-width: 1040px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed;
    top: 70px; left: 0; right: 0;
    z-index: 99;
    background: #FFFFFF;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 2rem 2rem;
    gap: .1rem;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform .3s, opacity .3s;
    pointer-events: none;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
  .nav-links li { width: 100%; }
  .nav-links li a { padding: .68rem .5rem; font-size: .98rem; width: 100%; }
  .nav-cta { margin-top: .5rem; display: inline-block !important; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .95rem;
  padding: .8rem 1.6rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  text-decoration: none;
  line-height: 1;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--green-500);
  color: #fff;
  box-shadow: 0 4px 24px rgba(94,148,85,.32);
  font-weight: 600;
  letter-spacing: .01em;
}
.btn--primary:hover {
  background: var(--green-400);
  color: #fff;
  box-shadow: 0 10px 36px rgba(94,148,85,.45);
  transform: translateY(-3px);
}

.btn--amber {
  background: var(--amber-500);
  color: #fff;
  box-shadow: 0 4px 24px rgba(192,128,16,.32);
  font-weight: 600;
}
.btn--amber:hover {
  background: var(--amber-400);
  color: #fff;
  box-shadow: 0 10px 32px rgba(192,128,16,.42);
  transform: translateY(-3px);
}

.btn--outline {
  background: transparent;
  color: var(--green-500);
  border: 1.5px solid var(--green-500);
}
.btn--outline:hover {
  background: var(--green-50);
  color: var(--green-600);
}

.btn--outline-amber {
  background: transparent;
  color: var(--amber-600);
  border: 1.5px solid var(--amber-500);
}
.btn--outline-amber:hover {
  background: var(--amber-50);
}

.btn--ghost {
  background: var(--green-50);
  color: var(--text-mid);
  border: 1px solid var(--sage-border);
}
.btn--ghost:hover {
  background: var(--green-100);
  color: var(--green-600);
}

.btn--light {
  background: rgba(255,255,255,.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px);
}
.btn--light:hover {
  background: rgba(255,255,255,.25);
  color: #fff;
  border-color: rgba(255,255,255,.55);
}

/* ============================================
   HERO
   ============================================ */
#hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--forest);
  padding-top: 70px;
  position: relative;
  overflow: hidden;
}
#hero::before {
  content: '';
  position: absolute;
  top: -15%; right: -10%;
  width: 50vw; height: 60vw;
  max-width: 650px; max-height: 700px;
  background: radial-gradient(ellipse at 60% 40%, rgba(94,148,85,.35) 0%, transparent 70%);
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  pointer-events: none;
}
#hero::after {
  content: '';
  position: absolute;
  bottom: -5%; left: -8%;
  width: 35vw; height: 35vw;
  max-width: 450px; max-height: 450px;
  background: radial-gradient(ellipse, rgba(192,128,16,.18) 0%, transparent 65%);
  border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 3rem 2rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(180,224,160,.8);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1.5px;
  background: rgba(180,224,160,.8);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 1.6rem;
  letter-spacing: -.03em;
}
.hero-h1 em { font-style: italic; font-weight: 400; color: var(--amber-hero); }

.hero-text {
  font-size: 1.15rem;
  color: rgba(255,255,255,.80);
  line-height: 1.78;
  max-width: 500px;
  margin-bottom: 2rem;
  font-weight: 400;
}

.hero-microcopy {
  font-size: .84rem;
  color: rgba(255,255,255,.42);
  font-style: italic;
  margin-top: 0;
}

/* Right column — path cards */
.hero-visual {
  display: flex;
  align-items: stretch;
}

@media (max-width: 760px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 5rem 1.5rem 4rem;
  }
}

/* ============================================
   SECTION BASE
   ============================================ */
.section { padding: 6rem 0; }
.section--alt  { background: var(--sage-tint); }
.section--warm { background: var(--amber-tint); }
.section--moss { background: var(--sage-mid); }

.section-label {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 600;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--moss);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--green-600);
  margin-bottom: 1.1rem;
  letter-spacing: -.02em;
}
.section-title em { font-style: normal; font-weight: 800; color: var(--green-500); }
.section--warm .section-title em,
.section--warm .section-title em { color: var(--amber-600); }

.section-intro {
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.82;
  max-width: 600px;
  margin-bottom: 2.5rem;
}

/* ============================================
   CARDS (shared)
   ============================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.card {
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--moss-pale);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-top-color: var(--moss); }

.card-icon {
  width: 44px; height: 44px;
  background: var(--moss-pale);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.card-icon svg { width: 22px; height: 22px; stroke: var(--moss); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--text-dark); margin-bottom: .6rem; line-height: 1.3; }
.card p { font-size: .96rem; color: var(--text-mid); line-height: 1.75; margin-bottom: 1.2rem; }

.card-link {
  font-size: .9rem;
  font-weight: 500;
  color: var(--moss);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.card-link:hover { gap: .5rem; }
.card-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .2s; }
.card-link:hover svg { transform: translateX(3px); }

/* ============================================
   WHY YOU FEEL LOST
   ============================================ */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-top: 3rem; }
.why-text p { color: var(--text-mid); line-height: 1.85; margin-bottom: 1.2rem; font-size: 1rem; }
.why-text p:last-child { margin-bottom: 0; }

.why-quote {
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-left: 3px solid var(--brown);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.75rem 2rem;
}
.why-quote blockquote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-dark);
  line-height: 1.65;
  margin-bottom: .75rem;
}
.why-quote cite { font-size: .82rem; color: var(--text-light); font-style: normal; }

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

/* ============================================
   SYMPTOM PATTERNS
   ============================================ */
.disclaimer-box {
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  margin-bottom: 2.5rem;
  font-size: .9rem;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  line-height: 1.65;
}
.disclaimer-box svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke-width: 1.8; margin-top: .15rem; }

.disclaimer-box--moss {
  background: var(--green-50);
  border: 1px solid var(--sage-border);
  border-left: 3px solid var(--green-500);
  color: var(--green-600);
}
.disclaimer-box--moss svg { stroke: var(--green-500); }
.disclaimer-box--moss strong { color: var(--green-700); }
.disclaimer-box--moss svg { stroke: var(--moss); }

.disclaimer-box--brown {
  background: var(--amber-50);
  border: 1px solid var(--amber-border);
  border-left: 3px solid var(--amber-500);
  color: var(--amber-700);
}
.disclaimer-box--brown svg { stroke: var(--amber-500); }
.disclaimer-box--brown strong { color: var(--amber-700); }
.disclaimer-box--brown svg { stroke: var(--brown); }

.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.system-item {
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--moss-pale);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: border-top-color .2s;
}
.system-item:hover { border-top-color: var(--moss); }
.system-item h4 {
  font-size: .83rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--moss);
  margin-bottom: .7rem;
}
.system-item ul { list-style: none; padding: 0; }
.system-item ul li {
  font-size: .9rem;
  color: var(--text-mid);
  padding: .2rem 0;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.55;
}
.system-item ul li::before { content: '—'; color: var(--amber-400); flex-shrink: 0; font-size: .8rem; margin-top: .05rem; }

.tool-cta-box {
  background: var(--sage-tint);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.tool-cta-box p { font-size: .96rem; color: var(--text-mid); max-width: 460px; line-height: 1.72; }
.tool-cta-box strong { font-family: var(--font-display); font-size: 1.15rem; display: block; color: var(--text-dark); margin-bottom: .4rem; }

/* ============================================
   COINFECTIONS (new section)
   ============================================ */
.coinfections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.coinfection-card {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.6);
  border-top: 3px solid var(--moss-pale);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.5rem;
  transition: box-shadow .25s, transform .2s, border-top-color .2s;
}
.coinfection-card:hover { border-top-color: var(--moss); }
.coinfection-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-top-color: var(--moss); }

.coinfection-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .25rem;
  line-height: 1.3;
}
.coinfection-type {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--moss);
  background: var(--sage-tint);
  border: 1px solid var(--sage-border);
  border-radius: 100px;
  padding: .2rem .7rem;
  margin-bottom: .9rem;
  display: inline-block;
}
.coinfection-type--parasitic {
  color: var(--brown);
  background: var(--amber-tint);
  border-color: var(--amber-border);
}
.coinfection-card p { font-size: .9rem; color: var(--text-mid); line-height: 1.7; }

/* ============================================
   OVERLAP
   ============================================ */
.overlap-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.overlap-tag {
  font-size: .82rem;
  font-weight: 500;
  color: var(--brown);
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-radius: 100px;
  padding: .35rem .95rem;
  transition: background .2s;
}
.overlap-tag:hover { background: var(--amber-mid); }

.overlap-note {
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-left: 3px solid var(--brown);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}
.overlap-note p { font-family: var(--font-quote); font-style: italic; font-size: .98rem; color: var(--text-mid); line-height: 1.82; }
.overlap-note strong { color: var(--text-dark); font-style: normal; }

/* ============================================
   TESTING
   ============================================ */
.testing-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.testing-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-left: 3px solid var(--moss-pale);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  transition: border-left-color .2s;
}
.testing-item:hover { border-left-color: var(--moss); }
.testing-item h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--text-dark); margin-bottom: .6rem; }
.testing-item p { font-size: .92rem; color: var(--text-mid); line-height: 1.78; }
@media (max-width: 620px) { .testing-items { grid-template-columns: 1fr; } }

/* ============================================
   SUPPORT & HOPE
   ============================================ */
.support-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.support-story p { color: var(--text-mid); line-height: 1.85; margin-bottom: 1.25rem; font-size: 1rem; }
.support-story p:last-of-type { margin-bottom: 0; }
.support-story .story-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .9rem; color: var(--moss); margin-top: 1.5rem; font-weight: 500;
}
.support-story .story-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.support-disclaimer { background: var(--sage-tint); border: 1px solid var(--sage-border); border-left: 3px solid var(--moss); border-radius: var(--radius-lg); padding: 2rem; }
.support-disclaimer h3 { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--text-light); margin-bottom: 1rem; }
.support-disclaimer ul { list-style: none; padding: 0; }
.support-disclaimer ul li { font-size: .92rem; color: var(--text-mid); padding: .5rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: .6rem; line-height: 1.65; }
.support-disclaimer ul li:last-child { border-bottom: none; }
.support-disclaimer ul li::before { content: ''; width: 6px; height: 6px; background: var(--moss-pale); border: 1.5px solid var(--moss); border-radius: 50%; flex-shrink: 0; margin-top: .48rem; }

@media (max-width: 720px) { .support-inner { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ============================================
   LEARNING PREVIEW (softened forest gradient)
   ============================================ */
#learning-preview {
  background: linear-gradient(145deg, var(--green-800) 0%, var(--green-700) 45%, var(--green-800) 100%);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}
#learning-preview::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 50vw; height: 60vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(ellipse, rgba(107,143,97,.18) 0%, transparent 65%);
  pointer-events: none;
  border-radius: 50% 60% 40% 50%;
}
#learning-preview::after {
  content: '';
  position: absolute;
  bottom: -10%; left: -5%;
  width: 35vw; height: 35vw;
  max-width: 400px;
  background: radial-gradient(ellipse, rgba(160,120,80,.1) 0%, transparent 70%);
  pointer-events: none;
}
#learning-preview .container { position: relative; z-index: 2; }
#learning-preview .section-label { color: rgba(212,227,206,.68); }
#learning-preview .section-label::before { background: rgba(212,227,206,.68); }
#learning-preview .section-title { color: #FFFFFF; }
#learning-preview .section-intro { color: rgba(247,243,236,.65); }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 3rem;
}

/* preview cards (non-linked, on index) */
.module-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-top: 2px solid rgba(240,176,48,.3);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}

/* linked cards (on learning.html) */
a.module-card {
  display: block;
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .2s;
}
a.module-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-3px);
}

.module-num {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber-hero);
  margin-bottom: .75rem;
}
.module-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--cream); line-height: 1.35; margin-bottom: .6rem; }
.module-card p { font-size: .88rem; color: rgba(247,243,236,.6); line-height: 1.65; margin: 0; }

.learning-preview-cta { text-align: center; }

/* ============================================
   LEARNING HUB (learning.html full page)
   ============================================ */
.learning-hub-hero {
  background: var(--green-700);
  padding: 5.5rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.learning-hub-hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -8%;
  width: 50vw; height: 55vw;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(ellipse at 60% 40%, rgba(94,148,85,.38) 0%, transparent 68%);
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  pointer-events: none;
}
.learning-hub-hero::after {
  content: '';
  position: absolute;
  bottom: -10%; left: -5%;
  width: 35vw; height: 35vw;
  max-width: 400px;
  background: radial-gradient(ellipse, rgba(192,128,16,.15) 0%, transparent 65%);
  pointer-events: none;
}
.learning-hub-hero .container--narrow { position: relative; z-index: 2; }

/* Text on dark hub hero */
.learning-hub-hero .section-label {
  color: rgba(180,224,160,.8);
}
.learning-hub-hero .section-label::before { background: rgba(180,224,160,.8); }
.learning-hub-hero .section-title { color: #FFFFFF; }
.learning-hub-hero .section-intro { color: rgba(255,255,255,.72); }
.learning-hub-hero .disclaimer-box--moss {
  background: rgba(255,255,255,.08);
  border-color: rgba(180,224,160,.25);
  color: rgba(180,224,160,.9);
}
.learning-hub-hero .disclaimer-box--moss svg { stroke: rgba(180,224,160,.9); }

.learning-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.learning-module-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-top: 2px solid rgba(237,176,48,.35);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
  text-decoration: none;
}
.learning-module-card:hover {
  background: rgba(255,255,255,.12);
  border-top-color: var(--amber-300);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.learning-module-card .module-num {
  color: var(--amber-300);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.learning-module-card h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.3;
}
.learning-module-card p {
  font-size: .92rem;
  color: rgba(255,255,255,.62);
  line-height: 1.72;
  flex: 1;
}
.learning-module-card .card-link {
  color: rgba(180,224,160,.85);
  margin-top: .5rem;
  align-self: flex-start;
  font-size: .88rem;
}
.learning-module-card .card-link:hover { color: #fff; }
.learning-module-card .card-link svg { stroke: currentColor; }

/* Learning section on learning.html — dark background */
section[aria-label="Learning modules"] {
  background: linear-gradient(160deg, var(--green-800) 0%, var(--green-700) 50%, var(--green-800) 100%);
  padding: 5rem 0 6rem;
  position: relative;
}
section[aria-label="Learning modules"]::before {
  content: '';
  position: absolute;
  bottom: -10%; right: -5%;
  width: 40vw; height: 40vw;
  max-width: 500px;
  background: radial-gradient(ellipse, rgba(192,128,16,.1) 0%, transparent 65%);
  pointer-events: none;
}

/* ============================================
   MODULE PAGES
   ============================================ */
.module-page-hero {
  background: var(--green-700);
  padding: 4.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.module-page-hero::before {
  content: '';
  position: absolute;
  top: -20%; right: -10%;
  width: 45vw; height: 50vw;
  max-width: 520px;
  background: radial-gradient(ellipse at 60% 40%, rgba(94,148,85,.4) 0%, transparent 68%);
  border-radius: 55% 45% 65% 35%;
  pointer-events: none;
}
.module-page-hero .container--narrow { position: relative; z-index: 2; }

/* Text in module hero */
.module-page-hero .module-breadcrumb { color: rgba(255,255,255,.45); }
.module-page-hero .module-breadcrumb a { color: rgba(180,224,160,.75); }
.module-page-hero .module-breadcrumb a:hover { color: rgba(180,224,160,1); }
.module-page-hero .module-num-large { color: var(--amber-300); }
.module-page-hero .module-num-large::before { background: var(--amber-300); }
.module-page-hero .section-title { color: #FFFFFF; }
.module-page-hero .section-title em { color: var(--amber-300); }
.module-page-hero .module-hero-intro { color: rgba(255,255,255,.72); }

.module-breadcrumb {
  font-size: .83rem;
  color: var(--text-light);
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.module-breadcrumb a { color: var(--moss); }

/* Intro paragraph on module/hub hero — replaces inline styles */
.module-hero-intro {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.82;
  max-width: 600px;
}

/* WIP box with top spacing */
.module-wip-spaced {
  margin-top: 2.5rem;
}

.module-num-large {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: .6rem;
  display: flex; align-items: center; gap: .4rem;
}
.module-num-large::before { content: ''; display: inline-block; width: 16px; height: 1px; background: var(--moss); }

.module-content {
  padding: 4rem 0 6rem;
  background: #FFFFFF;
}

.module-content h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--green-600); margin-bottom: .9rem; line-height: 1.3; }
.module-content h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--green-500); margin: 2rem 0 .7rem; line-height: 1.35; }

.module-content p {
  font-size: 1rem;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 1.3rem;
  max-width: 660px;
}

.module-disclaimer {
  background: var(--green-50);
  border: 1px solid var(--sage-border);
  border-left: 3px solid var(--green-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  font-size: .9rem;
  color: var(--green-600);
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  line-height: 1.65;
  margin-bottom: 2.5rem;
}
.module-disclaimer svg { width: 17px; height: 17px; flex-shrink: 0; stroke: var(--green-500); fill: none; stroke-width: 1.8; margin-top: .15rem; }

.module-learn-list { list-style: none; padding: 0; margin-bottom: 2rem; }
.module-learn-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .97rem; color: var(--text-mid); line-height: 1.68;
  padding: .55rem 0; border-bottom: 1px solid var(--border);
  max-width: 640px;
}
.module-learn-list li:last-child { border-bottom: none; }
.module-learn-list li::before { content: ''; width: 7px; height: 7px; background: var(--amber-100); border: 1.5px solid var(--amber-500); border-radius: 50%; flex-shrink: 0; margin-top: .42rem; }

.module-wip {
  background: var(--amber-50);
  border: 1px solid var(--amber-border);
  border-left: 3px solid var(--amber-400);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  margin-top: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.module-wip p { font-size: .95rem; color: var(--amber-700); margin: 0; max-width: 500px; line-height: 1.72; }
.module-wip strong { color: var(--amber-700); display: block; margin-bottom: .3rem; }

.module-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.5rem;
  border-top: 2px solid var(--green-50);
  margin-top: 3rem;
  flex-wrap: wrap;
  background: var(--green-50);
  margin-left: -2rem; margin-right: -2rem;
  padding-left: 2rem; padding-right: 2rem;
  padding-bottom: 2rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.module-nav a {
  font-size: .92rem;
  font-weight: 600;
  color: var(--green-600);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  transition: background .2s, color .2s;
}
.module-nav a:hover {
  background: var(--green-100);
  color: var(--green-700);
}
.module-nav a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ============================================
   HERBAL APPROACHES SECTION
   ============================================ */
.herbs-framework-box {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 3rem;
  margin-bottom: 0;
}
.herbs-framework-text h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .9rem;
  line-height: 1.3;
}
.herbs-framework-label {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brown);
  margin-bottom: .5rem;
}
.herbs-framework-text p { color: var(--text-mid); line-height: 1.85; margin-bottom: 1.1rem; font-size: .98rem; }
.herbs-framework-text p:last-child { margin-bottom: 0; }

.herbs-framework-aside {
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-top: 3px solid var(--brown);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}
.herbs-aside-label {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--brown);
  margin-bottom: 1rem;
  display: block;
}
.herbs-aside-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.25rem;
}
.herbs-aside-list li {
  font-size: .9rem;
  color: var(--text-mid);
  padding: .38rem 0;
  border-bottom: 1px solid rgba(122,92,61,.12);
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  line-height: 1.55;
}
.herbs-aside-list li:last-child { border-bottom: none; }
.herbs-aside-list li::before { content: '–'; color: var(--brown-light); flex-shrink: 0; }
.herbs-aside-note { font-size: .82rem; color: var(--text-light); font-style: italic; line-height: 1.65; }

/* Herb cards grid */
.herbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.herb-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-top: 3px solid var(--brown-pale);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  transition: box-shadow .25s, transform .2s, border-top-color .2s;
}
.herb-card:hover { border-top-color: var(--brown); }
.herb-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-top-color: var(--brown); }

.herb-card-top { margin-bottom: 1rem; }
.herb-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--amber-700);
  background: var(--amber-100);
  border: 1px solid var(--amber-border);
  border-radius: 100px;
  padding: .25rem .82rem;
  margin-bottom: .6rem;
}
.herb-tag--green {
  color: var(--green-600);
  background: var(--green-50);
  border-color: var(--sage-border);
}
.herb-card h4 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .2rem;
  line-height: 1.25;
}
.herb-latin {
  font-size: .8rem;
  color: var(--text-light);
  font-style: italic;
  display: block;
  margin-bottom: .75rem;
}
.herb-card p { font-size: .9rem; color: var(--text-mid); line-height: 1.78; margin-bottom: .75rem; }
.herb-card p:last-child { margin-bottom: 0; }
.herb-note {
  font-size: .82rem !important;
  color: var(--text-light) !important;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  margin-top: .5rem;
}

/* Also explored row */
.herbs-also-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.herbs-also-item {
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
}
.herbs-also-item strong {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: .35rem;
}
.herbs-also-item span { font-size: .85rem; color: var(--text-mid); line-height: 1.6; }

/* Safety box */
.herbs-safety-box {
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-left: 3px solid var(--brown);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 2rem 2.25rem;
  margin-bottom: 2rem;
}
.herbs-safety-box h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .9rem;
}
.herbs-safety-box p { font-size: .95rem; color: var(--text-mid); line-height: 1.8; margin-bottom: .75rem; }
.herbs-safety-list {
  list-style: none;
  padding: 0;
  margin-top: .75rem;
}
.herbs-safety-list li {
  font-size: .9rem;
  color: var(--text-mid);
  padding: .4rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.65;
}
.herbs-safety-list li:last-child { border-bottom: none; }
.herbs-safety-list li::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brown-pale);
  border: 1.5px solid var(--brown-light);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: .48rem;
}

/* Subpage CTA box */
.herbs-subpage-cta {
  background: linear-gradient(135deg, var(--amber-tint) 0%, #FFFFFF 100%);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.herbs-subpage-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--moss);
  margin-bottom: .4rem;
}
.herbs-subpage-text h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .6rem;
}
.herbs-subpage-text p { font-size: .9rem; color: var(--text-mid); line-height: 1.75; }
.herbs-subpage-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  color: var(--moss);
}
.herbs-subpage-badge svg { stroke: var(--moss); opacity: .6; }
.herbs-subpage-badge span {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--moss);
  opacity: .7;
}

/* Responsive herbs */
@media (max-width: 860px) {
  .herbs-framework-box { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
  .herbs-grid { grid-template-columns: 1fr; }
  .herbs-also-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .herbs-also-grid { grid-template-columns: 1fr; }
}

/* ============================================
   FOOTER — rebuilt
   ============================================ */
#site-footer {
  margin-top: 0;
}

/* Closing statement band */
.footer-closing {
  background: linear-gradient(145deg, #1D3820 0%, #263F20 50%, #1D3820 100%);
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.footer-closing::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 40vw; height: 40vw;
  max-width: 400px;
  background: radial-gradient(ellipse, rgba(107,143,97,.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.footer-closing-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.28rem;
  color: rgba(247,243,236,.88);
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto .75rem;
  position: relative;
  z-index: 2;
}
.footer-closing-credit {
  font-size: .85rem;
  color: rgba(247,243,236,.55);
  letter-spacing: .06em;
  position: relative;
  z-index: 2;
}

/* Main footer body */
.footer-body {
  background: #1D3820;
  padding: 4rem 0 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.85fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-col-title {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(212,227,206,.90);
  margin-bottom: 1.25rem;
}
.footer-col--brand .footer-logo { display: inline-block; margin-bottom: 1rem; }
.footer-mission {
  font-size: .92rem;
  color: rgba(247,243,236,.88);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.footer-built-by {
  font-size: .84rem;
  color: rgba(247,243,236,.72);
  line-height: 1.7;
}
.footer-built-by a { color: rgba(212,227,206,.92); text-decoration: none; }
.footer-built-by a:hover { color: rgba(212,227,206,.95); }

.footer-nav-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .05rem;
}
.footer-nav-list li a {
  font-size: .92rem;
  color: rgba(247,243,236,.88);
  text-decoration: none;
  padding: .42rem 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: color .2s;
  line-height: 1.4;
}
.footer-nav-list li a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.footer-link--soon { opacity: .7; }

.footer-badge {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .15rem .55rem;
  border-radius: 100px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.55);
  flex-shrink: 0;
}
.footer-badge--soon {
  background: rgba(237,176,48,.15);
  color: var(--amber-300);
}

.footer-disclaimer-block p {
  font-size: .85rem;
  color: rgba(247,243,236,.78);
  line-height: 1.75;
  margin-bottom: .6rem;
}
.footer-disclaimer-block p:last-child { margin-bottom: 0; }

/* Footer bottom bar */
.footer-bottom {
  background: #152A17;
  padding: 1.25rem 0;
}
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: .84rem;
  color: rgba(247,243,236,.68);
  line-height: 1.6;
}
.footer-bottom-right {
  font-size: .84rem;
  color: rgba(247,243,236,.55) !important;
}

/* Footer responsive */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-closing-quote { font-size: 1rem; }
  .footer-bottom-inner { flex-direction: column; gap: .5rem; text-align: center; }
}



/* Spacing utilities */
.mb-0   { margin-bottom: 0 !important; }
.mb-sm  { margin-bottom: 1rem !important; }
.mt-sm  { margin-top: 2rem !important; }

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================
   SECTION ICON LABELS (spirit enhancement)
   ============================================ */
.section-label--icon {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 600;
  margin-bottom: .75rem;
}
.section-label--icon::before { display: none; }
.section-label--icon svg {
  width: 16px; height: 16px;
  stroke: var(--moss); fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Section accent divider */
.section-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0 2.5rem;
  opacity: .35;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--moss);
}
.section-divider-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brown-light);
}

/* ============================================
   PRE-FOOTER CTA BAND
   ============================================ */
.prefooter-cta {
  background: linear-gradient(140deg, var(--green-50) 0%, #FFFFFF 50%, var(--amber-50) 100%);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.prefooter-cta::before {
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 50vw; height: 60vw;
  max-width: 500px;
  background: radial-gradient(ellipse, rgba(74,103,65,.1) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}
.prefooter-cta .container { position: relative; z-index: 2; }
.prefooter-label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--moss);
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.prefooter-label::before {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--moss);
}
.prefooter-label::after {
  content: '';
  display: inline-block;
  width: 16px; height: 1px;
  background: var(--moss);
}
.prefooter-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .75rem;
  line-height: 1.25;
}
.prefooter-sub {
  font-size: 1rem;
  color: var(--text-mid);
  margin-bottom: 2.5rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.75;
}
.prefooter-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.prefooter-btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.8rem;
  border-radius: var(--radius-lg);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, background .2s;
  border: 1.5px solid transparent;
}
.prefooter-btn:hover { transform: translateY(-3px); }
.prefooter-btn--primary {
  background: var(--moss);
  color: var(--white);
  box-shadow: 0 4px 20px rgba(74,103,65,.3);
}
.prefooter-btn--primary:hover {
  background: var(--moss-light);
  color: var(--white);
  box-shadow: 0 8px 28px rgba(74,103,65,.35);
}
.prefooter-btn--secondary {
  background: var(--white);
  color: var(--moss);
  border-color: rgba(74,103,65,.3);
  box-shadow: var(--shadow-sm);
}
.prefooter-btn--secondary:hover {
  background: var(--moss-pale);
  border-color: var(--moss);
}
.prefooter-btn--tertiary {
  background: transparent;
  color: var(--brown);
  border-color: rgba(122,92,61,.3);
}
.prefooter-btn--tertiary:hover {
  background: var(--brown-pale);
  border-color: var(--brown);
}
.prefooter-btn svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}
.prefooter-btn:hover svg { transform: translateX(3px); }
@media (max-width: 560px) {
  .prefooter-buttons { flex-direction: column; align-items: center; }
  .prefooter-btn { width: 100%; max-width: 320px; justify-content: center; }
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 200;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--moss);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(74,103,65,.35);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, background .2s;
  pointer-events: none;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.back-to-top:hover { background: var(--moss-light); transform: translateY(-2px); }
.back-to-top svg {
  width: 18px; height: 18px;
  stroke: var(--white); fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 560px) {
  .back-to-top { bottom: 1.25rem; right: 1.25rem; }
}

/* ============================================
   STRONGER BUTTON FOCUS + HOVER STATES
   ============================================ */
.btn:focus-visible {
  outline: 2.5px solid var(--moss);
  outline-offset: 4px;
}
.btn--primary { 
  box-shadow: 0 4px 20px rgba(74,103,65,.28), 0 1px 3px rgba(74,103,65,.15);
}
.btn--primary:hover { 
  box-shadow: 0 8px 32px rgba(74,103,65,.38), 0 2px 6px rgba(74,103,65,.2);
}
a:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================
   LEARNING PAGE FOOTER (modules list style)
   ============================================ */
.footer-nav-list--modules li a {
  font-size: .84rem !important;
  padding: .35rem 0 !important;
}

/* ============================================
   UNIFIED FOOTER (pages without closing band)
   ============================================ */
.footer-simple-top {
  background: var(--green-800);
  padding: 2rem 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-simple-top p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(255,255,255,.65);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.75;
}
.footer-simple-top p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: .95rem;
  color: rgba(247,243,236,.55);
  line-height: 1.65;
}

/* ============================================
   PROTOCOL LAYERS FRAMEWORK GRID
   ============================================ */
.protocol-layers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0 auto;
  max-width: var(--max-wide);
  padding: 0 2rem;
}
.protocol-layer {
  background: var(--cream-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  transition: box-shadow .25s, transform .2s, border-color .25s;
  position: relative;
}
.protocol-layer:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: rgba(74,103,65,.22);
}
.protocol-layer-icon {
  width: 40px; height: 40px;
  background: var(--amber-tint);
  border: 1px solid var(--amber-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}
.protocol-layer-icon svg {
  width: 20px; height: 20px;
  stroke: var(--brown);
}
.protocol-layer h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: .6rem;
  line-height: 1.3;
}
.protocol-layer p {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* Protocol boundary note */
.protocol-boundary-note {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--brown-pale);
  border: 1px solid rgba(122,92,61,.2);
  border-left: 3px solid var(--brown-light);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.25rem 1.5rem;
}
.protocol-boundary-note svg {
  stroke: var(--brown);
  flex-shrink: 0;
  margin-top: .1rem;
}
.protocol-boundary-note p {
  font-size: .9rem;
  color: var(--brown);
  line-height: 1.72;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .protocol-layers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .protocol-layers-grid { grid-template-columns: 1fr; padding: 0 1rem; }
}

/* ============================================
   IMPROVED BODY TEXT LINKS (prose areas)
   ============================================ */
.section p a,
.section li a,
.testing-item p a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(74,103,65,.35);
  transition: text-decoration-color .2s, color .2s;
}
.section p a:hover,
.section li a:hover,
.testing-item p a:hover {
  text-decoration-color: var(--moss);
  color: var(--moss);
}

/* ============================================
   SECTION VISUAL DIVIDER (accent)
   ============================================ */
.section-accent-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0;
}

/* ============================================
   ACCORDION (smooth)
   ============================================ */
.accordion-trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  border-bottom: 1px solid var(--border);
  transition: color .2s;
}
.accordion-trigger:hover { color: var(--moss); }
.accordion-trigger-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  stroke: var(--text-light);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform .3s;
}
.accordion-trigger[aria-expanded="true"] .accordion-trigger-icon {
  transform: rotate(180deg);
}
.accordion-panel {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s ease, opacity .3s ease;
}
.accordion-panel-inner {
  padding: 1.25rem 0 1.5rem;
}

/* ============================================
   ENHANCED CARD BORDERS
   ============================================ */
.card {
  border-color: var(--border);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}

/* ============================================
   IMPROVED SECTION TRANSITIONS
   (visual accent dividers between sections)
   ============================================ */
.section + .section--alt,
.section--alt + .section,
.section + .section--warm,
.section--warm + .section,
.section + .section--moss,
.section--moss + .section {
  /* subtle box shadow separation already from background change */
}

/* Loading state (prevents FOUC) */
html { visibility: visible; }

/* ============================================
   PALETTE S4 + AMBER — overrides & additions
   ============================================ */


/* Tags in herb section, overlap notes use amber */
.herb-tag,
.herbs-framework-label,
.herbs-aside-label,
.herbs-aside-note,
.herbs-subpage-label,
.overlap-tag {
  color: var(--brown);
}

/* Testing items label accent */
.testing-item::before {
  background: var(--moss);
}

/* Learning preview section on dark bg */
#learning-preview {
  background: var(--forest);
}

/* Prefooter CTA gradient update */
.prefooter-cta {
  background: linear-gradient(140deg, var(--green-50) 0%, #FFFFFF 50%, var(--amber-50) 100%);
}

/* Herb card tag uses amber */
.herb-tag {
  background: #F5E8C0;
  color: #9A6800;
  border-color: #E8D090;
}

/* Support section mood accent */
.support-story-quote::before {
  color: var(--moss-pale);
}

/* Focus outline update */
:focus-visible {
  outline-color: var(--moss);
}

/* Nav mobile background */
@media (max-width: 1040px) {
  .nav-links {
    background: #FFFFFF;
    border-bottom: 2px solid var(--border);
  }
}

/* Card icons use new moss */
.card-icon svg {
  stroke: var(--moss);
}
.card-icon {
  background: var(--moss-pale);
}

/* Disclaimer box amber */
.disclaimer-box--brown {
  background: #FBF3DC;
  border-left-color: #D4950A;
}
.disclaimer-box--brown svg {
  stroke: #9A6800;
}
.disclaimer-box--brown span {
  color: #6A4400;
}

/* ══════════════════════════════════════════════════════════════
   PALETTE REFINEMENTS — Forest & Amber final pass
   ══════════════════════════════════════════════════════════════ */

/* ── Text links in body — updated to new vars ── */
.why-text a, .section p a, .card p a, .herb-card p a, .overlap-note p a,
.testing-item p a, .support-story p a, .herbs-safety-box p a, .herbs-subpage-text p a {
  color: var(--green-600);
  text-decoration-color: var(--sage-border);
}
.why-text a:hover, .section p a:hover, .card p a:hover, .herb-card p a:hover,
.overlap-note p a:hover, .testing-item p a:hover, .support-story p a:hover,
.herbs-safety-box p a:hover, .herbs-subpage-text p a:hover {
  color: var(--green-500);
  text-decoration-color: var(--green-400);
}

/* ── Section labels in dark contexts ── */
.learning-hub-hero .section-label,
#learning-preview .section-label {
  color: rgba(180,224,160,.8);
  font-size: .72rem;
}
.learning-hub-hero .section-label::before,
#learning-preview .section-label::before {
  background: rgba(180,224,160,.7);
}

/* ── Blockquote (why-lost) ── */
.why-quote blockquote { color: var(--amber-700); }
.why-quote cite { color: var(--amber-600); opacity: .7; }

/* ── System items heading color ── */
.system-item h4 { color: var(--green-600); }

/* ── Tool CTA box border ── */
.tool-cta-box {
  border-left: 3px solid var(--green-400);
}
.tool-cta-box strong { color: var(--green-700); }

/* ── Coinfection section background needs lighter cards ── */
.section--moss .coinfection-card {
  background: #FFFFFF;
  border-color: var(--border);
}
.section--moss .coinfection-card:hover { border-top-color: var(--green-500); }

/* ── Testing items on alt (sage) background ── */
.section--alt .testing-item {
  background: #FFFFFF;
}

/* ── Overlap note on warm background ── */
.section--warm .overlap-note {
  background: rgba(255,255,255,.7);
}

/* ── Herb framework aside border refinement ── */
.herbs-aside-list li::before { color: var(--amber-400); }
.herbs-aside-list li { border-bottom-color: rgba(192,128,16,.12); }

/* ── Support disclaimer with green accent ── */
.support-disclaimer ul li::before {
  background: var(--green-100);
  border-color: var(--green-400);
}

/* ── Protocol layers on warm section ── */
.protocol-layer h4 { color: var(--amber-700); }
.protocol-layer p { color: var(--text-mid); }

/* ── Module breadcrumb on dark hero ── */
.module-page-hero .module-breadcrumb { color: rgba(255,255,255,.45); }
.module-page-hero .module-breadcrumb a { color: var(--green-300); }
.module-page-hero .module-breadcrumb a:hover { color: #fff; }

/* ── Prefooter label/title ── */
.prefooter-label { color: var(--green-600); }
.prefooter-title { color: var(--text-dark); }

/* ── Footer logo in footer body ── */
/* footer logo — handled in .nav-logo block */

/* ── Footer links ── */
.footer-nav-list a { color: rgba(255,255,255,.65); }
.footer-nav-list a:hover { color: var(--green-200); }


/* ── Herb safety list dots ── */
.herbs-safety-list li::before {
  background: var(--amber-100);
  border-color: var(--amber-400);
}

/* ── Card icons ── */
.card-icon { background: var(--green-50); }
.card-icon svg { stroke: var(--green-500); }

/* ── Section transitions — no harsh borders ── */
.learning-hub-hero + section,
.module-page-hero + .module-content {
  border-top: none;
}

/* ── Module content heading accents ── */
.module-content h2 { color: var(--green-700); }
.module-content h3 {
  color: var(--green-600);
  padding-top: .5rem;
  border-top: 1px solid var(--green-50);
}

/* ── Learn list on white bg ── */
.module-learn-list li { border-bottom-color: var(--green-50); }

/* ── Prefooter secondary button ── */
.prefooter-btn--secondary {
  background: transparent;
  color: var(--green-600);
  border: 1.5px solid var(--green-400);
}
.prefooter-btn--secondary:hover {
  background: var(--green-50);
  border-color: var(--green-500);
}

/* ── Prefooter tertiary button ── */
.prefooter-btn--tertiary {
  background: transparent;
  color: var(--amber-600);
  border: 1.5px solid var(--amber-400);
}
.prefooter-btn--tertiary:hover {
  background: var(--amber-50);
  border-color: var(--amber-500);
}

/* ── Scroll to top — amber hover ── */
.back-to-top:hover {
  background: var(--amber-500);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(192,128,16,.4);
}

/* ── Section title in warm sections ── */
.section--warm .section-title em { color: var(--amber-600); }
.section--warm .audience-title { color: var(--amber-700); }
.section--warm .audience-card h3 { color: var(--amber-600); }
.section--warm .treatment-card h4 { color: var(--amber-700); }
.section--warm .section-label { color: var(--amber-600); }
.section--warm .section-label::before { background: var(--amber-500); }
.section--warm .section-label--icon svg { stroke: var(--amber-500); }

/* ── h2/h3 heading hover underlines ── */
.module-content h2::after {
  content: '';
  display: block;
  width: 32px; height: 2px;
  background: var(--amber-400);
  margin-top: .55rem;
  border-radius: 2px;
}



/* ══════════════════════════════════════════════════════════════
   NEW ARCHITECTURE — 3 audiences, hero paths, treatments
   ══════════════════════════════════════════════════════════════ */


/* ── HERO WAVE BOTTOM EDGE ── */
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  z-index: 3;
}
.hero-wave svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ── HERO PATH CARDS ── */
.hero-paths {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.hero-path-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.hero-path-card:hover {
  background: rgba(255,255,255,.13);
  border-left-color: var(--amber-300);
  transform: translateX(5px);
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  color: inherit;
}

.hero-path-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hero-path-icon svg {
  width: 20px; height: 20px;
  stroke: var(--amber-300);
}

.hero-path-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.hero-path-text strong {
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1.25;
}
.hero-path-text em {
  font-size: .84rem;
  font-style: normal;
  color: rgba(255,255,255,.5);
}

.hero-path-arrow {
  width: 17px; height: 17px;
  stroke: rgba(255,255,255,.3);
  flex-shrink: 0;
  transition: stroke .2s, transform .2s;
}
.hero-path-card:hover .hero-path-arrow {
  stroke: var(--amber-300);
  transform: translateX(4px);
}

/* ── AUDIENCE SECTION HEADER ── */
.audience-section-header {
  max-width: var(--max-content);
  margin: 0 auto 3rem;
  text-align: center;
}

.audience-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding: .35rem .9rem;
  border-radius: 100px;
}
.audience-eyebrow svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none;
  stroke-width: 2.2; flex-shrink: 0;
}
.audience-eyebrow--green {
  color: var(--green-600);
  background: var(--green-50);
  border: 1px solid var(--sage-border);
}

.audience-eyebrow--walnut {
  color: var(--walnut-700);
  background: var(--walnut-100);
  border: 1px solid rgba(92,61,46,.2);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding: .35rem .9rem;
  border-radius: 100px;
}
.audience-eyebrow--walnut svg {
  width: 13px; height: 13px;
  stroke: var(--walnut-500); fill: none;
  stroke-width: 2.2; flex-shrink: 0;
}

.audience-eyebrow--amber {
  color: var(--amber-700);
  background: var(--amber-50);
  border: 1px solid var(--amber-border);
}

/* On moss background — invert eyebrow */
.section--moss .audience-eyebrow--green {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
  color: #fff;
}

.audience-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--green-600);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin-bottom: 1rem;
}
.section--moss .audience-title { color: var(--text-dark); }

.audience-intro {
  font-size: 1.12rem;
  color: var(--text-mid);
  line-height: 1.82;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 400;
}

/* ── AUDIENCE CARDS ── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  counter-reset: card-counter;
}

.audience-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-left: 5px solid var(--green-400);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.75rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s, border-left-color .2s;
  counter-increment: card-counter;
}
.audience-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Card number watermark via CSS counter */
.audience-card::before {
  content: "0" counter(card-counter);
  position: absolute;
  top: -10px;
  right: 10px;
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(0,0,0,.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

/* Per-card accent colors */
.audience-grid .audience-card:nth-child(1) { border-left-color: var(--green-500); }
.audience-grid .audience-card:nth-child(2) { border-left-color: var(--amber-500); }
.audience-grid .audience-card:nth-child(3) { border-left-color: var(--walnut-500); }

.audience-grid .audience-card:nth-child(1) h3 { color: var(--green-600); }
.audience-grid .audience-card:nth-child(2) h3 { color: var(--amber-600); }
.audience-grid .audience-card:nth-child(3) h3 { color: var(--walnut-500); }

.audience-grid .audience-card:nth-child(1) .audience-card-icon { background: var(--green-50); border-color: rgba(94,148,85,.2); }
.audience-grid .audience-card:nth-child(2) .audience-card-icon { background: var(--amber-50); border-color: rgba(192,128,16,.2); }
.audience-grid .audience-card:nth-child(3) .audience-card-icon { background: var(--walnut-50); border-color: rgba(92,61,46,.2); }

.audience-grid .audience-card:nth-child(2) .audience-card-icon svg { stroke: var(--amber-500); }
.audience-grid .audience-card:nth-child(3) .audience-card-icon svg { stroke: var(--walnut-400); }

/* On moss bg */
.section--moss .audience-card {
  background: rgba(255,255,255,.92);
}

.audience-card-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.audience-card-icon--green {
  background: var(--green-50);
  border: 1px solid var(--sage-border);
}
.audience-card-icon--green svg {
  width: 20px; height: 20px;
  stroke: var(--green-500); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.audience-card-icon--amber {
  background: var(--amber-50);
  border: 1px solid var(--amber-border);
}
.audience-card-icon--amber svg { stroke: var(--amber-500); }

.audience-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green-500);
  margin-bottom: .7rem;
  line-height: 1.25;
  letter-spacing: -.01em;
}
.audience-card p {
  font-size: .98rem;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0;
}

/* ── AUDIENCE CTA ROW ── */
.audience-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--sage-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  backdrop-filter: blur(4px);
}
.section--warm .audience-cta-row {
  border-color: var(--amber-border);
  background: rgba(255,255,255,.65);
}
.audience-cta-text p {
  font-size: .95rem;
  color: var(--text-mid);
  line-height: 1.72;
  max-width: 520px;
  margin: 0;
}

/* ── TREATMENTS SPECTRUM ── */
.treatments-spectrum {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 2rem;
}

.treatment-tier {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.treatment-tier-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
  padding: 1.25rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
  position: sticky;
  top: 90px;
}
.treatment-tier-label svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}
.treatment-tier-label--primary {
  background: var(--green-50);
  color: var(--green-700);
  border: 1px solid var(--sage-border);
}
.treatment-tier-label--integrative {
  background: var(--amber-50);
  color: var(--amber-700);
  border: 1px solid var(--amber-border);
}
.treatment-tier-label--alternative {
  background: rgba(107,58,154,.07);
  color: #5A2A8A;
  border: 1px solid rgba(107,58,154,.15);
}

.treatment-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.treatment-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  transition: box-shadow .2s, transform .2s;
}
.treatment-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.treatment-card h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--green-600);
  color: var(--text-dark);
  margin-bottom: .55rem;
  line-height: 1.3;
}
.treatment-card p {
  font-size: .97rem;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0;
}

/* Left border accent by tier */
.treatment-tier:nth-child(1) .treatment-card {
  border-left: 3px solid var(--green-100);
}
.treatment-tier:nth-child(1) .treatment-card:hover {
  border-left-color: var(--green-400);
}
.treatment-tier:nth-child(2) .treatment-card {
  border-left: 3px solid var(--amber-100);
}
.treatment-tier:nth-child(2) .treatment-card:hover {
  border-left-color: var(--amber-400);
}
.treatment-tier:nth-child(3) .treatment-card {
  border-left: 3px solid rgba(107,58,154,.15);
}
.treatment-tier:nth-child(3) .treatment-card:hover {
  border-left-color: rgba(107,58,154,.5);
}

.treatments-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--amber-50);
  border: 1px solid var(--amber-border);
  border-left: 3px solid var(--amber-500);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  font-size: .88rem;
  color: var(--amber-700);
  line-height: 1.65;
  margin-bottom: 2rem;
}
.treatments-disclaimer svg {
  width: 17px; height: 17px;
  stroke: var(--amber-500); fill: none;
  stroke-width: 1.8; flex-shrink: 0; margin-top: .1rem;
}


/* ── WALNUT SECTION ── */
.section--walnut {
  background: var(--walnut-50);
}
.section--walnut .audience-eyebrow--green {
  color: var(--walnut-700);
  background: var(--walnut-100);
  border-color: rgba(92,61,46,.2);
}
.section--walnut .audience-card {
  border-top-color: var(--walnut-100);
}
.section--walnut .audience-card:hover {
  border-top-color: var(--walnut-500);
}
.section--walnut .audience-card-icon--green {
  background: var(--walnut-100);
  border-color: rgba(92,61,46,.2);
}
.section--walnut .audience-card-icon--green svg {
  stroke: var(--walnut-500);
}
.section--walnut .audience-cta-row {
  background: rgba(255,255,255,.75);
  border-color: rgba(92,61,46,.18);
}
.section--walnut .mario-quote {
  background: var(--walnut-50);
  border-color: rgba(92,61,46,.18);
  border-left-color: var(--walnut-500);
}
.section--walnut .mario-quote p { color: var(--walnut-700); }
.section--walnut .mario-stat { border-color: rgba(92,61,46,.15); }
.section--walnut .mario-stat-num { color: var(--walnut-500); }
.section--walnut .audience-title { color: var(--green-600); }

/* ── MARIO'S STORY ── */
.mario-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: start;
  max-width: var(--max-wide);
  margin: 0 auto;
}

.mario-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 1.18rem;
  color: var(--text-dark);
  line-height: 1.78;
  margin-bottom: 1.3rem;
}

.mario-text p {
  font-size: 1.05rem;
  color: var(--text-mid);
  line-height: 1.88;
  margin-bottom: 1.2rem;
}
.mario-text p:last-of-type { margin-bottom: 0; }

.mario-note {
  font-size: .88rem !important;
  color: var(--text-light) !important;
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 1rem !important;
}

.mario-quote {
  background: var(--green-50);
  border: 1px solid var(--sage-border);
  border-left: 3px solid var(--green-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
}
.mario-quote p {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--green-700);
  line-height: 1.7;
  margin-bottom: .75rem;
}
.mario-quote cite {
  font-size: .82rem;
  color: var(--text-light);
  font-style: normal;
}

.mario-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.mario-stat {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1rem;
  text-align: center;
}
.mario-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--green-500);
  line-height: 1;
  margin-bottom: .4rem;
}
.mario-stat-label {
  display: block;
  font-size: .78rem;
  color: var(--text-light);
  line-height: 1.4;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .audience-grid { grid-template-columns: 1fr; gap: 1rem; }
  .treatment-tier { grid-template-columns: 1fr; }
  .treatment-tier-label { position: static; }
  .treatment-cards-row { grid-template-columns: 1fr; }
  .mario-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .mario-stats { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 700px) {
  .hero-paths { gap: .6rem; }
  .audience-cta-row { flex-direction: column; align-items: flex-start; }
  .mario-stats { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .audience-grid { grid-template-columns: 1fr 1fr; }
  .audience-grid .audience-card:last-child { grid-column: 1 / -1; max-width: 480px; }
}


/* ============================================================
   SHARED PAGE HERO — .page-hero
   Used on: symptoms.html, about.html, and future subpages
   ============================================================ */

.page-hero {
  background: linear-gradient(140deg, var(--green-700) 0%, var(--green-500) 100%);
  padding: 9rem 2rem 5.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 68% 42%, rgba(94,148,85,.4) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

/* Eyebrow label */
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-200);
  margin-bottom: 1.4rem;
}
.page-hero-eyebrow span {
  width: 22px; height: 1.5px;
  background: var(--green-200);
  display: inline-block;
}

/* H1 */
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: .85rem;
}
.page-hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--amber-300);
}

/* Subtitle (italic amber line below h1) */
.page-hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 400;
  font-style: italic;
  color: var(--amber-300);
  margin-bottom: 1.6rem;
}

/* Lead paragraph */
.page-hero-lead {
  font-size: 1.08rem;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  max-width: 560px;
  margin: 0 auto 1.6rem;
}

/* Small meta / disclaimer tag */
.page-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .88rem;
  color: rgba(255,255,255,.5);
}
.page-hero-meta::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber-400);
  display: inline-block;
}
.page-hero-disclaimer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  background: rgba(0,0,0,.15);
  padding: .35rem 1rem;
  border-radius: 100px;
}


/* ============================================================
   ABOUT PAGE — body layout, prose, sidebar
   ============================================================ */
.about-body { background: #fff; padding: 5rem 2rem 6rem; }
.about-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .about-sidebar { position: static !important; }
}

.about-prose h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 3rem 0 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.about-prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.about-prose p {
  font-size: 1.08rem;
  color: var(--text-mid);
  line-height: 1.9;
  margin-bottom: 1.4rem;
}
.about-prose p.lead {
  font-size: 1.18rem;
  font-style: italic;
  color: var(--text-dark);
  line-height: 1.78;
  border-left: 3px solid var(--green-400);
  padding-left: 1.4rem;
  margin-bottom: 2rem;
}
.about-prose strong { color: var(--text-dark); font-weight: 600; }

.pull-quote {
  background: var(--green-50);
  border-left: 4px solid var(--green-400);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.6rem 1.8rem;
  margin: 2.5rem 0;
}
.pull-quote p {
  font-size: 1.12rem !important;
  font-style: italic;
  color: var(--green-600) !important;
  line-height: 1.78;
  margin: 0 !important;
}

/* Sidebar */
.about-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.4rem; }
.sidebar-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); }
.sidebar-card-title {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sidebar-card-title::before { content: ''; width: 14px; height: 2px; background: var(--green-400); display: inline-block; }
.sidebar-stats { display: flex; flex-direction: column; gap: .8rem; }
.sidebar-stat { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; background: var(--green-50); border-radius: var(--radius-sm); }
.sidebar-stat-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--green-500); line-height: 1; flex-shrink: 0; min-width: 52px; text-align: center; }
.sidebar-stat-label { font-size: .88rem; color: var(--text-mid); line-height: 1.5; }
.symptom-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.symptom-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: .91rem; color: var(--text-mid); line-height: 1.5; }
.symptom-list li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green-400); margin-top: .42rem; flex-shrink: 0; }
.pillar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.pillar-list li { font-size: .91rem; color: var(--text-mid); line-height: 1.5; padding: .6rem .9rem; background: var(--amber-50); border-left: 3px solid var(--amber-400); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.sidebar-cta { background: var(--green-500); border-radius: var(--radius-md); padding: 1.5rem; text-align: center; }
.sidebar-cta p { font-size: .93rem; color: rgba(255,255,255,.82); line-height: 1.7; margin-bottom: 1rem; }
.sidebar-cta a { display: inline-flex; align-items: center; gap: .5rem; background: #fff; color: var(--green-600); font-weight: 700; font-size: .93rem; padding: .6rem 1.4rem; border-radius: 100px; text-decoration: none; transition: opacity .2s; }
.sidebar-cta a:hover { opacity: .88; }

/* Closing section */
.about-closing { background: var(--green-50); padding: 5rem 2rem; }
.about-closing-inner { max-width: 700px; margin: 0 auto; text-align: center; }
.about-closing blockquote {
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  font-style: italic;
  color: var(--green-600);
  line-height: 1.6;
  margin: 0 0 2rem;
  position: relative;
  padding-top: 1.5rem;
}
.about-closing blockquote::before {
  content: '\201C';
  font-size: 5rem;
  color: var(--green-200);
  position: absolute;
  top: -1.5rem; left: -0.5rem;
  line-height: 1;
  font-family: Georgia, serif;
}
.about-closing-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ============================================================
   SYMPTOMS PAGE — body, clusters, chains, gentle box
   ============================================================ */
.symptoms-body { background: #fff; padding: 5rem 2rem 1rem; }
.symptoms-container { max-width: 860px; margin: 0 auto; }
.symptoms-intro-block { max-width: 700px; margin: 0 auto 4rem; text-align: center; }
.symptoms-intro-block p { font-size: 1.08rem; color: var(--text-mid); line-height: 1.9; margin-bottom: 1.1rem; }
.symptoms-section { margin-bottom: 4.5rem; }
.symptoms-section-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--green-500); margin-bottom: .9rem;
}
.symptoms-section-label::before { content: ''; width: 18px; height: 2px; background: var(--green-400); display: inline-block; }
.symptoms-section h2 {
  font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700; color: var(--green-600); letter-spacing: -.02em; line-height: 1.2; margin-bottom: 1.2rem;
}
.symptoms-section p { font-size: 1.05rem; color: var(--text-mid); line-height: 1.88; margin-bottom: 1.1rem; max-width: 720px; }
.symptoms-chain {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  margin: 2rem 0; padding: 1.4rem 1.8rem;
  background: var(--green-50); border-radius: var(--radius-md); border: 1px solid rgba(94,148,85,.18);
}
.symptoms-chain-step { font-size: .9rem; font-weight: 600; color: var(--green-600); white-space: nowrap; }
.symptoms-chain-arrow { font-size: 1rem; color: var(--green-300); }
.cluster-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin: 2.5rem 0; }
.cluster-card {
  background: #fff; border: 1px solid var(--border);
  border-left: 5px solid var(--green-400);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.6rem 1.8rem; position: relative; overflow: hidden;
}
.cluster-card--amber { border-left-color: var(--amber-500); }
.cluster-card--walnut { border-left-color: var(--walnut-500); }
.cluster-card--green2 { border-left-color: var(--green-400); }
.cluster-card-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.cluster-card--green  .cluster-card-title { color: var(--green-600); }
.cluster-card--amber  .cluster-card-title { color: var(--amber-600); }
.cluster-card--walnut .cluster-card-title { color: var(--walnut-500); }
.cluster-card--green2 .cluster-card-title { color: var(--green-500); }
.cluster-card-title-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cluster-card--green  .cluster-card-title-dot { background: var(--green-500); }
.cluster-card--amber  .cluster-card-title-dot { background: var(--amber-500); }
.cluster-card--walnut .cluster-card-title-dot { background: var(--walnut-500); }
.cluster-card--green2 .cluster-card-title-dot { background: var(--green-400); }
.cluster-list { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.cluster-list li { font-size: .95rem; color: var(--text-mid); line-height: 1.55; display: flex; align-items: flex-start; gap: .6rem; }
.cluster-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green-300); margin-top: .48rem; flex-shrink: 0; }
.cluster-card--amber  .cluster-list li::before { background: var(--amber-300); }
.cluster-card--walnut .cluster-list li::before { background: var(--walnut-300); }
.cluster-closing { font-size: .9rem; font-style: italic; color: var(--text-mid); line-height: 1.72; padding-top: .9rem; border-top: 1px solid var(--border); margin: 0; }
.diagnoses-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.4rem 0 1.8rem; }
.diagnoses-tag { font-size: .88rem; font-weight: 500; color: var(--green-600); background: var(--green-50); border: 1px solid rgba(94,148,85,.22); padding: .35rem 1rem; border-radius: 100px; }
.symptoms-pull { background: var(--green-50); border-left: 4px solid var(--green-400); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.4rem 1.8rem; margin: 1.8rem 0; }
.symptoms-pull p { font-size: 1.05rem; font-style: italic; color: var(--green-600) !important; line-height: 1.78; margin: 0 !important; }
.symptoms-cta-card {
  background: var(--green-50); border: 1px solid rgba(94,148,85,.2); border-radius: var(--radius-md);
  padding: 2rem 2.2rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin: 2.5rem 0; flex-wrap: wrap;
}
.symptoms-cta-card--amber { background: var(--amber-50); border-color: rgba(192,128,16,.18); }
.symptoms-cta-card-text p { font-size: 1rem; color: var(--text-mid); line-height: 1.78; margin: 0; max-width: 520px; }
.symptoms-gentle-box { background: var(--green-50); border: 1px solid rgba(94,148,85,.2); border-radius: var(--radius-md); padding: 2.2rem 2.4rem; margin: 3rem 0 5rem; }
.symptoms-gentle-box h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--green-600); margin-bottom: 1.2rem; }
.symptoms-gentle-steps { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: .7rem; counter-reset: step-counter; }
.symptoms-gentle-steps li { counter-increment: step-counter; display: flex; align-items: flex-start; gap: 1rem; font-size: 1rem; color: var(--text-mid); line-height: 1.65; }
.symptoms-gentle-steps li::before { content: counter(step-counter); min-width: 28px; height: 28px; background: var(--green-500); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; margin-top: .1rem; }
.symptoms-gentle-closing p { font-size: 1rem; color: var(--green-600); line-height: 1.82; font-style: italic; margin: 0; }

/* ============================================================
   MICRO-CONTENT BLOCKS — index section cards
   ============================================================ */
.micro-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.8rem 0 2rem;
}
.micro-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
}
.micro-block-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.micro-block-label::before {
  content: '';
  width: 10px; height: 2px;
  display: inline-block;
  border-radius: 2px;
}
.micro-block--idea   .micro-block-label { color: var(--green-500); }
.micro-block--idea   .micro-block-label::before { background: var(--green-400); }
.micro-block--trap   .micro-block-label { color: var(--amber-600); }
.micro-block--trap   .micro-block-label::before { background: var(--amber-400); }
.micro-block--step   .micro-block-label { color: var(--walnut-500); }
.micro-block--step   .micro-block-label::before { background: var(--walnut-400); }
.micro-block p {
  font-size: .9rem;
  color: var(--text-mid);
  line-height: 1.68;
  margin: 0;
}
.section--moss .micro-block { background: rgba(255,255,255,.85); }

@media (max-width: 700px) {
  .micro-blocks { grid-template-columns: 1fr; }
  .cluster-grid { grid-template-columns: 1fr; }
  .symptoms-cta-card { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   SKIP TO CONTENT — accessibility
   ============================================================ */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--green-700);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  padding: .6rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top .2s;
}
.skip-to-content:focus {
  top: 0;
  outline: 3px solid var(--amber-300);
  outline-offset: 2px;
}

/* ============================================================
   BURGER MENU — body scroll lock when nav open on mobile
   ============================================================ */
body.nav-open {
  overflow: hidden;
}


/* ============================================================
   SYMPTOM ENTRY BOXES (index.html section B)
   ============================================================ */
.symptom-entry {
  padding: 4rem 0 3.5rem;
  background: var(--green-50);
}
.symptom-entry-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.symptom-entry-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--green-700);
  margin-bottom: .6rem;
}
.symptom-entry-header p {
  color: var(--text-mid);
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto;
}
.symptom-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.symptom-box {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--green-100);
  padding: 1.75rem 1.5rem 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
}
.symptom-box:hover {
  border-color: var(--green-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.symptom-box-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--green-600);
  flex-shrink: 0;
}
.symptom-box-icon svg { width: 20px; height: 20px; }
.symptom-box-question {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--green-700);
  line-height: 1.4;
  flex: 1;
}
.symptom-box-cta {
  font-size: .85rem;
  font-weight: 600;
  color: var(--green-500);
  display: flex;
  align-items: center;
  gap: .35rem;
}
.symptom-box-cta svg { width: 13px; height: 13px; }

/* ============================================================
   "WHEN PIECES DON'T FIT" NARRATIVE (index section C)
   ============================================================ */
.pieces-section {
  padding: 4.5rem 0;
  background: #fff;
}
.pieces-inner {
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}
.pieces-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 1.25rem;
}
.pieces-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--green-700);
  margin-bottom: 1.5rem;
}
.pieces-inner p {
  font-size: 1.07rem;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 1.25rem;
}
.pieces-inner p strong {
  color: var(--text-dark);
  font-weight: 600;
}
.pieces-cta {
  margin-top: 2.25rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   HEALING MENTALITY (index section D + standalone page)
   ============================================================ */
.healing-section {
  padding: 4.5rem 0;
  background: var(--amber-50);
}
.healing-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.healing-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: .75rem;
}
.healing-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: var(--walnut-700);
  margin-bottom: .75rem;
}
.healing-header p {
  color: var(--text-mid);
  font-size: 1.05rem;
  max-width: 580px;
  margin: 0 auto;
}
.healing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.healing-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  border-top: 3px solid var(--amber-300);
}
.healing-card-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--amber-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--amber-600);
  margin-bottom: 1rem;
}
.healing-card-icon svg { width: 20px; height: 20px; }
.healing-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--walnut-700);
  margin-bottom: .6rem;
}
.healing-card p {
  font-size: .95rem;
  color: var(--text-mid);
  line-height: 1.7;
}
.healing-cta {
  text-align: center;
}

/* ============================================================
   STEP MAP (index section E + learn.html)
   ============================================================ */
.step-map-section {
  padding: 4.5rem 0;
  background: var(--green-50);
}
.step-map-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.step-map-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.1rem);
  color: var(--green-700);
  margin-bottom: .75rem;
}
.step-map-header p {
  color: var(--text-mid);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}
.step-map-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.step-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1.5px solid var(--green-100);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  position: relative;
}
.step-card:hover {
  border-color: var(--green-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.step-card--soon {
  opacity: .65;
  cursor: default;
  pointer-events: none;
}
.step-card-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--green-100);
  line-height: 1;
  letter-spacing: -.02em;
}
.step-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-700);
}
.step-card-desc {
  font-size: .92rem;
  color: var(--text-mid);
  line-height: 1.6;
  flex: 1;
}
.step-card-link {
  font-size: .85rem;
  font-weight: 600;
  color: var(--green-500);
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .25rem;
}
.step-card-link svg { width: 13px; height: 13px; }
.step-badge {
  font-size: .72rem;
  font-weight: 700;
  background: var(--amber-100);
  color: var(--amber-700);
  padding: .2rem .6rem;
  border-radius: 20px;
  align-self: flex-start;
}

/* ============================================================
   MY STORY TEASER (index section F)
   ============================================================ */
.story-teaser {
  padding: 4rem 0;
  background: var(--walnut-50);
}
.story-teaser-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.story-teaser-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  color: var(--walnut-700);
  margin-bottom: 1rem;
}
.story-teaser-inner p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: 1rem;
}
.story-teaser-inner blockquote {
  font-style: italic;
  font-size: 1.1rem;
  color: var(--walnut-500);
  border-left: 3px solid var(--amber-300);
  padding-left: 1.25rem;
  text-align: left;
  margin: 1.5rem 0 2rem;
  line-height: 1.7;
}

/* ============================================================
   PAGE TOC — Jump to (subpages)
   ============================================================ */
.page-toc {
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0 2.5rem;
  max-width: 680px;
}
.page-toc-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-bottom: .75rem;
}
.page-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .75rem;
}
.page-toc-list li a {
  font-size: .9rem;
  color: var(--green-600);
  text-decoration: none;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.page-toc-list li a::before {
  content: '↓';
  font-size: .8rem;
  color: var(--green-400);
}
.page-toc-list li a:hover { color: var(--green-700); text-decoration: underline; }

/* ============================================================
   HEALING CHECKPOINT (subpages recurring box)
   ============================================================ */
.healing-checkpoint {
  background: var(--amber-50);
  border: 1.5px solid var(--amber-200);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.healing-checkpoint-icon {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  background: var(--amber-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--amber-600);
  flex-shrink: 0;
}
.healing-checkpoint-icon svg { width: 19px; height: 19px; }
.healing-checkpoint-body h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--walnut-700);
  margin-bottom: .4rem;
}
.healing-checkpoint-body p {
  font-size: .92rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin: 0 0 .6rem;
}
.healing-checkpoint-body a {
  font-size: .88rem;
  font-weight: 600;
  color: var(--amber-600);
  text-decoration: none;
}
.healing-checkpoint-body a:hover { text-decoration: underline; }

/* ============================================================
   SOURCES / LAST UPDATED (subpages footer section)
   ============================================================ */
.sources-block {
  border-top: 1px solid var(--border);
  padding: 2rem 0 1rem;
  margin-top: 3rem;
}
.sources-block h4 {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mid);
  margin-bottom: .75rem;
}
.sources-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.sources-list li {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.5;
}
.sources-list li::before {
  content: '→ ';
  color: var(--green-400);
}
.last-updated {
  font-size: .8rem;
  color: var(--text-light);
}

/* ============================================================
   KNOWLEDGE BASE PAGE
   ============================================================ */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.kb-card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--green-100);
  padding: 1.75rem;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.kb-card:hover {
  border-color: var(--green-400);
  box-shadow: var(--shadow-md);
}
.kb-card-tag {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-500);
  margin-bottom: .5rem;
}
.kb-card h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-700);
  margin-bottom: .5rem;
}
.kb-card p {
  font-size: .92rem;
  color: var(--text-mid);
  line-height: 1.65;
}

/* ============================================================
   HEALING MENTALITY PAGE (standalone)
   ============================================================ */
.manifesto-block {
  max-width: 680px;
  margin: 0 auto;
}
.manifesto-block h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--walnut-700);
  margin-bottom: 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--amber-100);
}
.manifesto-block h2:first-child {
  padding-top: 0;
  border-top: none;
}
.manifesto-block p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-mid);
  margin-bottom: 1.25rem;
}
.manifesto-block blockquote {
  border-left: 3px solid var(--amber-300);
  padding: .5rem 0 .5rem 1.25rem;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--walnut-500);
  margin: 1.5rem 0;
  line-height: 1.7;
}
.manifesto-principles {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.manifesto-principles li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: 1.02rem;
  color: var(--text-mid);
  line-height: 1.65;
}
.manifesto-principles li::before {
  content: '✦';
  color: var(--amber-400);
  flex-shrink: 0;
  margin-top: .1rem;
}

/* ============================================================
   RESPONSIVE — new components
   ============================================================ */
@media (max-width: 900px) {
  .symptom-entry-grid { grid-template-columns: 1fr; }
  .step-map-grid { grid-template-columns: repeat(2, 1fr); }
  .healing-cards { grid-template-columns: 1fr; }
  .kb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .step-map-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SCROLL MARGIN — prevent sticky nav overlap on anchor jump
   ============================================================ */
#neurological,
#musculoskeletal,
#autonomic {
  scroll-margin-top: 82px;
}

/* ============================================================
   SYMPTOM ANSWER-FIRST HEADER
   ============================================================ */
.symptoms-answer-header {
  margin-bottom: 1.75rem;
}
.symptoms-answer-header h2 {
  margin-bottom: 1rem;
}
.symptoms-answer-header p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--text-mid);
  margin-bottom: .9rem;
}
.symptoms-section-label--green  { border-left-color: var(--green-500);  color: var(--green-700); }
.symptoms-section-label--amber  { border-left-color: var(--amber-500);  color: var(--amber-700); }
.symptoms-section-label--walnut { border-left-color: var(--walnut-500); color: var(--walnut-700); }
.symptoms-cta-row { margin-top: .5rem; }

/* ============================================================
   MOBILE MENU — force dark text regardless of hero/scroll state
   (fixes white-on-white links when nav is transparent over hero)
   ============================================================ */
@media (max-width: 1040px) {
  #site-nav .nav-links.open li a {
    color: var(--text-dark) !important;
  }
  #site-nav .nav-links.open li a:hover {
    color: var(--green-600) !important;
  }
  #site-nav .nav-burger span {
    background: var(--text-dark);
  }
  #site-nav:not(.scrolled) .nav-burger span {
    background: rgba(255, 255, 255, 0.9);
  }
}