/* ══════════════════════════════════════════════════════════════════════════
   APEX — getapexfitness.com
   Cinematic single-story site. No frameworks, no external fonts.
   Brand (from src/ui/tokens.js): lime #A8E80C · cyan #2DD4FF · purple #A855F7
   Canvas deepened to #07090C for the launch-film look.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #07090C;
  --bg-raise: #0E1116;
  --ink: #EEF1F6;
  --muted: #A1A7B3;
  --faint: #6E7683;
  --line: #1C2129;
  --lime: #A8E80C;
  --cyan: #2DD4FF;
  --purple: #A855F7;
  --gold: #F3C63F;
  --font: "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
strong { color: var(--ink); }

.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.container--narrow { width: min(760px, calc(100% - 48px)); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--lime); color: #000; padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 800; font-size: 14px;
}
.skip-link:focus { left: 0; }

/* ── Reveal-on-scroll ─────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* ── Pulse progress line ──────────────────────────────────────────────── */
.pulse {
  position: fixed; top: 0; left: 0; width: 2px; height: 100vh; z-index: 90;
  background: rgba(168, 232, 12, 0.08); pointer-events: none;
}
.pulse span {
  display: block; width: 100%; height: 0%;
  background: linear-gradient(180deg, var(--lime), rgba(168, 232, 12, 0.25));
  box-shadow: 0 0 12px rgba(168, 232, 12, 0.55);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
  will-change: transform;
}
.btn--primary { background: var(--lime); color: #000; box-shadow: 0 8px 32px rgba(168, 232, 12, 0.28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 44px rgba(168, 232, 12, 0.4); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.35s, border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(7, 9, 12, 0.78);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; }
.nav__brand-mark { height: 30px; width: auto; }
.nav__brand-word { height: 15px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav__links a { font-size: 14px; font-weight: 600; color: var(--muted); transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); }
.nav__links .btn { color: #000; padding: 9px 20px; font-size: 13.5px; }
.nav__links .btn:hover { color: #000; }
.nav__toggle { display: none; background: none; border: none; color: var(--ink); width: 44px; height: 44px; cursor: pointer; }
.nav__toggle svg { width: 24px; height: 24px; }
.nav__toggle .icon-close { display: none; }
.lang { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang a { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; color: var(--faint); }
.lang a[aria-current] { background: var(--lime); color: #000; }

@media (max-width: 880px) {
  .nav__toggle { display: grid; place-items: center; }
  .nav__links {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 4px; padding: 18px 24px 26px; background: rgba(7, 9, 12, 0.97);
    border-bottom: 1px solid var(--line); display: none;
  }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: 12px 0; font-size: 16px; }
  .nav__links .btn { display: inline-flex; padding: 12px 24px; }
  .nav.menu-open .nav__links { display: flex; }
  .nav.menu-open .icon-menu { display: none; }
  .nav.menu-open .icon-close { display: block; }
  .lang { align-self: flex-start; margin-top: 8px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(110px, 16vh, 170px) 24px 56px; text-align: center;
}
.hero__spot { position: absolute; inset: 0; pointer-events: none; }
.hero__spot::before {
  content: ""; position: absolute; left: 50%; top: 34%; width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(168, 232, 12, 0.09) 0%, transparent 58%);
}
.hero__spot::after {
  content: ""; position: absolute; left: 24%; top: 72%; width: 640px; height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(168, 85, 247, 0.07) 0%, transparent 60%);
}
.hero__mega {
  position: relative; z-index: 1; font-family: var(--font-display);
  font-weight: 900; line-height: 0.9; letter-spacing: -0.025em;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hero__mega-line { font-size: clamp(58px, 11.5vw, 168px); color: var(--ink); display: block; }
.hero__mega-line--grad {
  background: linear-gradient(92deg, var(--lime) 20%, #D7FF66 50%, var(--lime) 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 28px rgba(168, 232, 12, 0.22));
}

.hero__stage {
  position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end;
  margin-top: calc(clamp(58px, 11.5vw, 168px) * -0.06);
}
.hero__foot { position: relative; z-index: 3; margin-top: 40px; max-width: 620px; }
.hero__sub { font-size: clamp(16px, 2vw, 19px); color: var(--muted); line-height: 1.6; }
.hero__actions { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700;
  color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.hero__proof { margin-top: 18px; font-size: 12px; color: var(--faint); font-style: italic; }
.hero__scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 26px; height: 42px; border: 1.5px solid var(--line); border-radius: 999px;
  display: flex; justify-content: center; padding-top: 8px;
}
.hero__scroll span { width: 3px; height: 8px; border-radius: 2px; background: var(--lime); animation: scrollcue 2s var(--ease) infinite; }
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } }

/* ── Device (phone) ───────────────────────────────────────────────────── */
.device { position: relative; width: clamp(250px, 24vw, 336px); filter: drop-shadow(0 44px 90px rgba(0, 0, 0, 0.65)); }
.device--hero { transform: rotate(-3deg); }
.device--mini { width: clamp(240px, 22vw, 310px); }
.device__frame {
  position: relative; border-radius: clamp(46px, 4.6vw, 60px); padding: clamp(10px, 1vw, 13px);
  background:
    linear-gradient(145deg, #4B515A 0%, #23262C 16%, #101216 42%, #26292F 74%, #5A6069 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.16),
    inset 0 0 18px rgba(0, 0, 0, 0.85);
}
.device__screen {
  position: relative; border-radius: clamp(36px, 3.7vw, 48px); overflow: hidden;
  background: #000; border: 3px solid #000;
}
.device__screen img { width: 100%; height: auto; }
.device__island {
  position: absolute; top: clamp(15px, 1.5vw, 20px); left: 50%; transform: translateX(-50%);
  width: 21%; height: clamp(14px, 1.5vw, 18px); border-radius: 999px; background: #000; z-index: 3;
  box-shadow: inset -5px 0 7px -5px rgba(90, 96, 105, 0.7);
}
.device__btn { position: absolute; width: 3.5px; background: linear-gradient(90deg, #464C55, #16181C); }
.device__btn--action { left: -3.5px; top: 17%; height: 26px; border-radius: 3px 0 0 3px; }
.device__btn--vol1 { left: -3.5px; top: 25%; height: 48px; border-radius: 3px 0 0 3px; }
.device__btn--vol2 { left: -3.5px; top: 33.5%; height: 48px; border-radius: 3px 0 0 3px; }
.device__btn--power { right: -3.5px; top: 27%; height: 74px; border-radius: 0 3px 3px 0; background: linear-gradient(270deg, #464C55, #16181C); }
.device__glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.015) 24%, transparent 38%);
}
.device--purple { filter: drop-shadow(0 40px 80px rgba(168, 85, 247, 0.16)); }

/* ── Watch ────────────────────────────────────────────────────────────── */
.watch {
  position: absolute; left: clamp(-140px, -11vw, -84px); bottom: 6%;
  width: clamp(148px, 14vw, 186px); transform: rotate(7deg); z-index: 3;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
}
.watch__band {
  width: 54%; height: clamp(40px, 4vw, 56px); margin-inline: auto;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 11px),
    linear-gradient(180deg, #1B1E24, #0C0E11);
  border-inline: 1px solid rgba(255, 255, 255, 0.06);
}
.watch__band--top { border-radius: 14px 14px 5px 5px; }
.watch__band--bottom { border-radius: 5px 5px 14px 14px; }
.watch__case {
  position: relative; border-radius: clamp(32px, 3.4vw, 42px); padding: 7px;
  background: linear-gradient(145deg, #4B515A 0%, #1B1E23 30%, #101216 60%, #555B64 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14), inset 0 0 12px rgba(0, 0, 0, 0.85);
}
.watch__crown { position: absolute; right: -5px; top: 24%; width: 5.5px; height: 22px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #4A5058, #14161A); }
.watch__side { position: absolute; right: -4px; top: 52%; width: 4px; height: 30px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #33383F, #101216); }
.watch__face {
  border-radius: clamp(26px, 2.8vw, 35px); background: #000; border: 2.5px solid #000;
  padding: clamp(12px, 1.4vw, 18px) 10px clamp(10px, 1.2vw, 14px);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.watch__logo { height: 13px; width: auto; opacity: 0.95; }
.watch__ring { position: relative; width: clamp(64px, 6.6vw, 84px); height: clamp(64px, 6.6vw, 84px); display: grid; place-items: center; }
.watch__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--lime) 0 313deg, #1E2530 313deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
  filter: drop-shadow(0 0 8px rgba(168, 232, 12, 0.5));
}
.watch__ring b { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; color: var(--ink); }
.watch__ring-label { font-size: 8.5px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--lime); }
.watch__rows { display: flex; gap: 10px; font-size: 9px; color: var(--muted); font-weight: 600; }
.watch__rows b { color: var(--ink); font-weight: 800; }
.watch__rows i { font-style: normal; font-size: 7.5px; color: var(--faint); }

/* ── Prelude ──────────────────────────────────────────────────────────── */
.prelude { padding: clamp(110px, 18vh, 200px) 0; text-align: center; }
.prelude__line { font-size: clamp(19px, 2.6vw, 26px); color: var(--muted); max-width: 30ch; margin: 0 auto 34px; line-height: 1.55; }
.prelude__line--big { font-family: var(--font-display); font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.015em; color: var(--ink); line-height: 1.2; margin-bottom: 0; max-width: 22ch; }
.prelude__line--big strong { color: var(--lime); }

/* ── Chapters ─────────────────────────────────────────────────────────── */
.chapter { position: relative; padding: clamp(110px, 15vh, 180px) 0; overflow: hidden; }
.chapter::before {
  content: attr(data-n); position: absolute; z-index: 0; top: 4%; right: -1%;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(150px, 27vw, 360px); color: transparent;
  -webkit-text-stroke: 1.5px rgba(168, 232, 12, 0.1);
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.chapter--flip::before { right: auto; left: -1%; }
.chapter--cyan::before { -webkit-text-stroke-color: rgba(45, 212, 255, 0.1); }
.chapter--purple::before { -webkit-text-stroke-color: rgba(168, 85, 247, 0.12); }
.chapter__bg { position: absolute; inset: 0; z-index: 0; opacity: 0.13; }
.chapter__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.35) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 20%, #000 80%, transparent);
}
.chapter__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.chapter--flip .chapter__grid > .chapter__copy { order: 2; }
.chapter--flip .chapter__grid > .chapter__stage { order: 1; }
.chapter__kicker {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--lime); margin-bottom: 20px;
}
.chapter--cyan .chapter__kicker { color: var(--cyan); }
.chapter--purple .chapter__kicker { color: var(--purple); }
.chapter__title { font-family: var(--font-display); font-size: clamp(42px, 6.6vw, 92px); font-weight: 900; letter-spacing: -0.02em; line-height: 0.98; margin-bottom: 24px; }
.chapter__lead { font-size: clamp(16px, 1.9vw, 19px); color: var(--muted); max-width: 46ch; }
.chapter__stage { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.proof { font-size: 12px; color: var(--faint); font-style: italic; text-align: center; }

/* Macro rings (chapter 03) */
.macro { display: flex; gap: clamp(14px, 2vw, 26px); align-items: flex-end; padding-bottom: 30px; }
.macro__ring { position: relative; display: grid; place-items: center; text-align: center; }
.macro__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px));
}
.macro__ring b { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 900; }
.macro__ring b i { font-style: normal; font-size: 0.55em; color: var(--muted); }
.macro__ring span { position: absolute; bottom: -26px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--faint); }
.macro__ring--p { width: clamp(140px, 13vw, 170px); height: clamp(140px, 13vw, 170px); }
.macro__ring--p::before { background: conic-gradient(var(--lime) 0 284deg, #1E2530 284deg 360deg); filter: drop-shadow(0 0 14px rgba(168, 232, 12, 0.35)); }
.macro__ring--c { width: clamp(118px, 11vw, 146px); height: clamp(118px, 11vw, 146px); }
.macro__ring--c::before { background: conic-gradient(var(--cyan) 0 291deg, #1E2530 291deg 360deg); filter: drop-shadow(0 0 12px rgba(45, 212, 255, 0.3)); }
.macro__ring--f { width: clamp(100px, 9.6vw, 128px); height: clamp(100px, 9.6vw, 128px); }
.macro__ring--f::before { background: conic-gradient(var(--gold) 0 275deg, #1E2530 275deg 360deg); filter: drop-shadow(0 0 12px rgba(243, 198, 63, 0.28)); }

/* Anatomy figure (chapter 04) */
.anatomy svg { width: clamp(230px, 24vw, 310px); height: auto; filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.6)); }

/* Threads (chapter 05) */
.threads { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 28px; }
.threads li {
  font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--purple); border: 1px solid rgba(168, 85, 247, 0.35); border-radius: 999px;
  padding: 8px 16px;
}
.threads li::after { content: "→"; margin-left: 10px; color: rgba(168, 85, 247, 0.5); }
.threads li:last-child::after { content: "⤳"; color: var(--purple); }

/* ── The standard ─────────────────────────────────────────────────────── */
.standard { padding: clamp(120px, 18vh, 210px) 0; text-align: center; border-top: 1px solid var(--line); }
.standard__title { font-family: var(--font-display); font-size: clamp(36px, 5.6vw, 72px); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin: 18px 0 42px; }
.standard__lines { max-width: 620px; margin-inline: auto; display: grid; gap: 22px; }
.standard__lines p { color: var(--muted); font-size: clamp(15.5px, 1.8vw, 18px); }

/* ── Finale ───────────────────────────────────────────────────────────── */
.finale {
  position: relative; padding: clamp(130px, 20vh, 230px) 0; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse 70% 55% at 50% 105%, rgba(168, 232, 12, 0.1), transparent 70%);
}
.tagline { display: block; font-size: 13px; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; color: var(--lime); margin-bottom: 18px; }
.finale__title { font-family: var(--font-display); font-size: clamp(44px, 7.4vw, 104px); font-weight: 900; letter-spacing: -0.02em; line-height: 0.98; }
.finale__lead { color: var(--muted); font-size: clamp(16px, 2vw, 19px); max-width: 52ch; margin: 24px auto 0; }
.finale .hero__actions { margin-top: 36px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.section { padding: clamp(90px, 12vh, 150px) 0; }
.faq__title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 900; letter-spacing: -0.015em; margin-bottom: 34px; text-align: center; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: var(--bg-raise); overflow: hidden; transition: border-color 0.25s; }
.faq details[open] { border-color: rgba(168, 232, 12, 0.4); }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px; font-weight: 700; font-size: 15.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--lime); transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--muted); font-size: 14.5px; }
.faq a { color: var(--lime); }

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 44px 0; }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__brand { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--faint); }
.footer__brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.footer__brand-mark { height: 26px; width: auto; }
.footer__brand-word { height: 13px; width: auto; }
.footer nav { display: flex; gap: 26px; font-size: 13.5px; }
.footer nav a { color: var(--muted); }
.footer nav a:hover { color: var(--ink); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .chapter__grid { grid-template-columns: 1fr; gap: 48px; }
  .chapter--flip .chapter__grid > .chapter__copy { order: 1; }
  .chapter--flip .chapter__grid > .chapter__stage { order: 2; }
  .chapter__copy { text-align: center; }
  .chapter__lead { margin-inline: auto; }
  .chapter__kicker { margin-inline: auto; }
  .threads { justify-content: center; }
}
@media (max-width: 640px) {
  .watch { left: auto; right: -26px; bottom: -18px; width: 132px; }
  .hero__stage { margin-top: calc(clamp(58px, 11.5vw, 168px) * -0.1); }
  .macro { flex-wrap: wrap; justify-content: center; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ── Parallax (JS sets --py; rotations preserved per element) ─────────── */
[data-parallax] { transform: translateY(var(--py, 0px)); will-change: transform; }
.device--hero[data-parallax] { transform: rotate(-3deg) translateY(var(--py, 0px)); }
.watch[data-parallax] { transform: rotate(7deg) translateY(var(--py, 0px)); }
.reveal.in[data-parallax] { transform: translateY(var(--py, 0px)); transition: opacity 0.9s var(--ease); }
.device--hero.reveal.in[data-parallax] { transform: rotate(-3deg) translateY(var(--py, 0px)); }
.watch.reveal.in[data-parallax] { transform: rotate(7deg) translateY(var(--py, 0px)); }

/* ══ KEYNOTE — the product reveal ═════════════════════════════════════── */
.keynote { position: relative; height: 640vh; }
.keynote__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  perspective: 1500px;
}

/* volumetric light + particles */
.kn-bg { position: absolute; inset: 0; pointer-events: none; }
.kn-beam {
  position: absolute; left: 50%; top: -30%; width: 74vw; height: 150%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 34% 46% at 50% 32%, rgba(168, 232, 12, 0.1), transparent 70%);
}
.kn-halo {
  position: absolute; left: 22%; bottom: -32%; width: 60vw; height: 90%;
  background: radial-gradient(ellipse 40% 40% at 50% 60%, rgba(168, 85, 247, 0.08), transparent 70%);
}
.kn-part { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(168, 232, 12, 0.55); filter: blur(0.4px); animation: kndrift 16s linear infinite; opacity: 0; }
.kn-part--1 { left: 16%; top: 78%; animation-delay: 0s; }
.kn-part--2 { left: 30%; top: 88%; animation-delay: 3s; }
.kn-part--3 { left: 52%; top: 84%; animation-delay: 6s; width: 2px; height: 2px; }
.kn-part--4 { left: 68%; top: 90%; animation-delay: 9s; }
.kn-part--5 { left: 82%; top: 80%; animation-delay: 12s; width: 2px; height: 2px; }
.kn-part--6 { left: 42%; top: 92%; animation-delay: 14s; }
@keyframes kndrift {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.8; }
  85% { opacity: 0.25; }
  100% { transform: translateY(-58vh); opacity: 0; }
}

/* stage-0 title */
.kn-head { position: absolute; top: clamp(84px, 12vh, 150px); text-align: center; z-index: 4; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.kn-title { font-family: var(--font-display); font-weight: 900; line-height: 0.94; letter-spacing: -0.02em; display: flex; flex-direction: column; }
.kn-title span { font-size: clamp(34px, 6.4vw, 92px); }
.kn-title-grad {
  background: linear-gradient(92deg, var(--lime) 15%, #D7FF66 50%, var(--lime) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(168, 232, 12, 0.22));
}
.kn-sub { margin-top: 14px; font-size: clamp(13px, 1.6vw, 16px); font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); }
.keynote__pin:not([data-stage="0"]) .kn-head { opacity: 0; transform: translateY(-22px) scale(0.96); pointer-events: none; }

/* scene + phone */
.kn-scene { position: relative; width: min(1150px, 96vw); height: min(74vh, 740px); transform-style: preserve-3d; }
.kn-orbit { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); }
/* stage 0: the title is the star — the device waits low and dim, then rises */
.keynote__pin[data-stage="0"] .kn-orbit { transform: translateY(9vh) scale(0.93); opacity: 0.62; }
/* photographed hardware: real product render, real UI composited in the glass */
.kn-phone { position: relative; width: clamp(320px, 34vw, 470px); transform-style: preserve-3d; animation: knspin 13s var(--ease) infinite alternate; }
@keyframes knspin {
  from { transform: rotateY(-5deg) rotateX(1.2deg); }
  to { transform: rotateY(5deg) rotateX(-1.2deg); }
}
.kn-photo {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 74% 88% at 50% 48%, #000 58%, transparent 99%);
  mask-image: radial-gradient(ellipse 74% 88% at 50% 48%, #000 58%, transparent 99%);
}
.kn-photo-screen {
  position: absolute; left: 24.8%; top: 7.4%; width: 50.5%; height: 79.5%;
  overflow: hidden; border-radius: 11% / 5.3%; background: #07090C;
}
.kn-photo-screen img { width: 100%; height: 100%; object-fit: fill; display: block; }
/* Storytelling sprint: the phone's screen swaps per chapter — subtle
   crossfade + gentle zoom, never a hard cut. JS toggles .is-swapping
   around the src change; reduced-motion gets an instant swap (no class). */
.kn-photo-screen img { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), filter 0.5s var(--ease); }
.kn-photo-screen img.is-swapping { opacity: 0; transform: scale(0.97); filter: brightness(0.7) blur(1.5px); }
.kn-ring {
  position: absolute; left: 50%; top: 50%; width: clamp(340px, 40vw, 560px); height: clamp(340px, 40vw, 560px);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px solid rgba(168, 232, 12, 0.22);
  box-shadow: 0 0 60px rgba(168, 232, 12, 0.08), inset 0 0 60px rgba(168, 232, 12, 0.05);
  opacity: 0; transition: opacity 0.8s var(--ease); pointer-events: none;
}
.keynote__pin[data-stage="7"] .kn-ring { opacity: 1; }

/* module panels exploding out of the phone */
/* One module at a time. Each chapter's panel plays in on its own —
   scroll advances chapters; it never scrubs the motion. */
.kn-panel {
  position: absolute; left: 50%; top: 50%; z-index: 3; opacity: 0; pointer-events: none;
  --T: translate(-50%, -50%) translate3d(min(26vw, 360px), -5vh, 40px);
  transform: var(--T);
  min-width: 250px; padding: 22px 28px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(30, 37, 48, 0.85), rgba(13, 16, 21, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
@keyframes knenter {
  from { opacity: 0; transform: var(--T) translateY(34px) scale(0.96); }
  to { opacity: 1; transform: var(--T); }
}
.keynote__pin[data-stage="1"] .kn-panel--train,
.keynote__pin[data-stage="2"] .kn-panel--recovery,
.keynote__pin[data-stage="3"] .kn-panel--bloodwork,
.keynote__pin[data-stage="4"] .kn-panel--nutrition,
.keynote__pin[data-stage="5"] .kn-panel--coach {
  animation: knenter 0.9s var(--ease) 0.2s forwards;
}
.kn-panel h3 { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--lime); margin-bottom: 7px; }
.kn-panel p { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.kn-panel p b { font-size: 21px; }
.kn-panel--recovery h3 { color: var(--cyan); }
.kn-panel--coach h3 { color: var(--purple); }
.kn-panel--coach { min-width: 270px; }
.kn-panel--coach p { white-space: normal; max-width: 300px; }
.kn-type { min-height: 1.3em; }
.kn-type::after { content: "▍"; color: var(--purple); animation: knblink 1s steps(1) infinite; }
@keyframes knblink { 50% { opacity: 0; } }

/* chapter accents */
.keynote__pin[data-stage="2"] .kn-panel--recovery { border-color: rgba(45, 212, 255, 0.5); box-shadow: 0 30px 80px rgba(45, 212, 255, 0.16); }
.keynote__pin[data-stage="3"] .kn-panel--bloodwork { border-color: rgba(168, 232, 12, 0.5); box-shadow: 0 30px 80px rgba(168, 232, 12, 0.15); }
.keynote__pin[data-stage="5"] .kn-panel--coach { border-color: rgba(168, 85, 247, 0.55); box-shadow: 0 30px 80px rgba(168, 85, 247, 0.18); }

/* flagship industrial design: machined edge ring + deep glass shadow + light pool */
.kn-phone .device__frame {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 3.5px rgba(125, 135, 150, 0.22),
    inset 0 0 26px rgba(0, 0, 0, 0.55),
    0 46px 110px rgba(0, 0, 0, 0.65),
    0 12px 34px rgba(0, 0, 0, 0.5);
}
.kn-floor {
  position: absolute; left: 50%; bottom: 3%; z-index: 0;
  width: min(580px, 62vw); height: 120px; transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 44% at 50% 32%, rgba(168, 232, 12, 0.1), transparent 70%);
  filter: blur(7px); pointer-events: none;
}

/* editorial numbered captions */
.kn-caption::before {
  content: attr(data-n);
  color: var(--lime); font-size: 0.68em; font-weight: 900;
  letter-spacing: 3px; margin-right: 12px; vertical-align: 2px;
}
.kn-kicker {
  display: block; font-size: 12px; font-weight: 800; letter-spacing: 6px;
  text-transform: uppercase; color: var(--lime); margin-bottom: 16px;
}

/* the watch joins in */
.kn-watchwrap {
  position: absolute; right: 6%; bottom: 8%; z-index: 4; text-align: center;
  opacity: 0; transform: translateY(46px) scale(0.9);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.keynote__pin[data-stage="6"] .kn-watchwrap { opacity: 1; transform: translateY(0) scale(1); }
.kn-watchwrap .watch { position: static; transform: rotate(-5deg); width: clamp(140px, 13vw, 176px); }
.kn-watchring { position: relative; display: grid; place-items: center; }
.kn-watchring svg { width: clamp(62px, 6.2vw, 80px); height: auto; filter: drop-shadow(0 0 8px rgba(168, 232, 12, 0.45)); }
.kn-watchring b { position: absolute; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 27px); font-weight: 900; color: var(--ink); }
.kn-watch-tag { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lime); }

/* caption */
.kn-caption {
  position: absolute; bottom: clamp(58px, 9vh, 96px); z-index: 4;
  font-family: var(--font-display); font-size: clamp(17px, 2.2vw, 23px); font-weight: 800;
  letter-spacing: 0.3px; color: var(--ink); text-align: center;
}

/* after the reveal */
.kn-after { padding: clamp(110px, 16vh, 190px) 0; text-align: center; }

/* body section — photographed sculptural anatomy */
.anatomy-photo {
  width: clamp(300px, 30vw, 430px); height: auto; display: block; margin: 0 auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 84% at 50% 50%, #000 55%, transparent 98%);
  mask-image: radial-gradient(ellipse 72% 84% at 50% 50%, #000 55%, transparent 98%);
}
.anatomy--xl svg { width: clamp(270px, 27vw, 360px); }
.anatomy--xl #aheatL path, .anatomy--xl .m-core { transition: fill-opacity 0.4s var(--ease); }
.anatomy--xl.has-sel #aheatL path, .anatomy--xl.has-sel .m-core { fill-opacity: 0.07; }
.anatomy--xl.sel-chest .m-chest, .anatomy--xl.sel-delts .m-delts, .anatomy--xl.sel-quads .m-quads,
.anatomy--xl.sel-calves .m-calves, .anatomy--xl.sel-core .m-core { fill-opacity: 0.85; }
.bodysec__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip-btn {
  font-family: var(--font); font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.chip-btn:hover { color: var(--ink); border-color: var(--lime); }
.chip-btn[aria-pressed="true"] { background: var(--lime); color: #000; border-color: var(--lime); }

@media (max-width: 760px) {
  .keynote { height: 560vh; }
  .kn-panel { min-width: 200px; padding: 16px 20px; --T: translate(-50%, -50%) translate3d(0, 30vh, 30px); }
  .kn-panel p { font-size: 14.5px; }
  .kn-panel--coach { min-width: 230px; }
  .kn-watchwrap { right: 4%; bottom: 5%; }
  .kn-scene { height: 70vh; }
  .bodysec__chips { justify-content: center; }
}

/* ══ CINEMA — the camera tells the story ═══════════════════════════════ */
.kn-orbit { transition: transform 1.6s var(--ease), opacity 1.2s var(--ease); }
.keynote__pin[data-stage="1"] .kn-orbit { transform: scale(1.07) translateX(-5%); }
.keynote__pin[data-stage="2"] .kn-orbit { transform: scale(1.13) translateX(5%); }
.keynote__pin[data-stage="3"] .kn-orbit { transform: scale(1.03) translateX(-4%) translateY(-2vh); }
.keynote__pin[data-stage="4"] .kn-orbit { transform: scale(1.17) translateY(3vh); }
.keynote__pin[data-stage="5"] .kn-orbit { transform: scale(0.99) translateX(4%); }
.keynote__pin[data-stage="6"] .kn-orbit { transform: scale(0.9) translateX(-9%); }
.keynote__pin[data-stage="7"] .kn-orbit { transform: scale(0.85); }
.keynote__pin[data-stage="8"] .kn-orbit { transform: scale(0.8) translateY(-3vh); }

/* the screen wakes when the story begins */
.kn-photo-screen img { filter: brightness(0.98); transition: filter 1.4s var(--ease) 0.3s; }
.keynote__pin[data-stage="0"] .kn-photo-screen img { filter: brightness(0.22); }

/* light lives on the glass */
.kn-photo-screen::after {
  content: ""; position: absolute; inset: -30%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.075) 50%, transparent 58%);
  transform: translateX(-85%); animation: knsweep 8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes knsweep {
  0%, 55% { transform: translateX(-85%); }
  80%, 100% { transform: translateX(85%); }
}

/* a real notification arrives during the Train scene */
.kn-screen-notif {
  position: absolute; top: 3.5%; left: 5%; right: 5%; z-index: 2;
  padding: 9px 12px; border-radius: 11px;
  background: rgba(18, 24, 31, 0.94); border: 1px solid rgba(168, 232, 12, 0.35);
  color: var(--ink); font-size: 11.5px; font-weight: 700; text-align: left;
  opacity: 0; transform: translateY(-18px);
}
.keynote__pin[data-stage="1"] .kn-screen-notif { animation: knnotif 0.7s var(--ease) 1.1s forwards; }
@keyframes knnotif { to { opacity: 1; transform: none; } }

/* captions land as a second beat, after the visual */
.kn-caption { opacity: 0; }
.kn-caption.is-in { animation: kncap 0.8s var(--ease) 0.55s forwards; }
@keyframes kncap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* final scene: the invitation */
.kn-cta {
  position: absolute; bottom: clamp(118px, 17vh, 180px); z-index: 5;
  opacity: 0; pointer-events: none;
}
.keynote__pin[data-stage="8"] .kn-cta { animation: kncap 0.9s var(--ease) 0.9s forwards; pointer-events: auto; }
.keynote__pin[data-stage="8"] .kn-ring { opacity: 1; }

/* ══ BODY LAB — the signature scene: the phone drives the anatomy ═════── */
.bodylab { position: relative; width: clamp(300px, 34vw, 480px); margin: 0 auto 54px; }
.bodylab .anatomy-photo { width: 100%; }
.bodylab__spot {
  position: absolute; width: 14%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 232, 12, 0.6), transparent 70%);
  filter: blur(7px); opacity: 0; animation: blspot 12s var(--ease) infinite;
  pointer-events: none;
}
.bodylab__spot--chest { left: 20%; top: 21%; }
.bodylab__spot--quads { left: 19%; top: 52%; animation-delay: 4s; }
.bodylab__spot--back { left: 65%; top: 27%; animation-delay: 8s; }
@keyframes blspot { 0%, 6% { opacity: 0; } 12%, 27% { opacity: 1; } 33%, 100% { opacity: 0; } }
/* three beams, one per beat — the phone visibly targets the muscle it lights */
.bodylab__beam {
  position: absolute; height: 2px; transform-origin: right center;
  background: linear-gradient(90deg, transparent, rgba(168, 232, 12, 0.8));
  opacity: 0; animation: blbeam 12s var(--ease) infinite;
}
.bodylab__beam--chest { right: 30%; bottom: 34%; width: 36%; transform: rotate(-38deg); }
.bodylab__beam--quads { right: 30%; bottom: 30%; width: 26%; transform: rotate(-14deg); animation-delay: 4s; }
.bodylab__beam--back { right: 18%; bottom: 36%; width: 30%; transform: rotate(-58deg); animation-delay: 8s; }
@keyframes blbeam { 0%, 6% { opacity: 0; } 12%, 27% { opacity: 0.9; } 33%, 100% { opacity: 0; } }

/* in-screen sync: the same beat pings the muscle inside the phone's UI */
.bodylab__ping {
  position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 232, 12, 0.8), transparent 70%);
  opacity: 0; animation: blspot 12s var(--ease) infinite; pointer-events: none;
}
.bodylab__ping--chest { left: 43%; top: 31%; }
.bodylab__ping--quads { left: 42%; top: 52%; animation-delay: 4s; }
.bodylab__ping--back { left: 55%; top: 12.5%; width: 26%; aspect-ratio: 3.2; border-radius: 10px; background: rgba(168, 232, 12, 0.22); box-shadow: 0 0 0 1.5px rgba(168, 232, 12, 0.7); animation-delay: 8s; }
.bodylab__phone {
  position: absolute; right: -16%; bottom: -5%; width: 47%;
  animation: none !important; transform: rotate(-5deg);
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.65));
}
.bodylab__status {
  position: absolute; left: 0; bottom: -44px; width: 100%; height: 20px; text-align: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lime);
}
.bodylab__status span { position: absolute; left: 0; width: 100%; opacity: 0; animation: blstat 12s var(--ease) infinite; }
.bodylab__status span:nth-child(2) { animation-delay: 4s; }
.bodylab__status span:nth-child(3) { animation-delay: 8s; }
@keyframes blstat { 0%, 5% { opacity: 0; transform: translateY(8px); } 10%, 27% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } }
@media (max-width: 760px) {
  .bodylab { width: min(86vw, 420px); }
  .bodylab__phone { right: -4%; width: 50%; }
}

/* Professional coda chapter — landscape workspace screenshot (no phone chrome) */
.pro-frame { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 44px 90px rgba(0, 0, 0, 0.5); }
.pro-frame img { width: 100%; height: auto; display: block; }

/* ══ /professional.html — flagship page ═════════════════════════════════ */

/* hero cyan variant (site's .hero/.hero__mega exists in CSS but is unused by
   the homepage's keynote hero — reused here rather than inventing a second
   hero pattern) */
.hero--pro .hero__spot::before { background: radial-gradient(circle, rgba(45, 212, 255, 0.09) 0%, transparent 58%); }
.hero--pro .hero__spot::after { background: radial-gradient(circle, rgba(168, 232, 12, 0.06) 0%, transparent 60%); }
.hero__mega-line--cyan { background: linear-gradient(92deg, var(--cyan) 20%, #8FE9FF 50%, var(--cyan) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 28px rgba(45, 212, 255, 0.22)); }

/* editorial "who it's for" list — plain typography, no card grid */
.pro-audience { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; max-width: 900px; margin: 44px auto 0; border-top: 1px solid var(--line); }
.pro-audience__item { flex: 1 1 240px; padding: 26px 22px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; }
.pro-audience__item:nth-child(3n) { border-right: none; }
.pro-audience__item h3 { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.pro-audience__item p { font-size: 13px; color: var(--muted); line-height: 1.6; }
@media (max-width: 760px) { .pro-audience__item { flex: 1 1 100%; border-right: none; } }

/* pricing — one quiet block, not a stack of cards */
.pro-price { max-width: 420px; margin: 44px auto 0; padding: 44px 40px; border: 1px solid var(--line); border-radius: 20px; text-align: center; }
.pro-price__name { font-size: 12px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--cyan); margin-bottom: 18px; }
.pro-price__amt { font-family: var(--font-display); font-size: clamp(42px, 5vw, 56px); font-weight: 900; letter-spacing: -0.02em; }
.pro-price__amt span { font-size: 15px; font-weight: 600; color: var(--faint); }
.pro-price__note { font-size: 12px; color: var(--faint); margin-top: 6px; }
.pro-price__feats { list-style: none; display: grid; gap: 12px; margin: 30px 0 32px; text-align: left; }
.pro-price__feats li { font-size: 13.5px; color: var(--muted); padding-left: 18px; position: relative; }
.pro-price__feats li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }

/* ── Interactive tour — real screens, sample data ─────────────────────── */
.pro-tour { padding: clamp(80px, 12vh, 130px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pro-tour__label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--cyan); }
.pro-tour__label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: tourpulse 1.8s ease-in-out infinite; }
@keyframes tourpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pro-tour__title { font-family: var(--font-display); font-size: clamp(32px, 4.4vw, 56px); font-weight: 900; letter-spacing: -0.02em; margin: 16px 0 40px; }

.pro-tour__rail { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid var(--line); padding-bottom: 0; margin-bottom: 48px; }
.pro-tour__step { background: none; border: none; padding: 0 0 16px; font-family: var(--font); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--faint); cursor: pointer; position: relative; transition: color 0.2s; }
.pro-tour__step:hover { color: var(--muted); }
.pro-tour__step.is-on { color: var(--ink); }
.pro-tour__step.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cyan); }
.pro-tour__step.is-locked { color: var(--line); }
.pro-tour__step.is-locked svg { width: 10px; height: 10px; margin-right: 4px; vertical-align: -1px; }

.pro-tour__stage { display: grid; grid-template-columns: 1.7fr 0.75fr; gap: clamp(32px, 5vw, 56px); align-items: center; min-height: 320px; transition: opacity 0.3s ease; }
.pro-tour__stage.is-fading { opacity: 0; }
@media (max-width: 900px) { .pro-tour__stage { grid-template-columns: 1fr; gap: 32px; } }
.pro-tour__copy .pro-tour__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin-bottom: 12px; }
.pro-tour__copy h3 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 14px; }
.pro-tour__copy p { font-size: 14.5px; color: var(--muted); line-height: 1.75; max-width: 46ch; }
.pro-tour__marks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }
.pro-tour__marks span { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--faint); }
.pro-tour__marks span::before { content: "—"; margin-right: 6px; color: var(--cyan); }

/* Wide/short real screens (a UI strip, not a portrait or dashboard screen)
   read as a thin sliver lost in the stage's side-by-side split — stack
   instead so the image can fill the stage width and stay the hero. */
.pro-tour__wide { grid-column: 1 / -1; text-align: center; }
.pro-tour__wide .pro-frame { max-width: 720px; margin: 0 auto; }
.pro-tour__copy--wide { max-width: 560px; margin: 26px auto 0; text-align: center; }
.pro-tour__copy--wide .pro-tour__eyebrow { justify-content: center; display: flex; }
.pro-tour__copy--wide p { margin: 0 auto; }
.pro-tour__copy--wide .pro-tour__marks { justify-content: center; }

.pro-tour__locked { grid-column: 1 / -1; text-align: center; padding: 60px 24px; border: 1px solid var(--line); border-radius: 16px; }
.pro-tour__locked svg { width: 22px; height: 22px; color: var(--faint); margin-bottom: 14px; }
.pro-tour__locked h3 { font-family: var(--font-display); font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.pro-tour__locked p { font-size: 13px; color: var(--faint); max-width: 40ch; margin: 0 auto; }

.pro-tour__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.pro-tour__count { font-size: 12px; font-weight: 700; color: var(--faint); }
.pro-tour__nav { display: flex; gap: 10px; }
.pro-tour__nav .btn { padding: 11px 22px; font-size: 12.5px; }
.pro-tour__nav .btn:disabled { opacity: 0.3; pointer-events: none; }

/* ── Animated real-screenshot reveals (Live Now / Workspace Switch) ─────
   Real screenshots only — pan/zoom/crossfade/cursor built in CSS on top
   of the actual pixels, nothing drawn or invented. ── */
.pro-anim { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); background: #0a0a0a; }
.pro-anim img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* shared cursor glyph (both variants) — hidden until .is-playing is added */
.pro-anim__cursor { position: absolute; width: 18px; height: 18px; margin: -2px 0 0 -2px; pointer-events: none; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.6)); opacity: 0; }
.pro-anim__cursor svg { width: 100%; height: 100%; }

/* Live Now — full real dashboard frame that smoothly zooms toward the real
   "LIVE NOW" status dot once scrolled into view, holds while the dot's
   highlight ring beats, then eases back out and loops. The dot's own
   color/state is never altered — only a real pixel already in the
   screenshot gets zoomed toward, pointed at, and glowed; nothing is
   repainted or invented. Default (unplayed / no-JS / reduced-motion)
   state is the plain full frame with a static ring — the .is-playing
   class (added by an IntersectionObserver in site.js, skipped entirely
   under prefers-reduced-motion) is what layers the actual motion on top,
   so a visitor who never gets JS or motion still sees a real, informative
   frame instead of nothing. */
.pro-anim--live { aspect-ratio: 1912 / 939; max-width: 900px; margin: 0 auto; }
.pro-anim--live img { transform-origin: 14.9% 16.4%; }
.pro-anim--live.is-playing img { animation: liveZoom 7s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes liveZoom {
  0%, 21.4% { transform: scale(1); }
  35.7%, 78.6% { transform: scale(1.55); }
  100% { transform: scale(1); }
}
.pro-anim__pulse { position: absolute; left: 14.9%; top: 16.4%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--lime); opacity: 1; }
.pro-anim--live.is-playing .pro-anim__pulse { animation: liveDotPulse 1s ease-in-out infinite; }
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 0 rgba(168, 232, 12, 0.55); }
  50% { opacity: 0.45; transform: scale(1.35); box-shadow: inset 0 0 0 2px var(--lime), 0 0 0 10px rgba(168, 232, 12, 0); }
}
.pro-anim--live.is-playing .pro-anim__cursor { animation: liveCursor 7s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes liveCursor {
  0%, 24% { left: 32%; top: 58%; opacity: 0; }
  35.7% { left: 17.5%; top: 19.5%; opacity: 1; }
  78.6% { left: 17.5%; top: 19.5%; opacity: 1; }
  92%, 100% { left: 32%; top: 58%; opacity: 0; }
}

/* Workspace Switch — two real frames (My Performance / Professional
   Workspace), a cursor visits the real toggle control and "clicks" it,
   the frames crossfade to match. Default (unplayed) state shows frame A
   plain and frame B/cursor/click hidden — same reasoning as Live Now:
   a real, informative static frame when motion is off or JS hasn't
   wired .is-playing yet, with the full loop layered on top of it. */
.pro-anim--workspace { aspect-ratio: 1912 / 939; max-width: 900px; margin: 0 auto; }
.pro-anim__frame { position: absolute; inset: 0; }
.pro-anim__frame--a { opacity: 1; }
.pro-anim__frame--b { opacity: 0; }
.pro-anim--workspace.is-playing .pro-anim__frame--a { animation: wsFrameA 8s ease-in-out infinite; }
.pro-anim--workspace.is-playing .pro-anim__frame--b { animation: wsFrameB 8s ease-in-out infinite; }
@keyframes wsFrameA { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wsFrameB { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
.pro-anim--workspace.is-playing .pro-anim__cursor { animation: wsCursor 8s ease-in-out infinite; }
@keyframes wsCursor {
  0% { left: 15%; top: 70%; opacity: 0; }
  6% { opacity: 1; }
  22%, 40% { left: 82.5%; top: 2.7%; opacity: 1; }
  50% { opacity: 0; }
  56%, 90% { left: 76.5%; top: 2.7%; opacity: 1; }
  96% { opacity: 0; }
  100% { left: 15%; top: 70%; opacity: 0; }
}
.pro-anim__click { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; }
.pro-anim__click--a { left: 82.5%; top: 2.7%; }
.pro-anim__click--b { left: 76.5%; top: 2.7%; }
.pro-anim--workspace.is-playing .pro-anim__click--a { animation: wsClickA 8s ease-in-out infinite; }
.pro-anim--workspace.is-playing .pro-anim__click--b { animation: wsClickB 8s ease-in-out infinite; }
@keyframes wsClickA { 0%, 21% { opacity: 0; transform: scale(0.5); } 24% { opacity: 1; transform: scale(0.6); } 32% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }
@keyframes wsClickB { 0%, 55% { opacity: 0; transform: scale(0.5); } 58% { opacity: 1; transform: scale(0.6); } 66% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }

/* lime accent variant — I Train tour (I Coach stays cyan, the default) */
.pro-tour--lime .pro-tour__label { color: var(--lime); }
.pro-tour--lime .pro-tour__label .dot { background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.pro-tour--lime .pro-tour__step.is-on::after { background: var(--lime); }
.pro-tour--lime .pro-tour__copy .pro-tour__eyebrow { color: var(--lime); }
.pro-tour--lime .pro-tour__marks span::before { color: var(--lime); }
.pro-tour--lime .btn--primary { background: var(--lime); }

/* phone-shaped screenshots (I Train) get a constrained, centered frame instead of full-bleed */
.pro-frame--phone { max-width: 300px; margin: 0 auto; }

/* homepage platform-split diptych — two columns, one rule, no cards */
.pro-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; max-width: 820px; margin: 44px auto 0; align-items: start; }
.pro-split__col { padding: 0 32px; }
.pro-split__col:first-child { text-align: right; }
.pro-split__col:last-child { text-align: left; }
.pro-split__label { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }
.pro-split__rule { width: 1px; background: var(--line); }
.pro-split__col p { font-size: 13.5px; color: var(--muted); line-height: 1.7; }

@media (max-width: 640px) {
  .pro-split { grid-template-columns: 1fr; gap: 28px; }
  .pro-split__rule { display: none; }
  .pro-split__col, .pro-split__col:first-child, .pro-split__col:last-child { text-align: center; padding: 0 20px; }
  .pro-audience { border-top: none; }
  .pro-tour__rail { gap: 0 18px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .pro-tour__foot { flex-direction: column; gap: 16px; align-items: stretch; }
  .pro-tour__nav { justify-content: space-between; }
}

/* Desktop: the tab rail is already a full jump-to-any-step control, so the
   Previous/Next/count row below the stage is redundant "carousel" chrome —
   hide it once there's room to comfortably use the tabs instead. Mobile
   keeps it (narrower rail, step-by-step feel genuinely helps there).
   Applies to both product tours (#tour on the Professional page, #train-tour
   on the homepage) — both render the same .pro-tour__foot markup via the
   shared initTour() factory, so both get the same desktop treatment. */
@media (min-width: 1024px) {
  #tour .pro-tour__foot, #train-tour .pro-tour__foot { display: none; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__scroll span { animation: none; }
  .btn, .btn .arrow { transition: none; }
  .keynote { height: auto; }
  .keynote__pin { position: relative; height: auto; min-height: 100svh; padding: 140px 0 90px; }
  .kn-phone { animation: none; }
  .kn-part { animation: none; opacity: 0; }
  .kn-panel { --out: 1; }
  .kn-head { position: static; margin-bottom: 40px; }
  .keynote__pin:not([data-stage="0"]) .kn-head { opacity: 1; transform: none; }
  .kn-watchwrap { opacity: 1; transform: none; }
  .kn-type::after { animation: none; }
  .pro-tour__label .dot { animation: none; }
  .pro-tour__stage { transition: none; }
  /* Belt-and-suspenders only: site.js checks the same prefers-reduced-motion
     query before ever adding .is-playing (the class every .pro-anim
     animation is gated behind), so in practice .is-playing never appears
     here and Live Now / Workspace Switch just render their plain default
     frame — a real, informative static state, not a blank one. This
     override exists only in case .is-playing somehow ends up applied
     anyway; !important guarantees it wins regardless of selector specificity. */
  .pro-anim.is-playing img,
  .pro-anim.is-playing .pro-anim__pulse,
  .pro-anim.is-playing .pro-anim__cursor,
  .pro-anim.is-playing .pro-anim__click,
  .pro-anim.is-playing .pro-anim__frame--a,
  .pro-anim.is-playing .pro-anim__frame--b { animation: none !important; }
}