/* ============================================================
 * squattime.tech — squattime ink + cobalt, dark-locked.
 * Tokens mirror the app: SquatBrand.swift (BrandPalette
 * .squattimeCobalt) in movebook-ios is the source of truth.
 * Change there first. Only the palette's DARK values appear here
 * — the app is dark-locked, so the light column never renders.
 * Static on purpose: a challenge link must render instantly on
 * a phone; there is no account, no backend, no JS framework.
 *
 * Unlike hangtime's stylesheet, the long-form article styles
 * (main.doc, .faq, .refs, .callout, .disclaimer, .agerows) live
 * HERE rather than in a per-page <style> block — squattime ships
 * a dozen guide pages and duplicating that block twelve times
 * is how it drifts.
 * ============================================================ */

@font-face { font-family: 'Space Mono'; font-weight: 400; font-display: swap; src: url('/fonts/SpaceMono-400.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-weight: 700; font-display: swap; src: url('/fonts/SpaceMono-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-display: swap; src: url('/fonts/SpaceGrotesk-600.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('/fonts/SpaceGrotesk-700.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 400; font-display: swap; src: url('/fonts/HankenGrotesk-400.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-weight: 600; font-display: swap; src: url('/fonts/HankenGrotesk-600.woff2') format('woff2'); }

:root {
  --bg:     #0b0b0d;   /* family ink */
  --text:   #f3f0ec;   /* family paper */
  --dim:    #9c9a96;
  --faint:  #6a6864;
  --line:   #2b2a28;
  --accent:       #5b90ff;   /* squattime cobalt (dark value) */
  --accent-press: #86b2ff;
  --accent-soft:  #0e1830;
  --accent-glow:  rgba(91, 144, 255, 0.35);
  --mono:    'Space Mono', ui-monospace, monospace;
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
}

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

html { color-scheme: dark; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(60% 42% at 50% 108%, rgba(91, 144, 255, 0.16), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-align: center;
  padding: 28px 24px 40px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 100%;
  max-width: 520px;
}

/* ── Logo lockup ─────────────────────────────────────────── */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}
.logo .word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 31px;
  letter-spacing: -0.02em;
}
.logo .word em { font-style: normal; color: var(--accent); }

/* ── Hero: depth bar beside the dial ─────────────────────── */

/* The two halves of the app's Squat screen, side by side: the ring
   carries the number, the bar carries the moat. */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.dial {
  position: relative;
  width: min(272px, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.dial svg { position: absolute; inset: 0; transform: rotate(-90deg); }
/* White ring, white label. The cobalt looked right but disappeared on a
   dark room and on video; blue stays for the depth zone (the moat) and
   the type accents, where it's a highlight rather than the thing itself. */
.dial .track  { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 6; }
.dial .fill   {
  fill: none;
  stroke: var(--text);
  stroke-width: 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
}
.dial .inner { display: grid; gap: 7px; }
.time {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(44px, 13vw, 58px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dial-label {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text);
}
.dial-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  color: var(--faint);
}

/* The depth bar. Top = standing, bottom = deep. The lit zone is
   at-or-below the knee line — the only place a rep counts. */
.depth {
  position: relative;
  width: 15px;
  height: min(272px, 62vw);
  flex: 0 0 auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  overflow: hidden;
}
.depth-zone {
  position: absolute;
  left: 0; right: 0;
  top: 58%; bottom: 0;
  background: linear-gradient(180deg, rgba(91, 144, 255, 0.30), rgba(91, 144, 255, 0.14));
  border-top: 1.5px solid var(--accent);
}
/* Band edges the app draws ticks for: the standing floor and the
   hold-end line. Positioned with --y from the top. */
.depth-tick {
  position: absolute;
  left: 2px; right: 2px;
  top: var(--y);
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
}
/* Your hips. Travels down as you descend. */
.depth-dot {
  position: absolute;
  left: 50%;
  top: var(--y, 8%);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.4s ease;
}
/* While a hold is being timed: the dot glows and the zone brightens. */
.depth.held .depth-dot { box-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 0 26px var(--accent-glow); }
.depth.held .depth-zone { background: linear-gradient(180deg, rgba(91, 144, 255, 0.46), rgba(91, 144, 255, 0.22)); }
.depth-zone { transition: background 0.4s ease; }
.depth-cap {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-transform: uppercase;
  line-height: 1.7;
  max-width: 34ch;
}
.depth-cap b { color: var(--accent); font-weight: 700; }

.sub-hero { text-align: center; margin-top: -6px; }

/* The two outputs side by side, with the day's running total under them. */
.modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 440px;
  text-align: left;
}
.mode {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}
.mode-k {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text);
}
.mode-v { color: var(--dim); font-size: 13.5px; line-height: 1.45; }
/* The day's total isn't a third mode, it's what the two add up to — so it
   sits full width under them rather than orphaned in a two-column row. */
.mode-wide { grid-column: 1 / -1; }
.mode-note {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  line-height: 1.7;
}
.mode-note a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.mode-note a:hover { color: var(--accent-press); }
@media (max-width: 380px) { .modes { grid-template-columns: 1fr; } }

/* Demo video (uncomment the section in index.html once demo.mp4 exists).
   Same width as the dial so the page keeps one visual rhythm. */
.demo { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone {
  width: min(272px, 68vw);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.phone video { display: block; width: 100%; height: auto; border-radius: 23px; }

/* Pulses three times on load, then settles and stays still. It used to loop
   forever, which read as restless. The keyframes end where they start, so it
   comes to rest at scale(1) with no jump. */
.breathe { animation: breathe 4.2s ease-in-out 3; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.022); }
}

/* ── Type ────────────────────────────────────────────────── */

.kicker {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  text-wrap: balance;
  line-height: 1.6;
}
h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 9vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.sub { color: var(--dim); font-size: 16.5px; line-height: 1.55; max-width: 40ch; }

/* ── Buttons ─────────────────────────────────────────────── */

.ctas { display: flex; flex-direction: column; gap: 12px; align-items: center; width: 100%; }
.btn {
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 14px;
  padding: 15px 30px;
  width: min(320px, 100%);
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #f5f8ff; }
.btn-primary:hover { background: var(--accent-press); color: #0b0b0d; }
.btn-ghost {
  color: var(--dim);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { color: var(--text); }
/* Pre-launch: the App Store record exists, the listing doesn't. A badge,
   not a link — a dead App Store URL is worse than no button. */
.btn-soon {
  border: 1px dashed var(--line);
  color: var(--dim);
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
  border-radius: 14px;
  padding: 15px 30px;
  width: min(320px, 100%);
  display: grid;
  place-items: center;
}
.soon {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.fine {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dim);
  max-width: 380px;
}
.fine a { color: var(--accent); text-decoration: none; }
.fine a:hover { color: var(--accent-press); }

/* ── Feature chips (landing) ─────────────────────────────── */

.feats {
  display: grid;
  gap: 10px;
  width: 100%;
  list-style: none;
  text-align: left;
}
.feats li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.02);
}
.feats .k {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
  /* Fixed label column (sized to HANDS-FREE) so every row's text starts
     at the same x. */
  flex: 0 0 88px;
}
.feats .v { color: var(--dim); font-size: 14.5px; line-height: 1.45; }
.feats .v strong { color: var(--text); font-weight: 600; }

/* ── Why / science block (landing) ───────────────────────── */

.why {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.why-h {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 7vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.why-cards { margin-top: 4px; }
.why-cards .v { font-size: 14px; line-height: 1.5; }
.why-note { max-width: 42ch; }
.why-note a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.why-note a:hover { color: var(--accent-press); }

/* Three stat blocks, one per job the squat actually does (mobility / blood
 * sugar / strength). Stacked rather than 3-up: the numbers are large and
 * three across at 520px would crush them. */
.stats { display: grid; gap: 12px; width: 100%; }
.stats .stat { padding: 20px 20px 18px; }
/* Smaller than a lone hero stat — three of these have to coexist. */
.stats .stat-num { font-size: clamp(38px, 12vw, 52px); }
.stats .stat-body { font-size: 14.5px; max-width: 36ch; }
.stat-tag {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.stat-tag span { color: var(--faint); }

/* The headline number. This is the hook — give it room to land. */
.stat {
  width: 100%;
  border: 1px solid var(--accent-soft);
  border-radius: 16px;
  padding: 24px 22px;
  background:
    radial-gradient(80% 120% at 50% -10%, rgba(91, 144, 255, 0.14), transparent 70%),
    rgba(255, 255, 255, 0.02);
}
.stat-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 15vw, 66px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-shadow: 0 0 26px var(--accent-glow);
}
.stat-body {
  margin-top: 10px;
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.5;
  max-width: 34ch;
  margin-inline: auto;
}
.stat-body strong { color: var(--accent-press); font-weight: 600; }
.stat-cite {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.stat-cite em { font-style: italic; color: var(--dim); }

/* Benchmark strip — "how many should you be able to do?" */
.bench { width: 100%; }
.bench-h {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.bench-rows { width: 100%; border-collapse: collapse; }
.bench-rows td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.bench-rows tr:last-child td { border-bottom: none; }
.bench-rows .bench-lvl {
  text-align: left;
  font-family: var(--body);
  font-weight: 400;
  font-size: 13.5px;
  color: var(--dim);
}
.bench-rows td span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-left: 4px;
}

/* ── Long-form guide pages (main.doc) ────────────────────── */

main.doc {
  justify-content: flex-start;
  /* The base `main` centres its children as flex items, which is right for
     the landing page but wrong here: a short <h2> would size to its text and
     sit centred while the long paragraph above it filled the column. Stretch
     puts every block on the same left edge. */
  align-items: stretch;
  text-align: left;
  gap: 16px;
  padding-top: 34px;
  max-width: 620px;
}
main.doc h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.08;
}
main.doc .lede { color: var(--dim); font-size: 17px; line-height: 1.6; }
main.doc h2 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 22px;
}
main.doc h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
}
main.doc p { color: var(--dim); font-size: 15.5px; line-height: 1.62; }
main.doc a { color: var(--text); }
main.doc sup a { color: var(--accent); text-decoration: none; font-size: 0.75em; padding-left: 1px; }
main.doc strong { color: var(--text); font-weight: 600; }
main.doc ul, main.doc ol.steps {
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.62;
  padding-left: 20px;
  margin: 4px 0;
}
main.doc li { margin-bottom: 6px; }
main.doc li strong { color: var(--text); }
/* Inline link inside prose that should read as a link, not as body text. */
main.doc .lnk { color: var(--accent); text-decoration: none; }
main.doc .lnk:hover { color: var(--accent-press); }

/* Data tables inside guides (benchmarks, protocols, plans). */
.agerows { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.agerows th, .agerows td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.agerows th {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--faint);
  text-transform: uppercase;
}
.agerows td { color: var(--dim); }
.agerows td:first-child {
  color: var(--text);
  font-family: var(--mono);
  font-weight: 700;
  white-space: nowrap;
}
.agerows caption {
  text-align: left;
  font-size: 12px;
  color: var(--faint);
  margin-top: 6px;
  caption-side: bottom;
  line-height: 1.5;
}
/* Wide tables (the 5-column norms grids) scroll rather than push the
   page sideways. */
.scroller { width: 100%; overflow-x: auto; }
.scroller .agerows { min-width: 460px; }

.callout {
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(91, 144, 255, 0.06);
  margin-top: 10px;
}
.callout p { color: var(--text); font-size: 14.5px; margin: 0; }
.callout p + p { margin-top: 8px; }

.disclaimer {
  border-left: 3px solid var(--faint);
  padding: 10px 14px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}
.disclaimer p { color: var(--faint); font-size: 12.5px; line-height: 1.55; margin: 0; }
.disclaimer strong { color: var(--dim); }
.disclaimer a { color: var(--dim); }

.faq { margin-top: 8px; display: grid; gap: 14px; }
.faq p { margin-top: 4px; }

.refs { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.refs ol { margin: 8px 0 0 18px; padding: 0; }
.refs li { color: var(--faint); font-size: 12.5px; line-height: 1.55; margin-bottom: 8px; }
.refs a { color: var(--dim); }
.backcta { margin-top: 26px; }

/* Guide-to-guide nav, repeated at the foot of every article. */
.guidenav {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--faint);
}
.guidenav a { color: var(--accent); text-decoration: none; }
.guidenav a:hover { color: var(--accent-press); }

/* ── Footer ──────────────────────────────────────────────── */

footer {
  margin-top: 34px;
  font-size: 13px;
  color: var(--faint);
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ── Staggered load reveal ───────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(6px);
  animation: reveal 0.5s ease-out forwards;
  animation-delay: calc(var(--d, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .breathe { animation: none; }
}