/* ============================================================
   ELIGIBILITY PAGE — /eligibility  (the conversion page)
   Layered on base.css + v3.css + v9.css. Reuses tokens, type,
   .btn / .eyebrow / .display / .form / concierge.
   Signature layout: §3–6 conversion core — criteria + records +
   process on the left, a STICKY inquiry form on the right, so a
   returning visitor never has to scroll past the criteria to inquire.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
/* Block-level so the .eyebrow below it starts a new line — .eyebrow is
   inline-flex in shared base.css and would otherwise sit alongside. */
.el-crumb { display:flex; width:fit-content; 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); }
.el-crumb a { color:var(--slate-mid); text-decoration:none; border:0; transition:color 160ms var(--ease); }
.el-crumb a:hover { color:var(--fg-strong); opacity:1; }
.el-crumb .sep { opacity:0.5; }
.el-crumb .here { color:var(--fg-strong); }

/* ============================================================
   1 — HERO (validation-first, text left + patient photo right)
   ============================================================
   ⚠️ Was "typographic, validation-first, no photo" `[SUPERSEDED — Jacob,
   7 Aug 2026]`. The no-photo hero left 750px of empty space beside a 490px
   standfirst — the text was the right width to read, but nothing occupied the
   rest of the row, so it read as a step cut-in. */
.el-hero { padding:24px 0 0; border-bottom:1px solid var(--border-soft); }
.el-hero .container { max-width:1320px; }
.el-hero-inner { padding:24px 0 72px; }

/* Single column since the hero photo was removed [DECISION — Jacob, 8 Aug 2026].
   The facts row still sits outside the grid and spans the full width.
   ⚠️ Left as a grid rather than unwrapped to a bare div: the 900px rule below
   still resets grid-template-columns, and .el-hero-copy is the only child, so
   one track is the whole layout. The measure does NOT run to the container —
   .el-hero h1 is capped at 21ch and .el-standfirst at --measure-wide, both
   below, so the copy keeps its column without the photo defining it. */
.el-hero-grid {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(28px, 4vw, 64px);
  align-items:end;
}

/* 🔴 H1 was clamp(44px, 6.4vw, 96px) = 92.2px at 1440 — the second-largest H1
   on the site, above the 8 therapy pages (86.4) and 24px above the 7 condition
   pages (68), which are the acquisition surface. It is the only hero in that
   range NOT recorded in chrome spec §4's H1 table, so it was never a decision.
   Spec §4 says the scale tracks name length, and this is one of the longest
   titles on the site, so it should take LESS scale, not more. Now ~69px at
   1440, just above the condition pages. `[Jacob, 7 Aug 2026]`

   max-width still sized to land two lines — "Am I eligible for" / "CAR T-cell
   therapy?" .nb keeps "CAR T-cell" off the hyphen, which would otherwise render
   the term as "CAR T-" / "cell". */
.el-hero h1 { font-size:clamp(40px, 4.8vw, 72px); line-height:0.98; letter-spacing:-0.02em; max-width:21ch; }
.el-hero h1 .nb { white-space:nowrap; }
.el-hero h1 .asterisk { font-size:0.4em; }
/* --measure-wide, not --measure: this one sits beside a photo rather than in a
   full-bleed row, so a wider measure closes the gap without stranding the line
   length. ~78 characters. */
.el-standfirst { margin-top:30px; font-size:clamp(18px, 1.7vw, 23px); line-height:1.58; color:var(--slate-dark); max-width: var(--measure-wide); }
.el-standfirst .free { font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--accent-deep); }
.el-hero-facts { margin-top:44px; display:flex; flex-wrap:wrap; gap:14px 16px; }
.el-fact { display:inline-flex; align-items:center; gap:10px; padding:11px 18px 11px 14px; background:var(--bg-card); border:1px solid var(--border-soft); border-radius:999px; }
.el-fact .dot { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent); }
.el-fact .t { font-family:var(--font-sans); font-size: var(--fs-sm); font-weight:500; color:var(--fg-strong); letter-spacing:0.01em; }
.el-fact .t em { font-style:italic; color:var(--accent-deep); font-weight:500; }
/* The photo this rule existed for is gone; the grid is single-column at every
   width now, so the override is a no-op kept only for the explicit stack. */
@media (max-width:900px) {
  .el-hero-grid { grid-template-columns:1fr; }
}

/* ============================================================
   2 — WHO CAR-T IS FOR
   ============================================================ */
.el-who { padding: var(--section-py) 0; background:var(--bg-alt); }
.el-who .section-head { margin-bottom:44px; }
.el-who-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px, 6vw, 88px); align-items:start; }
/* 🔴 .el-who-side exists so the grid has exactly TWO children. With three,
   auto-placement put .el-explain in the LEFT column on a second row and left
   the right column empty below the gastric note — measured 707px of dead
   right column, the largest void on the page. `[Jacob, 7 Aug 2026]`
   ⚠️ DOM order is unchanged (list → gastric note → explain), so the stacked
   single-column order below 900 and the reading order for assistive tech are
   exactly what they were. */
.el-who-side { display:flex; flex-direction:column; gap:clamp(24px, 2.4vw, 34px); min-width:0; }
.el-cond-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.el-cond-list li { border-top:1px solid var(--border); }
.el-cond-list li:last-child { border-bottom:1px solid var(--border); }
.el-cond-list a { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:20px 4px; text-decoration:none; color:inherit; border:0; transition:padding-left 200ms var(--ease); }
.el-cond-list a:hover { padding-left:12px; opacity:1; }
.el-cond-list .nm { font-family:var(--font-serif); font-weight:500; font-size: clamp(24px,2vw, 27px); line-height:1.15; letter-spacing:-0.008em; color:var(--fg-strong); }
.el-cond-list .nm span { font-family:var(--font-sans); font-style:normal; font-size: var(--fs-sm); color:var(--slate-mid); font-weight:400; }
.el-cond-list .go { flex:0 0 auto; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-mid); display:inline-flex; align-items:center; gap:8px; transition:color 160ms var(--ease); }
.el-cond-list a:hover .go { color:var(--accent-deep); }
.el-cond-list a:hover .go .arrow { transform:translateX(4px);}
.el-cond-list .go .arrow { transition:transform 160ms var(--ease);}
.el-explain { background:var(--bg-card); border:1px solid var(--border-soft); border-radius:14px; padding:clamp(28px, 3vw, 40px); }
.el-explain .k { display:inline-flex; align-items:center; gap:8px; 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:20px; }
.el-explain .k::before { content:""; width:16px; height:1px; background:var(--sage-deep); }
.el-explain p { font-size:15.5px; line-height:1.72; color:var(--slate-dark); margin:0 0 16px; }
.el-explain p:last-of-type { margin-bottom:0; }
.el-explain strong { color:var(--fg-strong); font-weight:600; }
.el-explain em { font-style:italic; color:var(--accent-deep); font-weight:500; }

/* ============================================================
   3–6 — CONVERSION CORE (main content + sticky inquiry form)
   ============================================================ */
.el-core { padding: var(--section-py) 0; }
.el-core-grid { display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(340px, 0.9fr); gap:clamp(40px, 5vw, 80px); align-items:start; }
.el-core-main { display:flex; flex-direction:column; gap:88px; min-width:0; }
.el-block .el-block-head { margin-bottom:32px; }
.el-block .eyebrow { margin-bottom:16px; }
.el-block h2 { font-family:var(--font-serif); font-weight:500; font-size:clamp(30px, 3.4vw, 48px); line-height:1.04; letter-spacing:-0.014em; color:var(--fg-strong); margin:0; max-width:18ch; }
.el-block h2 em { font-style:italic; }
.el-block-intro { margin-top:16px; font-size:16.5px; line-height:1.68; color:var(--slate-dark); max-width: var(--measure); }

/* --- §3 the guide-only line (mandatory, verbatim, NOT a footnote) --- */
.el-guideline { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; background:var(--sage-pale); border-radius:14px; padding:clamp(26px, 3vw, 38px); margin-bottom:36px; }
.el-guideline .mark { width:38px; height:38px; border-radius:50%; background:var(--sage-ink); color:var(--bg-card); display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-sans); font-size:20px; line-height:1; flex:0 0 auto; }
.el-guideline .lbl { display:block; 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:12px; }
.el-guideline p { font-family:var(--font-sans); font-weight:400; font-size: clamp(20px,1.8vw, 23px); line-height:1.46; letter-spacing:-0.005em; color:var(--sage-ink); margin:0; }

/* --- §3 criteria rows --- */
.el-criteria { display:flex; flex-direction:column; border-top:1px solid var(--border); }
.el-crit-row { display:grid; grid-template-columns:0.62fr 1fr; gap:24px; padding:22px 4px; border-bottom:1px solid var(--border); align-items:baseline; }
.el-crit-row .k { font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-mid); line-height:1.5; }
.el-crit-row .v { font-size:15.5px; line-height:1.6; color:var(--slate-dark); }
.el-crit-row .v strong { color:var(--fg-strong); font-weight:600; }
.el-crit-row .v .hedge { font-style:italic; color:var(--accent-deep); }

/* --- §3 condition-specific requirements (narrower than the blanket row) --- */
.el-crit-extra { margin-top:36px; }
.el-crit-extra h3 { font-family:var(--font-sans); font-weight:400; font-size:22px; line-height:1.2; color:var(--fg-strong); margin:0 0 6px; }
.el-crit-extra .sub { font-size: var(--fs-sm); line-height:1.6; color:var(--slate-mid); margin:0 0 20px; max-width: var(--measure); }
.el-crit-extra .el-criteria { border-top:1px solid var(--border); }

/* --- §4 records checklist (printable) --- */
.el-records { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.el-records li { display:grid; grid-template-columns:26px 1fr; gap:16px; align-items:start; padding:18px 4px; border-top:1px solid var(--border-soft); }
.el-records li:last-child { border-bottom:1px solid var(--border-soft); }
.el-records .box { width:20px; height:20px; margin-top:2px; border-radius:5px; border:1.5px solid var(--sage-deep); flex:0 0 auto; background:linear-gradient(135deg, transparent 46%, var(--sage-deep) 47%, var(--sage-deep) 53%, transparent 54%) center/11px 11px no-repeat; }
.el-records .txt { font-size:15.5px; line-height:1.55; color:var(--slate-dark); }
.el-records .txt strong { color:var(--fg-strong); font-weight:600; }
.el-records .txt .note { color:var(--slate-mid); }
.el-records-foot { margin-top:20px; display:flex; align-items:center; gap:10px; font-family:var(--font-sans); font-size: var(--fs-note); color:var(--slate-mid); }
.el-records-foot .arrow { color:var(--accent-deep);}

/* --- §5 how the assessment works — 3 steps --- */
.el-steps { display:flex; flex-direction:column; }
.el-step { display:grid; grid-template-columns:auto 1fr; gap:26px; padding:28px 0; border-top:1px solid var(--border-soft); align-items:start; }
.el-step:last-child { border-bottom:1px solid var(--border-soft); }
.el-step .sn { font-family:var(--font-serif); font-weight:500; font-size:clamp(40px, 4vw, 56px); line-height:0.85; color: var(--accent-deep); letter-spacing:-0.01em; }
.el-step h4 { font-family:var(--font-serif); font-weight:500; font-size: clamp(24px,2vw, 26px); line-height:1.14; letter-spacing:-0.008em; color:var(--fg-strong); margin:0 0 8px; }
.el-step p { font-size:15px; line-height:1.65; color:var(--slate-dark); margin:0; max-width: var(--measure); }
.el-step p strong { color:var(--fg-strong); font-weight:600; }
.el-step .free-tag { display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-family:var(--font-sans); font-size:10.5px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--sage-deep); }
.el-step .free-tag::before { content:""; width:14px; height:1px; background:var(--sage-deep); }
.el-step.tell { position:relative; }
.el-step.tell h4 em { font-style:italic; }
.el-step-cross { margin-top:28px; display:inline-flex; align-items:center; gap:10px; font-family:var(--font-sans); font-size: var(--fs-sm); font-weight:500; color:var(--accent-deep); border-bottom:1px solid color-mix(in oklab, var(--accent-deep) 40%, transparent); padding-bottom:3px; width:fit-content; cursor:pointer; }
.el-step-cross:hover { border-color:var(--accent-deep); }
.el-step-cross .arrow { transition:transform 160ms var(--ease);}
.el-step-cross:hover .arrow { transform:translateX(4px);}

/* --- §6 inquiry form (sticky aside) --- */
.el-core-aside { position:sticky; top:24px; align-self:start; }
.el-inquiry { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:clamp(28px, 2.6vw, 36px); box-shadow:0 24px 60px -34px rgba(31,42,38,0.34); }
.el-inquiry .eyebrow { margin-bottom:16px; }
.el-inquiry h3 { font-family:var(--font-serif); font-weight:500; font-size:clamp(24px, 2.4vw, 30px); line-height:1.08; letter-spacing:-0.01em; color:var(--fg-strong); margin:0 0 8px; }
.el-inquiry h3 em { font-style:italic; }
.el-inquiry .el-inquiry-sub { font-size: var(--fs-sm); line-height:1.6; color:var(--slate-mid); margin:0 0 24px; }
.el-inquiry .form { gap:16px; }
.el-inquiry .form textarea { font-family:var(--font-sans); font-size: var(--fs-sm); padding:12px 14px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--fg-strong); outline:none; resize:vertical; min-height:84px; transition:border-color 160ms var(--ease); }
.el-inquiry .form textarea:focus { border-color: var(--accent-deep); }
.el-inquiry .submit { width:100%; justify-content:center; margin-top:6px; }
.el-inquiry-contact { margin-top:24px; padding-top:22px; border-top:1px solid var(--border-soft); }
.el-inquiry-contact .k { display:block; font-family:var(--font-sans); font-size:10px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate-mid); margin-bottom:10px; }
.el-inquiry-contact a { display:flex; align-items:center; gap:10px; font-size: var(--fs-sm); color:var(--fg-strong); padding:3px 0; border:0; }
.el-inquiry-contact a:hover { color:var(--accent-deep); opacity:1; }
.el-inquiry-contact a .g { color:var(--accent-deep); width:16px; text-align:center; flex:0 0 auto; }
.el-inquiry-resp { margin-top:18px; font-family:var(--font-sans); font-size: var(--fs-note); line-height:1.55; color:var(--slate-mid); }
.el-inquiry-resp strong { color:var(--fg-strong); font-weight:600; }
.el-inquiry .el-inquiry-disc { margin-top:16px; font-size: var(--fs-note); line-height:1.5; color:var(--slate-mid); }

/* ============================================================
   7 — IF YOU'RE NOT ELIGIBLE (honesty block)
   ============================================================ */
.el-honesty { padding:0 0 96px; }
.el-honesty-panel { background:var(--sage-pale); border-radius:16px; padding:clamp(44px, 5vw, 76px) clamp(32px, 5vw, 80px); }
.el-honesty-panel .eyebrow { color:var(--sage-deep); margin-bottom:22px; }
.el-honesty-panel .eyebrow::before { background:var(--sage-deep); }
.el-honesty-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 72px); align-items:start; }
.el-honesty h2 { font-family:var(--font-serif); font-weight:500; font-size:clamp(28px, 3.2vw, 44px); line-height:1.06; letter-spacing:-0.012em; color:var(--sage-ink); margin:0; max-width:16ch; }
.el-honesty h2 em { font-style:italic; }
.el-honesty-body p { font-size:16.5px; line-height:1.72; color:var(--sage-ink); margin:0 0 18px; }
.el-honesty-body p:last-child { margin-bottom:0; }
.el-honesty-body strong { font-weight:600; }
.el-honesty-body a { color:var(--accent-deep); font-weight:500; border-bottom:1px solid color-mix(in oklab, var(--accent-deep) 40%, transparent); cursor:pointer; }

/* ============================================================
   8 — CLOSING
   ============================================================ */
.el-closing { padding:0 0 112px; }
.el-closing-inner { border-top:1px solid var(--border); padding-top:56px; display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.el-closing .lead { font-family:var(--font-serif); font-weight:500; font-size:clamp(24px, 2.6vw, 34px); line-height:1.14; letter-spacing:-0.01em; color:var(--fg-strong); margin:0; max-width:16ch; }
.el-closing .lead em { font-style:italic; }
.el-closing-links { display:flex; gap:14px; flex-wrap:wrap; }
.el-closing-links a { display:inline-flex; align-items:center; gap:12px; padding:16px 22px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; text-decoration:none; color:inherit; transition:transform 160ms var(--ease), border-color 160ms var(--ease); }
.el-closing-links a:hover { transform:translateY(-2px); border-color:color-mix(in oklab, var(--accent) 32%, var(--border)); opacity:1; }
.el-closing-links .t { display:flex; flex-direction:column; gap:2px; }
.el-closing-links .t .k { font-family:var(--font-sans); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate-mid); }
.el-closing-links .t .v { font-family:var(--font-sans); font-size:19px; color:var(--fg-strong); }
.el-closing-links .arrow { color:var(--accent-deep);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px) {
  .el-core-grid { grid-template-columns:1fr; gap:56px; }
  .el-core-aside { position:static; }
  .el-inquiry { max-width:640px; }
}
@media (max-width:900px) {
  .el-who-grid { grid-template-columns:1fr; gap:36px; }
  .el-honesty-grid { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px) {
  .el-who, .el-core { padding:64px 0; }
  .el-core-main { gap:64px; }
  .el-crit-row { grid-template-columns:1fr; gap:6px; }
  .el-closing-inner { flex-direction:column; align-items:flex-start; }
  /* 1fr is minmax(auto,1fr), so the column could not shrink below its
     min-content — the .el-guideline auto column held it at 408px inside a
     350px container and pushed the page 38px wide at 390px. minmax(0,1fr)
     lets it shrink; the guideline stacks rather than holding a wide column. */
  .el-core-grid { grid-template-columns:minmax(0, 1fr); }
  .el-guideline { grid-template-columns:1fr; gap:16px; }
}

/* Solid-tumor routing note under the six blood-cancer conditions.
   🔴 Load-bearing, not decorative. This page is scoped to blood cancers —
   :157 "aged 16 and over with relapsed or refractory blood cancers", the
   list is headed "six relapsed or refractory conditions", and the criteria
   it publishes (ages 16+, ECOG 0-1, the myeloma prior-line rule) are
   confirmed for the HEMATOLOGY program only. open-items-register.md:
   "⛔ The blood-cancer criteria do not transfer."
   #el-dx now offers advanced gastric cancer, so without this note the form
   would invite a patient into a page whose stated criteria exclude them.
   The sentence routes them out and says the criteria do not apply. */
.el-cond-solid {
  margin: 22px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--sage-deep);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--slate-dark);
}
.el-cond-solid strong { color: var(--fg-strong); font-weight: 600; }
.el-cond-solid a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--accent-deep);
  text-decoration: none;
  border: 0;
}
.el-cond-solid a:hover { color: var(--fg-strong); }

/* ---------------------------------------------------------------------------
   Canonical assessment form inside the sticky aside
   The form markup is shared byte-for-byte with index.html, which means it
   carries .row (2 columns, base.css:1422) and .row3 (3 columns, v3.css:739).
   Those are right in the homepage's full-width panel and wrong here: this
   aside is ~340px at every viewport width, so a media query cannot fix it —
   the constraint is the container, not the screen.

   So the markup stays shared and the container decides. eligibility.css loads
   after base.css and v3.css, so these win without !important.
   --------------------------------------------------------------------------- */
.el-inquiry .form .row,
.el-inquiry .form .row3 {
  grid-template-columns: 1fr;
}