/* ════════ DESIGN TOKENS ════════
 * Palette: bright emerald primary on warm cream neutrals.
 * Deep forest as secondary for dark surfaces — so the entire page
 * stays in the same green family, no section feels突兀.
 */
:root {
  --bg: #FAFCFB;          /* clean near-white, faint cool green — platinum base */
  --bg-card: #FFFFFF;
  --bg-tint: #EFF4F0;     /* crisp pale green */
  --bg-sand: #E7EEE8;     /* cool media wells */

  --ink: #0C1F17;         /* deep green-black */
  --ink-2: #355247;
  --ink-3: #6F8479;
  --ink-4: #A4B3AB;

  --line: #E8EDE8;
  --line-2: #DBE3DD;
  --line-strong: #C8D3CA;

  /* deep forest greens for the dark section */
  --forest: #0E2A22;
  --forest-2: #0A2018;
  --forest-3: #173F33;

  /* Primary bright emerald — used everywhere CTA/highlights live */
  --brand: #16B87A;        /* vivid emerald, energetic but readable */
  --brand-deep: #0E8C5C;
  --brand-soft: #DAF4E6;
  --brand-tint: #ECF8F1;

  /* Accent mirrors brand by default — single chromatic story */
  --accent: #16B87A;
  --accent-deep: #0E8C5C;
  --accent-tint: #DAF4E6;
  --accent-soft: #ECF8F1;

  /* Prestige gold — secondary accent paired with the green (white-platinum-green) */
  --gold: #C2A14E;
  --gold-deep: #9A7B2F;
  --gold-soft: #E9DBAC;
  --gold-tint: #F6EFDA;
  /* Award amber refined toward a cleaner champagne gold */
  --amber: #B8924A;
  --amber-deep: #876724;
  --amber-tint: #F4ECD3;

  /* Cool support */
  --blue: #2F7BB8;
  --blue-tint: #E3EEF8;

  --rose: #B85450;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;

  --shadow-1: 0 1px 2px rgba(12,31,23,.04), 0 2px 8px rgba(12,31,23,.04);
  --shadow-2: 0 2px 6px rgba(12,31,23,.05), 0 12px 32px rgba(12,31,23,.07);
  --shadow-cta: 0 1px 2px rgba(14,140,92,.22), 0 8px 20px rgba(22,184,122,.28);

  --pad: 1.5rem;
  --gutter: 1.25rem;
  --maxw: 1280px;
  --edge: 34px;          /* unified page horizontal gutter — steps down responsively below */

  --display: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sans:    "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif:   "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Geist Mono", ui-monospace, "SF Mono", monospace;
}

/* Tweak: density */
[data-density="cozy"]   { --pad: 1.15rem; --gutter: 0.9rem; }
[data-density="airy"]   { --pad: 1.85rem; --gutter: 1.6rem; }

/* Tweak: type scale */
[data-type-scale="compact"] { font-size: 14.5px; }
[data-type-scale="large"]   { font-size: 17px; }

/* Tweak: palette — brand + accent move together so the page stays unified */
[data-accent="green"]   { --brand:#16B87A; --brand-deep:#0E8C5C; --brand-soft:#DAF4E6; --brand-tint:#ECF8F1; --accent:#16B87A; --accent-deep:#0E8C5C; --accent-tint:#DAF4E6; --accent-soft:#ECF8F1; }
[data-accent="lime"]    { --brand:#84CC16; --brand-deep:#5D8F0F; --brand-soft:#E6F3CE; --brand-tint:#F2F8E0; --accent:#5D8F0F; --accent-deep:#3E5F0A; --accent-tint:#E6F3CE; --accent-soft:#F2F8E0; }
[data-accent="teal"]    { --brand:#0EA5A3; --brand-deep:#0A7E7D; --brand-soft:#CFEFEE; --brand-tint:#E8F7F6; --accent:#0EA5A3; --accent-deep:#0A7E7D; --accent-tint:#CFEFEE; --accent-soft:#E8F7F6; }
[data-accent="forest"]  { --brand:#2C8F6E; --brand-deep:#1C6F54; --brand-soft:#D7EBDF; --brand-tint:#EAF4ED; --accent:#2C8F6E; --accent-deep:#1C6F54; --accent-tint:#D7EBDF; --accent-soft:#EAF4ED; }

* { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--accent-tint); color: var(--accent-deep); }

/* ════════ LAYOUT PRIMITIVES ════════ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); }
/* Unified responsive page gutter — every page-edge container reads --edge */
@media (max-width: 1024px) { :root { --edge: 28px; } }
@media (max-width: 600px)  { :root { --edge: 20px; } }
@media (max-width: 400px)  { :root { --edge: 16px; } }

/* Section header — editorial */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin: 0 0 1.25rem; }
.shead-l { max-width: 760px; }
/* Solo variant: only eyebrow on the left. To avoid the awkward
   "eyebrow ............... View all →" whitespace gap, connect them with
   a stretching hairline rule — editorial section-divider feel. */
.shead.shead--solo {
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1.5rem;
}
.shead.shead--solo .shead-eyebrow { margin-bottom: 0; flex-shrink: 0; }
.shead.shead--solo .shead-l {
  display: flex; align-items: center; gap: 1.5rem;
  flex: 1; min-width: 0;
}
.shead.shead--solo .shead-l::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.shead.shead--solo .shead-r { flex-shrink: 0; padding-bottom: 0; }
.shead-eyebrow {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: .85rem;
  display: flex; align-items: center; gap: .6rem;
}
.shead-eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 1px;
}
.shead-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.shead-title em { font-style: normal; color: var(--brand); font-weight: 600; }
.shead-sub { font-size: 1rem; color: var(--ink-2); margin-top: .85rem; max-width: 620px; line-height: 1.55; }
.shead-r {
  display: flex; align-items: center; gap: 1.25rem;
  padding-bottom: .35rem;
}
.shead-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-deep);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .15s;
}
.shead-link:hover { color: var(--brand); }
.shead-link svg { width: 12px; height: 12px; }

section.block { padding: 3.5rem 0; }
section.block + section.block { padding-top: 0; }
section.block.tight { padding: 1.75rem 0 1rem; }

/* ════════ NAV ════════ */
nav.top {
  position: sticky; top: 0; z-index: 80;
  background: rgba(250,250,247,0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge);
  height: 68px;
  display: flex; align-items: center; gap: 2rem;
}
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; position: relative; }
.brand-logo { height: 38px; width: 180px; display: block; object-fit: contain; object-position: 0 50%; }
.brand-wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.012em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.brand-wordmark .wm-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand);
  transform: translateY(-1px);
}
.footer-brand-col .brand-wordmark { color: #fff; font-size: 18px; }
.footer-brand-col .brand-wordmark .wm-dot { background: var(--brand); }
@media (max-width: 640px) {
  .brand-wordmark { font-size: 15px; }
}
.logo-drop { transition: outline-color .15s, background-color .15s; outline: 2px dashed transparent; outline-offset: 4px; border-radius: 4px; }
.logo-drop.is-drag { outline-color: var(--brand); background: rgba(22,184,122,.06); }
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1FD18A 0%, var(--brand-deep) 100%);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  box-shadow: 0 1px 2px rgba(14,140,92,.22), 0 4px 12px rgba(22,184,122,.18);
}
.brand-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.015em;
  color: var(--ink);
}
.brand-sub {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--ink-3);
  text-transform: none;
  margin-top: -1px;
}
.nav-links { display: flex; gap: 4px; margin-left: 1rem; }
.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  padding: .5rem .8rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--bg-tint); color: var(--ink); }
.nav-link.active { color: var(--ink); font-weight: 600; }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: .55rem; }

/* Language switcher — sliding pill switch with EN / 中 labels */
.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 0;
  margin-right: .25rem;
  cursor: pointer;
  user-select: none;
  isolation: isolate;
}
.lang-switch::before {
  content: "";
  position: absolute;
  top: 3px; bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(12,31,23,.08), 0 1px 1px rgba(12,31,23,.04);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
.lang-switch[data-active="zh"]::before { transform: translateX(100%); }
.lang-switch a {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-3);
  text-decoration: none;
  padding: .4rem .85rem;
  border-radius: 999px;
  line-height: 1;
  transition: color .25s;
  display: inline-flex; align-items: center;
  min-width: 32px; justify-content: center;
}
.lang-switch a:hover { color: var(--ink-2); }
.lang-switch a.on {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 700px) {
  .lang-switch a { padding: .35rem .7rem; font-size: 12.5px; min-width: 28px; }
}
.btn {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  padding: .65rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .15s, border-color .15s, color .15s, transform .1s, box-shadow .15s;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-tint); color: var(--ink); }
.btn-outline { border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: var(--bg-tint); }
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--brand-deep); box-shadow: 0 1px 2px rgba(14,140,92,.28), 0 12px 26px rgba(22,184,122,.32); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 1px rgba(28,111,84,.16), 0 6px 16px rgba(28,111,84,.18);
}
.btn-accent:hover { background: var(--accent-deep); transform: translateY(-1px); }

/* ════════ HERO — compact, search at bottom ════════ */
.hero {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: stretch;
  background:
    linear-gradient(180deg, rgba(246,247,241,0) 0%, rgba(246,247,241,1) 100%),
    radial-gradient(ellipse 85% 70% at 85% 10%, #C8F3DD 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 8% 90%, #E6F0CB 0%, transparent 60%),
    linear-gradient(135deg, #ECF8F1 0%, #E0F2E8 40%, #D6EED5 100%);
  color: var(--ink);
  overflow: hidden;
  padding: 1.4rem 0 0;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 92% 0%, rgba(22,184,122,.18), transparent 60%),
    radial-gradient(ellipse 50% 45% at 4% 100%, rgba(132,204,22,.12), transparent 65%);
  pointer-events: none;
}
.hero::after {
  /* fine grid — fades to nothing at bottom so it doesn't fight the search bar */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(12,31,23,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,31,23,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 0.7rem;
}
.hero-content {
  display: flex; flex-direction: column;
  min-width: 0;
  width: 100%;
}
.hero-copy {
  display: flex; flex-direction: column;
  padding: .25rem 0 0.8rem;
}
.hero-meta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .9rem .45rem .65rem;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 2px rgba(12,31,23,.04), 0 8px 20px rgba(12,31,23,.05);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  margin-bottom: 0.7rem;
  align-self: flex-start;
  white-space: nowrap;
}
.hero-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(22,184,122,.22); }
.hero-h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: var(--ink);
}
.hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #16B87A 0%, #0E8C5C 60%, #0A6D47 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.hero-sub {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 620px;
  margin-top: 0.6rem;
}
.hero-cta-row { display: flex; gap: .55rem; margin-top: 1.4rem; flex-wrap: wrap; }
.hero-cta-row .btn-outline {
  border-color: rgba(12,31,23,.18);
  color: var(--ink);
  background: rgba(255,255,255,.55);
}
.hero-cta-row .btn-outline:hover { background: rgba(255,255,255,.9); border-color: var(--ink); }

/* ──── Hero right column: display number (now hidden by default; kept for Tweak fallback) ──── */
.hero-display {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  padding: 1rem 0 1.6rem;
  min-width: 0;
}
.hero-display-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(7rem, 12vw, 13rem);
  line-height: .82;
  letter-spacing: -.075em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.hero-display-cap {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 260px;
  text-wrap: balance;
}
.hero-display-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brand-deep);
  margin-top: 1.1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap;
}
.hero-display-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px rgba(22,184,122,.22);
}
/* Image/Video bg + light text: invert display colors */
[data-hero-bg="image"][data-hero-text="light"] .hero-display-num,
[data-hero-bg="video"][data-hero-text="light"] .hero-display-num { color: #fff; }
[data-hero-bg="image"][data-hero-text="light"] .hero-display-cap,
[data-hero-bg="video"][data-hero-text="light"] .hero-display-cap { color: rgba(255,255,255,.65); }
[data-hero-bg="image"][data-hero-text="light"] .hero-display-meta,
[data-hero-bg="video"][data-hero-text="light"] .hero-display-meta { color: #6BE8AA; }

@media (max-width: 900px) {
  /* Mobile hero — keep the "28" identity, but reshape it as a compact
     horizontal lead-in above the title rather than hiding it entirely. */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: .25rem;
    padding-bottom: 1.25rem;
  }
  .hero-display {
    order: -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: .9rem;
    padding: 0 0 .5rem;
    margin-bottom: .25rem;
  }
  .hero-display-num {
    font-size: clamp(2.6rem, 11vw, 3.4rem);
    line-height: .85;
    margin-bottom: 0;
    letter-spacing: -.05em;
    flex-shrink: 0;
  }
  .hero-display-cap {
    font-size: 11px;
    line-height: 1.4;
    max-width: none;
    letter-spacing: .1em;
    flex: 1;
    min-width: 0;
  }
  .hero-display-meta { display: none; }
}

/* ──── Hero stats — 5 bordered cards, sit between sub-copy and search.
   Each card stacks: big number / label / small descriptor. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 1.2rem;
  gap: .75rem;
}
.hero-stat {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  border-radius: 12px;
  padding: 1.15rem 1.25rem 1.1rem;
  text-align: center;
  align-items: center;
  transition: transform .15s;
}
/* Independent background layer — sits behind the text so its opacity can be
   edited on its own (clicking the card body selects this layer, not the text). */
.hero-stat-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.6);
  border: 1px solid var(--line);
  z-index: 0;
  transition: background .15s, border-color .15s;
}
.hero-stat > *:not(.hero-stat-bg) { position: relative; z-index: 1; }
.hero-stat:hover { transform: translateY(-1px); }
.hero-stat:hover .hero-stat-bg {
  background: #fff;
  border-color: var(--line-strong);
}
.hero-stat-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: .02em;
}
.hero-stat-num .plus { color: var(--brand); margin-left: .04em; }
.hero-stat-lbl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  margin-top: .55rem;
  line-height: 1.3;
}
.hero-stat-cap {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 450;
  color: var(--ink-3);
  margin-top: .25rem;
  line-height: 1.35;
}
/* Image/Video bg — invert text for readability */
[data-hero-bg="image"][data-hero-text="light"] .hero-stats,
[data-hero-bg="video"][data-hero-text="light"] .hero-stats { border-top-color: rgba(255,255,255,.18); }
/* Dark frosted card fill over a photo/video hero */
[data-hero-bg="image"][data-hero-text="light"] .hero-stat-bg,
[data-hero-bg="video"][data-hero-text="light"] .hero-stat-bg {
  background: rgb(8,31,23);
  border-color: rgba(255,255,255,.16);
}
[data-hero-bg="image"][data-hero-text="light"] .hero-stat:hover .hero-stat-bg,
[data-hero-bg="video"][data-hero-text="light"] .hero-stat:hover .hero-stat-bg {
  background: rgb(11,40,30);
  border-color: rgba(255,255,255,.28);
}
[data-hero-bg="image"][data-hero-text="light"] .hero-stat-num,
[data-hero-bg="video"][data-hero-text="light"] .hero-stat-num { color: #fff; }
[data-hero-bg="image"][data-hero-text="light"] .hero-stat-lbl,
[data-hero-bg="video"][data-hero-text="light"] .hero-stat-lbl { color: rgba(255,255,255,.65); }
@media (max-width: 760px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: .65rem;
    column-gap: .65rem;
    margin-top: 1.5rem;
    height: auto !important; /* override desktop inline height:110px so the 2-col, 3-row grid can grow (else cards overflow & search overlaps) */
  }
  .hero-stat { padding: 1rem 1rem .95rem; align-items: center; text-align: center; height: auto !important; }
  .hero-stat-num { font-size: 1.4rem; }
  .hero-stat-lbl { font-size: 13.5px; margin-top: .4rem; }
  .hero-stat-cap { font-size: 12px; }
  /* 5th stat spans both columns and reflows to a horizontal layout */
  .hero-stat:nth-child(5) {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 1rem;
  }
  .hero-stat:nth-child(5) .hero-stat-num { flex-shrink: 0; }
  .hero-stat:nth-child(5) .hero-stat-body { display: flex; flex-direction: column; }
  .hero-stat:nth-child(5) .hero-stat-lbl { margin-top: 0; }
}
@media (max-width: 480px) {
  .hero-stats { row-gap: .55rem; column-gap: .55rem; }
  .hero-stat-num { font-size: 1.25rem; }
  /* Section eyebrows are bumped to 18px inline; uppercase + tracking overflows
     narrow phones and forces a horizontal page scroll. Pull them back + allow wrap. */
  .shead-eyebrow { font-size: 12px !important; letter-spacing: .04em; flex-wrap: wrap; }
}

/* ════════ HERO SEARCH — anchored at hero bottom ════════ */
.hero-search {
  position: relative;
  z-index: 3;
  margin-top: auto;
}
.hero-search-card {
  background: var(--bg-card);
  border: 1.5px solid var(--brand);
  border-radius: 14px;
  padding: .55rem .55rem .55rem 1.15rem;
  display: flex; align-items: center; gap: .75rem;
  box-shadow: 0 1px 2px rgba(12,31,23,.04), 0 12px 28px rgba(12,31,23,.06);
  transition: border-color .15s, box-shadow .15s;
}
.hero-search-card:focus-within {
  border-color: var(--brand-deep);
  box-shadow: 0 0 0 4px var(--brand-soft), 0 18px 40px rgba(12,31,23,.10);
}
.hero-search-card .search-icon { color: var(--ink-3); flex-shrink: 0; margin-left: .25rem; }
.hero-search-card .search-input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: inherit;
  font-size: 16px;
  padding: 0 .25rem;
  min-width: 0;
  resize: none;
  /* Vertically center the placeholder with line-height = height — classic
     trick that works because textarea has no native v-center. */
  line-height: 2.7;
  height: 2.7em;
  overflow: hidden;
  box-sizing: border-box;
}
.hero-search-card .search-input::placeholder { color: var(--ink-3); }

/* Inline filter tabs — live INSIDE the search card, between input and Search button. */
.hero-search-card .inline-tabs {
  display: flex; align-items: center; gap: .3rem;
  flex-shrink: 0;
  padding-right: .5rem;
  margin-right: .25rem;
  border-right: 1px solid var(--line);
}
.hero-search-card .inline-tabs .tab {
  background: transparent;
  border: 0;
  padding: .45rem .85rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 999px;
  letter-spacing: -.005em;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.hero-search-card .inline-tabs .tab:hover { color: var(--ink); }
.hero-search-card .inline-tabs .tab.on {
  background: var(--ink);
  color: #fff;
}
.hero-search-card .search-go {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--shadow-cta);
  display: inline-flex; align-items: center; gap: .4rem;
  flex-shrink: 0;
}
.hero-search-card .search-go:hover { background: var(--brand-deep); transform: translateY(-1px); }

/* Filter tabs — sit below the search card. Stripe/Linear docs pattern:
   text with bottom-border indicator. No pills, no background fills. */
.hero-search-tabs {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 0 .15rem;
  border-bottom: 1px solid rgba(12,31,23,.08);
}
.hero-search-tabs .tab {
  background: transparent;
  border: 0;
  padding: .55rem .1rem .7rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  position: relative;
  letter-spacing: -.005em;
  margin-bottom: -1px;
  transition: color .15s;
}
.hero-search-tabs .tab::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: transparent;
  border-radius: 1px 1px 0 0;
  transition: background .15s;
}
.hero-search-tabs .tab:hover { color: var(--ink-2); }
.hero-search-tabs .tab.on { color: var(--ink); }
.hero-search-tabs .tab.on::after { background: var(--brand); }
.hero-search-suggest {
  display: flex; align-items: center; gap: .55rem;
  margin-top: .85rem;
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}
.hero-search-suggest b { font-weight: 500; color: var(--ink-2); margin-right: .15rem; }
.hero-search-suggest a {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(12,31,23,.08);
  padding: .25rem .7rem;
  border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.hero-search-suggest a:hover { background: #fff; border-color: var(--brand); color: var(--brand-deep); }

/* ──── KPI band — thin compact strip directly under hero ────
   No card chrome, just 5 inline stats with hairline dividers. */
.kpi-band {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 1.25rem 0 1.4rem;
}
.kpi-band-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
.kpi-band-item {
  padding: 0 1.5rem;
  position: relative;
}
.kpi-band-item + .kpi-band-item::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: var(--line);
}
.kpi-band-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: .05rem;
}
.kpi-band-num .plus { color: var(--brand); }
.kpi-band-lbl {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: .35rem;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .kpi-band { padding: .9rem 0 1rem; }
  .kpi-band-row {
    grid-template-columns: repeat(3, 1fr);
    row-gap: .85rem;
  }
  .kpi-band-item { padding: 0 .75rem; }
  .kpi-band-item:nth-child(n+4) { padding-top: .85rem; border-top: 1px solid var(--line); }
  .kpi-band-item:nth-child(4)::before { display: none; }
  .kpi-band-num { font-size: 1.2rem; }
  .kpi-band-lbl { font-size: 12px; }
}

/* ──── Hero KPI strip — sits between claim and search as proof points.
   Inline within the hero, transparent so the hero gradient shows through. */
.hero-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 1.4rem 0 .25rem;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(12,31,23,.10);
  border-bottom: 1px solid rgba(12,31,23,.10);
  gap: 1rem;
}
.hero-kpi { padding: 0 1rem; position: relative; }
.hero-kpi + .hero-kpi::before {
  content: ""; position: absolute; left: 0; top: 15%; bottom: 15%;
  width: 1px; background: rgba(12,31,23,.10);
}
.hero-kpi-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.9vw, 1.55rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
  display: flex; align-items: baseline; gap: .05rem;
}
.hero-kpi-num .plus { color: var(--brand); }
.hero-kpi-lbl {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: .4rem;
  letter-spacing: 0;
}
/* On image/video hero, swap to white-on-translucent so it reads */
[data-hero-bg="image"][data-hero-text="light"] .hero-kpis,
[data-hero-bg="video"][data-hero-text="light"] .hero-kpis {
  border-color: rgba(255,255,255,.22);
}
[data-hero-bg="image"][data-hero-text="light"] .hero-kpi-num,
[data-hero-bg="video"][data-hero-text="light"] .hero-kpi-num { color: #fff; }
[data-hero-bg="image"][data-hero-text="light"] .hero-kpi-lbl,
[data-hero-bg="video"][data-hero-text="light"] .hero-kpi-lbl { color: rgba(255,255,255,.78); }
[data-hero-bg="image"][data-hero-text="light"] .hero-kpi + .hero-kpi::before,
[data-hero-bg="video"][data-hero-text="light"] .hero-kpi + .hero-kpi::before {
  background: rgba(255,255,255,.18);
}
@media (max-width: 760px) {
  .hero-kpis {
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .9rem 0;
    margin: 1.1rem 0 .25rem;
  }
  .hero-kpi { padding: 0 .5rem; }
  .hero-kpi:nth-child(n+4) { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid rgba(12,31,23,.08); }
  .hero-kpi:nth-child(4)::before,
  .hero-kpi:nth-child(2)::before { display: block; }
  .hero-kpi:nth-child(4)::before { display: none; }
  .hero-kpi-num { font-size: 1.2rem; }
  .hero-kpi-lbl { font-size: 12px; }
}

@media (max-width: 760px) {
  .hero { min-height: auto; padding: 3rem 0 0; }
  .hero-search-tabs { gap: 1.1rem; overflow-x: auto; scrollbar-width: none; }
  .hero-search-tabs::-webkit-scrollbar { display: none; }
  .hero-search-tabs .tab { flex-shrink: 0; }
}

/* KPI strip — platform-at-a-glance band */
.kpi-strip {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--edge);
  position: relative;
}
.kpi-strip-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

/* Compact variant — sits right under the hero, smaller everything,
   no shadow (it visually attaches to the hero band). */
.kpi-band {
  background: var(--bg);
  padding: 1.4rem 0 0;
  position: relative;
  z-index: 4;
}
.kpi-band .kpi-strip-card {
  box-shadow: 0 1px 2px rgba(12,31,23,.04), 0 6px 18px rgba(12,31,23,.06);
  border-radius: 14px;
}
.kpi-band .kpi { padding: 1rem 1.1rem; }
.kpi-band .kpi-num {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: -.025em;
}
.kpi-band .kpi-label {
  font-size: 13px;
  margin-top: .35rem;
  font-weight: 500;
  color: var(--ink-2);
}
.kpi-band .kpi-context { display: none; }
.kpi-band .kpi + .kpi::before { top: 22%; bottom: 22%; }
.kpi {
  padding: 1.5rem 1.5rem;
  position: relative;
}
.kpi + .kpi::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px; background: var(--line);
}
.kpi-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.1vw, 2.5rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.035em;
  display: flex; align-items: baseline; gap: .15rem;
}
.kpi-num .suffix { font-size: 0.55em; color: var(--brand-deep); font-weight: 600; }
.kpi-num .plus { color: var(--brand); }
.kpi-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-top: .7rem;
}
.kpi-context {
  font-size: 13px;
  color: var(--ink-3);
  margin-top: .25rem;
}
@media (max-width: 880px) {
  .kpi-strip-card { grid-template-columns: repeat(2, 1fr); }
  .kpi + .kpi::before { display: none; }
  .kpi { border-top: 1px solid var(--line); }
  .kpi:nth-child(-n+2) { border-top: 0; }
  .kpi:nth-child(odd) { border-right: 1px solid var(--line); }
}

/* ════════ SEARCH (legacy class kept for backward compat, unused) ════════ */
.search-wrap { display: none; }

/* On mobile, hide the inline "View all" link in solo headers (it overlaps long
   eyebrows) and instead show a full-width CTA at the END of the section. */
.section-cta-bottom { display: none; }
@media (max-width: 700px) {
  .shead.shead--solo .shead-r { display: none; }
  .section-cta-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: .95rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--bg-card);
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    transition: background .15s, border-color .15s;
  }
  .section-cta-bottom:hover {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-deep);
  }
  .section-cta-bottom .arrow {
    color: var(--brand-deep);
    transition: transform .15s;
  }
  .section-cta-bottom:hover .arrow { transform: translateX(2px); }
}

/* ════════ DISEASE CARDS — 3×3 grid ════════ */
.disease-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 980px) { .disease-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .disease-grid { grid-template-columns: 1fr; } }

.disease {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.disease:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.disease__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--bg-sand);
  position: relative;
}
.disease__media img,
.disease__media image-slot {
  width: 100%; height: 100%;
  display: block;
}
.disease__media img { object-fit: cover; }
.disease__media img,
.disease__media image-slot {
  filter: saturate(0.85) contrast(0.95);
  transition: transform .5s ease, filter .3s;
}
.disease:hover .disease__media img,
.disease:hover .disease__media image-slot {
  transform: scale(1.04);
  filter: saturate(1) contrast(1);
}
.disease__crown {
  position: absolute;
  top: .9rem; left: .9rem;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  color: var(--ink);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 2px 8px rgba(15,30,55,.08);
  display: inline-flex; align-items: center; gap: .4rem;
}
.disease__crown::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
}
.disease__crown.alt::before { background: var(--accent); }
.disease__crown.alt { color: var(--ink); }
.disease__body { padding: 16px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 0; }
.disease__eyebrow {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-deep);
  margin-bottom: 3px;
}
.disease__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 0;
  /* natural height: 1- or 2-line titles flow top-down; slack pools at the auto bottom */
}
.disease__summary {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}
.disease__hero {
  display: flex; align-items: center; gap: .85rem;
  margin-top: 8px;   /* title → solid rule */
  padding-top: 10px; /* solid rule → hero */
  border-top: 1px solid var(--line);
}
.disease__hero-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--accent-deep);
  letter-spacing: -.035em;
  display: flex; align-items: baseline;
  flex-shrink: 0;
}
.disease__hero-num span {
  font-size: 20px;
  color: var(--accent);
  margin-left: .1em;
}
.disease__hero-lbl {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.35;
  flex: 1;
  /* natural height */
}
.disease__micro {
  list-style: none;
  display: flex;
  gap: 1.3rem;
  margin-top: 8px;  /* hero → dashed rule */
  padding-top: 8px; /* dashed rule → micro stats */
  border-top: 1px dashed var(--line-2);
}
.disease__micro li {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.35;
  display: flex; flex-direction: column; gap: 1px;
}
.disease__micro li span {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.015em;
}

/* ════════ SPECIALTY TABLE ════════ */
/* Carries more weight than the surrounding cream sections — stronger border,
   subtle shadow, and a slightly darker header bar so the data table reads
   as the page's "working surface" without needing its own section background. */
.spec-table {
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(12,31,23,.04), 0 8px 24px rgba(12,31,23,.06);
  overflow: hidden;
}
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) 28px;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.4rem;
}
.spec-head {
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  padding-top: .95rem; padding-bottom: .95rem;
}
.spec-row {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .15s;
}
.spec-row:hover { background: var(--brand-tint); }
.spec-row:last-of-type { border-bottom: 0; }
.spec-row.open { background: var(--brand-tint); }
.spec-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.25;
}
.spec-sub {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: .3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
}
.rank-blank { color: var(--ink-4); font-size: 1rem; }
.rank-meta {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  color: var(--ink-3);
  margin-top: .25rem;
  text-transform: none;
}
.rank.outcome { color: var(--accent-deep); }
.rank.outcome + .rank-meta { color: var(--accent-deep); }
.spec-teams {
  display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap;
}
.md {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: .25rem .55rem;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.md::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
}
.md-g { background: var(--amber-tint); color: var(--amber-deep); }
.md-g::before { background: var(--amber); }
.md-s { background: #ECECE6; color: var(--ink-2); }
.md-s::before { background: var(--ink-3); }
.md-b { background: #F0E5D6; color: #7A5826; }
.md-b::before { background: #B58A56; }
.chev {
  color: var(--ink-3);
  transition: transform .2s;
  display: flex; align-items: center; justify-content: center;
}
.spec-row.open .chev { transform: rotate(180deg); color: var(--accent-deep); }

/* Drawer */
.spec-drawer {
  display: none;
  background: var(--bg-tint);
  border-bottom: 1px solid var(--line);
}
.spec-row.open + .spec-drawer { display: block; }
.spec-drawer-inner { padding: .4rem 0 1.2rem; }
.spec-drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding: .9rem 1.4rem;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.spec-drawer-row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.spec-drawer-row:last-child { border-bottom: 0; }

/* ════════ PROGRAMME ROW = horizontal form of the disease card ════════
   Keeps the disease vocabulary (photo, standing badge, name, hospital) but
   lays the three outcome metrics as EQUAL-WEIGHT cells snapped to the same
   column grid as the ranking row above, so ranks and metrics align vertically. */
.spec-drawer-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 16px; }
.disease--row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, .9fr) minmax(0, .9fr) 28px;
  gap: 1rem; align-items: center; padding: 14px 1.4rem;
}
.dr-lead { display: flex; align-items: center; gap: 16px; min-width: 0; }
.disease--row .disease__media {
  width: 118px; height: 74px; aspect-ratio: auto; flex-shrink: 0;
  border-bottom: 0; border-radius: 8px;
}
.disease--row .disease__crown { top: .5rem; left: .5rem; font-size: 11px; padding: .2rem .45rem; gap: .3rem; }
.disease--row .disease__crown::before { width: 5px; height: 5px; }
.dr-text { min-width: 0; }
.disease--row .disease__eyebrow { font-size: 13px; margin-bottom: 2px; }
.disease--row .disease__name { font-size: 17px; }
.disease__rowhosp { font-size: 14px; color: var(--ink-3); margin-top: 3px; }
.dr-metric { min-width: 0; }
.dr-num { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1; color: var(--accent-deep); letter-spacing: -.03em; }
.dr-lbl { font-size: 13px; color: var(--ink-2); line-height: 1.3; margin-top: 5px; }
.dr-vs { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.dr-arrow { color: var(--ink-4); display: flex; justify-content: center; transition: color .15s, transform .15s; }
.disease--row:hover .dr-arrow { color: var(--brand); transform: translateX(2px); }
@media (max-width: 760px) {
  .disease--row { grid-template-columns: 1fr 1fr 1fr; gap: .9rem 1rem; }
  .dr-lead { grid-column: 1 / -1; }
  .dr-arrow { display: none; }
}
.spec-prog {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.015em;
}
.spec-prog-hosp {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: .3rem;
}
.aw {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: .25rem .55rem;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.aw.g { background: var(--amber-tint); color: var(--amber-deep); }
.aw.s { background: #ECECE6; color: var(--ink-2); }
.aw.b { background: #F0E5D6; color: #7A5826; }
.mtw {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.025em;
  color: var(--accent-deep);
  line-height: 1;
}
.mlbl {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: .3rem;
  line-height: 1.35;
}
.mvs {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--accent);
  margin-top: .25rem;
  font-weight: 500;
}

@media (max-width: 880px) {
  .spec-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 28px; }
  .spec-grid > .col-asia,
  .spec-grid > .col-emerging,
  .spec-grid > .col-teams { display: none; }
  .spec-drawer-head, .spec-drawer-row {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .spec-drawer-head > *:nth-child(n+4),
  .spec-drawer-row > *:nth-child(n+4) { display: none; }
}

/* ════════ HOSPITAL CARDS ════════ */
.hosp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 980px) { .hosp-grid { grid-template-columns: 1fr; } }

.hosp {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.5rem 1.4rem;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  display: flex; flex-direction: column;
}
.hosp:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.hosp-head { margin-bottom: 1.4rem; }
.hosp-eyebrow {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--brand-deep);
  text-transform: none;
  margin-bottom: .45rem;
}
.hosp-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
}
/* legacy hosp-hero kept for any fallback — current cards use .hosp-list */
.hosp-hero {
  padding: 1.2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 1rem;
  margin-bottom: 1.2rem;
}

/* New flat list — hospital cards use this to signal multi-specialty breadth */
.hosp-list {
  display: flex; flex-direction: column;
  margin: 0 0 1.35rem;
}
.hosp-list-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: .75rem;
  align-items: center;
  padding: .95rem 0;
  border-top: 1px solid var(--line);
}
.hosp-list-item:last-child {
  border-bottom: 1px solid var(--line);
}
.hosp-list-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent-deep);
  display: flex; align-items: baseline;
}
.hosp-list-num span {
  font-size: 0.55em;
  color: var(--accent);
  margin-left: .08em;
  font-weight: 600;
}
.hosp-list-text strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  display: block;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.hosp-list-text small {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: .3rem;
  display: block;
}
.hosp-hero-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent-deep);
  display: flex; align-items: baseline;
}
.hosp-hero-num span {
  font-size: 0.5em;
  color: var(--accent);
  margin-left: .08em;
}
.hosp-hero-text { flex: 1; }
.hosp-hero-text strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  display: block;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.hosp-hero-text small {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: .25rem;
  display: block;
}
.hosp-second {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.hosp-second-item { line-height: 1.35; }
.hosp-second-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -.02em;
}
.hosp-second-lbl {
  font-size: 14px;
  color: var(--ink-3);
  margin-top: .2rem;
  display: block;
  line-height: 1.4;
}
.hosp-tags {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: auto;
}
.hosp-tag {
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-2);
  background: var(--bg-tint);
  padding: .3rem .65rem;
  border-radius: 6px;
}

/* ════════ HOSPITAL CARDS — VARIANT A (photo-top vertical) ════════ */
.va-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 980px) { .va-grid { grid-template-columns: 1fr; } }

.va-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.va-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.va-photo {
  aspect-ratio: 16 / 10;
  background: var(--bg-sand);
  position: relative;
  overflow: hidden;
}
.va-photo image-slot { width: 100%; height: 100%; display: block; }
.va-photo-meta {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .3rem .65rem .3rem .55rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: 0 2px 8px rgba(15,30,55,.08);
}
.va-photo-meta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
}
.va-body {
  padding: 1.25rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.va-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-deep);
  margin-bottom: .35rem;
  letter-spacing: 0;
  text-transform: none;
}
.va-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.va-stats { display: flex; flex-direction: column; }
.va-stat {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: .75rem;
  align-items: center;
  padding: .8rem 0;
}
.va-num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent-deep);
  display: flex;
  align-items: baseline;
}
.va-num span {
  font-size: .55em;
  color: var(--accent);
  margin-left: .08em;
  font-weight: 600;
}
.va-stat-text strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  display: block;
  line-height: 1.3;
}
.va-stat-text small {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: .25rem;
  display: block;
  line-height: 1.4;
}
.va-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: 1rem;
}
.va-tag {
  font-size: 12px;
  font-weight: 450;
  color: var(--ink-2);
  background: var(--bg-tint);
  padding: .25rem .55rem;
  border-radius: 6px;
}

/* ════════ FRAMEWORK (vertical timeline) ════════ */
.fw-section { background: var(--bg-tint); padding: 4rem 0; }
/* Two-column editorial layout:
   - Left: sticky intro (eyebrow + title + sub), narrower
   - Right: timeline steps, wider — does the work of carrying content
   Collapses to a single column below 900px. */
.fw-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
}
.fw-head { position: sticky; top: 92px; }
.fw-head .shead-sub { max-width: 100%; margin-top: 1rem; }
.fw-timeline { position: relative; }
@media (max-width: 900px) {
  .fw-grid { grid-template-columns: 1fr; gap: 2rem; }
  .fw-head { position: static; }
  .fw-head .shead-sub { max-width: 580px; }
}
.fw-rail {
  position: absolute;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--line-strong);
}
.fw-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1.5rem;
  padding-bottom: 2rem;
  align-items: start;
  position: relative;
}
.fw-step:last-child { padding-bottom: 0; }
.fw-dot {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  position: relative;
  z-index: 1;
}
.fw-step.outcome .fw-dot {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-tint);
}
.fw-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.7rem 1.6rem;
  transition: border-color .2s;
}
.fw-step.outcome .fw-card {
  border-color: var(--accent);
  background: linear-gradient(180deg, #FFFFFF, var(--accent-soft) 250%);
  box-shadow: var(--shadow-2);
  padding: 2.2rem 2.2rem 2.3rem;
}
.fw-tag {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: .5rem;
}
.fw-step.outcome .fw-tag { color: var(--accent-deep); }
.fw-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: .45rem;
  text-wrap: balance;
}
.fw-step.outcome .fw-title { font-size: 30px; color: var(--ink); }
.fw-step.outcome .fw-title em { font-style: normal; color: var(--accent-deep); font-weight: 600; }
.fw-desc {
  font-size: 15px;
  color: var(--ink-2);
  margin-bottom: 1rem;
  line-height: 1.55;
}
.fw-points {
  display: flex; flex-direction: column; gap: .5rem;
  list-style: none;
}
.fw-points li {
  font-size: 15px;
  color: var(--ink-2);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}
.fw-points li::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-4);
  position: absolute; left: .35rem; top: .6rem;
}
.fw-step.outcome .fw-points li::before { background: var(--accent); }
.fw-outcome-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--accent-tint);
}
.fw-outcome-metric .num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -.035em;
  color: var(--accent-deep);
  line-height: 1;
}
.fw-outcome-metric .lbl {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: .45rem;
}
@media (max-width: 640px) {
  .fw-step.outcome .fw-card { padding: 1.5rem 1.4rem; }
  .fw-step.outcome .fw-title { font-size: 1.5rem; }
  .fw-outcome-metrics { grid-template-columns: 1fr; gap: .8rem; }
}

/* ════════ PARTNERSHIP (deep forest green — same family as brand) ════════ */
.partner {
  background:
    radial-gradient(ellipse 70% 55% at 90% 0%, rgba(22,184,122,.18), transparent 60%),
    radial-gradient(ellipse 65% 45% at 8% 100%, rgba(132,204,22,.08), transparent 60%),
    linear-gradient(180deg, var(--forest-3) 0%, var(--forest) 55%, var(--forest-2) 100%);
  color: #fff;
  padding: 4rem 0 4.5rem;
  position: relative;
  overflow: hidden;
}
.partner::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.4), transparent 75%);
  pointer-events: none;
}
.partner > .wrap { position: relative; z-index: 1; }
.partner .shead-title { color: #fff; }
.partner .shead-title em { color: #6BE8AA; }
.partner .shead-eyebrow { color: rgba(107,232,170,.85); }
.partner .shead-sub { color: rgba(255,255,255,.72); }

.partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) { .partner-grid { grid-template-columns: 1fr; } }

.partner-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 2rem;
  box-shadow: var(--shadow-2);
}
.partner-card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: .4rem;
  letter-spacing: -.015em;
}
.partner-card p.lead {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.req { color: #C2453E; }
.fld { display: flex; flex-direction: column; gap: .4rem; }
.fld label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  display: flex; justify-content: space-between;
}
.fld input, .fld select, .fld textarea {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
  padding: .7rem .9rem;
  outline: 0;
  font-size: 15px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  font-family: var(--sans);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-4); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.fld select option { background: #fff; color: var(--ink); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 540px) { .row2 { grid-template-columns: 1fr; } }
.coop-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.coop-opt {
  font-size: 14px;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: all .15s;
  background: var(--bg);
  font-weight: 450;
}
.coop-opt input { accent-color: var(--brand); width: 13px; height: 13px; margin: 0; }
.coop-opt:hover { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.coop-opt:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.partner-fields { display: flex; flex-direction: column; gap: 1.1rem; }
.partner-submit {
  margin-top: 1.5rem;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: .9rem 1.3rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--shadow-cta);
}
.partner-submit:hover { background: var(--brand-deep); box-shadow: 0 1px 2px rgba(14,140,92,.28), 0 14px 28px rgba(22,184,122,.32); transform: translateY(-1px); }
.partner-submit:active { transform: translateY(0); }
.partner-privacy {
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
  margin-top: .85rem;
  line-height: 1.5;
}

.partner-out {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
  padding: 2rem;
  display: flex; flex-direction: column;
  min-height: 100%;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.partner-out h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  margin-bottom: 1.3rem;
  letter-spacing: -.015em;
}
.routes { display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.route {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 1.05rem 1.2rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.route:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(232,216,168,.3);
}
.route-l { display: flex; align-items: center; gap: .9rem; }
.route-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(107,232,170,.16);
  color: #6BE8AA;
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.route.green .route-mark { background: rgba(107,232,170,.22); color: #8FF0B9; }
.route.blue .route-mark  { background: rgba(132,204,22,.18);  color: #C2E66A; }
.route.violet .route-mark{ background: rgba(173,232,209,.18); color: #B8EBD2; }
.route-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.route-sub {
  font-size: 14px;
  color: rgba(255,255,255,.62);
  margin-top: .2rem;
  line-height: 1.4;
}
.route-r { text-align: right; }
.route-r .num {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  color: #6BE8AA;
  line-height: 1;
  letter-spacing: -.02em;
}
.route.green .route-r .num { color: #8FF0B9; }
.route.blue .route-r .num  { color: #C2E66A; }
.route.violet .route-r .num{ color: #B8EBD2; }
.route-r .lbl {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,.5);
  margin-top: .3rem;
}
.routes-footer {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}

/* ════════ FOOTER (multi-column) ════════ */
footer.bottom {
  background: var(--forest-2);
  padding: 3rem 0 1.75rem;
  border-top: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.65);
}
footer.bottom .footer-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 3rem;
}
@media (max-width: 900px) {
  footer.bottom .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.footer-brand-col .brand { margin-bottom: 1rem; }
.footer-brand-col .brand-mark {
  background: linear-gradient(135deg, #1FD18A 0%, var(--brand) 100%);
}
.footer-brand-col .brand-name { color: #fff; }
.footer-tagline {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.55;
  max-width: 280px;
  margin-bottom: 1.25rem;
}
.footer-social { display: flex; gap: .55rem; }
.fsoc {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: grid; place-items: center;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.fsoc:hover { background: rgba(22,184,122,.18); color: #6BE8AA; border-color: rgba(22,184,122,.35); }

.footer-col h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  margin-bottom: .9rem;
  letter-spacing: 0;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer-col a {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .15s;
  display: inline-block;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  max-width: var(--maxw);
  margin: 3rem auto 0;
  padding: 1.4rem 2rem 0;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-bottom p {
  font-size: 14px;
  color: rgba(255,255,255,.42);
  line-height: 1.55;
  max-width: 720px;
}
.footer-bottom-meta {
  font-size: 14px;
  color: rgba(255,255,255,.42);
  display: flex; gap: 1.5rem;
}
.footer-bottom-meta a { color: inherit; text-decoration: none; }
.footer-bottom-meta a:hover { color: rgba(255,255,255,.7); }

/* ════════ HERO BG MEDIA OPTIONS ════════
 * Three modes via [data-hero-bg]:
 *   gradient (default) → original cream/emerald wash
 *   image             → user-dropped image fills the hero
 *   video             → user-supplied video URL plays muted/looped
 * Both image and video modes share the same dark treatment + white text. */
.hero-bg-slot,
.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
}
.hero-bg-video { object-fit: cover; }
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,15,26,.22) 0%, rgba(7,15,26,.04) 35%, rgba(7,15,26,.42) 100%),
    linear-gradient(90deg, rgba(7,15,26,.46) 0%, rgba(7,15,26,0) 55%);
}
/* Overlay strength variants — controlled by [data-hero-overlay] on body.
   "default" is the rule above; others override it. */
[data-hero-overlay="soft"] .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(7,15,26,.10) 0%, rgba(7,15,26,0) 40%, rgba(7,15,26,.24) 100%),
    linear-gradient(90deg, rgba(7,15,26,.42) 0%, rgba(7,15,26,0) 56%);
}
[data-hero-overlay="strong"] .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(7,15,26,.45) 0%, rgba(7,15,26,.20) 30%, rgba(7,15,26,.65) 100%),
    linear-gradient(90deg, rgba(7,15,26,.68) 0%, rgba(7,15,26,0) 50%);
}
[data-hero-overlay="none"] .hero-bg-overlay { display: none !important; }

/* Without overlay, white text needs its own subtle shadow to stay readable */
[data-hero-overlay="none"][data-hero-bg="image"] .hero-h1,
[data-hero-overlay="none"][data-hero-bg="video"] .hero-h1,
[data-hero-overlay="none"][data-hero-bg="image"] .hero-sub,
[data-hero-overlay="none"][data-hero-bg="video"] .hero-sub {
  text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
/* Shared dark-hero treatment for image + video modes */
[data-hero-bg="image"] .hero,
[data-hero-bg="video"] .hero { background: #0A1320; }
[data-hero-bg="image"] .hero::before,
[data-hero-bg="image"] .hero::after,
[data-hero-bg="video"] .hero::before,
[data-hero-bg="video"] .hero::after { opacity: .15; }
[data-hero-bg="image"] .hero-bg-overlay,
[data-hero-bg="video"] .hero-bg-overlay { display: block; }
[data-hero-bg="image"] .hero-bg-slot { display: block; }
[data-hero-bg="video"] .hero-bg-video { display: block; }
[data-hero-bg="image"] .hero-h1,
[data-hero-bg="video"] .hero-h1,
[data-hero-bg="image"] .hero-sub,
[data-hero-bg="video"] .hero-sub { color: #fff; }
[data-hero-bg="image"] .hero-h1 em,
[data-hero-bg="video"] .hero-h1 em {
  background: linear-gradient(135deg, #6BE8AA 0%, #1FD18A 60%, #16B87A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-hero-bg="image"] .hero-sub,
[data-hero-bg="video"] .hero-sub { color: rgba(255,255,255,.85); }
[data-hero-bg="image"] .hero-meta,
[data-hero-bg="video"] .hero-meta {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.25);
  color: #fff;
  backdrop-filter: blur(10px);
}

/* ──── Dark-text variant for image/video mode ────
 * For light photos, flip everything back to the original dark-text design
 * and use a soft cream/white wash overlay instead of the dark one. */
[data-hero-text="dark"][data-hero-bg="image"] .hero-h1,
[data-hero-text="dark"][data-hero-bg="video"] .hero-h1,
[data-hero-text="dark"][data-hero-bg="image"] .hero-sub,
[data-hero-text="dark"][data-hero-bg="video"] .hero-sub {
  color: var(--ink);
  text-shadow: none;
}
[data-hero-text="dark"][data-hero-bg="image"] .hero-sub,
[data-hero-text="dark"][data-hero-bg="video"] .hero-sub { color: var(--ink-2); }
[data-hero-text="dark"][data-hero-bg="image"] .hero-h1 em,
[data-hero-text="dark"][data-hero-bg="video"] .hero-h1 em {
  background: linear-gradient(135deg, #16B87A 0%, #0E8C5C 60%, #0A6D47 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-hero-text="dark"][data-hero-bg="image"] .hero-meta,
[data-hero-text="dark"][data-hero-bg="video"] .hero-meta {
  background: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.7);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
/* Cream wash overlays — readable on busy/dark photos with dark text */
[data-hero-text="dark"][data-hero-bg="image"] .hero-bg-overlay,
[data-hero-text="dark"][data-hero-bg="video"] .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(246,247,241,.45) 0%, rgba(246,247,241,.15) 35%, rgba(246,247,241,.55) 100%),
    linear-gradient(90deg, rgba(246,247,241,.55) 0%, rgba(246,247,241,0) 60%);
}
[data-hero-text="dark"][data-hero-overlay="soft"][data-hero-bg="image"] .hero-bg-overlay,
[data-hero-text="dark"][data-hero-overlay="soft"][data-hero-bg="video"] .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(246,247,241,.20) 0%, rgba(246,247,241,0) 40%, rgba(246,247,241,.30) 100%),
    linear-gradient(90deg, rgba(246,247,241,.25) 0%, rgba(246,247,241,0) 60%);
}
[data-hero-text="dark"][data-hero-overlay="strong"][data-hero-bg="image"] .hero-bg-overlay,
[data-hero-text="dark"][data-hero-overlay="strong"][data-hero-bg="video"] .hero-bg-overlay {
  background:
    linear-gradient(180deg, rgba(246,247,241,.70) 0%, rgba(246,247,241,.35) 30%, rgba(246,247,241,.80) 100%),
    linear-gradient(90deg, rgba(246,247,241,.75) 0%, rgba(246,247,241,0) 55%);
}
/* No text-shadow in dark mode even with no overlay */
[data-hero-text="dark"][data-hero-overlay="none"][data-hero-bg="image"] .hero-h1,
[data-hero-text="dark"][data-hero-overlay="none"][data-hero-bg="video"] .hero-h1,
[data-hero-text="dark"][data-hero-overlay="none"][data-hero-bg="image"] .hero-sub,
[data-hero-text="dark"][data-hero-overlay="none"][data-hero-bg="video"] .hero-sub {
  text-shadow: 0 1px 2px rgba(255,255,255,.7);
}

/* ════════ TWEAKS PANEL ════════ */
.tweaks-panel {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(15,30,55,.18);
  z-index: 999;
  font-size: 13px;
  display: none;
  overflow: hidden;
}
.tweaks-panel.open { display: block; }
.tweaks-head {
  padding: 1rem 1.15rem;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: var(--bg-tint);
}
.tweaks-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.01em;
}
.tweaks-close {
  background: transparent; border: 0; cursor: pointer;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  color: var(--ink-3);
  border-radius: 6px;
}
.tweaks-close:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.tweaks-body { padding: 1rem 1.15rem 1.15rem; max-height: 70vh; overflow-y: auto; }
.tweak {
  margin-bottom: 1.15rem;
}
.tweak:last-child { margin-bottom: 0; }
.tweak-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin-bottom: .55rem;
  display: block;
}
.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--bg-tint);
  padding: 3px;
  border-radius: 10px;
}
.seg button {
  background: transparent;
  border: 0;
  padding: .55rem .35rem;
  font-size: 14px;
  font-weight: 450;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: var(--sans);
}
.seg button.on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  font-weight: 500;
}
.swatches { display: flex; gap: .5rem; }
.sw {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  background: var(--c, #ccc);
  position: relative;
}
.sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c, #ccc); transform: scale(1.04); }

.tw-toggle-btn {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--ink);
  color: #fff;
  border: 0;
  padding: .75rem 1.2rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15,30,55,.18);
  z-index: 998;
  display: none;
  align-items: center; gap: .45rem;
}
.tw-toggle-btn.show { display: inline-flex; }

/* ════════ AI PROPOSAL MODAL ════════ */
.aip-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,24,18,.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 1.25rem 5vh;
  overflow-y: auto;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.aip-scrim.show { opacity: 1; pointer-events: auto; }
.aip-modal {
  background: var(--bg);
  border-radius: var(--r-lg);
  width: 100%; max-width: 720px;
  box-shadow: 0 24px 70px rgba(8,24,18,.45), 0 2px 8px rgba(8,24,18,.2);
  overflow: hidden;
  transform: translateY(18px) scale(.985);
  transition: transform .32s cubic-bezier(.22,1,.36,1);
  position: relative;
}
.aip-scrim.show .aip-modal { transform: translateY(0) scale(1); }

/* header — deep forest band */
.aip-head {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-2) 100%);
  color: #fff;
  padding: 1.5rem 1.7rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.aip-head::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 90% 0%, rgba(0,0,0,.7), transparent 70%);
  pointer-events: none;
}
.aip-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.aip-eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: #6BE8AA;
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .55rem;
}
.aip-eyebrow .aip-spark {
  width: 16px; height: 16px; flex: none;
}
.aip-title {
  font-family: var(--display); font-weight: 600;
  font-size: 22px; letter-spacing: -.02em; line-height: 1.15;
  color: #fff;
}
.aip-sub {
  font-size: 13.5px; color: rgba(255,255,255,.66);
  line-height: 1.5; margin-top: .5rem; max-width: 46ch;
  position: relative; z-index: 1;
}
.aip-close {
  flex: none;
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s, transform .1s;
  font-size: 18px; line-height: 1;
}
.aip-close:hover { background: rgba(255,255,255,.2); }
.aip-close:active { transform: scale(.92); }

/* progress dots */
.aip-steps { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; position: relative; z-index: 1; }
.aip-stepdot { display: flex; align-items: center; gap: .5rem; font-size: 11.5px; color: rgba(255,255,255,.45); font-weight: 500; }
.aip-stepdot .dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.25); transition: all .25s; }
.aip-stepdot.active .dot { background: #6BE8AA; box-shadow: 0 0 0 4px rgba(107,232,170,.18); }
.aip-stepdot.active { color: #fff; }
.aip-stepdot.done .dot { background: var(--brand); }
.aip-steps .aip-stepline { flex: 1; height: 1px; background: rgba(255,255,255,.14); }

/* body */
.aip-body { padding: 1.5rem 1.7rem 1.7rem; }
.aip-panel { display: none; }
.aip-panel.active { display: block; animation: aipFade .35s ease both; }
@keyframes aipFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* question groups */
.aip-q { margin-bottom: 1.35rem; }
.aip-q-label {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--ink); display: flex; align-items: baseline; gap: .5rem;
  margin-bottom: .6rem;
}
.aip-q-num {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--brand-deep); background: var(--brand-soft);
  border-radius: 999px; padding: .12rem .5rem; flex: none;
}
.aip-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.aip-opt {
  font-size: 13.5px; font-weight: 450;
  padding: .55rem .9rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: #fff; color: var(--ink-2);
  cursor: pointer; user-select: none;
  transition: all .14s; display: inline-flex; align-items: center; gap: .4rem;
}
.aip-opt:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); }
.aip-opt.sel {
  border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep);
  font-weight: 500;
}
.aip-opt.sel::before { content: "✓"; font-size: 11px; font-weight: 700; }

.aip-actions { display: flex; align-items: center; gap: .75rem; margin-top: 1.6rem; }
.aip-btn {
  background: var(--brand); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  padding: .85rem 1.4rem; border: 0; border-radius: 999px;
  cursor: pointer; flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  box-shadow: var(--shadow-cta);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.aip-btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
.aip-btn:active { transform: translateY(0); }
.aip-btn.ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-2); box-shadow: none; flex: none;
  padding: .85rem 1.2rem;
}
.aip-btn.ghost:hover { background: #fff; border-color: var(--line-strong); color: var(--ink); }

/* loading */
.aip-loading { text-align: center; padding: 1.5rem 1rem 1rem; }
.aip-orbit {
  width: 64px; height: 64px; margin: 0 auto 1.4rem;
  border-radius: 999px; position: relative;
  background: radial-gradient(circle, var(--brand-tint), transparent 72%);
}
.aip-orbit::before, .aip-orbit::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  border: 2px solid transparent; border-top-color: var(--brand);
  animation: aipSpin 1s linear infinite;
}
.aip-orbit::after { inset: 9px; border-top-color: var(--brand-deep); animation-duration: 1.5s; animation-direction: reverse; }
@keyframes aipSpin { to { transform: rotate(360deg); } }
.aip-loading-title { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: .35rem; }
.aip-loading-sub { font-size: 13.5px; color: var(--ink-3); margin-bottom: 1.3rem; }
.aip-progress-list { max-width: 360px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: .55rem; }
.aip-progress-item {
  display: flex; align-items: center; gap: .65rem;
  font-size: 13.5px; color: var(--ink-4);
  opacity: .45; transition: opacity .3s, color .3s;
}
.aip-progress-item.on { opacity: 1; color: var(--ink-2); }
.aip-progress-item .pi-check {
  width: 18px; height: 18px; flex: none; border-radius: 999px;
  border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: 10px; color: #fff; transition: all .3s;
}
.aip-progress-item.on .pi-check { background: var(--brand); border-color: var(--brand); }

/* results */
.aip-result-banner {
  display: flex; align-items: center; gap: .85rem;
  background: var(--brand-tint); border: 1px solid var(--brand-soft);
  border-radius: var(--r); padding: .85rem 1rem; margin-bottom: 1.3rem;
}
.aip-result-banner .rb-icon {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 18px;
}
.aip-result-banner .rb-title { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink); }
.aip-result-banner .rb-sub { font-size: 12.5px; color: var(--ink-3); margin-top: .1rem; }

.aip-sec { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: .7rem; overflow: hidden; }
.aip-sec-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
}
.aip-sec-ico {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  background: var(--brand-soft); color: var(--brand-deep);
  display: grid; place-items: center; font-size: 15px;
}
.aip-sec-title { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--ink); flex: 1; letter-spacing: -.01em; }
.aip-sec-tag { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .1em; }
.aip-sec-body { padding: 0 1rem 1rem 3.4rem; }
.aip-match {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem 0; border-top: 1px solid var(--line);
}
.aip-match:first-child { border-top: 0; }
.aip-match .m-rank {
  font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--brand-deep);
  flex: none; margin-top: .1rem;
}
.aip-match .m-name { font-size: 13.5px; font-weight: 550; color: var(--ink); }
.aip-match .m-meta { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; margin-top: .1rem; }
.aip-match .m-score {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: var(--brand-deep); background: var(--brand-soft);
  border-radius: 999px; padding: .15rem .55rem; white-space: nowrap;
}
.aip-evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 540px) { .aip-evidence-grid { grid-template-columns: repeat(2, 1fr); } }
.aip-ev { background: var(--bg-tint); border-radius: 10px; padding: .7rem .75rem; }
.aip-ev .ev-num { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -.02em; }
.aip-ev .ev-num span { color: var(--brand); font-size: .65em; }
.aip-ev .ev-lbl { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; margin-top: .15rem; }
.aip-body-text { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.aip-body-text strong { color: var(--ink); font-weight: 600; }
.aip-steplist { display: flex; flex-direction: column; gap: .6rem; counter-reset: aipstep; }
.aip-steplist li { display: flex; gap: .65rem; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; list-style: none; }
.aip-steplist li::before {
  counter-increment: aipstep; content: counter(aipstep);
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 600;
  display: grid; place-items: center; margin-top: .05rem;
}
.aip-steplist li strong { color: var(--ink); font-weight: 600; }
.aip-foot {
  display: flex; align-items: center; gap: .75rem; margin-top: 1.3rem;
  flex-wrap: wrap;
}
.aip-foot .aip-foot-note { font-size: 12px; color: var(--ink-3); flex: 1; min-width: 180px; line-height: 1.45; }

@media (max-width: 540px) {
  .aip-body { padding: 1.25rem 1.15rem 1.4rem; }
  .aip-head { padding: 1.25rem 1.2rem 1.2rem; }
  .aip-sec-body { padding-left: 1rem; }
  .aip-actions { flex-direction: column-reverse; }
  .aip-btn, .aip-btn.ghost { width: 100%; }
}

/* ════════ TOAST ════════ */
.toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: #fff;
  padding: .85rem 1.4rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 450;
  box-shadow: 0 8px 24px rgba(15,30,55,.25);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 1000;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════ RESPONSIVE — consolidated ════════ */

/* Tablet / small laptop — nav can't fit links+sub+2 buttons below this */
@media (max-width: 1024px) {
  .nav-inner { gap: 1rem; }
  .nav-links { display: none; }
  .brand-logo { height: 32px; width: 152px; }
}

/* Mid mobile / large phone (~≤700px) */
@media (max-width: 700px) {
  .shead { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .shead-r { padding-bottom: 0; }
  .shead-title { font-size: clamp(1.65rem, 6vw, 2.1rem); }
  /* Solo variant on mobile: keep eyebrow + link inline, drop the rule */
  .shead.shead--solo { flex-direction: row; align-items: center; gap: 1rem; }
  .shead.shead--solo .shead-l { flex: 1; }
  .shead.shead--solo .shead-l::after { display: none; }

  /* HERO */
  .hero { padding: 2rem 0 0; min-height: auto; }
  .hero-inner { padding-bottom: 1.25rem; }
  .hero-copy { padding: .5rem 0 1.25rem; }
  .hero-meta { font-size: 13px; padding: .35rem .75rem .35rem .55rem; }
  .hero-h1 { font-size: clamp(1.85rem, 7.5vw, 2.4rem); letter-spacing: -.028em; }
  .hero-h1 br { display: none; }
  .hero-sub { font-size: 15px; margin-top: .75rem; }
  .hero-cta-row { margin-top: 1.1rem; }

  /* Hero search → stack on mobile: icon+input row / tabs row / button row.
     Uniform .75rem padding all four sides; nothing adds extra L/R offsets
     so the visual inset is symmetric. */
  .hero-search-card {
    padding: .75rem;
    gap: 0;
    flex-wrap: wrap;
    align-items: flex-start;
    border-radius: 14px;
  }
  /* Row 1 — icon (top-aligned with first line of textarea) + multi-line textarea */
  .hero-search-card .search-icon {
    order: 0;
    margin: .25rem .55rem 0 0;
    flex: 0 0 auto;
    align-self: flex-start;
  }
  .hero-search-card .search-input {
    order: 0;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 2.9em;          /* ~2 lines */
    padding: 0;
    font-size: 15px;
    line-height: 1.45;
    overflow: hidden;
    box-sizing: content-box;    /* let min-height work naturally; padding is 0 anyway */
  }
  /* Row 2 — tabs as 4 equal-width buttons spanning the full row.
     No negative margins; the row's L/R inset is just the card padding. */
  .hero-search-card .inline-tabs {
    order: 1;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .35rem;
    padding: .55rem 0 0;
    margin: .65rem 0 0;
    border-top: 1px solid var(--line);
    border-right: 0;
    overflow: visible;
  }
  .hero-search-card .inline-tabs .tab {
    padding: .55rem .35rem;
    text-align: center;
    border-radius: 8px;
    margin-left: 0;
    font-size: 13.5px;
  }
  /* Kill browser default focus ring on tabs; keep keyboard a11y */
  .hero-search-card .inline-tabs .tab:focus { outline: 0; }
  .hero-search-card .inline-tabs .tab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  /* Row 3 — full-width Search button */
  .hero-search-card .search-go {
    order: 2;
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
    margin-top: .65rem;
    padding: .9rem 1rem;
    font-size: 15px;
    border-radius: 12px;
  }
  .hero-search-suggest { font-size: 12px; row-gap: .35rem; }
  .hero-search-suggest a { font-size: 12px; padding: .2rem .55rem; white-space: nowrap; }

  /* NAV — keep only primary CTA visible to save space */
  .nav-inner { height: 60px; gap: .5rem; }
  .nav-actions .btn-ghost { display: none; }
  .nav-actions .btn-primary {
    padding: .55rem .85rem;
    font-size: 14px;
  }
  .nav-actions .btn-primary span { display: none; } /* hide arrow on tiny screens */
  .brand-logo { height: 28px; width: 132px; }

  /* SECTION rhythm */
  section.block { padding: 2.25rem 0; }
  section.block + section.block { padding-top: 0; }

  /* KPI strip → 2 col, fifth full-width */
  .kpi-strip-card { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 1.1rem 1rem; }
  .kpi-num { font-size: 1.7rem; }
  .kpi:nth-child(5) { grid-column: 1 / -1; border-top: 1px solid var(--line); }

  /* SPECIALTY table — slim layout */
  .spec-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) 24px;
    gap: .75rem;
    padding: .95rem 1rem;
  }
  .spec-name { font-size: 15px; }
  .spec-sub { font-size: 12px; }
  .rank { font-size: 1.1rem; }
  .rank-meta { font-size: 12px; }

  /* Spec drawer — single rich row per program */
  .spec-drawer-head { display: none; }
  .spec-drawer-row {
    grid-template-columns: 1fr;
    gap: .5rem;
    padding: .85rem 1rem;
  }
  .spec-prog { font-size: 14px; }
  .spec-drawer-row > * + * {
    padding-top: .55rem;
    border-top: 1px dashed var(--line);
  }
  .mtw { font-size: 18px; display: inline-block; margin-right: .5rem; }
  .mlbl { display: inline; font-size: 13px; }
  .mvs { display: inline-block; margin-left: .35rem; font-size: 13px; }

  /* HOSPITAL cards */
  .hosp { padding: 1.35rem 1.25rem 1.2rem; }
  .hosp-name { font-size: 19px; }
  .hosp-list-item { grid-template-columns: 56px 1fr; gap: .6rem; padding: .8rem 0; }
  .hosp-list-num { font-size: 1.4rem; }

  /* DISEASE cards */
  .disease__body { padding: 16px 18px 18px; }
  .disease__name { font-size: 18px; }
  .disease__micro { gap: 1rem; }

  /* FRAMEWORK */
  .fw-section { padding: 2.75rem 0; }
  .fw-step { grid-template-columns: 32px 1fr; gap: 1rem; padding-bottom: 1.5rem; }
  .fw-rail { left: 16px; }
  .fw-dot { width: 34px; height: 34px; font-size: 12px; }
  .fw-card { padding: 1.2rem 1.25rem; }
  .fw-title { font-size: 20px; }
  .fw-step.outcome .fw-card { padding: 1.5rem 1.35rem 1.6rem; }
  .fw-step.outcome .fw-title { font-size: 1.5rem; }
  .fw-outcome-metrics { grid-template-columns: 1fr; gap: .85rem; padding-top: 1.1rem; margin-top: 1.1rem; }
  .fw-outcome-metric .num { font-size: 1.7rem; }

  /* PARTNERSHIP */
  .partner { padding: 2.75rem 0 3rem; }
  .partner-card, .partner-out { padding: 1.5rem 1.35rem; }
  .partner-out h3, .partner-card h3 { font-size: 18px; }
  .route { padding: .9rem 1rem; gap: .75rem; }
  .route-mark { width: 34px; height: 34px; font-size: 14px; }
  .route-name { font-size: 14px; }
  .route-r .num { font-size: 18px; }

  /* FOOTER — 2 col, brand col spans both */
  footer.bottom { padding: 2.25rem 0 1.25rem; }
  footer.bottom .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; padding: 1.4rem 1.25rem 0; }

  /* TWEAKS panel — full-width sheet on phone */
  .tweaks-panel {
    width: auto;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: 380px;
    margin: 0 auto;
  }
  .tw-toggle-btn { bottom: 16px; right: 16px; padding: .65rem 1rem; font-size: 13px; }

  /* ═══════════════════════════════════════════════════════════
     UNIFIED MOBILE TYPE SCALE  (by information role)
     One rhythm for the whole page so hierarchy stays clear and
     information reads compact on small screens.
       Hero H1 ......... 28px   page focal point
       Section title ... 23px
       Card title ...... 18px   disease / hospital / framework / partner
       Big metric ...... 22px   the numbers that carry the evidence
       Body / lead ..... 15px   paragraphs people actually read
       Label ........... 13px   descriptors beside numbers & names
       Kicker/eyebrow .. 12px   uppercase section kickers
       Caption ......... 12px   the finest supporting notes
     ═══════════════════════════════════════════════════════════ */

  /* Display + section headings */
  .hero-h1 { font-size: 28px; }
  .shead-title { font-size: 23px; line-height: 1.15; }
  .shead-eyebrow { font-size: 12px !important; letter-spacing: .04em; margin-bottom: .55rem; }
  .shead-eyebrow::before { width: 16px; }

  /* Card / panel titles — unify to 18px */
  .disease__name,
  .va-name,
  .hosp-name,
  .fw-title,
  .partner-card h3,
  .partner-out h3 { font-size: 18px; }

  /* Body / lead text — 15px */
  .hero-sub,
  .shead-sub,
  .fw-desc,
  .fw-points li,
  .partner-card p.lead { font-size: 15px; line-height: 1.5; }
  .shead-sub { margin-top: .55rem; }

  /* Kickers / eyebrows — 12px uppercase */
  .disease__eyebrow,
  .va-eyebrow,
  .hosp-eyebrow,
  .disease__crown { font-size: 12px; }

  /* Labels — 13px descriptors */
  .hero-stat-lbl,
  .disease__hero-lbl,
  .disease__micro li,
  .kpi-label,
  .va-stat-text strong,
  .fw-tag,
  .route-name,
  .hosp-second-lbl,
  .fld label { font-size: 13px; }

  /* Captions — 12px finest notes */
  .hero-stat-cap,
  .spec-sub,
  .rank-meta,
  .kpi-context,
  .va-stat-text small,
  .va-tag,
  .route-sub,
  .fw-outcome-metric .lbl,
  .partner-privacy,
  .hero-search-suggest,
  .hero-search-suggest a { font-size: 12px; }

  /* Big metric numbers — one compact 22px tier */
  .hero-stat-num,
  .kpi-num,
  .va-num,
  .disease__hero-num,
  .hosp-list-num,
  .fw-outcome-metric .num { font-size: 22px; }
  .disease__hero-num span,
  .va-num span,
  .hero-stat-num .plus { font-size: 14px; }
  .route-r .num { font-size: 17px; }

  /* ── Compact density: less air, same structure ── */
  section.block { padding: 1.6rem 0; }
  .shead { margin-bottom: .85rem; }
  .shead.shead--solo { margin-bottom: .85rem; }
  .disease__body { padding: 14px 15px 15px; }
  .disease__micro { gap: 1rem; }
  .hosp { padding: 1.1rem 1.05rem 1rem; }
  .fw-step { padding-bottom: 1.05rem; }
  .fw-card { padding: 1.05rem 1.1rem; }
  .partner-card, .partner-out { padding: 1.25rem 1.15rem; }
  .kpi { padding: .95rem .9rem; }
  .hero-stats { margin: 18px 0 16px !important; }
}

/* Small phone (≤480px) */
@media (max-width: 480px) {
  .hero-h1 { font-size: 25px; line-height: 1.12; }
  .hero-sub { font-size: 14px; }

  /* Search: tighter padding on smallest phones (700px breakpoint already stacks it) */
  .hero-search-card { padding: .45rem .45rem .55rem; }
  .hero-search-card .search-go { padding: .75rem; font-size: 14px; }

  /* KPI: 1 col stack */
  .kpi-strip-card { grid-template-columns: 1fr; }
  .kpi { border-top: 1px solid var(--line); border-right: 0 !important; }
  .kpi:first-child { border-top: 0; }
  .kpi + .kpi::before { display: none; }
  .kpi:nth-child(5) { grid-column: auto; }

  /* Footer single col */
  footer.bottom .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-brand-col { grid-column: auto; }
}

/* language toggle — icon placeholder for future i18n */
.lang-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-3);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink-3);background:rgba(0,0,0,.03)}
.lang-toggle svg{display:block}

/* ════════════════════════════════════════════════════════════
   DESIGN DIRECTION OVERRIDES  (Tweaks → "Style")
   Each one is layered on top of the refined emerald base so the
   information architecture stays identical — only the visual
   character changes.
   ════════════════════════════════════════════════════════════ */

/* ════ CLINICAL — data-first / terminal-like ════ */
[data-style="clinical"] {
  --bg:        #F3F4ED;
  --bg-card:   #FCFCF8;
  --bg-tint:   #E9EDDF;
  --bg-sand:   #DEE3D2;
  --line:      #D2DAC2;
  --line-2:    #C4CDB0;
  --line-strong: #AAB793;
  --r-sm: 2px;
  --r:    4px;
  --r-lg: 8px;
  --shadow-1: none;
  --shadow-2: none;
  --shadow-cta: 0 1px 0 var(--brand-deep);
}
[data-style="clinical"] body,
[data-style="clinical"] {
  background-image:
    linear-gradient(rgba(12,31,23,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,31,23,.025) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
[data-style="clinical"] * {
  font-variant-numeric: tabular-nums;
}

/* Eyebrows → mono kicker with code-like prefix */
[data-style="clinical"] .shead-eyebrow,
[data-style="clinical"] .va-eyebrow,
[data-style="clinical"] .partner-eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
[data-style="clinical"] .shead-eyebrow::before {
  content: ""; width: 12px; height: 1px; background: currentColor; border-radius: 0;
}
[data-style="clinical"] .shead-eyebrow::after {
  content: "// ";
  font-family: var(--mono);
  margin-left: .35rem;
  color: var(--ink-3);
  font-weight: 400;
}
[data-style="clinical"] .shead-title em { font-style: normal; }
[data-style="clinical"] .shead-title { letter-spacing: -.02em; }

/* Hero — tighter, with mono kicker + numbers */
[data-style="clinical"] .hero-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
[data-style="clinical"] .hero-h1 em { font-style: normal; }
[data-style="clinical"] .hero-stat {
  border-radius: 2px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  position: relative;
}
[data-style="clinical"] .hero-stat::before {
  content: attr(data-code);
  position: absolute;
  top: 8px; right: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-4);
  letter-spacing: .08em;
}
[data-style="clinical"] .hero-stat-num {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.02em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
[data-style="clinical"] .hero-stat-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Cards: crisper, no shadow, gridded borders */
[data-style="clinical"] .va-card,
[data-style="clinical"] .disease,
[data-style="clinical"] .hosp-card,
[data-style="clinical"] .hosp-row {
  border-radius: 4px;
  border-color: var(--line-2);
  box-shadow: none;
}
[data-style="clinical"] .va-card:hover,
[data-style="clinical"] .disease:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--brand-deep);
}
[data-style="clinical"] .va-photo,
[data-style="clinical"] .disease__media {
  border-bottom: 1px solid var(--line-2);
}
[data-style="clinical"] .va-photo-meta,
[data-style="clinical"] .disease__crown {
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-style="clinical"] .va-stat {
  border-color: var(--line-2);
}
[data-style="clinical"] .va-stat-num,
[data-style="clinical"] .stat-num,
[data-style="clinical"] .rank,
[data-style="clinical"] .mtw {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: -.01em;
}

/* Specialty table — fully gridded, mono prog metrics */
[data-style="clinical"] .spec-table {
  border-radius: 4px;
  border-color: var(--line-2);
}
[data-style="clinical"] .spec-row,
[data-style="clinical"] .spec-drawer {
  border-color: var(--line-2);
}
[data-style="clinical"] .spec-grid > * + *,
[data-style="clinical"] .spec-drawer-head > * + *,
[data-style="clinical"] .spec-drawer-row > * + * {
  border-left: 1px dashed var(--line-2);
  padding-left: 14px;
}
[data-style="clinical"] .mlbl,
[data-style="clinical"] .mvs,
[data-style="clinical"] .spec-sub,
[data-style="clinical"] .va-stat-lbl {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* Buttons / chips squared off */
[data-style="clinical"] .btn,
[data-style="clinical"] .chip,
[data-style="clinical"] .tab {
  border-radius: 2px;
}
[data-style="clinical"] .hero-search-card { border-radius: 4px; }
[data-style="clinical"] .hero-search-card input { border-radius: 2px; }

/* Section CTA — terminal-arrow */
[data-style="clinical"] .section-cta-bottom { border-radius: 2px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }

/* Framework: numbered list, mono numerals */
[data-style="clinical"] .fw-step-n { font-family: var(--mono); font-weight: 500; }

/* Partner CTA stays dark — just sharpen + mono kicker */
[data-style="clinical"] .partner { border-radius: 0; }
[data-style="clinical"] .partner-track { border-radius: 4px; }


/* ════ EDITORIAL — magazine / serif moments ════ */
[data-style="editorial"] {
  --bg:        #F7F4EC;          /* warmer cream */
  --bg-card:   #FDFBF4;
  --bg-tint:   #EFEADC;
  --bg-sand:   #E3DCC7;
  --line:      #E4DDC8;
  --line-2:    #D2C9AE;
  --line-strong: #B8AC8C;
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;
}
[data-style="editorial"] .shead-title,
[data-style="editorial"] .hero-h1,
[data-style="editorial"] .partner h2,
[data-style="editorial"] .fw-section h2,
[data-style="editorial"] .fw-step-h {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  letter-spacing: -.018em;
}
[data-style="editorial"] .hero-h1 { font-weight: 400; }
[data-style="editorial"] .hero-h1 em,
[data-style="editorial"] .shead-title em,
[data-style="editorial"] .partner h2 em,
[data-style="editorial"] .fw-section h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--brand-deep);
}

/* Eyebrows: airier letter-spacing */
[data-style="editorial"] .shead-eyebrow,
[data-style="editorial"] .va-eyebrow,
[data-style="editorial"] .partner-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
}
[data-style="editorial"] .shead-eyebrow::before {
  width: 28px;
  height: 1px;
  background: var(--ink-3);
}

/* Hero meta as a single airy line */
[data-style="editorial"] .hero-meta {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Hero stat numbers — display serif, very tall */
[data-style="editorial"] .hero-stat {
  background: transparent;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
  padding-top: 1.1rem;
}
[data-style="editorial"] .hero-stat-num {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-feature-settings: "lnum" 1;
  letter-spacing: -.04em;
}
[data-style="editorial"] .hero-stat-num .plus {
  font-style: italic;
  font-weight: 400;
}
[data-style="editorial"] .hero-stat-lbl { letter-spacing: .01em; }

/* Cards — softer, lift on hover */
[data-style="editorial"] .va-card,
[data-style="editorial"] .disease {
  background: var(--bg-card);
  border-radius: 4px;
  border-color: var(--line);
}
[data-style="editorial"] .va-name,
[data-style="editorial"] .disease__title {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -.012em;
}
[data-style="editorial"] .va-photo-meta,
[data-style="editorial"] .disease__crown {
  border-radius: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Specialty: serif specialty name, italic emphasis */
[data-style="editorial"] .spec-name {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -.012em;
}
[data-style="editorial"] .spec-table { border-radius: 4px; }
[data-style="editorial"] .rank {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
}
[data-style="editorial"] .mtw {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
}

/* Section dividers gain an ornamental rule */
[data-style="editorial"] .shead.shead--solo .shead-l::after {
  background: linear-gradient(to right,
    var(--line-2) 0, var(--line-2) calc(50% - 8px),
    transparent calc(50% - 8px), transparent calc(50% + 8px),
    var(--line-2) calc(50% + 8px), var(--line-2) 100%);
}
[data-style="editorial"] .shead.shead--solo .shead-l {
  position: relative;
}

/* Hero sub & section sub — slightly larger, more breathing */
[data-style="editorial"] .hero-sub,
[data-style="editorial"] .shead-sub,
[data-style="editorial"] .partner-sub {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Drop initial on first paragraph of each section sub — only the first letter */
[data-style="editorial"] .shead-sub::first-letter {
  font-family: "Newsreader", Georgia, serif;
  font-weight: 500;
  color: var(--ink);
}

/* Soft button styling — pill but with brand-tint outlines */
[data-style="editorial"] .btn-ghost { border-bottom: 1px solid var(--line-2); border-radius: 0; padding: .55rem .25rem; }

/* Section CTA gets a thin underline reveal feel */
[data-style="editorial"] .section-cta-bottom {
  border-radius: 0;
  border-bottom: 1px solid currentColor;
  padding-bottom: .65rem;
}

/* Partner CTA: keep dark, but headline in serif italic */
[data-style="editorial"] .partner h2 { font-style: normal; }
[data-style="editorial"] .partner h2 em { font-style: italic; }

/* ════════ HOMEPAGE HERO — dark forest + gold (white-platinum-green) ════════
   Scoped to [data-home-hero="forest"] so it only re-skins the homepage hero,
   matching the NTUH profile hero. Reversible: drop the body attribute. */
[data-home-hero="forest"] .hero {
  background:
    radial-gradient(ellipse 70% 85% at 88% -10%, rgba(194,161,78,.26) 0%, transparent 55%),
    radial-gradient(ellipse 85% 90% at -5% 112%, rgba(22,184,122,.20) 0%, transparent 55%),
    linear-gradient(150deg, #0E2A22 0%, #0B2318 55%, #091E16 100%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
}
[data-home-hero="forest"] .hero::before { display: none; }
[data-home-hero="forest"] .hero::after {
  background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%);
}
[data-home-hero="forest"] .hero-h1 { color: #fff; }
[data-home-hero="forest"] .hero-h1 em {
  background: linear-gradient(135deg, #F1DA9E 0%, #D8B65F 55%, #C2A14E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-home-hero="forest"] .hero-sub { color: rgba(255,255,255,.72); }
[data-home-hero="forest"] .hero-meta {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
[data-home-hero="forest"] .hero-meta .dot {
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(194,161,78,.22);
}
[data-home-hero="forest"] .hero-stat-num { color: #ECD594; }
[data-home-hero="forest"] .hero-stat-num .plus { color: var(--gold); }
[data-home-hero="forest"] .hero-stat-lbl { color: #fff !important; }
[data-home-hero="forest"] .hero-stat-cap { color: rgba(255,255,255,.6) !important; }
[data-home-hero="forest"] .hero-stat-bg {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16) !important;
}
[data-home-hero="forest"] .hero-stat:hover .hero-stat-bg {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28) !important;
}