/* =============================================================================
   fastsaverapi.com — the FastSaver "Graphite" design system (DESIGN.md v2).
   Same tokens, type and chrome as fastsaver.io and api.fastsaver.io.

   Ink is the only accent. The brand green lives in the logo only. There is no
   JavaScript on this site, so the theme follows the OS: the dark tokens are
   applied by prefers-color-scheme, and the [data-theme] blocks from the spec
   stay in place so a toggle can be added later without touching a token.
   ========================================================================== */

@font-face {
  font-family: 'Space Grotesk Variable';
  src: url('/fonts/space-grotesk.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url('/fonts/jetbrains-mono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens: DESIGN.md §2, verbatim ------------------------------------- */
:root {
  /* ---- Light theme (default) — graphite on warm paper --------------------- */
  --bg: #fafaf7; /* warm paper white, not clinical */
  --surface: #ffffff;
  --surface-2: #f1f1ee;
  --text: #0d0f12; /* brand ink */
  --muted: #6c6e75;
  --border: #e8e7e2;
  --accent: #0d0f12; /* ink accent: nav CTA, generic primary */
  --accent-hover: #000000;
  --success: #157a52; /* refined, used sparingly */

  /* On-accent text — white label on the ink button */
  --on-accent: #ffffff;

  /* ---- Brand green — LOGO ONLY. Same value in both themes. ---------------- */
  --brand: #4ade4a; /* the logo's equalizer bars */
  --brand-deep: #4ade4a; /* the "Saver" half of the wordmark */

  /* ---- Typography --------------------------------------------------------- */
  --font-display: 'Space Grotesk Variable', 'Inter Variable', system-ui, sans-serif;
  --font-ui: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ---- Radii -------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* ---- Spacing scale ------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;

  /* ---- Elevation (tuned per theme) ---------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06);
  --shadow: 0 6px 24px -8px rgba(22, 24, 29, 0.14);
  --shadow-lg: 0 18px 50px -16px rgba(22, 24, 29, 0.22);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);

  /* ---- Layout ------------------------------------------------------------- */
  --nav-h: 60px;
  --botnav-h: 62px; /* mobile bottom tab bar */
  --content-max: 760px;
  --tool-max: 600px;

  /* ---- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-enter: cubic-bezier(0.34, 1.56, 0.64, 1); /* entrances only — a small spring */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 380ms;

  /* ---- Type scale — every font-size uses one of these ------------------- */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.25rem;
  --text-3xl: 1.375rem;
  --text-title: clamp(2rem, 5vw, 2.6rem); /* page h1 */
  --text-hero: clamp(2rem, 6.5vw, 3.1rem); /* the home h1 only */
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading: 1.55;
  --leading-loose: 1.65;
  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-mono: 0.04em;

  /* ---- Spacing sub-steps + the missing step ------------------------------ */
  --space-05: 0.125rem;
  --space-15: 0.375rem;
  --space-25: 0.625rem;
  --space-7: 2.5rem;

  /* ---- Extra radii -------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-control: 16px;

  /* ---- Recipe tokens ------------------------------------------------------ */
  --card-border: 1px solid var(--border);
  --card-shadow: var(--shadow-sm);
  --card-radius: var(--radius-lg);
  --btn-radius: var(--radius);
  --bar-h: 58px;
  --nav-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  --nav-blur: saturate(1.6) blur(12px);
  --nav-scrolled-shadow: var(--shadow-sm);
  --hover-wash: color-mix(in srgb, var(--accent) 7%, var(--surface));

  /* ---- Semantic (meaning only — never decoration) ------------------------ */
  --ok: var(--success);
  --danger: #c2443b;
  --warn: #9a6a12;
  --info: color-mix(in srgb, var(--text) 55%, var(--muted));
  --overlay: color-mix(in srgb, #0d0f12 45%, transparent);

  /* ---- Always-ink avatar tile (theme-independent brand chrome) ----------- */
  --avatar-ink: #0d0f12;
  --avatar-ink-fg: #f4f1ea;
  --avatar-ring: transparent;

  /* ---- Code blocks — always dark, like media chrome ---------------------- */
  --code-bg: #17181b;
  --code-border: rgba(255, 255, 255, 0.07);
  --code-fg: #b4b7bd;
  --code-key: #e06c75;
  --code-str: #98c379;
  --code-num: #d19a66;
  --code-cmd: #61afef;
  --code-com: #6b7078;

  /* ---- Z-index scale ------------------------------------------------------ */
  --z-nav: 50;
  --z-drawer: 60;
  --z-overlay: 70;
  --z-modal: 80;
  --z-toast: 90;

  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #0b0b0d;
  --surface: #141416;
  --surface-2: #1c1c20;
  --text: #f4f1ea;
  --muted: #98989e;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #f4f1ea;
  --accent-hover: #ffffff;
  --success: #34d399;
  --on-accent: #0b0b0d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  --danger: #f0857c;
  --warn: #d9ad55;
  --avatar-ink: #1b1c21;
  --avatar-ring: rgba(255, 255, 255, 0.08);
  color-scheme: dark;
}

/* The same dark values, applied by the OS preference — this site ships no
   script to set [data-theme]. Keep in step with the block above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0b0b0d;
    --surface: #141416;
    --surface-2: #1c1c20;
    --text: #f4f1ea;
    --muted: #98989e;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #f4f1ea;
    --accent-hover: #ffffff;
    --success: #34d399;
    --on-accent: #0b0b0d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
    --danger: #f0857c;
    --warn: #d9ad55;
    --avatar-ink: #1b1c21;
    --avatar-ring: rgba(255, 255, 255, 0.08);
    color-scheme: dark;
  }
}

/* ---- Site tokens (added after the generated block, per §2) --------------- */
:root {
  --site-max: 1100px; /* nav + footer width, as on fastsaver.io */
  --moved-h: 2.3125rem; /* the rebrand strip above the nav, one line */
  --quiet-max: 620px; /* the below-the-fold reference column */
}

/* =============================================================================
   Reset + base
   ========================================================================== */

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

* {
  margin: 0;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: var(--leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Links share the text colour and are set apart by a quiet underline. */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  transition:
    color var(--dur-fast) var(--ease),
    text-decoration-color var(--dur-fast) var(--ease);
}

a:hover {
  text-decoration-color: var(--text);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}

strong {
  font-weight: 600;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Anchored headings land below the sticky nav, not under it. */
[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}

.icon,
.glyph {
  display: inline-block;
  flex-shrink: 0;
}

.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;
}

.skip {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

.muted {
  color: var(--muted);
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Kicker — the quiet mono label above a heading. */
.kicker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
}

/* =============================================================================
   Primitives
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.72rem 1.15rem;
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.btn-secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--surface-2) 88%, var(--text));
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-ghost:hover {
  background: var(--surface-2);
  color: var(--text);
}

/* The one big button on the home stage — same recipe, a size up. */
.btn-lg {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-5);
}

.card {
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

/* An interactive card answers with an ink wash + ink edge — never a lift. */
.card-interactive {
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.card-interactive:hover {
  background: var(--hover-wash);
  border-color: var(--accent);
}

/* The one pill. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  padding: var(--space-1) var(--space-25);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid transparent;
  text-decoration: none;
}

.tag-sm {
  font-size: var(--text-2xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-05) var(--space-2);
}

.link-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.link-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-05) var(--space-3);
}

.link-list a {
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 500;
  text-decoration: none;
}

.link-list a:hover {
  text-decoration: underline;
}

.link-list span {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* =============================================================================
   Chrome — rebrand strip, nav, bottom tab bar, footer
   ========================================================================== */

/* The one thing every visitor to this domain needs to know. A flat
   --surface-2 strip (the only fill allowed at rest), full-strength link. */
.moved {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.moved p {
  max-width: var(--site-max);
  margin-inline: auto;
  padding: var(--space-25) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  text-align: center;
}

.moved strong {
  color: var(--text);
}

.moved a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  white-space: nowrap;
}

.moved-go-short {
  display: none;
}

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: var(--nav-bg);
  -webkit-backdrop-filter: var(--nav-blur);
  backdrop-filter: var(--nav-blur);
  border-bottom: 1px solid var(--border);
}

/* The hairline arrives once the page scrolls (§6.1) — done with a scroll-
   driven animation, since there is no script. Browsers without it keep the
   hairline on permanently, which is the safe half of the behaviour. */
@supports (animation-timeline: scroll()) {
  .nav {
    border-bottom-color: transparent;
    animation-name: nav-scrolled;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root);
    animation-range: 0 8px;
  }
}

@keyframes nav-scrolled {
  to {
    border-bottom-color: var(--border);
    box-shadow: var(--nav-scrolled-shadow);
  }
}

.nav-inner {
  height: var(--nav-h);
  max-width: var(--site-max);
  margin-inline: auto;
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.saver {
  color: var(--brand-deep);
}

/* §4.4 API lockup badge — ink text on --surface-2, never green. */
.lockup-badge {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 4px 7px;
  line-height: 1;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: var(--space-15) var(--space-25);
  border-radius: var(--radius-sm);
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.link:hover {
  color: var(--text);
  background: var(--surface-2);
}

.link:active {
  transform: scale(0.95);
}

.link[aria-current='page'] {
  color: var(--accent);
}

.link .ext {
  opacity: 0.6;
}

/* The one ink element on the nav: the way to the new home. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-15);
  margin-left: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  padding: var(--space-15) var(--space-3);
  border-radius: var(--radius-pill);
  transition:
    background-color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.nav-cta:hover {
  background: var(--accent-hover);
  color: var(--on-accent);
}

.nav-cta:active {
  transform: translateY(1px);
}

.botnav {
  display: none;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  transition:
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.tab:active {
  transform: scale(0.94);
}

.tab[aria-current='page'] {
  color: var(--accent);
}

.tab-label {
  font-size: var(--text-2xs);
  letter-spacing: 0.01em;
}

.footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-10);
  padding: var(--space-5) max(var(--space-5), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-links {
  max-width: var(--content-max);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-15) var(--space-5);
}

.footer-links a {
  color: var(--muted);
  font-size: var(--text-base);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.legal {
  max-width: 70ch;
  color: var(--muted);
  font-size: var(--text-xs);
}

.legal a {
  color: inherit;
}

@media (max-width: 600px) {
  .links,
  .moved-more,
  .moved-go {
    display: none;
  }

  .moved-go-short {
    display: inline;
  }

  .moved p {
    padding-inline: var(--space-4);
  }

  .botnav {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-nav);
    height: calc(var(--botnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(var(--space-1), env(safe-area-inset-left));
    padding-right: max(var(--space-1), env(safe-area-inset-right));
    background: var(--nav-bg);
    -webkit-backdrop-filter: var(--nav-blur);
    backdrop-filter: var(--nav-blur);
    border-top: 1px solid var(--border);
  }

  body {
    padding-bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom));
  }
}

/* Narrow phones: the lockup and the pill have to share ~320px. */
@media (max-width: 420px) {
  .lockup-badge {
    display: none;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .nav,
  .botnav {
    background: var(--bg);
  }
}

/* =============================================================================
   Content pages — one 760px reading column
   ========================================================================== */

.page {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-6) max(var(--space-5), env(safe-area-inset-left)) 0;
}

.page .crumbs ol {
  list-style: none;
  padding: 0;
  margin-bottom: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
}

.page .crumbs li {
  margin: 0;
}

.crumbs li + li::before {
  content: '/';
  margin-right: var(--space-2);
  opacity: 0.5;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--text);
}

.page-head .kicker {
  margin-bottom: var(--space-2);
}

.page-head h1 {
  font-size: var(--text-title);
}

.lede {
  margin-top: var(--space-4);
  max-width: 60ch;
  font-size: var(--text-xl);
  line-height: var(--leading);
  color: var(--muted);
}

.lede a,
.lede code {
  color: var(--text);
}

/* The run line: this page's endpoints on api.fastsaver.io, as quiet mono
   links — no fill, no border, no second ink element. */
.run {
  margin-top: var(--space-4);
  max-width: 64ch;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--muted);
}

.run a {
  color: var(--text);
  text-underline-offset: 3px;
  white-space: nowrap;
}

.checked {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
}

.page section {
  margin-top: var(--space-8);
}

.page h2 {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.page h3 {
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-2);
}

.page p,
.page ul,
.page ol {
  max-width: 64ch;
  margin-bottom: var(--space-4);
}

.page ul,
.page ol {
  padding-left: 1.25rem;
}

.page li {
  margin-bottom: var(--space-2);
}

.page li::marker {
  color: var(--muted);
}

:not(pre) > code {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: 0.85em;
  background: var(--surface-2);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

/* ---- Facts: a hairline grid of key → value ------------------------------ */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: var(--space-6);
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

/* Every cell draws its right and bottom edge; the -1px pulls the outermost
   ones under the card's own border, so only inner hairlines show. */
.facts > div {
  padding: var(--space-3) var(--space-4);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 -1px -1px 0;
}

.facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.facts dd {
  font-size: var(--text-md);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.facts dd code {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
}

.facts dd a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ---- Card grid (blog PostCard recipe) ----------------------------------- */
.grid {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.grid-2 {
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.grid .card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xl);
}

/* The kicker follows the title in the DOM (see cards() in ui.js) and is
   lifted back above it here. */
.grid .card .kicker {
  order: -1;
  font-size: var(--text-xs);
}

.grid .card p {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
}

.glyph {
  color: var(--muted);
}

.glyph-mono {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-xs);
}

.glyph-mono::before {
  content: attr(data-mono);
}

/* ---- Code: always dark (§5.10) ------------------------------------------ */
.code {
  margin: var(--space-5) 0;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--code-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: color-mix(in srgb, var(--code-fg) 70%, var(--code-bg));
}

.code-lang {
  flex-shrink: 0;
  text-transform: uppercase;
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}

.code pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
}

.code code {
  display: block;
  font-family: var(--font-mono);
  font-variant-ligatures: none;
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--code-fg);
  tab-size: 4;
}

.c-key,
.c-del {
  color: var(--code-key);
}

.c-str,
.c-add {
  color: var(--code-str);
}

.c-num,
.c-kw {
  color: var(--code-num);
}

.c-cmd {
  color: var(--code-cmd);
  font-weight: 600;
}

.c-com {
  color: var(--code-com);
  font-style: italic;
}

/* ---- Request → response window ----------------------------------------- */
.call {
  margin: var(--space-6) 0;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.call-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-25);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--code-border);
}

/* §7: the method is the one pill (.tag.tag-sm), mono uppercase, no per-method
   hue. On the always-dark window its ground is the dark chrome's own wash. */
.call-head .tag {
  background: rgba(255, 255, 255, 0.08);
  color: var(--code-fg);
  font-weight: 600;
}

.call-head .call-path {
  background: none;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--code-fg);
}

.call-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--code-fg) 70%, var(--code-bg));
}

.call .code {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.call .code + .code {
  border-top: 1px solid var(--code-border);
}

.call .code-lang {
  display: none;
}

.call .code-head {
  background: none;
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---- Tables: hairline rows, mono headers, no zebra (§8.4) --------------- */
.table-wrap {
  margin: var(--space-5) 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

th {
  text-align: left;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

td {
  vertical-align: top;
  padding: var(--space-25) var(--space-3) var(--space-25) 0;
  border-bottom: 1px solid var(--border);
}

th:last-child,
td:last-child {
  padding-right: 0;
}

td.num,
th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

td.mono {
  white-space: nowrap;
}

/* ---- FAQ — hairline rows with a mono +/− marker ------------------------- */
.faq {
  margin-top: var(--space-4);
}

.faq details {
  border-top: 1px solid var(--border);
}

.faq details:last-child {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-mono);
  color: var(--muted);
}

.faq details[open] summary::after {
  content: '\2212'; /* − */
}

.page .faq summary h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: 0;
}

.faq summary:hover h3 {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--text) 30%, transparent);
  text-underline-offset: 2px;
}

.faq-a {
  padding-bottom: var(--space-4);
  color: var(--muted);
  font-size: var(--text-md);
}

.page .faq-a p {
  max-width: 60ch;
  margin-bottom: var(--space-2);
}

.page .faq-a p:last-child {
  margin-bottom: 0;
}

.faq-a code,
.faq-a a,
.faq-a strong {
  color: var(--text);
}

/* ---- Closing CTA card ----------------------------------------------------- */
.page .cta {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  text-align: center;
}

.page .cta h2 {
  font-size: var(--text-2xl);
  margin: 0;
}

.page .cta p {
  margin: var(--space-2) auto 0;
  max-width: 52ch;
  color: var(--muted);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-25);
  margin-top: var(--space-5);
}

/* ---- Keep reading --------------------------------------------------------- */
.related {
  margin-top: var(--space-8);
}

.page .related h2 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  margin-bottom: var(--space-3);
}

.page .related ul {
  list-style: none;
  padding: 0;
  max-width: none;
  margin: 0;
}

.page .related li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-05) var(--space-3);
  margin: 0;
  padding: var(--space-25) 0;
  border-top: 1px solid var(--border);
}

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

.related a {
  font-weight: 600;
  text-decoration: none;
}

.related a:hover {
  text-decoration: underline;
}

.related span {
  color: var(--muted);
  font-size: var(--text-sm);
}

/* =============================================================================
   Home — the move, then the reference block
   ========================================================================== */

.stage-full {
  min-height: calc(100svh - var(--nav-h) - var(--moved-h) - env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-8);
  padding-inline: max(var(--space-5), env(safe-area-inset-left)) max(var(--space-5), env(safe-area-inset-right));
}

.stage {
  width: 100%;
  max-width: var(--tool-max);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stage .kicker {
  margin-bottom: var(--space-3);
}

.hero {
  font-size: var(--text-hero);
  letter-spacing: var(--tracking-tight);
}

.sub {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--text-lg);
  color: var(--muted);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-25);
  margin-top: var(--space-6);
}

/* The other doors — one card, hairline-separated rows (fastsaver.io home). */
.ways {
  width: 100%;
  margin-top: var(--space-7);
  overflow: hidden;
  text-align: left;
}

.way {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease);
}

.way + .way {
  border-top: 1px solid var(--border);
}

.way:hover {
  background: var(--hover-wash);
}

.way-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--avatar-ink);
  box-shadow: inset 0 0 0 1px var(--avatar-ring);
  color: var(--avatar-ink-fg);
}

.way-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-05);
  min-width: 0;
}

.way-title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text);
}

.way-sub {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--muted);
}

.way-arrow {
  margin-left: auto;
  display: inline-flex;
  color: var(--muted);
  transition:
    color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.way:hover .way-arrow {
  color: var(--text);
  transform: translateX(2px);
}

.stage-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* The Quiet block (§5.8): below-the-fold reference content, no chrome. */
.quiet {
  max-width: var(--quiet-max);
  margin-inline: auto;
  padding-inline: max(var(--space-5), env(safe-area-inset-left)) max(var(--space-5), env(safe-area-inset-right));
}

.quiet .block {
  margin-top: var(--space-8);
}

.quiet .block:first-child {
  margin-top: 0;
}

.quiet .block > h2 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

.quiet .longform p {
  max-width: 60ch;
  margin-bottom: var(--space-3);
  color: var(--muted);
  font-size: var(--text-md);
}

.quiet .longform strong,
.quiet .longform a {
  color: var(--text);
}

/* =============================================================================
   Error page
   ========================================================================== */

.err-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.err-code {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--accent);
}

.err-body h1 {
  font-size: var(--text-title);
}

.err-body .msg {
  max-width: 44ch;
  color: var(--muted);
}

.err-body .btn {
  margin-top: var(--space-3);
}

.err-body .link-list {
  margin-top: var(--space-6);
  align-items: center;
}

/* =============================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* The scroll-driven hairline is motion too: pin it on instead. */
  .nav {
    animation: none !important;
    border-bottom-color: var(--border);
  }
}