/* Focus League website. Colours are the app's own themes (src/theme/tokens.ts).
   No inline styles anywhere: the Content-Security-Policy only allows this file. */

@font-face { font-family: Inter; font-weight: 400; font-style: normal; font-display: swap; src: url(fonts/inter-latin-400-normal.woff2?v=dd05e326cf) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/inter-latin-700-normal.woff2?v=aac638f750) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2?v=2731c236f3) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url(fonts/jetbrains-mono-latin-700-normal.woff2?v=d0d4e81880) format("woff2"); }

/* Fallbacks sized to the real fonts, so text does not reflow when they arrive (CLS).
   Measured from the fonts' own tables against Arial and Courier New: size-adjust is the
   ratio of average glyph widths over running text, the overrides are the font's ascent,
   descent and line gap divided by it. */
@font-face { font-family: "Inter Fallback"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 107.54%; ascent-override: 90.08%; descent-override: 22.43%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 102.69%; ascent-override: 94.33%; descent-override: 23.49%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 102.01%; ascent-override: 96.46%; descent-override: 28.62%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; font-weight: 700; src: local("Courier New Bold"), local("CourierNewPS-BoldMT"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30%; line-gap-override: 0%; }

:root {
  --brand: #fc5d10;
  --bg: #ffffff;
  --surface: #f8fafc;
  --text: #1e293b;
  --text2: #64748b;
  --border: #e2e8f0;
  --accent: #c2410c;          /* brand orange darkened to 5:1 on white, for text */
  --gold: #a16207;
  --frame: #1e293b;
  --shadow: rgba(15, 23, 42, 0.18);
  --glow: rgba(252, 93, 16, 0.10);
  --pitch: #3c8f4e;
  --stripe: #46a05a;
  --plus-bg: #fef3c7;
  --plus-border: #fde68a;
  --focus: #c2410c;
  color-scheme: light;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 24px);
  --radius: 24px;
  --display: "Space Grotesk", "Space Grotesk Fallback", Inter, "Inter Fallback", system-ui, sans-serif;
  --mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --text2: #94a3b8; --border: #334155;
    --accent: #fc5d10; --gold: #facc15; --frame: #020617; --shadow: rgba(252, 93, 16, 0.18);
    --pitch: #123d26; --stripe: #17492d; --plus-bg: #422006; --plus-border: #713f12; --focus: #fdba74;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f172a; --surface: #1e293b; --text: #e2e8f0; --text2: #94a3b8; --border: #334155;
  --accent: #fc5d10; --gold: #facc15; --frame: #020617; --shadow: rgba(252, 93, 16, 0.18);
  --pitch: #123d26; --stripe: #17492d; --plus-bg: #422006; --plus-border: #713f12; --focus: #fdba74;
  color-scheme: dark;
}

/* Screenshots exist per theme; show the one that matches. */
.on-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-dark { display: block; }
  :root:not([data-theme="light"]) .on-light { display: none; }
}
:root[data-theme="dark"] .on-dark { display: block; }
:root[data-theme="dark"] .on-light { display: none; }

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.6 Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.035em; max-width: 15em; }
h3 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 920px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 12px;
  background: var(--text); color: var(--bg); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

.section { padding-block: clamp(64px, 10vw, 120px); }
.eyebrow {
  margin-bottom: 16px; font: 700 0.8125rem/1.4 var(--mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.lead { margin-top: 22px; max-width: 32em; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--text2); }
.note { margin-top: 20px; font-size: 0.9375rem; color: var(--text2); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font: 700 1rem/1 Inter, "Inter Fallback", system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.btn-ink { background: var(--text); color: var(--bg); }
.btn-ink:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.store {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 22px 8px 18px;
  border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font: 700 1.125rem/1.1 Inter, "Inter Fallback", system-ui, sans-serif; text-decoration: none;
}
.store svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.store small { display: block; font-size: 0.75rem; font-weight: 400; color: inherit; opacity: 0.8; }
.store-primary { background: var(--text); color: var(--bg); border-color: var(--text); }
a.store:hover { border-color: var(--accent); }
.store-soon small { text-transform: uppercase; letter-spacing: 0.06em; }
.store-on-dark { background: #1e293b; border-color: #334155; color: #fff; }
.store-on-dark.store-primary { background: #fff; color: #0f172a; border-color: #fff; }

/* --- header ----------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
}
.bar { display: flex; align-items: center; gap: 12px 28px; min-height: 72px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: block; color: var(--text); flex: none; }
.logo { height: 44px; width: auto; }
.nav { margin-right: auto; }
.nav ul { display: flex; gap: 4px 22px; flex-wrap: wrap; }
.nav a { color: var(--text2); font-size: 0.9375rem; font-weight: 400; text-decoration: none; padding-block: 10px; display: inline-block; }
.nav a:hover { color: var(--text); }
.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.switch { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); }
.switch ul { display: flex; }
.switch a, .switch button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 38px; padding: 0 10px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text2);
  font: 700 0.875rem/1 Inter, "Inter Fallback", system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.switch a:hover, .switch button:hover { color: var(--text); }
.switch [aria-current="page"], .switch [aria-checked="true"] { background: var(--text); color: var(--bg); }
.switch svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.themes { display: none; }
.js .themes { display: flex; }

@media (max-width: 899px) {
  .nav { order: 3; width: 100%; margin-right: 0; overflow-x: auto; scrollbar-width: none; }
  .nav ul { flex-wrap: nowrap; }
  .nav a { white-space: nowrap; }
  .controls { margin-left: auto; }
  .logo { height: 38px; }
}
@media (max-width: 479px) {
  .controls .btn { display: none; }
  .bar { gap: 8px 12px; }
}

.suggest { background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.9375rem; }
.suggest p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-block: 10px; }
.suggest a { font-weight: 700; }
.suggest button {
  margin-left: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}

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

.hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center;
  padding-block: clamp(48px, 8vw, 96px) clamp(64px, 9vw, 110px);
}
.hero h1 { margin-top: 28px; font-size: clamp(2.75rem, 6.2vw, 5.5rem); line-height: 0.98; letter-spacing: -0.04em; }
.hero h1 span { display: block; }
.trust { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9375rem; color: var(--text2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.hero-visual { display: flex; justify-content: center; position: relative; }
.hero-visual::before {
  content: ""; position: absolute; top: 12%; width: min(440px, 100%); aspect-ratio: 1; border-radius: 50%; background: var(--glow);
}
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; gap: 48px; }
}

.scoreboard {
  display: inline-flex; flex-wrap: wrap; align-items: stretch; border-radius: 12px; overflow: hidden;
  background: #000; color: #fff; border: 1px solid #222; font-family: var(--mono); font-weight: 700;
}
.scoreboard span { display: flex; align-items: center; padding: 10px 16px; font-size: 0.9375rem; letter-spacing: 0.08em; }
.scoreboard .sb-score { background: var(--brand); font-size: 1.5rem; letter-spacing: 0; padding-block: 4px; }
.scoreboard .sb-away { color: #a8a8a8; }
.scoreboard .sb-clock { border-left: 1px solid #333; color: #facc15; }
.scoreboard-sm .sb-score { font-size: 1.25rem; }

.phone {
  position: relative; width: 300px; max-width: 100%; border-radius: 44px; padding: 9px;
  background: var(--frame); box-shadow: 0 30px 80px var(--shadow);
}
.phone img { width: 100%; height: auto; aspect-ratio: 9 / 20; border-radius: 36px; object-fit: cover; }
.phone-cut { height: 520px; overflow: hidden; border-radius: 40px 40px 0 0; padding-bottom: 0; box-shadow: none; }
.phone-cut img { border-radius: 32px 32px 0 0; object-position: top; }

/* --- stats ------------------------------------------------------------------ */

.stats { border-block: 1px solid var(--border); background: var(--surface); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; padding-block: 36px; margin-block: 0; }
.stats-grid div { display: flex; flex-direction: column-reverse; }
.stats-grid dd { margin: 0; font: 700 2.5rem/1.1 var(--display); letter-spacing: -0.03em; }
.stats-grid dt { margin-top: 4px; font-size: 0.9375rem; color: var(--text2); }

/* --- how -------------------------------------------------------------------- */

.steps { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.steps li { padding: 32px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.step-n {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--brand); color: var(--accent); font: 700 0.875rem/1 var(--mono);
}
.steps h3 { margin: 24px 0 8px; }
.steps p { color: var(--text2); }

/* --- features (tabs with JavaScript, stacked without) ----------------------- */

.tablist { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px; }
.tablist button {
  min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: 700 1rem/1 Inter, "Inter Fallback", system-ui, sans-serif; cursor: pointer;
}
.tablist button[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.feature {
  margin-top: 24px; padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 48px) 0; border-radius: 28px;
  background: var(--surface); border: 1px solid var(--border); overflow: hidden;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; align-items: center;
}
.feature-copy { padding-bottom: clamp(28px, 5vw, 48px); }
.feature h3 { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; }
.feature-copy > p { margin-top: 18px; font-size: 1.125rem; color: var(--text2); }
.feature-shot { display: flex; justify-content: center; align-self: end; }
.checks { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.check { flex: none; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* --- the day ---------------------------------------------------------------- */

.band { background: var(--surface); border-block: 1px solid var(--border); padding-block: clamp(64px, 10vw, 110px); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; }
.split-center { align-items: center; }
.timeline { display: flex; flex-direction: column; gap: 12px; }
.tl {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 18px 20px; border-radius: 16px; background: var(--bg); border: 1px solid var(--border);
}
.tl time { font: 700 1rem/1 var(--mono); color: var(--text2); }
.tl strong { display: block; }
.tl strong + span { font-size: 0.9375rem; color: var(--text2); }
.tl .coins { font: 700 1rem/1 var(--mono); color: var(--gold); }
.tl-break { background: transparent; border-style: dashed; padding-block: 14px; }
.tl-match { background: #000; border-color: #000; color: #fff; }
.tl-match time, .tl-match strong + span { color: #cbd5e1; }
@media (max-width: 479px) { .tl { grid-template-columns: 52px 1fr auto; gap: 12px; padding-inline: 14px; } }

/* --- the game --------------------------------------------------------------- */

.pitch {
  display: flex; justify-content: center; padding: 40px 16px; border-radius: 28px;
  background: repeating-linear-gradient(0deg, var(--pitch) 0 64px, var(--stripe) 64px 128px);
}
.pitch .phone { width: 300px; max-width: 86%; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.ladder { margin-top: 32px; display: flex; flex-direction: column-reverse; gap: 8px; }
.rung {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  font: 700 1.1875rem/1.2 var(--display);
}
.rung-0 { margin-right: 32%; }
.rung-1 { margin-right: 24%; }
.rung-2 { margin-right: 16%; }
.rung-3 { margin-right: 8%; }
.rung-start { border-color: var(--brand); }
.rung-top { background: #facc15; border-color: #facc15; color: #1e293b; }
.rung-tag { font: 600 0.875rem/1.2 Inter, "Inter Fallback", system-ui, sans-serif; color: var(--accent); }

/* --- price ------------------------------------------------------------------ */

.plans { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.plan { padding: clamp(28px, 4vw, 36px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.plan-plus { background: var(--plus-bg); border-color: var(--plus-border); }
.plan-plus h3 { color: var(--gold); }
.plan-plus .price-note { color: var(--text); }
.price { margin-top: 8px; font: 700 3rem/1.1 var(--display); letter-spacing: -0.03em; }
.price-note { color: var(--text2); }

/* --- questions -------------------------------------------------------------- */

#faq h2 { margin-bottom: 32px; font-size: clamp(2rem, 3.6vw, 3rem); }
details { border-top: 1px solid var(--border); }
details:last-of-type { border-bottom: 1px solid var(--border); }
summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 22px; cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary > span { font: 700 1.1875rem/1.35 Inter, "Inter Fallback", system-ui, sans-serif; letter-spacing: 0; }
summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: 4px;
  border-right: 2.5px solid var(--text2); border-bottom: 2.5px solid var(--text2); transform: rotate(45deg) translateY(-3px);
}
details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
details p { padding-bottom: 22px; max-width: 46em; color: var(--text2); }

/* --- final call ------------------------------------------------------------- */

#download { padding-bottom: clamp(64px, 9vw, 100px); }
.final {
  padding: clamp(48px, 8vw, 72px) clamp(20px, 4vw, 32px); border-radius: 32px; background: #000; color: #fff; text-align: center;
}
.final h2 { margin: 28px auto 0; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.04em; }
.final > p { margin-top: 16px; color: #cbd5e1; font-size: 1.125rem; }
.final .stores { justify-content: center; }

/* --- footer and 404 --------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--text2); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; padding-block: 32px; }
.foot p + p { margin-top: 4px; }
.foot ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot a { color: var(--text2); display: inline-block; padding-block: 8px; }
.foot a:hover { color: var(--text); }
.foot-langs ul { gap: 4px 12px; }
.foot-langs [aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; }

.nf + .nf { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--border); }
.nf h1, .nf h2 { font-size: clamp(2rem, 4vw, 3rem); }
.nf p { margin-top: 16px; color: var(--text2); }

@media print {
  .site-header, .suggest, .tablist, .stores, .skip, .share-row { display: none !important; }
  [data-panel] { display: grid !important; }
  /* Sections that never scrolled into view are still waiting to fade in: print them as they are. */
  .motion [data-r] { opacity: 1 !important; transform: none !important; }
}

/* --- small screens ---------------------------------------------------------- */

@media (max-width: 599px) {
  .scoreboard span { padding: 8px 10px; font-size: 0.8125rem; letter-spacing: 0.06em; }
  .scoreboard .sb-score { font-size: 1.25rem; }
  .rung { flex-wrap: wrap; gap: 2px 12px; }
  .rung-0 { margin-right: 16%; }
  .rung-1 { margin-right: 12%; }
  .rung-2 { margin-right: 8%; }
  .rung-3 { margin-right: 4%; }
}

/* --- the orange line ---------------------------------------------------------
   The logo's sports row is one orange line; the site borrows it. It runs under the
   hero title, ties the study day and the ladder together, opens every section
   heading and draws itself in full in the final call. Static without JavaScript or
   with reduced motion; the drawing is added by site.js. */

.hero-line { width: min(320px, 70%); height: auto; margin-top: 18px; overflow: visible; }
.hero-line path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow::before {
  content: ""; flex: none; width: 34px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 8 C 6 8, 8 2, 13 2 S 19 10, 24 10 S 30 6, 33 6' fill='none' stroke='%23fc5d10' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
  transform-origin: left center;
}

.final-line { width: min(560px, 100%); margin: 0 auto 32px; color: var(--brand); }
.final-line svg { width: 100%; height: auto; }

/* The day as a thread: a line down the left, a dot per moment. --p is how far the
   reader has scrolled through the day (set by site.js; 1 without it). */
.timeline { position: relative; padding-left: 30px; --p: 1; }
.timeline::before, .timeline::after {
  content: ""; position: absolute; left: 9px; top: 28px; bottom: 28px; width: 2px; border-radius: 2px;
}
.timeline::before { background: var(--border); }
.timeline::after { background: var(--brand); transform-origin: top; transform: scaleY(var(--p)); }
.tl { position: relative; }
.tl::before {
  content: ""; position: absolute; left: -27px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--border); z-index: 1;
  transition: background-color .3s, border-color .3s;
}
.tl.lit::before, .no-motion .tl::before { background: var(--brand); border-color: var(--brand); }
:root:not(.js) .tl::before { background: var(--brand); border-color: var(--brand); }

/* The ladder: the same thread climbing from where you start to the top. */
.ladder { position: relative; padding-left: 30px; --p: 1; }
.ladder::before, .ladder::after {
  content: ""; position: absolute; left: 9px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px;
}
.ladder::before { background: var(--border); }
.ladder::after { background: var(--brand); transform-origin: bottom; transform: scaleY(var(--p)); }
.rung { position: relative; }
.rung::before {
  content: ""; position: absolute; left: -27px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--brand); border: 2px solid var(--brand);
}
.rung-top::before { background: #facc15; border-color: #facc15; }

/* --- motion (only when site.js adds .motion: JavaScript on, reduced motion off) --- */

.motion [data-r] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.motion [data-r].in { opacity: 1; transform: none; }

.motion .hero-line path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1) .5s; }
.motion .hero-line.in path { stroke-dashoffset: 0; }

.motion .eyebrow::before { transform: scaleX(0); transition: transform .8s cubic-bezier(.65,0,.35,1) .1s; }
.motion .eyebrow.in::before { transform: none; }

.motion .ladder { --p: 0; }
.motion .ladder::after { transition: transform 1.8s cubic-bezier(.65,0,.35,1) .3s; }
.motion .ladder.in { --p: 1; }
.motion .rung::before { background: var(--bg); border-color: var(--border); transition: background-color .3s, border-color .3s; }
.motion .rung.lit::before { background: var(--brand); border-color: var(--brand); }
.motion .rung-top.lit::before { background: #facc15; border-color: #facc15; }

.motion .hero-visual .phone { transition: transform .1s linear; will-change: transform; }

.motion [data-panel] { animation: panel-in .5s cubic-bezier(.16,1,.3,1); }
.motion [data-panel] .phone-cut { animation: shot-in .7s cubic-bezier(.16,1,.3,1); }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shot-in { from { transform: translateY(60px); } to { transform: none; } }

.motion .sb-score { animation: score-pop 2.4s ease-in-out 1.2s 1 both; }
@keyframes score-pop { 0%, 100% { transform: none; } 8% { transform: scale(1.18); } 16% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- numbers (v2): four tiles, icon, figure, unit in orange --------------------- */

.stats { background: var(--surface); }
.stats-grid { gap: 16px; padding-block: clamp(28px, 5vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.stats-grid .stat {
  position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px;
  padding: 24px 24px 22px; border-radius: 20px; background: var(--bg); border: 1px solid var(--border); overflow: hidden;
}
.stats-grid .stat::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--brand); transform-origin: left; transform: scaleX(.18);
  transition: transform .9s cubic-bezier(.65,0,.35,1) .2s;
}
.stats-grid .stat.in::after, .no-motion .stats-grid .stat::after { transform: scaleX(1); }
:root:not(.js) .stats-grid .stat::after { transform: scaleX(1); }
.stats-grid dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font: inherit; margin: 0; }
.stat-icon {
  flex-basis: 100%; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--accent);
}
.stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat-n { font: 700 clamp(2.25rem, 3.6vw, 2.9rem)/1 var(--display); letter-spacing: -0.035em; }
.stat-u { font: 700 1.125rem/1 var(--display); color: var(--accent); letter-spacing: -0.01em; }
.stats-grid dt { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text2); }

/* --- the hero line, longer ------------------------------------------------------ */

/* As wide as the lead paragraph under it (same font size, same 32em), left-aligned. */
.hero-line { display: block; width: 100%; max-width: calc(32 * clamp(1.0625rem, 1.6vw, 1.25rem)); height: 32px; margin-top: 20px; }
.hero-line path { vector-effect: non-scaling-stroke; }

/* --- the glow behind the phone breathes and drifts ---------------------------- */

.hero-visual::before { animation: glow-drift 14s ease-in-out infinite alternate; }
.hero-visual::after {
  content: ""; position: absolute; top: 30%; left: 50%; width: min(300px, 70%); aspect-ratio: 1; border-radius: 50%;
  background: var(--glow); filter: blur(30px); animation: glow-orbit 18s ease-in-out infinite alternate; pointer-events: none;
}
.hero-visual .phone { z-index: 1; }
@keyframes glow-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 3%) scale(1.06); }
  100% { transform: translate(3%, -2%) scale(.97); }
}
@keyframes glow-orbit {
  0% { transform: translate(-80%, -10%) scale(.9); opacity: .7; }
  100% { transform: translate(-10%, 20%) scale(1.15); opacity: 1; }
}

/* --- scroll progress: the orange line under the header ----------------------- */

.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.progress span {
  position: absolute; inset: 0; background: var(--brand); transform-origin: left; transform: scaleX(var(--scroll, 0));
}
.progress i {
  position: absolute; top: -3px; left: calc(var(--scroll, 0) * 100% - 5px); width: 9px; height: 9px; border-radius: 50%; background: var(--brand);
}
:root:not(.js) .progress { display: none; }

/* --- the menu shows where you are --------------------------------------------- */

.nav a { position: relative; transition: color .2s; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.nav a[aria-current="true"] { color: var(--text); font-weight: 700; }
.nav a[aria-current="true"]::after { transform: none; }


/* --- made by alt64: one line under the publisher, with the logo ---------------------
   The logo is two masks (assets/alt64-alt.png, assets/alt64-64.png, from
   `npm run site:assets`): "alt" takes the theme's text colour, "64" stays alt64 green
   with a light that passes over it now and then. It assembles itself when it scrolls
   into view and lifts on hover. */

.site-footer { --alt64: #a2bc34; }  /* sampled from the logo */
.credit { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.foot .credit-link { display: inline-block; padding-block: 2px; border-radius: 6px; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.credit-link:hover { transform: translateY(-2px); }
.alt64 { position: relative; display: block; width: 52px; aspect-ratio: 314 / 123; }
.alt64 span {
  position: absolute; inset: 0;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.alt64-alt { background: var(--text); -webkit-mask-image: url(alt64-alt.png?v=5b7040daf9); mask-image: url(alt64-alt.png?v=5b7040daf9); }
.alt64-64 {
  -webkit-mask-image: url(alt64-64.png?v=62f7bdbdf3); mask-image: url(alt64-64.png?v=62f7bdbdf3);
  background: linear-gradient(105deg, var(--alt64) 0 40%, #e9f7c8 50%, var(--alt64) 60% 100%) no-repeat;
  background-size: 300% 100%; background-position: 100% 0;
}
.credit-link:hover .alt64-64 { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--alt64) 60%, transparent)); }

.motion .alt64-alt { opacity: 0; transform: translateX(-10px); transition: opacity .6s ease .2s, transform .8s cubic-bezier(.16,1,.3,1) .2s; }
.motion .alt64-64 { opacity: 0; transform: translateY(8px) scale(.92); transition: opacity .6s ease .45s, transform .8s cubic-bezier(.2,1.4,.4,1) .45s; }
.motion .credit.in .alt64-alt, .motion .credit.in .alt64-64 { opacity: 1; transform: none; }
/* Every few seconds the 64 hops and a light passes over it. */
.motion .credit.in .alt64-64 { animation: alt64-shine 5s ease-in-out 1.4s infinite, alt64-hop 5s cubic-bezier(.3,1.6,.5,1) 1.4s infinite; }
@keyframes alt64-hop { 0%, 14%, 100% { transform: none; } 5% { transform: translateY(-3px) scale(1.06); } 9% { transform: translateY(0) scale(.98); } }
@keyframes alt64-shine { 0%, 4% { background-position: 100% 0; } 24%, 100% { background-position: 0 0; } }

/* numbers: icon on its own line, figure and unit together under it */
.stats-grid dd { display: block; }
.stat-icon { display: grid; width: 44px; height: 44px; margin-bottom: 16px; }
.stat-n { white-space: nowrap; }
.stat-u { margin-left: 4px; white-space: nowrap; }

/* numbers, aligned: row 1 icon + unit, row 2 the figure (one line), row 3 the label.
   Four, two or one columns, so the tiles always fill the row. */
.stats-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats-grid dd {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon unit" "num num";
  align-items: center; column-gap: 12px; row-gap: 14px;
}
.stat-icon { grid-area: icon; margin: 0; }
.stat-u {
  grid-area: unit; margin: 0; font: 700 0.8125rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.stat-n { grid-area: num; font-size: clamp(2.1rem, 3.2vw, 2.75rem); }
.stats-grid dt { min-height: 2.9em; }

/* --- the hero reel: five screens that tell the app's story -----------------------
   Slides sit on top of each other inside the phone; the active one is in place, the
   ones before it have slid out to the left, the ones after wait on the right. Under
   the phone, story-style bars fill for the active slide (the bar's animation drives
   the timing: site.js moves on when it ends), with the step's name beneath. */

.reel-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; width: 300px; max-width: 100%; }
.reel-wrap .phone { width: 100%; }
.reel { position: relative; aspect-ratio: 9 / 20; border-radius: 36px; overflow: hidden; background: var(--bg); }
.reel-slide { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.65,0,.35,1), opacity .8s; }
.reel-slide img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.reel-slide:not(.is-on) { opacity: 0; transform: translateX(14%) scale(.96); }
.reel-slide.is-past { transform: translateX(-14%) scale(.96); }
.reel-slide.is-on { opacity: 1; transform: none; z-index: 1; }

.reel-ctrl { display: flex; align-items: flex-start; gap: 14px; width: 100%; }
.reel-pause {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -12px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.reel-pause svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reel-pause .i-play { display: none; fill: currentColor; }
.reel-pause[aria-pressed="true"] .i-pause { display: none; }
.reel-pause[aria-pressed="true"] .i-play { display: block; }
.reel-steps { position: relative; flex: 1; display: flex; gap: 6px; padding-bottom: 26px; }
.reel-steps li { flex: 1; }
.reel-steps button { display: block; width: 100%; min-height: 24px; padding: 10px 0; border: 0; background: none; cursor: pointer; }
.reel-bar { display: block; height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; }
.reel-bar span { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); }
.reel-steps .is-done .reel-bar span { transform: none; }
.reel-steps .is-on .reel-bar span { transform: none; }
.reel-label {
  position: absolute; left: 0; right: 0; top: 24px; font: 700 0.8125rem/1.2 var(--mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); text-align: left; opacity: 0; transition: opacity .4s; pointer-events: none;
}
.reel-steps .is-on .reel-label { opacity: 1; }
.reel-steps button:focus-visible { outline-offset: 2px; }

/* The timer: the active bar fills over --reel-ms; paused with the reel. */
.reel-run .reel-steps .is-on .reel-bar span { transform: scaleX(0); animation: reel-fill var(--reel-ms, 4200ms) linear forwards; }
.reel-run.is-paused .reel-steps .is-on .reel-bar span { animation-play-state: paused; }
@keyframes reel-fill { to { transform: none; } }

/* numbers: five tiles. Five across on a wide screen; two (the fifth spanning the row)
   on a tablet; one on a phone. The figure shrinks a little to fit five. */
@media (min-width: 560px) { .stats-grid .stat:last-child:nth-child(odd) { grid-column: span 2; } }
@media (min-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .stats-grid .stat:last-child:nth-child(odd) { grid-column: auto; }
  .stats-grid .stat { padding: 22px 20px 20px; }
  .stats-grid .stat::after { left: 20px; right: 20px; }
  .stat-n { font-size: clamp(1.9rem, 2.4vw, 2.35rem); }
}

/* Plus starts with "everything in the free version", set apart from what it adds. */
.plan-plus .checks li:first-child { font-weight: 700; padding-bottom: 12px; border-bottom: 1px solid var(--plus-border); }

/* --- the shop: name, what you get, price ---------------------------------------- */
.extras { margin-top: 20px; padding: clamp(24px, 4vw, 36px); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.extras-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
.extras-head h3 { font: 700 1.25rem/1.3 var(--display); letter-spacing: -0.01em; }
.extras-head p { color: var(--text2); font-size: 0.9375rem; }
.extras .shop { display: block; margin-top: 18px; color: inherit; font-size: 1rem; }
.shop li {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: 4px 24px; align-items: baseline;
  padding-block: 14px; border-top: 1px solid var(--border);
}
.shop li::before { display: none; }
.shop-name { font-weight: 700; }
.shop-detail { color: var(--text2); font-size: 0.9375rem; }
.shop-price { font: 700 1.0625rem/1 var(--mono); color: var(--text); white-space: nowrap; }
@media (max-width: 639px) {
  .shop li { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-detail { grid-column: 1 / -1; grid-row: 2; }
}

/* --- a hairline between sections that share a background ---------------------------
   (the band and the numbers strip already have their own edges). Always the content's
   width, also under the narrower questions, and fading out at both ends. */
.section + .section, .section + #download { position: relative; }
.section + .section::before, .section + #download::before {
  content: ""; position: absolute; top: 0; left: 50%; height: 1px;
  width: min(calc(var(--wrap) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)));
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
  pointer-events: none;
}
#download { padding-top: clamp(64px, 9vw, 100px); }

/* The final call in the app's own navy instead of pure black, which fought the page's
   navy: a deep gradient, a soft orange glow behind the sports line and a hairline edge.
   Dark in both themes, so the white title and the orange line keep their contrast. */
.final {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(252, 93, 16, 0.22), transparent 70%),
    linear-gradient(170deg, #1e293b 0%, #0f172a 62%, #0b1222 100%);
  border: 1px solid #334155;
}
.final .scoreboard { background: #020617; border-color: #334155; }
.final > p { color: #cbd5e1; }
.store-on-dark { background: #0f172a; border-color: #475569; }
.tl-match { background: linear-gradient(120deg, #1e293b, #0f172a); border-color: #334155; }
.tl-match { border-color: color-mix(in srgb, var(--brand) 45%, #334155); box-shadow: inset 4px 0 0 var(--brand), 0 10px 30px rgba(252, 93, 16, 0.12); }

/* The logo sits on the text's baseline, close to the words before it. */
.credit { align-items: baseline; gap: 4px 6px; }
.foot .credit-link { padding-block: 0; line-height: 0; }

/* The credit line as plain inline text: the logo (cropped to its letters) sits on the
   baseline in every browser, like a word. */
.credit { display: block; }
.foot .credit-link { display: inline-block; vertical-align: baseline; line-height: 0; margin-left: 2px; }
.alt64 { aspect-ratio: 314 / 103; width: 50px; }

/* --- the final call follows the theme ------------------------------------------------
   Light: a warm, light panel with the orange glow and dark text. Dark: the app's navy.
   The scoreboard stays black in both, as in the app. */
:root {
  --final-bg: radial-gradient(60% 55% at 50% 0%, rgba(252, 93, 16, 0.16), transparent 70%), linear-gradient(170deg, #fff7ed 0%, #ffffff 70%);
  --final-border: #fed7aa;
  --final-fg: #1e293b;
  --final-muted: #475569;
  --final-btn-bg: #ffffff;
  --final-btn-fg: #1e293b;
  --final-btn-border: #e2e8f0;
  --final-btn1-bg: #1e293b;
  --final-btn1-fg: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --final-bg: radial-gradient(60% 55% at 50% 0%, rgba(252, 93, 16, 0.22), transparent 70%), linear-gradient(170deg, #1e293b 0%, #0f172a 62%, #0b1222 100%);
    --final-border: #334155; --final-fg: #ffffff; --final-muted: #cbd5e1;
    --final-btn-bg: #0f172a; --final-btn-fg: #ffffff; --final-btn-border: #475569;
    --final-btn1-bg: #ffffff; --final-btn1-fg: #0f172a;
  }
}
:root[data-theme="dark"] {
  --final-bg: radial-gradient(60% 55% at 50% 0%, rgba(252, 93, 16, 0.22), transparent 70%), linear-gradient(170deg, #1e293b 0%, #0f172a 62%, #0b1222 100%);
  --final-border: #334155; --final-fg: #ffffff; --final-muted: #cbd5e1;
  --final-btn-bg: #0f172a; --final-btn-fg: #ffffff; --final-btn-border: #475569;
  --final-btn1-bg: #ffffff; --final-btn1-fg: #0f172a;
}
.final { background: var(--final-bg); border-color: var(--final-border); color: var(--final-fg); }
.final > p { color: var(--final-muted); }
.final .scoreboard { background: #000; border-color: #222; }
.store-on-dark { background: var(--final-btn-bg); color: var(--final-btn-fg); border-color: var(--final-btn-border); }
.store-on-dark.store-primary { background: var(--final-btn1-bg); color: var(--final-btn1-fg); border-color: var(--final-btn1-bg); }

/* --- the coin counter in the header -----------------------------------------------
   Reading the site earns coins by the app's rule (coinsPerMinute, from the facts):
   counted while the tab is visible, kept for the visit. Styled like the app's coin
   pill. Shown only with JavaScript. */
:root { --pill-bg: #fef3c7; --pill-fg: #92400e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pill-bg: #422006; --pill-fg: #facc15; } }
:root[data-theme="dark"] { --pill-bg: #422006; --pill-fg: #facc15; }
.coin-pill {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px 0 9px;
  border: 0; border-radius: 999px; background: var(--pill-bg); color: var(--pill-fg);
  font: 700 0.9375rem/1 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer;
}
.coin-pill[hidden] { display: none; }
/* What the pill means: a native popover, opened by tap, click or keyboard. */
.coin-info {
  position: fixed; inset: 76px var(--gutter) auto auto; margin: 0; max-width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg); color: var(--text); box-shadow: 0 16px 40px var(--shadow); font-size: 0.9375rem; line-height: 1.5;
}
.coin-info::backdrop { background: transparent; }
.coin {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a 0 25%, #facc15 26% 60%, #eab308 61%);
  box-shadow: inset 0 0 0 2px #ca8a04;
}
.coin-plus {
  position: absolute; right: 10px; top: -4px; font-size: 0.75rem; color: var(--accent); opacity: 0; pointer-events: none;
}
.motion .coin-pill.tick .coin { animation: coin-pop .5s cubic-bezier(.3,1.6,.5,1); }
.motion .coin-pill.tick .coin-plus { animation: coin-plus .9s ease-out; }
@keyframes coin-pop { 40% { transform: scale(1.25) rotate(-12deg); } }
@keyframes coin-plus { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@media (max-width: 479px) { .coin-pill { padding: 0 10px 0 7px; min-height: 34px; } }

/* Trademark notices: small print under the footer. */
.legal { padding-block: 0 32px; }
.legal p { padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.75rem; line-height: 1.6; color: var(--text2); max-width: 70em; }
.legal p { max-width: none; }

/* `hidden` wins over any class that sets display (the share button, the coin pill, the reel controls). */
[hidden] { display: none !important; }

/* --- imprint: the publisher's legal details, under "an app by" --------------------- */
.foot .imprint { font-size: 0.8125rem; }

/* --- "read more": links from the home page to the topic pages and back ------------- */
.more-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 40px; }
.more-links span { font: 700 0.8125rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.more-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none;
}
.more-links a:hover { border-color: var(--accent); color: var(--accent); }

/* --- share: the system share sheet, or copy the link (site.js) ------------------- */
.share-row { margin-top: 28px; display: flex; justify-content: center; }
.btn-share { background: transparent; color: var(--final-fg, #fff); border-color: var(--final-btn-border, #475569); }
.btn-share:hover { border-color: var(--brand); }
.btn-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- text pages: topic pages, press kit, privacy --------------------------------- */
.topic-hero h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.02; }
.topic-hero .eyebrow { margin-bottom: 4px; }
.prose > section + section, .prose section + .more-links { margin-top: 48px; }
.prose h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.prose h3 { margin-top: 28px; font: 700 1.125rem/1.35 Inter, "Inter Fallback", system-ui, sans-serif; }
.prose p, .prose ul, .prose ol, .prose table, .prose dl { margin-top: 14px; max-width: 46em; }
.prose h2 + p, .prose h2 + h3 { margin-top: 16px; }
.prose ul { list-style: disc; padding-left: 1.4em; }
.prose ul li + li { margin-top: 6px; }
.prose .lead { max-width: 40em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); }
.prose th { font-weight: 700; }
.privacy h2 { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.privacy .meta { margin-top: 8px; color: var(--text2); font-size: 0.9375rem; }

/* The press kit: fact sheet, logo tiles, social cards, screenshots. */
.press > section { margin-top: 64px; }
.facts { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); border-top: 1px solid var(--border); }
.facts > div { display: contents; }
.facts dt, .facts dd { margin: 0; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); }
.facts dt { font-weight: 700; }
.facts dd { color: var(--text2); }
@media (max-width: 559px) {
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
}
.prose .logo-tiles, .prose .og-tiles, .prose .gallery { list-style: none; padding: 0; max-width: none; }
.logo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.logo-tile { margin: 0; padding: 32px; border-radius: var(--radius); border: 1px solid var(--border); }
.prose .logo-tiles li + li, .prose .og-tiles li + li, .prose .gallery li + li { margin-top: 0; }
.logo-tile img { width: min(260px, 100%); height: auto; margin: 0 auto; }
.logo-tile p { margin-top: 24px; font-size: 0.9375rem; text-align: center; }
.logo-tile-light { background: #ffffff; color: #1e293b; }
.logo-tile-light a { color: #c2410c; }
.logo-tile-dark { background: #0f172a; color: #e2e8f0; border-color: #334155; }
.logo-tile-dark a { color: #fdba74; }
.og-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.og-tiles img, .gallery img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }
.og-tiles span, .gallery span { display: block; margin-top: 8px; font-size: 0.875rem; color: var(--text2); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery img { border-radius: 18px; aspect-ratio: 9 / 20; object-fit: cover; }

/* --- topic pages: three number tiles in a row on a wide screen ------------------ */
@media (min-width: 1100px) { .stats-grid.stats-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.5rem); line-height: 1; }

/* --- the coin meter (pomodoro page): multMin .. 1x .. multMax ----------------------
   --base is where 1x sits on the range; the build writes it from the facts. */
.meter {
  --base: 25.00%;
  padding: clamp(24px, 4vw, 40px); border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg);
}
.meter-track { position: relative; height: 16px; margin-top: 84px; border-radius: 999px; background: var(--border); }
.meter-fill {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, #94a3b8 0%, var(--brand) var(--base), #facc15 100%);
}
.meter-mark {
  position: absolute; left: var(--base); bottom: calc(100% + 18px); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; white-space: nowrap; text-align: center;
}
.meter-mark::after {
  content: ""; position: absolute; top: calc(100% + 4px); left: 50%; width: 3px; height: 38px; margin-left: -1.5px;
  border-radius: 2px; background: var(--text);
}
.meter-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; }
.meter-ends > span { display: flex; flex-direction: column; max-width: 48%; }
.meter-hi { align-items: flex-end; text-align: right; }
.meter strong { font: 700 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--display); letter-spacing: -0.02em; }
.meter-hi strong { color: var(--gold); }
.meter-mark strong { font-size: 1.25rem; }
.meter span span, .meter-mark span { font-size: 0.875rem; color: var(--text2); }
.motion .meter[data-r] .meter-fill { transform: scaleX(0); transition: transform 1.8s cubic-bezier(.65,0,.35,1) .4s; }
.motion .meter.in .meter-fill { transform: none; }