/* ============================================================
   PATIENT STORIES HUB — /patient-stories
   Layered on base.css + v3.css + v9.css. Same tokens, type and
   accent system, so it tracks every palette automatically.
   Design rule (from content guide): person first, outcome never.
   The grid must not read as a success-rate scoreboard.
   ============================================================ */

.st-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.st-back:hover { color: var(--fg-strong); }
.st-back .arrow { transition: transform 160ms var(--ease);}
.st-back:hover .arrow { transform: translateX(-3px);}

/* ============================================================
   HERO — typographic. Validation-first framing (accounts, not
   evidence). No photo: the faces below are the imagery.
   ============================================================ */
.st-hero {
  padding: 56px 0 0;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}
.st-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 500px);
  gap: 40px;
  align-items: end;
}
.st-hero-copy { padding-bottom: 64px; }
.st-hero-figure {
  margin: 0;
  align-self: end;
}
.st-hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}
.st-hero-copy .st-back { display: flex; margin-bottom: 28px; }
.st-hero-h {
  /* Was clamp(56px, 8vw, 118px) = 115.2px @1440 -- the largest H1 on the site,
     29px above the therapy pages and 47px above the condition pages, which are
     the acquisition surface. [DECISION -- Jacob, 8 Aug 2026] */
  font-size: clamp(48px, 6vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.st-standfirst {
  margin-top: 30px;
  max-width: var(--measure);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--slate-dark);
}
.st-standfirst em { font-style: italic; color: var(--fg-strong); }
.st-caveat {
  margin-top: 14px;
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--slate-mid);
}
.st-hero-meta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.st-hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--slate-light); }

/* ============================================================
   STORIES SECTION
   ============================================================ */
.st-stories { padding: 64px 0 96px; }

/* --- Disclaimer: sits WITH the grid, above it. Never a footnote,
   never 11px grey. This is the sentence that makes the page
   publishable — verbatim from the approved YouTube footer. --- */
.st-disclaimer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 48px;
  max-width: 940px;
  padding: 24px 30px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--bg-card) 55%, var(--bg));
  border: 1px solid var(--border-soft);
  border-left: 2px solid color-mix(in oklab, var(--accent) 42%, var(--border-soft));
}
.st-disclaimer .st-disc-label {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 400;
  font-variant: small-caps;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--slate-mid);
  white-space: nowrap;
  padding-top: 5px;
}
.st-disclaimer p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px,1.55vw, 21px);
  line-height: 1.48;
  letter-spacing: -0.003em;
  color: var(--slate-dark);
  max-width: 48ch;
}
/* Filled variant (Tweak) *//* --- Grid --- */
.st-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 28px;
}
.st-grid-secondary { margin-top: 28px; }
/* --- Condition filter --- */
.st-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}.st-filter-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.st-filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--slate-dark);
  cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease);
}
.st-chip:hover { border-color: var(--accent-deep); color: var(--fg-strong); }
.st-chip-n {
  font-size: var(--fs-note);
  font-weight: 600;
  color: var(--slate-mid);
  transition: color 160ms var(--ease);
}
/* ⚠️ Fill is --accent-deep, not --accent. This is the selected filter chip and
   it carries 15px text: cream on --accent measured 3.76:1, cream on
   --accent-deep is 5.78:1. --accent is a fill for things that carry no words. */
.st-chip.is-active {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #F6F2EA;
}
.st-chip.is-active .st-chip-n { color: color-mix(in oklab, #F6F2EA 75%, var(--accent-deep)); }
.st-card[hidden] { display: none; }
.st-filter-empty {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 18px;
  color: var(--slate-mid);
}
.st-more-head {
  display: none;
  align-items: baseline;
  gap: 18px;
  margin: 60px 0 26px;
}
.st-more-head .h {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,2vw, 28px);
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}
.st-more-head .rule { flex: 1; height: 1px; background: var(--border); }

/* --- Card: lead with the person --- */
.st-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.st-card-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.st-card-media image-slot,
.st-card-media .st-still {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(ellipse 90% 74% at 50% 34%, color-mix(in oklab, var(--accent) 9%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, var(--sage-pale) 0%, color-mix(in oklab, var(--sage-pale) 55%, var(--bg)) 100%);
  object-fit: cover;
}
.st-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(20, 26, 22, 0.42) 100%);
  pointer-events: none;
}
.st-card-firstname {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: #F6F2EA;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.st-card-play {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  color: #F2EDE4;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: transform 180ms var(--ease), background 180ms var(--ease);
}
.st-card-play svg { width: 15px; height: 15px; margin-left: 2px; }
.st-card:hover .st-card-play { background: var(--accent); transform: scale(1.06); }
.st-card-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 18px;
}
.st-card-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.st-card-name {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}
.st-card-country {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-mid);
}
.st-card-country::before { content: "·"; margin-right: 10px; color: var(--slate-light); }
.st-card-cond {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.st-card-line {
  font-size: var(--fs-sm);
  line-height: 1.58;
  color: var(--slate-dark);
  max-width: 42ch;
}
.st-card-link {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-strong);
}
.st-card-link .arrow { transition: transform 160ms var(--ease);}
.st-card:hover .st-card-link .arrow { transform: translateX(4px);}
.st-card:hover .st-card-name { color: var(--accent-deep); }

/* Verify flag (Tim's country) — quiet, only in pending mode */
.st-verify {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
}

/* --- Featured layout (Tweak): 3 up top, remaining as compact rows.
   Less of a "6-for-6" scoreboard than an even six-up grid. --- *//* Grid-level pending note */
.st-grid-pending { margin-top: 34px; max-width: 940px; }

/* ============================================================
   PROGRAM VIDEO — deliberately NOT a patient card.
   Sage panel, wide media, leadership framing.
   ============================================================ */
.st-program { padding: 0 0 96px; }
.st-program-panel {
  background: var(--sage-pale);
  border-radius: 16px;
  padding: clamp(32px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.st-program-media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.st-program-media .st-still {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: linear-gradient(135deg, color-mix(in oklab, var(--sage-deep) 40%, var(--sage-ink)) 0%, var(--sage-ink) 100%);
}
.st-program-media .play-badge { background: color-mix(in oklab, var(--ink) 60%, transparent); }
.st-program-media:hover .play-badge { background: var(--accent); }
.st-program-still-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(246, 242, 234, 0.82);
}
.st-program-copy .eyebrow { color: var(--sage-deep); margin-bottom: 20px; }
.st-program-copy .eyebrow::before { background: var(--sage-deep); }
.st-program-h {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--sage-ink);
  margin: 0;
}
.st-program-copy p {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--sage-ink);
  opacity: 0.86;
  max-width: 46ch;
}
.st-program-note {
  margin-top: 22px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  color: var(--sage-deep);
}

/* ============================================================
   WHY PATIENTS FOUND US — describes the pattern; does not
   solicit referrals. Toggle via Tweak (Jacob's call).
   ============================================================ */.st-why { padding: var(--section-py) 0; background: var(--bg-alt); }
.st-why .section-head { margin-bottom: 56px; }
.st-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border-soft);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.st-why-item {
  background: var(--bg-alt);
  padding: 34px 36px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.st-why-item:nth-child(odd) { padding-right: 44px; }
.st-why-item:nth-child(even) { padding-left: 36px; }
.st-why-quote {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,1.9vw, 25px);
  line-height: 1.36;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  text-wrap: pretty;
}
.st-why-quote em { font-style: italic; color: var(--accent-deep); }
.st-why-cite {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  color: var(--slate-mid);
}
.st-why-cite .who { font-weight: 600; color: var(--fg-strong); letter-spacing: 0; }
.st-why-pending { margin-top: 40px; max-width: 720px; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
/* Top padding was 0, so the panel's top edge sat flush against the bottom of
   .st-why — and .st-why is the one section here carrying a tinted ground, so
   the join read as the panel touching the section rule above it. The token
   puts the standard 72px of page ground between them. */
.st-cta { padding: var(--section-py) 0 112px; }
.st-cta-panel {
  background: var(--sage-pale);
  border-radius: 16px;
  padding: clamp(56px, 6vw, 92px) clamp(32px, 6vw, 96px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.st-cta-panel .eyebrow { color: var(--sage-deep); margin-bottom: 22px; }
.st-cta-panel .eyebrow::before { background: var(--sage-deep); }
.st-cta-panel h2 { color: var(--sage-ink); max-width: 18ch; }
.st-cta-panel .lede {
  margin-top: 24px;
  max-width: var(--measure);
  color: var(--sage-ink);
  opacity: 0.82;
}
.st-cta-panel .btn { margin-top: 36px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  .st-hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .st-hero-copy { padding-bottom: 0; }
  .st-hero-figure { max-width: 440px; justify-self: center; }
}
@media (max-width: 980px) {
  .st-grid { grid-template-columns: repeat(2, 1fr); }
  .st-program-panel { grid-template-columns: 1fr; gap: 32px; }
  .st-why-grid { grid-template-columns: 1fr; }
  .st-why-item, .st-why-item:nth-child(odd), .st-why-item:nth-child(even) { padding-right: 0; padding-left: 0; }}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  /* Bottom padding was 48px [Jacob, 10 Aug 2026] — it was the gap between the
     photo and the hero's bottom rule. Every width from 641 up already sits
     flush (padding-bottom 0 + the img's -1px margin meeting the border), so
     this restores the desktop behaviour rather than inventing a new one.
     ⚠️ 640 is the real breakpoint, not 768: 641 already measured flush. */
  .st-hero { padding: 36px 0 0; }
  /* +10% [Jacob, 10 Aug 2026]. max-width:440px from the 880 tier cannot do
     this below 500px, where it is not the binding constraint — the photo is
     only as wide as the container's content box (335px at 390). So it bleeds
     into the gutters instead, capped at 484px (= 440 x 1.1) so the gain stays
     ~10-12% across the band rather than ballooning to +42% at 640.
     Safe: .st-hero is overflow:hidden, so the bleed cannot scroll the page. */
  .st-hero-figure {
    max-width: none;
    width: min(calc(100% + var(--gutter) * 2), 484px);
  }
  .st-stories { padding: 56px 0 64px; }
  /* Row gap 30 -> 56 [Jacob, 10 Aug 2026]. Stacked, 30px separated one
     person's story from the next while the largest gap INSIDE a card is 18px
     (media -> name) — only 1.67x, so the cards read as one column of content
     rather than six distinct people. 56px is ~3x the internal maximum, which
     is the grouping signal the multi-column layouts get for free from their
     column gap. Column gap stays 28px; it is inert at one column but the
     shorthand would drop it. */
  .st-grid { grid-template-columns: 1fr; gap: 56px 28px; }
  /* Match the row gap — this is the seam between the primary and secondary
     grids, and at 28px it was the tightest join of the six. */
  .st-grid-secondary { margin-top: 56px; }
  .st-disclaimer { grid-template-columns: 1fr; gap: 12px; }}