/* ============================================================
   Fitness Quotient — fitnessq.app
   One stylesheet, all pages. No build step, no webfonts, no JS.
   ============================================================ */

/* ---------- 1. Tokens ---------- */

:root {
  /* Type. SF is never downloaded: Apple's license forbids web
     embedding. It is requested by generic family and resolves
     natively on Apple platforms; elsewhere the reader's own
     system UI font is used. Total font bytes: 0. */
  --font-hero: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ink on paper. */
  --paper: #FAFAF8;
  --ink: #0B0A12;
  --ink-2: #46454C;
  /* 4.78:1 on paper. Carries the 11px labels and 13px captions, so it
     has to clear AA for normal text, not just large. */
  --ink-3: #706E7A;
  --rule: rgba(11, 10, 18, .14);
  --rule-faint: rgba(11, 10, 18, .06);

  /* Spot colour. Three uses page-wide: the FQ mark, the primary
     download link, and ELITE in the rank ladder. */
  --spot: #7F3BF7;

  /* Grid. */
  --page-max: 1440px;
  --margin: clamp(20px, 4vw, 64px);
  --gutter: clamp(16px, 1.6vw, 28px);
  --baseline: 8px;

  /* Vertical rhythm, all multiples of the baseline. */
  --space-band: calc(var(--baseline) * 16);
  /* 128 */
  --space-block: calc(var(--baseline) * 7);
  /* 56  */
  --space-row: calc(var(--baseline) * 3);
  /* 24  */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B0A12;
    --ink: #FAFAF8;
    --ink-2: #B4B2BB;
    --ink-3: #85838D;
    --rule: rgba(250, 250, 248, .18);
    --rule-faint: rgba(250, 250, 248, .07);
    --spot: #A87BFF;
    /* lifted for contrast on ink */
  }
}

@media (max-width: 900px) {
  :root {
    --space-band: calc(var(--baseline) * 9);
    /* 72 */
    --space-block: calc(var(--baseline) * 5);
    /* 40 */
  }
}

/* ---------- 2. Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Square by decree. The App Store badge SVG carries Apple's own
   geometry and is the sole exception. */
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
blockquote,
dl,
dd,
table {
  margin: 0;
  padding: 0;
  border-radius: 0;
}

ul,
ol {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

a {
  color: inherit;
}

/* ---------- 3. Layout ---------- */

.sheet {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Full-bleed horizontal rules. Bands own their own rules so the
   line runs edge to edge while the content stays on the grid. */
.band {
  padding-block: var(--space-band);
}

.band--ruled {
  border-top: 1px solid var(--rule);
}

/* The grid is drawn, not implied. A fixed overlay paints a hairline
   at each of the 13 column boundaries, in the same geometry as
   .sheet .grid so the rules land exactly under the content edges. */
.colrules {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.colrules > .grid {
  height: 100%;
}

.colrules span {
  border-left: 1px solid var(--rule-faint);
}

.colrules span:last-child {
  border-right: 1px solid var(--rule-faint);
}

@media (max-width: 900px) {
  .colrules {
    display: none;
  }
}

/* ---------- 4. Type ---------- */

.display {
  font-family: var(--font-hero);
  font-size: clamp(40px, 6.4vw, 96px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.0;
  text-wrap: balance;
}

/* Half the display size, exactly. The hero shouts once; section
   heads speak. */
.h2 {
  font-family: var(--font-hero);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.05;
  text-wrap: balance;
}

.h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.lede {
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.caption {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Labels, folios, figure numbers. */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink-3);
}

/* A label opening a block sits on the same baseline as the folio
   hanging beside it in column 1. */
.feature__copy > .label,
.ladder__head > .label,
.pillars__head > .label,
.download__head > .label,
.spec__head > .label {
  display: block;
}

.num {
  font-family: var(--font-hero);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
}

/* Nothing on this page exceeds weight 600. Hierarchy is scale
   and position, never weight. */
strong,
b {
  font-weight: 600;
}

em {
  font-style: italic;
}

/* ---------- 5. Links ---------- */

a {
  text-decoration: none;
}

.link {
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color .12s linear;
}

.link:hover {
  text-decoration-color: currentColor;
}

/* Spot use 2 of 3 — the page's one action. */
.link--action {
  color: var(--spot);
  text-decoration-color: color-mix(in srgb, var(--spot) 40%, transparent);
}

.link--action:hover {
  text-decoration-color: var(--spot);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  z-index: 10;
}

.skip-link:focus {
  left: 0;
}

/* ---------- 6. Masthead ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
}

.masthead__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-row);
  flex-wrap: wrap;
  padding-block: calc(var(--baseline) * 3);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* Spot use 1 of 3 — identity. The mark asset is already purple. */
.wordmark img {
  width: 22px;
  height: 22px;
}

/* Publication metadata strip. */
.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px var(--space-row);
  padding-block: calc(var(--baseline) * 1.5);
}

/* Once it wraps, space-between strands the last item against the
   margin. Run it on as a list instead. */
@media (max-width: 720px) {
  .masthead__meta {
    justify-content: flex-start;
    gap: 6px 16px;
  }
}

/* ---------- 7. Hero ---------- */

.hero {
  padding-block: calc(var(--baseline) * 14) var(--space-band);
}

.hero__head {
  grid-column: 1 / 10;
}

.hero__lede {
  grid-column: 1 / 7;
  margin-top: var(--space-row);
}

.hero__cta {
  grid-column: 1 / 7;
  margin-top: var(--space-block);
  display: flex;
  align-items: center;
  gap: var(--space-row);
  flex-wrap: wrap;
}

/* Table of contents, standing in for the old sticky nav. */
.contents {
  grid-column: 11 / 13;
  grid-row: 1 / span 3;
  align-self: end;
}

.contents li {
  border-top: 1px solid var(--rule);
}

.contents a {
  display: flex;
  gap: 10px;
  padding-block: 10px;
  font-size: 14px;
  color: var(--ink-2);
  transition: color .12s linear;
}

.contents a:hover {
  color: var(--ink);
}

.contents .folio {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {

  .hero__head,
  .hero__lede,
  .hero__cta {
    grid-column: 1 / 13;
  }

  .contents {
    grid-column: 1 / 13;
    grid-row: auto;
    margin-top: var(--space-block);
  }
}

/* ---------- 8. Figures ---------- */

.figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}

/* The screenshots are device mockups on transparent ground, so they
   are set as photographs: no frame, no shadow, no glow. The rule and
   the figure number do the framing instead. */
.figure img {
  width: 100%;
}

.figure__no {
  display: block;
  margin-bottom: 2px;
}

/* Hero plate: three devices laid flat across the measure, each on
   its own three columns with a column of air after it. */
.plate {
  margin-top: var(--space-band);
}

.plate .figure:nth-child(1) {
  grid-column: 1 / 4;
}

.plate .figure:nth-child(2) {
  grid-column: 5 / 8;
}

.plate .figure:nth-child(3) {
  grid-column: 9 / 12;
}

@media (max-width: 900px) {
  .plate .figure:nth-child(n) {
    grid-column: span 12;
  }

  .plate .figure img {
    max-width: 300px;
  }

  .plate .figure + .figure {
    margin-top: var(--space-block);
  }
}

/* ---------- 9. Feature blocks ---------- */

/* One invariant structure, repeated five times. No alternating
   sides: the repetition is the rhythm. */
.feature__folio {
  grid-column: 1 / 2;
}

.feature__copy {
  grid-column: 2 / 8;
}

.feature__figure {
  grid-column: 9 / 13;
}

.feature__figure img {
  max-width: 320px;
}

.feature__figure--watch img {
  max-width: 240px;
}

.feature__title {
  margin-top: 6px;
}

.feature__lede {
  margin-top: var(--space-row);
  max-width: 46ch;
}

.points {
  margin-top: var(--space-block);
  max-width: 52ch;
}

.points li {
  border-top: 1px solid var(--rule);
  padding-block: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}

.points li:last-child {
  border-bottom: 1px solid var(--rule);
}

.points strong {
  color: var(--ink);
}

@media (max-width: 1100px) {
  .feature__copy {
    grid-column: 2 / 13;
  }

  .feature__figure {
    grid-column: 2 / 13;
    margin-top: var(--space-block);
  }
}

@media (max-width: 900px) {
  .feature__folio {
    grid-column: 1 / 13;
    margin-bottom: 12px;
  }

  .feature__copy,
  .feature__figure {
    grid-column: 1 / 13;
  }
}

/* ---------- 10. Specification ---------- */

/* Four term/description pairs, so a definition list rather than a
   table. Laid on the page grid directly, which keeps the description
   column landing exactly on column 4. */

.spec__head {
  grid-column: 1 / 13;
  margin-bottom: var(--space-block);
}

.spec {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.spec dt {
  grid-column: 1 / 4;
}

.spec dd {
  grid-column: 4 / 13;
  color: var(--ink-2);
  font-size: 17px;
}

.spec dt,
.spec dd {
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--baseline) * 2.5);
  display: flex;
  align-items: baseline;
}

@media (max-width: 640px) {
  .spec dt {
    grid-column: 1 / 13;
    padding-bottom: 0;
  }

  .spec dd {
    grid-column: 1 / 13;
    border-top: 0;
    padding-top: 4px;
  }
}

/* ---------- 11. Rank ladder ---------- */

.ladder__head {
  grid-column: 1 / 8;
  margin-bottom: var(--space-block);
}

.ladder {
  grid-column: 1 / 13;
}

.ladder li {
  display: grid;
  grid-template-columns: 4ch minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--gutter);
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--baseline) * 2);
}

.ladder li:last-child {
  border-bottom: 1px solid var(--rule);
}

.ladder .folio {
  color: var(--ink-3);
}

.ladder .rank {
  font-family: var(--font-hero);
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* The bar encodes rank order and nothing else: one fifth of the
   track per step. No point thresholds are implied. */
.ladder__bar {
  display: block;
  height: 2px;
  width: var(--w);
  background: var(--ink);
}

@media (max-width: 640px) {
  .ladder li {
    grid-template-columns: 4ch minmax(0, 1fr);
  }

  .ladder__bar {
    grid-column: 2;
  }
}

/* Spot use 3 of 3 — aspiration. */
.ladder .rank--top {
  color: var(--spot);
}

/* ---------- 12. Pillars ---------- */

/* Explicit rows: without them the first card auto-places into the
   empty columns beside its own heading. */
.pillars__head {
  grid-column: 1 / 8;
  grid-row: 1;
  margin-bottom: var(--space-block);
}

.pillar {
  grid-row: 2;
  grid-column: span 4;
  border-top: 1px solid var(--rule);
  padding-top: calc(var(--baseline) * 2);
}

.pillar p {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .pillar {
    grid-column: 1 / 13;
    grid-row: auto;
  }

  .pillar + .pillar {
    margin-top: var(--space-block);
  }
}

/* ---------- 13. Download band ---------- */

/* Inverted, square, full bleed. Tokens swap in dark mode, so the
   band stays opposite the page in both schemes. */
.invert {
  background: var(--ink);
  color: var(--paper);
}

.invert .lede,
.invert .body,
.invert .label {
  color: color-mix(in srgb, var(--paper) 70%, transparent);
}

.download__head {
  grid-column: 1 / 9;
}

.download__lede {
  grid-column: 1 / 7;
  margin-top: var(--space-row);
}

.download__cta {
  grid-column: 1 / 9;
  margin-top: var(--space-block);
  display: flex;
  align-items: center;
  gap: var(--space-row);
  flex-wrap: wrap;
}

@media (max-width: 1100px) {

  .download__head,
  .download__lede,
  .download__cta {
    grid-column: 1 / 13;
  }
}

/* ---------- 14. Colophon ---------- */

/* A mirror of .masthead__row, with the same padding: the document
   opens with [mark + wordmark] against [download link] and closes with
   [mark + copyright] against [site links], both landing on the page
   margins. Flex, not the grid, so it wraps cleanly on narrow screens
   without a breakpoint. */

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: calc(var(--baseline) * 3) calc(var(--baseline) * 3 + env(safe-area-inset-bottom));
}

.colophon__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-row);
  flex-wrap: wrap;
}

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

.colophon__id img {
  width: 20px;
  height: 20px;
}

.colophon__legal ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 48px);
}

/* ---------- 15. Prose (privacy / support) ---------- */

.doc {
  padding-block: calc(var(--baseline) * 12) var(--space-band);
}

.doc__head {
  grid-column: 1 / 10;
  margin-bottom: var(--space-band);
}

.doc__toc {
  grid-column: 1 / 3;
  align-self: start;
  position: sticky;
  top: var(--space-row);
}

.doc__toc li {
  border-top: 1px solid var(--rule);
}

.doc__toc a {
  display: block;
  padding-block: 8px;
  font-size: 13px;
  color: var(--ink-3);
  transition: color .12s linear;
}

.doc__toc a:hover {
  color: var(--ink);
}

.prose {
  grid-column: 4 / 11;
}

/* Both levels: the sections themselves, and their contents. */
.prose > * + *,
.prose section > * + * {
  margin-top: var(--space-row);
}

.prose section {
  scroll-margin-top: var(--space-row);
}

.prose section + section {
  margin-top: calc(var(--baseline) * 8);
}

.prose h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  border-top: 1px solid var(--rule);
  padding-top: calc(var(--baseline) * 2);
}

.prose h3 {
  font-size: 17px;
  font-weight: 600;
  margin-top: var(--space-block);
}

.prose p,
.prose li {
  color: var(--ink-2);
  text-wrap: pretty;
}

.prose ul {
  padding-left: 0;
}

.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7em;
  width: 10px;
  height: 1px;
  background: var(--ink-3);
}

.prose dl {
  border-top: 1px solid var(--rule);
}

.prose dt {
  padding-top: calc(var(--baseline) * 2);
  font-weight: 600;
}

.prose dd {
  padding-bottom: calc(var(--baseline) * 2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
  margin-top: 6px;
}

.note {
  border: 1px solid var(--rule);
  padding: calc(var(--baseline) * 3);
}

@media (max-width: 1100px) {
  .doc__head {
    grid-column: 1 / 13;
  }

  .doc__toc {
    display: none;
  }

  .prose {
    grid-column: 1 / 13;
  }
}

/* ---------- 16. Utilities ---------- */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.stack-1 {
  margin-top: var(--space-row);
}

.stack-2 {
  margin-top: var(--space-block);
}

.meta-sep {
  color: var(--ink-3);
}