/* ==========================================================================
   Athlete IQ landing page
   Palette, type scale and motion are ported 1:1 from the Claude Design source.
   ========================================================================== */

:root {
  --bone: #F2F0E9;
  --ink: #1A1A1A;
  --ember: #E8490F;
  --ember-dark: #C93B0A;
  --muted: #6B6560;        /* body text on light */
  --muted-dark: #A8A29C;   /* body text on dark */
  --footer-bg: #141414;

  --font-display: 'Archivo', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --wrap: 1240px;
  --gutter: 40px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  /* sticky nav is 72px; keep anchored sections clear of it */
  scroll-padding-top: 72px;
}

body {
  margin: 0;
  background: var(--bone);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ember); }
::selection { background: var(--ember); color: #fff; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--bone); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* --------------------------------------------------------------------------
   Reveal on scroll
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease) var(--d, 0s),
    transform 0.8s var(--ease) var(--d, 0s);
}
[data-in="1"] { opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ember), 0 0 40px rgba(232,73,15,0.35); }
  50%      { box-shadow: 0 0 0 3px var(--ember), 0 0 90px rgba(232,73,15,0.65); }
}
@keyframes parA { from { transform: translateY(calc(-50% + 80px)); } to { transform: translateY(calc(-50% - 80px)); } }
@keyframes parB { from { transform: translateY(100px); } to { transform: translateY(-100px); } }
@keyframes parC { from { transform: translate(-50%, calc(-50% + 80px)); } to { transform: translate(-50%, calc(-50% - 80px)); } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--lg { padding: 16px 34px; font-size: 16px; }

.btn--primary { background: var(--ember); color: #fff; }
.btn--primary:hover { background: var(--ember-dark); color: #fff; }

.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { border-color: var(--ember); color: var(--ember); }

.btn--ghost { border-color: rgba(242,240,233,0.4); color: var(--bone); }
.btn--ghost:hover { border-color: var(--ember); color: var(--ember); }

/* --------------------------------------------------------------------------
   Eyebrow / headings
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.eyebrow--ember { color: var(--ember); }

.section__head--center .eyebrow,
.beta .eyebrow,
.contact .eyebrow { justify-content: center; }

.h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(242,240,233,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(26,26,26,0.08);
  transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
}
/* The hero carries its own top bar, so the nav stays tucked away until that bar
   scrolls out of view (main.js sets data-visible). Gated on .js so the nav is
   never hidden for good if scripts don't run. */
.js .nav:not([data-visible="true"]) {
  transform: translateY(-100%);
  visibility: hidden;
}
.nav[data-visible="true"] { transition: transform 0.35s var(--ease), visibility 0s linear 0s; }

.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo:hover { color: inherit; }
.logo__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.logo__iq { color: var(--ember); }

.nav__links {
  display: flex;
  gap: 36px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.nav__links-cta { display: none; }

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Scroll-linked progress bar. Chrome-only, so it stays hidden everywhere
   else rather than sitting permanently at scaleX(1). */
.nav__progress { display: none; }

@supports (animation-timeline: scroll()) {
  .nav__progress {
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--ember);
    transform-origin: left;
    transform: scaleX(0);
    animation: progress linear both;
    animation-timeline: scroll();
  }
}

/* --------------------------------------------------------------------------
   Hero
   The artwork is one flattened 3:2 composite: the coach photograph plus the
   product mockups (dashboard, laptop, bottle). Below the widescreen breakpoint
   it sits under the copy at full width. At widescreen it is fitted to the
   hero's height and pinned right, so the copy always lands on the artwork's
   dark left side and the laptop and bottle keep their place beneath it; type
   and spacing are sized off the hero's own height (cqh) so that composition
   holds at any 16:9 or 16:10 size.
   -------------------------------------------------------------------------- */

.hx {
  --hx-gutter: clamp(22px, 4.6cqi, 96px);
  /* em width of the longest headline line ("Athlete Development") plus margin,
     used to size the headline so that line never wraps */
  --hx-fit: 10.4;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  container-type: inline-size;
  background: #060606; /* the artwork's own black, so its edges disappear */
  color: var(--bone);
}

/* Top bar */
.hx__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--hx-gutter) 0;
}
.logo--light { color: var(--bone); font-size: clamp(18px, 2.4cqi, 24px); }
.logo--light:hover { color: var(--bone); }
.logo--light svg { width: 1.2em; height: 1.2em; }
.logo--light .logo__word { font-size: inherit; }

.hx__tagline {
  display: none;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--bone);
}

/* Copy */
.hx__content {
  padding: clamp(40px, 11cqi, 88px) var(--hx-gutter) clamp(44px, 9cqi, 72px);
}

.hx__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: min(clamp(2.1rem, 6.6cqi, 4rem), calc((100cqi - 2 * var(--hx-gutter)) / var(--hx-fit)));
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.hx__line { display: block; white-space: nowrap; }

.hx__eyebrow {
  margin: 1.1em 0 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bone);
  text-wrap: balance;
}

.hx__rule {
  display: block;
  width: 48px;
  height: 2px;
  margin: 24px 0 26px;
  background: var(--ember);
}

.hx__lede {
  margin: 0;
  max-width: 25em;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-dark);
  text-wrap: pretty;
}

.hx__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.hx__actions .btn { flex: 1 1 auto; text-align: center; }
.hx__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hx__arrow { flex: none; transition: transform 0.2s var(--ease); }
.hx__cta:hover .hx__arrow { transform: translateX(3px); }

/* Artwork, stacked below the copy */
.hx__media {
  display: block;
  order: 3;
  margin-top: auto;
  aspect-ratio: 3 / 2;
  /* rise out of the black rather than start on a hard edge */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%);
}
.hx__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hx__scrim { display: none; }

@media (min-width: 720px) {
  .hx__bar { padding-top: 30px; }
  .hx__tagline { display: block; }
  .hx__eyebrow { font-size: 14px; }
  .hx__lede { font-size: 18px; }
  .hx__actions .btn { flex: 0 0 auto; }
}

/* Widescreen: the artwork fills the hero behind the copy, bleeding off the
   right edge. The artwork is 3:2 and fitted to the hero's height, so the wider
   the hero, the further right the coach sits. At 16:10 and wider he clears the
   copy column; any squarer and the headline runs onto his face. The hero is at
   least 800px tall, so 16:10 also means at least 1280px wide. Anything else
   stacks. (Verified by measured contrast at the boundary.) */
@media (min-width: 1280px) and (min-aspect-ratio: 8/5) {
  .hx {
    height: max(100vh, 800px);
    height: max(100svh, 800px);
    min-height: 0;
    container-type: size;
  }

  .hx__bar { padding-top: 3.9cqh; }
  .logo--light { font-size: clamp(19px, 2.35cqh, 28px); }
  .hx__tagline { font-size: clamp(14px, 1.72cqh, 20px); }

  .hx__content {
    width: 42%;
    padding: 6.4cqh 0 0 var(--hx-gutter);
  }
  .hx__title {
    font-size: clamp(2.25rem, min(5.3cqh, 3.3cqw), 5.5rem);
  }
  .hx__eyebrow { font-size: clamp(12px, 1.36cqh, 16px); margin-top: 2.4cqh; }
  .hx__rule { width: clamp(40px, 4.6cqh, 60px); margin: 2.6cqh 0 2.9cqh; }
  .hx__lede { font-size: clamp(15px, 1.78cqh, 21px); line-height: 1.55; }
  .hx__actions { margin-top: 3.4cqh; gap: clamp(12px, 1.5cqh, 18px); }
  .hx .btn--lg {
    padding: clamp(12px, 1.55cqh, 18px) clamp(24px, 3cqh, 36px);
    font-size: clamp(15px, 1.62cqh, 18px);
  }

  .hx__media {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -2;
    height: 100%;
    margin: 0;
    /* soften the artwork's left edge where a widescreen leaves a gap beside it */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%);
            mask-image: linear-gradient(90deg, transparent 0, #000 2.5%);
  }

  /* Legibility: darken the copy column, easing off before the laptop and
     bottle so the product stays vivid, plus a band across the top bar. */
  .hx__scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg,
      rgba(20,20,20,0.9) 0%,
      rgba(20,20,20,0.82) 28%,
      rgba(20,20,20,0.45) 37%,
      rgba(20,20,20,0) 47%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 64%);
            mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 64%);
  }
  .hx__scrim::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 18cqh;
    /* near-black rather than charcoal: #E8490F tops out around 4.7:1 on
       charcoal, and the orange accent in the tagline is small text (needs 4.5) */
    background: linear-gradient(180deg, rgba(6,6,6,0.9) 0%, rgba(6,6,6,0.68) 42%, rgba(6,6,6,0) 100%);
  }
}

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */

.ticker {
  background: var(--ember);
  color: #fff;
  overflow: hidden;
  padding: 15px 0;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.ticker__item {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section { position: relative; overflow: hidden; }
.section > .wrap { padding-top: 130px; padding-bottom: 130px; }

.section--dark { background: var(--ink); color: var(--bone); }
.section--dark > .wrap { position: relative; }

.section--grid {
  background-color: var(--bone);
  background-image:
    linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 36px 36px;
}

.section__head { max-width: 720px; margin-bottom: 72px; }
.section__head--center { margin: 0 auto 64px; text-align: center; }
.section__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.section--dark .section__lede { color: var(--muted-dark); }
.section__lede + .section__lede { margin-top: 14px; }

/* Decorative parallax chevrons */
.deco { position: absolute; pointer-events: none; }
.deco--mission { right: -120px; top: 50%; transform: translateY(-50%); }
.deco--experts { left: -160px; bottom: -100px; }
.deco--contact { left: 50%; top: 50%; transform: translate(-50%, -50%); }

@supports (animation-timeline: view()) {
  .deco--mission { animation: parA linear both; animation-timeline: view(); }
  .deco--experts { animation: parB linear both; animation-timeline: view(); }
  .deco--contact { animation: parC linear both; animation-timeline: view(); }
}

/* --------------------------------------------------------------------------
   Mission and Vision
   -------------------------------------------------------------------------- */

.mission__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 64px;
}
.mission__rule { background: rgba(242,240,233,0.12); }
.mission__title {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.mission__body {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted-dark);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   How It Works
   -------------------------------------------------------------------------- */

/* Every graphic below is drawn in its finished state. assets/js/how.js resets
   and replays them with Motion as they scroll into view; if it never runs
   (script blocked, reduced motion), the finished state is what shows.
   SVG dash offsets and fills live in the markup as attributes, not here: Motion
   animates SVG attributes, and a CSS rule would override every frame. */

.how__head {
  display: grid;
  grid-template-columns: minmax(0, 720px) auto;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  margin-bottom: 72px;
}
.how__head .section__head { margin-bottom: 0; }

/* The cycle beside the headline */
.loop { width: 300px; aspect-ratio: 1; margin-right: 12px; }
.loop svg { display: block; width: 100%; height: 100%; overflow: visible; }
.loop__grow {
  fill: none;
  stroke: var(--ember);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.loop__track { fill: none; stroke: rgba(26,26,26,0.12); stroke-width: 2; }
.loop__arc {
  fill: none;
  stroke: var(--ember);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.loop__dot { fill: var(--ember); }
.loop__node { transform-box: fill-box; transform-origin: center; }
.loop__node circle { stroke-width: 1.5; }
.loop__node text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
.loop__core { fill: var(--ink); }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 36px;
}

/* Illustration cards */
.art {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 188px;
  padding: 16px;
  border-radius: 14px;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(26,26,26,0.14);
}
.art__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,240,233,0.62);
}
.art__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.art__svg { display: block; width: 100%; min-height: 0; flex: 1; }
.art__svg text {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--bone);
  text-anchor: middle;
  dominant-baseline: central;
}

/* 01 Capture: voice note being transcribed */
.art__row { display: flex; align-items: center; gap: 12px; height: 40px; }
.art__mic {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ember);
}
.art__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ember);
  opacity: 0;
}
.art__wave { display: flex; align-items: center; gap: 3px; flex: 1; height: 34px; }
.art__wave span {
  flex: 1;
  height: var(--h);
  border-radius: 2px;
  background: rgba(242,240,233,0.55);
}
.art__transcript { margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--bone); }
.art__caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--ember);
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.art--capture .art__meta { margin-top: auto; }

/* 02 Understand: program context graph */
.graph__line { fill: none; stroke: rgba(242,240,233,0.3); stroke-width: 1.5; }
.graph__flow { fill: none; stroke: var(--ember); stroke-width: 2.2; stroke-linecap: round; opacity: 0; }
.graph__node, .graph__core { transform-box: fill-box; transform-origin: center; }
.graph__node rect { fill: rgba(242,240,233,0.07); stroke: rgba(242,240,233,0.22); }
.graph__core rect { fill: var(--ember); }
.art--understand .art__svg { margin: auto 0; flex: none; height: 100%; }

/* 03 Surface: a progression worth a look */
.art__tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(232,73,15,0.16);
  color: var(--ember);
  font-size: 11px;
  font-weight: 600;
}
.art--surface .art__svg { margin-top: 10px; }
.chart__grid { fill: none; stroke: rgba(242,240,233,0.07); stroke-width: 1; }
.chart__line {
  fill: none;
  stroke: var(--ember);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart__point { fill: var(--ember); stroke: var(--ink); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.chart__pulse { fill: none; stroke: var(--ember); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* 04 Develop: the plan getting done */
.art__checks { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.art__checks li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--bone); }
.art__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--ember);
  background: var(--ember);
}
.art__box path { stroke: #fff; }
.art__progress {
  display: block;
  height: 4px;
  margin-top: auto;
  border-radius: 2px;
  background: rgba(242,240,233,0.12);
  overflow: hidden;
}
.art__progress span { display: block; height: 100%; background: var(--ember); transform-origin: left; }

/* Track joining the steps: dot per step, line to the next one.
   Lit by default; how.js ties it to scroll position. */
.step__track { position: relative; display: flex; align-items: center; height: 14px; margin: 30px 0 22px; }
.step__dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ember);
  background: var(--ember);
  box-shadow: 0 0 0 5px rgba(232,73,15,0.14);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.step[data-lit="false"] .step__dot {
  border-color: rgba(26,26,26,0.24);
  background: var(--bone);
  box-shadow: 0 0 0 0 rgba(232,73,15,0);
}
.step__line {
  position: absolute;
  left: 14px;
  right: -36px;   /* reaches across the column gap to the next dot */
  height: 2px;
  background: rgba(26,26,26,0.12);
}
.step__fill { display: block; height: 100%; background: var(--ember); transform-origin: left; }
.step:last-child .step__line { display: none; }

.step__num {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ember);
  margin-bottom: 18px;
}
.step__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.step__title {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: -0.01em;
}
.step__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Insights and Athletes to Watch
   Each feature leads with a small dashboard card, drawn from the same product
   UI shown in the hero artwork. Decorative only (aria-hidden).
   -------------------------------------------------------------------------- */

.features {
  background: var(--bone);
  border-top: 1px solid rgba(26,26,26,0.08);
}
.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

.feature__title {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.feature__body {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.feature__body + .feature__body { margin-top: 14px; }

.mock {
  display: flex;
  flex-direction: column;
  min-height: 252px;
  margin-bottom: 40px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--bone);
  box-shadow: 0 28px 60px rgba(26,26,26,0.16);
}
.mock__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,240,233,0.72);
}
.mock__insight {
  margin: 0;
  max-width: 24em;
  font-size: 17px;
  line-height: 1.5;
  color: var(--bone);
}
.mock__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 72px;
  margin-top: auto;
}
.mock__bars span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: rgba(232,73,15,0.34);
}
.mock__bars .mock__bar--on { background: var(--ember); }
.mock__list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mock__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 14px;
}
.mock__avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(242,240,233,0.22);
  font-size: 12px;
  font-weight: 600;
  color: rgba(242,240,233,0.78);
}
.mock__name { display: block; font-size: 15px; font-weight: 600; color: var(--bone); }
.mock__meta { display: block; margin-top: 2px; font-size: 13px; color: var(--muted-dark); }
.mock__icon { color: var(--ember); }
.mock__icon--muted { color: rgba(242,240,233,0.6); }
.mock__link {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ember);
}
.mock__list + .mock__link { margin-top: auto; padding-top: 18px; }

/* --------------------------------------------------------------------------
   Verified Expertise
   -------------------------------------------------------------------------- */

.expert {
  max-width: 760px;
  margin: 0 auto 56px;
  background: linear-gradient(135deg, #2B2320, #201D1B);
  border: 1px solid rgba(232,73,15,0.28);
  border-radius: 24px;
  padding: 48px 56px;
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  box-shadow: 0 24px 80px rgba(232,73,15,0.08);
}

.expert__photo {
  position: relative;
  width: 168px;
  height: 168px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  animation: glowPulse 5s ease-in-out infinite;
}
.expert__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}

.expert__info { flex: 1; min-width: 280px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ember);
  color: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
}

.expert__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 34px;
  letter-spacing: -0.02em;
}
.expert__role {
  font-size: 17px;
  font-weight: 500;
  color: var(--bone);
  margin-bottom: 16px;
}
.experts__note {
  margin: 56px auto 0;
  max-width: 560px;
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--bone);
  text-wrap: balance;
}

.expert__creds {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  color: var(--muted-dark);
}

.soon__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,240,233,0.4);
  margin-bottom: 28px;
}
.soon {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.soon__card {
  border: 1px dashed rgba(242,240,233,0.16);
  border-radius: 16px;
  padding: 28px 16px;
  text-align: center;
  height: 100%;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease) var(--d, 0s),
    transform 0.6s var(--ease) var(--d, 0s);
}
.soon__card[data-in="1"] { opacity: 0.55 !important; }
.soon__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(242,240,233,0.07);
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.soon__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--bone);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Beta
   -------------------------------------------------------------------------- */

.beta {
  background-color: var(--bone);
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 100%, rgba(232,73,15,0.07), transparent 65%),
    linear-gradient(rgba(26,26,26,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.035) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
}
.beta__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 130px var(--gutter);
  text-align: center;
}
.beta__lede {
  margin: 0 auto 56px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}
.beta__foot {
  margin: 48px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.pillars {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease) var(--d, 0s),
    transform 0.6s var(--ease) var(--d, 0s);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 150px var(--gutter);
  text-align: center;
}
.contact .eyebrow { margin-bottom: 28px; }
.contact__title {
  margin: 0 0 26px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(46px, 5.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.contact__lede {
  margin: 0 auto 48px;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted-dark);
  text-wrap: pretty;
}
.contact__actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.contact__email {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted-dark);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--footer-bg);
  color: var(--bone);
  border-top: 1px solid rgba(242,240,233,0.06);
}
.footer > .wrap { padding-top: 72px; padding-bottom: 40px; }

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.logo--footer { margin-bottom: 14px; }
.footer__tag { font-size: 14px; color: var(--muted); }

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 12px 56px;
  font-size: 14px;
  color: var(--muted-dark);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid rgba(242,240,233,0.08);
}
.footer__copy {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Legal pages (/privacy, /terms)
   -------------------------------------------------------------------------- */

.legal { background: var(--bone); }
.legal__head { padding: 168px 0 72px; background: var(--ink); color: var(--bone); }
.legal__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.legal__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted-dark);
}

.legal__layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 72px;
  padding-top: 80px;
  padding-bottom: 120px;
}

.legal__toc { position: sticky; top: 104px; align-self: start; }
.legal__toc-label {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal__toc ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  padding-top: 1px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ember);
}
.legal__toc a:hover { color: var(--ink); }

.legal__body { font-size: 16px; line-height: 1.75; color: #3A3632; counter-reset: sec; }
.legal__intro { margin: 0 0 12px; font-size: 19px; line-height: 1.6; color: var(--ink); }
.legal__body section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid rgba(26,26,26,0.1);
  counter-increment: sec;
}
.legal__body h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legal__body h2::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ember);
}
.legal__body p { margin: 0 0 14px; }
.legal__body p:last-child { margin-bottom: 0; }
.legal__body ul { margin: 0 0 14px; padding-left: 20px; }
.legal__body li { margin: 6px 0; }
.legal__body li::marker { color: var(--ember); }
.legal__body strong { font-weight: 600; color: var(--ink); }
/* ink text with an ember underline: ember text alone is under 4.5:1 on bone */
.legal__body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ember);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.legal__see {
  margin-top: 48px !important;
  padding-top: 28px;
  border-top: 1px solid rgba(26,26,26,0.1);
  font-size: 15px;
}

@media (max-width: 900px) {
  .legal__layout { grid-template-columns: minmax(0, 1fr); padding-top: 56px; padding-bottom: 88px; }
  .legal__toc { display: none; }
  .legal__head { padding: 136px 0 56px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .how__head { grid-template-columns: 1fr; margin-bottom: 64px; }
  .loop { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 56px; }
  .step:nth-child(2n) .step__line { display: none; }
}

@media (max-width: 900px) {
  .features__grid { grid-template-columns: 1fr; gap: 72px; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--bone);
    border-bottom: 1px solid rgba(26,26,26,0.08);
    box-shadow: 0 24px 48px rgba(26,26,26,0.12);
    font-size: 16px;
    /* collapsed */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  }
  .nav__links[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .nav__links > a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(26,26,26,0.07);
  }
  /* Full-width CTA at the foot of the open menu */
  .nav__links > a.nav__links-cta {
    display: block;
    width: 100%;
    margin-top: 20px;
    border-bottom: 0;
    padding: 14px 26px;
    text-align: center;
  }

  .mission__grid { grid-template-columns: 1fr; gap: 56px; }
  .mission__rule { display: none; }
}

@media (max-width: 720px) {
  .features__grid { gap: 64px; }
  .mock { min-height: 0; margin-bottom: 32px; padding: 20px; }
  .experts__note { margin-top: 44px; font-size: 16px; }
  :root { --gutter: 22px; }

  .section > .wrap { padding-top: 88px; padding-bottom: 88px; }
  .section__head { margin-bottom: 48px; }

  .how__head { margin-bottom: 48px; }
  .steps { grid-template-columns: 1fr; row-gap: 52px; }
  .step__line { display: none; }
  .step__track { margin: 24px 0 18px; }

  .expert {
    padding: 36px 26px;
    gap: 28px;
    flex-direction: column;
    text-align: center;
  }
  .expert__info { min-width: 0; }
  .expert__name { font-size: 28px; }
  .expert__photo { width: 140px; height: 140px; }
  .soon { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .beta__inner { padding: 88px var(--gutter); }
  .pillars { gap: 32px 24px; }
  .pillar { flex: 0 1 132px; text-align: center; }
  .beta__lede { margin-bottom: 44px; }

  .contact__inner { padding: 96px var(--gutter); }
  .contact__actions .btn { flex: 1 1 auto; text-align: center; }

  .footer > .wrap { padding-top: 56px; }
  .footer__top { gap: 36px; margin-bottom: 40px; }
  .footer__links { gap: 12px 36px; }
}

@media (max-width: 340px) {
  .soon { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

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

  .ticker__track,
  .expert__photo,
  .deco--mission,
  .deco--experts,
  .deco--contact,
  .nav__progress {
    animation: none !important;
  }

  .expert__photo { box-shadow: 0 0 0 3px var(--ember), 0 0 40px rgba(232,73,15,0.35); }
  .nav__progress { display: none; }
  .nav { transition: none !important; }
  .hx__arrow { transition: none; }
  .art__caret { animation: none; }

  [data-reveal],
  .soon__card,
  .pillar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .soon__card { opacity: 0.55 !important; }
}