/* ============================================================
   SOLID TUMOR PROGRAM — satri-cel / advanced gastric cancer
   Layered on base.css + v3.css + v9.css + therapy.css + condition.css.

   This is a DIFFERENT program from the blood-cancer set, and the
   design says so. The signature move: the coral/gold accent that
   marks the hematologic pages is remapped to SAGE here, so the two
   programs never read as one continuous catalogue. Nothing borrows
   evidence, volume or credibility across the divider.

   Deliberately spare. The absences (outcomes, stories, cost) are
   The one unverified publishable block (the indication) uses
   publishes will differ, so it tolerates longer final text.
   ============================================================ */

/* ---------- Program accent: coral → sage ---------- */
/* [5 Aug 2026] Promoted from :root[data-program="solid"]. solid.css is
   loaded ONLY by conditions-gastric-cancer.html and therapy-satri-cel.html,
   so :root here is page-scoped by load and cannot reach the other 34.
   (0,2,0) -> (0,1,0), but base.css:16's :root is also (0,1,0) and earlier,
   so this still wins. */
:root {
  --accent:      var(--sage-deep);
  --accent-deep: var(--sage-ink);
}
/* the terracotta asterisk stays warm — one deliberate spot of the
   house coral so the page still belongs to the same site */
:root .asterisk { color: var(--coral); }

/* ---------- Hero chip: solid-tumor target ---------- */
.rx-chip.solid { color: #fff; background: var(--sage-deep); white-space: nowrap; }
.rx-chip.investig {
  color: var(--sage-ink);
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--sage-deep) 45%, transparent);
  white-space: nowrap;
}

/* ============================================================
   Not a single flagged line among live ones (that is the blood
   pages' shape); here the entire indication is provisional, so the
   Built to tolerate a longer, differently-worded final label.
   ============================================================ */
.st-indication {
  margin-top: 8px;
  border: 1px solid color-mix(in oklab, var(--sage-deep) 26%, transparent);
  border-radius: 14px;
  background: color-mix(in oklab, var(--sage-pale) 46%, var(--bg-card));
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px);
}
.st-ind-flag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* An <h2> since 5 Aug - see .rx-ind-title. margin-top must be zeroed too. */
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.st-ind-flag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--sage-deep);
}
/* Provenance for the verbatim label text, matching .rx-ind-src on the other
   seven therapy pages exactly — same regulatory source, same wording. Added
   5 Aug when the flag became an <h2> and "package insert" left with it. */
.st-ind-src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.04em;
  color: var(--slate-mid);
}
.st-ind-src::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--sage-ink);
}
.st-ind-text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(20px,1.7vw, 23px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--fg-strong) 78%, transparent);
  max-width: var(--measure);
}
.st-ind-note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--sage-deep) 20%, transparent);
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  line-height: 1.65;
  color: var(--slate-mid);
  max-width: var(--measure-wide);
}
.st-ind-note strong { color: var(--slate-dark); font-weight: 600; }

/* ============================================================
   BIOMARKER GATE — the one thing the solid pathway has that the
   blood pathway doesn't. A dark sage interlude so it reads as its
   own moment, not a paragraph. Testing happens AT HOME, BEFORE
   travel — a patient without both results can't be assessed yet.
   ============================================================ */
.bio-gate { padding: 4px 0 0; }
.bio-gate-panel {
  background: var(--sage-ink);
  border-radius: 18px;
  padding: clamp(40px, 5vw, 64px) clamp(32px, 5vw, 68px);
  color: #fff;
}
.bio-gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--sage-mid) 88%, #fff);
  margin-bottom: 22px;
}
.bio-gate-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: color-mix(in oklab, var(--sage-mid) 70%, transparent);
}
.bio-gate-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.bio-gate h2 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}
.bio-gate h2 em { font-style: italic; }
.bio-gate-lead {
  margin: 24px 0 0;
  font-size: clamp(15.5px, 1.4vw, 17.5px);
  line-height: 1.72;
  color: rgba(255,255,255,0.76);
  max-width: 46ch;
}
.bio-gate-lead strong { color: #fff; font-weight: 500; }

/* the two tests, as a pair of markers */
.bio-tests {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bio-test {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
}
.bio-test .marker {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  color: color-mix(in oklab, var(--sage-mid) 92%, #fff);
  flex: 0 0 auto;
  min-width: 8.5ch;
}
.bio-test .desc {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}
.bio-test .desc b { color: #fff; font-weight: 500; }

/* the two facts — at home, before travel */
.bio-facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.bio-fact {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.86);
}
.bio-fact .dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--sage-mid);
  flex: 0 0 auto;
}
.bio-fact .t { flex: 1 1 auto; }
.bio-fact b { color: #fff; font-weight: 600; }

/* ============================================================
   ONE-TO-ONE PAIR — satri-cel ↔ advanced gastric cancer.
   Not a grid with a single card (that reads as a broken three-up),
   and not a lone solo card either — a PAIR: two named halves joined
   by the shared CLDN18.2 target. Same instinct as the MCL solo fix,
   a different shape, because the relationship here is genuinely 1:1.
   ============================================================ */
.st-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: var(--bg-card);
  overflow: hidden;
}
.st-pair-half {
  display: flex;
  flex-direction: column;
  padding: clamp(30px, 3.4vw, 46px);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast, 160ms) var(--ease);
}
a.st-pair-half:hover { background: color-mix(in oklab, var(--sage-pale) 42%, var(--bg-card)); opacity: 1; }
.st-pair-role {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 16px;
}
.st-pair-half h3 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.06;
  letter-spacing: -0.012em;
  color: var(--fg-strong);
  margin: 0;
}
.st-pair-half .sub {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-style: italic;
  font-size: 15.5px;
  color: var(--slate-mid);
}
.st-pair-half p {
  margin: 18px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.64;
  color: var(--slate-dark);
}
.st-pair-half .go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--sage-ink);
}
.st-pair-half .go .arrow { transition: transform var(--dur-fast, 160ms) var(--ease);}
a.st-pair-half:hover .go .arrow { transform: translateX(4px);}

/* the connective spine — the shared target */
.st-pair-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 clamp(14px, 1.6vw, 26px);
  background: var(--sage-ink);
  color: #fff;
}
.st-pair-link .tgt-k {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.st-pair-link .tgt-v {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(20px,1.7vw, 22px);
  line-height: 1;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  letter-spacing: 0.02em;
}
.st-pair-link .bond { font-size: 15px; color: var(--sage-mid); line-height: 1; }
/* Centred — footnote to the full-width .st-pair block above. ⚠️ margin-inline
   must come AFTER the `margin: 22px 0 0` shorthand, which sets left/right to 0;
   declared before it, the shorthand wins and nothing moves. */
.st-pair-note {
  margin: 22px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--slate-mid);
  max-width: var(--measure-wide);
  margin-inline: auto;
}

/* ============================================================
   PATHWAY WITH A PRE-STEP — the home-country biomarker testing is
   step zero, visually distinct from the in-Shanghai stages.
   ============================================================ */
.st-path { padding: var(--section-py) 0; }
.st-path .section-head { margin-bottom: 44px; }
.st-path-grid {
  display: grid;
  grid-template-columns: 0.82fr 2px repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  overflow: hidden;
}
.st-step {
  padding: 30px 26px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
}
.st-step:last-child { border-right: 0; }
.st-step.prestep {
  background: var(--sage-pale);
}
.st-step.prestep .sn { color: var(--sage-ink); }
.st-step.prestep h4 { color: var(--sage-ink); }
.st-step .sn {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-deep);
}
.st-step h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.15;
  color: var(--fg-strong);
  margin: 0;
}
.st-step p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-dark);
  margin: 0;
}
.st-step .where {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  color: var(--slate-mid);
}
.st-path-divider { background: var(--sage-deep); }
/* Centred — footnote to the full-width .st-path-grid above. */
.st-path-foot {
  margin-top: 22px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-mid);
  max-width: var(--measure-wide);
  margin-inline: auto;
}

/* ============================================================
   PROGRAM LEAD — Dr. Yang. Deliberately minimal: a name and a role,
   no borrowed track record, no publications, no volume. What isn't
   confirmed isn't invented; the client-notification hold is a
   ============================================================ */
.st-lead { padding: 84px 0; }
.st-lead-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-width: 720px;
}
.st-lead .eyebrow { margin-bottom: 20px; }
.st-lead h2 {
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(26px, 2.8vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
  margin: 0 0 8px;
}
.st-lead h2 em { font-style: italic; }
.st-lead-panel.has-portrait {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: 1020px;
}
.st-lead-panel.has-portrait > div { min-width: 0; }
.st-lead-panel.has-portrait .rx-evidence-portrait { max-width: 320px; justify-self: end; align-self: center; }
.st-lead-role {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  color: var(--slate-mid);
  margin: 0 0 22px;
}
.st-lead p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--slate-dark);
  margin: 0;
  max-width: var(--measure);
}
.st-lead p strong { color: var(--fg-strong); font-weight: 600; }

/* ============================================================
   QUALIFYING BLOCK above the inquiry CTA — the drop-out guard.
   Short, actionable: "have these two results before you inquire."
   ============================================================ */
.st-qualify {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  max-width: 680px;
  margin: 0 auto 30px;
  padding: 20px 24px;
  text-align: left;
  border: 1px solid color-mix(in oklab, var(--sage-deep) 32%, var(--border));
  border-radius: 12px;
  background: color-mix(in oklab, var(--sage-pale) 40%, var(--bg-card));
}
.st-qualify .k {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--sage-deep);
  padding: 6px 11px;
  border-radius: 999px;
  margin-top: 2px;
  white-space: nowrap;
}
.st-qualify p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.62;
  color: var(--slate-dark);
}
.st-qualify p strong { color: var(--sage-ink); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bio-gate-grid { grid-template-columns: 1fr; gap: 34px; }
  .st-path-grid { grid-template-columns: 1fr 1fr; }
  .st-path-grid .st-path-divider { display: none; }
  .st-step { border-bottom: 1px solid var(--border-soft); }
}
@media (max-width: 900px) {
  .st-lead-panel.has-portrait { grid-template-columns: 1fr; gap: 32px; }
  .st-lead-panel.has-portrait .rx-evidence-portrait { justify-self: start; max-width: 280px; }
}
@media (max-width: 720px) {
  .st-pair { grid-template-columns: 1fr; }
  .st-pair-link {
    flex-direction: row;
    padding: 16px;
    gap: 14px;
  }
  .st-pair-link .tgt-v { writing-mode: horizontal-tb; transform: none; }
  .st-path-grid { grid-template-columns: 1fr; }
  .st-step { border-right: 0; }
  .st-qualify { flex-direction: column; gap: 12px; }
}
@media (max-width: 560px) {
  .bio-gate-panel { border-radius: 14px; padding: 32px 22px; }
  .st-pair-half { padding: 26px 22px; }
  .st-lead, .st-path { padding: 60px 0; }
  .st-lead-panel.has-portrait .rx-evidence-portrait { max-width: 100%; }
}

/* ============================================================
   GASTRIC HERO GRID
   The wider spec aside wants a near-fixed second column on desktop.
   That was an inline style on the page, which outranked therapy.css's
   @media (max-width:1000px) collapse — so at 390px a 448px column sat
   inside a 350px container and pushed the page 122px wide.
   Scoped to .cd-hero: of the two pages loading solid.css, only
   conditions-gastric-cancer carries that class (therapy-satri-cel
   does not), so its hero is untouched.
   ============================================================ */
@media (min-width: 1001px) {
  .cd-hero .rx-hero-grid { grid-template-columns: minmax(0, 1fr) clamp(448px, 38vw, 484px); }
}