/* ==========================================================================
   Verified Nim Skills site — design system (revision 2: restrained)
   One file, no build step. Sections:
   1 tokens  2 base  3 layout
   4 components: header/nav, footer, buttons, badges, hero, cards, steps,
     cta, figure, terminal, diagnostics, code blocks, callouts, tables,
     plans, prose/article, toc, footnotes, posts list, faq
   5 utilities  6 page: pricing  7 print
   Class reference: STYLEGUIDE.html

   Colour rules (see internal/design-research.md):
   - Neutral grey scale does ~95% of the work: text, surfaces, borders.
   - ONE accent (--accent, blue): primary button, links, focus ring,
     the featured plan / "us" column. Nothing else (nav state is ink).
   - Status colours (--ok/--warn/--err) are desaturated and appear only
     where they carry meaning: diagnostics, terminal output, badges,
     yes/no marks. They are never decoration.
   - Code, terminals and diagnostics share one surface (--code-*) and
     follow the page theme.
   ========================================================================== */

/* 1. Tokens -------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* Neutral scale (light). Text pairs verified >= 4.5:1, see STYLEGUIDE */
  --gray-0: #ffffff;   /* page */
  --gray-1: #f6f6f7;   /* subtle surface */
  --gray-2: #ededef;   /* hover / caption bar */
  --gray-3: #e2e2e5;   /* hairline */
  --gray-4: #c9c9cf;   /* strong border */
  --gray-5: #8b8b94;   /* decorative glyphs only (not text) */
  --gray-6: #5f5f68;   /* secondary text: 6.3:1 on page */
  --gray-7: #18181b;   /* primary text: 17.7:1 on page */

  --bg: var(--gray-0);
  --surface: var(--gray-1);
  --surface-2: var(--gray-2);
  --fg: var(--gray-7);
  --muted: var(--gray-6);
  --faint: var(--gray-5);
  --border: var(--gray-3);
  --border-strong: var(--gray-4);

  /* The one accent */
  --accent: #3451d1;          /* 6.5:1 on --bg, 5.9:1 on --surface */
  --accent-hover: #2a43b4;
  --accent-fg: #ffffff;       /* text on --accent: 6.5:1 */
  --accent-soft: color-mix(in srgb, var(--accent) 7%, var(--bg));

  /* Status: desaturated, meaning only */
  --ok: #3a7650;              /* 5.4:1 on --bg */
  --err: #a5453b;             /* 6.0:1 */
  --warn: #8a6516;            /* 5.3:1 */
  --info: var(--muted);       /* notes are neutral, not blue */
  --ok-soft: color-mix(in srgb, var(--ok) 8%, var(--bg));
  --err-soft: color-mix(in srgb, var(--err) 8%, var(--bg));
  --warn-soft: color-mix(in srgb, var(--warn) 9%, var(--bg));

  /* Code / terminal / diagnostics: one surface, follows the theme */
  --code-bg: var(--surface);
  --code-bar: var(--surface-2);
  --code-fg: var(--fg);
  --code-border: var(--border);
  --code-dim: var(--muted);
  --code-str: #3d5f7a;        /* desaturated slate, 6.0:1 on --code-bg */

  /* Type: system stacks, one scale (~1.2 ratio, fluid at the top) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --step--2: 0.8125rem;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.3125rem;
  --step-3: clamp(1.4375rem, 1.25rem + 0.8vw, 1.75rem);
  --step-4: clamp(1.75rem, 1.4rem + 1.6vw, 2.375rem);
  --step-5: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);
  --leading: 1.6;
  --leading-tight: 1.15;
  --weight-head: 600;

  /* Space: 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  /* Shape: three radii by hierarchy */
  --radius-sm: 4px;   /* inline code, kbd, badges */
  --radius: 6px;      /* buttons, code blocks, callouts, tables */
  --radius-lg: 10px;  /* cards, plans, CTA panel */

  --measure: 68ch;
  --wrap: 72rem;
  --header-h: 3.75rem;
}

/* Dark values on screen only, so printing always uses the light tokens. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --gray-0: #111113;
    --gray-1: #18181b;
    --gray-2: #202024;
    --gray-3: #2a2a2f;
    --gray-4: #3f3f46;
    --gray-5: #6e6e78;
    --gray-6: #a1a1aa;  /* 7.4:1 on page */
    --gray-7: #ededef;  /* 16.4:1 on page */

    --accent: #8fa3ff;  /* 8.0:1 on page */
    --accent-hover: #a7b6ff;
    --accent-fg: #111113;
    --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--bg));

    --ok: #86bd97;
    --err: #e08a80;
    --warn: #cfb06a;
    --ok-soft: color-mix(in srgb, var(--ok) 10%, var(--bg));
    --err-soft: color-mix(in srgb, var(--err) 10%, var(--bg));
    --warn-soft: color-mix(in srgb, var(--warn) 10%, var(--bg));

    --code-str: #a9bfd3;
  }
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--step-0)/var(--leading) var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: var(--weight-head); letter-spacing: -0.015em; margin: 0 0 var(--space-4); text-wrap: balance; color: var(--fg); }
h1 { font-size: var(--step-5); letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); letter-spacing: -0.025em; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p, ul, ol, dl, figure, blockquote, pre, table { margin: 0 0 var(--space-4); }
a { color: var(--accent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:where(a, summary):focus-visible { border-radius: 2px; } /* rounds the ring on inline links only */
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: color-mix(in srgb, var(--accent) 25%, var(--bg)); color: var(--fg); }

/* Code: inline chips and plain blocks */
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
kbd { border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 0 0.35em; background: var(--surface); }
:not(pre) > code { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.08em 0.35em; font-size: 0.875em; overflow-wrap: anywhere; }
.section--alt :not(pre) > code, .card :not(pre) > code { background: var(--surface-2); }
pre { background: var(--code-bg); color: var(--code-fg); border: 1px solid var(--code-border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); overflow-x: auto; line-height: 1.6; tab-size: 2; }
pre code { font-size: var(--step--1); }

/* Tables */
table { border-collapse: collapse; width: 100%; font-size: var(--step--1); }
caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; color: var(--fg); }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
thead th { font: 600 var(--step--2)/1.4 var(--font-sans); color: var(--muted); background: var(--surface); white-space: nowrap; }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--fg); color: var(--bg); padding: var(--space-2) var(--space-4); border-radius: var(--radius); }
.skip-link:focus { top: var(--space-2); }

/* 3. Layout -------------------------------------------------------------- */
/* Breakpoints: 40rem (small), 48rem (tablet), 60rem (two columns), 68rem (article + toc) */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-4); }
.wrap--narrow { max-width: calc(var(--measure) + 2 * var(--space-4)); }
@media (min-width: 48rem) { .wrap { padding-inline: var(--space-6); } .wrap--narrow { max-width: calc(var(--measure) + 2 * var(--space-6)); } }

.section { padding-block: var(--space-7); border-top: 1px solid var(--border); }
.section:first-child, .hero + .section { border-top: 0; }
.section--alt { background: var(--surface); }
@media (min-width: 48rem) { .section { padding-block: var(--space-8); } }
.section__head { max-width: var(--measure); margin-bottom: var(--space-6); }
.section__head p { color: var(--muted); font-size: var(--step-1); }

.eyebrow { display: block; font: 500 var(--step--1)/1.4 var(--font-mono); color: var(--muted); text-transform: lowercase; margin-bottom: var(--space-3); }

.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) and (max-width: 47.99rem) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.split { display: grid; gap: var(--space-6); align-items: start; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } }

/* Article: prose column + sticky toc on wide screens */
.article-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 68rem) {
  .article-layout { grid-template-columns: minmax(0, var(--measure)) 15rem; justify-content: space-between; }
  .article-layout .toc { order: 2; position: sticky; top: calc(var(--header-h) + var(--space-5)); align-self: start; max-height: calc(100vh - var(--header-h) - 2 * var(--space-5)); overflow-y: auto; border: 0; background: none; padding: 0 0 0 var(--space-4); border-left: 1px solid var(--border); border-radius: 0; }
}

/* 4. Components ---------------------------------------------------------- */

/* Header / nav */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-5); min-height: var(--header-h); padding-block: var(--space-2); }

/* Brand: text wordmark "Verified Nim Skills" leads; the NYX mark is secondary */
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--fg); text-decoration: none; }
.brand__sub { order: -1; font: 650 var(--step-0)/1 var(--font-sans); letter-spacing: -0.01em; color: var(--fg); white-space: nowrap; }
.brand img { display: block; height: 16px; width: auto; opacity: 0.8; padding-left: var(--space-3); border-left: 1px solid var(--border-strong); box-sizing: content-box; }
.brand:hover img { opacity: 1; }

.nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); list-style: none; margin: 0; padding: 0; align-items: center; }
.nav a { color: var(--muted); text-decoration: none; font-size: var(--step--1); font-weight: 500; padding: var(--space-2) 0; display: inline-block; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--fg); }
/* The nav button is a .btn--primary; restore what .nav a overrides */
.nav .btn { display: inline-flex; min-height: 2.25rem; padding: 0.4rem 0.85rem; }
.nav .btn, .nav .btn:hover { color: var(--accent-fg); }
.nav .btn[aria-current="page"] { box-shadow: none; }
@media (max-width: 40rem) {
  .site-header { position: static; }
  .nav { width: 100%; }
  .nav ul { gap: var(--space-1) var(--space-4); }
}

/* Footer */
.site-footer { margin-top: var(--space-8); border-top: 1px solid var(--border); background: var(--surface); padding-block: var(--space-7) var(--space-6); font-size: var(--step--1); color: var(--muted); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-bottom: var(--space-6); }
.footer-grid h2 { font: 600 var(--step--1)/1.4 var(--font-sans); color: var(--fg); margin-bottom: var(--space-3); letter-spacing: 0; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li + li { margin-top: var(--space-2); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--fg); text-decoration: underline; }
.site-footer__legal { border-top: 1px solid var(--border); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); justify-content: space-between; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0.6rem 1.15rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: var(--fg);
  font: 600 var(--step--1)/1.2 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
.btn:hover { border-color: var(--faint); background: var(--surface); text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-fg); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--fg); padding-inline: var(--space-2); }
.btn--ghost:hover { background: transparent; border-color: transparent; text-decoration: underline; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Badges: neutral chip; status variants colour the dot only */
.badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font: 500 var(--step--2)/1 var(--font-mono); white-space: nowrap;
  padding: 0.35em 0.6em; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--muted); background: var(--surface);
  vertical-align: middle;
}
.badge--ok, .badge--warn, .badge--err, .badge--accent { color: var(--fg); }
.badge--ok::before, .badge--warn::before, .badge--err::before, .badge--accent::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; flex: none; }
.badge--ok::before { background: var(--ok); }
.badge--warn::before { background: var(--warn); }
.badge--err::before { background: var(--err); }
.badge--accent::before { background: var(--accent); }

/* Hero */
.hero { padding-block: var(--space-7); }
@media (min-width: 48rem) { .hero { padding-block: var(--space-8); } }
.hero__title { max-width: 20ch; }
.hero__lede { font-size: var(--step-1); line-height: 1.55; color: var(--muted); max-width: 54ch; margin-bottom: var(--space-6); }
@media (min-width: 48rem) { .hero__lede { font-size: var(--step-2); line-height: 1.5; } }
.hero__actions { margin-bottom: var(--space-5); }
.hero__note { font: var(--step--1)/1.5 var(--font-sans); color: var(--muted); }
/* Compact hero (pricing): must follow the .hero media rule above */
.hero--compact { padding-block: var(--space-7) var(--space-5); }
.hero--compact .hero__title { font-size: var(--step-4); max-width: 26ch; margin-bottom: var(--space-3); }
.hero--compact .hero__lede { font-size: var(--step-1); margin-bottom: 0; }
.hero--compact + .section { padding-top: 0; }

/* Cards */
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); background: var(--bg); }
.card > :last-child { margin-bottom: 0; }
.card__title { font-size: var(--step-1); margin-bottom: var(--space-2); }
.card__kicker { font: 500 var(--step--2)/1.4 var(--font-mono); color: var(--muted); margin-bottom: var(--space-3); display: block; }
.card p { color: var(--muted); }
.card--link { text-decoration: none; color: inherit; display: block; transition: border-color .12s; }
.card--link:hover { border-color: var(--border-strong); }
.card--link:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Steps: numbered sequence on a vertical rule */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0 0 var(--space-5); }
.steps > li { counter-increment: step; position: relative; padding: 0 0 var(--space-6) 2.75rem; border-left: 1px solid var(--border); margin-left: 0.875rem; }
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: -0.875rem; top: -0.05rem;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 var(--step--2)/1 var(--font-mono);
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--fg);
}
.section--alt .steps > li::before { background: var(--surface); }
.steps h3 { font-size: var(--step-1); margin-bottom: var(--space-2); padding-top: 0.1rem; }
.steps p { color: var(--muted); }

/* CTA panel */
.cta { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); background: var(--surface); display: grid; gap: var(--space-4); }
.section--alt .cta { background: var(--bg); }
@media (min-width: 48rem) { .cta { grid-template-columns: 1fr auto; align-items: center; padding: var(--space-6) var(--space-7); } }
.cta h2 { font-size: var(--step-3); margin-bottom: var(--space-2); }
.cta p { color: var(--muted); margin: 0; }

/* Figure */
.figure { margin: 0 0 var(--space-5); }
.figure img { display: block; border-radius: var(--radius-lg); border: 1px solid var(--border); }
.figure figcaption { font-size: var(--step--1); color: var(--muted); margin-top: var(--space-2); }

/* Terminal: same surface as code blocks; follows the page theme */
.terminal {
  background: var(--code-bg); color: var(--code-fg);
  border: 1px solid var(--code-border); border-radius: var(--radius);
  font: var(--step--1)/1.6 var(--font-mono); overflow: hidden; margin: 0 0 var(--space-5);
}
.terminal__bar { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--code-border); background: var(--code-bar); color: var(--code-dim); font-size: var(--step--2); }
/* A <pre> inside a framed component drops its own frame */
.terminal pre, .diag__body, .diag__out-line { margin: 0; overflow-x: auto; background: none; border: 0; border-radius: 0; font-size: inherit; }
.terminal pre { padding: var(--space-3) var(--space-4); color: inherit; }
.terminal code, .diag__out-line code { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.t-prompt::before { content: "$ "; color: var(--code-dim); user-select: none; }
.t-dim, .t-info { color: var(--code-dim); }
.t-ok { color: var(--ok); }
.t-err { color: var(--err); }
.t-warn { color: var(--warn); }
.t-accent { color: var(--fg); font-weight: 700; }
.t-bold { font-weight: 700; }

/* .diag: a compiler-style diagnostic. Variants: --error --ok --warn --note
   Status colour appears on the left rule, the label and the highlight only.
   --note uses the neutral defaults. */
.diag {
  --diag-c: var(--muted); --diag-soft: var(--surface-2);
  border: 1px solid var(--code-border); border-left: 3px solid var(--diag-c);
  border-radius: var(--radius); background: var(--code-bg); color: var(--code-fg);
  font: var(--step--1)/1.55 var(--font-mono); margin: 0 0 var(--space-5); overflow: hidden;
}
.diag--error { --diag-c: var(--err); --diag-soft: var(--err-soft); }
.diag--ok    { --diag-c: var(--ok);  --diag-soft: var(--ok-soft); }
.diag--warn  { --diag-c: var(--warn); --diag-soft: var(--warn-soft); }
.diag__head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; padding: var(--space-2) var(--space-4); background: var(--code-bar); border-bottom: 1px solid var(--code-border); }
.diag__label { font-weight: 700; color: var(--diag-c); }
.diag--error .diag__label::before { content: "Error: "; }
.diag--ok    .diag__label::before { content: ""; display: inline-block; width: 0.32em; height: 0.62em; margin: 0 0.75em 0.2em 0.15em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle; }
.diag--warn  .diag__label::before { content: "Warning: "; }
.diag--note  .diag__label::before { content: "Note: "; }
.diag__msg { color: var(--fg); font-weight: 600; }
.diag__loc { color: var(--muted); margin-left: auto; font-size: var(--step--2); }
.diag__loc a { color: inherit; }
.diag__loc a:hover { color: var(--accent); }
.diag__body { padding: var(--space-3) var(--space-4); color: var(--code-fg); }
.diag__body .hl { background: var(--diag-soft); color: var(--diag-c); font-weight: 700; box-shadow: 0 0 0 2px var(--diag-soft); border-radius: 2px; }
.diag__body .caret { color: var(--diag-c); font-weight: 700; }
.diag__note { padding: var(--space-3) var(--space-4); color: var(--muted); border-top: 1px solid var(--code-border); background: var(--bg); font-family: var(--font-sans); font-size: var(--step--1); line-height: 1.55; }
.diag__note > :last-child { margin-bottom: 0; }
.diag-pair { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.diag-pair > .diag { margin: 0; }
@media (min-width: 60rem) { .diag-pair--wide { grid-template-columns: 1fr 1fr; } }
/* .diag--hero: the home-page crash card. Editor-like and neutral; the crash
   output line is the only status colour (a small dot and the line itself). */
.diag--hero { border-left: 1px solid var(--code-border); }
.diag--hero .diag__head { justify-content: space-between; align-items: center; }
.diag--hero .diag__loc { margin-left: 0; font-family: var(--font-sans); }
.diag__file { color: var(--code-dim); font-size: var(--step--2); }
.diag__out { padding: var(--space-2) var(--space-4) var(--space-3); border-top: 1px dashed var(--code-border); }
.diag__out-label { display: flex; align-items: center; gap: var(--space-2); color: var(--code-dim); font-size: var(--step--2); }
.diag__out-label::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 1px; border-radius: 50%; background: var(--err); }
.diag__out-line { padding: 0; color: var(--err); white-space: pre-wrap; overflow-wrap: anywhere; }
.diag__out-line .nowrap { white-space: nowrap; }

/* Code block with caption bar */
.code-block { margin: 0 0 var(--space-5); }
.code-block figcaption { display: flex; justify-content: space-between; gap: var(--space-3); font: var(--step--2)/1.4 var(--font-mono); color: var(--code-dim); border: 1px solid var(--code-border); border-radius: var(--radius) var(--radius) 0 0; padding: var(--space-2) var(--space-4); background: var(--code-bar); }
.code-block figcaption + pre { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; margin: 0; }
/* Minimal syntax tokens: weight and grey do most of the work */
.tok-k { color: var(--fg); font-weight: 700; }
.tok-s, .tok-n { color: var(--code-str); }
.tok-c { color: var(--muted); font-style: italic; }
.del-line, .add-line { display: inline-block; width: 100%; }
.del-line { background: var(--err-soft); box-shadow: inset 2px 0 0 var(--err); }
.add-line { background: var(--ok-soft); box-shadow: inset 2px 0 0 var(--ok); }

/* Callouts: neutral by default. Only --warn and --err tint the rule,
   since they carry a caution. --note uses the neutral default. */
.callout { --c: var(--border-strong); border: 1px solid var(--border); border-left: 3px solid var(--c); background: var(--surface); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-5); }
.grid + .callout { margin-top: var(--space-6); }
.section--alt .callout { background: var(--bg); }
.callout > :last-child { margin-bottom: 0; }
.callout__title { display: block; font: 600 var(--step--1)/1.4 var(--font-sans); color: var(--fg); margin-bottom: var(--space-1); }
.callout--ok   { --c: var(--ok); }
.callout--warn { --c: var(--warn); }
.callout--err  { --c: var(--err); }

/* Placeholder marker: visible dashed box for unfinished content */
.placeholder { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-4); color: var(--muted); font: var(--step--1)/1.5 var(--font-mono); background: repeating-linear-gradient(-45deg, transparent 0 8px, var(--surface) 8px 9px); }
.placeholder::before { content: "TODO "; font-weight: 700; color: var(--warn); }

/* Tables: scroll wrapper and comparison */
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.table-wrap > table { margin: 0; }
.compare { min-width: 40rem; }
.compare th:first-child { width: 28%; }
.compare .is-us { background: var(--accent-soft); }
.compare thead .is-us { color: var(--fg); box-shadow: inset 0 2px 0 var(--accent); }
/* Marks: the glyph carries the status colour, the words stay neutral */
.yes, .no, .partial { font-weight: 500; }
.yes { color: var(--fg); }
.yes::before { content: ""; display: inline-block; width: 0.32em; height: 0.62em; margin: 0 0.6em 0.18em 0.1em; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); vertical-align: middle; }
.no { color: var(--muted); }
.no::before { content: "\00d7\00a0"; color: var(--err); font-weight: 700; }
.partial { color: var(--muted); }
.partial::before { content: "~\00a0"; color: var(--faint); font-family: var(--font-mono); font-weight: 700; }

/* Plans. .pricing--balanced: cards share rows through subgrid on wide
   screens, so bands, prices, lists, notices and buttons line up across plans.
   Rows: band / head / price / list / notice / actions. */
.pricing { display: grid; gap: var(--space-5); grid-template-columns: 1fr; margin-bottom: var(--space-5); }
@media (min-width: 48rem) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; } }
.plan { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); background: var(--bg); display: flex; flex-direction: column; }
.plan--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan__name { font: 600 var(--step-1)/1.3 var(--font-sans); margin-bottom: var(--space-1); }
.plan__for { color: var(--muted); font-size: var(--step--1); margin-bottom: var(--space-4); }
.plan__price { font-size: var(--step-4); font-weight: 650; letter-spacing: -0.03em; line-height: 1; margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.plan__per { font-size: var(--step--1); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan__list { list-style: none; padding: 0; margin: 0 0 var(--space-5); font-size: var(--step--1); }
.plan__cta { margin-top: auto; padding-top: var(--space-2); }
.plan__fine { font-size: var(--step--2); color: var(--muted); margin: var(--space-3) 0 0; }

.pricing--balanced { max-width: 60rem; margin-bottom: var(--space-4); }
.pricing--balanced .plan { padding: 0 var(--space-5) var(--space-5); overflow: hidden; }
@media (min-width: 48rem) {
  .pricing--balanced { grid-template-rows: repeat(6, auto); row-gap: 0; }
  .pricing--balanced .plan { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
}
.pricing--balanced .plan__price { margin-bottom: var(--space-2); }
.pricing--balanced .plan__list { margin-bottom: var(--space-4); }
.plan__band { margin: 0 calc(-1 * var(--space-5)) var(--space-5); padding: var(--space-3) var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.plan__band strong { display: block; color: var(--fg); font-weight: 600; }
.plan__band--offer { background: var(--accent-soft); border-bottom-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.plan__band--offer strong { font-size: var(--step-0); }
.plan__alt { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-4); }
.plan__alt strong { color: var(--fg); font-weight: 600; }
.plan__notice { align-self: end; font-size: var(--step--2); line-height: 1.5; color: var(--muted); margin: 0 0 var(--space-3); }
.plan__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.plan__actions > .btn { flex: 1 1 auto; }
.plan__actions > .btn--primary { flex-grow: 2; }

/* Checked lists: plan features and the "everything included" list */
.included-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: 0 var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .included-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan__list li, .included-list li { position: relative; padding: var(--space-2) 0 var(--space-2) 1.5rem; border-top: 1px solid var(--border); }
.plan__list li::before, .included-list li::before { content: ""; position: absolute; left: 0.2rem; top: 0.95em; width: 0.3em; height: 0.6em; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.included-list li::before { border-color: var(--fg); }
.included-next { font-size: var(--step--1); color: var(--muted); margin-bottom: var(--space-3); }
.included-next strong { color: var(--fg); font-weight: 600; }

/* Billing comparison table */
.billing-table td { white-space: nowrap; }
.billing-table tbody th { width: 100%; }
.billing-table .billing-table__sub { display: block; font-weight: 400; color: var(--muted); font-size: var(--step--2); white-space: normal; }
.billing-table .is-offer > * { background: var(--accent-soft); }
.billing-table .is-offer > th:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* Prose / article */
.prose { max-width: var(--measure); font-size: var(--step-1); line-height: 1.7; }
.prose h2 { font-size: var(--step-3); margin-top: var(--space-7); }
.prose h3 { font-size: var(--step-2); margin-top: var(--space-6); }
.prose h2 + *, .prose h3 + * { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--faint); }
.prose blockquote { border-left: 3px solid var(--border-strong); padding-left: var(--space-5); color: var(--muted); margin-inline: 0; }
.prose pre { font-size: var(--step--1); }
.prose .callout { font-size: var(--step-0); }
.prose img { border-radius: var(--radius); }
.prose .cta h2 { margin-top: 0; font-size: var(--step-2); }
.prose .cta p { font-size: var(--step-0); }
.next-steps { margin-top: var(--space-7); }
.lede { font-size: var(--step-2); line-height: 1.5; color: var(--muted); }

.article-header { padding-block: var(--space-7) var(--space-5); }
.article-header h1 { font-size: var(--step-4); max-width: 24ch; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; font: var(--step--1)/1.5 var(--font-sans); color: var(--muted); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.post-meta li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--faint); vertical-align: middle; margin-right: var(--space-3); }

/* TOC (layout on wide screens: see .article-layout) */
.toc { font-size: var(--step--1); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }
.toc h2 { font: 600 var(--step--2)/1.4 var(--font-sans); color: var(--fg); margin: 0 0 var(--space-3); letter-spacing: 0; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc ol ol { padding-left: var(--space-4); margin-top: var(--space-1); }
.toc li { margin: 0; }
.toc li + li { margin-top: var(--space-1); }
.toc a { color: var(--muted); text-decoration: none; display: block; padding: 0.15rem 0; }
.toc a:hover { color: var(--fg); }

/* Footnotes */
.fnref { font-size: 0.75em; line-height: 0; vertical-align: super; }
.fnref a { text-decoration: none; font-family: var(--font-mono); padding: 0 0.15em; }
.fnref a::before { content: "["; }
.fnref a::after { content: "]"; }
.footnotes { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--muted); }
.footnotes h2 { font-size: var(--step-0); margin: 0 0 var(--space-3); color: var(--fg); }
.footnotes ol { padding-left: 1.4em; }
.footnotes li:target { background: var(--accent-soft); outline: 1px solid var(--accent); border-radius: 2px; }
.fn-back { text-decoration: none; margin-left: 0.25em; }

/* Posts list */
.post-list { list-style: none; padding: 0; margin: 0; max-width: var(--measure); }
.post-list__item { padding-block: var(--space-5); border-top: 1px solid var(--border); }
.post-list__item:last-child { border-bottom: 1px solid var(--border); }
.post-list__title { font-size: var(--step-2); margin-bottom: var(--space-2); }
.post-list__title a { color: var(--fg); text-decoration: none; }
.post-list__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.post-list__summary { color: var(--muted); margin-bottom: var(--space-3); }
.post-list .post-meta { margin: 0; }

/* FAQ */
.faq { max-width: var(--measure); border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-4) 0; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--font-mono); color: var(--muted); width: 1ch; flex: none; }
.faq details[open] summary::before { content: "\2212"; }
.faq summary:hover::before { color: var(--fg); }
.faq .faq__answer { padding: 0 0 var(--space-4) calc(1ch + var(--space-3)); color: var(--muted); }
.faq .faq__answer > :last-child { margin-bottom: 0; }

/* 5. Utilities ----------------------------------------------------------- */
/* !important is deliberate here: a utility must beat component margins. */
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
.small { font-size: var(--step--1); }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-6 { margin-top: var(--space-6); }
.measure { max-width: var(--measure); }
.list-plain { list-style: none; padding: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); vertical-align: middle; }

/* 6. Page: pricing ------------------------------------------------------- */
@media (min-width: 60rem) { .pricing-page .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pricing-subhead { font-size: var(--step-3); margin-bottom: var(--space-5); }
.pricing-note { font-size: var(--step--1); color: var(--muted); max-width: 60rem; margin: 0; }

/* 7. Print --------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .toc, .cta, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  a { color: inherit; }
}