:root {
  color-scheme: light;
  --ivory: #f7f3ec;
  --ivory-raised: #fffcf7;
  --mist: #eeeaf5;
  --ink: #151326;
  --charcoal: #1d1d29;
  --charcoal-raised: #292837;
  --quiet: #6f6a7b;
  --line: #ded8e5;
  --violet: #6c42e8;
  --violet-bright: #8f6cf0;
  --magenta: #d13c91;
  --coral: #ff776f;
  --green: #5a9d64;
  --cyan: #3a9fe8;
  --error: #c43a4f;
  --shadow-low: 0 12px 36px rgb(42 31 55 / 8%);
  --shadow-console: 0 28px 80px rgb(28 20 44 / 22%);
  --ease-out: cubic-bezier(.25, 1, .5, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --page: min(1440px, calc(100vw - 48px));
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-optical-sizing: auto;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
svg { display: block; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--ivory-raised);
  font-weight: 700;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.section-shell {
  width: var(--page);
  margin-inline: auto;
}

.site-header {
  position: relative;
  z-index: 100;
  width: var(--page);
  min-height: 88px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.site-header.is-stuck {
  position: sticky;
  top: 0;
  width: 100%;
  padding-inline: max(24px, calc((100vw - 1440px) / 2));
  background: rgb(247 243 236 / 90%);
  backdrop-filter: blur(18px) saturate(130%);
  border-bottom: 1px solid rgb(222 216 229 / 70%);
}

.brand {
  width: max-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The wordmark carries the name, so the link holds no text of its own —
   the alt text and aria-label do the naming. */
.brand img {
  height: 26px;
  width: auto;
}

.site-footer .brand img { height: 22px; }

.desktop-nav, .header-actions, .site-footer nav {
  display: flex;
  align-items: center;
}

.desktop-nav { gap: 38px; }

.desktop-nav a, .site-footer nav a {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: .875rem;
  font-weight: 650;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 7px;
  height: 2px;
  background: var(--violet);
  transition: right 220ms var(--ease-out);
}

.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.header-actions { justify-content: flex-end; }

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}

.button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button-dark { background: var(--ink); color: var(--ivory-raised); box-shadow: 0 8px 22px rgb(21 19 38 / 16%); }
.button-dark:hover { background: #29263f; box-shadow: 0 12px 28px rgb(21 19 38 / 22%); }
.button-signal { background: var(--violet); color: white; box-shadow: 0 0 26px rgb(108 66 232 / 36%); }
.button-signal:hover { background: #7d58ec; box-shadow: 0 0 34px rgb(108 66 232 / 52%); }
.button-light { background: var(--ivory-raised); color: var(--ink); }

.icon-button {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-button, .mobile-nav { display: none; }

.hero {
  position: relative;
  min-height: 780px;
  padding: clamp(80px, 11vw, 158px) 0 92px;
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(650px, 1.28fr);
  align-items: center;
  gap: clamp(44px, 6vw, 96px);
  isolation: isolate;
}

.hero-signal {
  position: absolute;
  z-index: -1;
  left: calc((100vw - var(--page)) / -2);
  bottom: 0;
  width: 58vw;
  height: 250px;
  opacity: .9;
  clip-path: path("M0,208 C170,180 242,92 390,126 C535,160 642,20 845,80 L845,250 L0,250 Z");
  background: linear-gradient(110deg, #eee9fb 18%, #d8caf8 58%, #8f6cf0 100%);
}

.eyebrow {
  margin-bottom: 20px;
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--quiet);
}

.eyebrow.violet { color: var(--violet); }

.hero-copy h1 {
  max-width: 7ch;
  margin-left: -.055em;
  font-size: clamp(4.2rem, 6.8vw, 7.25rem);
  line-height: .91;
  letter-spacing: -.068em;
  font-weight: 750;
}

.hero-lede {
  margin-top: 30px;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -.025em;
}

.hero-support {
  max-width: 40ch;
  margin-top: 24px;
  color: #514c5d;
  font-size: 1.03rem;
  line-height: 1.72;
}

.hero-button { margin-top: 36px; min-width: 228px; }

.proof-note {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--quiet);
  font-size: .78rem;
  font-weight: 650;
}

.proof-mark { display: flex; }
.proof-mark i { width: 24px; height: 24px; margin-left: -6px; border: 2px solid var(--ivory); border-radius: 50%; background: linear-gradient(145deg, var(--ink), var(--violet)); }
.proof-mark i:first-child { margin-left: 0; background: linear-gradient(145deg, #bcaac5, var(--ink)); }
.proof-mark i:last-child { background: linear-gradient(145deg, var(--coral), var(--violet)); }

.workout-console {
  position: relative;
  overflow: hidden;
  border: 1px solid #3c3b4a;
  border-radius: 30px;
  background: var(--charcoal);
  color: #fcf9ff;
  box-shadow: var(--shadow-console);
  font-variant-numeric: tabular-nums;
  transition: transform 360ms var(--ease-expo), box-shadow 360ms var(--ease-expo);
}

.workout-console.is-expanded { transform: scale(1.025); box-shadow: 0 42px 110px rgb(28 20 44 / 32%); }

.console-header {
  min-height: 66px;
  padding: 0 18px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #3b3a49;
}

.live-status { display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; }
.live-status span { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 18px var(--violet-bright); }
.console-tools { display: flex; }
.console-icon { color: #b9b4c5; }
.console-icon:hover { color: white; background: var(--charcoal-raised); }

.console-main { display: grid; grid-template-columns: .78fr 1.22fr; min-height: 470px; }
.set-panel { padding: 34px 28px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #3b3a49; }
.console-kicker, .performance-heading span, .set-editor > p { color: #aaa5b6; font-size: .74rem; }
.set-panel h2 { margin-top: 9px; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.025em; }
.set-editor { margin-block: 28px; }
.set-value-row { margin-top: 11px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.set-value-row > span { color: #a9a4b4; font-size: 1.5rem; }
.set-value-row strong { display: flex; align-items: baseline; gap: 7px; font-size: clamp(3.2rem, 4.6vw, 5.3rem); line-height: 1; font-weight: 650; letter-spacing: -.055em; }
.set-value-row small { color: #aaa5b6; font-size: .72rem; font-weight: 650; letter-spacing: 0; }
.set-actions { margin-top: 28px; display: grid; grid-template-columns: 48px 1fr 48px; gap: 12px; }
.round-button { width: 48px; height: 48px; border: 1px solid #52505e; border-radius: 50%; background: transparent; color: #f7f4fb; font-size: 1.4rem; cursor: pointer; transition: background 140ms var(--ease-out), transform 120ms var(--ease-out); }
.round-button:hover { background: var(--charcoal-raised); }
.round-button:active { transform: scale(.94); }
.log-button svg { display: none; }
.log-button.is-success svg { display: block; }
.log-button.is-success { background: var(--green); box-shadow: 0 0 28px rgb(90 157 100 / 36%); }
.coach-tip { padding-top: 20px; border-top: 1px solid #3b3a49; }
.coach-tip span { color: #aaa5b6; font-size: .7rem; }
.coach-tip p { margin-top: 7px; color: #ded9e5; font-size: .79rem; line-height: 1.45; }

.performance-panel { padding: 30px 28px; background: #20202c; }
.performance-heading { display: flex; justify-content: space-between; gap: 16px; }
.performance-heading p { font-size: .8rem; font-weight: 750; }
.performance-heading span { display: block; margin-top: 4px; }
.rep-chip { height: 30px; margin: 0 !important; padding: 7px 11px; border: 1px solid #484654; border-radius: 999px; color: #dcd7e3 !important; }
.mini-performance-chart { position: relative; margin-top: 20px; padding: 2px 0 0 34px; }
.mini-performance-chart svg { width: 100%; overflow: visible; }
.chart-grid path { fill: none; stroke: #42404f; stroke-width: 1; }
.chart-area { fill: url(#consoleArea); }
.chart-line { fill: none; stroke: url(#consoleLine); stroke-width: 3; stroke-linejoin: round; }
.chart-points circle { fill: #fff; stroke: #9a7af4; stroke-width: 2; }
.chart-points .current-point { filter: drop-shadow(0 0 8px #d13c91); }
.axis-label { position: absolute; left: 0; color: #908b9e; font-size: .58rem; }
.axis-strong { top: 4%; }.axis-average { top: 48%; }.axis-weak { bottom: 8%; }
.chart-ticks { padding-left: 4px; display: flex; justify-content: space-between; color: #807b8e; font-size: .58rem; }
.live-insight { margin-top: 22px; padding: 17px; border: 1px solid #454351; border-radius: 14px; background: var(--charcoal-raised); transition: background 240ms var(--ease-out), transform 240ms var(--ease-out); }
.live-insight.has-update { transform: translateY(-2px); background: #302c43; }
.insight-label { display: flex; align-items: center; justify-content: space-between; color: #bcb6c6; font-size: .68rem; }
.insight-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.insight-value { margin-top: 13px; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.insight-value span, .insight-value small { display: block; color: #9e98a9; font-size: .64rem; }
.insight-value strong { display: block; margin-block: 2px; font-size: 1.9rem; line-height: 1; }
.sparkline { width: 110px; }
.sparkline path { fill: none; stroke: #ad91ff; stroke-width: 2; }.sparkline circle { fill: #ff82bc; }

.console-footer { min-height: 78px; display: grid; grid-template-columns: 1.4fr repeat(3, .65fr) auto; align-items: center; border-top: 1px solid #3b3a49; }
.console-footer > * { min-height: 50px; padding-inline: 18px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #3b3a49; }
.exercise-progress span { color: #d5d0dc; font-size: .7rem; }
.progress-track { width: 100%; height: 5px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: #494754; }
.progress-track span { width: 100%; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--magenta)); transform: scaleX(.6); transform-origin: left center; transition: transform 480ms var(--ease-expo); }
.session-stat strong { font-size: .96rem; }.session-stat strong small { color: #aaa5b6; font-size: .58rem; }.session-stat > span { margin-top: 4px; color: #8e8998; font-size: .58rem; }
.pause-button { margin: 0 14px; border: 1px solid #55525f; color: white; }
.pause-button .play-icon { display: none; fill: currentColor; }
.pause-button[aria-pressed="true"] .pause-icon { display: none; }.pause-button[aria-pressed="true"] .play-icon { display: block; }

/* Full-bleed band, but its content lands on the same gutter as `--page` so the
   three items line up with the sections above and below. */
.evidence-strip {
  width: 100%;
  padding: 68px max(12px, calc((100% - var(--page)) / 2));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--line);
  background: var(--ivory-raised);
}

.evidence-item { min-height: 88px; padding: 0 clamp(20px, 3vw, 52px); display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 18px; }
.evidence-item + .evidence-item { border-left: 1px solid var(--line); }
.evidence-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #ece4fb; color: var(--violet); }
.evidence-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.evidence-icon.recovery-icon { background: #e7efdf; color: var(--green); }
.evidence-item h2 { font-size: .9rem; line-height: 1.35; letter-spacing: -.015em; }
.evidence-item p { margin-top: 6px; color: var(--quiet); font-size: .77rem; line-height: 1.55; }

.insight-section { min-height: 820px; padding-block: 118px 90px; display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 60px; }
.insight-copy { position: relative; z-index: 3; }
.insight-copy h2, .connected-heading h2, .closing-section h2 { margin-left: -.04em; font-size: clamp(2.75rem, 4.3vw, 5rem); line-height: 1; letter-spacing: -.05em; font-weight: 720; }
.insight-copy > p:not(.eyebrow), .connected-heading > p:not(.eyebrow) { max-width: 38ch; margin-top: 26px; color: var(--quiet); line-height: 1.68; }
.check-list { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 17px; font-size: .88rem; font-weight: 680; }
.check-list li { position: relative; padding-left: 26px; }
.check-list li::before { content: ""; position: absolute; left: 1px; top: 3px; width: 10px; height: 6px; border-left: 2px solid var(--violet); border-bottom: 2px solid var(--violet); transform: rotate(-45deg); }

.trajectory { position: relative; min-height: 650px; }
.trajectory-field { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trajectory-river { fill: url(#trajectoryFill); }
.trajectory-guide { fill: none; stroke: url(#trajectoryStroke); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 8; }
.trajectory-dots circle { fill: var(--ink); }
.trajectory-dots .trajectory-current { fill: var(--coral); stroke: #ffddd7; stroke-width: 12; filter: url(#pointGlow); }
.trajectory-note { position: absolute; display: grid; gap: 5px; font-size: .72rem; }
.trajectory-note span { color: var(--quiet); }.trajectory-note strong { font-size: .84rem; line-height: 1.35; }
.note-week-one { left: 7%; bottom: 9%; }.note-week-four { left: 29%; top: 44%; }.note-today { right: 8%; top: 3%; text-align: center; }
.movement-card { position: absolute; right: 4%; bottom: 2%; width: 245px; padding: 22px; border: 1px solid #e4dee7; border-radius: 18px; background: rgb(255 252 247 / 91%); box-shadow: var(--shadow-low); backdrop-filter: blur(12px); }
.movement-card > p { color: var(--quiet); font-size: .68rem; }.movement-card h3 { margin: 7px 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: .85rem; }
.movement-stat + .movement-stat { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); }.movement-stat span, .movement-stat small { display: block; color: var(--quiet); font-size: .64rem; }.movement-stat strong { display: block; margin: 3px 0; font-size: 1.5rem; }

.connected-section { padding-block: 120px 140px; }
/* Sits on the page gutter like every other section heading — centring it here
   broke the single left edge the rest of the page reads down. */
.connected-heading { width: min(760px, 100%); }
.signal-system { margin-top: 75px; display: grid; grid-template-columns: minmax(270px, .85fr) minmax(220px, .75fr) minmax(270px, .8fr); align-items: center; }
.signal-inputs { display: grid; gap: 18px; }
.signal-input { min-height: 86px; padding: 16px 20px; display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: 16px; border: 1px solid #e5dfe8; border-radius: 18px; background: var(--ivory-raised); box-shadow: var(--shadow-low); }
.signal-icon { width: 45px; height: 45px; display: grid; place-items: center; color: var(--violet); }
.signal-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.recovery-signal .signal-icon { color: var(--green); }.nutrition-signal .signal-icon { color: var(--cyan); }
.signal-input h3 { font-size: .84rem; }.signal-input p { margin-top: 5px; color: var(--quiet); font-size: .72rem; }
.signal-convergence { position: relative; height: 280px; }
.signal-convergence > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.signal-convergence path { fill: none; stroke-width: 2; stroke-dasharray: 5 6; }.training-path { stroke: var(--violet); }.recovery-path { stroke: var(--green); }.nutrition-path { stroke: var(--cyan); }.output-path { stroke: var(--ink); }
.kinesis-node { position: absolute; top: 50%; left: 73%; width: 74px; height: 74px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); color: white; box-shadow: 0 14px 38px rgb(21 19 38 / 24%); }
.kinesis-node img { width: 44px; height: auto; }
.recommendation-card { width: min(300px, 100%); padding: 28px; border: 1px solid #e2dce6; border-radius: 20px; background: var(--ivory-raised); box-shadow: var(--shadow-low); }
.recommendation-card > p:first-child { color: var(--quiet); font-size: .7rem; font-weight: 700; }.recommendation-card h3 { margin-top: 24px; font-size: 2rem; line-height: 1.14; letter-spacing: -.04em; }.recommendation-card h3 + p { margin-top: 18px; color: var(--quiet); font-size: .82rem; line-height: 1.6; }.apply-button { width: 100%; margin-top: 24px; font-size: .8rem; }.apply-button.is-applied { background: var(--green); box-shadow: 0 0 28px rgb(90 157 100 / 30%); }

.closing-section { position: relative; min-height: 500px; margin-bottom: 32px; padding: 105px clamp(32px, 7vw, 110px); overflow: hidden; border-radius: 32px; background: var(--ink); color: var(--ivory-raised); }
.closing-section .eyebrow { color: #b9b2c3; }.closing-section h2 { position: relative; z-index: 2; max-width: 12ch; }.closing-section .button { position: relative; z-index: 2; margin-top: 40px; }
.closing-signal { position: absolute; right: -5%; bottom: -30%; width: 65%; height: 120%; border-radius: 50% 10% 0 0; transform: rotate(-15deg); background: radial-gradient(circle at 20% 25%, var(--coral), transparent 22%), radial-gradient(circle at 38% 38%, var(--magenta), transparent 42%), radial-gradient(circle at 65% 65%, var(--violet), transparent 58%); filter: saturate(115%); opacity: .9; }

.site-footer { width: var(--page); min-height: 140px; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; color: var(--quiet); font-size: .76rem; }
.site-footer .brand { color: var(--ink); }.site-footer nav { justify-content: flex-end; gap: 28px; }.site-footer nav a { color: var(--ink); }

/* Anatomy is shown as a working surface, not a screenshot gallery. The three
   crops echo the app's dynamic camera framing while the shared black field
   lets the model edges disappear naturally. */
.anatomy-section {
  padding-block: clamp(86px, 10vw, 148px);
  overflow: hidden;
  background: oklch(16% .016 275);
  color: oklch(96% .008 85);
}

.anatomy-copy {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(280px, .6fr);
  align-items: end;
  gap: clamp(32px, 8vw, 120px);
}

.anatomy-copy .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -18px;
  color: oklch(73% .14 263);
}

.anatomy-copy h2 {
  max-width: 9ch;
  margin-left: -.04em;
  font-size: clamp(3rem, 5.4vw, 6rem);
  font-weight: 720;
  line-height: .94;
  letter-spacing: -.055em;
}

.anatomy-copy > p:last-child {
  max-width: 42ch;
  color: oklch(76% .015 275);
  line-height: 1.72;
}

.anatomy-stage {
  position: relative;
  min-height: 650px;
  margin-top: clamp(56px, 7vw, 92px);
  display: grid;
  grid-template-columns: .88fr 1.2fr .88fr;
  align-items: end;
  gap: clamp(10px, 2vw, 28px);
  isolation: isolate;
}

.anatomy-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 15% 8% 3%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(48% .19 269 / .2), transparent 68%);
  filter: blur(36px);
}

.anatomy-frame {
  position: relative;
  height: 560px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid oklch(43% .02 275);
  background: oklch(15.5% .014 275);
}

.anatomy-frame-pull { height: 650px; }

.anatomy-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  mix-blend-mode: screen;
  filter: saturate(.88) contrast(1.04);
}

.anatomy-frame-push img { object-position: 50% 20%; }
.anatomy-frame-legs img { object-position: 50% 40%; }

.anatomy-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, oklch(15.5% .014 275 / .94) 100%);
}

.anatomy-frame figcaption {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 2vw, 28px);
  right: clamp(16px, 2vw, 28px);
  bottom: 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.anatomy-frame figcaption span {
  color: oklch(82% .11 263);
  font-size: .76rem;
  font-weight: 750;
}

.anatomy-frame figcaption strong {
  color: oklch(76% .015 275);
  font-size: .68rem;
  font-weight: 550;
  text-align: right;
}

.anatomy-readout {
  position: absolute;
  z-index: 3;
  top: 25px;
  left: calc(50% + 38px);
  min-width: 188px;
  padding: 15px 18px;
  border: 1px solid oklch(48% .06 265 / .72);
  border-radius: 12px;
  background: oklch(20% .026 273 / .94);
  box-shadow: 0 18px 46px oklch(8% .01 275 / .45);
}

.anatomy-readout span,
.anatomy-readout strong { display: block; }
.anatomy-readout span { color: oklch(70% .02 275); font-size: .68rem; }
.anatomy-readout strong { margin-top: 5px; font-size: .82rem; }
.anatomy-readout i { width: 52%; height: 3px; margin-top: 12px; display: block; border-radius: 999px; background: oklch(67% .18 263); box-shadow: 0 0 18px oklch(62% .2 263 / .7); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease-expo), transform 600ms var(--ease-expo); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  :root { --page: min(100% - 40px, 1080px); }
  .hero { grid-template-columns: .65fr 1.35fr; gap: 36px; }
  .hero-copy h1 { font-size: clamp(3.8rem, 6.4vw, 5.6rem); }
  .console-main { min-height: 440px; }.set-panel, .performance-panel { padding: 26px 22px; }.set-value-row strong { font-size: 3.8rem; }
  .evidence-item { padding-inline: 24px; }
  .signal-system { grid-template-columns: 1fr .72fr .8fr; }
}

@media (max-width: 900px) {
  :root { --page: min(100% - 32px, 780px); }
  .site-header { grid-template-columns: 1fr auto; min-height: 76px; }.desktop-nav { display: none; }.menu-button { display: inline-grid; }.header-cta { display: none; }
  .mobile-nav { position: absolute; top: 68px; left: 0; right: 0; padding: 14px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 18px; background: var(--ivory-raised); box-shadow: var(--shadow-low); }
  .mobile-nav[hidden] { display: none; }.mobile-nav a { min-height: 48px; padding: 12px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; }.mobile-nav a:hover { background: var(--mist); }
  .hero { padding-top: 74px; grid-template-columns: 1fr; gap: 64px; }.hero-copy { max-width: 580px; }.hero-support { max-width: 52ch; }.hero-signal { width: 88vw; bottom: 370px; }
  .workout-console { width: 100%; }.set-value-row strong { font-size: clamp(3.7rem, 9vw, 5rem); }
  .evidence-strip { grid-template-columns: 1fr; padding-block: 32px; }.evidence-item { max-width: 640px; width: 100%; margin-inline: auto; padding-block: 24px; }.evidence-item + .evidence-item { border-left: 0; border-top: 1px solid var(--line); }
  .insight-section { padding-block: 100px 50px; grid-template-columns: 1fr; gap: 48px; }.insight-copy { max-width: 570px; }.trajectory { min-height: 620px; }
  .connected-heading { margin: 0; }.signal-system { grid-template-columns: 1fr; gap: 20px; }.signal-inputs { max-width: 560px; }.signal-convergence { width: 360px; height: 190px; margin-left: 100px; transform: rotate(90deg); transform-origin: center; }.kinesis-node { transform: translate(-50%, -50%) rotate(-90deg); }.recommendation-card { margin-left: auto; margin-right: 40px; }
  .site-footer { grid-template-columns: 1fr 1fr; }.site-footer > p { text-align: right; }.site-footer nav { grid-column: 1 / -1; justify-content: flex-start; }
  .anatomy-copy { grid-template-columns: 1fr; gap: 24px; }.anatomy-copy .eyebrow { grid-column: auto; margin-bottom: -8px; }.anatomy-copy h2 { max-width: 11ch; }.anatomy-copy > p:last-child { max-width: 56ch; }
  .anatomy-stage { min-height: 560px; }.anatomy-frame { height: 460px; }.anatomy-frame-pull { height: 540px; }.anatomy-frame figcaption { align-items: flex-start; flex-direction: column; gap: 4px; }.anatomy-frame figcaption strong { text-align: left; }
}

@media (max-width: 640px) {
  :root { --page: calc(100% - 24px); }
  .site-header.is-stuck { padding-inline: 12px; }
  .hero { min-height: 0; padding-top: 54px; padding-bottom: 64px; gap: 54px; }.hero-copy h1 { font-size: clamp(3.55rem, 18vw, 5rem); }.hero-lede { margin-top: 24px; }.hero-support { font-size: .96rem; line-height: 1.62; }.hero-button { width: 100%; }.hero-signal { bottom: 500px; width: 100vw; height: 180px; opacity: .65; }
  .workout-console { border-radius: 23px; }.console-header { min-height: 60px; padding-left: 18px; }.console-main { grid-template-columns: 1fr; }.set-panel { min-height: 430px; border-right: 0; border-bottom: 1px solid #3b3a49; }.performance-panel { padding-bottom: 24px; }.set-value-row strong { font-size: clamp(3.45rem, 17vw, 4.9rem); }.set-actions { grid-template-columns: 48px minmax(110px, 1fr) 48px; }.mini-performance-chart { margin-top: 24px; }
  .console-footer { grid-template-columns: 1fr 1fr auto; padding: 10px 8px; }.console-footer > * { padding-inline: 12px; }.exercise-progress { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #3b3a49; padding-bottom: 13px; }.session-stat:nth-of-type(4) { display: none; }.pause-button { margin: 0 6px; }
  .evidence-strip { padding-inline: 12px; }.evidence-item { grid-template-columns: 48px 1fr; padding-inline: 12px; }.evidence-icon { width: 48px; height: 48px; }
  .insight-section { padding-top: 84px; overflow: hidden; }.insight-copy h2, .connected-heading h2, .closing-section h2 { font-size: clamp(2.7rem, 12vw, 4rem); }.trajectory { min-height: 590px; margin-inline: -12px; }.trajectory-field { width: 125%; left: -22%; }.note-week-one { left: 2%; }.note-week-four { left: 23%; top: 42%; }.note-today { right: 4%; }.movement-card { right: 2%; bottom: 0; width: 220px; padding: 18px; }
  .connected-section { padding-block: 90px; }.signal-system { margin-top: 52px; }.signal-convergence { width: 260px; margin: 6px auto; }.recommendation-card { width: 100%; margin: 0; }.signal-input { min-height: 80px; }
  .closing-section { min-height: 520px; padding: 72px 25px; border-radius: 24px; }.closing-signal { width: 115%; height: 70%; right: -38%; bottom: -8%; }.closing-section .button { width: 100%; }
  .site-footer { min-height: 220px; padding-block: 40px; grid-template-columns: 1fr; align-content: center; }.site-footer > p { text-align: left; }.site-footer nav { grid-column: auto; flex-wrap: wrap; }
  .anatomy-section { padding-block: 76px; }.anatomy-stage { min-height: 510px; margin-top: 46px; grid-template-columns: .72fr 1.2fr .72fr; gap: 5px; }.anatomy-frame { height: 390px; }.anatomy-frame-pull { height: 475px; }.anatomy-frame img { object-position: center 20%; }.anatomy-frame figcaption { left: 10px; right: 10px; bottom: 14px; }.anatomy-frame figcaption strong { display: none; }.anatomy-readout { top: 5px; left: 44%; min-width: 156px; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .hero-signal, .closing-signal, .trajectory-river { display: none; }
  .button, .round-button, .workout-console, .signal-input, .recommendation-card { border: 1px solid ButtonText; }
}

/* ---------------------------------------------------------------------
   EVIDENCE LEDGER
   The page's signature. It reads as a ledger rather than a feature grid
   because that is literally what it is: the engine's coefficients and
   their sources. Numbers are set in tabular figures at display size so
   they read as DATA, not marketing. The final row is the point of the
   whole section — it admits ignorance, so it is styled as a deliberate
   break in the rhythm rather than a fourth identical entry.
   No new palette: every value below is an existing token.
   --------------------------------------------------------------------- */
.ledger-section {
  padding: clamp(80px, 10vw, 150px) 0 clamp(60px, 8vw, 118px);
  display: grid;
  gap: clamp(40px, 5vw, 76px);
}

.ledger-heading h2 {
  margin: 0;
  margin-left: -.04em;
  font-size: clamp(2.75rem, 4.3vw, 5rem);
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 720;
}

.ledger-heading > p:not(.eyebrow) {
  max-width: 44ch;
  margin-top: 26px;
  color: var(--quiet);
  line-height: 1.68;
}

.ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.ledger-row {
  display: grid;
  grid-template-columns: minmax(180px, 22%) minmax(0, 1fr) minmax(210px, 26%);
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(26px, 3.2vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}

/* Tabular lining figures keep the decimal points optically aligned down
   the column, which is what makes a ledger read as a ledger. */
.ledger-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(2.1rem, 3.4vw, 3.3rem);
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--violet);
  white-space: nowrap;
}

.ledger-unit {
  margin-left: .32em;
  font-size: .34em;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--quiet);
}

.ledger-claim {
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  line-height: 1.6;
  color: var(--ink);
}

.ledger-claim strong { font-weight: 720; }

.ledger-source {
  font-style: normal;
  font-size: .82rem;
  line-height: 1.55;
  letter-spacing: .015em;
  color: var(--quiet);
}

.ledger-source em { font-style: italic; }

/* The break in rhythm. The engine's willingness to say "I don't know" is
   the differentiator, so it gets the emphasis a fourth data row would not. */
.ledger-row-unknown {
  border-bottom: none;
  background:
    linear-gradient(180deg, rgb(238 234 245 / 0) 0%, rgb(238 234 245 / 62%) 100%);
  border-radius: 0 0 24px 24px;
  padding-bottom: clamp(34px, 4vw, 52px);
}

.ledger-value-unknown {
  color: var(--line);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
}

@media (max-width: 860px) {
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 26px 0;
  }
  .ledger-value { font-size: 2.4rem; }
  .ledger-source { padding-top: 4px; }
}

/* The unknown row's mark is an ABSENCE, so it stays pale — but it still has
   to hold the column against 3.3rem neighbours, or it reads as a rendering
   error rather than a deliberate answer. */
.ledger-value-unknown {
  color: var(--line);
  font-size: clamp(3.4rem, 5.2vw, 5rem);
  font-weight: 760;
  line-height: .85;
}

/* Inline code in a citation: the engine's literal return value, so it should
   look like code without shouting. */
.ledger-source code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgb(108 66 232 / 8%);
  color: var(--violet);
}

/* The unknown row carries its own generous bottom padding and a rounded
   wash that already reads as a section terminus, so the section's own
   bottom padding stacked with the next section's top padding into a dead
   gap. Let the row BE the ending. */
.ledger-section { padding-bottom: clamp(8px, 1.5vw, 24px); }

/* The manual line break is a DESKTOP composition decision. On narrow
   screens it fights natural wrapping and produces a ragged three-line
   heading, so let the text wrap on its own. */
@media (max-width: 860px) {
  .ledger-heading h2 br { display: none; }
}