/* ============================================================
 * AGEWARDEN - 𝔐𝔞𝔫𝔴ë 𝔇𝔢𝔰𝔦𝔤𝔫 𝔖𝔶𝔰𝔱𝔢𝔪
 * ------------------------------------------------------------
 *
 * One stylesheet. Every page links it and adds almost nothing.
 *
 * Principles, in order:
 *   1. Monochrome. Black, white, and the greys between them.
 *   2. Sharp. No rounded corners, no shadows, no gradients.
 *   3. Structural. Hairline rules do the work that boxes would.
 *   4. Mono for machine-facing text: labels, keys, code, data.
 *   5. One scale. One width. One rhythm. Reused, never re-invented.
 *
 * Everything here is driven by the tokens in :root. To restyle
 * the site, change a token - not a rule. Pages should not carry
 * their own :root, header, footer, or base CSS; it lives here.
 * ------------------------------------------------------------
 * Contents:
 *   1. Tokens            8. Code
 *   2. Reset + base      9. Tables
 *   3. Layout           10. Callouts + notices
 *   4. Header           11. Forms
 *   5. Footer           12. Card
 *   6. Typography       13. Badge
 *   7. Buttons          14. Components (key disclosure, panels,
 *                           steps, Q&A, status) - shared/JS-bound
 *                       15. Responsive
 * ============================================================ */

:root {
    /* ── Ink ─────────────────────────────────────────────── */
    --color-bg:            #1a1a1a;   /* page */
    --color-bg-alt:        #121212;   /* alternating band, one shade deeper */
    --color-surface:       #1c1c1c;   /* raised panels, inputs, code */
    --color-surface-sunk:  #161616;   /* inset within a surface */
    --color-fg:            #fff;
    --color-muted:         #999;      /* secondary text */
    --color-faint:         #555;      /* tertiary: hints, placeholders */
    --color-rule:          #333;      /* hairline divider */
    --color-rule-strong:   #444;      /* divider that needs to read */

    /* ── Signal (used sparingly; mostly app surfaces) ────── */
    --color-ok:            #6fcf7f;
    --color-err:           #e66;
    --color-warn:          #d8c79a;
    --color-warn-bg:       #2a2415;
    --color-warn-border:   #7a5a1f;
    --color-err-border:    #6b3a3a;
    --color-accent:        #721a85;   /* AGEWARDEN purple - law database only */

    /* ── Type ────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

    --fs-display:  clamp(40px, 9vw, 96px);   /* brand wordmark hero */
    --fs-h1:       clamp(32px, 5vw, 52px);   /* page title */
    --fs-statement:clamp(24px, 4vw, 40px);   /* large editorial line */
    --fs-h3:       19px;
    --fs-body:     16px;
    --fs-sm:       14px;
    --fs-label:    12px;                      /* mono eyebrows / labels */

    /* ── Space (single scale - use these, not magic numbers) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    /* ── Geometry ────────────────────────────────────────── */
    --w-page:  1080px;                         /* max canvas width */
    --w-text:  44rem;                          /* prose measure (~70ch) */
    --gutter:  max(24px, 5vw);                 /* page side padding */
    --band-y:  clamp(64px, 10vw, 120px);       /* full-bleed band rhythm */
    --header-h: 56px;
    --radius:  0;                              /* brutalist: square */
    --border:  1px solid var(--color-rule);
}

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

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

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

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    background: var(--color-bg);
    color: var(--color-fg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--color-fg); color: var(--color-bg); }

:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }

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

[hidden] { display: none !important; }

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

/* ============================================================
 * Layout
 * ------------------------------------------------------------
 * Two primitives compose every page:
 *   .band  full-bleed horizontal strip; owns vertical rhythm
 *          and optional alternating background. Wrap content
 *          in .wrap inside it.
 *   .wrap  the canvas: caps width and centres, sets gutters.
 *
 * A simple document page is one .wrap. An editorial page is a
 * stack of <section class="band"><div class="wrap">…</div></section>.
 * ============================================================ */

.wrap {
    width: 100%;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Narrow variant: a centered reading-width column (used by the welcome/onboarding
   page, where keys, embed codes, and steps read better as one centered column).
   Content box resolves to --w-text regardless of the responsive gutter. */
.wrap--narrow { max-width: calc(var(--w-text) + var(--gutter) * 2); }

/* Standalone document pages: a single .wrap that also owns the
 * top/bottom breathing room. */
main.wrap { padding-block: var(--space-7) var(--space-8); }

.band { padding-block: var(--band-y); }
.band--alt { background: var(--color-bg-alt); }
.band--flush { padding-block: var(--space-6); }

/* Policy / legal hero: a title band followed by a document band. Two
 * stacked bands plus the doc-hero spacing left a ~200px gap under the
 * title; these tighten it to one clean step (paired with .hero--legal). */
.band--policy { padding-block: var(--space-7) var(--space-5); }
.band--policy + .band { margin-top: 0; padding-top: var(--space-5); }

/* Vertical rhythm between sections inside a single .wrap. */
section + section { margin-top: var(--space-7); }

/* Text-width helper: clamp any block to the reading measure. */
.measure { max-width: var(--w-text); }

/* ============================================================
 * Header - sticky, hard-ruled bar (no blur, no float)
 * ============================================================ */

.header {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    height: var(--header-h);
    padding-inline: var(--gutter);
    background: var(--color-bg);
    border-bottom: var(--border);
}
.header__logo {
    display: flex; align-items: center; gap: 8px;
    font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.06em;
    color: var(--color-fg);
}
.header__logo:hover { text-decoration: none; }
.header__mark { flex-shrink: 0; }
.header__name { line-height: 1; }
.header nav { display: flex; align-items: center; flex-wrap: nowrap; }
.header nav a {
    margin-left: var(--space-5);
    font-size: var(--fs-sm); color: var(--color-muted); white-space: nowrap;
}
.header nav a:hover,
.header nav a.active { color: var(--color-fg); text-decoration: none; }

/* ============================================================
 * Footer - hard top rule, wraps on small screens
 * ============================================================ */

.footer {
    max-width: var(--w-page); margin-inline: auto;
    padding: var(--space-4) var(--gutter) var(--space-5);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: var(--space-3);
    border-top: var(--border);
    font-size: 13px; color: var(--color-muted);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer nav a { color: var(--color-muted); white-space: nowrap; }
.footer nav a:hover { color: var(--color-fg); }

/* ============================================================
 * Typography
 * ------------------------------------------------------------
 * Eyebrows and section labels are MONO + uppercase: the
 * machine-facing voice. Headlines are tight, bold, sans.
 * ============================================================ */

/* Mono eyebrow / kicker / section label. .eyebrow, .lead, .h2
 * are the same gesture at slightly different jobs. */
.eyebrow, .lead, .h2 {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-muted);
}
.eyebrow { margin-bottom: var(--space-3); }
.h2 { font-weight: 400; margin-bottom: var(--space-3); }
.lead { margin-bottom: var(--space-3); }

/* Page hero - the document-page header block. */
.hero { padding-bottom: var(--space-5); border-bottom: var(--border); margin-bottom: var(--space-5); }
.hero__eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--color-muted); margin-bottom: var(--space-3);
}
.hero__h1 {
    font-size: var(--fs-h1); font-weight: 700;
    line-height: 1.05; letter-spacing: -0.02em;
    margin-bottom: var(--space-3);
}
.hero__sub {
    font-size: clamp(16px, 1.7vw, 18px); color: var(--color-muted);
    max-width: var(--w-text);
}
.hero__sub strong { color: var(--color-fg); font-weight: 600; }

/* Brand wordmark hero - the landing page only. Resets the doc-hero's
 * bottom rule/spacing but keeps the .wrap gutter (so content never
 * goes flush to the edge on mobile). */
.hero--brand,
.hero--legal { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
/* Legal/policy hero: more air under the meta line before the title. */
.hero--legal .hero__eyebrow { margin-bottom: var(--space-4); line-height: 1.7; }
.hero__brand {
    display: flex; align-items: center;
    font-size: var(--fs-display); font-weight: 700;
    line-height: 0.95; letter-spacing: -0.03em;
}

/* Large editorial statement line. */
.statement {
    font-size: var(--fs-statement); font-weight: 400;
    line-height: 1.3; max-width: 22ch;
}

/* Section heading used on editorial pages (bigger than .h2). */
.section-title {
    font-size: clamp(22px, 3.5vw, 34px); font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1;
}

hr {
    border: 0; border-top: var(--border);
    margin-block: var(--space-4);
}

/* ============================================================
 * Prose - readable body copy. Capped to the measure.
 * ============================================================ */

.prose { max-width: var(--w-text); color: var(--color-muted); line-height: 1.7; }
.prose > * + * { margin-top: var(--space-3); }
.prose strong { color: var(--color-fg); font-weight: 600; }
.prose a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 3px; }
/* Section heading inside long-form prose (legal/policy docs). A
 * hairline rule above each gives the document its structure. */
.prose h2 {
    color: var(--color-fg); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700;
    letter-spacing: -0.01em; line-height: 1.15;
    margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
    color: var(--color-fg); font-size: var(--fs-h3); font-weight: 600;
    letter-spacing: -0.01em; margin-top: var(--space-5);
}
.prose h4 { color: var(--color-fg); font-size: 15px; font-weight: 600; margin-top: var(--space-4); }
.prose ul, .prose ol { margin-left: var(--space-4); }
.prose li + li { margin-top: var(--space-1); }
.prose li { padding-left: 2px; }

/* ============================================================
 * Buttons - sharp rectangles. One base, a few variants.
 *   .btn          solid: white on dark
 *   .btn--ghost   outlined
 *   .btn--sm      compact
 *   .btn--block   full width (forms, narrow columns)
 *   .btn--hero    300×75 - mirrors the AGEWARDEN widget footprint
 * ============================================================ */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 24px;
    font: inherit; font-size: var(--fs-sm); font-weight: 600;
    background: var(--color-fg); color: var(--color-bg);
    border: 1px solid var(--color-fg); border-radius: var(--radius);
    cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #ddd; border-color: #ddd; text-decoration: none; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--ghost { background: transparent; color: var(--color-fg); border-color: var(--color-rule-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--color-fg); }

.btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--hero { width: 300px; max-width: 100%; height: 75px; padding: 0 14px; }

/* Cue: a "do this next" highlight layered over .btn (e.g. Save domains after
   adding localhost). Pastel green; JS adds it, then removes it once the action
   runs. Keeps the .btn shape - only the colour changes. */
.btn--cue { background: #b5e3c0; border-color: #b5e3c0; color: var(--color-bg); }
.btn--cue:hover { background: #a6dab2; border-color: #a6dab2; }

/* CTA row - buttons sit side by side, wrap on small screens. */
.cta-row { display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap; }

/* ============================================================
 * Code - mono, sunk surface, hairline border
 * ============================================================ */

code {
    font-family: var(--font-mono); font-size: 0.88em; color: var(--color-fg);
    background: var(--color-surface-sunk);
    border: var(--border); border-radius: var(--radius);
    padding: 1px 6px;
}
pre {
    background: var(--color-surface); border: var(--border); border-radius: var(--radius);
    padding: var(--space-3) var(--space-4); margin-block: var(--space-4);
    overflow-x: auto;
    font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--color-fg);
}
pre code { display: block; padding: 0; border: 0; background: none; font-size: inherit; color: inherit; white-space: pre; }

/* Editorial code block (landing/demo): roomier, can soft-wrap. */
.code {
    background: var(--color-surface); border: var(--border);
    padding: var(--space-5); color: var(--color-fg);
    font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 2;
    overflow-x: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.code .c { color: var(--color-faint); }   /* comment */

/* ============================================================
 * Tables - hairline rows, mono-friendly figures
 * ============================================================ */

table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: var(--fs-sm); }
thead th {
    text-align: left; font-family: var(--font-mono); font-weight: 400;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted);
    padding: 10px 12px 10px 0; border-bottom: 1px solid var(--color-rule-strong);
}
tbody td {
    padding: 12px 12px 12px 0; border-bottom: var(--border);
    color: var(--color-muted); vertical-align: top;
}
tbody td:first-child { color: var(--color-fg); }
tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
 * Callouts - left rule, no box. The brutalist aside.
 * ============================================================ */

.callout {
    border-left: 2px solid var(--color-rule-strong);
    padding: 2px 0 2px var(--space-3);
    margin-block: var(--space-4);
    max-width: var(--w-text);
    color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6;
}
.callout strong { color: var(--color-fg); font-weight: 600; }

/* Boxed notice - when a callout must be louder (warnings, TL;DRs). */
.notice {
    border: var(--border); border-left-width: 2px; border-left-color: var(--color-rule-strong);
    background: var(--color-surface); padding: var(--space-4);
    max-width: var(--w-text); color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6;
}
.notice strong { color: var(--color-fg); font-weight: 600; }
.notice--warn { background: var(--color-warn-bg); border-color: var(--color-warn-border); color: var(--color-warn); }
.notice--warn strong { color: var(--color-fg); }
.notice--err { border-color: var(--color-err-border); }
.notice p + p { margin-top: var(--space-3); }
.notice + .notice { margin-top: var(--space-3); }
.notice + .prose { margin-top: var(--space-6); }
/* Breathing room when a notice is immediately followed by a card. */
.notice + .keys-card, .notice + .embed-card, .notice + .card { margin-top: var(--space-4); }

/* ============================================================
 * Forms - square inputs, mono uppercase labels
 * ============================================================ */

.form { display: flex; flex-direction: column; gap: var(--space-4); max-width: var(--w-text); }
.form label { display: flex; flex-direction: column; gap: 7px; }
.form label > span, .field__label {
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted);
}
.input, .form input, .form textarea {
    font-family: inherit; font-size: 15px; color: var(--color-fg);
    background: var(--color-surface-sunk);
    border: var(--border); border-radius: var(--radius);
    padding: 12px 14px; width: 100%; outline: none; resize: vertical;
}
.form textarea { font-family: var(--font-mono); }
.input:focus, .form input:focus, .form textarea:focus { border-color: var(--color-muted); }
.form__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
.form__status, .status-line { font-size: var(--fs-sm); color: var(--color-muted); }
.status-line[data-tone="err"], .form__status[data-tone="err"] { color: var(--color-err); }
.status-line[data-tone="ok"],  .form__status[data-tone="ok"]  { color: var(--color-ok); }

/* Text button that reads as a link. */
.linkbtn {
    background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm);
    color: var(--color-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--color-fg); }

.muted-note { font-size: 13px; color: var(--color-muted); margin-top: var(--space-3); max-width: var(--w-text); }
.muted-note a { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
 * Card - bordered panel. The one place a box is allowed,
 * because it groups, not decorates. Still square.
 * ============================================================ */

.card { border: var(--border); background: var(--color-surface); padding: var(--space-4); }
.card__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-2); }
.card p { color: var(--color-muted); line-height: 1.6; }
.card p + p { margin-top: var(--space-2); }
.card p + .btn { margin-top: var(--space-4); }
.card p strong { color: var(--color-fg); font-weight: 600; }

/* ============================================================
 * Badge - inline status pill. Square, outlined, mono.
 * Page-specific status colours (e.g. the law database) are set
 * on the page; this is the neutral base.
 * ============================================================ */

.badge {
    display: inline-block; font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.04em; white-space: nowrap;
    padding: 2px 8px; border: 1px solid var(--color-rule-strong); color: var(--color-muted);
}

/* ============================================================
 * Components - shared across pages, several bound to inline JS.
 * The scripts in dashboard / welcome / laws reference these
 * class names and toggle state on them. Restyle freely; do not
 * rename.
 * ------------------------------------------------------------
 * Key disclosure - the product's signature security moment,
 * shown on both the dashboard and onboarding. Square, mono.
 * ============================================================ */

.keybox, .keys-card, .embed-card { border: var(--border); background: var(--color-surface); padding: var(--space-4); max-width: var(--w-text); }
/* Embed-code card sits below the keys (with the Copy-all row between them). */
.embed-card { margin-top: var(--space-5); }
.embed-card .muted-note { margin-bottom: var(--space-4); }
.keybox { border-color: var(--color-rule-strong); }
.keybox__warn { color: var(--color-warn); font-size: 13px; font-weight: 600; margin-bottom: var(--space-3); }
.keybox__row, .keyfield__row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.keybox code, .keyfield__value {
    flex: 1; min-width: 220px;
    font-family: var(--font-mono); font-size: 14px; color: var(--color-fg);
    background: var(--color-surface-sunk); border: var(--border); border-radius: var(--radius);
    padding: 12px 14px; overflow-x: auto; user-select: all;
}
.keyfield__value { white-space: nowrap; }
.keybox code { word-break: break-all; }

.keyfield + .keyfield { margin-top: var(--space-4); }
.keyfield__label {
    display: block; margin-bottom: 7px;
    font-family: var(--font-mono); font-size: var(--fs-label);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted);
}
.keyfield__desc { font-size: 13px; color: var(--color-muted); margin-top: 7px; }
.keys-card__head { display: flex; justify-content: flex-end; margin-bottom: var(--space-3); }

/* Copy buttons. .copybtn is a compact solid action; the --done
 * variants (toggled by JS after a copy) flip to a ghost tick. */
.copybtn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 84px; padding: 0 16px; flex-shrink: 0;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    background: var(--color-fg); color: var(--color-bg);
    border: 1px solid var(--color-fg); border-radius: var(--radius);
}
.copyall {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    background: transparent; color: var(--color-fg);
    border: 1px solid var(--color-rule-strong); border-radius: var(--radius);
}
.copyall:hover { border-color: var(--color-fg); }
.copyall svg { width: 14px; height: 14px; flex-shrink: 0; }
.copybtn--done, .copyall--done { background: transparent; color: var(--color-ok); border-color: var(--color-ok); }

/* Compact icon-only copy button: dark/ghost square; swaps copy->check on done. */
.copybtn--icon { width: 44px; min-width: 0; padding: 0; background: transparent; color: var(--color-fg); border-color: var(--color-rule-strong); }
.copybtn--icon:hover { background: transparent; border-color: var(--color-fg); }
.copybtn--icon svg { width: 16px; height: 16px; }
.copybtn--icon .copybtn__check { display: none; }
.copybtn--icon.copybtn--done { color: var(--color-ok); border-color: var(--color-ok); }
.copybtn--icon.copybtn--done .copybtn__copy { display: none; }
.copybtn--icon.copybtn--done .copybtn__check { display: block; }

/* Row holding a bulk-copy (.copyall) button under a section. Capped to the
   same measure as the cards above so the button lines up with their right
   edge, not the full page width. */
.copyall-row { display: flex; justify-content: flex-end; margin-top: var(--space-3); max-width: var(--w-text); }

/* Key/value panel - dashboard usage. Rows built by script:
 * .acct__row / .acct__k / .acct__v, with data-status on the value. */
.acct { border: var(--border); background: var(--color-surface); }
.acct__row {
    display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3);
    padding: 14px var(--space-4); border-bottom: var(--border); font-variant-numeric: tabular-nums;
}
.acct__row:last-child { border-bottom: 0; }
.acct__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.acct__v[data-status="active"] { color: var(--color-ok); }
.acct__v[data-status="bad"] { color: var(--color-err); }
.rotate { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Loading + status surface (onboarding finalize, etc.). */
.status-box { border: var(--border); background: var(--color-surface); padding: var(--space-4); max-width: var(--w-text); font-size: 15px; color: var(--color-muted); }
.status-box strong { color: var(--color-fg); font-weight: 600; }
.status-box--error { border-color: var(--color-err-border); }
.spinner {
    display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-right: 9px;
    border: 2px solid var(--color-rule-strong); border-top-color: var(--color-fg); border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Numbered steps - onboarding. Counter in a square mono chip. */
.steps { list-style: none; display: grid; gap: var(--space-2); counter-reset: step; color: var(--color-muted); line-height: 1.6; }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: var(--space-3); }
.steps li::before {
    counter-increment: step; content: counter(step);
    width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 13px; color: var(--color-fg); border: 1px solid var(--color-rule-strong);
}
.steps strong { color: var(--color-fg); font-weight: 600; }

/* Q&A - the FAQ list. Question, answer, a rule between. */
.qa { display: grid; gap: var(--space-5); max-width: var(--w-text); }
.qa__item { border-bottom: var(--border); padding-bottom: var(--space-4); }
.qa__item:last-child { border-bottom: 0; }
.qa__q { font-size: 17px; font-weight: 600; margin-bottom: var(--space-2); }
.qa__a { color: var(--color-muted); line-height: 1.7; }
.qa__a strong { color: var(--color-fg); font-weight: 600; }
.qa__a a { color: var(--color-fg); text-decoration: underline; text-underline-offset: 3px; }
.qa__a p + p { margin-top: var(--space-2); }

/* ============================================================
 * Responsive - one place for breakpoints
 * ============================================================ */

@media (max-width: 768px) {
    .footer { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
    .footer nav { gap: 8px 16px; }
}

@media (max-width: 540px) {
    main.wrap { padding-block: var(--space-5) var(--space-7); }
    .header nav a { margin-left: var(--space-3); font-size: 13px; }
    .header__name { display: none; }
    .header__mark { width: 20px; height: 28px; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}