/** Shopify CDN: Minification failed

Line 394:0 Unexpected "}"

**/
/* =============================================================================
   HypoHero — The System (interactive roadmap landing page)
   Palette locked per Color Audit / HypoHero Color System.md
   ============================================================================= */

/* This stylesheet only loads on the System Roadmap page, so it's safe to guard
   against horizontal overflow page-wide on mobile (prevents the results photo /
   spine from pushing the layout sideways). */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; }
}

:root {
  /* Core tokens */
  --ink: #1A1730;
  --ink-soft: #5D5670;
  --ink-quiet: #9D97AD;
  --eggplant: #3D2E6E;
  --eggplant-soft: #5B4690;
  --violet: #8A78D6;
  --violet-edge: #7565BC;     /* gradient dark stop only */
  --action: #8B7FC7;
  --action-deep: #7869B8;
  --off-white: #FAF8FD;
  --paper: #FFFFFF;
  --lav-top: #F3EFFA;
  --lav-bot: #E5DCF2;
  --divider: #E5DCF2;
  --gold: #D9A726;

  --serif: 'Tiempos Text', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-dur: 0.9s;   /* overridden by tweaks */
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--off-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* reduce-motion / tweak off */
body.no-motion .reveal { opacity: 1 !important; transform: none !important; }

img { max-width: 100%; display: block; }

/* ---------- Shared type ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--violet);
}
.eyebrow.on-violet { color: rgba(255,255,255,0.72); }
.eyebrow.on-lav { color: var(--eggplant-soft); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.02em; line-height: 1.0; }
h2 em, h1 em, h3 em { font-style: italic; font-weight: 600; }

p { text-wrap: pretty; }

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--reveal-dur) var(--ease), transform var(--reveal-dur) var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.fade { transform: translateY(0) scale(0.985); }
.reveal.fade.in { transform: none; }

/* =============================================================================
   LAYOUT PRIMITIVES
   ============================================================================= */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.section { position: relative; }

/* Surfaces */
.s-offwhite { background: var(--off-white); }
.s-lav {
  background: linear-gradient(180deg, var(--lav-top) 0%, var(--lav-bot) 100%);
  color: var(--eggplant);
}
.s-violet {
  background: linear-gradient(165deg, var(--violet) 0%, var(--violet-edge) 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Honeycomb overlay */
.hex-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0.14; pointer-events: none; z-index: 0;
}
/* Hero: honeycomb concentrated at top, fading into the flat gradient before
   the section ends (the page scrolls, so no pattern at the bottom edge). */
.hero .hex-bg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 12%, transparent 44%);
          mask-image: linear-gradient(180deg, #000 0%, #000 12%, transparent 44%);
}
/* CTA: mirror of the hero — honeycomb densest at the page's bottom edge,
   dissolving upward so it bookends the page without a hard top seam. */
.cta .hex-bg {
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 26%, transparent 72%);
          mask-image: linear-gradient(0deg, #000 0%, #000 26%, transparent 72%);
}
.s-violet > .wrap { position: relative; z-index: 1; }

/* =============================================================================
   HERO
   ============================================================================= */
.hero { min-height: 100svh; display: flex; align-items: center; padding: 60px 0 90px; }
.hero .wrap { width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.hero-eyebrow::after { content: ""; height: 1px; width: 64px; background: rgba(255,255,255,0.35); }
.hero h1 { font-size: clamp(48px, 7vw, 92px); margin-bottom: 28px; }
.hero h1 em { color: rgba(255,255,255,0.6); }
.m-only { display: none; }
.hero-lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: rgba(255,255,255,0.82); max-width: 34ch; margin-bottom: 38px; }
.hero-lede b { color: #fff; font-weight: 600; }
.lede-benefit { display: block; margin-top: 16px; color: #fff; font-weight: 600; }

/* floating product family cluster (test kits + bottles) */
.hero-cluster { position: relative; width: 100%; min-height: 480px; display: flex; align-items: center; justify-content: center; }
.hero-cluster img { position: absolute; filter: drop-shadow(0 26px 44px rgba(20,12,48,0.44)); }
.hc-kit { width: 58%; z-index: 1; }
.kit-a { top: 6px; left: -3%; transform: rotate(-6deg); }
.kit-b { top: 60px; right: -3%; transform: rotate(6deg); z-index: 2; }
.hc-bot { bottom: 0; }
.bot-1 { height: 270px; left: 3%;  transform: rotate(-8deg); z-index: 3; }
.bot-2 { height: 312px; left: 31%; z-index: 5; }
.bot-3 { height: 244px; right: 5%; transform: rotate(8deg); z-index: 4; }

/* hero system diagram — ORIGINAL illustration (PNG) + single pulsing teal glow */
.hero-cluster .hero-system-art { position: relative; z-index: 1; width: min(600px, 46vw); max-width: none; height: auto; display: block; filter: none; }
.hero-glow-orb {
  position: absolute; left: 50%; top: 50%;
  width: 48%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(150,255,232,0.60) 0%, rgba(138,245,220,0.22) 42%, transparent 70%);
  filter: blur(18px); z-index: 0; pointer-events: none;
}
@keyframes heroOrbPulse {
  0%,100% { opacity: 0.85; transform: translate(-50%,-50%) scale(0.92); }
  50%     { opacity: 0.85; transform: translate(-50%,-50%) scale(1.22); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow-orb { animation: heroOrbPulse 5s ease-in-out infinite; }
}

/* dot chase — a faint pulse travels outward along the connector dots,
   from the thyroid out to each icon (delays applied per-dot via JS) */
@keyframes dotChase { 0% { opacity: 0.3; } 10% { opacity: 1; } 26% { opacity: 0.3; } 100% { opacity: 0.3; } }
.dot-chase { animation: dotChase 3.6s linear infinite; }
.dot-dim { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .dot-chase { animation: none !important; opacity: 1 !important; } }

/* hero system diagram (live SVG) — kept for "System Roadmap - Live Diagram (saved).html" */
.hero-diagram { width: min(600px, 46vw); max-width: none; height: auto; display: block; overflow: visible; }
.hd-glow { fill: url(#hdGlow); transform-origin: 320px 320px; }
.hd-link { fill: none; stroke: rgba(255,255,255,0.5); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.hd-pulse { fill: rgba(173,255,238,0.30); transform-box: fill-box; transform-origin: center; opacity: 0.2; }
.hd-hex { fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.88); stroke-width: 2; }
.hd-thyroid { transform-origin: 320px 320px; }

@keyframes hdBreath { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.03); } }
@keyframes hdGlowPulse { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.12); } }
@keyframes hdFlow { to { stroke-dashoffset: -33; } }
@keyframes hdPulse { 0%,100% { opacity: 0.14; transform: scale(0.82); } 50% { opacity: 0.5; transform: scale(1.06); } }

@media (prefers-reduced-motion: no-preference) {
  .hd-thyroid { animation: hdBreath 7s ease-in-out infinite; will-change: transform; }
  .hd-glow { animation: hdGlowPulse 5s ease-in-out infinite; }
  .hd-link { animation: hdFlow 1.6s linear infinite; }
  .hd-pulse { animation: hdPulse 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
}

/* placeholder for forthcoming hero graphic */
.hc-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(255,255,255,0.4);
  border-radius: 14px;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 10px, rgba(255,255,255,0.02) 10px 20px);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.scroll-cue {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.scroll-cue .dot {
  width: 26px; height: 40px; border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 14px; position: relative;
}
.scroll-cue .dot::after {
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 3px; background: #fff;
  animation: cue 1.7s var(--ease) infinite;
}
@keyframes cue { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 70% { opacity: 1; transform: translate(-50%, 12px);} 100% { opacity: 0; transform: translate(-50%, 14px);} }

/* =============================================================================
   THESIS
   ============================================================================= */
.thesis { padding: 110px 0; }
.thesis .wrap { max-width: 920px; }
.thesis .eyebrow { margin-bottom: 24px; }
.thesis h2 { font-size: clamp(32px, 4.4vw, 54px); color: var(--ink); margin-bottom: 28px; }
.thesis h2 em { color: var(--violet); }
.thesis .body { font-size: clamp(18px, 2vw, 21px); color: var(--ink-soft); max-width: 64ch; }
.thesis .body p + p { margin-top: 18px; }

/* =============================================================================
   SYMPTOMS — three recognition cards, each with its own photo
   ============================================================================= */
.symptoms { padding: 104px 0; }
.symptoms-head em { color: var(--violet); }
.symptoms-head {
  font-size: clamp(30px, 4.2vw, 50px); color: var(--eggplant);
  text-align: center; margin-bottom: 56px; text-wrap: balance;
}
.symptom-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.symptom-card { margin: 0; }
.sc-photo-wrap {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(20, 12, 48, 0.16);
}
.sc-photo-wrap .sc-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.symptom-card figcaption { padding: 22px 4px 0; }
.symptom-card figcaption p {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 1.9vw, 24px); line-height: 1.25;
  letter-spacing: -0.01em; color: var(--eggplant); margin: 0;
}

/* =============================================================================
   WHAT IS A THYROID DEFICIT — definition + healthy vs deficit comparison
   ============================================================================= */
.whatis { padding: 110px 0; }
.whatis-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.whatis-head h2 { font-size: clamp(32px, 4.4vw, 54px); color: var(--ink); margin-bottom: 22px; }
.whatis-head h2 em { color: var(--violet); white-space: nowrap; }
.whatis-head p { font-size: clamp(19px, 2.1vw, 24px); color: var(--ink-soft); line-height: 1.5; text-wrap: balance; }
.cell-compare {
  max-width: 620px; margin: 0 auto;
}
.ba-slider {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 20px; overflow: hidden;
  background: #fff; border: 1px solid var(--divider);
  box-shadow: 0 20px 50px rgba(20, 12, 48, 0.12);
  user-select: none; touch-action: pan-y; cursor: ew-resize;
}
.ba-base, .ba-top {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.ba-top { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 2px; background: #fff; transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(20,12,48,0.10); pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: #1A1730;
  display: grid; place-items: center;
  box-shadow: 0 2px 12px rgba(20,12,48,0.28), 0 0 0 2px rgba(20,12,48,0.08);
}
.ba-tag {
  position: absolute; top: 16px; z-index: 2;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; pointer-events: none;
}
.ba-tag-l { left: 16px; background: rgba(138,120,214,0.16); color: var(--eggplant); }
.ba-tag-r { right: 16px; background: rgba(90,110,60,0.16); color: #4d5e28; }
.ba-hint {
  text-align: center; margin-top: 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-quiet);
}
.thesis .body strong { color: var(--ink); font-weight: 600; }

/* "Why a system" — dark violet beat, single-sentence answer */
.whysystem { padding: 110px 0; }
/* Centered content column so the block clears the fixed left progress rail
   (rail dots + active label) at desktop widths and reads as middle-aligned. */
.whysystem .wrap { max-width: 820px; position: relative; z-index: 1; }
.whysystem h2 { font-size: clamp(30px, 4.2vw, 50px); color: #fff; margin-bottom: 28px; letter-spacing: -0.01em; }
.whysystem h2 em { color: rgba(255,255,255,0.6); }
.whysystem .why-answer {
  font-size: clamp(22px, 2.7vw, 31px); font-weight: 500;
  color: rgba(255,255,255,0.94); letter-spacing: -0.01em;
  line-height: 1.4; max-width: 72ch;
}
.whysystem .why-resolve { margin-top: 1.1em; }
.why-fails {
  list-style: none; margin: 0 0 30px; padding: 0; max-width: 620px;
}
.why-fails li {
  display: flex; align-items: center; gap: 26px;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.20);
}
.why-fails li:last-child { border-bottom: 1px solid rgba(255,255,255,0.20); }
.wf-num {
  font-family: var(--mono); font-size: clamp(28px, 3.4vw, 44px); font-weight: 600;
  color: rgba(255,255,255,0.34); line-height: 1; flex-shrink: 0;
  min-width: 1.6em; letter-spacing: -0.02em;
}
.wf-text {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 2.5vw, 29px); line-height: 1.2;
  letter-spacing: -0.01em; color: rgba(255,255,255,0.7);
}
.wf-text em { font-style: normal; color: #fff; }
.why-conseq {
  font-size: clamp(19px, 2.1vw, 24px); font-weight: 600;
  color: #fff; letter-spacing: -0.01em; max-width: none; text-wrap: nowrap;
}

/* =============================================================================
   SYSTEM MAP (the loop diagram)
   ============================================================================= */
.map { padding: 110px 0 120px; }
.map .head { text-align: center; max-width: 880px; margin: 0 auto 28px; }
.map .head .eyebrow { display: inline-block; margin-bottom: 20px; }
.map .head h2 { font-size: clamp(32px, 4.4vw, 52px); margin-bottom: 22px; }
.map .head h2 em { color: var(--violet); }
.map .head p { color: var(--eggplant-soft); font-size: 19px; max-width: none; margin: 0 auto; text-wrap: balance; }

.diagram { position: relative; max-width: 720px; margin: -45px auto 0; aspect-ratio: 1 / 1; }
.diagram > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.node {
  position: absolute; transform: translate(-50%, -50%);
  width: 96px; text-align: center;
}
.node .hexwrap {
  width: 96px; height: 108px; margin: 0 auto; position: relative;
  display: grid; place-items: center;
}
.node .cap {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 12px; width: 180px;
}
.node .hexwrap > svg { position: absolute; inset: 0; }
.node .ic { position: relative; z-index: 2; color: #fff; }
.node .lab { font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--eggplant); letter-spacing: -0.01em; }
.node .sub { font-size: 13px; color: var(--eggplant-soft); line-height: 1.4; margin-top: 4px; }

.node-hub { width: 136px; z-index: 5; }
.node-hub .hexwrap { width: 136px; height: 152px; margin: 0 auto; }
.node-hub .lab { font-size: 23px; }

.node.n-measure { left: 50%;   top: 16.7%; }
.node.n-correct { left: 78.9%; top: 66.7%; }
.node.n-track   { left: 21.1%; top: 66.7%; }
.node.n-hub     { left: 50%;   top: 50%; }

.node-num {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--violet);
  margin-bottom: 3px; text-align: center;
}
.node.n-measure .cap, .node.n-correct .cap, .node.n-track .cap { align-items: center; }
}
.map .pkey {
  display: flex; align-items: flex-start; gap: 14px;
  text-align: left;
}
.map .pk-num {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  background: var(--violet); color: #fff; width: 26px; height: 26px;
  border-radius: 50%; display: grid; place-items: center; margin-top: 2px;
}
.map .pk-body h4 {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  color: var(--eggplant); letter-spacing: -0.01em; margin: 0 0 5px;
}
.map .pk-body p {
  font-size: 15px; line-height: 1.5; color: var(--eggplant-soft); margin: 0;
}
@media (max-width: 760px) {
  .map .phase-keys { grid-template-columns: 1fr; gap: 18px; max-width: 360px; }
}

/* =============================================================================
   THE SPINE / JOURNEY
   ============================================================================= */
.journey { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 0; }

/* central spine line */
.spine {
  position: absolute; top: 0; bottom: 140px; left: 50%; transform: translateX(-50%);
  width: 2px; background: var(--divider); z-index: 0;
}
.spine .fill {
  /* display:block overrides Dawn base.css `div:empty { display:none }` — the
     fill is an empty div, so the theme was hiding it (no box), which is why the
     spine line showed but never appeared to fill. */
  display: block;
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--violet), var(--violet-edge));
  transition: height 0.1s linear;
}

.phase { position: relative; padding: 70px 0; z-index: 2; }

/* Phase header */
.phase-head { text-align: center; max-width: 850px; margin: 0 auto 56px; position: relative; }
.phase-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--violet);
  display: grid; place-items: center; margin: 0 auto 26px;
  font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--violet);
  position: relative; z-index: 2;
  box-shadow: 0 0 0 8px var(--paper);
}
.phase.on-lav .phase-badge { box-shadow: 0 0 0 8px var(--lav-top); }
.phase-head .eyebrow { display: inline-block; margin-bottom: 14px; }
.phase-head h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 18px; }
.phase.on-off .phase-head h2 { color: var(--ink); }
.phase.on-lav .phase-head h2 { color: var(--eggplant); }
.phase-head h2 em { color: var(--violet); }
.phase-head .lede { font-size: 18px; max-width: 850px; margin: 0 auto; text-wrap: wrap; }
/* Soft section-colored plate behind the heading text so the centered spine
   line passes cleanly BEHIND it (visible only in the connecting gaps above the
   badge and below toward the cards) instead of showing through the letters. */
.phase-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -10px; transform: translateX(-50%);
  width: 132%; height: calc(100% + 20px);
  background: linear-gradient(90deg,
    transparent 0%, var(--paper) 16%, var(--paper) 84%, transparent 100%);
}
.phase.on-lav .phase-head::before {
  background: linear-gradient(90deg,
    transparent 0%, var(--lav-top) 16%, var(--lav-top) 84%, transparent 100%);
}
.phase.on-off .phase-head .lede { color: var(--ink-soft); }
.phase.on-lav .phase-head .lede { color: var(--eggplant-soft); }

/* Station cards grid */
.stations { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Two-item station layout (Track section) */
#track .stations { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin-left: auto; margin-right: auto; }
.station {
  background: var(--paper); border: 1px solid var(--divider);
  border-radius: 22px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(26,23,48,0.04);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.station:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(61,46,110,0.14); }

.station .media {
  position: relative; aspect-ratio: 4 / 3.2;
  background: linear-gradient(180deg, var(--lav-top), var(--lav-bot));
  display: grid; place-items: center; overflow: hidden;
}
.station .media image-slot { width: 100%; height: 100%; }
.station .media .bottle {
  height: 84%; width: auto; object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(61,46,110,0.22));
}
.station .media .kit {
  width: 92%; height: 88%; object-fit: contain;
  filter: drop-shadow(0 16px 26px rgba(61,46,110,0.20));
}
/* Thermometer — fills the card on its studio-lavender backdrop */
.station .media.lav-studio { background: #BEB5E2; }
.station .media .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Phone mockup inside station card — give it breathing room from top edge */
.station .media .phone { margin-top: 24px; }
/* Supplement studio shots — warm-grey backdrop matching the photos so they blend */
.station .media.grey-studio { background: linear-gradient(180deg, #EEEDE9 0%, #F9F7F3 100%); }
.station .media .bottle-studio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.station .tagnum {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  background: rgba(255,255,255,0.9); color: var(--eggplant);
  padding: 5px 10px; border-radius: 999px;
}
/* ---------------------------------------------------------------------------
   Host-theme (Dawn base.css) compatibility.
   base.css declares, globally:
     .media > *:not(.zoom):not(.deferred-media__poster-button) {
       position:absolute; top:0; left:0; width:100%; height:100%; }
   (specificity 0,3,0) which stretches our station-card tag badge, phone mockup
   and bottle to fill the media box — producing a giant white "circle" (the
   blown-up .tagnum) and an oversized phone. Re-assert the intended geometry at
   higher specificity (0,4,0) so it wins regardless of stylesheet order.
   --------------------------------------------------------------------------- */
.phase .station .media > .tagnum {
  position: absolute; top: 14px; left: 14px;
  width: auto; height: auto;
}
.phase .station .media > .phone {
  position: relative; top: auto; left: auto;
  width: 300px; max-width: 100%; height: auto;
}
.phase .station .media > .bottle {
  position: relative; top: auto; left: auto;
  width: auto; height: 84%;
}
.phase .station .media > .photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.station .body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.station .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--violet); margin-bottom: 9px; }
.station h3 { font-size: 24px; color: var(--ink); margin-bottom: 6px; }
.station .tagline { font-size: 13px; color: var(--ink-quiet); font-weight: 500; margin-bottom: 16px; }
.station .why { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.station .why b { color: var(--ink); font-weight: 600; }
/* Bulleted benefit list inside a station card */
.station .why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.station .why-list li {
  position: relative; padding-left: 18px;
  font-size: 15px; color: var(--ink-soft); line-height: 1.45;
}
.station .why-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--violet);
}
.station .feed {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--eggplant-soft); font-weight: 500;
}
.station .feed svg { flex-shrink: 0; }

/* =============================================================================
   HUB (coaching app) — phase 03 special treatment
   ============================================================================= */
.hub { padding: 96px 0 100px; }
.hub-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }

.phone {
  width: 300px; max-width: 100%; margin: 0 auto;
  background: #0E0B1C; border-radius: 46px; padding: 11px;
  box-shadow: 0 50px 90px rgba(26,23,48,0.4), inset 0 0 0 1.5px rgba(255,255,255,0.06);
  position: relative;
}
.phone .screen {
  background: #F7F4FB; border-radius: 36px; overflow: hidden;
  position: relative; aspect-ratio: 1170 / 2460;
}
.phone .island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #0E0B1C; border-radius: 16px; z-index: 6; }
.phone image-slot { width: 100%; height: 100%; }
.phone .app-shot { width: 100%; height: auto; display: block; }
.phone .home-ind {
  position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 5px; border-radius: 3px; background: rgba(26,23,48,0.28); z-index: 6;
}

.hub .feat-eyebrow { display: inline-block; margin-bottom: 16px; }
.hub h2 { font-size: clamp(30px, 4vw, 48px); color: var(--eggplant); margin-bottom: 20px; }
.hub h2 em { color: var(--violet); }
.hub .intro { font-size: 19px; color: var(--eggplant-soft); margin-bottom: 36px; max-width: 52ch; }

.feat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feat {
  background: var(--paper); border: 1px solid var(--divider);
  border-radius: 18px; padding: 22px 22px 24px;
}
.feat .ic {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--lav-bot); color: var(--violet-edge);
  display: grid; place-items: center; margin-bottom: 14px;
}
.feat h4 { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.01em; }
.feat p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.feat.wide { grid-column: 1 / -1; }

/* =============================================================================
   LOOP CLOSE
   ============================================================================= */
.results { position: relative; padding: 0; overflow: hidden; }
.results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(520px, 62vh, 660px);
}
.results-media { position: relative; }
.results-photo {
  position: absolute; inset: 48px;
  width: auto; height: auto;
  border-radius: 26px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(45,30,90,0.50), 0 4px 16px rgba(45,30,90,0.10);
}
/* The .results-photo block fills the inset box; the inner <img> covers it.
   (An <img> with the class directly can't fill the inset box — replaced
   elements use their intrinsic size with auto width/height.) */
.results-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Spine continuation — threads down the centre gutter and lands an arrow on the CTA */
/* Spine handoff — MOBILE ONLY (stacked column). On desktop the 50/50 split
   leaves the centre empty, so the line is hidden. */
.results-thread {
  display: none;
  position: absolute; left: 50%; bottom: 0; height: 56px;
  transform: translateX(-50%);
  width: 2px; background: var(--violet);
  z-index: 1; pointer-events: none;
}
.results-thread .thread-arrow {
  position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  color: var(--violet);
}
.results-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(48px, 6vw, 96px);
  padding-right: clamp(40px, 8vw, 120px);
  max-width: 620px;
}
.results-copy h2 {
  font-size: clamp(34px, 4vw, 56px);
  color: var(--ink); margin-bottom: 22px;
  text-wrap: balance;
}
.results-copy h2 em { color: var(--violet); }
.results-copy p {
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--ink-soft); max-width: 34ch;
  line-height: 1.5;
}

/* =============================================================================
   CTA
   ============================================================================= */
.cta { padding: 120px 0 130px; text-align: center; }
.cta .eyebrow { display: inline-block; margin-bottom: 24px; }
.cta h2 { font-size: clamp(40px, 6vw, 76px); color: #fff; margin-bottom: 26px; }
.cta h2 em { color: rgba(255,255,255,0.6); }
.cta p { font-size: 20px; color: rgba(255,255,255,0.84); max-width: 64ch; margin: 0 auto 44px; text-wrap: balance; }
.cta-row { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

.cta .guarantee {
  display: inline-flex; align-items: center; gap: 11px;
  margin: 40px auto 0;
  padding: 12px 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: #fff; font-size: 15px; line-height: 1.3;
}
.cta .guarantee svg { flex-shrink: 0; }
.cta .guarantee b { font-weight: 600; }
.cta .guarantee .q { color: rgba(255,255,255,0.66); font-weight: 400; }
.cta .guarantee-fine {
  text-align: center; font-size: 14px; line-height: 1.5;
  color: rgba(255,255,255,0.78); max-width: 900px; margin: 14px auto 0;
  text-wrap: balance;
}

/* ----- Pricing tiers ----- */
.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1080px; margin: 8px auto 0; text-align: left;
}
.tier {
  background: var(--paper); border-radius: 22px; padding: 44px 30px 34px;
  display: flex; flex-direction: column; position: relative;
  box-shadow: 0 18px 44px rgba(20, 12, 48, 0.20);
}
.tier.feat {
  box-shadow: 0 30px 70px rgba(20, 12, 48, 0.34);
  outline: 2px solid #fff; outline-offset: -2px;
}
.tier .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--eggplant); color: #fff; font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.tier .lvl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; color: var(--action); margin-bottom: 10px;
}
.tier h3 { font-size: 23px; color: var(--ink); margin-bottom: 6px; }
.tier .desc { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; min-height: 40px; margin-bottom: 18px; }
.tier .price {
  font-family: var(--serif); font-weight: 700; font-size: 44px; color: var(--ink);
  line-height: 1; letter-spacing: -0.02em;
}
.tier .price .cur { font-size: 24px; vertical-align: 0.5em; font-weight: 600; }
.tier .permo { font-size: 12.5px; color: var(--ink-quiet); margin-top: 8px; min-height: 18px; }
.tier .permo b { color: var(--action); font-weight: 600; }
.tier ul {
  list-style: none; padding: 0; margin: 22px 0 26px;
  border-top: 1px solid var(--divider); padding-top: 20px;
  display: flex; flex-direction: column; gap: 11px; flex: 1;
}
.tier ul li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; color: var(--ink); line-height: 1.45; }
.tier ul li.off { color: var(--ink-quiet); }
.tier ul li svg { margin-top: 3px; }
.tier .btn-tier {
  display: block; width: 100%; text-align: center;
  background: var(--action); color: #fff; font-family: var(--sans);
  font-weight: 600; font-size: 15px; border: none; cursor: pointer;
  padding: 15px 20px; border-radius: 999px; text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.tier .btn-tier:hover { background: var(--action-deep); transform: translateY(-2px); }
.tier.feat .btn-tier { background: var(--eggplant); }
.tier.feat .btn-tier:hover { background: #2F2256; }
.cta .tiers-note {
  text-align: center; font-size: 13.5px; line-height: 1.55;
  color: rgba(255,255,255,0.9);
  max-width: 1080px; margin: 60px auto 0;
  background: var(--violet-edge);
  border-radius: 16px;
  padding: 18px 32px;
}
.tiers-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ----- Single buy box ----- */
.buybox {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1100px; margin: 48px auto 0;
  background: var(--paper); border-radius: 24px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
}
.buybox-img {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin: 20px 16px 20px 20px;
  border-radius: 18px; overflow: hidden;
  aspect-ratio: 1;
  align-self: center;
}
.buybox-img img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 14px; }
.buybox-img-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: rgba(255,255,255,0.5); font-size: 13px; text-align: center;
  padding: 40px; height: 100%; width: 100%;
}
.buybox-body {
  padding: 48px 44px 44px; display: flex; flex-direction: column;
  text-align: left;
}
.buybox-name {
  font-family: var(--serif); font-size: 26px; font-weight: 700;
  color: var(--ink); line-height: 1.2; margin-bottom: 6px;
}
.buybox-tagline {
  font-size: 13.5px; color: var(--ink-soft); margin-bottom: 24px;
}
.buybox-stars {
  display: flex; align-items: center; gap: 7px; margin-bottom: 16px;
}
.bstars { color: #C9A84C; font-size: 15px; letter-spacing: 1px; }
.brating { font-weight: 700; font-size: 15px; color: var(--ink); }
.breviews { font-size: 14px; color: var(--ink-soft); }

.buybox-price-row {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px;
}
.buybox-price {
  font-family: var(--serif); font-weight: 700; font-size: 56px;
  color: var(--ink); line-height: 1; letter-spacing: -0.02em; margin-bottom: 6px;
}
.buybox-price .cur { font-size: 28px; vertical-align: 0.5em; font-weight: 600; }
.buybox-was {
  font-size: 22px; color: var(--ink-quiet); text-decoration: line-through;
  font-weight: 500; line-height: 1;
}
.buybox-save {
  background: #8A78D6; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
  white-space: nowrap;
}
.buybox-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-soft);
  margin-top: 16px;
}
.btrust-sep { color: var(--ink-quiet); }
.buybox-permo {
  font-size: 12px; color: var(--ink-quiet); margin-bottom: 24px;
  border-bottom: 1px solid var(--divider); padding-bottom: 22px;
}
.buybox-includes {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 13px; flex: 1;
}
.buybox-includes li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  font-size: 14px; color: var(--ink); line-height: 1.45;
}
.buybox-includes li svg { margin-top: 3px; flex-shrink: 0; }
.buybox-includes li b { font-weight: 600; }
/* Subscribe & Save toggle */
.buybox-subscribe {
  display: flex; align-items: center; gap: 12px;
  background: #F0EEF9; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 14px; cursor: pointer;
  user-select: none;
}
.sub-toggle { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.sub-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sub-slider {
  position: absolute; inset: 0; border-radius: 26px;
  background: #ccc; transition: background 0.25s;
  cursor: pointer;
}
.sub-slider::before {
  content: ''; position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; left: 3px; top: 3px;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.sub-toggle input:checked + .sub-slider { background: #8A78D6; }
.sub-toggle input:checked + .sub-slider::before { transform: translateX(18px); }
.sub-label { font-size: 15px; font-weight: 600; color: var(--ink); flex: 1; }
.sub-info {
  font-size: 16px; color: var(--ink-soft); cursor: help;
  font-style: normal;
}

.btn-buybox {
  display: block; width: 100%; text-align: center;
  background: var(--eggplant); color: #fff; font-family: var(--sans);
  font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  padding: 16px 24px; border-radius: 12px; text-decoration: none;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
  margin-bottom: 18px;
}
.btn-buybox:hover { background: #2F2256; transform: translateY(-2px); }
.buybox-guarantee {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13px; color: rgba(90,72,140,0.85); line-height: 1.4;
}
.buybox-guarantee svg { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 960px) {
  .buybox-mob .buybox-name { font-size: 26px; }
  .buybox-mob .sub-label { font-size: 13px; }
}

.btn {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  border: none; cursor: pointer; border-radius: 999px;
  padding: 18px 34px; transition: transform 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary { background: #fff; color: var(--eggplant); box-shadow: 0 10px 30px rgba(20,12,48,0.25); }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,12,48,0.34); }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.45); }
.btn-ghost:hover { background: rgba(255,255,255,0.2); transform: translateY(-3px); }

/* =============================================================================
   TRUST STRIP
   ============================================================================= */
.trust-strip {
  background: #F7F5FF;
  border-top: 1px solid rgba(138,120,214,0.15);
  border-bottom: 1px solid rgba(138,120,214,0.15);
  padding: 18px 0;
}
.trust-strip-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap;
  font-size: 15px; color: var(--ink);
}
.trust-main { font-weight: 500; }
.trust-main strong { font-weight: 700; }
.trust-sep { color: rgba(90,70,160,0.3); font-size: 18px; }
.trust-stars { color: #8A78D6; font-size: 16px; letter-spacing: 1px; }
.trust-rating { font-weight: 700; color: var(--ink); }
.trust-count { color: #5D5670; }

/* Always-visible float button — desktop top-right */
/* Hero CTA — transparent, fixed top-right. Pinned while scrolling the hero;
   JS toggles .visible so it only shows after the sitewide header scrolls off
   and hides once the white sticky bar (.sticky-btn-float) takes over. */
.hero-cta-float {
  position: fixed; top: 28px; right: 40px; z-index: 900;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 9px 22px; font-family: var(--sans); font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, background 0.3s;
}
.hero-cta-float.visible { opacity: 1; pointer-events: auto; }
.hero-cta-float:hover { background: rgba(255,255,255,0.12); }

.sticky-btn-float {
  position: fixed; top: 28px; right: 40px; z-index: 900;
  transform: translateY(-50%);
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 9px 22px; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s, transform 0.3s;
  opacity: 0;
  pointer-events: none;
}
.sticky-btn-float.visible { opacity: 1; pointer-events: auto; }
.sticky-btn-float:hover { background: rgba(255,255,255,0.1); }
.sticky-btn-float.in-bar {
  background: #8A78D6; color: #fff; border-color: transparent;
}
.sticky-btn-float.in-bar:hover { background: #7B68C8; }
.sticky-btn-float.hidden { opacity: 0; pointer-events: none; transform: translateY(calc(-50% - 8px)); }

/* =============================================================================
   STICKY DESKTOP TOP BAR
   ============================================================================= */
.sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.sticky-bar.visible { transform: translateY(0); pointer-events: auto; }
.sticky-bar-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
  height: 56px; display: flex; align-items: center; gap: 16px;
}
.sticky-logo { height: 22px; width: auto; display: block; margin-right: auto; }

.sticky-brand {
  font-family: var(--serif); font-weight: 800; font-size: 18px;
  color: #1A1430; letter-spacing: -0.01em; margin-right: auto;
}
.sticky-tagline {
  font-size: 14px; color: rgba(255,255,255,0.55);
  /* leave ~180px gap for the floating button on the right */
  margin-right: 180px;
}
.sticky-btn { display: none; }

/* =============================================================================
   STICKY MOBILE BOTTOM BAR
   ============================================================================= */
.sticky-mobile {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  display: none;
}
.sticky-mobile.visible { transform: translateY(0); pointer-events: auto; }
.sticky-mobile-btn {
  display: block; text-align: center;
  background: #8A78D6; color: #fff;
  border-radius: 12px; padding: 16px;
  font-size: 16px; font-weight: 700;
  text-decoration: none;
  transition: background 0.2s;
}
.sticky-mobile-btn:hover { background: #7B68C8; }

/* Desktop buybox — shown above 960px */
.buybox--desktop { display: grid; }
.buybox-mob { display: none; }

/* Mobile buybox — shown below 960px */
.buybox-mob-img {
  width: 100%; display: block;
  object-fit: cover;
}
.buybox-mob-body {
  padding: 20px 0 32px;
  text-align: left;
}

@media (max-width: 960px) {
  .buybox--desktop { display: none; }
  .buybox-mob { display: block; }
  /* CTA section: white, no purple chrome */
  .cta { padding-top: 48px; background: #fff; }
  .cta .hex-bg { display: none; }
  .cta h2 { color: var(--ink); }
  .cta h2 em { color: var(--violet); }
}

/* =============================================================================
   CTA eyebrow */
.cta-eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 18px;
  font-weight: 500;
}

/* =============================================================================
   TESTIMONIALS
   ============================================================================= */
.testimonials { padding: 90px 0; }
.tcarousel { max-width: 680px; margin: 0 auto; text-align: center; }
.tquote {
  display: none;
  animation: tfade 0.5s ease;
}
.tquote.active { display: block; }
@keyframes tfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.tquote blockquote {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 28px;
  font-style: italic;
}
.tquote cite {
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A78D6;
  font-weight: 600;
}
.tdots {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 40px;
}
.tdot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(138,120,214,0.25);
  border: none; cursor: pointer; padding: 0;
  transition: background 0.3s, transform 0.3s;
}
.tdot.active {
  background: #8A78D6;
  transform: scale(1.25);
}

/* =============================================================================
   footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.55); padding: 44px 0 52px; }
.site-footer .footrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.site-footer .fmark { display: inline-flex; align-items: center; gap: 11px; }
.site-footer .fmark .word { font-family: var(--serif); font-weight: 800; font-size: 20px; color: #fff; letter-spacing: -0.01em; }
.site-footer .fmark .word span { font-weight: 500; opacity: 0.6; }
.site-footer .copy { font-size: 12px; color: rgba(255,255,255,0.4); }
.site-footer .disc { font-size: 11px; line-height: 1.55; color: rgba(255,255,255,0.38); max-width: 92ch; }

/* =============================================================================
   PROGRESS RAIL (left side, desktop)
   ============================================================================= */
.rail {
  position: fixed; left: 30px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.rail.show { opacity: 1; pointer-events: auto; }
.rail a { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.rail .tick { width: 9px; height: 9px; border-radius: 50%; background: rgba(61,46,110,0.30); transition: all 0.3s var(--ease); }
.rail .rlab { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-quiet); opacity: 0; transform: translateX(-6px); transition: all 0.3s var(--ease); white-space: nowrap; }
.rail a:hover .rlab { opacity: 1; transform: none; }
.rail a.active .tick { background: var(--violet); transform: scale(1.45); }
.rail a.active .rlab { opacity: 1; transform: none; color: var(--eggplant); }

/* Background-tone contrast — JS samples the section luminance behind the rail
   and sets tone-light / tone-medium / tone-dark so ticks + labels stay legible
   on every background (light off-white/lavender → dark ink; violet → light ink). */
.rail.tone-medium .tick { background: rgba(61,46,110,0.46); }
.rail.tone-medium .rlab { color: var(--eggplant-soft); }
.rail.tone-dark .tick { background: rgba(255,255,255,0.5); }
.rail.tone-dark .rlab { color: rgba(255,255,255,0.92); }
.rail.tone-dark a.active .tick { background: #fff; }
.rail.tone-dark a.active .rlab { color: #fff; }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 960px) {
  body { font-size: 16px; }
  .wrap { padding: 0 26px; }
  /* Sticky bar hidden on mobile; bottom bar shown */
  .sticky-bar { display: none; }
  .sticky-btn-float { display: none; }
  /* In-hero CTA stays on mobile (top-right of the hero), scrolling with it
     until the mobile bottom bar takes over. */
  .hero-cta-float { top: 16px; right: 16px; padding: 8px 16px; font-size: 13px; }
  .sticky-mobile { display: block; }
  .hero { align-items: stretch; min-height: auto; padding: 78px 0 56px; text-align: center; }
  .hero-grid { display: flex; flex-direction: column; gap: 12px; }
  /* unwrap the text column so h1 / lede / scroll-cue can be reordered around the image */
  .hero-grid > div:first-child { display: contents; }
  .hero-grid h1 { order: 1; margin-bottom: 0; }
  .m-only { display: inline; }
  .hero-grid .hero-lede { order: 2; margin: 0 auto; max-width: 30ch; }
  .hero-cluster { order: 3; height: auto; min-height: 0; max-width: 500px; margin: -10px auto 0; }
  .hero-grid > div:first-child > div:last-child { order: 4; margin-top: -18px; display: flex; justify-content: center; }
  /* single hero artwork sits in normal flow on mobile (not absolutely positioned) */
  .hero-cluster .hero-diagram { position: static; width: 86%; max-width: 380px; margin: 0 auto; }
  .hero-cluster .hero-system-art { position: relative; width: 100%; max-width: 420px; margin: 0 auto; }
  .hub-grid { grid-template-columns: 1fr; gap: 48px; }
  .stations { grid-template-columns: 1fr; gap: 18px; max-width: 460px; margin: 0 auto; }
  #track .stations { grid-template-columns: 1fr; max-width: 460px; }
  /* let the map text breathe wider than the default wrap padding */
  .map .wrap { padding-left: 16px; padding-right: 16px; }
  .map .head { margin-bottom: 0; }
  /* bigger diagram (~20%) that fills the available width, with clearance above
     so the flipped Measure caption doesn't crowd the lede text */
  .diagram { max-width: 552px; margin-top: 44px; }
  .node { width: 72px; }
  .node .hexwrap { width: 72px; height: 81px; }
  .node .cap { width: 124px; margin-top: 9px; }
  .node .lab { font-size: 18px; }
  .node .sub { font-size: 12px; }
  .node-hub { width: 88px; }
  .node-hub .hexwrap { width: 88px; height: 99px; }
  .node-hub .lab { font-size: 17px; }
  .node-hub .sub { display: none; }
  .node-hub .cap { width: auto; white-space: nowrap; }
  .node-hub .ic > svg { width: 34px; height: 34px; }
  /* top node caption flips ABOVE the hex so it clears the central hub */
  .node.n-measure .cap { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 9px; }
  .rail { display: none; }
  .phase-badge { box-shadow: 0 0 0 7px var(--paper); }
  .tiers { grid-template-columns: 1fr; max-width: 440px; gap: 28px; }
  .tier .desc { min-height: 0; }
  .whatis-head { margin-bottom: 36px; }
  .cell-compare { max-width: 440px; }
  .symptoms { padding: 80px 0; }
  .symptoms-head { margin-bottom: 38px; }
  .symptom-cards { grid-template-columns: 1fr; gap: 26px; max-width: 360px; margin: 0 auto; }
  .symptom-card figcaption { text-align: center; padding-top: 16px; }
  .results { padding-bottom: 56px; }
  .results-grid { grid-template-columns: 1fr; min-height: 0; }
  .results-media { min-height: 340px; }
  .results-photo { inset: 18px; border-radius: 20px; }
  .results-thread { display: block; height: 44px; }
  .results-copy { padding: 40px 24px 36px; max-width: none; text-align: center; align-items: center; }
  .results-copy h2 { font-size: clamp(30px, 8vw, 42px); }
  .results-copy p { max-width: 36ch; }
  /* allow the closing line to wrap on mobile (desktop forces one line) */
  .why-conseq { text-wrap: wrap; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .map .wrap { padding-left: 12px; padding-right: 12px; }
  .hero { padding: 96px 0 70px; }
  .feat-list { grid-template-columns: 1fr; }
  .map .head p { font-size: 17px; }
}

/* =============================================================================
   TWEAK: density overrides
   ============================================================================= */
body.dense .thesis { padding: 70px 0; }
body.dense .map { padding: 70px 0 80px; }
body.dense .phase { padding: 48px 0; }
body.dense .hub { padding: 64px 0 70px; }
body.dense .results { min-height: clamp(480px, 70vh, 640px); }
body.dense .cta { padding: 84px 0 90px; }

body.comfy .thesis { padding: 150px 0; }
body.comfy .map { padding: 150px 0 160px; }
body.comfy .phase { padding: 96px 0; }
body.comfy .hub { padding: 130px 0 140px; }
body.comfy .results { min-height: clamp(640px, 90vh, 860px); }
body.comfy .cta { padding: 160px 0 170px; }

/* TWEAK: hide rail */
body.no-rail .rail { display: none !important; }