@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');

/* ---------------------------------------------------------------- base --- */

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

:root {
  /* Type and radii now come from tokens/ — the site no longer overrides the
     design system, it consumes it. Only page-level ink and the responsive
     application of --radius-panel are site-specific. */
  --ink: var(--graphite);
  --ink-soft: rgba(20, 22, 26, 0.66);
  --hairline: rgba(20, 22, 26, 0.12);

  /* Clamping the panel radius is a responsive concern, not a new value. */
  --r-panel: clamp(24px, 3.4vw, var(--radius-panel));
  --r-card: var(--radius-card);
  --r-pill: var(--radius-pill);

  --shell: min(1200px, 100% - 40px);
  --nav-height: 76px;

  /* Diagonal lane lines. Used as a texture wash over the flat panels. */
  --lanes-dark: repeating-linear-gradient(112deg, rgba(38, 53, 10, .07) 0 2px, transparent 2px 44px);
  --lanes-light: repeating-linear-gradient(112deg, rgba(200, 255, 61, .07) 0 2px, transparent 2px 44px);
}

html {
  scroll-behavior: smooth;
  /* Stops the rubber-band overscroll that exposed the canvas past the footer. */
  overscroll-behavior-y: none;
  /* Belt and braces for engines that ignore the above: with a background of
     its own, html paints the canvas instead of body propagating bone up to
     it, so anything beyond the page edge matches the footer rather than
     flashing white. */
  background: var(--graphite);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--volt); color: var(--volt-dark); }

:focus-visible {
  outline: 3px solid var(--graphite);
  outline-offset: 3px;
  border-radius: 6px;
}

.panel--dark :focus-visible,
.footer :focus-visible,
.signup :focus-visible { outline-color: var(--volt); }

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--volt);
  color: var(--volt-dark);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-weight: 700;
}

.skip-link:focus { left: 16px; top: 16px; }

[hidden] { display: none !important; }

/* ------------------------------------------------------------- display --- */

/* Anton's line box is much taller than its caps and is centred on the font's
   ascent, so equal padding lands the ink low in the block. These values are
   derived from the face's own metrics (cap top 0.867em above the baseline,
   ascent 1.18em, descent 0.33em) to leave an even 0.1em on all four sides.
   Re-derive them if the display face ever changes. */
.mark {
  display: inline-block;
  background: var(--volt);
  color: var(--graphite);
  line-height: 0.8;
  padding: 0.138em 0.1em 0.133em;
  border-radius: 0.08em;
  /* The block hugs the caps, so it starts 0.1em higher than the line above
     ends — the two collide on the comma. Vertical margins on an inline-block
     do count toward the line box, so margin-top buys the clearance back and
     margin-bottom keeps the headline from growing as much in return. */
  margin-top: 0.22em;
  margin-bottom: -0.02em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-caption);
  font-weight: var(--weight-body-bold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--volt-dark);
  transform: rotate(45deg);
  flex: none;
}

.panel--dark .eyebrow,
.panel--volt .eyebrow { color: inherit; opacity: .72; }
.panel--dark .eyebrow::before { background: var(--volt); opacity: 1; }
.panel--volt .eyebrow::before { background: var(--volt-dark); }

.section-title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--display-transform);
  font-size: var(--text-section);
  /* --leading-display is 0.92 because below that Anton's commas and
     descenders touch the next line. */
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.lede {
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.panel--dark .lede { color: rgba(245, 245, 240, 0.7); }
.panel--volt .lede { color: rgba(38, 53, 10, 0.78); }

/* ------------------------------------------------------------- buttons --- */

.button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  padding: 14px 26px;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: var(--volt);
  color: var(--volt-dark);
  white-space: nowrap;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(0.98); }

.button--sm { padding: 10px 18px; font-size: 13px; }
.button--block { width: 100%; min-height: 52px; }

.button--dark { background: var(--graphite); color: var(--bone); }
.button--dark:hover { background: #22262c; }

.button--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
}
.button--ghost:hover { border-color: var(--graphite); }

.panel--dark .button--ghost { color: var(--bone); border-color: rgba(245, 245, 240, .28); }
.panel--dark .button--ghost:hover { border-color: var(--volt); color: var(--volt); }

.button[disabled] { opacity: 0.45; cursor: default; transform: none; }

/* ----------------------------------------------------------------- nav --- */

.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--shell);
  z-index: 100;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 22px;
  border-radius: var(--r-pill);
  background: rgba(245, 245, 240, 0.78);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px rgba(20, 22, 26, 0.07);
}

.wordmark { display: inline-flex; align-items: center; gap: 10px; }

.wordmark__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1;
  padding-top: 2px;
}

.wordmark__text--sm { font-size: 17px; }

.nav__actions { display: flex; align-items: center; gap: 8px; }

.nav__link {
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
}

.nav__link:hover { color: var(--ink); background: rgba(20, 22, 26, .05); }

@media (max-width: 620px) {
  .nav__link { display: none; }
  .nav__inner { padding-left: 18px; }
  .wordmark__text { font-size: 18px; }
}

/* -------------------------------------------------------------- layout --- */

.shell { width: var(--shell); margin: 0 auto; }

.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }

.panel {
  border-radius: var(--r-panel);
  padding: var(--panel-padding);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.panel--dark { background: var(--graphite); color: var(--bone); }
.panel--volt { background: var(--volt); color: var(--volt-dark); }
.panel--outline { background: transparent; border: 2px solid var(--hairline); }

/* Lane lines sit under the content but over the fill. */
.panel--dark::before,
.panel--volt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.panel--dark::before { background-image: var(--lanes-light); }
.panel--volt::before { background-image: var(--lanes-dark); }

/* ---------------------------------------------------------------- hero --- */

.hero { padding: calc(var(--nav-height) + clamp(36px, 6vw, 72px)) 0 0; }

.hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding-bottom: clamp(36px, 5vw, 60px);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--display-transform);
  font-size: var(--text-hero);
  line-height: var(--leading-display-tight);
  letter-spacing: var(--tracking-display-tight);
  max-width: 14ch;
}

.hero__lede { text-align: center; max-width: 52ch; }

/* The signup panel and the phone share one volt slab; the phone is
   deliberately cropped by the panel's bottom edge. */
.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: 0;
}

.hero__stage-copy { padding-bottom: clamp(32px, 4.5vw, 68px); }

.hero__stage-phone {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  align-self: end;
  min-width: 0;
}

@media (max-width: 900px) {
  .hero__stage { grid-template-columns: minmax(0, 1fr); }
  .hero__stage-phone { margin-top: 8px; }
}

/* invite.html has no phone, so the form centres in the slab. */
.invite__stage { display: flex; justify-content: center; }
.invite__stage .signup { max-width: 440px; }

/* The invite headline is swapped for a personalised sentence at runtime, so
   it has to hold a full name plus a clause — much longer than the homepage's. */
.hero--invite .hero__title {
  font-size: clamp(36px, 5vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  max-width: 22ch;
}

/* -------------------------------------------------------------- sports --- */

.sports__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}

.sport {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100%;
}

.sport__tag {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 0.86;
  letter-spacing: -0.02em;
}

.sport__headline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.25;
  max-width: 24ch;
}

.sport__body { font-size: 15px; line-height: 1.6; opacity: .78; }

.sport__list { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 12px; }

.sport__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  padding-top: 10px;
  border-top: 1px solid currentColor;
  border-color: color-mix(in srgb, currentColor 18%, transparent);
}

.sport__list li::before {
  content: '';
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  flex: none;
  background: currentColor;
}

.panel--dark .sport__list li::before { background: var(--volt); }

/* ------------------------------------------------------ clubs & teams --- */

.teams__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}

.teams__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(36px, 4.5vw, 60px);
}

/* Ruled columns rather than another rounded card — the panel this sits in is
   already a card, and nesting a third radius reads as clutter. */
.teams__item {
  border-top: 2px solid var(--volt);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teams__item-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 23px;
  line-height: 0.96;
  letter-spacing: -0.005em;
}

.teams__item-body { font-size: 14px; line-height: 1.6; color: rgba(245, 245, 240, 0.68); }

@media (max-width: 820px) {
  .teams__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .teams__head .button { justify-self: start; }
}

/* ---------------------------------------------------------------- why --- */

.why__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.reason {
  border-radius: var(--r-card);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
}

.reason--dark { background: var(--graphite); color: var(--bone); }
.reason--volt { background: var(--volt); color: var(--volt-dark); }
.reason--outline { border: 2px solid var(--hairline); }

.reason__index {
  font-family: var(--font-stat);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: .34;
  margin-bottom: auto;
}

.reason--dark .reason__index { color: var(--volt); opacity: 1; }

.reason__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 0.94;
  letter-spacing: -0.01em;
}

.reason__body { font-size: 14px; line-height: 1.55; opacity: .74; }

/* --------------------------------------------------------------- team --- */

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 4vw, 48px);
}

.roster {
  background: var(--card);
  border-radius: var(--r-card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roster__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.005em;
}

.roster__link { display: inline-flex; color: var(--muted); }
.roster__link:hover { color: var(--volt); }

.roster__role { font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------- app store --- */

.appstore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 22px 26px;
  border: 2px solid var(--hairline);
  border-radius: var(--r-pill);
}

@media (max-width: 560px) {
  .appstore { border-radius: var(--r-card); justify-content: center; text-align: center; }
}

.appstore__pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--graphite);
  color: var(--bone);
  border-radius: var(--r-pill);
  padding: 12px 24px 12px 20px;
}

.appstore__text { text-align: left; line-height: 1.1; }
.appstore__small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; }

.appstore__big {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.appstore__note { font-size: 13px; color: var(--ink-soft); }

/* -------------------------------------------------------------- signup --- */

.signup {
  background: var(--graphite);
  color: var(--bone);
  border-radius: var(--r-card);
  padding: var(--card-padding);
  width: 100%;
  text-align: left;
  scroll-margin-top: calc(var(--nav-height) + 24px);
  box-shadow: 0 24px 60px rgba(20, 22, 26, 0.22);
}

.signup__eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.005em;
  margin-bottom: 18px;
}

.signup__form { display: flex; flex-direction: column; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.field__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--muted);
  text-transform: uppercase;
}

.field__input,
.field__select {
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius-input);
  padding: 13px 16px;
  color: var(--bone);
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  width: 100%;
}

.field__input:focus,
.field__select:focus { border-color: var(--volt); outline: none; }
.field__input::placeholder { color: var(--muted); }
.field__select { appearance: none; cursor: pointer; }

.signup__action { margin-top: 6px; }
.signup__note { font-size: 11px; color: var(--muted); line-height: 1.5; }

.signup__error { font-size: 13px; font-weight: 600; color: var(--volt); margin: -2px 0 0; }

.signup__done {
  color: var(--volt);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.05;
  padding: 24px 0;
}

/* ----------------------------------------------------------------- cta --- */

.cta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }

.cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

@media (max-width: 860px) {
  .cta { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------- phone mockup --- */

.phone {
  --heat-1: rgba(200, 255, 61, 0.22);
  --heat-2: rgba(200, 255, 61, 0.6);
  --phone-scale: 0.66;
  position: relative;
  flex: none;
  width: 393px;
  height: 852px;
  background: #050506;
  border-radius: 56px;
  padding: 11px;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4), 0 0 0 1.5px rgba(20, 22, 26, 0.2);
  transform: scale(var(--phone-scale));
  transform-origin: bottom center;
  /* Collapse the space the un-scaled box would occupy, then let the bottom
     of the device run past the panel edge so it reads as cropped. */
  margin: calc(-852px * (1 - var(--phone-scale))) calc(-393px * (1 - var(--phone-scale)) / 2) -64px;
}

.phone__btn {
  position: absolute;
  width: 3px;
  background: linear-gradient(#2a2c31, var(--graphite));
  border-radius: 2px;
}

.phone__btn--mute      { left: -2px;  top: 176px; height: 30px; }
.phone__btn--vol-up    { left: -2px;  top: 226px; height: 62px; }
.phone__btn--vol-down  { left: -2px;  top: 300px; height: 62px; }
.phone__btn--power     { right: -2px; top: 258px; height: 96px; }

.phone__inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 45px;
  overflow: hidden;
  background: var(--graphite);
  display: flex;
  flex-direction: column;
  color: var(--bone);
}

.phone__statusbar {
  position: relative;
  z-index: 3;
  height: 54px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 30px 8px;
  font-size: 15px;
  font-weight: 600;
}

.phone__status-icons { display: flex; align-items: center; gap: 6px; }
.phone__signal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.phone__signal span { width: 3px; background: var(--bone); border-radius: 1px; }
.phone__signal span:nth-child(1) { height: 4px; }
.phone__signal span:nth-child(2) { height: 6px; }
.phone__signal span:nth-child(3) { height: 9px; }
.phone__signal span:nth-child(4) { height: 11px; }

.phone__battery {
  display: block;
  width: 22px;
  height: 11px;
  border: 1px solid rgba(245, 245, 240, 0.6);
  border-radius: 3px;
  padding: 1.5px;
}

.phone__battery-fill { display: block; width: 72%; height: 100%; background: var(--bone); border-radius: 1px; }

.phone__island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 35px;
  background: #000;
  border-radius: 999px;
  z-index: 4;
}

.progress {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 24px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.progress__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.01em;
}

.progress-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--volt);
  text-transform: uppercase;
}

.progress-week {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.progress-week__figure { display: flex; align-items: baseline; gap: 8px; }

.progress-week__figure strong {
  font-family: var(--font-stat);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--volt);
}

.progress-week__figure span { font-size: 13px; color: var(--bone); }

.progress-week__bar { display: flex; gap: 5px; }
.progress-week__bar span { flex: 1; height: 5px; border-radius: 999px; background: var(--card-2); }
.progress-week__bar span.is-filled { background: var(--volt); }
.progress-week__note { font-size: 12px; line-height: 1.45; color: var(--muted); }

.progress-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.progress-stat { background: var(--card); border-radius: var(--radius-card); padding: 16px 6px; text-align: center; }

.progress-stat__value {
  display: block;
  font-family: var(--font-stat);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--volt);
}

.progress-stat__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 4px;
}

.progress-heat { display: flex; flex-direction: column; gap: 10px; }
.progress-heat__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.progress-heat__col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; }

.heat-cell { aspect-ratio: 1; border-radius: 2px; background: var(--card-2); }
.heat-cell--1 { background: var(--heat-1); }
.heat-cell--2 { background: var(--heat-2); }
.heat-cell--3 { background: var(--volt); }
.heat-cell--none { background: transparent; }

.progress-heat__legend { display: flex; gap: 10px; }
.progress-heat__legend li { display: flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 600; color: var(--muted); }
.progress-heat__legend .heat-cell { width: 8px; height: 8px; aspect-ratio: unset; }

.progress-last {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.progress-last__day { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 20px; line-height: 1; }
.progress-last__meta { font-size: 13px; line-height: 1.5; color: var(--bone); }

.progress-sessions { display: flex; flex-direction: column; gap: 10px; }
.progress-sessions__list { display: flex; flex-direction: column; gap: 8px; }

.session-row {
  background: var(--card);
  border-radius: var(--radius-input);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.session-row__col { display: flex; flex-direction: column; gap: 2px; }
.session-row__col--end { align-items: flex-end; }
.session-row__day, .session-row__duration { font-size: 14px; font-weight: 600; }
.session-row__sport, .session-row__clips { font-size: 11px; color: var(--muted); }
.session-row--muted .session-row__duration { color: var(--muted); }
.progress-sessions__best { font-size: 11px; color: var(--muted); }

.phone__tabbar {
  position: relative;
  z-index: 3;
  flex: none;
  background: var(--graphite);
  border-top: 1px solid rgba(74, 78, 88, 0.55);
  padding: 9px 8px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.phone__tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--muted); }
.phone__tab.is-active { color: var(--volt); }
.phone__tab svg { width: 24px; fill: currentColor; }
.phone__tab span { font-size: 10px; font-weight: 600; }

.phone__home {
  position: relative;
  z-index: 3;
  flex: none;
  background: var(--graphite);
  padding: 8px 0 9px;
  display: flex;
  justify-content: center;
}

.phone__home span { width: 140px; height: 5px; border-radius: 999px; background: rgba(245, 245, 240, 0.35); }

@media (max-width: 1100px) { .phone { --phone-scale: 0.56; } }
@media (max-width: 900px)  { .phone { --phone-scale: 0.62; } }
@media (max-width: 520px)  { .phone { --phone-scale: 0.5; } }

/* ---------------------------------------------------------------- 404 --- */

.notfound {
  padding: calc(var(--nav-height) + clamp(40px, 6vw, 80px)) 0 clamp(56px, 8vw, 96px);
}

.notfound__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.notfound__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

.notfound__code {
  font-family: var(--font-stat);
  font-size: clamp(96px, 15vw, 190px);
  line-height: 0.76;
  letter-spacing: -0.03em;
  color: var(--volt);
}

.notfound__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

.notfound__body { font-size: 15px; line-height: 1.6; color: rgba(245, 245, 240, 0.68); max-width: 44ch; }
.notfound__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }

.tracker { background: var(--card); border-radius: var(--r-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.tracker__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.tracker__label { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); }
.tracker__yds { font-family: var(--font-stat); font-size: 28px; line-height: 1; color: var(--volt); }
.tracker__art { display: block; width: 100%; overflow: visible; }

@media (max-width: 820px) {
  .notfound__grid { grid-template-columns: minmax(0, 1fr); }
}

@keyframes cb-fly {
  0%   { transform: translate(0px,0px); opacity: 0; }
  1%   { transform: translate(0px,0px); opacity: 1; }
  5.6% { transform: translate(32px,-58px); }
  11.2%{ transform: translate(64px,-99px); }
  16.9%{ transform: translate(98px,-123px); }
  22.5%{ transform: translate(132px,-130px); }
  28.1%{ transform: translate(167px,-120px); }
  33.7%{ transform: translate(202px,-93px); }
  39.4%{ transform: translate(239px,-49px); }
  45%  { transform: translate(276px,12px); opacity: 1; }
  46%  { transform: translate(276px,18px); opacity: 0; }
  100% { transform: translate(276px,18px); opacity: 0; }
}

@keyframes cb-trail {
  0%   { stroke-dashoffset: 100; opacity: .55; }
  45%  { stroke-dashoffset: 0;   opacity: .55; }
  78%  { stroke-dashoffset: 0;   opacity: 0; }
  100% { stroke-dashoffset: 100; opacity: 0; }
}

@keyframes cb-ripple {
  0%,44% { transform: scale(.05); opacity: 0; }
  47%    { transform: scale(.2);  opacity: .9; }
  88%    { transform: scale(1);   opacity: 0; }
  100%   { transform: scale(1);   opacity: 0; }
}

@keyframes cb-drop {
  0%,44% { transform: translate(0px,0px) scale(.4); opacity: 0; }
  46%    { opacity: 1; }
  54%    { transform: translate(var(--dx),var(--dy)) scale(1); opacity: 1; }
  64%    { transform: translate(calc(var(--dx) * 1.5),8px) scale(.5); opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes cb-plume {
  0%,44% { transform: scaleY(0); opacity: 0; }
  48%    { transform: scaleY(1); opacity: .85; }
  60%    { transform: scaleY(.2); opacity: 0; }
  100%   { transform: scaleY(0); opacity: 0; }
}

/* ------------------------------------------------------------ document --- */

/* Long-form pages served by api/doc.js — Terms, Privacy Policy, and anything
   else written in the Ops document builder. The body HTML is produced by that
   builder's Markdown renderer, so the element set here is closed and known:
   h2-h4, p, ul, ol, blockquote, hr, a, strong, em, code. The base reset above
   strips list and heading styling site-wide, so this section puts it back for
   this one subtree rather than loosening the reset for every page. */

.doc {
  padding: calc(var(--nav-height) + clamp(32px, 5vw, 64px)) 0 clamp(48px, 7vw, 88px);
}

/* Measure, not width: a legal page is read line by line, and 68ch is about
   where a line stops being comfortable to track back from. */
.doc__shell { max-width: 68ch; }

.doc__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 2px solid var(--hairline);
}

.doc__title {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--display-transform);
  font-size: clamp(34px, 5.2vw, 58px);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.doc__meta { font-size: 13px; color: var(--ink-soft); }

/* Says a placeholder is a placeholder. Volt-edged rather than red: this is a
   status, not an error. */
.doc__notice {
  margin-top: clamp(24px, 3vw, 32px);
  padding: 14px 18px;
  border-left: 3px solid var(--volt);
  background: rgba(200, 255, 61, .16);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  font-size: 14px;
  line-height: 1.6;
}

.doc__notice a { text-decoration: underline; text-underline-offset: 3px; }

.doc__body {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}

.doc__body > * + * { margin-top: 1.1em; }

.doc__body h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: var(--display-transform);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 2em;
}

.doc__body h3 {
  font-size: 17px;
  font-weight: var(--weight-body-bold);
  margin-top: 1.8em;
}

.doc__body h4 {
  font-size: 15px;
  font-weight: var(--weight-body-strong);
  margin-top: 1.6em;
}

/* Headings carry generated ids, so every section is linkable. The offset
   keeps the fixed nav from covering the one you just jumped to. */
.doc__body h2,
.doc__body h3,
.doc__body h4 { scroll-margin-top: calc(var(--nav-height) + 16px); }

.doc__body ul,
.doc__body ol {
  list-style: revert;
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.doc__body li::marker { color: var(--steel); }

.doc__body a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.doc__body a:hover { color: var(--volt-dark); background: rgba(200, 255, 61, .35); }

.doc__body blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 20px;
  border-left: 2px solid var(--hairline);
  color: var(--ink-soft);
}

.doc__body blockquote p { font-size: 15px; }

.doc__body hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2em 0;
}

.doc__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(20, 22, 26, .06);
  padding: 0.15em 0.35em;
  border-radius: 4px;
}

/* -------------------------------------------------------------- footer --- */

.footer {
  background: var(--graphite);
  color: var(--muted);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  margin-top: clamp(32px, 5vw, 64px);
  padding: clamp(36px, 5vw, 56px) 0 40px;
}

.footer__inner {
  width: var(--shell);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer .wordmark__text { color: var(--bone); }
.footer__links { display: flex; gap: 24px; font-size: 13px; font-weight: 600; }
.footer__links a:hover { color: var(--volt); }
.footer__legal { font-size: 12px; color: var(--steel); }

/* -------------------------------------------------------------- reveal --- */

/* Applied by JS, so the page is fully visible without it. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}

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

  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .button:hover, .button:active { transform: none; }
  #cb-ball, #cb-trail, .cb-ring, .cb-drop, #cb-plume { animation: none !important; }
}