/* ============================================================
   MEDICAL TEAM PAGE
   Layered on base.css + v3.css + v9.css + bio.css. Reuses the
   same tokens/accent system so it tracks every palette.

   The compliance spine of this page: Dr. Zhou (the CAR-T care
   team) is presented FIRST and alone; the four Ruijin visiting
   specialists (general surgery / GI — NOT CAR-T) come later,
   visually separated, with an explicit separation statement and
   no CAR-T language attached to them.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.mt-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--slate-mid);
  margin-bottom: 40px;
}
.mt-crumb a { color: var(--slate-mid); transition: color 160ms var(--ease); }
.mt-crumb a:hover { color: var(--fg-strong); }
.mt-crumb .sep { color: var(--slate-light); }
.mt-crumb .cur { color: var(--fg-strong); }

/* ============================================================
   HEADER
   ============================================================ */
.mt-head {
  padding: 48px 0 72px;
  border-bottom: 1px solid var(--border-soft);
}
.mt-head h1 {
  font-size: clamp(46px, 5.2vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.022em;
}
.mt-head-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 4.4vw, 76px);
  align-items: center;
}
.mt-head-media { position: relative; margin: 0; }
.mt-head-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: center 32%;
  border-radius: 14px;
  background: var(--sage-pale);
}
.mt-head-flag {
  position: absolute;
  left: 16px; bottom: 16px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-ink);
  background: color-mix(in oklab, var(--bg-card) 88%, transparent);
  border: 1px solid var(--border-soft);
  padding: 6px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.mt-standfirst {
  margin-top: 30px;
  max-width: var(--measure);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(18px, 1.65vw, 23px);
  line-height: 1.5;
  color: var(--slate-dark);
}
.mt-standfirst em { font-style: italic; color: var(--accent-deep); }

/* ============================================================
   SHARED SECTION INTRO
   ============================================================ */
.mt-intro { max-width: 780px; margin-bottom: 56px; }
.mt-intro .eyebrow { margin-bottom: 24px; }
.mt-intro h2 { max-width: 18ch; }
.mt-intro h2 em { font-style: italic; }
.mt-intro p {
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-dark);
  max-width: var(--measure-wide);
}

/* ============================================================
   1 — MEDICAL TEAM (Dr. Zhou prominent + specialists below)
   Dr. Zhou leads as a full-width feature card. The four Ruijin
   specialists sit in the SAME section beneath, but a divider
   band keeps the compliance separation explicit: they are the
   institution behind SUH, NOT the CAR-T care team.
   ============================================================ */
.mt-feature {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: clamp(28px, 3.4vw, 56px);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--accent);
  border-radius: 14px;
  padding: clamp(26px, 3vw, 44px);
}
.mt-feature-portrait { position: relative; align-self: stretch; }
.mt-feature-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  background:
    radial-gradient(ellipse 86% 70% at 50% 28%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 72%),
    var(--sage-pale);
}
.mt-feature-flag {
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-ink);
  background: color-mix(in oklab, var(--bg-card) 88%, transparent);
  border: 1px solid var(--border-soft);
  padding: 6px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.mt-feature-body { display: flex; flex-direction: column; align-items: flex-start; }
.mt-feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 16px;
}
.mt-feature-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.mt-feature-name {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.mt-feature-name .pn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate-mid);
  margin-left: 10px;
  vertical-align: 4px;
}
/* The position carries more weight than the credentials paragraph on a page
   whose job is "who will treat me" — it was 15px/500, quieter than the body
   copy beneath it. `[Jacob, 9 Aug 2026]` */
.mt-feature-title {
  margin-top: 12px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
}
.mt-feature-cred {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  font-size: 15px;
  line-height: 1.68;
  color: var(--slate-dark);
  max-width: var(--measure-wide);
}
.mt-feature-cred em { font-style: italic; }
.mt-feature-note {
  margin-top: 12px;
  font-size: var(--fs-note);
  line-height: 1.55;
  color: var(--slate-mid);
}
.mt-feature-note em { font-style: italic; }
.mt-feature-link { margin-top: 22px; }
.mt-feature-cred2 {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.68;
  color: var(--slate-dark);
  max-width: var(--measure-wide);
}
.mt-feature-stats {
  width: 100%;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.mt-stat { display: flex; flex-direction: column; gap: 5px; }
.mt-stat .v {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,1.9vw, 29px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--accent-deep);
}
.mt-stat .l {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: 1.42;
  color: var(--slate-mid);
}


/* ============================================================
   3 — THE SUPPORTING TEAM (Tier 2 — six named physicians)
   Portrait-top vertical cards on the default surface. Kept
   deliberately distinct from the horizontal Ruijin roster
   below so the two tiers never read as one group.
   ============================================================ */
.mt-team { border-top: 1px solid var(--border-soft); }
/* ⛔ white-space: nowrap removed. Element-level nowrap on a heading cannot
   wrap at all: at 375 "The inpatient care team" rendered one 371px line inside
   a 360px viewport and was the only horizontal scroll on the site. It is the
   same defect be248d6 fixed on conditions-multiple-myeloma's h1 — that commit
   called it "the only heading on the site with element-level nowrap"; this was
   the second. text-wrap: balance on .display already keeps it to two lines at
   desktop, which is what the nowrap was reaching for. */
.mt-team .mt-intro h2 { max-width: none; }
.mt-members {
  margin-top: clamp(40px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
/* Compact variant — smaller portrait, horizontal card */
.mt-members-compact .mt-member-card { flex-direction: row; }
.mt-members-compact .mt-member-portrait { flex: 0 0 150px; }
.mt-members-compact .mt-member-portrait img { height: 100%; aspect-ratio: auto; }
.mt-members-compact .mt-member-body { padding: 15px 28px; justify-content: flex-start; align-items: stretch; gap: 0; }
.mt-members-compact .mt-member-tag { align-self: flex-start; white-space: nowrap; margin-bottom: 4px; }
.mt-members-compact .mt-member-name { font-size: 30px; margin-top: 20px; }
.mt-members-compact .mt-member-title { margin-top: 6px; }
.mt-members-compact .mt-member-bio { margin-top: 10px; font-size: var(--fs-sm); }
.mt-member-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.mt-member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(31, 42, 38, 0.07);
}
.mt-member-portrait { position: relative; }
.mt-member-portrait image-slot,
.mt-member-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  background: linear-gradient(180deg, color-mix(in oklab, var(--sage-pale) 70%, var(--bg)) 0%, var(--sage-pale) 100%);
}
.mt-member-body {
  flex: 1;
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.mt-member-tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  padding: 5px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  margin-bottom: 4px;
}
.mt-member-name {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 24px;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
}
.mt-member-name .pn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--slate-mid);
  margin-left: 8px;
  vertical-align: 2px;
}
/* Same reasoning as .mt-feature-title — the six were at the 13px reading
   floor, below their own bio copy. Raised one step, not to feature size: the
   tier difference stays. ⛔ .mt-spec-title is deliberately NOT raised — the
   Ruijin surgeons are a relationship, not the care team (guide L288). */
.mt-member-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--accent-deep);
}
.mt-member-bio {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-dark);
}

/* Sub-group heading for the wider specialist network */
.mt-network-head {
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: clamp(40px, 4.5vw, 64px);
  border-top: 1px solid var(--border-soft);
  max-width: 820px;
}
.mt-network-head .eyebrow { margin-bottom: 22px; }
.mt-network-title {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
  max-width: 18ch;
}
.mt-network-title em { font-style: italic; }
.mt-network-head > p {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate-dark);
  max-width: var(--measure-wide);
}

/* ============================================================
   2 — A PROGRAMME, NOT A SOLO PRACTICE
   ============================================================ */
.mt-programme { background: var(--bg-alt); }

/* v3 — the coordinated team shown WITH the lead, inside People */
.mt-roles {
  margin-top: clamp(48px, 5vw, 76px);
  padding-top: clamp(40px, 4.5vw, 60px);
  border-top: 1px solid var(--border-soft);
}
.mt-roles-head { max-width: 720px; margin-bottom: 34px; }
.mt-sub {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px, 2.4vw, 33px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
}
.mt-roles-head p {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--slate-dark);
  max-width: var(--measure);
}
.mt-prog-grid.mt-prog-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   4a — SOLID TUMOR PROGRAM (group 3 — a different program)
   guide-medical-team.md §4a. The visual hierarchy is doing
   compliance work here: this must not read as tier 1 (Dr. Zhou)
   or tier 2 (the six). So it is one wide horizontal card on the
   default surface — heavier than a member card, lighter than
   the feature, and unmistakably a single entry rather than the
   first of a set. Same reasoning as .cd-therapy-solo: a lone
   card in a grid built for six reads as a loading failure.
   ============================================================ */
/* Its own surface, and the surface is doing the separating. The block now sits
   between Dr. Zhou and the six, and the six are hers — "Dr. Zhou works with six
   physicians" is Andy's framing, 16 Jul, and whether they also cover the solid
   tumor program is a fact we do not hold. Left on the default surface the six
   would read as hanging off Dr. Yang's card; a banded block breaks that
   adjacency before the copy has to. `[Jacob, 9 Aug 2026]` */
.mt-solid {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
  /* Anchor target — satri-cel and gastric-cancer link straight to
     #solid-tumor-program. The fixed nav is 81px and the section's own padding
     left exactly 5px of clearance beneath it: correct today, and gone the
     first time --section-py changes. */
  scroll-margin-top: 24px;
}
/* One measure for both program headings, so they wrap the same way. `[Jacob,
   10 Aug 2026]` The base 18ch put "The blood cancer program, and its Chief of
   Hematology." on three lines and "The solid tumor program, at the same center."
   on two — a visible asymmetry between two sections the page is at pains to
   present as equivalent. 24ch is the first value that gives both two lines, at
   1440 down to 768. ⛔ Set them together or not at all; a value on one is how
   they diverged. Below ~900 the container is narrower than 24ch so the token
   stops binding and both go to three lines — still matched. */
.mt-lead .mt-intro h2,
.mt-solid .mt-intro h2 { max-width: 24ch; }
.mt-solid .mt-feature { margin-top: clamp(40px, 4.5vw, 56px); }
/* Dr. Yang's card is the same component as Dr. Zhou's — same layout, same
   typography — because they are two program physicians, not two ranks.
   `[Jacob, 9 Aug 2026]`
   What separates them is the accent, and it is the site's own separation:
   solid.css already remaps --accent / --accent-deep to the sage pair for the
   solid tumor program, so reusing those two tokens here makes her card read as
   a different program rather than a lesser one. ⛔ The difference must not
   become a demotion or a promotion — the guide's four-group rule (L290) works
   in both directions.
   She also carries no stat row and no profile link: Dr. Zhou has 20 years, 16
   publications, UCSF and a bio page, and we hold no equivalent facts for Dr.
   Yang. That difference is evidence we have, not weight we assigned. */
.mt-feature-solid {
  --accent: var(--sage-deep);
  --accent-deep: var(--sage-ink);
}
.mt-solid-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
  width: 100%;
}
.mt-solid-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  border: 0;
}
.mt-solid-link .arrow { transition: transform var(--dur-fast, 160ms) var(--ease); }
.mt-solid-link:hover .arrow { transform: translateX(4px); }

/* v3 — the institution section, visually its own pillar */
.mt-institution {
  background: var(--bg-alt);
  border-top: 1px solid var(--border-soft);
}
.mt-institution .mt-intro { max-width: 820px; }
.mt-institution .mt-intro h2 { max-width: 22ch; }
.mt-institution .mt-intro p { max-width: var(--measure-wide); }

/* The "not part of the CAR-T care team" note beside the heading, not below it.
   `[Jacob, 10 Aug 2026]` Stacked, it pushed the three visiting-specialist cards
   most of a screen further down, and it sat in the widest empty space on the
   page — the right half of this intro, which the 22ch heading and the
   measure-capped paragraph leave open.
   ⛔ The note is not decoration and must not be shortened or dropped to save
   the space: it is the disclaimer that keeps three surgeons from reading as
   CAR-T staff (guide L288, and the four-group rule at L290). Moving it beside
   the heading raises it, which suits a disclaimer.
   Below 1000 it returns to its stacked position — at that width the second
   column would be too narrow to read comfortably. */
@media (min-width: 1001px) {
  .mt-institution .mt-intro {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(36px, 4.5vw, 80px);
    align-items: start;
    /* ⚠️ Explicit rows, because the box spans all three. Left implicit, its
       208px height is distributed across the rows it spans and opens a ~180px
       gap between the eyebrow and the heading — the box gets taller than the
       column beside it and grid pays for that by stretching the rows. auto /
       auto / 1fr sizes the first two to the eyebrow and heading and lets the
       last one absorb whatever the box has left over. */
    grid-template-rows: auto auto 1fr;
  }
  .mt-institution .mt-intro > .eyebrow,
  .mt-institution .mt-intro > h2,
  .mt-institution .mt-intro > p { grid-column: 1; }
  .mt-institution .mt-intro > .mt-sep {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
    max-width: none;
  }
}

/* 🔴 Above 1440 the heading needs a bigger share, because the container does
   NOT grow and the type does. `[Jacob, 10 Aug 2026]` The container caps at 1320
   and centres, so this intro is ~1240px from 1440 upward — but .display.large
   is clamp(40px, 4.2vw, 68px), which keeps scaling to its 68px cap at ~1619.
   Same column, larger type, so "A member of the Shanghai Ruijin Consortium of
   Blood Disease." tips from three lines to four at 1500 and stays there.

   Measured 1001 to 1920 at four ratios. 1.2fr holds three lines everywhere,
   but at 1001 it squeezes the note to 31 characters a line — narrower than the
   same note gets on a 390px phone. So the ratio changes only where the problem
   is: 1.05fr below, where the note keeps 39-57 characters, and 1.2fr above,
   where it still has 45.
   ⛔ Do not "simplify" this to one ratio without remeasuring both ends. */
@media (min-width: 1441px) {
  .mt-institution .mt-intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
}
.mt-prog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.mt-prog-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 34px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-prog-card .pn {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--accent-deep);
  margin-bottom: 2px;
}
.mt-prog-card h3 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 25px;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--fg-strong);
  margin: 0;
}
.mt-prog-card p { font-size: var(--fs-sm); line-height: 1.62; color: var(--slate-dark); }
.mt-prog-card em { font-style: italic; color: var(--accent-deep); }
.mt-prog-card .ts-link { margin-top: 4px; }

/* ============================================================
   3 — THE WIDER SPECIALIST NETWORK (Ruijin) — SEPARATED
   ============================================================ */
.mt-ruijin { background: var(--bg); border-top: 1px solid var(--border-soft); }
.mt-ruijin .mt-intro { max-width: 820px; }
.mt-ruijin .mt-intro p { max-width: var(--measure-wide); }

/* The explicit separation statement — its own quiet callout */
.mt-sep {
  margin-top: 26px;
  max-width: var(--measure-wide);
  padding: 24px 28px;
  background: var(--sage-pale);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
.mt-sep .mark {
  width: 26px; height: 26px;
  flex: 0 0 auto;
  background: color-mix(in oklab, var(--sage-ink) 60%, transparent);
  -webkit-mask: url('assets/cart-icon.svg') no-repeat center / contain;
  mask: url('assets/cart-icon.svg') no-repeat center / contain;
  margin-top: 2px;
}
.mt-sep p {
  font-size: 15px;
  line-height: 1.62;
  color: var(--sage-ink);
}
.mt-sep strong { font-weight: 500; color: var(--sage-ink); }

/* Specialist cards */
.mt-spec-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 880px;
}
.mt-spec-card {
  display: grid;
  grid-template-columns: 168px 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.mt-spec-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(31,42,38,0.07);
}
.mt-spec-portrait { position: relative; }
.mt-spec-portrait image-slot,
.mt-spec-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  object-position: center;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--sage-pale) 70%, var(--bg)) 0%, var(--sage-pale) 100%);
}
.mt-spec-body {
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.mt-spec-tag {
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-mid);
  padding: 5px 11px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  margin-bottom: 6px;
}
.mt-spec-name {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: 26px;
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
}
.mt-spec-name .pn {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--slate-mid);
  margin-left: 8px;
  vertical-align: 2px;
}
.mt-spec-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-note);
  letter-spacing: 0.05em;
  color: var(--accent-deep);
  text-transform: none;
}
.mt-spec-specialty {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--fg-strong);
  margin-top: 2px;
}
.mt-spec-cred {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-dark);
}
.mt-spec-link { margin-top: 16px; }

/* ============================================================
   4 — WHY THIS MATTERS FOR YOUR CARE
   ============================================================ */
.mt-why-panel {
  background: var(--sage-pale);
  border-radius: 14px;
  padding: clamp(56px, 6vw, 96px) clamp(32px, 6vw, 96px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mt-why-panel .eyebrow { color: var(--sage-deep); margin-bottom: 24px; }
.mt-why-panel .eyebrow::before { background: var(--sage-deep); }
.mt-why-panel h2 { color: var(--sage-ink); max-width: 20ch; }
.mt-why-panel h2 em { font-style: italic; }
.mt-why-panel p {
  margin-top: 24px;
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.6;
  color: var(--sage-ink);
  opacity: 0.85;
}
.mt-why-panel .cred-link { margin-top: 30px; color: var(--sage-ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1000px) {
  .mt-feature { grid-template-columns: 240px 1fr; }
  .mt-members { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mt-head { padding: 32px 0 56px; }
  .mt-feature { grid-template-columns: 1fr; gap: 28px; }
  .mt-feature-portrait { max-width: 320px; }
  .mt-members-compact .mt-member-card { flex-direction: column; }
  .mt-members-compact .mt-member-portrait { flex: none; }
  .mt-members-compact .mt-member-portrait img { aspect-ratio: 4 / 5; }
  .mt-spec-card { grid-template-columns: 1fr; }
  .mt-spec-portrait image-slot,
  .mt-spec-portrait img { min-height: 300px; }
  .mt-sep { grid-template-columns: 1fr; gap: 12px; }
  .mt-sep .mark { display: none; }
}

/* ---------- Tweak-driven layout ---------- */