/* NIDARI NUTRITION — home.css
   Homepage sections only. Load after base.css. */

/* ═══════════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(20px, 5vw, 60px));
  padding-bottom: clamp(40px, 8vw, 90px);
  overflow: hidden;
  background:
    radial-gradient(1100px 700px at 88% 12%, rgba(20, 125, 140, .07), transparent 60%),
    radial-gradient(900px 700px at -4% 100%, rgba(63, 143, 92, .07), transparent 58%),
    var(--paper);
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 46fr 54fr;   /* content left, cards right */
  gap: clamp(16px, 2.4vw, 40px);      /* tighter — close the mid-hero gap */
  align-items: stretch;               /* card column matches the left's height */
}

/* LEFT — content */
.hero__left { display: flex; flex-direction: column; min-width: 0; }

/* RIGHT — card deck fills the full left-column height; tagline floats above it */
.hero__right { position: relative; display: flex; flex-direction: column; min-width: 0; }
.hero__right .stack { flex: 1 1 auto; min-height: 0; }

/* script tagline sits ABOVE the card (out of flow so it doesn't shorten it) */
.hero__tagline {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  margin-bottom: 14px;
  text-align: center;
  white-space: nowrap;
  font-family: var(--script);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  line-height: 1.15;
  color: var(--peacock-gold);
}
.hero__tagline-burst,
.hero__tagline-heart {
  display: inline-block;
  vertical-align: middle;
  width: 1em; height: 1em;
  color: var(--peacock-gold);
  overflow: visible;
}
.hero__tagline-burst { margin-right: .32em; }
.hero__tagline-heart { margin-left: .32em; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--herb-deep);
  background: var(--herb-wash);
  padding: 7px 14px;
  border-radius: 100px;
  margin-bottom: 22px;
  /* gentle breathing glow so the enrolling pill quietly draws the eye */
  animation: heroPillGlow 3.2s var(--ease-soft) infinite;
}
@keyframes heroPillGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(53,160,94,0); }
  50%      { box-shadow: 0 0 0 5px rgba(53,160,94,.12); }
}
.hero__eyebrow-dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--herb-bright);
}
/* expanding live-status ping */
.hero__eyebrow-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--herb-bright);
  animation: heroDotPing 2s var(--ease-out) infinite;
}
@keyframes heroDotPing {
  0%   { transform: scale(1); opacity: .6; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* credentials strap beneath the enrolling pill — gold, spaced caps */
.hero__creds {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--peacock-gold);
  margin-bottom: 20px;
}

.hero__wordmark {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--herb);
  margin-bottom: 16px;
  line-height: 1.5;
}
.hero__wordmark span {
  display: block;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  font-size: .8rem;
}

.hero__display {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: clamp(3rem, 7vw, 5rem);   /* ~80px cap, per spec */
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
  color: var(--ink);
}
.hero__display span { display: block; }
.hero__display-green { color: var(--herb); }
.hero__display-accent {
  display: inline-block;
  position: relative;
  font-family: var(--script);
  font-weight: 400;
  font-style: normal;
  color: var(--terra);
  /* Great Vibes reads delicate + small — size up generously and give the
     ascenders/descenders and the flourish room to breathe */
  font-size: 1.2em;
  line-height: 1.08;
  letter-spacing: 0;
  margin-top: 0.04em;
}

/* small hand-drawn heart, lifted to the top-right of "You." */
.hero__accent-heart {
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.02em;
  position: relative;
  top: -0.5em;            /* just above the cap of "You." */
  color: var(--peacock-gold);
  overflow: visible;
}

.hero__treat {
  font-family: var(--heading);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 22px;
}
.hero__treat-word {
  color: var(--terra);
  font-style: italic;
  font-weight: 700;
}

.hero__copy {
  font-size: clamp(1.28rem, 1.9vw, 1.52rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.5;
  max-width: min(48ch, 100%);
  margin-bottom: 30px;
}
.hero__copy em { color: var(--herb-deep); font-style: normal; font-weight: 700; }

/* closing line — flowing script, gold sparkles on both ends, gold underline */
.hero__copy-accent {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  position: relative;
  white-space: nowrap;              /* keep the whole line together */
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.9vw, 1.95rem);
  line-height: 1.1;
  color: var(--ink);
  margin-top: 0.25em;
}
.hero__copy-accent-text {
  position: relative;
  padding-bottom: .12em;
}
/* hand-drawn gold underline swash beneath just the words */
.hero__copy-accent-text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    transparent, var(--peacock-gold) 12%, var(--peacock-gold) 88%, transparent);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

/* Book-a-call pill — calendar icon + two-line label, soft gold outline */
.hero__book {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 14px 26px 14px 18px;
  border-radius: 100px;
  background: var(--paper);
  border: 1.5px solid color-mix(in srgb, var(--peacock-gold) 55%, var(--line));
  box-shadow: var(--sh-sm);
  color: var(--ink);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
    border-color .3s var(--ease-out), background .3s var(--ease-out);
}
.hero__book:hover {
  transform: translateY(-2px);
  border-color: var(--peacock-gold);
  background: var(--white);
  box-shadow: var(--sh-md);
}
.hero__book-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--herb);
  background: var(--herb-wash);
}
.hero__book-icon svg { width: 22px; height: 22px; }
.hero__book-text { display: flex; flex-direction: column; line-height: 1.2; }
.hero__book-text strong {
  font-family: var(--sans);
  font-size: .96rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero__book-text span {
  font-size: .86rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
}

/* wrapper handles centring (plain CSS) so Framer's inline transform on the
   inner <p> can't wipe the translateX — pinned centre-bottom of the hero */
.hero__micro-pos {
  position: absolute;
  bottom: clamp(20px, 4vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
}
.hero__micro {
  text-align: center;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .01em;
  /* soft paper backdrop so it stays crisp over the plume lines */
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  padding: 8px 18px;
  border-radius: 100px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .hero__left { order: 1; }
  .hero__right { order: 2; }
  .hero__treat-word { white-space: normal; }
  /* on stacked layouts, drop it back into flow so it can't overlap the cards */
  .hero__micro-pos {
    position: static;
    transform: none;
    margin: 4px auto 0;
  }
  .hero__micro { white-space: normal; }
}
@media (max-width: 480px) {
  .hero__display { font-size: clamp(2.6rem, 14vw, 3.6rem); }
}

/* ═══════════════════════════════════════════════════════════════════
   STORY CARD
   ═══════════════════════════════════════════════════════════════════ */
.story {
  position: relative;
  width: 100%;
  height: 100%;              /* fill the deck (which sets the aspect ratio) */
  aspect-ratio: 100 / 70;    /* wider + shorter card */
  perspective: 1600px;
  outline: none;
}
.story__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out);
}
.story--flipped .story__inner { transform: rotateY(180deg); }

.story__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 30px 60px -34px rgba(22, 49, 31, .5),
    0 6px 18px -10px rgba(22, 49, 31, .2);
  overflow: hidden;
}

/* ── AFTER face: photo panel + details panel ─────────────────── */
.story__after { display: flex; }

.story__photo {
  position: relative;
  flex: 0 0 56%;
  min-width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--tier-wash), var(--white));
}
.story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.story__photo-initial {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: 3.2rem;
  color: var(--tier-deep);
  opacity: .75;
}
/* tier pill sits on the photo */
.story__tier {
  position: absolute;
  left: 12px;
  bottom: 12px;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tier);
  padding: 4px 10px;
  border-radius: 100px;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35);
}

.story__detail {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.4vw, 24px);
}

.story__badge {
  align-self: center;
  display: inline-flex;
  align-items: center;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--herb-deep);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}

.story__name {
  align-self: center;
  text-align: center;
  font-family: var(--heading);
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: var(--wt-heading);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
}
.story__tag {
  align-self: center;
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tier-deep);
  margin: 3px 0 14px;
}

.story__results {
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.7vw, 17px);
  margin-bottom: 18px;
}
.story__results li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(.86rem, 1.15vw, .96rem);
  font-weight: 500;
  color: var(--body);
  line-height: 1.28;
}
.story__ico {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--tier-deep);
  /* glossy, pillowy raised chip */
  background: radial-gradient(120% 120% at 32% 24%, #ffffff, var(--paper-2) 118%);
  box-shadow:
    0 4px 10px -3px rgba(22, 49, 31, .2),
    0 2px 4px -2px rgba(22, 49, 31, .12),
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 -3px 6px rgba(22, 49, 31, .05) inset;
}
.story__ico svg { width: 20px; height: 20px; }

.story__quote {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  margin-top: auto;
  padding: 12px 0 0 18px;
  border-top: 1px solid var(--line);
}
.story__quote::before {
  content: "\201C";
  position: absolute;
  left: -2px; top: 6px;
  font-family: var(--serif);
  font-size: 2rem;
  line-height: 1;
  color: var(--tier);
  opacity: .5;
}

.story__flip-hint {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--tier-deep);
  margin-top: 12px;
}

/* ── BEFORE face ─────────────────────────────────────────────── */
.story__before {
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(26px, 4vw, 40px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .08), transparent 55%),
    var(--herb-deep);
  border-color: var(--herb-deep);
}
.story__before-label {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--tier);
  font-weight: 700;
  margin-bottom: 14px;
}
.story__before-text {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  line-height: 1.35;
  color: #f2f7ea;
  font-style: italic;
}
.story__before .story__flip-hint { color: rgba(255, 255, 255, .7); margin-top: 20px; }

/* ── Narrow cards ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .story { aspect-ratio: 100 / 96; }
  .story__photo { flex-basis: 38%; }
  .story__ico { width: 34px; height: 34px; }
  .story__ico svg { width: 18px; height: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   STORY STACK
   ═══════════════════════════════════════════════════════════════════ */
.stack {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  /* run as tall as the column so the card matches the left text block */
  display: flex;
  flex-direction: column;
  --card-w: min(
    540px,
    100%
  ); /* front-card width — deck, dots + arrows track it */
}
.stack__badge {
  position: absolute;
  top: -10px;
  left: 14px;
  z-index: 40;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 4px 11px;
  border-radius: 100px;
}

/* the deck sizes the FRONT card and hugs the left so the single peek has room
   to poke out on the right (its details column). It grows to fill the column
   height (bounded) so the card runs long, like the left text block. */
.stack__deck {
  position: relative;
  width: var(--card-w);
  margin-right: auto; /* left-align the front card in the column */
  flex: 0 0 auto; /* don't stretch — height follows the aspect ratio */
  aspect-ratio: 100 / 120; /* card height, relative to width; higher = taller */
  overflow: visible; /* let the peek card show beyond the front */
}
.stack__card {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform, filter, opacity;
}
.stack__card.is-front {
  cursor: grab;
}
.stack__card.is-front:active {
  cursor: grabbing;
}

/* stage — holds the deck plus the two flanking arrows */
.stack__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* arrows sit on the left and right sides of the front card, vertically centred */
.stack__arrow {
  position: absolute;
  top: 50%;
  z-index: 40;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--line-strong);
  color: var(--herb);
  box-shadow: var(--sh-md, 0 8px 24px -10px rgba(22, 49, 31, 0.25));
  transition:
    transform 0.25s var(--ease-out),
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.stack__arrow svg {
  width: 18px;
  height: 18px;
}
.stack__arrow--prev {
  /* sit fully outside the card's left edge */
  left: -60px;
  transform: translateY(-50%);
}
.stack__arrow--prev svg {
  transform: rotate(180deg);
}
.stack__arrow--next {
  /* sit just past the right edge of the PEEK card. The peek is one card-width
     wide, offset 42% (see layoutFor in StoryStack.jsx), so its right edge is at
     card-w * 1.42 */
  left: calc(var(--card-w) * 1.42 - 34px);
  transform: translateY(-50%);
}
.stack__arrow:hover {
  background: var(--herb);
  border-color: var(--herb);
  color: #fff;
}
.stack__arrow--prev:hover {
  transform: translateY(-50%) scale(1.06);
}
.stack__arrow--next:hover {
  transform: translateY(-50%) scale(1.06);
}

/* controls: dots only, centred under the front card */
.stack__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 22px;
  width: var(--card-w);
  margin-right: auto;
  flex-shrink: 0;
}

.stack__dots {
  display: flex;
  gap: 8px;
}
.stack__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: all 0.35s var(--ease-out);
}
.stack__dot.is-active {
  width: 24px;
  border-radius: 100px;
  background: var(--herb);
}

/* on narrow viewports there's no room to sit fully outside — tuck the arrows
   just inside the card edges instead of letting them clip off-screen */
@media (max-width: 620px) {
  .stack__arrow {
    width: 40px;
    height: 40px;
  }
  .stack__arrow--prev {
    left: 8px;
  }
  .stack__arrow--next {
    left: auto;
    right: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ATLAS INTRO
   ═══════════════════════════════════════════════════════════════════ */
/* Diet Atlas teaser — dark section: left copy, right 3D globe + badge, stat rail. */
.atlas-intro {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(46px, 6vw, 82px);
  background:
    radial-gradient(1000px 720px at 78% 30%, #0b4a63 0%, transparent 60%),
    radial-gradient(760px 620px at 12% 96%, rgba(255, 184, 28, .12), transparent 58%),
    linear-gradient(180deg, #04202f 0%, #052736 100%);
  color: #fff;
}
.atlas-intro__inner { position: relative; z-index: 2; }

/* ── Compact top panel: copy left, badge top-right (over the backdrop) ── */
.atlas-intro__top {
  position: relative;
  min-height: clamp(300px, 34vw, 400px);
  display: flex;
  align-items: center;
}
.atlas-intro__left { position: relative; z-index: 2; max-width: min(560px, 56%); }

.atlas-intro__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #ffb81c;
  margin-bottom: 18px;
}
.atlas-intro__eyebrow::after {
  content: "";
  width: clamp(30px, 5vw, 60px);
  height: 1px;
  background: linear-gradient(90deg, #ffb81c, transparent);
}
.atlas-intro__eyebrow-star { width: 15px; height: 15px; color: #ffb81c; }

.atlas-intro__title {
  /* match the Hero display ("Happier. Healthier.") — heading font, same size */
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #fdfbf4;
  margin-bottom: 22px;
}
.atlas-intro__title em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  color: #ffb81c;
}

.atlas-intro__lead {
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  font-weight: 500;
  line-height: 1.5;
  color: rgba(233, 244, 248, .9);
  max-width: 32ch;
}
.atlas-intro__sub {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2.3vw, 1.95rem);
  color: #ffb81c;
}

/* ── Full-section background image + legibility scrims ────────────── */
.atlas-intro__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../photos/atlas-bg.jpg") center 32% / cover no-repeat;
}
/* scrims fade the copy (left) and the stat rail (bottom) into the dark */
.atlas-intro__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* left → right: lighter veil behind the copy, clears quickly over the map */
    linear-gradient(90deg,
      rgba(3, 20, 30, .80) 0%, rgba(3, 20, 30, .55) 24%,
      rgba(3, 20, 30, .04) 50%, rgba(3, 20, 30, .14) 100%),
    /* top → bottom: soft top wash, fade to a lighter dark behind stats */
    linear-gradient(180deg,
      rgba(3, 20, 30, .18) 0%, rgba(3, 20, 30, 0) 30%,
      rgba(3, 20, 30, .42) 78%, rgba(4, 26, 38, .9) 100%);
}

/* circular story badge, top-right over the earth */
.atlas-badge {
  position: absolute;
  top: 0;
  right: clamp(2%, 4vw, 8%);
  z-index: 3;
  width: clamp(160px, 17vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: clamp(22px, 2.4vw, 32px);
  text-align: center;
  background: radial-gradient(120% 120% at 50% 20%, rgba(9, 42, 56, .96), rgba(4, 26, 38, .96));
  /* double gold ring: inner hairline via border, outer ring via box-shadow */
  border: 1.5px solid rgba(255, 184, 28, .85);
  box-shadow:
    0 26px 60px -18px rgba(0, 0, 0, .7),
    0 0 0 6px rgba(4, 26, 38, .96),
    0 0 0 8px rgba(255, 184, 28, .5),
    inset 0 0 0 6px rgba(255, 184, 28, .12);
}
.atlas-badge svg:first-child { width: clamp(30px, 2.8vw, 38px); height: clamp(30px, 2.8vw, 38px); color: #ffb81c; }
.atlas-badge__text {
  font-size: .8rem;   /* matches .atlas-intro__eyebrow exactly */
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.55;
  text-transform: uppercase;
  color: #f3ead2;
}
/* bottom flourish — a star flanked by two short gold rules */
.atlas-badge__star {
  position: relative;
  width: clamp(16px, 1.6vw, 22px);
  height: clamp(16px, 1.6vw, 22px);
  color: #ffb81c;
}
.atlas-badge__star::before,
.atlas-badge__star::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(26px, 3vw, 42px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 184, 28, .7));
}
.atlas-badge__star::before { right: calc(100% + 8px); transform: scaleX(-1); }
.atlas-badge__star::after  { left: calc(100% + 8px); }

/* ── Bottom: stat rail + CTA ─────────────────────────────────── */
.atlas-intro__foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(28px, 4vw, 48px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid rgba(255, 184, 28, .22);
}
.atlas-intro__stats {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.astat {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(8px, 1.6vw, 22px);
  text-align: center;
}
/* gradient vertical divider between stats, feathered top + bottom */
.astat + .astat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 184, 28, .38), transparent);
}

/* circular icon chip — gold ring, soft inner glow */
.astat__icon {
  width: clamp(58px, 5.6vw, 78px);
  height: clamp(58px, 5.6vw, 78px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffb81c;
  background: radial-gradient(120% 120% at 50% 22%, rgba(255, 184, 28, .18), rgba(4, 26, 38, .55) 72%);
  border: 1px solid rgba(255, 184, 28, .5);
  box-shadow:
    0 0 0 5px rgba(255, 184, 28, .05),
    0 12px 28px -14px rgba(0, 0, 0, .8),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.astat__icon svg { width: clamp(26px, 2.5vw, 36px); height: clamp(26px, 2.5vw, 36px); }

/* small gold diamond flourish on a faded rule, sits under each icon */
.astat__flourish {
  position: relative;
  width: clamp(64px, 7vw, 104px);
  height: 9px;
  margin: 2px 0 4px;
}
.astat__flourish::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 184, 28, .5) 26%, rgba(255, 184, 28, .5) 74%, transparent);
}
.astat__flourish::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #ffb81c;
  box-shadow: 0 0 0 4px #062a3b;   /* break the rule cleanly around the diamond */
}
.astat__top {
  font-size: clamp(1.05rem, 1.6vw, 1.34rem);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffb81c;
  margin-top: 2px;
}
.astat__sub {
  font-size: clamp(.78rem, 1.05vw, .92rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(233, 244, 248, .6);
  line-height: 1.25;
}
/* one-off: keep "Built for You" fully gold */
.astat__sub--gold { color: #ffb81c; }

.atlas-intro__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: clamp(30px, 4vw, 46px);
}
.atlas-intro__cta {
  background: #ffb81c;
  color: #04202f;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1rem;
  padding: 1.15em 2.7em;
  border-radius: 100px;
  box-shadow: 0 14px 34px -12px rgba(255, 184, 28, .6), 0 0 0 6px rgba(255, 184, 28, .1);
}
.atlas-intro__cta:hover {
  background: #ffc63f;
  box-shadow: 0 20px 44px -14px rgba(255, 184, 28, .7), 0 0 0 8px rgba(255, 184, 28, .16);
}
.atlas-intro__note {
  position: relative;
  font-family: var(--script);
  font-size: 2rem;
  line-height: 1.1;
  color: #ffb81c;
  padding-left: 52px;
}
.atlas-intro__note-arrow {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 28px;
  color: #ffb81c;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .atlas-intro__top { min-height: auto; }
  .atlas-intro__left { max-width: 100%; }
  /* stronger overall darkening on small screens so copy stays legible */
  .atlas-intro__scrim {
    background:
      linear-gradient(90deg, rgba(3, 20, 30, .78) 0%, rgba(3, 20, 30, .58) 55%, rgba(3, 20, 30, .42) 100%),
      linear-gradient(180deg, rgba(3, 20, 30, .22) 0%, rgba(3, 20, 30, .06) 30%, rgba(3, 20, 30, .45) 78%, rgba(4, 26, 38, .9) 100%);
  }
}
@media (max-width: 680px) {
  .atlas-intro__stats { flex-wrap: wrap; justify-content: center; gap: 22px 0; }
  .astat { flex-basis: 33.33%; }
  .astat + .astat::before { display: none; }
  .atlas-intro__cta-row { flex-direction: column; gap: 18px; }
  .atlas-intro__note { padding-left: 0; padding-top: 30px; text-align: center; }
  .atlas-intro__note-arrow { left: 50%; top: 0; transform: translateX(-50%) rotate(60deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   DIET TIERS
   ═══════════════════════════════════════════════════════════════════ */
.tiers {
  overflow-x: clip;
  /* match the Hero backdrop — warm paper with soft teal/herb radial tints */
  background:
    radial-gradient(1100px 700px at 88% 12%, rgba(20, 125, 140, .07), transparent 60%),
    radial-gradient(900px 700px at -4% 100%, rgba(63, 143, 92, .07), transparent 58%),
    var(--paper);
}

/* heading accent — "different level of" in terracotta italic */
.tiers .sechead__title em {
  font-style: italic;
  font-weight: inherit;
  color: var(--terra);
}
/* let the two explicit lines hold without re-wrapping */
.tiers .sechead__title { max-width: none; }

/* ── Connector track above the tier cards ────────────────────── */
.tiersteps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(36px, 4vw, 52px);   /* headroom for the "Most Popular" pill */
  padding-block: 8px;
}
.tiersteps::before {          /* the line, gradient across the three tiers */
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--sage), var(--amber), var(--terra));
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.tierstep { position: relative; z-index: 1; display: grid; place-items: center; }
.tierstep__node {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ── Three tier cards, side by side ──────────────────────────── */
.tiergrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: 6px;
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* header wash — accent gradient at the top, fading into the card */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-wash) 92%, #fff) 0%,
    color-mix(in srgb, var(--accent-wash) 40%, #fff) 30%,
    var(--white) 58%);
  /* every tier card carries its own accent border */
  border: 2px solid var(--accent);
  border-radius: 20px;
  overflow: hidden;                 /* clip the top colour bar to the rounded corners */
  padding: 34px 30px 30px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 26px 50px -28px color-mix(in srgb, var(--accent) 45%, rgba(22, 49, 31, .4)),
    0 6px 16px -10px rgba(22, 49, 31, .18);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.tcard:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 32px 58px -28px color-mix(in srgb, var(--accent) 52%, rgba(22, 49, 31, .5)),
    0 8px 20px -12px rgba(22, 49, 31, .18);
}

/* full-width colour bar across the top, tinted to the tier accent */
.tcard__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
}

.tcard__top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.tcard__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* tagline pill next to the tier label — filled by default, ghost on Light */
.tcard__badge {
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 5px 11px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}

.tcard__name {
  font-size: clamp(1.4rem, 1.8vw, 1.72rem);
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.tcard__blurb {
  font-size: .96rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0 0 24px;
}

/* card footer — big script punch line with an underline swash */
.tcard__foot {
  position: relative;
  margin-top: auto;
  padding-top: 6px;
}
.tcard__punch {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.72rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--accent-deep);
}
/* hand-drawn underline swash beneath the punch line */
.tcard__punch-swash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.34em;
  width: 100%;
  height: .4em;
  color: var(--accent);
  overflow: visible;
}

/* ── Stacked approach rows (one per tier) ────────────────────── */
.tiers__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;                          /* row spacing = inter-card gap */
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: 20px;                /* bottom margin = inter-card gap */
  /* break out of .wrap to near-full width, leaving a small gap at each edge */
  --edge: clamp(16px, 3vw, 48px);
  width: calc(100vw - 2 * var(--edge));
  margin-left: calc(50% - 50vw + var(--edge));
}
.tierrow { scroll-margin-top: calc(var(--header-h) + 24px); }

/* food-card (illustrated, links to diet page or Atlas) — image-dominant */
.fcard {
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 80vw;
  height: 328px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* hover is detected on the stationary slot so the lift can't jitter the pointer */
.fcard-slot { flex: 0 0 auto; }
.fcard-slot:hover .fcard { transform: translateY(-5px); box-shadow: var(--sh-lg); }

/* header — dominant accent-gradient panel (~60% of the card) */
.fcard__art {
  position: relative;
  flex: 0 0 190px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 78%, #fff) 0%,
    var(--accent) 42%,
    var(--accent-deep) 100%);
  overflow: hidden;
}
.fcard__art::after {          /* soft sheen across the header, edge to edge */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 55%);
}
.fcard__icon { width: 68px; height: 68px; color: #fff; position: relative; z-index: 1; }
/* photo fills the art panel; the sheen (::after) + tag sit above it */
.fcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard__art-tag {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 1;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: rgba(255, 255, 255, .92);
  padding: 4px 9px;
  border-radius: 100px;
}

.fcard__body { display: flex; flex-direction: column; padding: 16px 20px 18px; flex: 1; min-height: 0; }
.fcard__name {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 1.18rem;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.fcard__arrow { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; transition: transform .3s var(--ease-out); }
.fcard:hover .fcard__arrow { transform: translateX(4px); }
.fcard__desc { font-size: .9rem; color: var(--body); line-height: 1.5; }

/* Every tier's approach cards carry a dark foot instead of paper, so the photo
   above has something to sit against.

   The foot is TIER-COLOURED — Light reads green, Medium bronze, Hard rust — so
   difficulty is legible at a glance instead of every card looking identical.

   These are not the raw accents. Dropping #7c9a64 / #d69a2e / #c05b3a straight in
   goes muddy and illegible; each ink is that tier's OWN hue taken down to ~15%
   lightness with saturation held up, so the three stay a family. Contrast with
   the white title is 13–15:1, and 8.3–9.2:1 for the 76%-white description —
   comfortably past WCAG AAA. See --sage-ink / --amber-ink / --terra-ink. */
.tierrow--light { --card-ink: var(--sage-ink); }
.tierrow--med   { --card-ink: var(--amber-ink); }
.tierrow--hard  { --card-ink: var(--terra-ink); }

.tierrow .fcard { border-color: var(--card-ink); }
.tierrow .fcard__body { background: var(--card-ink); }
.tierrow .fcard__name { color: #fff; }
.tierrow .fcard__desc { color: rgba(255, 255, 255, .76); }
/* the tier accent lifted toward white — raw terra and amber both go muddy
   against the deep green, this keeps the arrow tied to its tier and legible */
.tierrow .fcard__arrow { color: color-mix(in srgb, var(--accent) 62%, #fff); }

/* ── Section CTA — bold, modern invite panel ─────────────────── */
/* plain centred invite — no panel, straight on the page */
.tiers__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 2.4vw, 30px);
  margin: clamp(56px, 7vw, 96px) auto 0;   /* breathing room above, centred */
}
.tiers__cta-title {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: min(2.5rem, 5.4vw);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
/* gold button, matching the Explore-the-Atlas CTA */
.tiers__cta .btn--primary {
  --btn-fg: var(--herb-deep);
  background: #ffb81c;
  color: var(--herb-deep);
  font-weight: 800;
  box-shadow:
    0 14px 30px -10px rgba(255, 184, 28, .55),
    0 0 0 6px rgba(255, 184, 28, .12);
}
.tiers__cta .btn--primary:hover {
  background: #ffc63f;
  color: var(--herb-deep);
  box-shadow:
    0 20px 42px -12px rgba(255, 184, 28, .65),
    0 0 0 8px rgba(255, 184, 28, .18);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tiersteps { display: none; }
  .tiergrid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; margin-top: clamp(24px, 4vw, 40px); }
}
/* too narrow to hold the line without overflowing — let it wrap again */
@media (max-width: 560px) {
  .tiers__cta-title { white-space: normal; font-size: clamp(1.6rem, 7vw, 2rem); max-width: 20ch; }
}

/* ═══════════════════════════════════════════════════════════════════
   PROCESS
   ═══════════════════════════════════════════════════════════════════ */
.process { background: var(--paper); }

/* the shared measure wraps the title — let it run wide on one line */
.process .sechead--center { max-width: none; }
.process .sechead__title {
  white-space: nowrap;
  font-size: min(3.4rem, 5.6vw);
}

/* ── Four steps, side by side ────────────────────────────────── */
/* rows are declared here and inherited by every card via subgrid, so the title,
   rule, chip and price line up across all four however the copy wraps */
.psteps {
  --gap: clamp(16px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  column-gap: var(--gap);
  row-gap: 0;   /* the subgrid inherits row gaps — keep them off inside the cards */
  margin-top: clamp(34px, 5vw, 54px);
}

/* tinted card, bordered in its own tone — matches the tier cards */
.pstep {
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  padding: clamp(24px, 2.3vw, 32px) clamp(16px, 1.7vw, 24px) clamp(16px, 1.7vw, 22px);
  border-radius: 18px;
  border: 2px solid var(--tone);
  /* header wash — tone gradient at the top, fading into the card */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone-wash) 92%, #fff) 0%,
    color-mix(in srgb, var(--tone-wash) 40%, #fff) 30%,
    var(--white) 58%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 26px 50px -28px color-mix(in srgb, var(--tone) 45%, rgba(22, 49, 31, .4)),
    0 6px 16px -10px rgba(22, 49, 31, .18);
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out);
}
/* full-width colour bar across the top, tinted to the step's tone */
.pstep::before {
  content: "";
  position: absolute;
  /* spans the whole card box (over the 2px border) and carries the card's own
     radius, so the 8px strip is clipped by the same curve as the edge */
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--tone), var(--tone-deep)) no-repeat top / 100% 8px;
  pointer-events: none;
}
.pstep:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 32px 58px -28px color-mix(in srgb, var(--tone) 52%, rgba(22, 49, 31, .5)),
    0 8px 20px -12px rgba(22, 49, 31, .18);
}

/* number on a raised pearl disc, title alongside */
.pstep__head { display: flex; align-items: center; gap: 12px; }
.pstep__n {
  display: grid; place-items: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  /* glossy cream sphere — light from above, tone-tinted at the base */
  background: radial-gradient(78% 70% at 50% 24%,
    #fff 0%,
    color-mix(in srgb, var(--tone-wash) 45%, #fff) 58%,
    color-mix(in srgb, var(--tone-wash) 92%, #fff) 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, .95),
    inset 0 -3px 6px -2px color-mix(in srgb, var(--tone) 24%, transparent),
    0 6px 13px -4px color-mix(in srgb, var(--tone) 34%, transparent),
    0 2px 4px rgba(22, 49, 31, .1);
  color: var(--tone-deep);
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: 1rem;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
}
.pstep__name {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  /* every step title holds on a single line beside its number */
  font-size: clamp(.9rem, 1.2vw, 1.22rem);
  white-space: nowrap;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
/* short dotted rule under the title, in the step's tone */
.pstep__rule {
  width: 54px; height: 2px;
  margin: 10px 0 0 54px;   /* clears the 42px disc + its 12px gap */
  background-image: radial-gradient(color-mix(in srgb, var(--tone) 70%, transparent) 1px, transparent 1px);
  background-size: 5px 2px;
}

.pstep__body {
  align-self: start;
  margin-top: 14px;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--body);
}

/* duration / commitment chip */
.pstep__tag {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: start;
  justify-self: start;
  margin: 16px 0 14px;   /* clear of the hairline above the price */
  padding: 6px 13px;
  border-radius: 100px;
  /* filled pill in the step's tone — same treatment as the tier badges */
  background: var(--tone);
  color: #fff;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--sh-sm);
}
.pstep__tag svg { width: 13px; height: 13px; flex: none; }

/* price sits at the foot, above a hairline, so all four line up */
.pstep__price {
  align-self: end;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}
.pstep__price span {
  display: block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 2px;
}
.pstep__price strong {
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: clamp(1.5rem, 2.1vw, 1.9rem);
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
/* circled arrow riding the gap between two cards */
.pstep__link {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--gap) / 2);
  transform: translate(50%, -50%);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--tone) 55%, var(--white));
  background: linear-gradient(180deg, var(--tone), var(--tone-deep));
  color: #fff;
  box-shadow:
    0 8px 18px -8px color-mix(in srgb, var(--tone) 60%, transparent),
    0 2px 6px rgba(22, 49, 31, .18);
  z-index: 2;
}
.pstep__link svg { width: 18px; height: 18px; stroke-width: 2.4; }

/* tone map */
.pstep--free    { --tone: var(--herb);  --tone-deep: var(--herb-deep); --tone-wash: var(--herb-wash); }
.pstep--paid    { --tone: var(--amber); --tone-deep: var(--amber-deep); --tone-wash: var(--amber-wash); }
.pstep--included{ --tone: var(--sage);  --tone-deep: var(--sage-deep); --tone-wash: var(--sage-wash); }
.pstep--ongoing { --tone: var(--terra); --tone-deep: var(--terra-deep); --tone-wash: var(--terra-wash); }

/* ── CTA ─────────────────────────────────────────────────────── */
.process__cta { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .psteps { grid-template-columns: repeat(2, 1fr); }
  /* row-gap is off for the subgrid, so the first row carries its own spacing */
  .pstep:nth-child(-n + 2) { margin-bottom: var(--gap); }
  /* only the arrow between the two columns of each row makes sense */
  .pstep:nth-child(2n) .pstep__link { display: none; }
}
@media (max-width: 620px) {
  .process .sechead__title { white-space: normal; font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .psteps { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .pstep:not(:last-child) { margin-bottom: var(--gap); }
  .pstep__link { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   COHORTS
   ═══════════════════════════════════════════════════════════════════ */
.cohorts { background: var(--paper-2); }

/* ══ Colour themes ══════════════════════════════════════════════
   One hue per intake, set on both the card and the slider shell. Each theme
   supplies the light accent trio (headline, outcome rail, chips), the three
   stops of the dark pricing panel, and the metallic that sits on that panel.
   Everything else on the card is identical from cohort to cohort. */
.cxt--terra {
  --cx-accent: var(--terra);
  --cx-accent-deep: var(--terra-deep);
  --cx-accent-wash: var(--terra-wash);
  --cx-panel-1: #4a2113;
  --cx-panel-2: #63301c;
  --cx-panel-3: #8a4326;
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f0cf87;
  --cx-glow-hover: #dcb45f;
}
.cxt--pom {
  --cx-accent: var(--pom);
  --cx-accent-deep: var(--pom-deep);
  --cx-accent-wash: var(--pom-wash);
  --cx-panel-1: #5c1826;
  --cx-panel-2: #7a2233;
  --cx-panel-3: #9c2c41;
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f3d79b;
  --cx-glow-hover: #dcb45f;
}
.cxt--peacock-blue {
  --cx-accent: var(--peacock-blue);
  --cx-accent-deep: var(--peacock-blue-deep);
  --cx-accent-wash: var(--peacock-blue-wash);
  --cx-panel-1: #142c4c;
  --cx-panel-2: #1d3f6b;
  --cx-panel-3: #2a568c;
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f0cf87;
  --cx-glow-hover: #dcb45f;
}
.cxt--herb {
  --cx-accent: var(--herb);
  --cx-accent-deep: var(--herb-deep);
  --cx-accent-wash: var(--herb-wash);
  --cx-panel-1: var(--herb-deep);
  --cx-panel-2: #1d4229;
  --cx-panel-3: var(--herb-700);
  --cx-glow: var(--peacock-gold);
  --cx-glow-soft: #f0cf87;
  --cx-glow-hover: #dcb45f;
}
/* gold accent, so the panel goes deep bronze and the metallic lifts to champagne
   — plain peacock-gold on a gold panel would have no separation */
.cxt--gold {
  --cx-accent: var(--peacock-gold-deep);
  --cx-accent-deep: #7d5c1f;
  --cx-accent-wash: var(--peacock-gold-wash);
  --cx-panel-1: #40300f;
  --cx-panel-2: #574118;
  --cx-panel-3: #7a5b22;
  --cx-glow: #e6c684;
  --cx-glow-soft: #f6e3bb;
  --cx-glow-hover: #f2d99f;
}
/* wide enough that the right column doesn't stack tall, but tighter than wrap-wide */
.cohorts .wrap { max-width: 1180px; }

/* the shared 720px cap forces the title onto two lines — let it run the full measure */
.cohorts .sechead--center { max-width: none; }
.cohorts .sechead__title {
  white-space: nowrap;
  font-size: min(3.4rem, 4.6vw);
}

/* ══ Slider shell ═══════════════════════════════════════════════ */
.cxs {
  position: relative;
  margin-top: clamp(34px, 5vw, 54px);
}
.cxs__stage { position: relative; }
.cxs__slide { cursor: grab; }
.cxs__slide:active { cursor: grabbing; }

.cxs__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-md);
  cursor: pointer;
  z-index: 3;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.cxs__arrow:hover { background: var(--cx-accent); color: #fff; border-color: var(--cx-accent); }
.cxs__arrow svg { width: 20px; height: 20px; }
.cxs__arrow--prev { left: -22px; }
.cxs__arrow--prev svg { transform: rotate(90deg); }
.cxs__arrow--next { right: -22px; }
.cxs__arrow--next svg { transform: rotate(-90deg); }

.cxs__dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.cxs__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--line-strong);
  transition: width .3s var(--ease-out), background .3s var(--ease-out);
}
.cxs__dot.is-active { width: 26px; border-radius: 100px; background: var(--cx-accent); }

/* ══ Poster card ════════════════════════════════════════════════ */
.cx {
  --pad: clamp(14px, 1.6vw, 22px);
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: clamp(16px, 2.2vw, 34px);
  padding: var(--pad);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;                 /* lets the photo bleed to the card edge */
  /* lifted off the cream band on every side: an ambient ring with no offset so the
     top and side edges read as clearly as the foot, over a deeper cast shadow */
  box-shadow:
    0 0 34px -4px rgba(22, 49, 31, .15),
    0 18px 46px -22px rgba(22, 49, 31, .42),
    0 6px 16px -10px rgba(22, 49, 31, .16);
}

/* Photo fills the LEFT PORTION of the top-left block, bleeding out to the card's top
   and left edges and fading out before the headline so the type sits on clean cream.
   It isn't cut short at the foot by a magic offset: the results panel paints over its
   lower end, so that seam always lands exactly at the top of the results strip
   however tall the card gets. */
.cx__photo {
  position: absolute;
  top: calc(-1 * var(--pad));
  /* pushed past the card edge (and clipped by it) so the subject sits further left.
     A smaller bleed pulls the whole photo right — set `photoBleed` on the cohort
     when a subject needs more room on the left than `photoPos` alone can give. */
  left: calc(-1 * var(--pad) - var(--cx-photo-bleed, clamp(48px, 6.4vw, 104px)));
  right: 42%;
  bottom: 0;
  margin: 0;
  background: var(--paper-3);
  /* dissolves before the text column, and at the foot into the results panel */
  -webkit-mask-image:
    linear-gradient(to right, #000 66%, transparent 100%),
    linear-gradient(to bottom, #000 68%, transparent 92%);
  mask-image:
    linear-gradient(to right, #000 66%, transparent 100%),
    linear-gradient(to bottom, #000 68%, transparent 92%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* The slot is a tall 1:1.9 crop, so `cover` scales to the height and the source's
   width is trimmed. Which part of that width survives is per-photo: a subject
   sitting far left wants 0%, a centred subject needs the window pushed right so
   she lands clear of the fade. Set `photoPos` on the cohort to tune it. */
.cx__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--cx-photo-pos, 0%) center;
  display: block;
}

/* ── Left column ──────────────────────────────────────────────── */
.cx__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(11px, 1.3vw, 17px);
}
.cx__top { position: relative; z-index: 1; display: flex; flex: 1; align-items: center; }

/* headline occupies the open cream to the right of the photo — no scrim needed,
   the photo has already faded out by the time it reaches this column */
.cx__intro {
  width: 48%;
  margin-left: auto;
  padding: clamp(14px, 1.8vw, 24px) 0;
  text-align: center;
}
/* "Healthier. Better You." lockup: heavy sans over an overlapping script */
.cx__title { display: block; line-height: 1; }
.cx__title-main {
  display: block;
  font-family: var(--heading);
  font-weight: 800;
  /* sized for the longest title ("Blood Sugar Balance"), not for "PCOS" */
  font-size: clamp(1.9rem, 3.9vw, 3.2rem);
  line-height: .96;
  letter-spacing: -.01em;
  color: var(--cx-panel-1);
  overflow-wrap: break-word;   /* last resort, so a long word can never bleed out */
}
.cx__title-script {
  display: block;
  font-family: var(--script);
  /* Great Vibes ships 400 only — without this it inherits the 800 from
     .cx__title and the browser fakes a bold, thickening the script */
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: .95;
  letter-spacing: 0;
  /* the cohort's accent, a shade up from the near-black title above
     so the two lines still read apart */
  color: var(--cx-accent);
  /* sits just under the sans — enough for the C's ascender to reach its baseline,
     not so much that the script cuts through the letterforms */
  margin-top: -.05em;
}

.cx__rule {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: clamp(9px, 1.1vw, 14px) auto;
  max-width: 230px;
  color: var(--cx-accent);
}
.cx__rule span { flex: 1; height: 1px; background: var(--line-strong); }
.cx__rule i { font-style: normal; font-size: .8rem; }

.cx__tagline {
  font-family: var(--sans);
  font-size: clamp(.92rem, 1.15vw, 1.08rem);
  font-weight: 500;
  line-height: 1.7;
  color: var(--body);
}
.cx__tagline span { display: block; }

/* flat accent wash — a highlighted fact, not a button; kept narrow so it
   never runs under the photo column */
.cx__starts {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  margin-top: clamp(13px, 1.5vw, 18px);
  padding: clamp(7px, .8vw, 9px) clamp(12px, 1.3vw, 16px);
  border-radius: 9px;
  background: color-mix(in srgb, var(--cx-accent) 13%, transparent);
  white-space: nowrap;   /* the date never breaks across two lines */
  color: var(--cx-panel-1);
  font-family: var(--sans);
  font-size: clamp(.7rem, .85vw, .8rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cx__starts-icon { width: 16px; height: 16px; flex: none; color: var(--cx-accent); }

/* ── Results strip ────────────────────────────────────────────── */
/* full-bleed cream panel: covers the bottom of the photo layer so the stats
   always sit on clean paper */
.cx__results {
  position: relative;
  flex: none;
  margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: clamp(14px, 1.7vw, 20px) var(--pad) var(--pad);
  background: linear-gradient(to bottom,
    transparent 0,
    color-mix(in srgb, var(--paper) 70%, transparent) 34px,
    var(--paper) 76px,
    var(--paper) 100%);
}
.cx__outcomes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0; padding: 0;
}
/* stat rail, mirroring the Atlas band (.astat) in the cohort's accent */
.cx__outcome {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 4px clamp(6px, 1.2vw, 14px);
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(.72rem, .92vw, .82rem);
  color: var(--body);
  line-height: 1.4;
}
/* feathered divider, fading out at top and bottom */
.cx__outcome + .cx__outcome::before {
  content: "";
  position: absolute;
  left: 0; top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--cx-accent) 34%, transparent),
    transparent);
}
/* ring chip — accent outline over a soft inner wash, not a filled disc */
.cx__outcome-icon {
  display: grid; place-items: center;
  width: clamp(46px, 4.4vw, 60px);
  height: clamp(46px, 4.4vw, 60px);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--cx-accent) 45%, transparent);
  background: radial-gradient(120% 120% at 50% 22%,
    color-mix(in srgb, var(--cx-accent-wash) 85%, transparent),
    color-mix(in srgb, var(--paper) 60%, transparent) 74%);
  color: var(--cx-accent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--cx-accent) 5%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .7);
}
.cx__outcome-icon svg { width: clamp(20px, 2vw, 26px); height: clamp(20px, 2vw, 26px); }

/* diamond flourish on a faded rule, between the chip and the stat */
.cx__outcome-flourish {
  position: relative;
  width: clamp(52px, 5.4vw, 82px);
  height: 9px;
  margin: 9px 0 6px;
}
.cx__outcome-flourish::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--cx-accent) 45%, transparent) 26%,
    color-mix(in srgb, var(--cx-accent) 45%, transparent) 74%,
    transparent);
}
.cx__outcome-flourish::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--cx-accent);
  box-shadow: 0 0 0 4px var(--paper);   /* break the rule cleanly around the diamond */
}

/* every stat identical — same face, size and casing across all four */
.cx__outcome strong {
  font-family: var(--sans);
  font-size: clamp(.8rem, 1.02vw, .92rem);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cx-accent-deep);
  line-height: 1.25;
  font-variant-numeric: lining-nums;
}

/* ── Right column ─────────────────────────────────────────────── */
/* the right half sits on its own soft wash — a green/gold glow with a faint dot
   grid — so the column reads as a panel rather than bare paper */
.cx__right {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, .9vw, 11px);
  padding: clamp(10px, 1.2vw, 16px) clamp(10px, 1.2vw, 16px) clamp(12px, 1.4vw, 18px);
  border-radius: 16px;
  background:
    radial-gradient(520px 260px at 88% -8%, color-mix(in srgb, var(--cx-glow) 20%, transparent), transparent 66%),
    radial-gradient(460px 320px at 4% 104%, color-mix(in srgb, var(--cx-accent) 16%, transparent), transparent 62%),
    linear-gradient(170deg, var(--white) 0%, color-mix(in srgb, var(--paper-2) 70%, var(--white)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.cx__right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: radial-gradient(color-mix(in srgb, var(--cx-panel-1) 12%, transparent) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: radial-gradient(120% 110% at 78% 0%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 110% at 78% 0%, #000, transparent 70%);
}

/* script head, flanked by hairlines that fade out toward the card edges */
.cx__coaches-head {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
  padding-bottom: 2px;
}
.cx__coaches-head span { flex: 1; height: 1px; }
.cx__coaches-head span:first-child {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cx-glow) 70%, transparent));
}
.cx__coaches-head span:last-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--cx-glow) 70%, transparent), transparent);
}

.cx__coaches { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1vw, 13px); }
.cx__coach {
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: var(--sh-sm);
}
/* fixed height (not aspect-ratio + max-height, which shrinks the width too) so the
   photo always spans the full tile while staying short enough to keep the card compact */
.cx__coach-photo {
  position: relative;
  width: 100%;
  height: clamp(120px, 13vw, 165px);
  background: var(--paper-3);
}
/* framed just under the top of the source so the shorter tile never clips heads */
.cx__coach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; display: block; }
.cx__coach-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--cx-accent);
  background:
    repeating-linear-gradient(135deg, transparent, transparent 9px,
      color-mix(in srgb, var(--cx-accent) 7%, transparent) 9px,
      color-mix(in srgb, var(--cx-accent) 7%, transparent) 18px),
    var(--cx-accent-wash);
}
.cx__coach-name {
  padding: 6px 10px 7px;
  text-align: center;
  background: var(--cx-panel-1);
  color: #fff;
}
.cx__coach-name strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(.85rem, 1.05vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
}
.cx__coach-name span { display: block; margin-top: 2px; font-size: .68rem; color: rgba(255,255,255,.86); }

/* facts — open rows on the paper, feathered dividers (Atlas), values flush right */
.cx__facts {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
}
.cx__fact {
  position: relative;
  display: grid;
  grid-template-columns: 32px auto 1fr;
  align-items: center;
  gap: 12px;
  padding: clamp(8px, .95vw, 11px) 2px;
}
/* hairline that fades out at both ends, as on the Atlas stat rail */
.cx__fact + .cx__fact::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--line-strong) 90%, transparent) 12%,
    color-mix(in srgb, var(--line-strong) 90%, transparent) 88%,
    transparent);
}
/* glossy raised puck — same recipe as .story__ico in the hero cards */
.cx__fact-icon {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--cx-accent-deep);
  background: radial-gradient(120% 120% at 32% 24%, #ffffff, var(--paper-2) 118%);
  box-shadow:
    0 4px 10px -3px rgba(22, 49, 31, .2),
    0 2px 4px -2px rgba(22, 49, 31, .12),
    0 1px 0 rgba(255, 255, 255, .95) inset,
    0 -3px 6px rgba(22, 49, 31, .05) inset;
}
.cx__fact-icon svg { width: 16px; height: 16px; }
.cx__fact-label {
  font-family: var(--sans);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
}
.cx__fact-value {
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  text-align: right;
}
.cx__fact-value span { display: block; }

/* ── Pricing panel ────────────────────────────────────────────── */
/* deep accent panel — the one dark block on the card, so the price carries weight */
.cx__price {
  position: relative;
  margin-top: auto;
  padding: clamp(16px, 1.8vw, 22px) clamp(13px, 1.5vw, 18px) clamp(11px, 1.3vw, 15px);
  border: 1px solid color-mix(in srgb, var(--cx-glow) 34%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 12% 0%,
      color-mix(in srgb, var(--cx-glow) 16%, transparent) 0%,
      transparent 58%),
    linear-gradient(165deg, var(--cx-panel-1) 0%, var(--cx-panel-2) 62%, var(--cx-panel-3) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 18px 34px -24px var(--cx-panel-1);
}

/* "Limited spots" rides the panel's top edge as a gold badge */
.cx__price-note {
  position: absolute;
  top: 0; left: clamp(13px, 1.5vw, 18px);
  transform: translateY(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cx-glow);
  color: var(--cx-panel-1);
  font-family: var(--sans);
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  box-shadow: 0 6px 14px -8px rgba(22, 49, 31, .6);
}

.cx__price-cols {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
  gap: clamp(12px, 1.6vw, 22px);
  align-items: center;
}
.cx__price-money { text-align: center; }

/* price and the struck original sit on one baseline */
.cx__price-now {
  font-family: var(--heading);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.2vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.cx__price-was {
  margin-left: 8px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  text-decoration-color: color-mix(in srgb, var(--cx-glow) 75%, transparent);
  text-decoration-thickness: 1.5px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.cx__price-caption {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cx-glow) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--cx-glow) 45%, transparent);
  color: var(--cx-glow-soft);
  font-family: var(--sans);
  font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}

.cx__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cx__perks li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans);
  font-size: clamp(.76rem, .95vw, .85rem);
  font-weight: 500;
  color: rgba(255, 255, 255, .94);
  line-height: 1.3;
}
.cx__perk-tick {
  display: grid; place-items: center;
  flex: none;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cx-glow) 22%, transparent);
  color: var(--cx-glow-soft);
}
.cx__perk-tick svg { width: 10px; height: 10px; }

.cx__cta {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: clamp(13px, 1.5vw, 18px);
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--cx-glow);
  color: var(--cx-panel-1);
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(.8rem, 1vw, .92rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--cx-glow) 16%, transparent),
    0 14px 26px -14px rgba(22, 49, 31, .8);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* sheen sweep on hover */
.cx__cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform .6s var(--ease-out);
}
.cx__cta:hover {
  transform: translateY(-2px);
  background: var(--cx-glow-hover);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--cx-glow) 22%, transparent),
    0 20px 32px -16px rgba(22, 49, 31, .9);
}
.cx__cta:hover::after { transform: translateX(100%); }
.cx__cta svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.cx__cta:hover svg { transform: translateX(4px); }

.cx__footnote {
  margin-top: 9px;
  text-align: center;
  font-family: var(--sans);
  font-size: .72rem;
  color: rgba(240, 247, 240, .68);
}

/* ── Section foot ─────────────────────────────────────────────── */
.cohorts__foot {
  margin-top: 34px;
  text-align: center;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--body);
}
.cohorts__foot a { font-weight: 700; color: var(--herb); }
.cohorts__foot a:hover { color: var(--herb-700); }

/* ══ Compact desktop poster ═════════════════════════════════════
   The two-column card must clear a laptop viewport in one screen (~900px tall,
   less the stuck header). Card height is set by the right column — coaches,
   facts, pricing — so the tightening lands there first, with a lighter pass on
   the results rail. Nothing is removed; every block just gives back the slack
   in its own padding, gaps and type. Kept behind the 1000px breakpoint so the
   stacked mobile layout below is untouched. */
@media (min-width: 1001px) {
  .cx { --pad: clamp(12px, 1.2vw, 16px); }
  .cx__left { gap: clamp(9px, 1vw, 13px); }
  .cx__intro { padding: clamp(8px, 1.2vw, 14px) 0; }
  .cx__starts { margin-top: clamp(10px, 1.2vw, 14px); }

  .cx__results { padding: clamp(10px, 1.2vw, 14px) var(--pad) var(--pad); }
  .cx__outcome-icon { width: clamp(40px, 3.6vw, 50px); height: clamp(40px, 3.6vw, 50px); }
  .cx__outcome-icon svg { width: clamp(18px, 1.7vw, 22px); height: clamp(18px, 1.7vw, 22px); }
  .cx__outcome-flourish { margin: 6px 0 4px; }

  .cx__right {
    gap: clamp(6px, .7vw, 9px);
    padding: clamp(9px, 1vw, 12px) clamp(9px, 1vw, 13px) clamp(10px, 1.1vw, 14px);
  }
  .cx__coaches-head { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
  /* the single biggest block on the column — keyed to viewport height so short
     laptops crop the tile rather than pushing the card past the fold */
  .cx__coach-photo { height: clamp(96px, 13.5vh, 148px); }
  .cx__coach-name { padding: 4px 8px 5px; }
  .cx__coach-name strong { font-size: clamp(.8rem, .95vw, .92rem); }
  .cx__coach-name span { font-size: .64rem; }

  .cx__fact { padding: clamp(5px, .6vw, 7px) 2px; }
  .cx__fact-value { font-size: .72rem; line-height: 1.35; }

  .cx__price {
    padding: clamp(13px, 1.5vw, 17px) clamp(12px, 1.4vw, 16px) clamp(9px, 1vw, 12px);
  }
  .cx__price-now { font-size: clamp(1.8rem, 2.5vw, 2.3rem); }
  .cx__price-caption { margin-top: 5px; }
  .cx__perks { gap: 5px; }
  .cx__perks li { font-size: clamp(.72rem, .88vw, .8rem); }
  .cx__cta { margin-top: clamp(10px, 1.1vw, 13px); padding: 10px 18px; }
  .cx__footnote { margin-top: 6px; font-size: .68rem; }
}

/* ══ Responsive ═════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .cxs__arrow--prev { left: 6px; }
  .cxs__arrow--next { right: 6px; }
}
@media (max-width: 1000px) {
  /* stacked: photo becomes a banner across the top, fading down into the headline */
  .cx { grid-template-columns: 1fr; }
  .cx__photo {
    right: calc(-1 * var(--pad));
    bottom: auto;
    height: 340px;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 58%, transparent 99%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .cx__photo img { object-position: 50% 30%; }
  .cx__left { padding-top: 230px; }
  .cx__intro { width: 100%; margin-left: 0; background: none; }
}
@media (max-width: 700px) {
  .cx__photo { height: 280px; }
  .cx__left { padding-top: 180px; }
  .cx__outcomes { grid-template-columns: 1fr 1fr; gap: 18px 0; }
  .cx__outcome:nth-child(odd)::before { display: none; }
  .cx__price-cols { grid-template-columns: 1fr; }
  .cx__fact { grid-template-columns: 32px 1fr; row-gap: 4px; }
  .cx__fact-value { grid-column: 2; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════
   CASE STUDIES
   ═══════════════════════════════════════════════════════════════════ */
.cases { background: var(--paper); }

/* ══ Coverflow slider ═══════════════════════════════════════════
   Every card is stacked in the same grid cell, so the stage is always as tall
   as the tallest case and never jumps between slides. The active card sits
   centred; its neighbours are pushed out, scaled down and blurred, peeking a
   sliver past each edge of the active card. */
.cases__slider {
  position: relative;
  margin-top: clamp(34px, 5vw, 54px);
}
.cases__stage {
  display: grid;
  padding: 10px 0 22px;      /* room for the cards' shadows */
  cursor: grab;
}
.cases__stage:active { cursor: grabbing; }

.cases__slide {
  grid-area: 1 / 1;
  /* wide landscape card; the shift is tuned so a scaled-down neighbour's outer
     edge lands on the wrap edge — a sliver peeks, nothing is clipped */
  width: 84%;
  justify-self: center;
  transform: translateX(calc(var(--off) * 17%)) scale(.86);
  filter: blur(3px);
  opacity: .5;
  cursor: pointer;
  transition:
    transform .5s var(--ease-out),
    filter .5s var(--ease-out),
    opacity .5s var(--ease-out);
}
.cases__slide.is-active {
  transform: translateX(0) scale(1);
  filter: none;
  opacity: 1;
  cursor: default;
}
/* kept in the grid to hold the height, but invisible and untouchable */
.cases__slide.is-far { opacity: 0; pointer-events: none; }
.cases__slide:not(.is-active) .case { pointer-events: none; }

.cases__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--sh-md);
  cursor: pointer;
  z-index: 5;
  transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.cases__arrow:hover { background: var(--herb); color: #fff; border-color: var(--herb); }
.cases__arrow svg { width: 20px; height: 20px; }
.cases__arrow--prev { left: -22px; }
.cases__arrow--prev svg { transform: rotate(90deg); }
.cases__arrow--next { right: -22px; }
.cases__arrow--next svg { transform: rotate(-90deg); }

.cases__dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.cases__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--line-strong);
  transition: width .3s var(--ease-out), background .3s var(--ease-out);
}
.cases__dot.is-active { width: 26px; border-radius: 100px; background: var(--herb); }

/* ══ The card ═══════════════════════════════════════════════════
   Portrait + overlapping pull-quote on the left, the story on the right. */
.case {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.6fr);
  align-items: center;
  gap: clamp(26px, 4vw, 54px);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-wash), transparent 55%),
    var(--white);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(28px, 3.4vw, 44px) clamp(28px, 3.6vw, 48px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 30px 56px -34px rgba(22, 49, 31, .5),
    0 6px 16px -10px rgba(22, 49, 31, .16);
  transition: box-shadow .4s var(--ease-out);
}
.cases__slide.is-active .case:hover { box-shadow: var(--sh-lg); }

/* ── Left: portrait with the quote card tucked under it ─────────── */
.case__media {
  position: relative;
  padding-bottom: clamp(44px, 5.4vw, 64px);   /* room for the overlapping quote */
}
.case__photo {
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 22px 44px -26px rgba(22, 49, 31, .5);
}
.case__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}

/* pull-quote, overlapping the foot of the portrait */
.case__quote {
  position: absolute;
  left: 24%;
  right: -22px;
  bottom: 0;
  margin: 0;
  padding: 16px 18px 15px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px -22px rgba(22, 49, 31, .45);
}
.case__quote blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  line-height: 1.28;
  color: var(--ink);
}
/* ── Right: stars, title, story, highlights ─────────────────────── */
.case__body { min-width: 0; }

.case__stars { display: flex; gap: 6px; color: var(--peacock-gold); }
.case__stars svg { width: clamp(18px, 1.7vw, 24px); height: clamp(18px, 1.7vw, 24px); }

/* same face as the hero's process cards — Saans, heading weight */
.case__title {
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--heading);
  font-weight: var(--wt-heading);
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--herb-deep);
  font-variant-numeric: lining-nums;
}

.case__summary {
  font-size: clamp(.95rem, 1.1vw, 1.08rem);
  line-height: 1.62;
  color: var(--body);
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.case__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* verified-outcome chips: a hairline-bordered pill on a pale herb gradient rather
   than a flat wash, so each one reads as a stamped result and not a filled label.
   The inset highlight along the top edge is what gives it the raised feel. */
.case__highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 17px 7px 8px;
  border-radius: 100px;
  border: 1px solid color-mix(in srgb, var(--herb) 26%, transparent);
  background: linear-gradient(152deg,
    #fff 0%,
    color-mix(in srgb, var(--herb-wash) 72%, #fff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 6px 14px -10px rgba(22, 49, 31, .5);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .004em;
  color: var(--herb-deep);
  white-space: nowrap;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out),
              border-color .3s var(--ease-out);
}
.case__highlights li:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--herb) 48%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 12px 20px -12px rgba(22, 49, 31, .55);
}
/* glossy tick puck, same recipe as the raised icons on the cohort card */
.case__tick {
  width: 22px; height: 22px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--herb) 0%, var(--herb-deep) 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 3px 7px -3px rgba(22, 49, 31, .55);
}
.case__tick svg { width: 12px; height: 12px; }

.cases__disclaimer {
  margin-top: 30px;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cases__arrow--prev { left: 2px; }
  .cases__arrow--next { right: 2px; }
  .case__highlights li { font-size: .8rem; padding: 7px 13px 7px 8px; }
}
/* less room to peek — widen the card and pull the neighbours in */
@media (max-width: 980px) {
  .cases__slide { width: 92%; transform: translateX(calc(var(--off) * 10%)) scale(.9); }
  .case { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr); }
}
/* no room to peek without clipping: show the active card only */
@media (max-width: 820px) {
  .cases__slide { width: 100%; transform: none; opacity: 0; }
  .cases__slide.is-active { opacity: 1; }
  .cases__arrow { width: 38px; height: 38px; }
}
/* stack: portrait on top, story beneath */
@media (max-width: 700px) {
  .case {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 20px 26px;
  }
  .case__media {
    max-width: 340px;
    margin: 0 auto;
    padding-bottom: 50px;
  }
  .case__photo img { aspect-ratio: 1 / 1; }
  .case__quote { left: 16%; right: 0; }
  .case__title { font-size: clamp(1.5rem, 6vw, 1.9rem); }
}
@media (max-width: 460px) {
  .case__highlights li { width: 100%; white-space: normal; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════════ */
.faq { background: var(--paper-2); }
.faq__inner { max-width: 820px; }

/* the 820px measure wraps the title — let it run wide and stay on one line */
.faq .sechead--center { max-width: none; }
.faq .sechead__title {
  white-space: nowrap;
  font-size: min(3.1rem, 5.2vw);
}

.faq__list { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.faq__item.is-open { border-color: var(--line-strong); box-shadow: var(--sh-sm); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 24px;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}
.faq__chev { width: 20px; height: 20px; color: var(--herb); flex-shrink: 0; transition: transform .35s var(--ease-out); }
.faq__item.is-open .faq__chev { transform: rotate(180deg); }

.faq__a-wrap { overflow: hidden; }
.faq__a { padding: 0 24px 22px; color: var(--body); line-height: 1.6; font-size: .98rem; }

.faq__cta {
  margin-top: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.faq__cta p { font-family: var(--serif); font-size: 1.35rem; font-style: italic; color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   CLOSING CTA
   ═══════════════════════════════════════════════════════════════════ */
.closing {
  position: relative;
  overflow: hidden;
  padding-block: clamp(90px, 13vw, 156px);
  text-align: center;
  background:
    radial-gradient(1100px 620px at 50% 12%, rgba(53,160,94,.20), transparent 62%),
    radial-gradient(700px 500px at 50% 120%, rgba(20,125,140,.16), transparent 60%),
    linear-gradient(180deg, #0c2b1b, var(--herb-deep) 60%, #0a2417);
  color: #eef4e8;
  scroll-margin-top: var(--header-h);
}
.closing__field { z-index: 0; opacity: .75; }
/* soft radial bloom behind the copy so the network flows into a glow at the CTA */
.closing__glow {
  position: absolute;
  z-index: 0;
  left: 50%; top: 52%;
  width: min(760px, 88vw); height: min(760px, 88vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(53,160,94,.28), rgba(53,160,94,.08) 42%, transparent 66%);
  pointer-events: none;
}
.closing__inner { position: relative; z-index: 1; max-width: 800px; }

.closing__title {
  font-size: clamp(2.3rem, 5.5vw, 4rem);
  line-height: 1.06;
  color: #fff;
  margin-bottom: 22px;
}
.closing__title em { font-style: normal; color: var(--herb-lime); font-weight: 700; }

.closing__sub {
  font-size: var(--fs-lead);
  color: rgba(240,246,235,.95);
  max-width: 52ch;
  margin: 0 auto 34px;
}
.closing__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
/* brighten the primary CTA so it pops off the dark-green field */
.closing .btn--hero {
  --btn-bg: linear-gradient(135deg, var(--herb-lime), var(--herb-bright));
  color: #0c2b1b;
  box-shadow: 0 16px 40px -10px rgba(134,187,60,.5),
              0 0 0 6px rgba(134,187,60,.16);
}
.closing .btn--hero:hover {
  --btn-bg: linear-gradient(135deg, var(--herb-lime), var(--herb-bright));
  box-shadow: 0 22px 52px -12px rgba(134,187,60,.6),
              0 0 0 9px rgba(134,187,60,.2);
}

.closing .btn--wa { --btn-bg: rgba(255,255,255,.08); --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.closing .btn--wa:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }
.closing__micro { font-size: .9rem; font-weight: 500; color: rgba(238,244,232,.9); }

/* ═══════════════════════════════════════════════════════════════════
   STATIC-PORT ADDITIONS
   Rules the React build applied as inline styles on the component.
   ═══════════════════════════════════════════════════════════════════ */

/* The closing-CTA canvas was positioned inline by the old <GoldNetwork>. */
.closing__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── FAQ accordion ─────────────────────────────────────────────────────
   All nine answers ship in the HTML so the page is readable and indexable
   without JavaScript; the closed ones collapse to zero height and animate
   open to their natural height, with no measuring in JS.

   The answer's bottom padding has to collapse too. A `0fr` track sizes to
   the item's min-content, and padding is part of that — leave it in and
   every closed row still contributes 22px of dead space.
   ─────────────────────────────────────────────────────────────────── */
.faq__a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .35s var(--ease-out), opacity .35s var(--ease-out);
}
.faq__item.is-open .faq__a-wrap { grid-template-rows: 1fr; opacity: 1; }
.faq__a-wrap > * { min-height: 0; }

.faq__a { padding-bottom: 0; transition: padding-bottom .35s var(--ease-out); }
.faq__item.is-open .faq__a { padding-bottom: 22px; }

/* No JS → show every answer rather than hiding them all. */
html:not(.js) .faq__a-wrap { grid-template-rows: 1fr; opacity: 1; }
html:not(.js) .faq__a { padding-bottom: 22px; }

/* ── Tap targets ───────────────────────────────────────────────────────
   The slider dots render at 8×8 and the menu button at 28×34 — well under
   the ~44px guideline, and genuinely fiddly on a phone. These rules grow
   the *hit area* only; every dot looks exactly the same as before.

   Width is capped at the dot's own width plus the flex gap, so neighbouring
   targets meet at the midpoint rather than overlapping (which would make
   taps land on the wrong dot).
   ─────────────────────────────────────────────────────────────────── */
.stack__dot,
.cxs__dot,
.cases__dot { position: relative; }

.stack__dot::after,
.cxs__dot::after,
.cases__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 8px);
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ═══════════════════════════════════════════════════════════════════
   UI/UX AUDIT FIXES — 2026-08-14
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero CTA: make the primary action actually look primary ───────────
   It was `background: var(--paper)` — the exact same cream as the page
   behind it — with a 1.5px hairline. Meanwhile the header's secondary
   "Book Free Call" is solid green. The single most important conversion
   action on the page was the faintest button on it.
   ─────────────────────────────────────────────────────────────────── */
.hero__book {
  background: linear-gradient(135deg, var(--herb-bright), var(--herb));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 32px -10px rgba(34, 114, 68, .55),
              0 0 0 6px rgba(53, 160, 94, .12);
}
.hero__book:hover {
  background: linear-gradient(135deg, var(--herb-bright), var(--herb-700));
  border-color: transparent;
  box-shadow: 0 20px 44px -12px rgba(34, 114, 68, .62),
              0 0 0 8px rgba(53, 160, 94, .16);
}
.hero__book-text strong { color: #fff; }
.hero__book-text span   { color: rgba(255, 255, 255, .82); }
.hero__book-icon { background: rgba(255, 255, 255, .16); color: #fff; }

/* ── Tier row labels ──────────────────────────────────────────────────
   The three approach rows carried no label at all — nothing said which
   row was Light, Medium or Hard. The tier colour alone can't carry that
   (and carries nothing for a colourblind visitor), so each row now names
   its own tier.
   ─────────────────────────────────────────────────────────────────── */
.tierrow__label {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 0 0 16px;
  padding-inline: var(--gutter);
}
.tierrow__chip {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--card-ink);
  padding: 5px 11px;
  border-radius: 100px;
}
.tierrow__name {
  font-family: var(--heading);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: var(--wt-heading);
  letter-spacing: -.01em;
  color: var(--ink);
}
.tierrow__count { font-size: .85rem; color: var(--muted); }
.tierrow + .tierrow { margin-top: clamp(30px, 4vw, 48px); }

@media (max-width: 560px) {
  .tierrow__label { gap: 6px 10px; }
  .tierrow__name { width: 100%; }
}