/* ─── SCROLL PROGRESS ─── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 200;
  transition: width 0.1s linear;
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0d14;
  --bg2: #12121f;
  --bg3: #1a1a2e;
  --accent: #b48cf2;
  --accent2: #7ec8a9;
  --text: #f0eef8;
  --text-muted: #9994b8;
  --footer-muted: #b7b2d6;
  --bone: #c8a97e;
  --red: #ff4466;
  --radius: 16px;
  /* "Expo out" curve — fast start, long soft settle. Same shape used by most
     premium product sites (Linear, Stripe, Apple) for anything that should
     feel considered rather than mechanical. Used everywhere below instead of
     plain "ease" so the whole page moves with one consistent personality. */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: 0.35s var(--ease-premium);

  /* Three typefaces doing three different jobs, instead of one system font
     doing everything: a serif for headlines (warmth, editorial weight), a
     clean grotesk for reading, and a mono for anything that's a number,
     label, or timestamp (ties back to the "documented, precise" premise
     of the whole site). */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Layered gray scale instead of a single --text-muted doing every job of
     secondary text — gives real hierarchy between "important body copy" and
     "quiet metadata" rather than everything reading at the same weight. */
  --ink-1: #f8f7fb;  /* headlines, primary emphasis */
  --ink-2: #d7d3e6;  /* readable body copy */
  --ink-3: #9994b8;  /* secondary / muted (was --text-muted) */
  --ink-4: #726d8f;  /* tertiary / quiet metadata */
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-feature-settings: 'ss01' 1, 'ss02' 1;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Faint film-grain over the whole page. Fixed + pointer-events:none so it
   never interferes with scrolling or taps, just adds texture instead of
   flat digital-looking color fields. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 250;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scroll-triggered heading reveal — a soft upward wipe instead of a plain
   fade, used on every section h2 (and the consult page h1). is-revealed is
   toggled by IntersectionObserver in script.js. */
.reveal-heading {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease-premium);
}

.reveal-heading.is-revealed { clip-path: inset(0 0 0% 0); }

/* ─── NAV ─── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(13, 13, 20, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(180, 140, 242, 0.1);
  will-change: transform;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-logo {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-decoration: none;
}

.nav-countdown {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid rgba(180, 140, 242, 0.25);
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Compact circular icon button instead of a "Follow on Instagram" text
   pill — the text version was the actual cause of the nav overflowing on
   phone widths. A fixed-size icon can't overflow regardless of screen
   size, so the countdown badge no longer needs to be hidden on mobile
   either (removed that compromise, there's room for everything now). */
.nav-ig {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--text-muted);
  border: 1px solid rgba(180, 140, 242, 0.3);
  border-radius: 50%;
  transition: var(--transition);
}

.nav-ig:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.nav-ig img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ─── JUMP NAV ─── */
.jump-nav {
  position: sticky;
  top: 64px; /* corrected by script.js to the real nav height, then held constant */
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 10px 20px;
  margin-top: 64px; /* corrected by script.js to the real nav height */
  background: linear-gradient(180deg, var(--bg) 75%, transparent);
  overflow-x: auto;
  scrollbar-width: none;
  /* Hide/show on scroll animates via transform (set inline by script.js),
     not top, so it never forces a layout recalculation mid-scroll. */
  transition: transform 0.3s var(--ease-premium);
  will-change: transform;
}

.jump-nav::-webkit-scrollbar { display: none; }

.jump-nav__pill {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.2);
  border-radius: 100px;
  padding: 9px 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.3s var(--ease-premium), color 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
}

.jump-nav__pill:hover { border-color: rgba(180, 140, 242, 0.5); color: var(--text); }

.jump-nav__pill.is-active {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}

.jump-nav__pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ─── HERO ─── */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 24px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 60%, rgba(100, 60, 180, 0.18) 0%, transparent 70%),
              radial-gradient(ellipse at 80% 20%, rgba(126, 200, 169, 0.08) 0%, transparent 50%);
}

/* Giant ghost numeral behind the hero copy — the target height, quietly
   present before you've even read why it matters. A common premium-editorial
   trick: one oversized, barely-there typographic element instead of a stock
   photo or gradient blob. */
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: min(60vw, 480px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(180, 140, 242, 0.14);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero-content { position: relative; z-index: 1; }

.hero-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.7s 0.2s forwards;
}

.hero-title {
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s 0.4s forwards;
}

.accent { color: var(--accent); }

.hero-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 36px;
  opacity: 0;
  animation: fadeUp 0.8s 0.6s forwards;
}

/* ─── COUNTDOWN ─── */
.countdown {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 40px;
  opacity: 0;
  animation: fadeUp 0.8s 0.8s forwards;
}

.countdown-block {
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.2);
  border-radius: 12px;
  padding: 14px 18px;
  min-width: 68px;
  text-align: center;
}

.countdown-block span {
  font-family: var(--font-mono);
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.countdown-block label {
  font-family: var(--font-mono);
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 4px;
}

.countdown-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.countdown-done__num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent2);
}

.countdown-done__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── CTA BUTTON ─── */
.cta-btn {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 32px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  opacity: 0;
  animation: fadeUp 0.8s 1s forwards;
}

.cta-btn:hover {
  background: #c9a9ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(180, 140, 242, 0.35);
}

/* Quick, snappy press feedback — separate from the slower hover lift so a
   tap/click reads as an immediate physical response, not a delayed one. */
.cta-btn:active {
  transform: translateY(0) scale(0.97);
  transition: transform 0.15s cubic-bezier(0.4, 0, 1, 1);
}

.cta-big {
  font-size: 1.05rem;
  padding: 18px 40px;
  opacity: 1;
  animation: none;
}

.hero-trust {
  max-width: 340px;
  margin: 18px auto 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--ink-4);
  opacity: 0;
  animation: fadeUp 0.8s 1.15s forwards;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 1.5rem;
  animation: bounce 2s infinite;
}

/* ─── SECTIONS ─── */
.section {
  padding: 80px 0;
  position: relative;
}

/* Thin gradient hairline at the top of every section instead of a flat
   color-block boundary — a quiet, considered seam rather than a hard edge. */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 680px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 140, 242, 0.22), transparent);
}

.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-tag {
  font-family: var(--font-mono);
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(180, 140, 242, 0.1);
  border: 1px solid rgba(180, 140, 242, 0.2);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}

h2, .story-page h1, .consult-hero h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.section-sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: -12px;
  margin-bottom: 36px;
}

/* ─── STORY ─── */
.story { background: var(--bg2); }

.story-body p {
  /* Brighter than the site's usual muted body copy — this is the emotional
     core of the page and reads better with real contrast, not secondary
     treatment. */
  color: var(--ink-2);
  margin-bottom: 18px;
  font-size: 1.05rem;
  line-height: 1.75;
  font-family: var(--font-body);
}

.story-body p:last-child { margin-bottom: 0; }

.story-highlight {
  color: var(--text) !important;
  font-size: 1.15rem !important;
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  margin: 28px 0 !important;
}

.story-body strong { color: var(--text); }

.story-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.3s var(--ease-premium);
}

.story-readmore:hover { gap: 10px; }

/* ─── STORY PAGE (story.html) ─── */
.story-page { background: var(--bg2); padding-top: 130px; }
.story-page .story-body { margin-bottom: 40px; }
.story-page__cta { display: inline-block; }

/* ─── BEFORE / AFTER ─── */
.before-after { background: var(--bg); }

.compare-shot {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  background: var(--bg3);
}

.compare-shot img {
  width: 100%;
  display: block;
  /* Matches the actual uploaded photo's real dimensions, so the browser
     reserves the right amount of space before it finishes loading instead
     of the page jumping once it appears. object-fit keeps a future photo
     of different proportions cropping cleanly instead of distorting. */
  aspect-ratio: 1290 / 1455;
  object-fit: cover;
}

.compare-shot.img-missing img { display: none; }

/* On-image label, not just a caption someone can scroll past without
   reading. This is the single most important honesty fix on the page:
   the image is a pre-surgery projection, not a real outcome. */
.compare-shot__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #1a1208;
  background: var(--amber, #f5c242);
  padding: 5px 11px;
  border-radius: 100px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}

.compare-shot.img-missing .compare-shot__badge { display: none; }

.compare-shot__note {
  max-width: 480px;
  margin: 14px auto 0;
  font-size: 0.8rem;
  color: var(--ink-4);
  line-height: 1.6;
}

/* Featured callout, not a buried text link, this is a real growth feature. */
.simulator-promo {
  max-width: 460px;
  margin: 32px auto 0;
  padding: 28px 24px;
  text-align: center;
  border: 1px dashed rgba(180, 140, 242, 0.4);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(180, 140, 242, 0.08), rgba(180, 140, 242, 0.02));
}

.simulator-promo__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 8px;
}

.simulator-promo__sub {
  font-size: 0.88rem;
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 20px;
}

.simulator-promo .cta-btn { opacity: 1; animation: none; }

/* ─── HOW IT WORKS (scrollytelling) ─── */
.how { background: var(--bg2); padding-bottom: 40px; }

.scrolly {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 10px 24px 0;
}

.scrolly-visual {
  position: sticky;
  top: var(--sticky-top, 150px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 10px;
}

/* ─── BONE FRAMES (real generated reference photos, one per stage) ─── */
.bone-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(180, 140, 242, 0.09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 27px),
    linear-gradient(160deg, #1a1a2e, #12121f);
  border: 1px solid rgba(180, 140, 242, 0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: boneSway 8s ease-in-out infinite alternate;
  transform-origin: 50% 15%;
}

.bone-frame-wrap__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-3);
  background: rgba(13, 13, 20, 0.65);
  backdrop-filter: blur(4px);
  padding: 4px 9px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Barely-there idle motion so the visual reads as alive even before you
   scroll, instead of sitting there like a flat, static photo. */
@keyframes boneSway {
  0%   { transform: rotate(-0.6deg); }
  100% { transform: rotate(0.6deg); }
}

.bone-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px 26px;
  opacity: 0;
  transform: scale(0.94);
  filter: blur(7px);
  transition: opacity 0.75s var(--ease-premium),
              transform 0.75s var(--ease-premium),
              filter 0.75s var(--ease-premium);
}

.bone-frame.is-active {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

/* ─── VIDEO EMBED (real PRECICE animation, click-to-load) ─── */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  cursor: pointer;
}

.video-embed:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.video-embed__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.85) brightness(0.72);
  transition: filter 0.4s var(--ease-premium), transform 6s linear;
}

.video-embed:hover .video-embed__thumb {
  filter: saturate(1) brightness(0.82);
  transform: scale(1.03);
}

/* Scanner-style sweep over the thumbnail only, a small nod to "this is
   being measured" — disappears once the real video is playing. */
.video-embed::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 45%;
  top: -45%;
  background: linear-gradient(180deg, transparent, rgba(180, 140, 242, 0.22), transparent);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: scanSweep 5.5s var(--ease-premium) infinite;
}

@keyframes scanSweep {
  0%   { top: -45%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

.video-embed__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(13, 13, 20, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px; /* optically center the play triangle */
  pointer-events: none;
  transition: transform 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
}

.video-embed:hover .video-embed__play { transform: scale(1.08); background: rgba(180, 140, 242, 0.55); }

.video-embed.is-playing::after,
.video-embed.is-playing .video-embed__thumb,
.video-embed.is-playing .video-embed__play {
  display: none;
}

.video-embed.is-playing { cursor: default; }

.video-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Secondary video placement, below the scroll-driven bone sequence. */
.how-video-cta {
  max-width: 420px;
  margin: 48px auto 0;
  text-align: center;
}

.how-video-cta__label {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.scrolly-visual__caption {
  font-family: var(--font-mono);
  margin-top: 12px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.scrolly-steps { padding-top: 4px; }

.scrolly-step {
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 0;
  opacity: 0.3;
  transition: opacity 0.5s var(--ease-premium);
}

.scrolly-step:last-child { min-height: 40vh; }

.scrolly-step.is-active { opacity: 1; }

.scrolly-step .step-num {
  font-family: var(--font-mono);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 8px;
}

.scrolly-step h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.scrolly-step p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 10px;
}

.scrolly-step p:last-child { margin-bottom: 0; }

/* Inline per-step image, mobile only (see media queries below). Small and
   self-contained, no sticky positioning, no height math, so it can never
   fight with the text for screen space the way the sticky visual can on
   a short viewport. */
.scrolly-step__img {
  display: block;
  width: 130px;
  /* Reserves the right height before the image loads, the actual cause of
     the "glitch" feeling when scrolling near this section: without this,
     the page reflows every time one of these six images finishes loading. */
  aspect-ratio: 9 / 16;
  object-fit: cover;
  margin: 0 auto 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(180, 140, 242, 0.15);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  background: linear-gradient(160deg, #1a1a2e, #12121f);
  /* Sharpens into focus as its step becomes active, driven by the same
     .is-active class the existing scroll observer already toggles, so
     this needed no new JS at all. */
  opacity: 0.35;
  transform: scale(0.9);
  filter: blur(3px);
  transition: opacity 0.6s var(--ease-premium),
              transform 0.6s var(--ease-premium),
              filter 0.6s var(--ease-premium);
}

.scrolly-step.is-active .scrolly-step__img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0px);
}

.scrolly-mobile-note {
  text-align: center;
  font-size: 0.72rem;
  color: var(--ink-4);
  margin-top: -8px;
  padding-bottom: 8px;
}

/* Below 700px there's no room for a ~600px-tall sticky photo next to
   scrolling text, so the shared sticky visual is hidden entirely and the
   small inline image in each step takes over instead. */
@media (max-width: 699px) {
  .scrolly-visual { display: none; }
}

/* ─── MYTHS / REAL QUESTIONS ─── */
.myths { background: var(--bg); }

.qa-thread {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 8px;
}

.qa-pair {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
}

.qa-pair.visible { opacity: 1; transform: translateY(0); }

.qa-bubble {
  max-width: 85%;
  padding: 14px 16px;
  border-radius: 18px;
}

.qa-bubble p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.qa-bubble--in {
  align-self: flex-start;
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.12);
  border-bottom-left-radius: 4px;
}

.qa-bubble--in p { color: var(--text-muted); }

.qa-bubble--out {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(180, 140, 242, 0.18), rgba(180, 140, 242, 0.07));
  border: 1px solid rgba(180, 140, 242, 0.3);
  border-bottom-right-radius: 4px;
}

.qa-bubble--out p { color: var(--text); }

/* ─── CONSULT ─── */
.consult {
  background: var(--bg2);
  text-align: center;
}

.consult-body {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 28px;
}

.consult-status {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.consult-status.is-error { color: #f0a5ae; }

/* ─── CONSULT PAGE (consult.html) ─── */
.consult-hero {
  background: var(--bg2);
  text-align: center;
  padding-top: 130px;
}

.consult-hero .section-sub { max-width: 460px; margin-left: auto; margin-right: auto; }

.consult-disclosure {
  max-width: 460px;
  margin: 0 auto 28px;
  padding: 12px 16px;
  border: 1px solid rgba(240, 198, 116, 0.3);
  background: rgba(240, 198, 116, 0.08);
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.price-tag {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 28px;
}

.price-tag__amount {
  font-family: var(--font-mono);
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.price-tag__unit {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-muted);
}

.consult-details {
  background: var(--bg);
  text-align: left;
}

.consult-details h2 {
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.consult-details p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 560px;
}

.consult-details p:last-child { margin-bottom: 0; }

/* ─── TIMELINE ─── */
.timeline { background: var(--bg2); }

.latest-update {
  background: linear-gradient(135deg, rgba(126,200,169,0.12), rgba(126,200,169,0.03));
  border: 1px solid rgba(126,200,169,0.3);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 8px;
  margin-bottom: 32px;
}

.latest-update__badge {
  font-family: var(--font-mono);
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent2);
  background: rgba(126,200,169,0.15);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.latest-update__date {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.latest-update p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.timeline-wrap {
  position: relative;
  margin-top: 40px;
  padding-left: 28px;
}

.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 7px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), transparent);
}

.tl-item {
  position: relative;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}

.tl-item.visible { opacity: 1; transform: translateX(0); }
.tl-item:last-child { margin-bottom: 0; }

.tl-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg2);
  border: 2px solid var(--text-muted);
  transition: border-color 0.3s, background 0.3s;
}

.tl-item.active .tl-dot {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 12px rgba(180, 140, 242, 0.5);
}

.tl-content h3 {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.tl-content p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.tl-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.tl-status--progress { color: var(--accent); background: rgba(180, 140, 242, 0.14); }
.tl-status--planned { color: #f0c674; background: rgba(240, 198, 116, 0.14); }
.tl-status--estimated { color: var(--ink-4); background: rgba(255, 255, 255, 0.06); }

.timeline-note {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-4);
  line-height: 1.6;
}

.sources-line {
  margin-top: 24px;
  font-size: 0.78rem;
  color: var(--ink-4);
  line-height: 1.6;
  text-align: center;
}

.sources-line a {
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sources-line a:hover { color: var(--accent); }

/* ─── NOTIFY ─── */
.notify { background: var(--bg); text-align: center; }

.notify-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.notify-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.25);
  color: var(--text);
  padding: 14px 18px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-family: inherit;
}

.notify-form input[type="email"]::placeholder { color: var(--text-muted); }

.notify-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

.notify-status {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.notify-status.is-error { color: #f0a5ae; }
.notify-status.is-success { color: var(--accent2); }

/* ─── CTA SECTION ─── */
.cta-section {
  background: var(--bg);
  text-align: center;
}

.cta-section h2 { margin-bottom: 16px; }
.cta-section p { color: var(--text-muted); margin-bottom: 32px; }

/* ─── FOOTER ─── */
.footer {
  padding: 32px 24px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer p { color: var(--text-muted); font-size: 0.8rem; }

/* Was text-muted + opacity:0.5 (~2.5:1 contrast, fails WCAG AA).
   This is the "not medical advice" line — it should actually be readable. */
.footer-note { margin-top: 8px; font-size: 0.72rem; color: var(--footer-muted); }

/* ─── IMAGE PLACEHOLDER (before/after) ─── */
.compare-shot__placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  min-height: 280px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.compare-shot__placeholder strong { color: var(--accent); }

.compare-shot.img-missing .compare-shot__placeholder { display: flex; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── HEIGHT SIMULATOR (simulator.html) ─── */
.simulator-intro { background: var(--bg2); text-align: center; padding-bottom: 20px; }

.simulator-privacy {
  max-width: 420px;
  margin: 14px auto 0;
  font-size: 0.78rem;
  color: var(--accent2);
  line-height: 1.6;
}

.simulator-tool { background: var(--bg2); padding-top: 20px; }

.simulator {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.simulator-step-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.simulator-label {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  margin: 18px 0 8px;
}

.simulator-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.25);
  color: var(--text);
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 1rem;
  font-family: var(--font-mono);
}

.simulator-input:focus { outline: none; border-color: var(--accent); }

.simulator-dropzone {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--bg3);
  border: 1px dashed rgba(180, 140, 242, 0.35);
  border-radius: var(--radius);
  padding: 36px 20px;
  color: var(--ink-2);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.3s var(--ease-premium), background 0.3s var(--ease-premium);
}

.simulator-dropzone:hover { border-color: var(--accent); background: #1e1e30; }
.simulator-dropzone__icon { font-size: 1.8rem; }

.simulator-guidelines {
  text-align: left;
  list-style: none;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simulator-guidelines li {
  font-size: 0.82rem;
  color: var(--ink-4);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}

.simulator-guidelines li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}

.simulator-error {
  margin-top: 14px;
  font-size: 0.85rem;
  color: #f0a5ae;
}

.simulator-hint {
  font-size: 0.85rem;
  color: var(--ink-3);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Card frame shared by the mark / preview / result canvases. Reuses the
   same measured-lightbox visual language as the femur photo frame. */
.simulator-frame {
  position: relative;
  margin: 0 auto 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(180, 140, 242, 0.09), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 27px),
    linear-gradient(160deg, #1a1a2e, #12121f);
  border: 1px solid rgba(180, 140, 242, 0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

.simulator-frame canvas { display: block; margin: 0 auto; }

/* Before/after shown together, stacked on mobile, side by side once
   there's room. Frames naturally differ in height (that's the point). */
.simulator-result-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.simulator-result-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.simulator-result-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--bg3);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 10px;
}

.simulator-result-label--accent {
  color: var(--bg);
  background: var(--accent2);
}

/* Preview frame only: canvas is pinned to the bottom of a taller reserved
   box, so as the legs stretch taller the person visibly grows upward,
   feet staying put, instead of the frame jumping around. */
.simulator-frame--grow canvas {
  position: absolute;
  bottom: 0;
  left: 0;
}

.simulator-hipline {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  cursor: ns-resize;
  touch-action: none;
  z-index: 5;
}

.simulator-hipline::before {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(180, 140, 242, 0.6);
}

.simulator-hipline__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  pointer-events: none;
}

.simulator-controls { margin-bottom: 16px; }

.simulator-slider-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-bottom: 10px;
}

.simulator-slider-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  font-size: 1.1rem;
}

.simulator-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 100px;
  background: var(--bg3);
  outline: none;
}

.simulator-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 2px 10px rgba(180, 140, 242, 0.5);
  cursor: pointer;
}

.simulator-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 2px 10px rgba(180, 140, 242, 0.5);
  cursor: pointer;
}

.simulator-link-btn {
  display: inline-block;
  background: none;
  border: none;
  color: var(--ink-3);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  margin: 4px 0 18px;
  font-family: inherit;
}

.simulator-link-btn:hover { color: var(--accent); }

.simulator-disclaimer {
  font-size: 0.78rem;
  color: var(--ink-4);
  line-height: 1.6;
  margin-bottom: 18px;
}

.simulator-gate-heading {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.simulator-gate-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}

.simulator-gate-form input[type="email"] {
  flex: 1;
  min-width: 200px;
  background: var(--bg3);
  border: 1px solid rgba(180, 140, 242, 0.25);
  color: var(--text);
  padding: 14px 18px;
  border-radius: 100px;
  font-size: 0.95rem;
  font-family: inherit;
}

.simulator-gate-form input[type="email"]:focus { outline: none; border-color: var(--accent); }

.simulator-status {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--ink-3);
  min-height: 1.2em;
}

.simulator-status.is-error { color: #f0a5ae; }

/* ─── TABLET+ ─── */

/* Wide enough for the visual to sit beside the text instead of above it. */
@media (min-width: 700px) {
  .scrolly {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 48px;
    align-items: start;
    max-width: 820px;
  }

  .scrolly-visual { margin-bottom: 0; max-width: none; }

  /* There's room for the sticky visual here, so the mobile fallbacks go away. */
  .scrolly-step__img { display: none; }
  .scrolly-mobile-note { display: none; }

  .qa-bubble { max-width: 65%; }

  .simulator-result-grid {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }

  .simulator-result-item { width: auto; }
}