/** Shopify CDN: Minification failed

Line 458:0 Unexpected "}"

**/
/* =============================================================================
   HypoHero — App Landing (StoryBrand)  |  Miss Lizzy Wellness
   1:1 conversion of HypoHero-Landing-StoryBrand-standalone.html
   Fonts (@font-face) are loaded in sections/mlw-sb-nav.liquid via asset_url.
   ============================================================================= */
/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek-ext */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* greek */

/* vietnamese */

/* latin-ext */

/* latin */

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

: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: relative; padding: 30px 0 40px; }

/* 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 {
  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: 1; }

/* 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(--off-white);
}
.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: pretty; }
/* 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(--off-white) 16%, var(--off-white) 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;
}
.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);
}
/* 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 */
.sticky-btn-float {
  position: fixed; top: 28px; right: 40px; z-index: 201;
  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: 1;
}
.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; }
  .sticky-mobile { display: block; }
  body { padding-bottom: 120px; }
  .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(--off-white); }
  .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; }

/* HypoHero — App Trial v3. Apple/Swiss cadence: one headline, one line, one simple graphic.
   Extends roadmap-v2.css tokens. One type scale, one accent (violet). */

body{background:var(--off-white);color:var(--ink);font-family:var(--sans)}

/* ---------- Section shell ---------- */
:root{--pace:1}
body[data-hero] .hero-a,body[data-hero] .hero-b,body[data-hero] .hero-c,body[data-hero] .hero-d,body[data-hero] .hero-e,body[data-hero] .hero-f,body[data-hero] .hero-abc{display:none}
body[data-hero="working"] .hero-c,body[data-hero="working"] .hero-abc{display:block}
body[data-hero="working"] a.cta.hero-abc,body[data-hero="problem"] a.cta.hero-abc,body[data-hero="coach"] a.cta.hero-d,body[data-hero="problem2"] a.cta.hero-e,body[data-hero="problem3"] a.cta.hero-f{display:inline-flex}
body[data-hero="coach"] .hero-d{display:block}
body[data-hero="coach"] .gfx.hero-d{display:flex}
body[data-hero="problem2"] .hero-e{display:block}
body[data-hero="problem2"] .gfx.hero-e{display:flex}
body[data-hero="problem"] .hero-a,body[data-hero="problem"] .hero-abc{display:block}
body[data-hero="problem3"] .hero-f{display:block}
body[data-hero="problem3"] .gfx.hero-f{display:flex}
/* Page flow: restructured variant *//* Mobile preview stage */
#mobile-stage{display:none}
body[data-view="mobile"]>*:not(#tweaks-mount):not(#mobile-stage){display:none}
body[data-view="mobile"]{overflow:hidden}
body[data-view="mobile"] #mobile-stage{display:grid;place-items:center;position:fixed;inset:0;background:#E9E6F0;z-index:5}
body[data-view="mobile"] #mobile-stage iframe{width:390px;height:min(844px,94vh);border:0;border-radius:34px;background:#fff;box-shadow:0 26px 70px rgba(40,30,80,0.22)}
.flow-v2{display:none}
body[data-flow="v2"] .flow-v2{display:block}
body[data-flow="v2"] .trim-v2{display:none}
.sc{padding:calc(132px * var(--pace)) 24px;text-align:center}
.sc.paper{background:var(--paper)}
.sc.violet{background:linear-gradient(165deg,var(--violet) 0%,var(--violet-edge) 100%);color:#fff}
.wrap2{max-width:1060px;margin:0 auto;width:100%}

/* ---------- One type scale ---------- */
.sc h2{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;line-height:1.05;font-size:clamp(38px,5.5vw,62px);color:var(--ink);margin:0 auto;max-width:24ch;text-wrap:balance}
.sc h2 em{font-style:italic;font-weight:600;color:var(--violet)}
.sc.violet h2{color:#fff}
.sc.violet h2 em{color:rgba(255,255,255,0.62)}
.sc .lede{font-size:21px;line-height:1.55;color:var(--ink-soft);max-width:62ch;margin:24px auto 0;text-wrap:pretty}
.sc.violet .lede{color:rgba(255,255,255,0.85)}
/* ---------- Offer (heart of the page) ---------- */
.sc.offer .wrap2{max-width:1000px}
.sc.offer .offer-line{font-size:clamp(22px,2.6vw,28px);line-height:1.5;max-width:44ch;color:rgba(255,255,255,0.92)}
.sc.offer .offer-line + .offer-line{margin-top:32px}
.sc.offer .offer-gtd{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(30px,3.6vw,44px);color:#fff;margin:44px auto 0}
.why3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:64px;text-align:left}
.why3 .wcell h3{font-family:var(--serif);font-weight:600;font-style:italic;font-size:23px;line-height:1.25;color:#fff;margin:0 0 12px;text-wrap:balance}
.why3 .wcell p{font-size:17px;line-height:1.6;color:rgba(255,255,255,0.82);margin:0;text-wrap:pretty}
@media (max-width:880px){.why3{grid-template-columns:1fr;gap:36px;max-width:480px;margin:52px auto 0}}
/* ---------- Why different list ---------- */
.diffls{display:flex;flex-direction:column;gap:12px;width:100%;max-width:760px;text-align:left}
.drow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:18px 26px;border-radius:16px;background:var(--paper)}
.drow .dwhat{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);white-space:nowrap}
.drow .ddid{font-size:16px;color:var(--ink-quiet);text-align:right}
.drow.hh{background:linear-gradient(135deg,var(--violet) 0%,var(--violet-edge) 100%)}
.drow.hh .dwhat{color:#fff}
.drow.hh .ddid{color:rgba(255,255,255,0.9)}
@media (max-width:560px){.drow{flex-direction:column;gap:4px}.drow .ddid{text-align:left}}
.gfx{margin:calc(72px * var(--pace)) auto 0;display:flex;justify-content:center;width:100%}
.sc .kick{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);margin:0 0 20px}
.sc.violet .kick{color:rgba(255,255,255,0.72)}
/* ---------- Voice variants ---------- */
body[data-voice="modern"] h1,body[data-voice="modern"] h2,body[data-voice="modern"] h3,body[data-voice="modern"] .drow .dwhat,body[data-voice="modern"] .offer-gtd{font-family:var(--sans);font-weight:600;letter-spacing:-0.035em}
body[data-voice="modern"] h1 em,body[data-voice="modern"] h2 em,body[data-voice="modern"] h3 em,body[data-voice="modern"] .offer-gtd{font-style:normal}
body[data-voice="quiet"] h1 em,body[data-voice="quiet"] h2 em{color:inherit;font-style:italic;opacity:.62}
body[data-voice="quiet"] .sc h2{font-weight:500;letter-spacing:-0.015em;font-size:clamp(34px,4.4vw,52px)}
body[data-voice="quiet"] .why3 .wcell h3{font-style:normal;font-weight:500}

/* ---------- Story quotes (real blog comments) ---------- */
.sc.story .wrap2{max-width:1000px}
.sc.story h2{font-style:italic;max-width:none}
.sc.story .lede{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.5;color:var(--ink);max-width:56ch}
.sc.story .attr{margin-top:26px;font-family:var(--mono);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-quiet)}
/* ---------- Quote carousel ---------- */
.qcar-stage{display:grid;align-items:center}
.qcar-slide{grid-area:1/1;margin:0;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none;visibility:hidden}
.qcar-slide.is-active{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.qcar-dots{display:flex;justify-content:center;gap:10px;margin-top:calc(56px * var(--pace))}
.qcar-dots button{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:var(--lav-bot);cursor:pointer;transition:width .35s var(--ease),background .35s var(--ease)}
.qcar-dots button.on{width:30px;background:var(--violet)}
.qcar-dots button:hover{background:var(--violet)}
@media (prefers-reduced-motion:reduce){.qcar-slide{transition:none}}
/* split story: big line art on abstract blob, 1/3–2/3 */
.split2{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:center;max-width:1120px;margin:0 auto;text-align:left}
.split2 .split-art svg{width:100%;max-width:400px;height:auto;display:block}
.split2 .split-copy h2,.split2 .split-copy .lede{margin-left:0;margin-right:0}
.sc.story.split .split-copy .lede{max-width:52ch}
@media (max-width:880px){.split2{grid-template-columns:1fr;gap:44px;text-align:center}.split2 .split-art{max-width:300px;margin:0 auto}.split2 .split-copy .lede{margin:24px auto 0}}

/* ---------- Buttons ---------- */
.cta{display:inline-flex;align-items:center;justify-content:center;background:var(--eggplant);color:#fff;font-weight:600;font-size:17px;padding:17px 32px;border-radius:999px;text-decoration:none;transition:background .25s var(--ease),transform .25s var(--ease);box-shadow:0 12px 30px rgba(61,46,110,0.26)}
.cta:hover{background:#2F2256;transform:translateY(-2px);color:#fff}
.cta.light{background:#fff;color:var(--eggplant)}
.cta.light:hover{background:#f3eefb;color:var(--eggplant)}
.mini{margin-top:16px;font-size:14px;color:var(--ink-quiet)}
.sc.violet .mini{color:rgba(255,255,255,0.7)}

/* ---------- Hero ---------- */
.hero3{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;padding:96px 24px;text-align:center}
.hero3 .hero-logo{position:absolute;top:32px;left:36px;height:30px;width:auto}
@media (max-width:560px){.hero3 .hero-logo{top:22px;left:22px;height:24px}}
.hero3 .wrap2{max-width:1100px}
.hero3 h1{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;line-height:1.06;font-size:clamp(44px,6.2vw,92px);color:var(--eggplant);margin:0 auto;text-wrap:balance}
.hero3 h1 em{font-style:italic;color:var(--violet);font-weight:600}
.hero3 .lede{font-size:clamp(21px,2.4vw,28px);line-height:1.45;color:var(--eggplant-soft);margin:28px auto 0}
.hero3 .cta{margin-top:40px}
.hero3 .appname{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-quiet);margin-bottom:30px}
/* Coach hero: copy left, phone right */
body[data-hero="coach"] .hero3{gap:64px;max-width:1180px;margin:0 auto;align-items:center}
body[data-hero="coach"] .hero3 .wrap2{text-align:left;max-width:none;flex:1.05}
body[data-hero="coach"] .hero3 h1{margin-left:0;font-size:clamp(40px,4.8vw,68px)}
body[data-hero="coach"] .hero3 .lede{margin-left:0;max-width:44ch}
body[data-hero="coach"] .hero3 .mini{margin-left:0;text-align:left}
body[data-hero="coach"] .hero3 .gfx{flex:0 0 auto;margin:0;width:340px}
/* Problem 2 hero: same split layout as Coach */
body[data-hero="problem2"] .hero3{gap:64px;max-width:1180px;margin:0 auto;align-items:center}
body[data-hero="problem2"] .hero3 .wrap2{text-align:left;max-width:none;flex:1.05}
body[data-hero="problem2"] .hero3 h1{margin-left:0;font-size:clamp(40px,4.8vw,68px)}
body[data-hero="problem2"] .hero3 .lede{margin-left:0;max-width:44ch}
body[data-hero="problem2"] .hero3 .mini{margin-left:0;margin-top:28px;text-align:left}
body[data-hero="problem2"] .hero3 .gfx{flex:0 0 auto;margin:0;width:340px}
/* Self-recognition hero: same split layout */
body[data-hero="problem3"] .hero3{gap:64px;max-width:1180px;margin:0 auto;align-items:center}
body[data-hero="problem3"] .hero3 .wrap2{text-align:left;max-width:none;flex:1.05}
body[data-hero="problem3"] .hero3 h1{margin-left:0;font-size:clamp(38px,4.4vw,62px)}
body[data-hero="problem3"] .hero3 .lede{margin-left:0;max-width:46ch}
body[data-hero="problem3"] .hero3 .kick{margin-left:0;text-align:left}
body[data-hero="problem3"] .hero3 .mini{margin-left:0;margin-top:28px;text-align:left}
body[data-hero="problem3"] .hero3 .gfx{flex:0 0 auto;margin:0;width:340px}
body[data-hero="problem3"] .hero3 a.cta{white-space:nowrap}
@media (max-width:420px){body[data-hero="problem3"] .hero3 a.cta{font-size:15px;padding-left:22px;padding-right:22px}}
@media (max-width:880px){body[data-hero="problem3"] .hero3{flex-direction:column;gap:44px}body[data-hero="problem3"] .hero3 .wrap2{text-align:center}body[data-hero="problem3"] .hero3 h1,body[data-hero="problem3"] .hero3 .lede,body[data-hero="problem3"] .hero3 .kick,body[data-hero="problem3"] .hero3 .mini{margin-left:auto;margin-right:auto;text-align:center}}
/* Eight-day timeline */
.tline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1080px;margin:64px auto 0;text-align:left;counter-reset:none}
.tline .tstep{position:relative;padding:0 26px 0 0}
.tline .tstep::before{content:"";position:absolute;left:0;top:9px;width:100%;height:2px;background:rgba(94,74,170,0.16)}
.tline .tstep:last-child::before{width:20px}
.tline .tdot{position:relative;width:20px;height:20px;border-radius:50%;background:var(--violet);display:block;margin-bottom:26px}
.tline .tday{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);margin-bottom:10px}
.tline h3{font-size:21px;line-height:1.25;margin:0 0 10px}
.tline p{font-size:16px;line-height:1.6;color:var(--ink-quiet);margin:0;text-wrap:pretty}
.tline .tstep:last-child .tdot{box-shadow:0 0 0 7px rgba(138,120,214,0.18)}
@media (max-width:880px){.tline{grid-template-columns:1fr;gap:34px;margin-top:44px}.tline .tstep{padding:0 0 0 40px}.tline .tstep::before{left:9px;top:0;width:2px;height:100%}.tline .tstep:last-child::before{height:20px;width:2px}.tline .tdot{position:absolute;left:0;top:2px;margin:0}}
/* Report detail grid */
.rdetail{display:grid;grid-template-columns:repeat(2,1fr);gap:38px 54px;max-width:1000px;margin:60px auto 0;text-align:left}
.rdetail .rcell h3{font-size:21px;line-height:1.25;margin:0 0 10px}
.rdetail .rcell p{font-size:16px;line-height:1.6;color:var(--ink-quiet);margin:0;text-wrap:pretty}
.rd-foot{max-width:62ch;margin:52px auto 0}
@media (max-width:880px){.rdetail{grid-template-columns:1fr;gap:30px;margin-top:40px}}
@media (max-width:880px){body[data-hero="problem2"] .hero3{flex-direction:column;gap:44px}body[data-hero="problem2"] .hero3 .wrap2{text-align:center}body[data-hero="problem2"] .hero3 h1,body[data-hero="problem2"] .hero3 .lede{margin-left:auto;margin-right:auto}body[data-hero="problem2"] .hero3 .mini{text-align:center}}
@media (max-width:880px){body[data-hero="coach"] .hero3{flex-direction:column;gap:44px}body[data-hero="coach"] .hero3 .wrap2{text-align:center}body[data-hero="coach"] .hero3 h1,body[data-hero="coach"] .hero3 .lede{margin-left:auto;margin-right:auto}body[data-hero="coach"] .hero3 .mini{text-align:center}}
.phone.hero-phone{width:340px}
.app-ui{height:100%;background:#F4F1FA;text-align:left;padding:18px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.au-top{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--eggplant)}
.au-top b{font-family:var(--serif);font-weight:700}
.au-title{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-0.01em}
.au-center{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px}
.au-band{background:linear-gradient(165deg,var(--violet),var(--violet-edge));border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.au-band-l{font-family:var(--mono);font-size:8.5px;letter-spacing:0.14em;color:rgba(255,255,255,0.7)}
.au-band-d{font-family:var(--serif);font-weight:700;font-size:16px;color:#fff}
.au-spark{width:100%;height:30px;margin-top:6px}
.au-card{background:#fff;border-radius:16px;padding:20px 18px;box-shadow:0 4px 14px rgba(20,12,48,0.06);display:flex;flex-direction:column;gap:5px}
.au-k{font-family:var(--mono);font-size:8.5px;letter-spacing:0.14em;color:var(--violet);font-weight:500}
.au-card b{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink)}
.au-card p{font-size:11.5px;line-height:1.45;color:var(--ink-soft)}
.au-card p b{font-size:11.5px;font-family:var(--sans);font-weight:600}
.au-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.au-chips span{font-size:11px;font-weight:600;border-radius:999px;padding:4px 10px}
.au-chips .c1{color:#1E7D4F;background:#E3F4EA}
.au-chips .c2{color:#2563A8;background:#E3EEFA}
.au-chips .c3{color:#8A5A00;background:#FBEFD9}
.plan3{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:30px auto 0;max-width:640px}
.plan3 .step{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.03em;color:var(--eggplant-soft)}
.plan3 .step .n{width:22px;height:22px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-size:11px;flex-shrink:0}
.plan3 .arw{color:var(--ink-quiet)}
@media (max-width:640px){.plan3{gap:10px}}
.hero-photo3{width:420px;max-width:88%;aspect-ratio:4/5;border-radius:26px;overflow:hidden;box-shadow:0 34px 80px rgba(45,30,90,0.30)}
.hero-photo3 image-slot{width:100%;height:100%;display:block}

/* ---------- LABS: normal vs feel-good range ---------- */
.range{position:relative;width:min(560px,100%);margin:34px auto 0}
.range-track{position:relative;height:78px;border-radius:16px;background:var(--lav-top);display:flex;align-items:center;justify-content:flex-start;padding-left:26px}
.range-track .rl{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-quiet)}
.range-opt{position:absolute;top:0;bottom:0;left:60%;width:24%;border-radius:16px;background:var(--violet);display:flex;align-items:center;justify-content:center}
.range-opt .rl{color:#fff;font-family:var(--mono);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;font-weight:500;text-align:center;line-height:1.3}
.range-you{position:absolute;top:-52px;left:30%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.range-you .lab{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:0.08em;color:var(--eggplant);margin-bottom:8px}
.range-you .pin{width:3px;height:106px;background:var(--eggplant)}
.range-you .dot{position:absolute;top:26px;width:20px;height:20px;border-radius:50%;background:var(--eggplant);border:3px solid #fff;box-shadow:0 2px 8px rgba(20,12,48,0.25)}

/* ---------- TEMPERATURE: thermometer ---------- */
#swThermo{width:min(240px,72%);height:auto;display:block}

/* ---------- SYMPTOMS: battery ---------- */
.battery{display:flex;flex-direction:column;align-items:center;gap:22px}
.bat{position:relative;width:288px;height:136px;border:6px solid var(--eggplant);border-radius:20px;padding:12px}
.bat::after{content:"";position:absolute;right:-19px;top:50%;transform:translateY(-50%);width:14px;height:48px;background:var(--eggplant);border-radius:0 6px 6px 0}
.bat-fill{height:100%;width:16%;border-radius:9px;background:linear-gradient(90deg,var(--violet),var(--violet-edge))}
.bat-cap{font-family:var(--serif);font-weight:700;font-size:30px;color:var(--eggplant);letter-spacing:-0.02em}

/* ---------- Conversion T4 -> T3 (on violet band) ---------- */
.path{display:flex;align-items:center;justify-content:center;width:min(640px,100%);margin:0 auto}
.pnode{flex:0 0 auto;width:150px;height:150px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
.pnode .big{font-family:var(--serif);font-weight:700;font-size:44px;line-height:1;letter-spacing:-0.02em}
.pnode .cap{font-size:12.5px;line-height:1.35;max-width:12ch;opacity:0.9}
.pnode.a{background:rgba(255,255,255,0.16);color:#fff}
.pnode.b{background:#fff;color:var(--eggplant)}
.plink{flex:1;position:relative;height:5px;background:rgba(255,255,255,0.25);border-radius:3px;margin:0 8px;min-width:70px}
.plink .flow{position:absolute;inset:0;width:38%;background:#fff;border-radius:3px}
.plink .tag{position:absolute;left:50%;top:-40px;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:500;color:#fff;background:rgba(255,255,255,0.16);border-radius:999px;padding:6px 14px}

/* ---------- Three signals (how we're different) ---------- */
.trio{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;width:100%}
.tsig{display:flex;flex-direction:column;align-items:center;gap:16px;width:180px}
.tsig .disc{width:104px;height:104px;border-radius:50%;background:var(--lav-top);display:grid;place-items:center;color:var(--violet)}
.tsig .disc svg{width:46px;height:46px}
.tsig .nm{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--eggplant);letter-spacing:-0.01em}

/* ---------- Timer ring (2 min) ---------- */
.ring{width:212px;height:212px;border-radius:50%;background:conic-gradient(var(--violet) 0 12%,var(--lav-bot) 12% 100%);display:grid;place-items:center}
.ring .inner{width:170px;height:170px;border-radius:50%;background:var(--off-white);display:flex;flex-direction:column;align-items:center;justify-content:center}
.sc.paper .ring .inner{background:var(--paper)}
.ring .num{font-family:var(--serif);font-weight:700;font-size:52px;color:var(--eggplant);line-height:1;letter-spacing:-0.02em}
.ring .u{font-family:var(--mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-quiet);margin-top:6px}

/* ---------- App UI: progress screen ---------- */
.au-months{display:flex;gap:6px}
.au-months span{flex:1;text-align:center;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:0.04em;color:var(--ink-quiet);background:#fff;border-radius:999px;padding:5px 0;opacity:0.55}
.au-months .done{color:var(--violet);opacity:0.8}
.au-months .now{background:var(--violet);color:#fff;opacity:1}
.au-photo-row{display:flex;align-items:center;gap:10px;justify-content:center}
.au-photo{flex:1;display:flex;flex-direction:column;gap:6px;align-items:center}
.au-photo image-slot{width:100%;aspect-ratio:1;border-radius:12px;display:block}
.au-photo span{font-family:var(--mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-quiet)}
.au-score{display:flex;align-items:baseline;gap:5px}
.au-score b{font-family:var(--serif);font-weight:700;font-size:52px;color:var(--eggplant);line-height:1}
.au-score>span{font-family:var(--mono);font-size:12px;color:var(--ink-quiet)}
.au-rise{width:100%;height:auto;margin:8px 0 4px}

/* ---------- Arc bars (month 1/6/12) ---------- */
.arc{display:flex;align-items:flex-end;gap:34px;height:240px}
.arc-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;height:100%;width:92px}
.arc-bar .fill{width:100%;border-radius:14px;background:linear-gradient(180deg,var(--violet),var(--violet-edge))}
.arc-bar:first-child .fill{background:var(--lav-bot)}
.arc-bar:last-child .fill{background:linear-gradient(180deg,var(--eggplant),var(--violet-edge))}
.arc-bar span{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-quiet)}

/* ---------- Big number circle (14 days) ---------- */
.bignum{width:212px;height:212px;border-radius:50%;background:var(--eggplant);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 30px 60px rgba(61,46,110,0.28)}
.bignum .n{font-family:var(--serif);font-weight:700;font-size:84px;line-height:1;letter-spacing:-0.03em}
.bignum .u{font-family:var(--mono);font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.75);margin-top:4px}

/* ---------- Phone app mock ---------- */
.phone{width:300px;max-width:80%;aspect-ratio:9/18.5;background:#fff;border-radius:38px;padding:12px;box-shadow:0 34px 80px rgba(20,12,48,0.28),inset 0 0 0 2px var(--divider)}
.phone .screen{width:100%;height:100%;border-radius:28px;overflow:hidden;background:var(--off-white);display:block}
.phone image-slot{width:100%;height:100%;display:block}

/* ---------- Offer ---------- */
.offer3{max-width:500px;margin:56px auto 0;background:var(--paper);border-radius:26px;box-shadow:0 30px 70px rgba(20,12,48,0.18);padding:46px 42px 38px;text-align:left}
.offer3 .price{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.offer3 .price .p{font-family:var(--serif);font-weight:700;font-size:76px;line-height:1;letter-spacing:-0.02em;color:var(--eggplant)}
.offer3 .price .per{font-size:16px;color:var(--ink-soft)}
.offer3 .renew{font-size:14px;color:var(--ink-quiet);margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--divider)}
.offer3 ul{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:14px}
.offer3 li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:16px;color:var(--ink);line-height:1.45}
.offer3 li svg{margin-top:3px}
.offer3 .cta{display:flex;width:100%}
.offer3 .fine{text-align:center;font-size:13px;color:var(--ink-quiet);margin-top:16px;line-height:1.5}
/* ---------- Two-plan offer ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.plan{border:1.5px solid var(--divider);border-radius:18px;padding:20px 18px;background:#fff;position:relative;display:flex;flex-direction:column;gap:4px}
.plan.best{border-color:var(--violet);box-shadow:0 8px 24px rgba(138,120,214,.18)}
.plan .tagbest{position:absolute;top:-11px;left:18px;background:var(--violet);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:99px;padding:4px 10px}
.plan .amt{font-family:var(--serif);font-weight:700;font-size:42px;line-height:1;letter-spacing:-.02em;color:var(--eggplant)}
.plan .cyc{font-size:14px;color:var(--ink-soft)}
.plan .note{font-size:13px;color:var(--ink-quiet);margin-top:2px}
.compare{margin:28px 0 0;padding-top:24px;border-top:1px solid var(--divider)}
.compare h4{font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-quiet);margin:0 0 14px}
.compare .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--divider);font-size:15px;color:var(--ink-soft)}
.compare .row:last-child{border-bottom:0}
.compare .row b{font-weight:600;color:var(--ink);white-space:nowrap}
.compare .row.us{color:var(--ink)}
.compare .row.us span:first-child{font-weight:600}
.compare .row.us b{color:var(--violet)}
@media (max-width:560px){.plans{grid-template-columns:1fr}}

/* ---------- Founder ---------- */
.founder3{display:flex;flex-direction:column;align-items:center;gap:26px;max-width:640px;margin:0 auto}
.founder3 img{width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 20px 50px rgba(45,30,90,0.2)}
.founder3 .big{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.35;color:var(--ink);letter-spacing:-0.01em;text-wrap:pretty}
.founder3 .big b{color:var(--eggplant);font-weight:700}
.founder3 .sub{font-size:16px;color:var(--ink-soft);line-height:1.6}

/* ---------- FAQ ---------- */
.faq3{max-width:680px;margin:44px auto 0;text-align:left}
.faq3 details{border-top:1px solid var(--divider)}
.faq3 details:last-of-type{border-bottom:1px solid var(--divider)}
.faq3 summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:-0.01em}
.faq3 summary::-webkit-details-marker{display:none}
.faq3 summary .pl{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--violet);color:var(--violet);display:grid;place-items:center;font-size:17px;line-height:1;transition:transform .3s var(--ease)}
.faq3 details[open] summary .pl{transform:rotate(45deg)}
.faq3 .a{padding:0 4px 26px;font-size:16px;color:var(--ink-soft);line-height:1.6}

/* ---------- Footer ---------- */
.foot3{background:var(--ink);color:rgba(255,255,255,0.7);text-align:center;padding:48px 24px}
.foot3 .mark{font-family:var(--serif);font-weight:700;font-size:20px;color:#fff;margin-bottom:12px}
.foot3 .disc{max-width:620px;margin:14px auto 0;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,0.5)}

a{color:var(--violet)}
a:hover{color:var(--violet-edge)}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .sc{padding:96px 22px}
  .hero3{padding:84px 22px 72px}
  .gfx{margin-top:54px}
  .trio{gap:22px}
  .tsig{width:130px}
  .path{flex-direction:column}
  .plink{width:5px;height:56px;min-width:0;margin:22px 0}
  .plink .flow{width:100%;height:38%}
  .plink .tag{top:50%;left:auto;right:-12px;transform:translate(100%,-50%)}
  .offer3{padding:36px 26px 32px}
}

/* ---------- Data panel (charts / report mock) ---------- */
.panel{width:min(880px,100%);background:#fff;border-radius:26px;box-shadow:0 26px 70px rgba(20,12,48,0.13);padding:34px 34px 30px;text-align:left}
.sc.paper .panel{box-shadow:0 26px 70px rgba(20,12,48,0.10)}
.panel-head{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.panel-head svg{width:24px;height:24px;color:var(--violet);flex:0 0 auto}
.panel-head span{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);letter-spacing:-0.01em}
.panel-head .ph-note{margin-left:auto;font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-quiet)}
.panel-foot{margin:22px 0 0;font-size:15px;line-height:1.55;color:var(--ink-quiet);text-wrap:pretty}
.tchart{width:100%;height:auto;display:block;overflow:visible}
.tchart .grid{stroke:var(--divider);stroke-width:1;stroke-dasharray:4 6}
.tchart .axis{stroke:var(--divider);stroke-width:1.5}
.tchart .ylab,.tchart .xlab,.tchart .bandlab{font-family:var(--mono);font-size:14px;fill:var(--ink-quiet)}
.tchart .ylab{text-anchor:end}
.tchart .bandlab{font-size:12px;fill:var(--violet)}
.tchart .lines path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0.55}
.tchart .lines path:nth-child(2),.tchart .lines path:nth-child(5){opacity:1;stroke-width:4}
@media (max-width:640px){.tchart .ylab,.tchart .xlab{font-size:18px}.panel{padding:26px 20px 24px;border-radius:20px}}

/* report mock */
.rep-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:0 0 26px;margin-bottom:26px;border-bottom:1px solid var(--divider)}
.rep-when{display:flex;flex-direction:column;gap:4px}
.rep-when .d{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink)}
.rep-when .n{font-size:14px;color:var(--ink-quiet)}
.rep-btn{border:0;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--violet),var(--violet-edge));padding:15px 26px;border-radius:999px;box-shadow:0 10px 24px rgba(94,74,170,0.32)}
.symgrid{display:flex;flex-direction:column;gap:2px}
.symhead,.symrow{display:grid;grid-template-columns:minmax(120px,1.5fr) 76px 52px minmax(140px,2fr);gap:18px;align-items:center}
.symhead{padding-bottom:12px;border-bottom:1px solid var(--divider);margin-bottom:10px}
.symhead span{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-quiet)}
.symhead span:nth-child(3){text-align:center}
.symhead span:last-child{text-align:right}
.symrow{padding:11px 0}
.symrow .nm{font-size:17px;color:var(--ink)}
.symrow .spark{width:76px;height:22px}
.symchips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.symchips .chip{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:16px;background:var(--off-white)}
.symchips .ci{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.symchips .ci svg{width:20px;height:20px}
.symchips .cl{display:flex;flex-direction:column;gap:2px;min-width:0}
.symchips .cl b{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.25}
.symchips .cl span{font-family:var(--mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase}
.symchips .chip.bad{background:rgba(196,64,52,0.07)}
.symchips .chip.bad .ci{background:rgba(196,64,52,0.13);color:var(--sig-hi)}
.symchips .chip.bad .cl span{color:var(--sig-hi)}
.symchips .chip.good{background:rgba(45,140,95,0.08)}
.symchips .chip.good .ci{background:rgba(45,140,95,0.14);color:var(--sig-ok)}
.symchips .chip.good .cl span{color:var(--sig-ok)}
@media (max-width:820px){.symchips{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.symchips{grid-template-columns:1fr}}
.symrow .spark path{fill:none;stroke:var(--violet);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.symrow .avg{font-family:var(--serif);font-weight:600;font-size:19px;text-align:center;color:var(--violet-edge)}
.symrow .avg.flat{color:var(--eggplant)}
.symrow .bar{position:relative;height:12px;border-radius:999px;background:var(--lav-top)}
.symrow .bar::after{content:"";position:absolute;right:0;top:0;bottom:0;width:38%;border-radius:999px;background:var(--violet);opacity:0.28}
.symrow .bar i{position:absolute;top:50%;width:16px;height:16px;margin-left:-8px;transform:translateY(-50%);border-radius:50%;background:var(--violet);border:2.5px solid #fff;box-shadow:0 1px 5px rgba(20,12,48,0.22)}
.rep-read{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;padding-top:28px;border-top:1px solid var(--divider)}
.rep-read .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--violet);margin-bottom:9px}
.rep-read p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
@media (max-width:760px){.rep-read{grid-template-columns:1fr;gap:20px}.symhead,.symrow{grid-template-columns:1fr 60px 40px;gap:12px}.symhead span:last-child,.symrow .bar{display:none}}

/* ---------- Myth buster ---------- */
.myth{max-width:760px;margin:0 auto;text-align:left;background:#fff;border-radius:24px;padding:38px 40px;box-shadow:0 20px 54px rgba(20,12,48,0.10)}
.myth-k{font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);margin:0 0 18px}
.myth blockquote{margin:0 0 20px;font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.35;color:var(--eggplant);text-wrap:pretty}
.myth p:last-child{margin:0;font-size:17px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
@media (max-width:640px){.myth{padding:28px 24px}}

/* ---------- Two things to do ---------- */
.two-do{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:780px;margin:48px auto 0;text-align:left}
.two-do .td{background:var(--paper);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.sc.paper .two-do .td{background:#fff}
.two-do .n{width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:13px;margin-bottom:6px}
.two-do b{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);letter-spacing:-0.01em}
.two-do .s{font-size:16px;color:var(--ink-soft)}
@media (max-width:700px){.two-do{grid-template-columns:1fr}}

/* ---------- Story: video + testimonials ---------- */
.vidwrap{position:relative;width:min(880px,100%);aspect-ratio:16/9;border-radius:22px;overflow:hidden;box-shadow:0 30px 74px rgba(45,30,90,0.26)}
.vidwrap image-slot{width:100%;height:100%;display:block}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border-radius:50%;background:rgba(255,255,255,0.92);display:grid;place-items:center;color:var(--eggplant);box-shadow:0 12px 34px rgba(20,12,48,0.28);pointer-events:none}
.playbtn svg{width:34px;height:34px;margin-left:4px}
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1060px;margin:44px auto 0;text-align:left}
.tcard{margin:0;background:var(--paper);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column;gap:16px}
.sc.paper .tcard{background:#fff}
.tcard blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--ink);text-wrap:pretty}
.tcard figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-quiet)}
@media (max-width:820px){.tcards{grid-template-columns:1fr;max-width:520px}}

/* ---------- Plainly ---------- */
.plainly{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:1000px;margin:52px auto 0;text-align:left}
.plainly b{display:block;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.3;color:var(--ink);margin-bottom:10px;text-wrap:balance}
.plainly p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
@media (max-width:820px){.plainly{grid-template-columns:1fr;gap:26px;max-width:520px}}

.sc.violet .trio .disc{background:rgba(255,255,255,0.16);color:#fff}
.sc.violet .tsig .nm{color:#fff}
.ang-c .two-do{margin-top:56px}
.ang-c .panel + .wrap2{margin-top:0}

/* ---------- Report: before / after toggle + signal colors ---------- */
:root{--sig-hi:#C9453C;--sig-mid:#C98A2E;--sig-ok:#2F8F63}
.rep-toggle{display:inline-flex;gap:4px;padding:4px;background:var(--lav-top);border-radius:999px}
.rep-toggle button{border:0;cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--eggplant-soft);background:transparent;padding:11px 22px;border-radius:999px;transition:background .25s var(--ease),color .25s var(--ease)}
.rep-toggle button.on{background:#fff;color:var(--eggplant);box-shadow:0 2px 8px rgba(20,12,48,0.1)}
.rep-view{display:none}
.rep-view.on{display:block}
.rep-chip{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;padding:9px 16px;border-radius:999px}
.rep-chip.c-bad{color:var(--sig-hi);background:rgba(201,69,60,0.10)}
.rep-chip.c-good{color:var(--sig-ok);background:rgba(47,143,99,0.12)}
.rep-legend{margin-left:auto;display:flex;gap:16px}
.rep-legend .lg{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-quiet)}
.rep-legend .lg::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-quiet)}
.rep-legend .lg-hi::before{background:var(--sig-hi)}
.rep-legend .lg-ok::before{background:var(--sig-ok)}
.rep-legend .lg-lo::before{background:var(--lav-bot)}
.tchart .d-hi{fill:var(--sig-hi)}
.tchart .d-ok{fill:var(--sig-ok)}
.tchart .d-lo{fill:var(--lav-bot);stroke:#fff;stroke-width:1.5}
.symrow .spark.s-bad path{stroke:var(--sig-hi)}
.symrow .spark.s-mid path{stroke:var(--sig-mid)}
.symrow .spark.s-good path{stroke:var(--sig-ok)}
.symrow .avg.a-bad{color:var(--sig-hi)}
.symrow .avg.a-mid{color:var(--sig-mid)}
.symrow .avg.a-good{color:var(--sig-ok)}
.symrow .bar i.p-bad{background:var(--sig-hi)}
.symrow .bar i.p-mid{background:var(--sig-mid)}
.symrow .bar i.p-good{background:var(--sig-ok)}
.rep-read b.t-hi{color:var(--sig-hi)}
.rep-read b.t-ok{color:var(--sig-ok)}
@media (max-width:760px){.rep-legend{width:100%;margin:10px 0 0;gap:12px;flex-wrap:wrap}}

/* ---------- Simple explainer (lab moment vs daily pattern) ---------- */
.explain{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:900px;margin:60px auto 0}
.explain .ex{margin:0;background:rgba(255,255,255,0.12);border-radius:22px;padding:26px 26px 24px}
.explain svg{width:100%;height:auto;display:block}
.explain .ex-ax{stroke:rgba(255,255,255,0.32);stroke-width:2}
.explain .ex-path{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.explain .ex-dot{fill:#fff}
.explain .ex-dot.hi{fill:#F2A6A0}
.explain figcaption{margin-top:20px;display:flex;flex-direction:column;gap:7px;text-align:left}
.explain figcaption b{font-family:var(--serif);font-weight:600;font-size:21px;color:#fff}
.explain figcaption span{font-size:17px;line-height:1.5;color:rgba(255,255,255,0.78);text-wrap:pretty}
@media (max-width:760px){.explain{grid-template-columns:1fr;gap:20px;max-width:460px}}

/* ---------- Three signal cards (what makes it different) ---------- */
.sig3{max-width:1060px;margin:56px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}
.sigc{margin:0;background:#fff;border-radius:20px;padding:22px 24px 26px;display:flex;flex-direction:column;gap:18px;box-shadow:0 10px 30px rgba(20,12,48,0.07);border:1px solid rgba(94,74,170,0.10)}
.sigc.wide{border-color:transparent;background:linear-gradient(150deg,var(--violet) 0%,var(--violet-edge) 100%);box-shadow:0 22px 48px rgba(94,74,170,0.26)}
.sig-art{background:var(--lav-top);border-radius:14px;padding:16px 16px 12px}
.sigc.wide .sig-art{background:rgba(255,255,255,0.14)}
.sig-art svg{display:block;width:100%;height:auto}
.sigc.wide .sig-art svg circle[fill="var(--violet)"]{fill:#fff}
.sigc.wide .sig-art svg circle[fill="var(--eggplant)"]{fill:#FFD9A8}
.sigc.wide .sig-art svg line{stroke:rgba(255,255,255,0.4)}
.sig-note{display:block;margin-top:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-quiet)}
.sigc.wide .sig-note{color:rgba(255,255,255,0.75)}
.sig-pair{display:flex;justify-content:space-between}
.sig-pair em{font-style:normal;display:inline-flex;align-items:center;gap:6px}
.sig-pair .sw{width:10px;height:10px;border-radius:50%;display:inline-block}
.sig-pair .sw.band{background:#C9C7D2}
.sig-pair .sw.out{background:#fff;box-shadow:inset 0 0 0 2px #E0483C}
.tchart .tt{font-family:var(--mono);font-size:13px;letter-spacing:0.04em;fill:var(--ink-quiet)}
.sigc figcaption{display:flex;flex-direction:column;gap:8px}
.sigc figcaption b{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:-0.01em;color:var(--ink)}
.sigc figcaption p{font-size:15.5px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.sigc.wide figcaption b{color:#fff}
.sigc.wide figcaption p{color:rgba(255,255,255,0.9)}
@media (max-width:900px){.sig3{grid-template-columns:1fr}}
.cmp-row{display:grid;grid-template-columns:180px 1fr 96px;gap:28px;align-items:center;padding:24px 30px;border-radius:18px;background:#fff}
.cmp-what{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink-quiet);letter-spacing:-0.01em}
.cmp-gives{font-size:16.5px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.cmp-sig{display:flex;gap:8px;justify-self:end}
.cmp-sig i{width:14px;height:14px;border-radius:50%;background:transparent;border:1.5px solid var(--lav-bot)}
.cmp-sig i.on{background:var(--violet);border-color:transparent}
.cmp-row.hh{background:linear-gradient(135deg,var(--violet) 0%,var(--violet-edge) 100%);box-shadow:0 22px 48px rgba(94,74,170,0.28);padding:30px}
.cmp-row.hh .cmp-what{color:#fff;font-size:24px}
.cmp-row.hh .cmp-gives{color:rgba(255,255,255,0.92);font-size:17.5px}
.cmp-row.hh .cmp-sig i.on{background:#fff}
.cmp-key{margin:6px 30px 0;text-align:right;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-quiet)}
.cmp-key b{font-weight:500;color:var(--violet)}
@media (max-width:820px){.cmp-row,.cmp-key{grid-template-columns:1fr;gap:12px;padding:22px 22px}.cmp-sig{justify-self:start}}

.sc .lede.sub{font-size:24px;color:var(--ink);margin-top:18px;max-width:860px;text-wrap:pretty}
.sc.violet .lede.sub{color:rgba(255,255,255,0.92)}
.sc .lede.sub+.lede{margin-top:20px}

/* gauges: what the lab sees vs how you feel */
.gauges .gz{fill:none;stroke-width:15;stroke-linecap:round}
.gauges .gz-lo{stroke:#F0938B}
.gauges .gz-mid{stroke:rgba(255,255,255,0.34)}
.gauges .gz-hi{stroke:#8ADCB0}
.gauges .gn{stroke:#fff;stroke-width:6;stroke-linecap:round}
.gauges .gh{fill:#fff}
.gauges .gv{font-family:var(--mono);font-size:21px;letter-spacing:0.1em;font-weight:500}
.gauges .gv.ok{fill:#8ADCB0}
.gauges .gv.bad{fill:#F0938B}

/* sample report title bar */
.rep-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--divider)}
.rt-l{display:flex;align-items:baseline;gap:12px}
.rt-l b{font-family:var(--serif);font-weight:600;font-size:30px;letter-spacing:-0.02em;color:var(--ink)}
.rt-l span{font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--violet);background:var(--lav-top);padding:5px 11px;border-radius:999px}
.rep-toggle button{font-size:12.5px;padding:12px 24px}
.panel-head .rep-chip{margin-left:14px}
@media (max-width:640px){.rt-l b{font-size:24px}}

.tchart .alrt circle{fill:var(--sig-hi)}
.tchart .alrt .ab{stroke:#fff;stroke-width:3.2;stroke-linecap:round}
.tchart .alrt .ad{fill:#fff}
.tchart .alrt .al{stroke:var(--sig-hi);stroke-width:2;stroke-dasharray:3 4}

/* coaching suggestions */
.coach3{display:flex;flex-direction:column;gap:2px;background:linear-gradient(150deg,var(--violet) 0%,var(--violet-edge) 100%);border-radius:20px;padding:10px 8px}
.coach3 .cs{display:flex;gap:16px;align-items:center;padding:18px 20px}
.coach3 .csn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.22);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:16px}
.coach3 .cs b{display:block;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-0.01em;margin-bottom:7px}
.coach3 .cs p{margin:0;font-size:18px;line-height:1.45;color:#fff;text-wrap:pretty}
@media (max-width:560px){.coach3 .cs p{font-size:16px}}

/* =============================================================================
   Card-grid landing layout — App - Landing Page - Card Grid.html.
   Uses HypoHero tokens from roadmap-v2.css. Wide (1200px), card-driven,
   bare portrait app shots bleeding off the bottom edge of each card.
   ============================================================================= */
.nlay{background:var(--paper);color:var(--ink)}
.nl-wrap{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}

/* ---------- Top nav ---------- */
.nl-nav{background:var(--lav-top);padding:20px 0}
.nl-nav .nl-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nl-nav img{height:22px;width:auto;display:block}
.nl-nav .cta{font-size:16px;padding:14px 28px}

/* ---------- Hero ---------- */
.nl-hero{padding:56px 0 0;text-align:center;background:var(--lav-top)}
.nl-hero .nl-logo{height:30px;width:auto;margin:0 auto 60px;display:block}
.nl-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(42px,6vw,82px);line-height:1.02;letter-spacing:-.03em;color:var(--eggplant);margin:0 auto;max-width:none;text-wrap:balance}
.nl-hero h1 em{font-style:italic;color:var(--violet)}
.nl-hero .sub{font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:var(--eggplant-soft);max-width:64ch;margin:26px auto 0;text-wrap:pretty}
.nl-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.nl-ghost{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--eggplant);font-weight:600;font-size:17px;padding:16px 30px;border:1px solid var(--divider);border-radius:999px;text-decoration:none;transition:background .2s,border-color .2s}
.nl-ghost:hover{background:var(--lav-top);border-color:var(--violet);color:var(--eggplant)}
.nl-heroshot{margin:66px auto 0;max-width:1080px;border-radius:26px 26px 0 0;overflow:hidden;aspect-ratio:16/9;box-shadow:0 40px 90px -40px rgba(61,46,110,.45)}
.nl-heroshot image-slot{display:block;width:100%;height:100%}

/* Fanned screen stack — large centre screen, smaller ones receding each side */
.nl-fan{position:relative;margin:64px auto 0;max-width:1120px;overflow:hidden}
.nl-fan::before{content:"";position:absolute;left:50%;bottom:-40px;width:min(760px,86%);height:420px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(138,120,214,.30),transparent 68%);filter:blur(6px);pointer-events:none}
.nl-fan .fs{position:absolute;bottom:0;left:50%;background:#fff;border-radius:24px 24px 0 0;overflow:hidden;box-shadow:0 34px 70px -34px rgba(61,46,110,.55)}
.nl-fan .fs image-slot{display:block;width:100%;height:100%}
.nl-fan .f-c{width:min(760px,72%);aspect-ratio:16/10;height:auto;position:relative;left:auto;bottom:auto;margin:0 auto;transform:none;z-index:5}
.nl-fan .f-l1{width:min(600px,58%);aspect-ratio:16/10;height:auto;transform:translateX(calc(-50% - 330px));z-index:4;opacity:.94}
.nl-fan .f-r1{width:min(600px,58%);aspect-ratio:16/10;height:auto;transform:translateX(calc(-50% + 330px));z-index:4;opacity:.94}
.nl-fan .f-l2{width:min(520px,50%);aspect-ratio:16/10;height:auto;transform:translateX(calc(-50% - 560px));z-index:3;opacity:.6}
.nl-fan .f-r2{width:min(520px,50%);aspect-ratio:16/10;height:auto;transform:translateX(calc(-50% + 560px));z-index:3;opacity:.6}

/* ---------- Lede below the hero graphic ---------- */
.nl-lede{padding:72px 0 0;text-align:center;background:var(--lav,#F3EFFA)}
.nl-lede .sub{font-size:clamp(19px,2vw,24px);line-height:1.48;color:var(--ink-soft);max-width:60ch;margin:0 auto;text-wrap:pretty}

/* ---------- Trust strip ---------- */
.nl-trust{padding:44px 0 76px;text-align:center;background:var(--lav,#F3EFFA)}
.nl-trust p{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet);margin:0}

/* ---------- Stakes (StoryBrand) ---------- */
.nl-stakes{padding:104px 0 112px;text-align:center}
.nl-stakes h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.5vw,46px);line-height:1.1;letter-spacing:-.025em;color:var(--eggplant);margin:0 auto;max-width:32ch;text-wrap:balance}
.nl-stakes h2 em{font-style:italic;color:var(--violet)}
.nl-stakegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin:64px auto 0;text-align:left;max-width:1040px}
.sk-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sk-head svg{width:28px;height:28px;flex-shrink:0;color:var(--violet)}
.sk-head h3{font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0}
.nl-stakegrid p{font-size:17px;line-height:1.55;color:var(--ink-soft);margin:0;text-wrap:pretty}
.nl-stakes .nl-actions{margin-top:60px}
.sk-kicker{font-family:var(--serif);font-weight:600;font-size:clamp(21px,2.3vw,30px);line-height:1.24;letter-spacing:-.02em;color:var(--eggplant);margin:56px auto 0;max-width:36ch;text-wrap:balance}
.sk-kicker em{font-style:italic;color:var(--violet)}

/* ---------- Introducing (Guide) ---------- */
.nl-intro{background:var(--eggplant);color:#fff;padding:96px 0 104px;text-align:center;border-radius:32px;margin:0 32px}
.nl-intro .nl-wrap{max-width:1000px}
.in-kick{font-family:var(--sans);font-weight:600;font-size:17px;color:rgba(255,255,255,.82);margin:0}
.in-logo{height:52px;width:auto;margin:26px auto 0;display:block}
.in-media{position:relative;margin:48px auto 0;max-width:800px;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#F6F3FC;box-shadow:0 36px 80px -36px rgba(15,10,35,.7)}
.in-media image-slot{display:block;width:100%;height:100%}
.in-line{font-size:clamp(19px,2.1vw,26px);line-height:1.42;color:rgba(255,255,255,.86);max-width:74ch;margin:44px auto 0;text-wrap:pretty}
.in-line strong{color:#fff;font-weight:600}
.nl-intro .nl-actions{margin-top:38px}

/* ---------- Trusted by (social proof) ---------- */
.nl-trusted{background:var(--lav-top);padding:96px 0 76px;text-align:center;overflow:hidden}
.tb-logo{height:42px;width:auto;margin:0 auto;display:block}
.tb-kick{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1.12;letter-spacing:-.025em;color:var(--eggplant);margin:0}
.tb-rot{position:relative;height:1.15em;margin:6px auto 0;font-family:var(--serif);font-weight:600;font-size:clamp(26px,3.4vw,44px);line-height:1.15;letter-spacing:-.025em;color:var(--violet)}
.tb-rot span{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;white-space:nowrap}
.tb-rot span.on{opacity:1;transform:none}
.tb-line{font-size:clamp(15.5px,1.4vw,17.5px);line-height:1.55;color:var(--eggplant-soft);max-width:52ch;margin:26px auto 0;text-wrap:pretty}
.nl-trusted .nl-actions{margin-top:36px}
.tb-marquee{overflow:hidden;margin-top:72px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
/* One track holding TWO copies of the testimonials. Scrolling exactly -50%
   lands on a pixel-identical frame, so the loop is seamless and infinite. The
   gap is a per-figure margin (not flex gap) so -50% equals one whole set
   exactly. Single track => the copies can't drift out of sync. */
.tb-track{display:flex;width:max-content;animation:tb-scroll 90s linear infinite}
.tb-marquee:hover .tb-track{animation-play-state:paused}
@keyframes tb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tb-track figure{flex:0 0 320px;margin:0 18px 0 0;background:var(--paper);border-radius:20px;padding:26px 26px 24px;text-align:left;box-shadow:0 14px 34px -22px rgba(61,46,110,.4)}
.tb-track blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}
.tb-track figcaption{margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--eggplant-soft)}
@media (prefers-reduced-motion:reduce){.tb-track{animation:none}.tb-rot span{transition:none}}

/* ---------- With HypoHero you can ---------- */
.nl-can{padding:112px 0;background:var(--off-white)}
.nl-can h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.025em;color:var(--eggplant);margin:0 0 22px;text-align:center;text-wrap:balance}
.can-lede{font-size:clamp(17px,1.7vw,19.5px);line-height:1.5;color:var(--ink-soft);max-width:none;margin:0 auto 52px;text-align:center;text-wrap:pretty}
.nl-can h2 em{font-style:italic;color:var(--violet)}
.can-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.can-grid article{background:var(--paper);border:1px solid var(--divider);border-radius:26px;padding:38px 36px 40px}
.can-ic{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;color:var(--violet);margin-bottom:26px}
.can-ic::after{content:"";position:absolute;right:-2px;top:-4px;width:26px;height:26px;border-radius:50%;background:rgba(138,120,214,.24)}
.can-ic svg{width:30px;height:30px;position:relative;z-index:2}
.can-kick{font-family:var(--sans);font-weight:600;font-size:17px;color:var(--ink);margin:0}
.can-grid h3{font-family:var(--serif);font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1.1;letter-spacing:-.02em;color:var(--violet);margin:6px 0 22px;text-wrap:balance}
.can-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.can-grid li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}
.can-grid li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--violet)}
.can-grid li b{color:var(--eggplant);font-weight:600}

/* ---------- Plan: first 7 days ---------- */
.nl-plan{padding:112px 0;background:var(--paper);text-align:center}
.nl-plan h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.025em;color:var(--eggplant);margin:0 0 52px;text-wrap:balance}
.nl-plan h2 em{font-style:italic;color:var(--violet)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.plan-grid article{background:var(--off-white);border:1px solid var(--divider);border-radius:26px;padding:40px 34px 42px}
.pl-num{position:relative;display:inline-block;font-family:var(--serif);font-weight:700;font-size:52px;line-height:1;letter-spacing:-.03em;color:var(--violet)}
.pl-num::after{content:"";position:absolute;right:-16px;top:-2px;width:38px;height:38px;border-radius:50%;background:rgba(138,120,214,.24);z-index:-1}
.plan-grid h3{font-family:var(--serif);font-weight:600;font-size:clamp(22px,2vw,27px);line-height:1.14;letter-spacing:-.02em;color:var(--eggplant);margin:24px 0 20px;text-wrap:balance}
.plan-grid ul{list-style:none;margin:0;padding:0;display:inline-flex;flex-direction:column;gap:10px;text-align:left}
.plan-grid li{position:relative;padding-left:19px;font-size:16.5px;line-height:1.45;color:var(--ink-soft)}
.plan-grid li::before{content:"";position:absolute;left:2px;top:.58em;width:6px;height:6px;border-radius:50%;background:var(--violet)}
.nl-plan .nl-actions{margin-top:56px}
.nl-can .nl-actions{margin-top:52px}

/* ---------- What makes HypoHero different ---------- */
.nl-diff{padding:112px 0;background:var(--off-white);text-align:center}
.nl-diff h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.025em;color:var(--eggplant);margin:0 0 52px;text-wrap:balance}
.nl-diff h2 em{font-style:italic;color:var(--violet)}
.diff-tbl{display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;text-align:left}
.dh{padding:26px 34px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.015em;color:#fff;background:var(--eggplant)}
.dh img{height:30px;width:auto;display:block}
.dh-b{background:#33265E}
.dc{padding:30px 34px;font-size:17px;line-height:1.5;text-wrap:pretty}
.dc-a{background:var(--violet);color:#fff;font-weight:500;border-top:1px solid rgba(255,255,255,.28)}
.dc-b{background:#EBE4F7;color:var(--eggplant);border-top:1px solid rgba(61,46,110,.14)}
.nl-diff .nl-actions{margin-top:52px}

/* ---------- Effort comparison ---------- */
.nl-effort{padding:112px 0;background:var(--eggplant);text-align:center}
.nl-effort h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.025em;color:#fff;margin:0 0 52px;text-wrap:balance}
.nl-effort h2 em{font-style:italic;color:rgba(255,255,255,.6)}
.ef-tbl{display:grid;grid-template-columns:1.25fr 1fr 1fr;text-align:left;border-radius:24px;overflow:hidden}
.ef-b{position:relative;overflow:visible}
.ef-b:after{content:"";position:absolute;right:-15px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#fff no-repeat center/13px 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11'%3E%3Cpath d='M1 5.5h10M7.4 1.6 11.3 5.5 7.4 9.4' fill='none' stroke='%233D2E6E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");z-index:2}
.ef-h{padding:22px 26px;font-family:var(--serif);font-weight:600;font-size:19px;color:#fff;background:rgba(255,255,255,.13);text-align:center}
.ef-h:first-child{background:transparent}
.ef-l{padding:22px 26px;font-size:16.5px;font-weight:500;color:rgba(255,255,255,.92);background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.14)}
.ef-b{padding:22px 34px 22px 26px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.7);background:rgba(255,255,255,.09);border-top:1px solid rgba(255,255,255,.16);text-align:center}
.ef-a{padding:22px 26px;font-size:16px;line-height:1.45;color:#fff;font-weight:500;background:var(--violet);border-top:1px solid rgba(255,255,255,.28);text-align:center}
.ef-l:empty{background:transparent;border-top:0}
/* Dawn base.css hides all empty elements (div:empty{display:none}). The
   desktop comparison grid uses two empty cells as first-column spacers, so
   restore them on desktop or the whole grid shifts left one column. Scoped to
   min-width:721px so the mobile flex layout (which hides them by design) is
   untouched. */
@media (min-width:721px){.ef-tbl .ef-h:empty,.ef-tbl .ef-l:empty{display:block}}
.ef-sum{padding:34px 26px}
.ef-sum strong{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(32px,3.4vw,44px);line-height:1;letter-spacing:-.03em}
.ef-sum span{display:block;margin-top:10px;font-size:15px;opacity:.85}
.nl-effort .nl-actions{margin-top:52px}

/* ---------- Long-form letter ---------- */
.nl-letter{padding:112px 0;background:var(--lav-top);text-align:center}
.nl-letter h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,50px);line-height:1.08;letter-spacing:-.025em;color:var(--eggplant);margin:0 auto 48px;max-width:24ch;text-wrap:balance}
.nl-letter h2 em{font-style:italic;color:var(--violet)}
.lt-body{max-width:64ch;margin:0 auto;text-align:left}
.lt-body p{font-size:19px;line-height:1.62;color:var(--eggplant-soft);margin:0 0 22px;text-wrap:pretty}
.lt-body p.tight{font-weight:600;color:var(--eggplant);font-size:20px}
.lt-body p:last-child{margin-bottom:0}
.nl-letter .nl-actions{margin-top:48px}

/* ---------- Section shell ---------- */
.nl-sec{padding:112px 0}
.nl-sec.tint{background:var(--off-white)}
.nl-sechead{margin-bottom:52px;max-width:660px}
.nl-sechead h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.025em;color:var(--eggplant);margin:0;text-wrap:balance}
.nl-sechead h2 em{font-style:italic;color:var(--violet)}

/* ---------- Cards ---------- */
.nl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nl-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,#F6F3FC 0%,#EBE4F7 100%);border-radius:28px;padding:38px 34px 0;overflow:hidden;min-height:520px;transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s}
.nl-card:hover{transform:translateY(-5px);box-shadow:0 28px 60px -30px rgba(61,46,110,.42)}
.nl-card h3{font-family:var(--serif);font-weight:600;font-size:clamp(25px,2.3vw,31px);line-height:1.1;letter-spacing:-.02em;color:var(--eggplant);margin:0;text-wrap:balance}
.nl-card p{font-size:16px;line-height:1.55;color:var(--eggplant-soft);margin:14px 0 0;max-width:36ch;text-wrap:pretty}
.nl-shot{margin-top:auto;padding-top:36px;display:flex;justify-content:center}
.nl-shot image-slot{display:block;width:74%;aspect-ratio:9/17;border-radius:20px 20px 0 0;overflow:hidden;box-shadow:0 -14px 44px -20px rgba(61,46,110,.5)}

/* Wide card — copy left, portrait shot anchored bottom-right */
.nl-card.wide{grid-column:span 2;flex-direction:row;align-items:stretch;gap:40px;min-height:440px}
.nl-card.wide .nl-body{flex:1;align-self:center;padding-bottom:38px}
.nl-card.wide h3{font-size:clamp(28px,2.8vw,40px)}
.nl-card.wide p{font-size:17px;max-width:40ch}
.nl-card.wide .nl-shot{flex:0 0 52%;padding-top:44px;align-items:flex-end}
.nl-card.wide .nl-shot image-slot{width:100%;aspect-ratio:16/10;border-radius:16px 16px 0 0}

/* Deep card — one eggplant moment for contrast */
.nl-card.deep{background:linear-gradient(165deg,var(--violet) 0%,var(--violet-edge) 100%)}
.nl-card.deep h3{color:#fff}
.nl-card.deep p{color:rgba(255,255,255,.82)}
.nl-card.deep .nl-shot image-slot{box-shadow:0 -14px 44px -18px rgba(26,23,48,.6)}

/* ---------- Member story ---------- */
.nl-story{background:var(--eggplant);color:#fff;padding:112px 0}
.nl-storygrid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.nl-story blockquote{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(26px,3.1vw,42px);line-height:1.22;letter-spacing:-.02em;margin:0;color:#fff;text-wrap:pretty}
.nl-story .who{margin:28px 0 0;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.nl-storyshot{border-radius:26px;overflow:hidden;aspect-ratio:4/5}
.nl-storyshot image-slot{display:block;width:100%;height:100%}
.nl-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.nl-quotes div{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:26px 26px 24px}
.nl-quotes p{margin:0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);text-wrap:pretty}
.nl-quotes span{display:block;margin-top:16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---------- Pricing ---------- */
.nl-price{background:linear-gradient(180deg,var(--lav-top) 0%,var(--lav-bot) 100%);padding:120px 0;text-align:center}
.nl-price h2{font-family:var(--serif);font-weight:600;font-size:clamp(36px,5.2vw,64px);line-height:1.03;letter-spacing:-.03em;color:var(--eggplant);margin:0}
.nl-price h2 em{font-style:italic;color:var(--violet)}
.pr-lede{font-size:18px;line-height:1.5;color:var(--eggplant-soft);max-width:46ch;margin:20px auto 0;text-wrap:pretty}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:940px;margin:44px auto 0;align-items:start}
.pr-card{display:flex;flex-direction:column;background:#fff;border-radius:28px;padding:38px 36px 34px;text-align:left;box-shadow:0 24px 60px rgba(61,46,110,.13)}
.pr-card.is-feature{outline:2px solid var(--violet);outline-offset:-2px}
.pr-top{display:flex;align-items:center;gap:12px}
.pr-top h3{font-family:var(--serif);font-weight:600;font-size:26px;color:var(--eggplant);margin:0}
.pr-badge{font-size:13px;font-weight:700;color:var(--violet);border:1.5px solid var(--violet);border-radius:999px;padding:5px 12px}
.pr-was{margin:18px 0 0;font-size:17px;font-weight:600;color:var(--eggplant-soft);text-decoration:line-through}
.pr-amt{display:flex;align-items:baseline;gap:8px;margin:10px 0 0;color:var(--eggplant)}
.pr-amt sup{font-size:24px;font-weight:700;align-self:flex-start;margin-top:10px}
.pr-amt strong{font-size:58px;font-weight:700;letter-spacing:-.03em;line-height:1}
.pr-amt span{font-size:26px;font-weight:600}
.pr-bill{margin:12px 0 0;font-size:15.5px;font-weight:600;color:var(--eggplant)}
.pr-desc{margin:16px 0 0;font-size:16.5px;line-height:1.55;color:var(--eggplant-soft);text-wrap:pretty}
.pr-cta{display:block;text-align:center;margin:28px 0 0}
.pr-card .pr-bill{margin-bottom:0}
.pr-card .pr-cta{margin-top:auto;margin-top:28px}
.pr-list{list-style:none;display:grid;gap:13px;margin:28px 0 0;padding:0}
.pr-list li{position:relative;padding-left:30px;font-size:16px;line-height:1.45;color:var(--eggplant)}
.pr-list li:before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--violet);background:no-repeat center/10px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.2' fill='none' stroke='%238A78D6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pr-guar{display:block;max-width:560px;margin:36px auto 0;padding:18px 28px;border-radius:16px;background:rgba(255,255,255,.62);font-size:16px;line-height:1.55;color:var(--eggplant);text-align:center;text-wrap:pretty}
.pr-guar strong{font-weight:700}
.pr-fine{margin:32px auto 0;max-width:56ch;text-align:center;font-size:13px;line-height:1.5;color:var(--eggplant-soft)}

/* ---------- Responsive ---------- */
@media (max-width:1040px){
  .nl-grid{grid-template-columns:repeat(2,1fr)}
  .nl-card{min-height:460px}
  .nl-card.wide{grid-column:span 2;flex-direction:column;gap:0}
  .nl-card.wide .nl-body{align-self:auto;padding-bottom:0}
  .nl-card.wide .nl-shot{flex:none;padding-top:36px}
  .nl-card.wide .nl-shot image-slot{width:78%}
  .nl-storygrid{grid-template-columns:1fr;gap:44px}
  .nl-storyshot{max-width:420px}
  .nl-fan{height:auto}
  .nl-fan .f-l1{transform:translateX(calc(-50% - 260px))}
  .nl-fan .f-r1{transform:translateX(calc(-50% + 260px))}
  .nl-fan .f-l2{transform:translateX(calc(-50% - 440px))}
  .nl-fan .f-r2{transform:translateX(calc(-50% + 440px))}
}
@media (max-width:720px){
  .nl-wrap{padding:0 20px}
  .nl-nav{padding:16px 0}
  .nl-nav img{height:19px}
  .nl-nav .cta{font-size:15px;padding:12px 20px}
  .nl-hero{padding:44px 0 0}
  .nl-hero .nl-logo{margin-bottom:42px}
  .nl-hero h1{font-size:34px!important;line-height:1.08}
  .nl-hero .sub{font-size:17px;margin-top:20px}
  .nl-lede{padding:44px 0 0}
  .nl-lede .sub{font-size:17px}
  .nl-trust{padding-bottom:56px}
  .nl-heroshot{margin-top:48px;border-radius:20px 20px 0 0}
  .nl-fan{height:auto;margin-top:44px}
  .nl-fan .f-c{width:84%}
  .nl-fan .f-l1,.nl-fan .f-r1{width:70%}
  .nl-fan .f-l1{transform:translateX(calc(-50% - 44%))}
  .nl-fan .f-r1{transform:translateX(calc(-50% + 44%))}
  .nl-fan .f-l2,.nl-fan .f-r2{display:none}
  .nl-sec{padding:76px 0}
  .nl-sechead{margin-bottom:36px;max-width:none}
  .nl-grid{grid-template-columns:1fr;gap:18px}
  .nl-card,.nl-card.wide{grid-column:span 1;min-height:0;padding:32px 26px 0}
  .nl-card p{max-width:none}
  .nl-shot image-slot{width:66%}
  .nl-card.wide .nl-shot image-slot{width:100%}
  .nl-quotes{grid-template-columns:1fr;margin-top:44px}
  .nl-stakes{padding:72px 0 76px}
  .nl-stakegrid{grid-template-columns:1fr;gap:34px;margin-top:44px}
  .nl-stakes h2{max-width:none}
  .nl-stakes .nl-actions{margin-top:44px}
  .sk-kicker{margin-top:40px;max-width:none}
  .nl-story{padding:80px 0}
  .nl-price{padding:76px 0}
  .pr-grid{grid-template-columns:1fr;gap:18px;margin-top:32px}
  .pr-card{padding:28px 24px 26px;border-radius:22px}
  .pr-amt strong{font-size:48px}

  .nl-can{padding:76px 0}
  .nl-can h2{margin-bottom:16px}
  .can-lede{font-size:17px;margin-bottom:34px;max-width:none}
  .can-grid{grid-template-columns:1fr;gap:18px}
  .can-grid article{padding:30px 26px 32px}
  .nl-plan{padding:76px 0}
  .nl-plan h2{margin-bottom:34px}
  .plan-grid{grid-template-columns:1fr;gap:18px}
  .plan-grid article{padding:32px 26px 34px}
  .nl-plan .nl-actions,.nl-can .nl-actions{margin-top:38px}
  .nl-diff{padding:76px 0}
  .nl-diff h2{margin-bottom:34px}
  .diff-tbl{border-radius:18px}
  .dh{padding:18px 20px;font-size:18px}
  .dh img{height:22px}
  .dc{padding:22px 20px;font-size:15.5px}
  .nl-diff .nl-actions{margin-top:38px}
  .nl-effort,.nl-letter{padding:76px 0}
  .nl-effort h2,.nl-letter h2{margin-bottom:34px}
  .nl-letter h2{max-width:none}
  .ef-tbl{display:flex;flex-direction:column;gap:8px;border-radius:0;overflow:visible}
  .ef-h{display:none}
  .ef-l{background:none;border:0;padding:0 2px 2px;margin-top:18px;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:-.02em;color:#fff}
  .ef-l:first-of-type{margin-top:0}
  .ef-l:empty{display:none}
  .ef-b,.ef-a{text-align:left;border:0;border-radius:14px;padding:13px 16px;font-size:15.5px;line-height:1.4}
  .ef-b{background:rgba(255,255,255,.08);color:rgba(255,255,255,.62)}
  .ef-b:after{display:none}
  .ef-b::before,.ef-a::before{display:block;font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px;opacity:.6}
  .ef-b::before{content:"Labs alone"}
  .ef-a::before{content:"With HypoHero"}
  .ef-sum{text-align:center;padding:22px 16px;margin-top:10px}
  .ef-sum::before{display:none}
  .lt-body p{font-size:17px}
  .nl-effort .nl-actions,.nl-letter .nl-actions{margin-top:38px}
  .nl-trusted{padding-top:64px;padding-bottom:56px}
  .tb-kick{margin-top:0}
  .tb-line{font-size:15.5px;margin-top:22px;max-width:none}
  .tb-marquee{margin-top:52px}
  .tb-track figure{flex-basis:264px}
  .nl-intro{margin:0 14px;border-radius:22px;padding:64px 0 72px}
  .in-logo{height:38px;margin-top:20px}
  .in-media{margin-top:34px;border-radius:14px}
  .in-line{font-size:18px;margin-top:32px;max-width:none}
  .nl-actions .cta,.nl-actions .nl-ghost{width:100%}
}

/* ---------- Before / after coaching report ---------- */
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:44px}
.ba{background:var(--eggplant);border-radius:22px;padding:26px 26px 24px;margin:0;color:#fff}
.ba figcaption{display:flex;flex-direction:column;gap:7px}
.ba-kick{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ba figcaption h3{font-family:var(--serif);font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:#fff;text-wrap:pretty}
.ba-plot{margin-top:18px}
.ba .rplot{position:relative;aspect-ratio:300/240;height:auto}
.ba .zl{position:absolute;left:0;right:0;text-align:center;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.17);z-index:4;pointer-events:none}
.ba .zl.mid{color:rgba(255,255,255,.3)}
.ba .rsvg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.ba .pill{z-index:5;position:absolute;top:2px;width:17px;height:17px;margin-left:-8.5px;border-radius:50%;background:#3D2E6E;border:1.5px solid rgba(255,255,255,.75);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.ba .pill::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:5.6px;border-radius:99px;background:#fff;transform:translate(-50%,-50%) rotate(-32deg)}
.ba .pill::after{content:"";position:absolute;left:50%;top:50%;width:1.3px;height:5.6px;background:rgba(61,46,110,.75);transform:translate(-50%,-50%) rotate(-32deg)}
.ba-read{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);text-wrap:pretty}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr;gap:18px}.ba{padding:20px}}

/* ---------- Hero AI mock ---------- */
.nl-ai{padding:96px 0;background:var(--lav,#F3EFFA)}
.nl-ai h2{text-align:center}
.ai-win{max-width:900px;margin:40px auto 0;background:var(--paper,#fff);border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -34px rgba(15,10,35,.45)}
.ai-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 22px;border-bottom:1px solid var(--divider,#E8E0F4)}
.ai-mark{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ai-nav{display:flex;gap:22px;font-size:13.5px;font-weight:500;color:var(--ink-quiet)}
.ai-nav .on{color:var(--violet-deep);font-weight:600}
.ai-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--eggplant));flex:none}
.ai-body{padding:26px 26px 24px;display:flex;flex-direction:column;gap:18px}
.ai-q{align-self:flex-end;max-width:70%;background:var(--eggplant);color:#fff;font-size:15px;line-height:1.45;border-radius:16px 16px 4px 16px;padding:13px 18px;margin:0}
.ai-a{background:#FAF8FE;border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:13px}
.ai-kick{margin:0;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--violet-deep)}
.ai-a p{font-family:var(--serif);font-size:17.5px;line-height:1.52;color:var(--ink);margin:0;text-wrap:pretty}
.ai-a .ai-note{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-soft);padding-top:12px;border-top:1px solid var(--divider,#E8E0F4)}
.ai-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.ai-chips span{font-size:13px;color:var(--ink-soft);background:#F1EDFA;border-radius:99px;padding:9px 16px}
@media(max-width:760px){.nl-ai{padding:64px 0}.ai-nav{display:none}.ai-q{max-width:88%}.ai-a p{font-size:16px}}

.brow{max-width:1000px;margin:44px auto 0;border-radius:18px;overflow:hidden;background:var(--paper,#fff);box-shadow:0 40px 90px -40px rgba(15,10,35,.5)}
.brow-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#EFEBF7;border-bottom:1px solid var(--divider,#E8E0F4)}
.brow-dots{display:flex;gap:7px}
.brow-dots i{width:11px;height:11px;border-radius:50%;background:#D3CBE6}
.brow-url{flex:1;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-quiet);background:#fff;border-radius:99px;padding:6px 14px;max-width:280px;margin:0 auto}
.brow-shot{display:block;width:100%;height:auto}
@media(max-width:760px){.brow{margin-top:30px;border-radius:12px}}

/* -----------------------------------------------------------------------------
   CTA button color hardening.
   The bundled CSS also carries an unrelated section-style ".cta" (with a
   @media(max-width:960px){.cta{background:#fff}} rule), and the live store runs
   apps that inject global styles which can grey out a class as common as .cta.
   Reassert the button colors with higher specificity (.nlay a.cta) + !important
   so buttons keep their intended fill everywhere. All hover states mirrored so
   hover still works.
   --------------------------------------------------------------------------- */
.nlay a.cta{background:var(--eggplant)!important;background-image:none!important;color:#fff!important;opacity:1!important;filter:none!important}
.nlay a.cta:hover{background:#2F2256!important;color:#fff!important}
.nlay a.cta.light{background:#fff!important;background-image:none!important;color:var(--eggplant)!important;opacity:1!important;filter:none!important}
.nlay a.cta.light:hover{background:#f3eefb!important;color:var(--eggplant)!important}

/* -----------------------------------------------------------------------------
   Hero graphic + Introducing walkthrough (iframe animations, new in v2).
   Hero graphic: fixed 16/10 (desktop) / 43/69 portrait (mobile).
   Walkthrough: full-width, height driven by its own content via the resizer
   script in the Introducing section.
   --------------------------------------------------------------------------- */
.nl-heroframe{position:relative;margin:32px auto 0;max-width:1120px;aspect-ratio:16/10;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(15,10,35,.55);background:#F1EEF7}
/* The iframe fades in only after the animation has unpacked into its card
   layout (JS adds .is-ready). Until then it is invisible and the poster
   placeholder underneath shows — hiding the bundle's loading overlay and the
   layout flash. JS off => it just stays hidden and the poster remains. */
.nl-heroframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .45s ease}
.nl-heroframe.is-ready iframe{opacity:1}
.nl-heroframe-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.in-walk{background:#fff;max-width:1136px;aspect-ratio:auto;height:auto}
.in-walk iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:720px){
  /* Mobile shows the static poster only — the live animation cannot size
     reliably inside an iframe on iOS, so on phones we serve a clean purple
     portrait card and skip the embed entirely. Desktop keeps the animation. */
  .nl-heroframe{margin:28px auto 0;border-radius:18px;aspect-ratio:43/69;max-width:460px;background:#3D2E6E;overflow:hidden}
  .in-walk{aspect-ratio:auto}
  .nl-heroframe iframe{display:none}
  .nl-heroframe-poster{display:block;width:100%;height:100%;object-fit:cover;opacity:1}
}

/* ─── Hide the Stamped rewards widget (this page only) ────────────────
   The store's "Rewards" launcher (the Stamped rewards widget, sometimes
   called the Gorgias/rewards widget) should not appear on this landing page.
   This stylesheet only loads on the app-landing-storybrand template, so these
   rules are page-scoped. #stamped-rewards-init wraps the launcher + modal;
   display:none !important beats the widget's inline display:block. */
#stamped-rewards-init,
.stamped-rewards-init,
.stamped-rewards-launcher,
.stamped-rewards-base { display: none !important; }