/* ============================================================
   SwingIQ.

   Two voices. The landing is editorial — a full-bleed photograph
   of the 7th at Pebble Beach, Bodoni display, mono for the card
   of the hole. The app is an instrument — Inter, hairlines, a
   paper sheet on a desk, one ink accent drawn out of the water
   in that photograph.

   Colour carries meaning only where it has to: green / amber /
   red are verdicts, and every verdict also has a word and an
   icon. Every text pair clears 4.5:1 and every control boundary
   clears 3:1, in both themes.
   ============================================================ */

:root {
  /* ── surfaces: a sheet of paper on a desk ── */
  --desk:    #e4e2da;   /* outside the sheet, wide screens only */
  --paper:   #f1efe9;   /* the sheet */
  --paper-2: #ffffff;   /* cards, panels, list rows */
  --paper-3: #e5e2d9;   /* inset tracks */

  /* ── labels ── */
  --ink:   #14171a;
  --ink-2: #4a5057;
  --ink-3: #666c73;
  --ink-4: rgba(20, 23, 26, .34);

  /* ── lines ── */
  --rule:       rgba(20, 23, 26, .13);
  --rule-2:     #b6b2a8;
  --field-line: #797569;   /* control boundary — 3:1 on both surfaces */

  /* ── fills ── */
  --fill-1: rgba(20, 23, 26, .13);
  --fill-2: rgba(20, 23, 26, .09);
  --fill-3: rgba(20, 23, 26, .065);
  --fill-4: rgba(20, 23, 26, .04);

  /* ── accent: the deep water off the 7th green ── */
  --tint:      #0d4f79;
  --tint-text: #0c4a73;
  --tint-fill: #0d4f79;
  --on-tint:   #ffffff;
  --tint-wash: #e8eef4;

  /* ── sand: the bunkers. Hairlines and eyebrows only.
     #7d6b36 clears 4.5:1 on the sheet (4.53) and on a white card (5.21);
     the lighter --sand-night is for the .band-night chapters and the
     photograph, which are dark whichever theme is running. ── */
  --sand:       #7d6b36;
  --sand-night: #c4ad74;

  /* ── verdicts ── */
  --good: #1e7b36;  --good-wash: #e7f3e9;
  --ok:   #a94f00;  --ok-wash:   #fbeedc;
  --fix:  #c4121f;  --fix-wash:  #fbe9e7;

  /* ── night: the landing's dark chapters, in both themes ── */
  --night:      #0e1418;
  --on-night:   #f4f2ec;
  --on-night-2: #b3bcc2;

  /* ── materials ── */
  --mat-regular: rgba(241, 239, 233, .78);
  --scrim: rgba(8, 14, 18, .58);
  --shadow-1: 0 1px 1px rgba(18, 24, 30, .045), 0 2px 7px rgba(18, 24, 30, .05);

  /* ── type ── */
  --f-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;
  --f-display: 'Libre Bodoni', 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── radii ── */
  --r-btn: 8px; --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 13px; --r-xl: 20px; --r-pill: 980px;

  /* ── metrics ── */
  --content: 1180px;
  --gut: 20px;
  --measure: 62ch;
  --nav-h: 54px;
  --sp-section: 72px;

  /* ── motion ── */
  --e-standard:   cubic-bezier(.4, 0, .2, 1);
  --e-out:        cubic-bezier(0, 0, .2, 1);
  --e-in:         cubic-bezier(.4, 0, 1, 1);
  --e-emphasized: cubic-bezier(.32, .72, 0, 1);
  --d-press: 90ms; --d-state: 170ms; --d-enter: 400ms;
  --d-present: 460ms; --d-dismiss: 260ms; --d-settle: 560ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk: #050608; --paper: #111417; --paper-2: #171a1e; --paper-3: #23272d;
    --ink: #f2f2ee; --ink-2: #b9bec4; --ink-3: #8d949b; --ink-4: rgba(235, 235, 230, .3);
    --rule: rgba(235, 238, 242, .14); --rule-2: #3b4149; --field-line: #8d949b;
    --fill-1: rgba(235, 238, 242, .16); --fill-2: rgba(235, 238, 242, .11);
    --fill-3: rgba(235, 238, 242, .075); --fill-4: rgba(235, 238, 242, .05);

    --tint: #6fb6e6; --tint-text: #7cbfea; --tint-fill: #1a6699; --tint-wash: #11212c;
    --sand: #c4ad74;

    --good: #4fc86c; --good-wash: #16281a;
    --ok:   #e79a2b; --ok-wash:   #2b2113;
    --fix:  #f2564e; --fix-wash:  #2b1615;

    --night: #191e22;

    --mat-regular: rgba(14, 16, 19, .78);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  }
}

@media (min-width: 735px)  { :root { --gut: 28px; --sp-section: 96px; } }
@media (min-width: 1069px) { :root { --gut: 44px; --sp-section: 112px; } }

/* ── base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
#top-sentinel { position: absolute; top: 120px; left: 0; width: 1px; height: 1px; }

body {
  margin: 0; min-height: 100%;
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.47 var(--f-ui);
  letter-spacing: -.011em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
.hidden { display: none !important; }

button, label, select, input { font-family: inherit; }
button, label, select, [role=button] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 3px; }
/* in the dark chapters, the ring has to be light */
.closer :focus-visible, .band-night :focus-visible,
.lightbox :focus-visible { outline-color: #fff; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

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

/* The mono voice: hole cards, frame numbers, anything measured. */
.kicker {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 500 11px/1.3 var(--f-mono);
  letter-spacing: .13em; text-transform: uppercase;
}

/* ============================================================
   LANDING
   ============================================================ */
.landing { color: var(--ink); }
.wrap {
  max-width: var(--content); margin: 0 auto;
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
}

/* ── hero ─────────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top) + 18px);
  padding-bottom: max(34px, calc(env(safe-area-inset-bottom) + 18px));
  background: #c8e2ef;
  overflow: hidden;
}
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  display: block;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 56%;
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media img { animation: heroSettle 1600ms var(--e-emphasized) both; }
  @keyframes heroSettle { from { transform: scale(1.055); opacity: .55; } }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      rgba(246, 248, 243, .85) 0%, rgba(246, 248, 243, .5) 14%,
      rgba(246, 248, 243, .12) 32%, rgba(246, 248, 243, 0) 48%),
    linear-gradient(100deg,
      rgba(246, 248, 243, .9) 0%, rgba(246, 248, 243, .6) 36%,
      rgba(246, 248, 243, 0) 60%);
}
/* on a phone the text covers most of the frame — one even veil, no panel */
@media (max-width: 640px) {
  .hero-scrim {
    background:
      linear-gradient(to top,
        rgba(246, 248, 243, .88) 0%, rgba(246, 248, 243, .58) 20%,
        rgba(246, 248, 243, .36) 48%, rgba(246, 248, 243, .42) 100%);
  }
}

.hero-in { position: relative; width: 100%; margin-top: auto; }
.hero-in > * { max-width: 100%; }
.hero .kicker { color: #4a6650; margin-bottom: 22px; }
.hero .kicker::before {
  content: ''; width: 34px; height: 1px; background: currentColor; flex: none; opacity: .7;
}

.hero-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(44px, 7vw, 92px); line-height: .94;
  letter-spacing: -.024em; color: #17211b;
  text-shadow: 0 1px 34px rgba(246, 248, 243, .6);
  text-wrap: balance;
}
.hero-title em { font-style: italic; }
.hero-sub {
  margin-top: 18px; max-width: 46ch;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.48;
  letter-spacing: -.008em; color: #2e3d33;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 560px) { .hero-cta .btn { flex: 1 1 100%; } }

/* the hole, as a scorecard rule */
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px;
  flex-wrap: wrap;
  margin-top: 32px; padding-top: 16px;
  border-top: 1px solid rgba(23, 33, 27, .2);
}
.hero-card { display: flex; flex-wrap: wrap; gap: 0 30px; }
.hero-card div { padding: 6px 0; }
.hero-card dt {
  font: 500 11px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
  color: #5a7457;
}
.hero-card dd {
  margin: 4px 0 0; font: 400 20px/1.15 var(--f-display); color: #17211b;
  font-variant-numeric: tabular-nums;
}
.hero-card dd small {
  margin-left: 5px; font-size: 13px; font-family: var(--f-ui);
  letter-spacing: 0; color: #4d5a51;
}

.hero-credit {
  flex: none;
  font: 400 11px/1.6 var(--f-mono); letter-spacing: .04em;
  color: rgba(255, 255, 255, .82); text-align: right;
}
@media (max-width: 699px) { .hero-credit { text-align: left; } }

.scroll-cue {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font: 500 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(23, 33, 27, .5);
}
@media (max-width: 1068px) { .scroll-cue { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .scroll-cue { animation: cueDrift 2.8s var(--e-standard) infinite; }
  @keyframes cueDrift { 50% { transform: translate(-50%, 5px); opacity: .55; } }
}

/* ── landing sections ─────────────────────────────────────── */
.band { padding: clamp(64px, 9vw, 120px) 0; }
.band-paper { background: var(--paper); }
.band-night {
  background: var(--night); color: var(--on-night);
  /* In dark both surfaces are near-black; the hairline is what still reads
     as a chapter break. */
  box-shadow: inset 0 1px 0 rgba(244, 242, 236, .16), inset 0 -1px 0 rgba(244, 242, 236, .16);
}

.band-head { padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
.band-night .band-head { border-bottom-color: rgba(244, 242, 236, .16); }
.band-head > * { max-width: 40ch; }
.band-head .kicker { color: var(--ink-3); margin-bottom: 16px; }
.band-night .band-head .kicker { color: var(--sand-night); }
.band-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.06; letter-spacing: -.018em;
  text-wrap: balance;
}
.band-lede {
  margin-top: 20px; max-width: 58ch;
  font-size: 18px; line-height: 1.58; color: var(--ink-2);
}
.band-night .band-lede { color: var(--on-night-2); }
.band-lede + .band-lede { margin-top: 14px; }
.band-body { margin-top: 20px; }
.band-body .band-lede { margin-top: 0; }
@media (min-width: 960px) {
  .band-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; max-width: none; }
  .band-body .band-lede { max-width: 46ch; }
}

/* three-up: how it reads a swing */
.steps {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step {
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .step { padding: 28px 34px 8px 0; border-bottom: 0; }
  .step + .step { padding-left: 34px; border-left: 1px solid var(--rule); }
}
.step-n {
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--sand);
}
.step h3 {
  margin-top: 14px;
  font-family: var(--f-display); font-weight: 400; font-size: 25px; line-height: 1.16;
  letter-spacing: -.012em;
}
.step p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* pull quotes */
.voices {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
}
@media (min-width: 900px) { .voices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; } }
.voice {
  padding: 30px 0; margin: 0;
  border-top: 1px solid rgba(244, 242, 236, .14);
}
.voice blockquote {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 26px); line-height: 1.34; letter-spacing: -.012em;
  color: var(--on-night);
}
.voice figcaption {
  margin-top: 16px;
  font-size: 14px; line-height: 1.45; color: var(--on-night-2);
}
.voice figcaption b { display: block; font-weight: 600; color: var(--on-night); }
.source-note {
  margin-top: 34px; padding-top: 18px;
  border-top: 1px solid rgba(244, 242, 236, .14);
  font: 400 13px/1.55 var(--f-ui); color: var(--on-night-2); max-width: 70ch;
}
.source-note a { color: var(--on-night); text-underline-offset: 3px; }

/* what's in the report */
.gets {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
}
@media (min-width: 720px)  { .gets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; } }
.get {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.get-n {
  padding-top: 3px;
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.get h3 { font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.011em; }
.get p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }

/* closing band over the surf */
.closer {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(72px, 11vw, 148px) 0;
  background: #0a1015; color: #fff; text-align: center;
}
.closer img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
}
.closer::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(6, 12, 17, .82), rgba(6, 12, 17, .72));
}
.closer .band-title { color: #fff; margin-inline: auto; max-width: 18ch; }
.closer .band-lede { color: #dbe1e5; margin: 20px auto 0; max-width: 48ch; }
.closer .hero-cta { justify-content: center; margin-top: 34px; }

/* footer */
.landing-foot {
  padding: 40px 0 calc(52px + env(safe-area-inset-bottom)); background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}
.landing-foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.landing-foot a { color: var(--ink-2); text-underline-offset: 3px; }
.landing-foot p { max-width: 62ch; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: transparent;
  transition: background-color var(--d-state) var(--e-standard), color var(--d-state) var(--e-standard);
}
.navbar-in {
  max-width: var(--content); margin: 0 auto; height: var(--nav-h);
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
  display: flex; align-items: center; gap: 16px;
}
.navbar::after {
  content: ''; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--rule); transform: scaleY(.5); transform-origin: bottom;
  opacity: 0; transition: opacity var(--d-state) var(--e-standard);
}
.navbar.is-compact {
  background: var(--mat-regular);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.navbar.is-compact::after { opacity: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar.is-compact { background: var(--paper); }
}
/* over the illustration the bar stays ink, whatever the colour scheme says */
.navbar.on-dark { color: #17211b; }
.navbar.on-dark.is-compact { background: rgba(243, 246, 241, .62); }
.navbar.on-dark .wordmark { color: #17211b; }
.navbar.on-dark .wordmark-mark .ball { fill: #17211b; }

.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; line-height: 1.29; letter-spacing: -.014em;
  color: var(--ink);
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.wordmark-mark {
  width: 21px; height: 21px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round;
}
.wordmark-mark .ball { fill: var(--tint); stroke: none; }
/* The bar earns its 54px on a 6,000px report: it says where you are. */
.nav-stage {
  font: 500 11px/1 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--d-state) var(--e-standard);
}
.nav-stage::before { content: '/'; margin-right: 12px; color: var(--rule-2); }
.navbar.is-compact .nav-stage { opacity: 1; }
body.on-landing .nav-stage { display: none; }
@media (max-width: 559px) { .nav-stage { display: none; } }
.nav-spacer { flex: 1; }
.nav-cta {
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-state) var(--e-standard), visibility var(--d-state);
}
.navbar.is-compact .nav-cta { opacity: 1; visibility: visible; }
body:not(.on-landing) .nav-cta { display: none; }
.navbar.on-dark .nav-cta {
  color: #17211b; background: rgba(255, 255, 255, .3);
  border-color: rgba(23, 33, 27, .4); box-shadow: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.navbar.on-dark .nav-cta:hover { background: rgba(255, 255, 255, .55); border-color: #17211b; }
/* The account button is always reachable — landing, app, any scroll position. */
.nav-auth { opacity: 1; visibility: visible; white-space: nowrap; }
body:not(.on-landing) .nav-auth { display: inline-flex; }

#hero-sentinel { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

/* ============================================================
   APP — the sheet
   ============================================================ */
main {
  /* Edge to edge like the landing — text keeps its measure through the
     internal caps, but strips, grids and panels get the whole screen. */
  max-width: 1560px; margin: 0 auto;
  padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
  padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right));
  padding-bottom: 0;
}
.stage { padding-top: 40px; }
#step-working { padding-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .stage { animation: rise var(--d-enter) var(--e-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } }
}

.stage-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.06;
  letter-spacing: -.018em; max-width: 20ch;
  text-wrap: balance;
}
.lede .stage-title { max-width: 22ch; }
.standfirst {
  margin-top: 16px; max-width: var(--measure);
  font-size: 18px; line-height: 1.5; letter-spacing: -.006em; color: var(--ink-2);
}
@media (min-width: 735px) { .standfirst { font-size: 19px; } }

.eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px;
  font: 500 11px/1.3 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.conf {
  padding: 3px 8px; border-radius: var(--r-xs);
  background: var(--fill-3); color: var(--ink-2);
  font-size: 11px; letter-spacing: .1em;
}
.caveat {
  margin-top: 18px; padding: 13px 15px; border-radius: var(--r-sm);
  border-left: 2px solid var(--ok);
  background: var(--ok-wash); color: var(--ok);
  font-size: 15px; line-height: 1.45; letter-spacing: -.006em; max-width: var(--measure);
}

/* ── section headings: a mono numeral and a rule, no colour ── */
.sec { margin-top: var(--sp-section); }
.sec > h2 {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-display); font-weight: 400;
  font-size: 26px; line-height: 1.2; letter-spacing: -.014em;
}
@media (min-width: 1069px) { .sec > h2 { font-size: 31px; } }
.sec-mark {
  flex: none;
  font: 500 11px/1 var(--f-mono); letter-spacing: .12em; color: var(--sand);
  font-variant-numeric: tabular-nums;
  transform: translateY(-1px);
}

/* ============================================================
   BUTTONS — a 1px optical edge, a 2% gradient, a tight shadow.
   Nothing glows.
   ============================================================ */
.btn {
  --btn-h: 42px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 18px;
  font-size: 15px; font-weight: 500; line-height: 1.1; letter-spacing: -.004em;
  border: 1px solid transparent; border-radius: var(--r-btn);
  background: none; color: var(--tint-text);
  cursor: pointer;
  transition: background-color var(--d-state) var(--e-standard),
              border-color var(--d-state) var(--e-standard),
              box-shadow var(--d-state) var(--e-standard),
              color var(--d-state) var(--e-standard),
              transform var(--d-press) var(--e-out);
}
.btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { cursor: default; pointer-events: none; }

/* primary — ink-blue, one step of shading, an edge a shade darker */
.btn-filled {
  background-color: var(--tint-fill);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 62%);
  color: var(--on-tint);
  border-color: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
              0 1px 1px rgba(10, 24, 36, .12),
              0 2px 6px rgba(10, 24, 36, .10);
}
.btn-filled:hover {
  background-color: color-mix(in oklab, var(--tint-fill) 92%, #000);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
              0 2px 3px rgba(10, 24, 36, .16),
              0 6px 16px rgba(10, 24, 36, .18);
}
.btn-filled:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(10, 24, 36, .28);
  background-image: none;
}
.btn-filled:disabled {
  /* Filled and edged, so it still reads as a button that is not ready yet —
     a transparent rounded rect reads as an empty input. */
  background-image: none; background-color: var(--fill-3);
  border-color: var(--field-line); color: var(--ink-3);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  .btn-filled {
    border-color: rgba(255, 255, 255, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 1px 2px rgba(0, 0, 0, .5);
  }
  .btn-cream { border-color: rgba(0, 0, 0, .3); }
}

/* quiet — a hairline box on the sheet. --field-line, not --rule-2: this
   border is the only thing that says "button", so it owes 3:1. */
.btn-quiet {
  background: var(--paper-2); color: var(--ink);
  border-color: var(--field-line);
  box-shadow: 0 1px 1px rgba(18, 24, 30, .04);
}
/* A raised white button cannot hover by going darker than the page it sits
   on — it lifts instead, and darkens only its edge. */
.btn-quiet:hover {
  border-color: var(--ink-2); transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(18, 24, 30, .08), 0 6px 16px rgba(18, 24, 30, .10);
}
.btn-quiet:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(18, 24, 30, .12); }
@media (prefers-color-scheme: dark) {
  .btn-quiet:hover { background: var(--paper-3); box-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
}

/* the primary, on a photograph: paper, not paint */
.btn-cream {
  background: #f6f3ec; color: #101619;
  border-color: rgba(0, 0, 0, .16);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .26), 0 8px 24px rgba(0, 0, 0, .24);
}
.btn-cream:hover {
  background: #fff; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .3);
}
.btn-cream:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }

/* over a photograph */
.btn-onphoto {
  color: #fff; border-color: rgba(255, 255, 255, .5);
  background: rgba(8, 14, 19, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 10px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  text-decoration: none;
}
.btn-onphoto:hover {
  background: rgba(8, 14, 19, .58); border-color: #fff; transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 18px rgba(0, 0, 0, .34);
}
.btn-onphoto:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4); }

.btn-plain { padding: 0 6px; border-color: transparent; font-weight: 400; }
.btn-plain:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn-plain:active { transform: none; opacity: .6; }
.btn-destructive { color: var(--fix); }
.btn-plain.btn-destructive:hover { color: var(--fix); }
.btn-large { --btn-h: 48px; padding-inline: 26px; font-size: 16px; }
.btn-sm { --btn-h: 34px; padding-inline: 14px; font-size: 14px; }
.intake-form .btn-large { width: 100%; }
.btn-round { width: 42px; height: 42px; padding: 0; border-radius: var(--r-pill); }

.btn-note {
  margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-3);
}

/* ── inset grouped lists ──────────────────────────────────── */
.list {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  margin: 0 0 22px; overflow: hidden;
}
.list-header, .list-footer {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.list-header { display: block; padding: 0 2px 9px; }
.list-footer {
  padding: 9px 2px 0;
  font-family: var(--f-ui); font-size: 13px; font-weight: 400;
  letter-spacing: -.004em; text-transform: none;
}
.row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 10px 15px;
}
.row::after {
  content: ''; position: absolute; left: 15px; right: 0; bottom: 0; height: 1px;
  background: var(--rule); transform: scaleY(.5); transform-origin: bottom;
}
.row:last-child::after { display: none; }
.row > label { flex: none; color: var(--ink); }

/* ── selects + text input ─────────────────────────────────── */
select, input[type=text] {
  flex: 1; min-width: 0; min-height: 24px;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
  font-size: 16px; line-height: 1.3; letter-spacing: -.008em; color: var(--ink-2);
}
select {
  padding-right: 20px; cursor: pointer; text-align: right; text-align-last: right;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5 7.8 6 4 9.5' fill='none' stroke='%23797569' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 12px;
}
input[type=text] { color: var(--ink); }
input[type=text]::placeholder { color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M4 2.5 7.8 6 4 9.5' fill='none' stroke='%238d949b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
select:focus, input[type=text]:focus { outline: 0; }
select:focus-visible, input[type=text]:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; border-radius: var(--r-xs); }

.error {
  margin-top: 14px; padding: 13px 15px; border-radius: var(--r-sm);
  border-left: 2px solid var(--fix);
  background: var(--fix-wash); color: var(--fix);
  font-size: 15px; line-height: 1.45; letter-spacing: -.006em;
}

/* ── intake ───────────────────────────────────────────────── */
.intake { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; align-items: start; }
@media (min-width: 1069px) { .intake { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 44px; } }
.intake-media { display: flex; flex-direction: column; }


.drop {
  position: relative;
  min-height: 372px; padding: 34px 26px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; cursor: pointer;
  background: var(--paper-2);
  border: 1px solid var(--field-line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: background-color var(--d-state) var(--e-standard),
              border-color var(--d-state) var(--e-standard),
              box-shadow var(--d-state) var(--e-standard);
}
/* Visually gone, still focusable — `hidden` would take it out of the tab
   order and there is no other way into the file picker. */
.drop input[type=file] {
  position: absolute; inset: auto auto 0 0;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.drop:hover { border-color: var(--ink-2); }
.drop.over { background: var(--tint-wash); border-color: var(--tint); box-shadow: inset 0 0 0 1px var(--tint); }
.drop:focus-within { outline: 2px solid var(--tint); outline-offset: 3px; }
.drop-main { margin: auto 0; display: flex; flex-direction: column; align-items: center; }
/* a strip of film, drawn in hairlines — not a disc with an icon in it */
.drop-glyph { margin-bottom: 20px; color: var(--ink-3); transition: color var(--d-state) var(--e-standard); }
.drop:hover .drop-glyph, .drop.over .drop-glyph { color: var(--tint); }
.drop-glyph svg { display: block; width: 116px; height: 66px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.drop-title {
  font-family: var(--f-display); font-weight: 400; font-size: 23px; line-height: 1.2;
  letter-spacing: -.014em;
}
.drop-sub { margin-top: 7px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }
.drop-hint {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}

.preview { margin: 0; }
.preview video[hidden] { display: none; }   /* beats the UA [hidden] rule below */
.preview video {
  display: block; width: 100%; max-height: 380px; object-fit: contain;
  background: #000; border-radius: var(--r-md);
}
.preview #preview-photos { padding-top: 0; margin-inline: 0; padding-inline: 0; }
.preview #preview-photos .frame img { height: 88px; border-radius: var(--r-xs); }
.preview figcaption {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 10px; font-size: 13px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── the course strip: the 7th, between the form and the detail ── */
.plate { margin: var(--sp-section) 0 0; }
.plate-frame {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-md); background: #0b1116;
  aspect-ratio: 2000 / 352;
}
.plate-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plate-frame img { transition: none; }
@media (prefers-color-scheme: dark) { .plate-frame img, .closer img, .hero-media img { filter: brightness(.9) saturate(.94); } }
.plate figcaption {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between;
  margin-top: 10px;
  font: 400 12px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--ink-3);
}

/* the four things the report gives you, on the intake page */
.brief {
  display: grid; grid-template-columns: 1fr; gap: 0;
  margin-top: 26px; border-top: 1px solid var(--rule);
}
@media (min-width: 720px) { .brief { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; } }
.brief div { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.brief dt {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--sand);
}
.brief dd { margin: 7px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.brief dd b { font-weight: 600; color: var(--ink); }

/* ── working ──────────────────────────────────────────────── */
.progress { height: 3px; margin-top: 30px; background: var(--fill-3); overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: var(--tint); transition: width 300ms linear; }

.steps-list .row { gap: 14px; color: var(--ink-3); transition: color var(--d-state) var(--e-standard); }
.step-dot {
  width: 9px; height: 9px; margin: 0 5px; flex: none; border-radius: 50%;
  background: var(--fill-1);
  transition: background-color var(--d-state) var(--e-standard), box-shadow var(--d-state) var(--e-standard);
}
.steps-list .row.done { color: var(--ink-2); }
.steps-list .row.done .step-dot { background: var(--good); }
.steps-list .row.active { color: var(--ink); }
.steps-list .row.active .step-dot { background: var(--tint); box-shadow: 0 0 0 4px var(--tint-wash); }
@media (prefers-reduced-motion: no-preference) {
  .steps-list .row.active .step-dot { animation: pulse 2s var(--e-standard) infinite; }
  @keyframes pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
}

/* ── the wait ──────────────────────────────────────────────
   Forty seconds is long enough to be shown the work. Left: the four real
   stages with the time each one took. Right: what has actually been measured
   off the clip so far. Below: the contact sheet filling in, then the running
   order the coach is asked to work through. */
.working-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 26px; }
@media (min-width: 860px) { .working-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: start; } }
.working-grid .steps-list { margin: 0; }
.working-grid .panel { padding: 16px 18px 6px; }

.clock { font-variant-numeric: tabular-nums; }
.step-t {
  margin-left: auto; font: 400 11px/1.4 var(--f-mono); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.steps-list .row.active .step-text { font-weight: 600; }

/* the measured facts */
.facts { margin: 0; }
.facts div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--rule);
}
.facts div:last-child { border-bottom: 0; }
.facts dt {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.facts dd {
  margin: 0; text-align: right;
  font: 500 14px/1.4 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: no-preference) {
  .facts div { animation: factIn 260ms var(--e-out) both; }
  @keyframes factIn { from { opacity: 0; transform: translateY(-3px); } }
}

/* the contact sheet */
.contact { margin-top: 30px; }
.contact-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.contact-label {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.contact-note {
  font: 400 12px/1.4 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.contact-strip { min-height: 76px; align-items: flex-start; }
.contact-strip .frame img { height: 68px; }
.contact-strip .frame::after {
  content: attr(data-n); position: absolute; left: 4px; top: 4px;
  padding: 1px 4px; border-radius: 3px; background: var(--scrim); color: #fff;
  font: 500 10px/1.3 var(--f-mono); font-variant-numeric: tabular-nums;
}
.contact-strip .frame {
  opacity: 1; transition: opacity 240ms var(--e-out), transform 240ms var(--e-out),
              box-shadow var(--d-state) var(--e-standard), filter var(--d-state) linear;
}
.contact-strip .frame.is-new { opacity: 0; transform: translateY(6px) scale(.96); }
.contact-strip .frame.is-reading { box-shadow: 0 0 0 2px var(--tint); }
.contact-strip.is-dim .frame:not(.is-reading) { filter: grayscale(.5) brightness(.94); }

/* the coach's running order */
.coach-block { margin-top: 30px; }
.coach-list { margin-bottom: 0; }
.coach-list .row { gap: 14px; color: var(--ink-4); min-height: 40px; padding: 8px 15px; }
.coach-list .row.done { color: var(--ink-2); }
.coach-list .row.active { color: var(--ink); }
.coach-list .row.active .step-text { font-weight: 600; }
.coach-list .step-dot {
  width: 7px; height: 7px; margin: 0 6px; flex: none; border-radius: 50%;
  background: var(--fill-1);
  transition: background-color var(--d-state) var(--e-standard), box-shadow var(--d-state) var(--e-standard);
}
.coach-list .row.done .step-dot { background: var(--good); }
.coach-list .row.active .step-dot { background: var(--tint); box-shadow: 0 0 0 4px var(--tint-wash); }
@media (prefers-reduced-motion: no-preference) {
  .coach-list .row.active .step-dot { animation: pulse 2s var(--e-standard) infinite; }
}
.coach-block .list-footer { max-width: 62ch; }
.wait-quote {
  margin: 34px 0 0; padding: 26px 0 0;
  border-top: 1px solid var(--rule);
  max-width: 46ch;
}
.wait-quote blockquote {
  margin: 0;
  font-family: var(--f-display); font-weight: 400;
  font-size: 22px; line-height: 1.36; letter-spacing: -.012em; color: var(--ink-2);
}
.wait-quote figcaption {
  margin-top: 12px;
  font: 400 12px/1.5 var(--f-mono); letter-spacing: .06em; color: var(--ink-3);
}

/* ── verdict + scorecard ──────────────────────────────────── */
.verdict { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 1069px) { .verdict { grid-template-columns: minmax(0, 1fr) 258px; gap: 48px; } }

.scorecard {
  align-self: start; padding: 20px;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.scorecard-label {
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.score-figure {
  margin: 8px 0 22px;
  font-family: var(--f-display); font-weight: 400;
  font-size: 68px; line-height: .96; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.score-figure::after {
  content: '/100'; margin-left: 5px;
  font-family: var(--f-mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-3);
}
.scale-track { position: relative; height: 3px; background: var(--paper-3); }
.scale-marker {
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px;
  border-radius: 50%; background: var(--tint);
  box-shadow: 0 0 0 3px var(--paper-2);
  transform: translate(-50%, -50%);
  transition: left var(--d-settle) var(--e-emphasized);
}
.scale-ticks { position: relative; height: 14px; margin-top: 10px; }
.scale-ticks span { position: absolute; transform: translateX(-50%); }
.scale-ticks span:nth-child(1) { left: 0; transform: none; }
.scale-ticks span:nth-child(2) { left: 25%; }
.scale-ticks span:nth-child(3) { left: 50%; }
.scale-ticks span:nth-child(4) { left: 75%; }
.scale-ticks span:nth-child(5) { left: 100%; transform: translateX(-100%); }
.scale-ticks, .scale-legend, .tempo-legend {
  font: 400 11px/1.2 var(--f-mono); letter-spacing: .06em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.scale-legend { display: flex; justify-content: space-between; margin-top: 3px; text-transform: uppercase; }

/* ── breakdown ────────────────────────────────────────────── */
/* A scorecard across the top, the two reads underneath it. Both
   panels grow with their own copy, so neither leaves a hole. */
.stand { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.side-panels { display: flex; flex-direction: column; gap: 20px; }
.panel {
  padding: 18px; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.panel-label {
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.panel-label svg { width: 15px; height: 15px; flex: none; color: var(--sand); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#subscores .row { display: grid; grid-template-columns: 96px 1fr 38px; gap: 12px; align-items: center; }
.bar-track { width: 100%; }

@media (min-width: 735px) {
  .stand { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  #subscores { grid-column: 1 / -1; margin-bottom: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .side-panels { display: contents; }
  #subscores .row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'name val' 'bar bar';
    align-items: baseline; gap: 11px 12px; padding: 15px 16px 17px; min-height: 0;
    border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  }
  #subscores .row::after { display: none; }
  #subscores .row:nth-child(3n) { border-right: 0; }
  #subscores .row:nth-last-child(-n+3) { border-bottom: 0; }
  .bar-name { grid-area: name; }
  .bar-val  { grid-area: val; }
  .bar-track { grid-area: bar; }
}
.bar-name { font-size: 16px; letter-spacing: -.008em; color: var(--ink); }
.bar-track { height: 3px; background: var(--fill-2); overflow: hidden; }
.bar-fill {
  height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-settle) var(--e-emphasized);
}
.bar-val {
  text-align: right; font: 500 15px/1 var(--f-mono); letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* likely miss */
.miss-shape {
  font-family: var(--f-display); font-weight: 400; font-size: 30px; line-height: 1.14;
  letter-spacing: -.02em; text-transform: capitalize;
}
.miss-conf { margin-top: 5px; font: 400 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.miss-why { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.miss-agree {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-xs);
  background: var(--fill-4); color: var(--ink-2);
  font-size: 13px; line-height: 1.45;
}
.miss-agree.is-off { background: var(--ok-wash); color: var(--ok); }

/* tempo */
.tempo-figure {
  font-family: var(--f-display); font-weight: 400; font-size: 42px; line-height: .98;
  letter-spacing: -.024em; font-variant-numeric: tabular-nums;
}
.tempo-figure small { font-family: var(--f-mono); font-size: 15px; letter-spacing: 0; color: var(--ink-3); }
.tempo-split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 0; }
.tempo-split dt { font: 400 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.tempo-split dd { margin: 4px 0 0; font: 500 16px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.tempo-split dd.is-none { color: var(--ink-3); font-weight: 400; }
.tempo-scale { position: relative; height: 3px; margin-top: 20px; background: var(--paper-3); }
.tempo-band { position: absolute; inset: 0 40%; background: var(--good); opacity: .3; }
.tempo-pin {
  position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tint); box-shadow: 0 0 0 3px var(--paper-2); transform: translate(-50%, -50%);
}
.tempo-legend { display: flex; justify-content: space-between; margin-top: 10px; }
.tempo-note, .tempo-empty { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.tempo-note { margin-top: 14px; font-size: 13px; color: var(--ink-3); }
.tempo-empty b { display: block; margin-bottom: 5px; font-weight: 600; color: var(--ink); }

/* ── filmstrip ────────────────────────────────────────────── */
.filmstrip {
  --fade-l: 0px; --fade-r: 0px;
  display: flex; gap: 8px; padding: 2px var(--gut) 14px;
  margin-inline: calc(var(--gut) * -1);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; scroll-padding-left: var(--gut);
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.filmstrip::-webkit-scrollbar { display: none; }
.frame {
  position: relative; flex: none; padding: 0; border: 0; background: none;
  border-radius: var(--r-xs); line-height: 0;
  cursor: zoom-in; scroll-snap-align: start;
  transition: transform var(--d-press) var(--e-out), box-shadow var(--d-state) var(--e-standard);
}
.frame:active { transform: scale(.97); }
.frame img { display: block; height: 148px; width: auto; border: 0; border-radius: var(--r-xs); background: var(--fill-4); }
.filmstrip-small .frame { cursor: default; }
.filmstrip-small .frame img { height: 62px; }
.frame::after, .frame-pos {
  position: absolute; padding: 2px 6px; border-radius: 3px;
  background: var(--scrim); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.frame::after { content: attr(data-n); left: 5px; top: 5px; }
.frame-pos { right: 5px; bottom: 5px; }
.frame.is-impact { box-shadow: 0 0 0 2px var(--tint); }
.frame.is-impact .frame-pos { background: var(--tint-fill); color: var(--on-tint); }
.frame.hi { box-shadow: 0 0 0 2px var(--ok); }
.strip-note {
  margin: 2px 0 0; font: 400 12px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── pose overlay ─────────────────────────────────────────── */
.pose-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; display: none;
}
.show-pose .pose-overlay, .lightbox-frame .pose-overlay { display: block; }
.pose-overlay .halo { stroke: rgba(255, 255, 255, .85); stroke-width: 3.2; stroke-linecap: round; fill: none; }
.pose-overlay .ink  { stroke: var(--tint); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.pose-overlay circle.halo { stroke-width: 2.6; }
.pose-overlay circle.ink { stroke-width: 1.4; }
.frame { position: relative; }

.strip-tools {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 2px;
}
.strip-tools .strip-note { margin: 0; }
.strip-tools .btn { flex: none; }

.lightbox-frame { position: relative; display: block; line-height: 0; }
.lightbox-frame .pose-overlay { border-radius: var(--r-md); }

/* readings panel: full row under the two read panels */
@media (min-width: 735px) { #readings-panel { grid-column: 1 / -1; } }
.facts-grid div { padding: 9px 0; }
@media (min-width: 735px) {
  .facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .facts-grid div:nth-last-child(-n+2) { border-bottom: 0; }
}
.facts-grid div:last-child { border-bottom: 0; }
.readings-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-size: 12px; line-height: 1.5; color: var(--ink-3); max-width: 62ch;
}

/* ── compare ──────────────────────────────────────────────── */
.compare { margin-top: 26px; }
.compare-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.compare-label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.compare-when { font: 400 12px/1.4 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.compare-delta {
  padding: 2px 7px; border-radius: 3px;
  background: var(--fill-3); color: var(--ink-2);
  font: 500 12px/1.4 var(--f-mono); font-variant-numeric: tabular-nums;
}
.compare-delta.is-up { background: var(--good-wash); color: var(--good); }
.compare-delta.is-down { background: var(--fix-wash); color: var(--fix); }

/* ── phases ───────────────────────────────────────────────── */
.phases { margin-top: 24px; }
/* icon | position | what was seen — three columns, so a 62ch measure does not
   leave a third of the card blank down twelve rows. */
.phases .row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px 13px; align-items: start; padding: 14px 15px;
}
.phase-head, .phase-obs { grid-column: 2; min-width: 0; }
@media (min-width: 735px) {
  .phases .row { grid-template-columns: 22px 172px minmax(0, 1fr); gap: 14px; }
  .phase-obs { grid-column: 3; margin-top: 0; max-width: 66ch; }
}
.icon-tile {
  width: 22px; height: 22px; flex: none; margin-top: 2px;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid currentColor;
}
.icon-tile svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile.good { color: var(--good); }
.icon-tile.ok { color: var(--ok); }
.icon-tile.fix { color: var(--fix); }
.phase-name { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -.008em; }
.phase-frame { margin-top: 3px; font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.phase-obs { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

/* ── faults ───────────────────────────────────────────────── */
.faults { display: flex; flex-direction: column; gap: 38px; }
.fault-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fault-head h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 23px; line-height: 1.2;
  letter-spacing: -.014em; flex: 1 1 260px; min-width: 0;
}
.fault-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 3px;
  border: 1px solid currentColor;
  background: var(--fix-wash); color: var(--fix);
  font: 500 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
}
.tag svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fault.moderate .tag { background: var(--ok-wash); color: var(--ok); }
.fault.minor .tag { background: var(--good-wash); color: var(--good); }
.frames-tag { font: 400 12px/1.5 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.fault .row { display: block; padding: 13px 15px; }
.fault dt { font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.fault dd { margin: 5px 0 0; font-size: 16px; line-height: 1.5; letter-spacing: -.008em; color: var(--ink); max-width: 60ch; }
@media (min-width: 735px) {
  .fault .row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 22px; align-items: baseline; padding: 15px; }
  .fault dt { padding-top: 3px; }
  .fault dd { margin: 0; max-width: 64ch; }
}

.drill {
  margin-top: 14px; padding: 16px 18px;
  border-left: 2px solid var(--tint); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--tint-wash);
}
.drill-label {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font: 500 11px/1.4 var(--f-mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--tint-text);
}
.drill-label svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.drill-body { font-size: 16px; line-height: 1.52; letter-spacing: -.008em; max-width: 62ch; }
.drill-reps { margin-top: 9px; font: 400 12px/1.5 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── plan ─────────────────────────────────────────────────── */
#plan .row { align-items: flex-start; gap: 16px; padding: 15px; flex-wrap: wrap; }
.plan-when {
  flex: none; padding-top: 3px; width: 96px;
  font: 500 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand);
}
.plan-body { flex: 1 1 260px; min-width: 0; }
.plan-focus { font-size: 16px; line-height: 1.5; letter-spacing: -.008em; max-width: 58ch; }
.plan-check { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 58ch; }
.plan-check b { font-weight: 600; color: var(--ink); }

/* ── trends ───────────────────────────────────────────────── */
.log { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1069px) { .log { grid-template-columns: minmax(0, 1fr) 318px; gap: 32px; } }
.trend { display: flex; align-items: flex-end; gap: 10px; height: 140px; min-width: 0; overflow: hidden; }
.trend-col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.trend-val { font: 500 11px/1 var(--f-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.trend-bar { width: 100%; max-width: 28px; min-height: 4px; background: var(--fill-1); }
.trend-col.is-now .trend-bar { background: var(--tint); }
.trend-col.is-now .trend-val { color: var(--tint-text); }

#log-stats .row { justify-content: space-between; gap: 16px; }
#log-stats dt { font-size: 16px; letter-spacing: -.008em; color: var(--ink); }
#log-stats dd { margin: 0; text-align: right; font: 500 15px/1.4 var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
#log-stats .row.wide { display: block; }
#log-stats .row.wide dd { text-align: left; margin-top: 5px; font: 400 15px/1.45 var(--f-ui); }
.log-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.log-foot .list-footer { padding-left: 0; }
.log-foot .btn { white-space: nowrap; flex: none; }

/* ── report foot + app footer ─────────────────────────────── */
.report-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-section); }

.app-foot {
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-section);
  padding: 22px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
  font-size: 13px; line-height: 1.6; color: var(--ink-3);
}
.app-foot a, .app-foot button.link {
  color: var(--ink-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-2);
}
.app-foot a:hover, .app-foot button.link:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ── lightbox ─────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px 24px;
}
.lightbox-scrim {
  position: absolute; inset: 0; background: rgba(6, 10, 14, .74);
  -webkit-backdrop-filter: blur(30px) saturate(160%); backdrop-filter: blur(30px) saturate(160%);
  opacity: 0; transition: opacity var(--d-present) var(--e-out);
}
.lightbox.is-open .lightbox-scrim { opacity: 1; }
.lightbox-body {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: scale(.92);
  transition: opacity var(--d-dismiss) var(--e-in), transform var(--d-dismiss) var(--e-in);
}
.lightbox.is-open .lightbox-body {
  opacity: 1; transform: scale(1);
  transition: opacity 180ms var(--e-out), transform var(--d-present) var(--e-emphasized);
}
.lightbox img { max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; border-radius: var(--r-md); }
.lightbox-cap {
  padding: 5px 12px; border-radius: 3px;
  background: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  font: 500 11px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #e9e6dd;
  font-variant-numeric: tabular-nums;
}
.btn-glass {
  position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px;
  color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
}
.btn-glass:hover { background: rgba(255, 255, 255, .26); }
.btn-glass svg { width: 16px; height: 16px; stroke-width: 2.2; }

/* ── small screens ────────────────────────────────────────── */
@media (max-width: 734px) {
  .scorecard { display: flex; align-items: center; gap: 20px; }
  .scorecard-label { display: none; }
  .score-figure { margin: 0; font-size: 56px; }
  .score-scale { flex: 1; min-width: 0; }
  .scale-ticks { display: none; }
  .scale-legend { margin-top: 8px; }
  .report-foot .btn { flex: 1 1 100%; }
  .plate-frame { aspect-ratio: 3 / 2; }
  .plan-when { width: auto; }
}

/* ── motion preferences ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --d-press: 0ms; --d-state: 100ms; --d-enter: 150ms; --d-present: 150ms; --d-dismiss: 100ms; --d-settle: 150ms; }
  .stage, .lightbox-body { transform: none !important; }
  .btn:active, .frame:active, .drop:active { transform: none !important; }
  .steps-list .row.active .step-dot { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Only shown on paper, and only when there is no report to print. */
.print-note { display: none; margin: 0; padding: 48px 0; font-size: 12pt; line-height: 1.5; }
.print-note b { display: block; font-family: var(--f-display); font-size: 20pt; font-weight: 400; margin-bottom: 10px; }

/* ── print ────────────────────────────────────────────────── */
/* ── recording on a phone ─────────────────────────────────
   Pointer coarseness, not width, decides which affordance shows: an iPad gets
   the camera button, a narrow desktop window gets drag-and-drop. */
.capture-row { display: none; margin-top: 12px; }
.capture-row .btn { width: 100%; }
.drop-sub-touch { display: none; }
@media (pointer: coarse) {
  .capture-row { display: block; }
  .drop-sub-fine { display: none; }
  .drop-sub-touch { display: inline; }
}

/* ── tempo trainer ────────────────────────────────────────── */
.trainer {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}
.trainer.is-open .lightbox-scrim { opacity: 1; }
.trainer-card {
  position: relative; width: min(480px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto;
  background: var(--paper); border-radius: var(--r-xl); padding: 28px 26px 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  opacity: 0; transform: scale(.94);
  transition: opacity var(--d-dismiss) var(--e-in), transform var(--d-dismiss) var(--e-in);
}
.trainer.is-open .trainer-card {
  opacity: 1; transform: none;
  transition: opacity var(--d-present) var(--e-emphasized), transform var(--d-present) var(--e-emphasized);
}
.eyebrow-icon {
  width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.trainer-title { font-family: var(--f-display); font-weight: 500; font-size: 26px; letter-spacing: -.01em; margin-top: 8px; }
.trainer-sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.trainer-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.trainer-presets button {
  font: 500 13px/1 var(--f-mono); letter-spacing: .02em; color: var(--ink-2);
  background: var(--fill-4); border: 1px solid var(--field-line); border-radius: var(--r-pill);
  padding: 10px 14px; cursor: pointer; min-height: 44px;
}
.trainer-presets button small { font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.trainer-presets button[aria-pressed="true"] {
  background: var(--tint-fill); border-color: var(--tint-fill); color: var(--on-tint);
}
.trainer-presets button[aria-pressed="true"] small { color: var(--on-tint); opacity: .75; }
.trainer-scale { position: relative; height: 6px; margin-top: 22px; }
.trainer-scale .tempo-band { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--paper-3); }
.trainer-scale .tempo-pin {
  position: absolute; top: 50%; left: 2%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--tint-fill); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.trainer-read { margin-top: 12px; font: 400 13px/1.5 var(--f-mono); color: var(--ink-2); }
.trainer-actions { display: flex; gap: 10px; margin-top: 20px; }
.trainer-actions .btn-filled { flex: 1; }
.trainer-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.tempo-train { margin-top: 14px; }

/* ── account ──────────────────────────────────────────────── */
.auth-fields { display: grid; gap: 6px; margin-top: 16px; }
.auth-label {
  font: 500 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 12px;
}
.auth-fields input {
  font: 400 16px/1.4 var(--f-ui); color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--field-line); border-radius: var(--r-sm);
  padding: 12px 14px; width: 100%;
}
.auth-fields input:focus { outline: 0; }
.auth-fields input:focus-visible { outline: 2px solid var(--tint); outline-offset: 1px; }
.auth-email { overflow-wrap: anywhere; }
#auth .error { margin-top: 14px; }


/* google sign-in */
.auth-alt { margin-top: 18px; }
.auth-or {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.google-btn { display: flex; justify-content: center; min-height: 44px; }

/* ── plan checklist ───────────────────────────────────────── */
.plan-row { position: relative; }
.plan-tick {
  position: relative; flex: none; width: 28px; height: 28px; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1.5px solid var(--field-line); border-radius: 50%;
  cursor: pointer; color: transparent; padding: 0;
  transition: background var(--d-state) var(--e-standard), border-color var(--d-state) var(--e-standard);
}
.plan-tick svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.plan-tick::after { content: ""; position: absolute; inset: -8px; }   /* 44px tap target */
.plan-row.is-done .plan-tick { background: var(--good); border-color: var(--good); color: #fff; }
.plan-row.is-done .plan-focus { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.plan-row.is-done .plan-check { color: var(--ink-3); }

/* ── charts ───────────────────────────────────────────────── */
.radar-panel svg { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.radar-ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar-spoke { stroke: var(--rule); stroke-width: 1; }
.radar-data { fill: var(--tint-fill); fill-opacity: .16; stroke: var(--tint-fill); stroke-width: 2; stroke-linejoin: round; }
.radar-dot { fill: var(--tint-fill); }
.radar-name { font: 500 10px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; fill: var(--ink-3); }
.radar-val { font: 600 12px var(--f-ui); fill: var(--ink); }

.tl { display: flex; gap: 2px; height: 14px; margin: 14px 0 8px; border-radius: var(--r-pill); overflow: hidden; }
.tl-seg { min-width: 3px; }
.tl-back { background: var(--tint-fill); }
.tl-pause { background: var(--rule-2); }
.tl-down { background: var(--sand); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 12px/1.6 var(--f-mono); color: var(--ink-2); margin-bottom: 10px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tl-key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.motion-charts { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 900px) { .motion-charts { grid-template-columns: 1fr 1fr; } }
.mc { margin: 0; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 14px 16px 10px; box-shadow: var(--shadow-1); }
.mc-title { font: 500 12px/1.4 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.mc svg { display: block; width: 100%; height: auto; }
.mc-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; }
.mc-line { fill: none; stroke: var(--tint-fill); stroke-width: 2; stroke-linejoin: round; }
.mc-mark { fill: var(--paper-2); stroke: var(--sand); stroke-width: 2; }
.mc-marklabel { font: 500 11px var(--f-mono); fill: var(--ink-2); }
.mc-axis { font: 400 10px var(--f-mono); fill: var(--ink-3); }

/* The frames the fault cites, shown big — the pictures are the point. */
.fault-frames {
  display: grid; gap: 10px; margin: 16px 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
@media (min-width: 735px) { .fault-frames { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.ff {
  position: relative; border: 0; padding: 0; cursor: zoom-in; line-height: 0;
  background: var(--paper-3); border-radius: var(--r-md); overflow: hidden;
  transition: transform var(--d-press) var(--e-out), box-shadow var(--d-state) var(--e-standard);
}
.ff:hover { box-shadow: 0 0 0 2px var(--tint); }
.ff:active { transform: scale(.98); }
.ff img { width: 100%; height: auto; display: block; }
.ff .pose-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-n {
  position: absolute; left: 8px; top: 8px;
  font: 500 11px/1 var(--f-mono); letter-spacing: .04em; color: #fff;
  background: rgba(10, 14, 18, .6); padding: 4px 7px; border-radius: var(--r-xs);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fault-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.fault-links .btn { text-decoration: none; }


/* chart upgrades */
.radar-base { fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-dasharray: 4 5; }
.chart-legend { display: flex; gap: 16px; justify-content: center; margin-top: 6px; font: 400 12px/1.5 var(--f-mono); color: var(--ink-2); flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cl { width: 14px; height: 0; border-top: 2.4px solid; display: inline-block; }
.cl-you { border-color: var(--tint-fill); }
.cl-avg { border-top-style: dashed; border-color: var(--sand); }
.mc-band { fill: var(--fill-4); }
.mc-band-down { fill: var(--tint-wash); }
.mc-ref { stroke: var(--ink-4); stroke-width: 1.4; stroke-dasharray: 3 4; }
.mc-area { stroke: none; }
.mc-avg { stroke: var(--sand); stroke-width: 1.6; stroke-dasharray: 4 5; }
.trend-pt { fill: var(--paper-2); stroke: var(--tint-fill); stroke-width: 2; }
.trend-pt.is-now { fill: var(--tint-fill); }
.trend-last { font: 600 14px var(--f-ui); fill: var(--ink); }
#log-trend svg { display: block; width: 100%; height: auto; }

/* ── flight numbers ───────────────────────────────────────── */
.flight-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.flight-tile {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 18px 20px 16px; box-shadow: var(--shadow-1);
}
.flight-k { font: 500 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.flight-v { font-family: var(--f-display); font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; margin-top: 10px; letter-spacing: -.01em; }
.flight-v small { font: 400 13px/1 var(--f-mono); color: var(--ink-3); margin-left: 7px; letter-spacing: 0; }
.flight-dash { color: var(--ink-4); padding-inline: 1px; }
.flight-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.flight-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 13px/1 var(--f-mono); color: var(--ink);
  background: var(--fill-4); border: 1px solid var(--rule-2); border-radius: var(--r-pill);
  padding: 9px 13px;
}
.flight-tag b { font-weight: 500; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
.flight-why { margin-top: 14px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }

/* ── mechanics ────────────────────────────────────────────── */
.mech-figures { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.mech-fig { margin: 0; }
.mech-frame { position: relative; display: block; line-height: 0; border-radius: var(--r-md); overflow: hidden; background: var(--paper-3); }
.mech-frame img { width: 100%; height: auto; display: block; }
.mech-frame .pose-overlay, .mech-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.mech-frame .pose-overlay { opacity: .45; }
.mech-overlay line { fill: none; stroke-linecap: round; }
.mech-halo { stroke: rgba(255, 255, 255, .8); stroke-width: 5; }
.mech-halo-wide { stroke-width: 7; }
.mech-ref { stroke: rgba(255, 255, 255, .85); stroke-width: 2; stroke-dasharray: 3 7; }
.mech-sho { stroke: #d8a53f; stroke-width: 2.4; }
.mech-hip { stroke: #4fa3dc; stroke-width: 2.4; }
.mech-spine { stroke: #e4453a; stroke-width: 3.4; }
.mech-fig figcaption { padding: 10px 2px 0; }
.mech-label { font-size: 15px; font-weight: 600; letter-spacing: -.006em; }
.mech-n { font: 400 12px/1 var(--f-mono); color: var(--ink-3); margin-left: 6px; }
.mech-vals { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font: 400 13px/1.6 var(--f-mono); color: var(--ink-2); }
.mech-vals span { display: inline-flex; align-items: center; gap: 6px; }
.mk { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.mk-spine { background: #e4453a; }
.mk-sho { background: #d8a53f; }
.mk-hip { background: #4fa3dc; }

/* ── pricing (landing) ────────────────────────────────────
   Lives on a night band, so its colours are the night palette in both themes. */
.prices { margin-top: 36px; display: grid; gap: 14px; }
@media (min-width: 735px) { .prices { grid-template-columns: repeat(3, 1fr); gap: 18px; } }

.price {
  border: 1px solid rgba(244, 242, 236, .18); border-radius: var(--r-lg);
  padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: flex-start;
}
.price.is-featured { background: rgba(244, 242, 236, .06); border-color: rgba(244, 242, 236, .38); }

.price-name {
  font: 500 12px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand-night); display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.price-tag {
  font: 500 11px/1 var(--f-mono); letter-spacing: .04em; text-transform: none;
  color: var(--night); background: var(--sand-night);
  padding: 4px 8px; border-radius: var(--r-pill);
}
.price-figure {
  font-family: var(--f-display); font-size: clamp(38px, 4vw, 46px); line-height: 1;
  color: var(--on-night); margin-top: 14px;
}
.price-meta { font: 400 13px/1.5 var(--f-mono); color: var(--on-night-2); margin-top: 8px; }
.price-line { font-size: 14px; line-height: 1.5; color: var(--on-night-2); margin-top: 12px; }
.price .btn { margin-top: 20px; align-self: stretch; justify-content: center; }

.price-note {
  margin-top: 30px; font-size: 15px; line-height: 1.55;
  color: var(--on-night-2); max-width: var(--measure);
}
.price-note-fine { margin-top: 10px; font-size: 13px; }
#pricing .error { max-width: var(--measure); }

/* ── paying inside the app ────────────────────────────────── */
.credits-note {
  margin-top: 8px; font: 400 12px/1.5 var(--f-mono); color: var(--ink-3);
}

.paywall {
  margin-top: 28px; padding: 28px;
  background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.paywall-title { font-family: var(--f-display); font-weight: 500; font-size: 28px; letter-spacing: -.01em; margin-top: 6px; }
.paywall-lede { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: var(--measure); }
.paywall-packs { margin-top: 20px; display: grid; gap: 10px; }
@media (min-width: 735px) { .paywall-packs { grid-template-columns: repeat(3, 1fr); } }
.paywall-packs .btn {
  flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 16px; height: auto;
}
.paywall-packs .btn.is-featured { border-color: var(--tint); box-shadow: inset 0 0 0 1px var(--tint); }
.pack-name { font-weight: 600; letter-spacing: -.006em; }
.pack-deal { font: 400 12px/1.4 var(--f-mono); color: var(--ink-3); }
.paywall-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }

@media print {
  /* Chromium keeps prefers-color-scheme matching while printing, so this has
     to restate EVERY themed token — not just the surfaces. Miss one and a
     dark-mode reader gets near-black blocks and invisible bars on paper. */
  :root {
    --desk: #fff; --paper: #fff; --paper-2: #fff; --paper-3: #eeece6;
    --ink: #000; --ink-2: #33383d; --ink-3: #5c6167; --ink-4: #8b8880;
    --rule: #d6d3ca; --rule-2: #a8a49a; --field-line: #6f6b62;
    --fill-1: rgba(20, 23, 26, .14); --fill-2: rgba(20, 23, 26, .10);
    --fill-3: rgba(20, 23, 26, .07); --fill-4: rgba(20, 23, 26, .045);
    --tint: #0b4166; --tint-text: #0b4166; --tint-fill: #0b4166;
    --on-tint: #fff; --tint-wash: #eef3f7;
    --sand: #7a6733; --sand-night: #7a6733;
    --good: #1a6b2f; --good-wash: #eaf4ec;
    --ok:   #8f4300; --ok-wash:   #fbf0e2;
    --fix:  #ab101c; --fix-wash:  #fbeceb;
    --night: #fff; --on-night: #000; --on-night-2: #3a3f45;
    --mat-regular: #fff; --scrim: rgba(0, 0, 0, .6);
    --shadow-1: none;
  }
  html, body { background: #fff; }
  .navbar, #landing, #step-input, #step-working, .report-foot, .lightbox, .log-foot .btn, .app-foot { display: none !important; }
  .print-note { display: block; }
  body.has-report .print-note { display: none; }
  body { font-size: 11pt; }
  main { padding: 0; max-width: none; border: 0; min-height: 0; }
  .stage { animation: none; padding-top: 0; }
  .list, .panel, .scorecard, .drop { box-shadow: none; border: 1px solid var(--rule); }
  .sec, .fault, .drill, .row { break-inside: avoid; }
  .filmstrip { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; -webkit-mask-image: none; mask-image: none; }
  .frame img { height: 96px; }
}