/* ============================================================
   MELA HOMEPAGE — redesign 2026 (handoff port)
   Marketing system. Tokens from design-system.css.
   Stage 1: editorial skeleton (header, hero, trust, bands,
   teaser, signup, footer). Cross-section / phone / demo
   instrument are wired in later stages.
   ============================================================ */

/* ---------- layout primitives ---------- */
.h-container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.h-prose { max-width: 760px; }
.h-section { padding: 120px 0; }
.h-section--rai { background: var(--parchment-rai); }
.h-section--deep { background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-deep) 100%); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--quiet);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--sage);
  flex: none;
}
.eyebrow--bare::before { display: none; }

.h-head {
  font-family: var(--font-display);
  font-weight: 330;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.h-head em { font-style: italic; color: var(--gold); font-weight: 330; }

.h-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 40;
  font-weight: 360;
  font-size: clamp(1.0625rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  color: var(--body-soft);
  margin: 0;
  max-width: 52ch;
}
.h-body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--body);
  margin: 0;
  max-width: 56ch;
}

.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 26px;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-body); font-size: 15.5px; font-weight: 600; letter-spacing: 0;
  text-decoration: none;
  background: var(--ink); color: #FAF6EF;
  transition: background-color 200ms var(--ease-micro);
}
.btn-pill:hover { background: var(--body); }
.btn-pill .arr { font-weight: 500; }

.link-mono {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-ink); text-decoration: none;
  border-bottom: 1px solid var(--gold-glow); padding-bottom: 3px;
  transition: color 200ms var(--ease-micro), border-color 200ms var(--ease-micro);
}
.link-mono:hover { color: var(--gold); border-color: var(--gold); }

.link-text {
  color: var(--gold-ink); text-decoration: none;
  border-bottom: 1px solid var(--gold-glow);
  transition: color 200ms var(--ease-micro);
}
.link-text:hover { color: var(--gold); }

.card-shadow { box-shadow: 0 1px 2px rgba(33,21,15,0.05), 0 18px 48px -16px rgba(33,21,15,0.16); }

/* ---------- header (shared) ---------- */
.h-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: rgba(245, 239, 230, 0.72);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.h-header .brand img { height: 30px; display: block; }
.h-nav { display: flex; gap: 32px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }
.h-nav a { color: var(--quiet); text-decoration: none; transition: color 200ms var(--ease-micro); }
.h-nav a:hover { color: var(--gold-ink); }

/* ---------- hero ---------- */
.hero { padding: 152px 0 96px; }
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 64px; align-items: center;
}
.hero-eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 320;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(2.75rem, 5.4vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 28px;
}
.hero h1 em { font-style: italic; color: var(--gold); font-weight: 320; }
.hero .mela-word { display: inline-block; white-space: nowrap; }
.hero .mela-letter { display: inline-block; opacity: 0; animation: melaLetter 620ms var(--ease-carve) forwards; }
.hero-lede { margin-bottom: 36px; }
.hero-cta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

.hero-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden;
  background: var(--parchment-deep);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.02) saturate(0.92); display: block; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,239,230,0.06), rgba(74,53,38,0.14)); mix-blend-mode: multiply; }
.hero-photo .caption {
  position: absolute; left: 18px; bottom: 16px; z-index: 1;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(250,246,239,0.92);
}

/* ---------- trust strip ---------- */
.trust {
  background: var(--parchment-rai);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.trust-inner { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 22px 40px; flex-wrap: wrap; }
.trust-item { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--quiet); }
.trust-sep { width: 18px; height: 1px; background: var(--faint); }

/* ---------- generic two-column content section ---------- */
.split { display: grid; grid-template-columns: 1fr 0.82fr; gap: 72px; align-items: center; }
.split .h-head { margin-bottom: 24px; }
.split .h-body { margin-bottom: 28px; }
.split--read { grid-template-columns: 1.04fr 1fr; }

.numlist { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 18px; }
.numlist li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: baseline; }
.numlist .n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--gold-ink); }
.numlist .txt { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--body); }

/* ---------- phone placeholder (Stage 3) ---------- */
.placeholder-frame {
  border: 1px dashed var(--faint); border-radius: 20px;
  background: var(--parchment-rai);
  min-height: 360px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--quiet);
  padding: 24px;
}
.placeholder-phone { aspect-ratio: 326 / 680; max-width: 326px; margin: 0 auto; }

/* ---------- the phone (App system mockup — Instrument Serif inside) ---------- */
.phone-col { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.phone-frame { position: relative; width: 326px; max-width: 100%; background: #100B07; border-radius: 52px; padding: 11px; box-shadow: 0 4px 16px rgba(74,53,38,0.06), 0 30px 80px -12px rgba(74,53,38,0.30), inset 0 0 0 2px rgba(255,255,255,0.04); }
.phone-inner { position: relative; height: 680px; display: flex; flex-direction: column; overflow: hidden; border-radius: 42px; background: linear-gradient(180deg, #F4EEE3 0%, #EFE9DD 100%); }
.phone-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; background: #100B07; border-radius: 999px; z-index: 5; }
.phone-status { display: flex; justify-content: space-between; align-items: center; padding: 17px 26px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: #2A211C; }
.phone-status-icons { display: flex; align-items: center; gap: 6px; }
.phone-screen { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.phone-home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 116px; height: 5px; border-radius: 999px; background: rgba(44,37,32,0.30); z-index: 6; }
.phone-switcher { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mela-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.mela-scroll::-webkit-scrollbar { display: none; }

/* ---------- cross-section card (left) ---------- */
.xsec-card { background: var(--parchment-rai); border: 1px solid var(--hairline); border-radius: 24px; padding: 34px 30px; align-self: start; }
.xsec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.xsec-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--quiet); }
.xsec-reading { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); transition: color 500ms ease; }
.xsec-svg-mount { width: 100%; }
.xsec-hint { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); text-align: center; margin: 18px 0 0; }

/* mobile pill row (the four layers) — hidden on desktop, drives the single active card on mobile */
.xsec-pills { display: none; }
.xsec-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--quiet); background: var(--parchment-rai); border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: color 250ms var(--ease-micro), border-color 250ms var(--ease-micro), background 250ms var(--ease-micro); }
.xsec-pill.is-active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------- annotation rows (right) ---------- */
.layer-rows { display: grid; gap: 2px; }
.layer-row {
  display: grid; grid-template-columns: 30px 1fr; gap: 18px; align-items: start;
  text-align: left; width: 100%; background: none; border: 0;
  border-left: 2px solid transparent; border-radius: 0;
  padding: 22px; cursor: pointer; font: inherit;
  opacity: 0.42;
  transition: opacity 600ms ease, background 600ms ease, border-color 600ms ease;
}
.layer-row.is-active {
  opacity: 1;
  background: var(--parchment-rai);
  border-left-color: var(--accent);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 8px 24px -16px rgba(33,21,15,0.3);
}
.layer-row .lr-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--faint); color: var(--quiet);
  font-family: var(--font-mono); font-size: 11px;
  transition: all 500ms ease;
}
.layer-row.is-active .lr-num { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.layer-row:not(.is-active):hover { opacity: 0.72; }
/* layer name — color-codes to its accent when active, with a leading dot */
.layer-row .lr-meta { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--quiet); margin-bottom: 10px; transition: color 500ms ease; }
.layer-row .lr-meta::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); opacity: 0.4; transition: opacity 500ms ease; }
.layer-row.is-active .lr-meta { color: var(--accent); }
.layer-row.is-active .lr-meta::before { opacity: 1; }
/* bigger display title (borrow the original's confidence) */
.layer-row .lr-title { font-family: var(--font-display); font-variation-settings: 'opsz' 96; font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 330; line-height: 1.05; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 10px; }
.layer-row .lr-title em { font-style: italic; color: var(--accent); }
.layer-row .lr-body { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--body); margin: 0; max-width: 42ch; }
/* the "Mela reads" voice — the warm Fraunces-italic register, the row's payoff */
.layer-row .lr-reads {
  display: none;
  border-left: 2px solid var(--accent); padding-left: 16px; margin: 16px 0 0;
  font-family: var(--font-display); font-style: italic; font-variation-settings: 'opsz' 72; font-size: 1.12rem; line-height: 1.5; color: var(--ink); max-width: 42ch;
}
.layer-row.is-active .lr-reads { display: block; }
.layer-row .lr-reads-label { display: block; font-family: var(--font-mono); font-style: normal; font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }

/* ---------- full-bleed editorial photo bands (matches handoff; mobile-robust
   by design — photo stays full-bleed, a strong scrim keeps a readable text
   zone, the text box is max-width 30rem so it fits any width. NO mobile
   restructuring needed.) ---------- */
.band { position: relative; width: 100%; display: flex; align-items: center; overflow: hidden; background: #EDE6DA; }
.band--skin { min-height: clamp(420px, 58vh, 600px); }
.band--declaration { min-height: clamp(460px, 62vh, 640px); }
.band .band-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.02) saturate(0.94); }
.band--skin .band-photo { object-position: 74% center; }       /* subject right */
.band--declaration .band-photo { object-position: 28% center; } /* subject left */
.band::before { content: ''; position: absolute; inset: 0; z-index: 1; }
.band--skin::before { background: linear-gradient(90deg, rgba(245,239,230,0.95) 0%, rgba(245,239,230,0.74) 30%, rgba(245,239,230,0.2) 52%, rgba(245,239,230,0) 66%); }
.band--declaration::before { background: linear-gradient(90deg, rgba(245,239,230,0) 32%, rgba(245,239,230,0.22) 46%, rgba(245,239,230,0.8) 62%, rgba(245,239,230,0.96) 100%); }
.band .band-inner { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.band .band-copy { max-width: 30rem; }
.band--declaration .band-copy { margin-left: auto; } /* text on the right */
.band .h-head { margin-top: 16px; font-variation-settings: 'opsz' 144; font-weight: 300; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.0; letter-spacing: -0.04em; }

.declaration-lines { margin: 0; }
.declaration-lines .dl {
  font-family: var(--font-display); font-weight: 300; font-variation-settings: 'opsz' 96;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); margin: 0;
}
.declaration-caption { margin-top: 28px; }
.declaration-caption p { font-family: var(--font-display); font-style: italic; font-variation-settings: 'opsz' 96; font-weight: 350; font-size: clamp(1.15rem, 1.8vw, 1.5rem); line-height: 1.4; color: var(--gold-ink); margin: 0; padding-left: 20px; border-left: 2px solid var(--gold); max-width: 32ch; }
.declaration-caption p em { color: var(--gold-ink); font-style: italic; }

/* ---------- demonstration (dark instrument placeholder, Stage 4) ---------- */
.demo-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.demo-head .h-lede { margin: 18px auto 0; }
.demo-instrument {
  background: var(--ink-dark-bg); border-radius: 20px; min-height: 380px;
  box-shadow: inset 0 1px 0 rgba(239,230,218,0.07);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-bright);
}
.demo-foot { text-align: center; margin-top: 36px; }

/* ---------- demonstration DARK skin (redesign) — scoped to .demo--dark.
   Flips the real demonstration.js instrument to the comp's #1A130D card by
   overriding its --d-* tokens + the few elements with hardcoded light values.
   NO JS changes; the instrument's logic/markup are untouched. ---------- */
/* Light tokens scoped to the dark chart card ONLY — the read/evidence/footnote
   sit below it on parchment and keep their original dark-on-light tokens. */
.demo--dark .dm-instrument {
  --d-bark: #EFE6DA;                 /* trace + primary marks */
  --d-ink: #CFC2AC;                  /* in-card text */
  --d-muted: #9C8A6F;                /* axis + mono labels */
  --d-muted-deco: #7C6E5A;
  --d-gold: var(--gold-soft);        /* #C9A659 — gold on dark */
  --d-gold-text: var(--gold-soft);
  --d-coral: #D17B65;                /* coral, brighter on dark */
  --d-hairline: rgba(239, 230, 218, 0.14);
  --d-grid: rgba(239, 230, 218, 0.09);
  --d-band: rgba(239, 230, 218, 0.05);
}
.demo--dark .dm-instrument {
  background: var(--ink-dark-bg);
  position: relative;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 28px 64px -10px rgba(0,0,0,0.42);
  box-shadow: var(--shadow-float);
}
.demo--dark .dm-instrument::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft) 40%, transparent);
}
/* cycle phase shading → light tints on dark */
.demo--dark .dm-phasecell-menstrual { fill: rgba(239, 230, 218, 0.10); }
.demo--dark .dm-phasecell-follicular { fill: rgba(239, 230, 218, 0.03); }
.demo--dark .dm-phasecell-ovulation { fill: rgba(239, 230, 218, 0.06); }
.demo--dark .dm-phasecell-luteal { fill: rgba(239, 230, 218, 0.13); }
.demo--dark .dm-cursordot { stroke: var(--ink-dark-bg); }
/* transport buttons → dark-mode pills */
.demo--dark .dm-btn { background: rgba(239, 230, 218, 0.06); color: #EFE6DA; border-color: rgba(239, 230, 218, 0.18); }
.demo--dark .dm-btn:hover { background: rgba(239, 230, 218, 0.12); }
.demo--dark .dm-btn.ghost { background: transparent; color: #9C8A6F; border-color: transparent; }
.demo--dark .dm-btn.ghost:hover { background: rgba(239, 230, 218, 0.06); color: #EFE6DA; }
/* scrubber */
.demo--dark .mela-demo input[type=range]::-webkit-slider-runnable-track { background: rgba(239, 230, 218, 0.18); }
.demo--dark .mela-demo input[type=range]::-moz-range-track { background: rgba(239, 230, 218, 0.18); }
.demo--dark .mela-demo input[type=range]::-webkit-slider-thumb { border-color: var(--ink-dark-bg); }
.demo--dark .mela-demo input[type=range]::-moz-range-thumb { border-color: var(--ink-dark-bg); }
/* (read/evidence stay on parchment with their original dark-on-light tokens) */
/* Hide the instrument's standalone footnote on the homepage — the section eyebrow
   already says "Synthetic data", the footer carries the medical disclaimer, and the
   section's own "Watch all five demonstrations" link covers the rest. Keeps the
   demonstration from reading like an essay. (Full footnote still shows on /demonstrations/.) */
.demo--dark .dm-footnote { display: none; }

/* ---------- field notes teaser ---------- */
.teaser-rows { display: grid; gap: 2px; }
.teaser-row { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; text-decoration: none; border-top: 1px solid var(--hairline); padding: 22px 8px; transition: background-color 240ms var(--ease-micro); }
.teaser-rows .teaser-row:last-child { border-bottom: 1px solid var(--hairline); }
.teaser-row:hover { background: var(--parchment-rai); }
.teaser-row .tr-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--quiet); }
.teaser-row .tr-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 340; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.teaser-row .tr-title em { font-style: italic; color: var(--gold); }
.teaser-row .tr-meta { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--quiet); }

/* ---------- signup ---------- */
.signup-head { font-family: var(--font-display); font-weight: 320; font-variation-settings: 'opsz' 144; font-size: clamp(2.25rem, 4.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.04em; color: var(--ink); margin: 0 0 24px; max-width: 18ch; }
.signup-head em { font-style: italic; color: var(--gold); }
.signup-form { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 12px; }
.signup-form input { flex: 1; min-width: 240px; height: 50px; padding: 0 20px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--parchment-light); font-family: var(--font-body); font-size: 15px; color: var(--ink); }
.signup-form input::placeholder { color: var(--quiet); }
.signup-fine { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--quiet); }
#signup-status { margin-top: 14px; }
.signup-promise { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--quiet); margin: 0; max-width: 52ch; }
.signup-promise a { color: var(--gold-ink); }
.teaser-card { margin-top: 40px; padding: 22px 26px; background: var(--parchment-light); border: 1px solid var(--hairline); border-left: 2px solid var(--gold); border-radius: 4px; max-width: 520px; text-decoration: none; display: block; }
.teaser-card .tc-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-ink); display: block; margin-bottom: 8px; }
.teaser-card .tc-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 340; color: var(--ink); margin: 0 0 6px; }
.teaser-card .tc-body { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5; color: var(--body-soft); margin: 0; }

/* ---------- footer (shared) ---------- */
.h-footer { background: var(--parchment-deep); padding: 80px 0 48px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 48px; }
.footer-brand .mark { font-family: var(--font-display); font-size: 1.75rem; color: var(--ink); margin: 0 0 18px; }
.footer-brand p { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: var(--body-soft); margin: 0 0 14px; max-width: 46ch; }
.footer-col .fc-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--quiet); margin: 0 0 16px; }
.footer-col nav { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-family: var(--font-body); font-size: 0.9375rem; color: var(--body); text-decoration: none; transition: color 200ms var(--ease-micro); }
.footer-col a:hover { color: var(--gold-ink); }
.footer-colophon { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--quiet); }

/* ---------- responsive: the single 860px breakpoint ---------- */
@media (max-width: 860px) {
  .h-container, .h-header, .trust-inner, .band .band-inner { padding-left: 20px; padding-right: 20px; }
  .h-section { padding: 80px 0; }
  .hero { padding: 120px 0 72px; }
  .hero-grid, .split, .split--read, .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .h-nav { display: none; }
  /* bands stay full-bleed on mobile (photo + scrim + max-width:30rem text),
     like the handoff. The declaration's text overlaps the portrait at narrow
     widths, so its scrim becomes a stronger near-full veil to keep text legible
     (the skin band's left-strong scrim already covers its left-set text). */
  /* Declaration STACKS on mobile: portrait as a contained image on top, text
     below on solid parchment. Full-bleed overlay can't keep the small gold
     caption legible on a phone, so this guarantees readability AND shows the
     portrait clearly. (Skin band stays full-bleed — its left-set text reads fine.) */
  .band--declaration { display: block; min-height: 0; background: var(--parchment); }
  .band--declaration .band-photo { position: relative; height: 300px; object-position: 35% center; }
  .band--declaration::before { display: none; }
  .band--declaration .band-inner { padding: 36px 20px 52px; }
  .band--declaration .band-copy { max-width: none; margin: 0; }

  /* cross-section compact form: capped diagram + pill row + single active card */
  .split--read { gap: 24px; }
  .xsec-card { max-width: 348px; margin: 0 auto; padding: 26px 24px; width: 100%; }
  .xsec-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 4px; }
  .layer-row { display: none; }
  .layer-row.is-active { display: grid; }
  .signup-form input { min-width: 0; }
}