/* =========================================================
   V9 overrides — v4.0 MD content update on the V5b design
   ========================================================= */

/* ---------- Nav: 7 items + dropdowns ---------- */
:root:root .nav-center { gap: 26px; }
.nav-group { position: relative; display: inline-flex; }
.nav-group > .nav-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-group .caret {
  font-size: 8px;
  opacity: 0.55;
  transform: translateY(1px);
  transition: transform 0.18s ease;
}
.nav-group:hover .caret,
.nav-group:focus-within .caret { transform: translateY(1px) rotate(180deg); }
.nav-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 232px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--line, #e5ded2);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 44px -18px rgba(30, 41, 38, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nav-drop::before {
  /* hover bridge so the menu doesn't close crossing the gap */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* Escape-dismissed. The dropdowns open on :hover / :focus-within, which is
   pure CSS — Tab-in opens, and the children are real links, so arrowing
   through needs nothing. Escape is the one thing CSS cannot express, so
   mobilenav.js sets .nav-esc and returns focus to the trigger; without this
   rule, refocusing the trigger would satisfy :focus-within and reopen it.
   Cleared on focusout — see mobilenav.js. */
.nav-group.nav-esc .nav-drop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.nav-drop a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: var(--fs-ui, 14px);
  color: var(--fg, #3a3630);
  cursor: pointer;
  text-decoration: none;
}
.nav-drop a:hover { background: var(--bg-alt, #f2ede4); color: var(--fg-strong, #1e2926); }
.nav-drop a .s {
  font-size: var(--fs-label-sm, 11px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-mid, #8a8378);
  white-space: nowrap;
}
.nav-drop .nav-drop-sep {
  height: 1px;
  background: var(--line, #e5ded2);
  margin: 6px 8px;
}

/* ============================================================
   MEGA MENU — Conditions and Therapies `[DECISION — Jacob, 7 Aug 2026]`
   ============================================================
   Two columns, blood cancers | solid tumor program, replacing the
   separator-then-heading stack that ran down a single column.

   🔴 WHY TWO COLUMNS, not one merged "Treatment" menu. Conditions and
   Therapies stay SEPARATE top-level items: condition pages are the
   acquisition surface (a patient searches their disease name) and therapy
   pages convert. Merging them puts the acquisition path one recognition
   step deeper behind an abstract umbrella word. See CLAUDE.md — "Judge
   pages by tier, not uniformly."

   🔴 The solid tumor program gets its own column because it IS a distinct
   program, not a leftover. In one column, behind a separator, a single
   gastric-cancer link read as an orphan. ⛔ Do not fold it back in to
   "tidy up" the asymmetry — the asymmetry is the content. */
.nav-drop-mega {
  left: 50%;
  min-width: 520px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 6px 18px;
}
.nav-drop-mega .nav-drop-col { display: flex; flex-direction: column; min-width: 0; }
/* The right column is the second program — a hairline, not a box, so it
   separates without competing with the panel border. */
.nav-drop-mega .nav-drop-col + .nav-drop-col {
  padding-left: 18px;
  border-left: 1px solid var(--line, #e5ded2);
}
.nav-drop-mega .nav-drop-head {
  padding: 4px 12px 8px;
  pointer-events: none;
}
/* Footer spans both columns — "All conditions →" belongs to the whole menu. */
.nav-drop-mega .nav-drop-foot {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line, #e5ded2);
}
.nav-drop-mega .nav-drop-foot a { font-weight: 500; }

/* Below 1240 the panel would out-width its trigger and push off-canvas on the
   right-hand items. One column there — it is only ~140px of viewport before
   the whole menu becomes the hamburger at 1100. */
@media (max-width: 1240px) {
  .nav-drop-mega { min-width: 300px; grid-template-columns: 1fr; }
  .nav-drop-mega .nav-drop-col + .nav-drop-col {
    padding-left: 0;
    border-left: 0;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line, #e5ded2);
  }
}
/* Program subheading inside a dropdown — separates the solid-tumor program
   from the blood-cancer group above it. Not a link. */
.nav-drop .nav-drop-head {
  padding: 9px 12px 3px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sage-deep, #5f7a5f);
  pointer-events: none;
}
@media (max-width: 1100px) {
  :root:root .nav-center { gap: 18px; font-size: var(--fs-ui); }
}

/* ---------- Hero: secondary CTA as quiet text link (not ghost button) ---------- */
.link-quiet {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-soft, #6d675d);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, currentColor 35%, transparent);
  padding-bottom: 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.link-quiet:hover { color: var(--fg-strong, #1e2926); }
.link-quiet .arrow { font-size: 12px;}

/* ---------- Trust strip: 4 cards ---------- */
.hero .trust-strip.cols-4 { grid-template-columns: repeat(4, 1fr); gap: 32px; }
.trust-item .n.word.long { font-size: clamp(20px, 1.9vw, 26px); }
.trust-strip-notes { margin-top: 14px; }
@media (max-width: 980px) {
  .hero .trust-strip.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  .hero .trust-strip.cols-4 { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- Compact cost signal (full pricing lives on /costs) ---------- */
.cost-signal {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
}
.cost-signal .cs-cta {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 6px;
}
@media (max-width: 860px) {
  .cost-signal { grid-template-columns: 1fr; gap: 28px; }
  .cost-signal .cs-cta { justify-content: flex-start; }
}

/* ---------- Condition cards: linked condition lists ----------
   ⚠️ Homepage-only selectors living in a shared sheet: `.cond-card` and
   `.cond-list` appear in index.html and nowhere else in the 36 pages.
   (/eligibility's list is `.el-cond-list` — a different rule in
   eligibility.css. Do not "unify" them.)

   Separation is the COLUMN GAP, not an interpunct. It used to be
   `li + li::before { content: "·" }`, which put the separator inside the
   flex item — so whenever an item wrapped, its leading "·" wrapped with it
   and the new line opened on a dangling bullet. Visible in the CD19 card
   (5 conditions) at 1200, 1100 and 390.

   ⛔ Do not "fix" this by moving the separator to `li:not(:last-child)::after`.
   That only moves the orphan to the end of the line. A separator glued to
   either neighbour cannot survive wrapping — the gap can, because it
   collapses at a line break instead of rendering. The underline on each link
   already does the delineating the dot was there for.
   Gap is 18px ≈ the old 8px + dot + 8px, so spacing is unchanged. */
.cond-card .cond-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.cond-card .cond-list li { display: inline-flex; align-items: baseline; }
.cond-card .cond-list a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
  text-underline-offset: 3px;
  cursor: pointer;
}
.cond-card .cond-list a:hover { text-decoration-color: currentColor; }

/* ---------- Hero video play-trigger (secondary, over the photo) ---------- */
.hero-media {
  grid-column: 2;
  align-self: end;
  justify-self: start;
  margin: 0 0 clamp(20px, 6vh, 56px) 0;
  position: relative;
  z-index: 2;
}
/* Video CTA placement (Tweak) *//* Text-column video link (alt placement, beneath the CTAs) */
.hero-video-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--fg-strong);
  cursor: pointer;
  width: fit-content;
}
.hero-video-link .hvl-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms var(--ease);
}
.hero-video-link .hvl-icon svg { width: 13px; height: 13px; margin-left: 2px; }
.hero-video-link:hover .hvl-icon { transform: scale(1.08); }
.hero-video-link .hvl-min { color: var(--slate-mid); font-weight: 400; }
.hero-video-trigger {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  padding: 9px 24px 9px 9px;
  cursor: pointer;
  box-shadow: 0 16px 44px -20px rgba(30, 41, 38, 0.4);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.hero-video-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 56px -20px rgba(30, 41, 38, 0.46);
}
.hvt-btn {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 180ms var(--ease);
}
.hero-video-trigger:hover .hvt-btn { transform: scale(1.06); }
.hvt-btn svg { width: 22px; height: 22px; margin-left: 3px; }
.hvt-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  flex-shrink: 0;
}
.hvt-t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  white-space: nowrap;
}
.hvt-d {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  color: var(--slate-mid);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .hero-media { grid-column: 1; align-self: start; justify-self: start; margin: 28px 0 0; }
}
@media (max-width: 420px) {
  .hero-video-trigger { padding: 8px 18px 8px 8px; gap: 12px; }
  .hvt-btn { width: 46px; height: 46px; }
  .hvt-t { font-size: var(--fs-sm); }
}

/* Concierge launcher — mobile only (desktop is covered by the header
   button + hero primary CTA, so the fixed bottom-right pill is redundant).
   :root prefix raises specificity above concierge.css, which loads later. */
:root .cc-launcher { display: none; }
@media (max-width: 760px) {
  :root .cc-launcher { display: inline-flex; }
}

/* ---------- Wider-team line (replaces the homepage publication block) ---------- */
.cred-team-line {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px 48px;
  flex-wrap: wrap;
}
.cred-team-line p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight:500;
  font-size: clamp(24px,2.2vw, 27px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--fg-strong);
  max-width: 24ch;
}
.cred-team-line p em { font-style: italic; color: var(--accent-deep); }
.cred-team-line .cred-link { margin-top: 0; flex-shrink: 0; }

/* ---------- Hero video lightbox ---------- */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.video-lightbox[hidden] { display: none; }
.vl-scrim {
  position: absolute;
  inset: 0;
  background: rgba(18, 24, 22, 0.74);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: vlFade 200ms var(--ease);
}
.vl-dialog {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  animation: vlRise 240ms var(--ease);
}
@keyframes vlFade { from { opacity: 0; } }
@keyframes vlRise { from { opacity: 0; transform: translateY(12px); } }
.vl-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0f1512;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
}
.vl-frame iframe,
.vl-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vl-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.66);
}
.vl-ph-icon {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vl-ph-icon svg { width: 26px; height: 26px; margin-left: 4px; }
.vl-ph-t {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
}
.vl-ph-d {
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.03em;
}
.vl-close {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms var(--ease);
}
.vl-close:hover { background: rgba(255, 255, 255, 0.14); }
.vl-caption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
}