/* ═══════════════════════════════════════════════════════════════════════════
   StatBlockFit — the whole site's stylesheet.
 
   ONE FILE, LINKED BY EVERY PAGE. The previous site was two pages with the
   stylesheet inlined in each, which is fine at two and is ledger #28's trap at
   five: two copies that must agree eventually disagree. A static host serves a
   .css file with no build step, so nothing is lost by extracting it.
 
   The colour values are copied from `design-tokens.js`, and that repetition is
   the one place §9 permits it (#367): these pages are dependency-free and open
   from `file://`, so they cannot import a CommonJS module. Kept as custom
   properties so the repetition is one block rather than several hundred
   literals.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   The app's own design tokens, copied from design-tokens.js.

   The app's rule is that colours live in exactly one file, and a static page
   cannot import a CommonJS module, so this is the one place they are repeated.
   Kept as custom properties so the repetition is one block rather than three
   hundred literals.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --void: #070708;
  --base: #0D0D0F;
  --surface: #141417;
  --elevated: #1B1B20;
  --inset: #09090B;

  --border-subtle: #1F1F24;
  --border: #2C2C33;
  --border-strong: #3E3E48;

  --text-primary: #F5F3EF;
  --text-secondary: #A8A49D;
  --text-tertiary: #837F7A;

  --pulse: #10B981;
  --pulse-glow: #6EE7B7;
  --pulse-faint: #08211B;
  --bone: #F5F3EF;

  --str: #F2453D;
  --dex: #A3E635;
  --con: #FFC53D;
  --int: #4C9AFF;
  --wis: #B18AFF;
  --cha: #FF6BAA;

  /* The app defers custom fonts, so character comes from weight, case and
     tracking rather than a typeface. Same approach here. */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  background: var(--base);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Dark only, on purpose. The app ships one excellent theme rather than two
   mediocre ones, and the site says the same thing about itself. */

a { color: var(--pulse); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pulse);
  outline-offset: 3px;
}

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }

/* ── The eyebrow. The app's `text-label`: wide-tracked uppercase, and it does
   much of the identity work on its own. ─────────────────────────────────── */
.label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
}
.label--pulse { color: var(--pulse); }

/* ── THE NOTCH ──────────────────────────────────────────────────────────────
   The app's shape language is a 45 degree cut corner with a hairline rule set
   back from the cut, drawn as a real SVG path because there is no CSS chamfer.

   On the web the equivalent is two stacked clip-paths: an outer element filled
   with the border colour, and an inner one inset by 1px filled with the
   surface. That is what carries a visible outline across the cut, which a
   single clipped box cannot do.
   ─────────────────────────────────────────────────────────────────────────── */
.panel {
  --notch: 14px;
  background: var(--border);
  clip-path: polygon(
    var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)
  );
  padding: 1px;
}
.panel > .panel__inner {
  background: var(--surface);
  clip-path: polygon(
    calc(var(--notch) - 1px) 0, 100% 0, 100% calc(100% - var(--notch) + 1px),
    calc(100% - var(--notch) + 1px) 100%, 0 100%, 0 calc(var(--notch) - 1px)
  );
  padding: 1.5rem;
  height: 100%;
}
.panel--elevated > .panel__inner { background: var(--elevated); }
.panel--tint > .panel__inner { background: var(--pulse-faint); }

/* ── Buttons. Bone is the primary action, never a colour: six stat hues own
   the data wheel and near-white outranks all of them without competing. ──── */
.btn {
  --notch: 10px;
  display: inline-block;
  border: 0;
  font: inherit;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  clip-path: polygon(
    var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)
  );
}
.btn--primary { background: var(--bone); color: var(--base); }
.btn--primary:hover { background: #DAD6CE; text-decoration: none; }
.btn--ghost {
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.btn--ghost:hover { background: var(--elevated); text-decoration: none; }
.btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { padding: 4.5rem 0 3.5rem; position: relative; overflow: hidden; }
/* A single very dim bloom behind the header, matching the app's Screen. */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 46rem; height: 46rem;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(16,185,129,0.10) 0%, rgba(16,185,129,0) 62%);
  pointer-events: none;
}
.hero > * { position: relative; }

.lockup { display: flex; align-items: center; gap: 0.85rem; }
.lockup svg { width: 48px; height: 48px; flex: none; }
.wordmark {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1;
}
.wordmark b { color: var(--pulse); font-weight: 800; }

h1 {
  font-size: clamp(2.1rem, 6.2vw, 3.6rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 0;
  max-width: 20ch;
}
h1 em { color: var(--pulse); font-style: normal; }

.lede {
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 2.4vw, 1.175rem);
  color: var(--text-secondary);
  max-width: 54ch;
}

.cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.cta-note { margin-top: 1rem; font-size: 0.8125rem; color: var(--text-tertiary); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
section { padding: 3.25rem 0; }
h2 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  font-weight: 800; letter-spacing: -0.01em;
  margin: 0.75rem 0 0; max-width: 24ch;
}
.section-lede { color: var(--text-secondary); margin: 0.9rem 0 0; max-width: 58ch; }

.grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.card h3 { margin: 0.6rem 0 0; font-size: 1.0625rem; font-weight: 700; }
.card p { margin: 0.5rem 0 0; color: var(--text-secondary); font-size: 0.9375rem; }

/* ── The loop ─────────────────────────────────────────────────────────────── */
.loop { display: grid; gap: 0.75rem; margin-top: 2rem;
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.loop-step .n {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.75rem; color: var(--pulse); font-weight: 700;
}
.loop-step h3 { margin: 0.35rem 0 0; font-size: 0.9375rem; font-weight: 700; }
.loop-step p { margin: 0.3rem 0 0; font-size: 0.8125rem; color: var(--text-tertiary); }

/* ── Stats row ────────────────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.75rem; }
.stat-chip {
  --notch: 6px;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.8rem;
  background: var(--surface);
  clip-path: polygon(
    var(--notch) 0, 100% 0, 100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%, 0 100%, 0 var(--notch)
  );
}

/* ── Numbers ──────────────────────────────────────────────────────────────── */
.figures { display: grid; gap: 1rem; margin-top: 2rem;
           grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.figure .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.75rem; font-weight: 700; color: var(--text-primary);
}
.figure .k { margin-top: 0.15rem; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--border-subtle);
  padding: 2.25rem 0 3rem; margin-top: 2rem;
  color: var(--text-tertiary); font-size: 0.875rem;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
            justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
footer a { color: var(--text-secondary); }

/* Anything that must be replaced before publishing is visibly marked, so it
   cannot ship by accident. Replacing the value removes the marker with it. */
.fill {
  font-family: var(--mono); font-size: 0.85em; font-weight: 700;
  color: var(--con);
  background: rgba(255,197,61,0.10);
  padding: 0.05em 0.4em;
  box-shadow: inset 0 0 0 1px rgba(255,197,61,0.35);
}

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

/* ── Site chrome: the navigation the five-page site needs ────────────────── */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(13, 13, 15, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-subtle);
}
.sitenav__in {
  max-width: 1040px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.sitenav__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  margin-right: auto;
}
.sitenav__brand svg { width: 26px; height: 26px; display: block; }
.sitenav__links { display: flex; gap: 4px; flex-wrap: wrap; }
.sitenav a.navlink {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 11px;
  border: 1px solid transparent;
}
.sitenav a.navlink:hover { color: var(--text-primary); background: var(--surface); }
/* The current page is marked with aria-current, so the styling and the
   accessibility tree cannot disagree about which page you are on. */
.sitenav a.navlink[aria-current="page"] {
  color: var(--pulse);
  border-color: var(--border);
  background: var(--surface);
}

.sitefoot {
  border-top: 1px solid var(--border-subtle);
  margin-top: 72px;
  padding: 32px 20px 56px;
  color: var(--text-tertiary);
  font-size: 13.5px;
}
.sitefoot__in { max-width: 1040px; margin: 0 auto; display: grid; gap: 22px; }
.sitefoot__cols { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sitefoot h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  margin: 0 0 9px;
}
.sitefoot a { color: var(--text-secondary); }
.sitefoot address { font-style: normal; line-height: 1.7; }

/* A two-mode split, used on the home page and the two product pages. */
.modes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mode {
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 22px;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.mode h3 { margin: 0 0 4px; font-size: 21px; letter-spacing: -0.01em; }
.mode__kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pulse);
  font-weight: 700;
  margin: 0 0 10px;
}
.mode ul { margin: 14px 0 0; padding-left: 18px; color: var(--text-secondary); }
.mode li { margin: 6px 0; }

/* Legal pages: long prose, narrower measure, numbered sections. */
.legal { max-width: 780px; }
.legal h2 { margin-top: 40px; }
.legal h3 { margin-top: 26px; font-size: 17px; }
.legal p, .legal li { color: var(--text-secondary); }
.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.legal th, .legal td {
  text-align: left;
  vertical-align: top;
  padding: 9px 12px;
  border: 1px solid var(--border-subtle);
}
.legal th { background: var(--surface); color: var(--text-primary); font-weight: 700; }
.legal td { color: var(--text-secondary); }
.updated { color: var(--text-tertiary); font-size: 13.5px; }

/* An unfilled placeholder must never ship silently (#369). */
.todo {
  background: rgba(255, 197, 61, 0.12);
  border: 1px solid var(--con);
  color: var(--con);
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 0.92em;
}