/* ==========================================================================
   Kinetic — kineticai.me
   Palette mirrors the app: kinetic-mobile/client/shared/theme/colors.ts
   Type: Geist + Geist Mono (SIL OFL), self-hosted — no third-party requests.
   ========================================================================== */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  /* Surfaces — from the app's colors.ts */
  --bg-root: #0b0b12;
  --bg: #14141f;
  --surface: #1c1c2a;
  --surface-2: #252535;

  /* Brand */
  --primary: #8b5cf6;
  --primary-deep: #7c3aed;
  --primary-light: #a78bfa;
  --primary-muted: rgba(139, 92, 246, 0.15);
  --primary-glow: rgba(139, 92, 246, 0.35);

  /* Signal */
  --success: #22c55e;
  --gold: #fbbf24;
  --warning: #f97316;
  --error: #ef4444;

  /* Text */
  --text: #ffffff;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --text-4: #475569;

  /* Lines */
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);
  --separator: rgba(255, 255, 255, 0.06);

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Motion — no springs; calm ease-out (see brand rule) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 400ms;

  /* Layout */
  --maxw: 1180px;
  --gutter: 24px;
  --nav-h: 64px;

  /* Breakpoints, documented (CSS vars can't be used in media queries):
     1200 · 992 · 768 · 560 · 380 */
}

/* ---------- Reset ---------- */

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

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* lets height:auto animate, used by the FAQ accordion */
  interpolate-size: allow-keywords;
}

body {
  background: var(--bg-root);
  color: var(--text);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--primary-light);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* ---------- Focus + skip link ---------- */

:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  text-decoration: none;
}

/* ---------- Utilities ---------- */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.eyebrow {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: var(--s-4);
}

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

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

/* ---------- Reveal animation ---------- */

/* ~400ms ease-out fade with a small rise. No springs, no scale — entrances
   stay calm. Desktop only; see the note in index.html. */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Where the layout stacks, content is present from the start — never hidden,
   even for the moment before the script runs. */
@media (max-width: 992px) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 11, 18, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--separator);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--text);
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav-links a {
  color: var(--text-2);
  font-size: 15px;
  font-weight: 450;
  transition: color 180ms var(--ease);
}

.nav-links a:hover {
  color: var(--text);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 240ms var(--ease), opacity 180ms var(--ease);
}

.nav-toggle span + span {
  margin-top: 5px;
}

body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile sheet */
.nav-sheet {
  display: none;
  position: fixed;
  inset: var(--nav-h) 0 0;
  z-index: 40;
  background: var(--bg-root);
  padding: var(--s-6) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
  flex-direction: column;
  gap: var(--s-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease);
}

.nav-sheet a {
  color: var(--text);
  font-size: 20px;
  font-weight: 500;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--separator);
}

.nav-sheet a:hover {
  text-decoration: none;
  color: var(--primary-light);
}

body.nav-open .nav-sheet {
  opacity: 1;
  pointer-events: auto;
}

body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 640px;
  background: radial-gradient(
    ellipse 60% 55% at 30% 40%,
    rgba(139, 92, 246, 0.18) 0%,
    transparent 70%
  );
  z-index: -1;
  pointer-events: none;
}

/* Grid/flex children default to min-width:auto, which lets wide content
   (images, tables, mono strings) force the whole page wider than the phone.
   Reset it everywhere we lay out. */
.hero-inner > *,
.pillar > *,
.proof-grid > *,
.social-grid > * {
  min-width: 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--s-7);
  padding: clamp(32px, 4.5vw, 60px) 0 clamp(40px, 5.5vw, 72px);
}

.hero h1 {
  font-size: clamp(40px, 6.4vw, 68px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.032em;
  margin-bottom: var(--s-5);
  text-wrap: balance;
}

.hero .sub {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
  margin-bottom: var(--s-6);
}

/* Hero artwork — bleeds, no frame. The source PNG is already near-black,
   so a mask lets it dissolve into the page instead of reading as a card. */
.hero-art {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 470px;
}

/* <picture> is inline by default, so `img { width: 100% }` would resolve
   against the image's intrinsic 896px instead of the column — which blows the
   page out to 506px on phones. Make it a block. */
.hero-art picture {
  display: block;
  width: 100%;
}

/* The artwork carries a real alpha channel (luminance baked to alpha at build
   time), so the black canvas is genuinely transparent. No blend mode, no mask
   — it composites cleanly over the page or over the mobile frame, with no
   seam where the image box ends. */
.hero-art img {
  width: 100%;
  height: auto;
}

/* ---------- Store CTA ---------- */

.store-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

.store-badge {
  display: inline-block;
  border-radius: 9px;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.store-badge img {
  height: 54px;
  width: auto;
}

.store-badge:hover {
  transform: translateY(-1px);
}

/* Unreleased state: still focusable and announced, unlike a stripped <a>. */
.store-badge[aria-disabled="true"] {
  opacity: 0.75;
  cursor: default;
}

.store-badge[aria-disabled="true"]:hover {
  transform: none;
}

.coming-soon {
  display: none;
  align-items: center;
  gap: var(--s-2);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-light);
  background: var(--primary-muted);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: var(--r-full);
  padding: 5px 14px;
}

.store-cta.is-coming-soon .coming-soon {
  display: inline-flex;
}

.store-cta [hidden] {
  display: none !important;
}

/* TestFlight beta button. Apple's App Store badge may only link to the App
   Store, so the beta gets a first-party button in the app's palette instead. */
.tf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 54px;
  padding: 0 var(--s-5) 0 var(--s-4);
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 24px var(--primary-glow);
  transition: transform 200ms var(--ease), background 200ms var(--ease), box-shadow 200ms var(--ease);
}

.tf-btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.tf-btn:hover {
  background: var(--primary-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px var(--primary-glow);
}

.tf-btn:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 3px;
}

.tf-note {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.coming-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-light);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  padding: clamp(64px, 10vw, 128px) 0;
}

.section + .section {
  border-top: 1px solid var(--separator);
}

.section-head {
  max-width: 660px;
  margin-bottom: var(--s-8);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.section-head p {
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--text-2);
  line-height: 1.6;
}

/* ---------- Pillar rows ---------- */

.pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}

.pillar.reverse .pillar-media {
  order: -1;
}

.pillar-copy h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.026em;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

/* Must exclude .eyebrow and .note: `.pillar-copy > p` (0,1,1) outranks the
   plain `.eyebrow` class (0,1,0) and was forcing both to 16px. */
.pillar-copy > p:not(.eyebrow):not(.note) {
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--text-2);
  margin-bottom: var(--s-6);
}

.pillar-media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Checklist */
.checks {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: 16px;
  color: var(--text-2);
}

.checks li strong {
  color: var(--text);
  font-weight: 500;
}

.checks .tick {
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--primary-muted);
  border: 1px solid rgba(139, 92, 246, 0.3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.checks .tick svg {
  width: 12px;
  height: 12px;
  stroke: var(--primary-light);
  stroke-width: 2.5;
  fill: none;
}

/* Not-yet-shipped capability: visually softer, and always labelled. */
.checks .tick.soon {
  background: rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.25);
}

.checks .tick.soon svg {
  stroke: var(--text-3);
}

.soon-tag {
  display: inline-block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}

.note {
  margin-top: var(--s-5);
  font-size: 14px;
  color: var(--text-3);
  line-height: 1.55;
}

/* ==========================================================================
   Phone mockup — hand-built app UI (no screenshots, no real user data)
   ========================================================================== */

.phone {
  position: relative;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 300 / 620;
  background: #05050a;
  border: 1px solid var(--border-strong);
  border-radius: 42px;
  padding: 9px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 40px 90px -30px var(--primary-glow);
  flex-shrink: 0;
}

.phone-screen {
  position: relative;
  height: 100%;
  background: var(--bg);
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Dynamic island */
.phone-screen::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 22px;
  background: #05050a;
  border-radius: var(--r-full);
  z-index: 5;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}

.status-bar .bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
}

.status-bar .bars i {
  width: 2.5px;
  background: var(--text);
  border-radius: 1px;
}

.status-bar .bars i:nth-child(1) { height: 30%; }
.status-bar .bars i:nth-child(2) { height: 55%; }
.status-bar .bars i:nth-child(3) { height: 78%; }
.status-bar .bars i:nth-child(4) { height: 100%; }

.status-bar .batt {
  width: 20px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  position: relative;
  padding: 1.5px;
}

.status-bar .batt::after {
  content: "";
  display: block;
  height: 100%;
  width: 72%;
  background: var(--text);
  border-radius: 1px;
}

.app {
  flex: 1;
  overflow: hidden;
  padding: var(--s-3) 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.app-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-sub {
  font-size: 10.5px;
  color: var(--text-3);
}

.pill {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: var(--primary-muted);
  color: var(--primary-light);
  border: 1px solid rgba(139, 92, 246, 0.28);
  white-space: nowrap;
}

.pill.green {
  background: rgba(34, 197, 94, 0.14);
  color: var(--success);
  border-color: rgba(34, 197, 94, 0.3);
}

/* Stats strip inside the app */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  overflow: hidden;
}

.stat-strip div {
  padding: 9px 6px;
  text-align: center;
}

.stat-strip div + div {
  border-left: 1px solid var(--separator);
}

.stat-strip .k {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.stat-strip .v {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
}

/* Exercise card + set rows */
.ex-card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 10px;
}

.ex-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 9px;
}

/* Real exercise renders, presented the way the app presents them: a white
   rounded tile on the dark surface. Matches ExerciseGifThumbnail. */
.ex-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
  display: block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.ex-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Session header — mirrors the app's Duration / Volume / Sets bar */
.sess-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: 9px;
}

.sess-title {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  flex: 1;
}

.sess-date {
  font-size: 9.5px;
  color: var(--text-3);
  margin-top: 1px;
}

.btn-finish {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border-radius: var(--r-full);
  padding: 5px 14px;
  white-space: nowrap;
}

.chev {
  color: var(--text-2);
  font-size: 13px;
  width: 22px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--separator);
  padding: 8px 0;
}

.metrics > div {
  text-align: center;
}

.metrics .k {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.metrics .v {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

.metrics .v small {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}

/* Rest pill replaces the middle metric while a rest timer runs */
.rest-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1.5px solid var(--primary);
  border-radius: var(--r-full);
  padding: 4px 8px;
  color: var(--primary-light);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
}

.rest-pill .ring {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(139, 92, 246, 0.3);
  border-top-color: var(--primary);
  flex-shrink: 0;
}

.rest-pill span {
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 400;
}

.ex-sub {
  font-size: 9.5px;
  color: var(--text-3);
  margin-top: 1px;
}

.dots {
  margin-left: auto;
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: 1px;
  align-self: flex-start;
}

/* Set grid — completed sets get a green wash and outlined inputs */
.set-cols {
  display: grid;
  grid-template-columns: 22px 1fr 1fr 26px;
  gap: 6px;
  align-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 6px 0;
}

.kg-chip {
  background: #221f38;
  border-radius: 5px;
  padding: 3px 0;
  text-align: center;
  color: var(--primary-light);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.srow {
  display: grid;
  grid-template-columns: 22px 1fr 1fr 26px;
  gap: 6px;
  align-items: center;
  padding: 5px 0;
}

.srow.ok {
  background: rgba(34, 197, 94, 0.09);
}

/* Grid, not text-align — the global `svg { display:block }` rule would
   otherwise left-align the PR medal inside this cell. */
.srow .n {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-light);
  display: grid;
  place-items: center;
  height: 100%;
}

.srow.ok .n {
  color: var(--success);
}

.srow .box {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  color: var(--text);
}

.srow.ok .box {
  border: 1px solid rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.06);
}

.srow.todo .box {
  color: var(--text-4);
}

.srow .tick-c {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  justify-self: center;
  display: grid;
  place-items: center;
}

.srow.ok .tick-c {
  background: var(--success);
  border-color: var(--success);
}

.srow .tick-c svg {
  width: 10px;
  height: 10px;
  stroke: #06210f;
  stroke-width: 3.5;
  fill: none;
}

.srow.todo .tick-c svg {
  display: none;
}

.add-set {
  text-align: center;
  font-size: 10px;
  color: var(--text-3);
  padding: 7px 0 2px;
  border-top: 1px solid var(--separator);
  margin-top: 5px;
}

/* Floating coach button, bottom-right of the session screen */
.coach-fab {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2a1f4d;
  border: 1px solid rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 18px var(--primary-glow);
  display: grid;
  place-items: center;
  font-size: 15px;
}

.ex-name {
  font-size: 12px;
  font-weight: 550;
  color: var(--primary-light);
  line-height: 1.2;
}

.set-head,
.set-row {
  display: grid;
  grid-template-columns: 20px 1fr 34px 30px 22px;
  gap: 6px;
  align-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
}

.set-head {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 5px;
}

.set-row {
  padding: 5px 4px;
  border-radius: 6px;
  color: var(--text-2);
  margin-inline: -4px;
}

.set-row .prev {
  color: var(--text-4);
}

.set-row .val {
  color: var(--text);
  font-weight: 500;
}

.set-row.done {
  background: rgba(34, 197, 94, 0.1);
}

.set-row.warm .idx {
  color: var(--warning);
}

.set-row .check {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  justify-self: end;
}

.set-row.done .check {
  background: var(--success);
  border-color: var(--success);
}

.set-row .check svg {
  width: 9px;
  height: 9px;
  stroke: #05140a;
  stroke-width: 3;
  fill: none;
}

.rest-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--primary-muted);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--primary-light);
}

/* ---------- Charts inside the phone ---------- */

.chart-card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: 11px;
}

.chart-card .ct {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  font-family: "Geist Mono", ui-monospace, monospace;
}

.chart-card .cv {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 3px;
}

.delta {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--success);
}

.delta.down {
  color: var(--warning);
}

/* MEV/MRV landmark bar */
.landmark {
  margin-top: 4px;
}

.landmark-track {
  position: relative;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}

.landmark-zone {
  position: absolute;
  inset-block: 0;
  left: 32%;
  width: 40%;
  background: rgba(34, 197, 94, 0.4);
}

.landmark-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 56%;
  width: 2px;
  background: var(--text);
  border-radius: 1px;
}

.landmark-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  color: var(--text-4);
  text-transform: uppercase;
}

/* Muscle readiness rows */
.ready-row {
  display: grid;
  grid-template-columns: 52px 1fr 26px;
  gap: 7px;
  align-items: center;
  font-size: 10px;
  color: var(--text-2);
}

.ready-row + .ready-row {
  margin-top: 7px;
}

.ready-track {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  overflow: hidden;
}

.ready-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--success);
}

.ready-fill.mid {
  background: var(--gold);
}

.ready-fill.low {
  background: var(--warning);
}

.ready-row .pct {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 9.5px;
  color: var(--text-3);
  text-align: right;
}

/* ---------- Coach chat ---------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  padding-top: 4px;
}

.msg {
  max-width: 86%;
  padding: 9px 12px;
  border-radius: 15px;
  font-size: 11.5px;
  line-height: 1.5;
}

/* The concrete change the coach is proposing — this is the moment that
   separates Kinetic's coach from a chatbot, so it gets its own card. */
.prop {
  border: 1px solid rgba(139, 92, 246, 0.34);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.13), rgba(139, 92, 246, 0.05));
  border-radius: 12px;
  padding: 9px 11px;
  margin-top: 1px;
}

.prop-head {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-light);
  margin-bottom: 7px;
}

.prop-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--text-2);
  padding: 3px 0;
}

.prop-row .mono {
  font-size: 10.5px;
  color: var(--text);
}

.prop-row s {
  color: var(--text-4);
  text-decoration-thickness: 1px;
}

.prop-row b {
  color: var(--primary-light);
  font-weight: 600;
}

/* The coach speaks as plain text on the background — no bubble. Only the
   athlete's own replies get a bubble. Matches the app. */
.msg.them {
  align-self: stretch;
  max-width: 100%;
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text);
}

.coach-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 4px;
}

.coach-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
  display: grid;
  place-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

.coach-left {
  font-size: 9px;
  color: var(--text-3);
  margin-top: 1px;
}

.coach-icons {
  margin-left: auto;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 3px;
}

/* Suggested replies under a coach message */
.quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.quick span {
  font-size: 10px;
  color: var(--text-2);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--r-full);
  padding: 5px 12px;
  white-space: nowrap;
}

.quick span.primary {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  font-weight: 550;
}

.chat-input .cam {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 10px;
  flex-shrink: 0;
}

.msg.you {
  align-self: flex-end;
  background: var(--primary-deep);
  border-bottom-right-radius: 5px;
  color: #fff;
}

.msg .num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--primary-light);
}

.msg.you .num {
  color: #e9deff;
}

.memory-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 9.5px;
  font-family: "Geist Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--r-full);
  padding: 4px 10px;
}

.memory-chip svg {
  width: 10px;
  height: 10px;
  stroke: var(--primary-light);
  stroke-width: 2;
  fill: none;
}

.chat-input {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 8px 12px;
  font-size: 11px;
  color: var(--text-4);
}

.chat-input .send {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.chat-input .send svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
}

/* ==========================================================================
   Rank ladder

   Was an 11-box grid: uniform weight for Rookie and Immortal, and a lone
   orphan card on the last row. A ladder is ordered and escalating, so it is
   drawn as one continuous rail — badges grow as you climb, the track warms
   from steel to gold, and the two best taglines bookend the journey.
   ========================================================================== */

.ladder {
  margin-top: var(--s-7);
  margin-bottom: var(--s-9);
}

.ladder-rail {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-2);
  position: relative;
}

/* The track, pinned to the shared centre-line of every badge cradle. */
.ladder-rail::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: 43px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #475569 0%,
    #34d399 18%,
    var(--primary) 52%,
    #e879f9 72%,
    var(--gold) 100%
  );
  opacity: 0.45;
}

.rung {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  position: relative;
}

/* Fixed-height cradle so badges of different sizes still share one axis. */
.rung-badge {
  height: 86px;
  display: grid;
  place-items: center;
  position: relative;
}

.rung-badge::before {
  content: "";
  position: absolute;
  width: calc(var(--sz) + 22px);
  height: calc(var(--sz) + 22px);
  border-radius: 50%;
  background: var(--bg-root);
  box-shadow: inset 0 0 0 1px var(--separator);
}

.rung-badge svg {
  width: var(--sz);
  height: var(--sz);
  position: relative;
  transition: transform 260ms var(--ease);
}

.rung:hover .rung-badge svg {
  transform: translateY(-3px) scale(1.06);
}

.rung-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: var(--s-3);
}

.rung-lvl {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-top: 4px;
}

/* Reserved space, revealed on hover — 11 permanent XP figures read as clutter
   next to 11 names and 11 levels. The 336,600 line below tells the same story. */
.rung-xp {
  font-size: 10.5px;
  color: var(--primary-light);
  opacity: 0;
  margin-top: 3px;
  transition: opacity 200ms var(--ease);
}

.rung:hover .rung-xp,
.rung:focus-within .rung-xp {
  opacity: 0.85;
}

.rung-xp::after {
  content: " XP";
  color: var(--text-4);
}

.ladder-ends {
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-4);
  font-size: 14.5px;
  font-style: italic;
  color: var(--text-3);
}

.ladder-ends span:last-child {
  text-align: right;
  color: var(--gold);
  opacity: 0.85;
}

/* The XP figure inside the section intro */
.section-head p strong.mono {
  color: var(--text);
  font-weight: 600;
}

/* Swipe affordance — only shown where the rail actually scrolls. */
.swipe-hint {
  display: none;
  margin-top: var(--s-3);
  text-align: right;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* XP table */
.xp-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-6);
  font-size: 15px;
}

.xp-table th,
.xp-table td {
  text-align: left;
  padding: var(--s-3) var(--s-2);
  border-bottom: 1px solid var(--separator);
}

.xp-table th {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  font-weight: 500;
}

.xp-table td:last-child,
.xp-table th:last-child {
  text-align: right;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.xp-table td:first-child {
  color: var(--text);
}

.xp-table td:last-child {
  color: var(--success);
  font-weight: 500;
}

.xp-table td.minus:last-child {
  color: var(--warning);
}

/* ==========================================================================
   Social cards
   ========================================================================== */

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}

.card {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.card-title {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--s-4);
}

/* Carousel affordance — mobile only, where .social-grid actually scrolls. */
.social-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.social-hint i {
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  transition: background 200ms var(--ease);
}

.social-hint i.on {
  background: var(--primary);
}

/* Feed post */
.post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-3);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep));
}

.avatar.b {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.avatar.c {
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

.post-name {
  font-size: 14px;
  font-weight: 550;
}

.post-meta {
  font-size: 12px;
  color: var(--text-4);
}

/* Training activity — mirrors the app: a violet ring for whoever is training
   right now, a green ring for anyone who trained today, dimmed for the rest.
   The colour variety and the timestamps are what give it life; no synthetic
   face photos, and the app itself is mostly letter avatars anyway. */
/* Recessed well. The posts below are raised surfaces, so pushing this one
   *into* the card is what separates status-chrome from content. */
.activity {
  background: #101019;
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: var(--r-lg);
  padding: var(--s-4) 0 var(--s-4);
  margin-bottom: var(--s-5);
}

.activity > .act-head {
  padding-inline: var(--s-4);
}

.act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.act-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

.act-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 7px rgba(34, 197, 94, 0.75);
}

.act-count {
  font-size: 11px;
  color: var(--text-4);
}

/* The avatars carry a 4px ring drawn with box-shadow, which the scroll
   container would clip at both edges — hence the inline padding here rather
   than on .activity. */
.act-row {
  list-style: none;
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px var(--s-4) 2px;
}

.act-row::-webkit-scrollbar {
  display: none;
}

.act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 0 auto;
  min-width: 56px;
}

.act-av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  /* Dim by default — only today's trainers are lit. */
  filter: saturate(0.35) brightness(0.65);
  box-shadow: 0 0 0 2px #101019, 0 0 0 3.5px rgba(255, 255, 255, 0.08);
}

.act.live .act-av {
  filter: none;
  box-shadow: 0 0 0 2px #101019, 0 0 0 4px var(--primary),
    0 0 14px rgba(139, 92, 246, 0.5);
}

.act.recent .act-av {
  filter: none;
  box-shadow: 0 0 0 2px #101019, 0 0 0 4px var(--success);
}

.g-violet { background: linear-gradient(140deg, #a78bfa, #7c3aed); }
.g-amber  { background: linear-gradient(140deg, #fbbf24, #ea580c); }
.g-teal   { background: linear-gradient(140deg, #5eead4, #0d9488); }
.g-blue   { background: linear-gradient(140deg, #7dd3fc, #0284c7); }
.g-rose   { background: linear-gradient(140deg, #fda4af, #e11d48); }

.act-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-4);
}

.act.live .act-name,
.act.recent .act-name {
  color: var(--text);
}

.act-when {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-4);
  white-space: nowrap;
}

.act.recent .act-when {
  color: var(--text-3);
}

/* Live gets the pulsing red dot the app uses */
.act.live .act-when {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--primary-light);
  font-weight: 500;
}

.act.live .act-when::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ef4444;
  animation: livePulse 2s var(--ease) infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .act.live .act-when::before {
    animation: none;
  }
}

/* Ring colour is a status, not decoration: violet = training right now,
   green = trained today. It must match this person's row in the strip above. */
.avatar.ring-live {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary),
    0 0 12px rgba(139, 92, 246, 0.45);
}

.avatar.ring-recent {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--success);
}

/* A single post, raised off the card so the feed reads as content rather
   than a stack of boxes. */
.post {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), transparent 42%),
    var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-4) var(--s-3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.post-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

.post-session {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.post-dur {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 5px;
  letter-spacing: 0.02em;
}

.post-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: var(--s-4) 0 0;
  border-top: 1px solid var(--separator);
}

.post-metrics > div {
  padding: var(--s-3) 0 var(--s-2);
}

.post-metrics > div + div {
  border-left: 1px solid var(--separator);
  padding-left: var(--s-4);
}

.post-metrics dt {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-4);
}

.post-metrics dd {
  font-size: 19px;
  font-weight: 550;
  letter-spacing: -0.02em;
  margin-top: 3px;
  color: var(--text);
}

.post-metrics dd small {
  font-size: 11px;
  color: var(--text-4);
  margin-left: 2px;
  font-weight: 400;
}

.post-metrics dd.up {
  color: var(--success);
}

.post.compact {
  margin-top: var(--s-3);
  padding-bottom: var(--s-4);
  background: var(--surface-2);
}

.post.compact .post-hero {
  margin-top: var(--s-3);
}

.post-session.sm {
  font-size: 19px;
}

.lvl {
  margin-left: auto;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--text-4);
  border: 1px solid var(--separator);
  border-radius: var(--r-full);
  padding: 3px 9px;
}

.cheer-me {
  margin-left: auto;
  font-size: 12px;
  color: var(--primary-light);
  border: 1px solid rgba(139, 92, 246, 0.3);
  background: var(--primary-muted);
  border-radius: var(--r-full);
  padding: 4px 14px;
}

.post-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin: var(--s-3) 0;
}

.post-stats.four {
  grid-template-columns: repeat(4, 1fr);
}

.post-stats div {
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: var(--s-2);
  text-align: center;
}

.post-stats .k {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

.post-stats .v {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}

.pr-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 550;
  color: var(--gold);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: var(--r-full);
  padding: 5px 12px;
}

.pr-flag svg {
  width: 13px;
  height: 13px;
  fill: var(--gold);
  stroke: none;
}

.post-actions {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--separator);
  font-size: 13px;
  color: var(--text-3);
}

.post-actions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.post-actions svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

/* Head-to-head */
/* VS header — the app leads Head-to-Head with the two athletes and a running
   score, so the card does too. */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}

.vs-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vs-av {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--surface-2);
}

.vs-av.me {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
}

.vs-av.them {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--warning);
}

.vs-av b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  border-radius: var(--r-full);
  padding: 2px 7px;
  border: 2px solid var(--surface);
}

.vs-av.me b {
  background: var(--primary);
}

.vs-av.them b {
  background: var(--warning);
}

.vs-name {
  font-size: 13.5px;
  font-weight: 550;
}

.vs-word {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--primary-light), var(--warning));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vs-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: var(--s-5);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
}

.vs-score span {
  padding: 8px 10px;
}

.vs-score .s-me {
  background: rgba(139, 92, 246, 0.18);
  color: var(--primary-light);
}

.vs-score .s-tie {
  background: rgba(251, 191, 36, 0.14);
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs-score .s-them {
  background: rgba(249, 115, 22, 0.16);
  color: var(--warning);
}

/* Per-lift duel: one split bar, you on the left in violet, them on the right
   in orange, with a divider at the split. Mirrors the app's PR Battles tab. */
.duel + .duel {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--separator);
}

.duel-top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}

.duel-name {
  font-size: 14px;
  font-weight: 550;
  line-height: 1.25;
}

.duel-badge {
  margin-left: auto;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
  background: rgba(139, 92, 246, 0.18);
  color: var(--primary-light);
}

.duel-badge.tied {
  background: rgba(251, 191, 36, 0.16);
  color: var(--gold);
}

.duel-badge.them {
  background: rgba(249, 115, 22, 0.16);
  color: var(--warning);
}

.duel-gap {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--primary-light);
  margin-bottom: 6px;
}

.duel-gap.tied {
  color: var(--gold);
}

.duel-bar {
  display: flex;
  height: 9px;
  border-radius: var(--r-full);
  overflow: hidden;
  gap: 2px;
}

.duel-bar i {
  display: block;
  height: 100%;
}

.duel-bar .me {
  background: var(--primary);
  border-radius: var(--r-full) 0 0 var(--r-full);
}

.duel-bar .them {
  background: #9a3412;
  border-radius: 0 var(--r-full) var(--r-full) 0;
}

.duel-bar.tied .me,
.duel-bar.tied .them {
  background: var(--gold);
}

.duel-vals {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.duel-vals .l {
  color: var(--text);
  font-weight: 500;
}

.duel-vals .r {
  color: var(--text-3);
}

.duel-vals small {
  font-size: 10px;
  color: var(--text-4);
}

.toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--separator);
  border-radius: var(--r-full);
  padding: 3px;
  margin-bottom: var(--s-4);
}

.toggle span {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-full);
  color: var(--text-4);
}

.toggle span.on {
  background: var(--primary-muted);
  color: var(--primary-light);
}

/* ==========================================================================
   Volume tiers
   ========================================================================== */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}

.tier {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}

/* Geist FIRST, emoji fonts as the fall-through. The other order makes latin
   glyphs resolve in the emoji font, which spaces them out badly. */
.tier .emoji,
.tier .tb,
.pr-flag {
  font-family: "Geist", "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji", sans-serif;
}

.tier .emoji {
  font-size: 30px;
  line-height: 1;
  margin-bottom: var(--s-3);
}

.tier .tn {
  font-size: 14px;
  font-weight: 550;
}

.tier .tw {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--text-4);
  margin-top: 3px;
}

.tier .tb {
  font-size: 12px;
  color: var(--primary-light);
  margin-top: var(--s-2);
}

/* ==========================================================================
   Trust band
   ========================================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

.trust {
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}

.trust svg {
  width: 22px;
  height: 22px;
  stroke: var(--primary-light);
  stroke-width: 1.7;
  fill: none;
  margin-bottom: var(--s-3);
}

.trust h3 {
  font-size: 15px;
  font-weight: 550;
  margin-bottom: var(--s-2);
}

.trust p {
  font-size: 13.5px;
  color: var(--text-3);
  line-height: 1.55;
}

/* ==========================================================================
   Community / feature voting
   ========================================================================== */

.build-band {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.build-band > * {
  min-width: 0;
}

.build-band h2 {
  font-size: clamp(25px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.026em;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.build-band > div > p {
  font-size: clamp(15.5px, 1.7vw, 17.5px);
  color: var(--text-2);
}

.votes {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.votes li {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

/* Vote affordance only — deliberately no counts. Kinetic has no user base yet,
   so a number here would be invented social proof. */
.v-count {
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--primary-light);
  background: var(--primary-muted);
  border: 1px solid rgba(139, 92, 246, 0.26);
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.v-count svg {
  width: 14px;
  height: 14px;
  stroke: var(--primary-light);
  stroke-width: 2.5;
  fill: none;
}

.votes-note {
  margin-top: var(--s-3);
  font-size: 12.5px;
  color: var(--text-4);
  text-align: right;
}

.v-label {
  font-size: 15px;
  color: var(--text);
}

.votes li.dim {
  border-style: dashed;
  background: none;
}

.votes li.dim .v-count {
  color: var(--text-3);
  background: none;
  border-color: var(--border);
}

.votes li.dim .v-label {
  color: var(--text-3);
}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.cta {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 60% at 50% 55%,
    rgba(139, 92, 246, 0.14) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.cta > .container {
  position: relative;
}

.cta h2 {
  font-size: clamp(30px, 4.6vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-4);
  text-wrap: balance;
}

.cta p {
  font-size: clamp(16px, 1.9vw, 19px);
  color: var(--text-2);
  margin-bottom: var(--s-7);
  max-width: 34em;
  margin-inline: auto;
}

.cta .store-cta {
  align-items: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--separator);
  padding: var(--s-8) 0 var(--s-7);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}

.footer-about {
  font-size: 14px;
  color: var(--text-3);
  max-width: 30em;
  margin-top: var(--s-4);
  line-height: 1.6;
}

.footer-col h4 {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  font-weight: 500;
  margin-bottom: var(--s-4);
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}

.footer-col a {
  color: var(--text-2);
  font-size: 14.5px;
}

.footer-col a:hover {
  color: var(--text);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--separator);
  font-size: 13.5px;
  color: var(--text-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   Legal / prose pages
   ========================================================================== */

.prose {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) var(--gutter) clamp(72px, 10vw, 112px);
}

.prose h1 {
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.12;
  margin-bottom: var(--s-2);
}

.prose .updated {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-4);
  margin-bottom: var(--s-7);
}

.prose h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: var(--s-8) 0 var(--s-4);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.prose h3 {
  font-size: 17px;
  font-weight: 550;
  margin: var(--s-6) 0 var(--s-3);
  color: var(--text);
}

.prose p,
.prose li {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.72;
}

.prose p {
  margin-bottom: var(--s-4);
}

.prose ul,
.prose ol {
  margin: 0 0 var(--s-4) var(--s-5);
}

.prose li {
  margin-bottom: var(--s-2);
}

.prose strong {
  color: var(--text);
  font-weight: 550;
}

.prose .card {
  margin: var(--s-5) 0;
}

.prose .card p:last-child {
  margin-bottom: 0;
}

/* Highlighted legal callout */
.prose .callout {
  background: var(--primary-muted);
  border: 1px solid rgba(139, 92, 246, 0.28);
  border-radius: var(--r-md);
  padding: var(--s-5);
  margin: var(--s-5) 0;
}

.prose .callout p:last-child {
  margin-bottom: 0;
}

/* Unfilled legal values must be impossible to miss */
.placeholder {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.92em;
  color: #0b0b12;
  background: var(--gold);
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600;
  white-space: nowrap;
}

/* Legal tables */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0;
  font-size: 14.5px;
}

.prose th,
.prose td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3);
  border: 1px solid var(--separator);
  color: var(--text-2);
}

.prose th {
  background: var(--surface);
  color: var(--text);
  font-weight: 550;
  font-size: 13px;
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Support page FAQ ----------
   Native <details>/<summary>: collapses without JavaScript, is keyboard
   operable, and screen readers announce the expanded state for free. */

.faq {
  border-bottom: 1px solid var(--separator);
}

.faq:first-of-type {
  border-top: 1px solid var(--separator);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  cursor: pointer;
  list-style: none;
  /* comfortably past the 44px touch target */
  min-height: 56px;
  transition: color 180ms var(--ease);
}

/* Hide the platform disclosure triangles */
.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::marker {
  content: "";
}

.faq summary h3 {
  margin: 0;
  flex: 1;
  font-size: 16.5px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--text);
}

.faq summary:hover h3 {
  color: var(--primary-light);
}

.faq-chev {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--text-3);
  stroke-width: 2;
  fill: none;
  transition: transform 260ms var(--ease), stroke 180ms var(--ease);
}

.faq[open] .faq-chev {
  transform: rotate(180deg);
  stroke: var(--primary-light);
}

.faq summary:hover .faq-chev {
  stroke: var(--primary-light);
}

.faq summary:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 2px;
  border-radius: 6px;
}

.faq-body {
  padding-bottom: var(--s-5);
}

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

/* Progressive enhancement: browsers that support ::details-content animate the
   open/close. Everywhere else it simply snaps, which is fine. */
@supports selector(details::details-content) {
  .faq::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: content-visibility 300ms allow-discrete, opacity 260ms var(--ease),
      block-size 300ms var(--ease);
  }

  .faq[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-chev {
    transition: none;
  }

  @supports selector(details::details-content) {
    .faq::details-content,
    .faq[open]::details-content {
      transition: none;
    }
  }
}

/* ==========================================================================
   Responsive — 1200 / 992 / 768 / 560 / 380
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --gutter: 20px;
  }
}

@media (max-width: 992px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-5);
  }

  /* Stacked, the runner floated loose and read as unanchored — so on phones
     only it gets a deliberate frame. Desktop keeps the plain artwork. */
  .hero-art {
    order: -1;
    max-width: 380px;
    padding: 12% 5%;
    border: 1px solid var(--border);
    border-radius: 30px;
    background: radial-gradient(
        ellipse 76% 66% at 50% 46%,
        rgba(139, 92, 246, 0.15) 0%,
        transparent 72%
      ),
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005));
    box-shadow: 0 34px 80px -34px rgba(139, 92, 246, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  /* The artwork's bright mass sits right of its geometric centre (the long
     motion trails on the left are faint but wide). The crop is already shifted
     as far right as the source allows, so the last correction happens here —
     nudged left within the frame's padding so the figure reads centred. */
  .hero-art img {
    transform: translateX(-4%);
  }

  .hero-inner {
    padding-top: var(--s-5);
  }

  .hero .sub {
    margin-inline: auto;
  }

  .hero .store-cta {
    align-items: center;
  }

  /* Stacked, the mockup used to come first — the screen arrived before the
     reader knew what section they were in, and the headline sat a full screen
     down. Reorder to claim -> evidence -> detail: eyebrow, headline and intro,
     then the phone, then the bullets. `display: contents` lets the copy's own
     children join the pillar grid so the media can slot between them without
     restructuring the markup. */
  .pillar,
  .pillar.reverse {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pillar-copy {
    display: contents;
  }

  .pillar-copy > p.eyebrow {
    order: 1;
  }

  .pillar-copy > h2 {
    order: 2;
  }

  .pillar-copy > p:not(.eyebrow):not(.note) {
    order: 3;
  }

  .pillar-copy > .checks {
    order: 5;
  }

  .pillar-copy > p.note {
    order: 6;
  }

  .build-band {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .pillar .pillar-media,
  .pillar.reverse .pillar-media {
    order: 4;
    margin: var(--s-3) 0 var(--s-7);
  }

  .section-head {
    margin-inline: auto;
    text-align: center;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }

  .footer-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  /* A vertical list of 11 rungs runs to ~1,050px on a phone. Keep the rail
     horizontal and let it scroll instead: ~150px tall, and you have to swipe
     to reach Immortal — which is rather the point of a ladder. */
  .ladder-rail {
    justify-content: flex-start;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 var(--s-2) var(--s-2);
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
  }

  .ladder-rail::-webkit-scrollbar {
    display: none;
  }

  .ladder-rail::before {
    left: 42px;
    right: 8px;
    top: 38px;
  }

  .rung {
    flex: 0 0 auto;
    width: 84px;
  }

  .rung-badge {
    height: 76px;
  }

  .rung-badge svg {
    width: calc(var(--sz) * 0.74);
    height: calc(var(--sz) * 0.74);
  }

  .rung-badge::before {
    width: calc(var(--sz) * 0.74 + 18px);
    height: calc(var(--sz) * 0.74 + 18px);
  }

  .rung-name {
    font-size: 12.5px;
    margin-top: var(--s-2);
  }

  .rung-lvl {
    font-size: 9.5px;
  }

  .rung-xp {
    display: none;
  }

  .swipe-hint {
    display: block;
  }

  /* The bookend taglines only carry meaning when they sit at the two ends of a
     horizontal rail. Stacked on a phone they lose that and just add words. */
  .ladder-ends {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-sheet {
    display: flex;
  }

  .proof-grid {
    grid-template-columns: repeat(2, 1fr);
  }


}

@media (max-width: 560px) {
  :root {
    --gutter: 18px;
  }

  /* Hevy's mobile bullets are 3-5 word labels, not sentences. Keep the rich
     explanations on desktop and show only the label here — six paragraphs of
     supporting prose is what made this page endless on a phone. */
  .checks .det {
    display: none;
  }

  .checks li {
    font-size: 16px;
    align-items: center;
  }

  .checks li strong {
    font-weight: 500;
    color: var(--text);
  }

  .checks {
    gap: var(--s-4);
  }

  /* Four stacked reassurance cards with body copy is a lot of scroll. The
     headings are the message; the detail lives in the Privacy Policy. */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }

  .trust {
    padding: var(--s-4);
  }

  .trust p {
    display: none;
  }

  .trust h3 {
    font-size: 14.5px;
    margin-bottom: 0;
  }

  .trust svg {
    margin-bottom: var(--s-2);
  }

  /* Stacked, the head-to-head card was invisible until you'd scrolled past a
     full feed card. As a snap carousel both are reachable in one gesture, and
     the peeking edge of the next card is what tells you it's there. */
  .social-grid {
    display: flex;
    grid-template-columns: none;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Bleed to the screen edges so the peek reaches the very edge. */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }

  .social-grid::-webkit-scrollbar {
    display: none;
  }

  .social-grid > .card {
    flex: 0 0 88%;
    scroll-snap-align: start;
    /* Without this the shorter card is stretched to match the taller one,
       leaving ~150px of dead space under the feed. Each card takes its own
       natural height instead. */
    align-self: flex-start;
  }

  /* Both cards were 792px against ~780px of usable viewport, so neither could
     ever be seen in one frame. The savings below come out of layout, not
     content — nothing is removed and nothing is tightened to the point of
     feeling cramped. */

  /* The gap figure had a line to itself above the bar. Lift it onto the values
     row it belongs to — same information, one row instead of two, ~24px saved
     on each of three duels. CSS-only, so the desktop layout is unchanged. */
  .duel {
    position: relative;
  }

  .duel-gap {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin: 0;
    font-size: 11.5px;
  }

  .duel-vals {
    margin-top: 8px;
  }

  /* Slightly smaller VS avatars — still comfortably legible. */
  .vs-av {
    width: 54px;
    height: 54px;
    font-size: 11px;
  }

  .versus {
    margin-bottom: var(--s-3);
  }

  .vs-score {
    margin-bottom: var(--s-4);
  }

  .social-hint {
    display: flex;
  }

  /* Carousel cards are narrower than the old full-width stack, so the tight
     header rows need to stop wrapping. */
  .act-head {
    gap: var(--s-2);
  }

  .act-title {
    font-size: 9.5px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .act-count,
  .post-dur {
    font-size: 10px;
    white-space: nowrap;
  }

  .post-session {
    font-size: 23px;
  }

  .post-metrics dd {
    font-size: 17px;
  }

  /* Everything — framed art, headline, sub, badge and pill — has to share one
     844px screen, so the art carries the compromise and the spacing stays
     generous. Shrinking the art is what buys the breathing room. */
  .hero-art {
    max-width: 320px;
    border-radius: 26px;
  }

  .hero h1 {
    font-size: clamp(32px, 8.6vw, 42px);
    margin-bottom: var(--s-5);
  }

  .hero .sub {
    font-size: 16.5px;
    line-height: 1.5;
    margin-bottom: var(--s-6);
  }

  .hero-inner {
    padding: var(--s-5) 0 var(--s-7);
    gap: var(--s-6);
  }

  .store-cta {
    gap: var(--s-4);
  }

  .section-head p,
  .pillar-copy > p:not(.eyebrow):not(.note) {
    font-size: 16px;
  }

  /* Narrow enough that the activity row scrolls — fade the trailing edge so
     it's obvious there's more, matching the app's carousel. */
  .act-row {
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
  }

  .tiers {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }

  .prose table {
    font-size: 13.5px;
  }

  .phone {
    width: 280px;
  }
}

@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }

  .proof-item {
    padding: var(--s-5) var(--s-2);
  }

  .tiers {
    grid-template-columns: 1fr;
  }

  .rung-xp {
    display: none;
  }

  .phone {
    width: 262px;
  }

  .store-badge img {
    height: 48px;
  }

  .tf-btn {
    height: 48px;
    font-size: 15px;
  }

  .tf-note {
    text-align: center;
  }
}