/* quidam: one stylesheet. Tokens follow the system theme; no inline styles (CSP). */
/*
 * Layout: theme tokens, fonts, base styles, then components (header, buttons, tags, summary,
 * finding rows, fix plan, footer).
 * Colours are tokens (custom properties), never hard-coded in rules. Each theme is checked once,
 * so every text/background pair keeps AAA contrast (7:1), including text on the panel colour.
 * That is why some rules say "only fg and soft on panel". Verdicts also use an icon and a word,
 * so colour is never the only signal.
 */

/* ---------- theme tokens: dark (default) ---------- */
/* --red marks a leak, --safe marks OK, --muted is for quiet text, --line for borders. */

:root {
  --bg: #121212;
  --fg: #EDEDED;
  --soft: #CFCFCF;
  --muted: #A3A3A3;
  --line: #2E2E2E;
  --panel: #1C1C1C;
  --red: #FF7469;
  --on-red: #121212;
  --safe: #22D3EE;
  color-scheme: dark;
}

/* ---------- theme tokens: light ---------- */
/* Same names, different values, so no component rule needs to know the theme. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #FAFAFA;
    --fg: #111111;
    --soft: #333333;
    --muted: #545454;
    --line: #D4D4D4;
    --panel: #EFEFEF;
    --red: #A1201A;
    --on-red: #FFFFFF;
    --safe: #005A6B;
    color-scheme: light;
  }
}

/* ---------- fonts ---------- */
/* Self-hosted (no third-party font requests). font-display: swap shows text at once, then swaps. */
@font-face {
  font-family: 'VCR OSD Mono';
  src: url('../fonts/VCR_OSD_MONO.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url('../fonts/VT323-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

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

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol { margin: 0; }

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.pixel,
h1, h2,
.btn, .tag, .tile-num {
  font-family: 'VCR OSD Mono', 'VT323', monospace;
  font-weight: 400;
}

.wrap {
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Text for screen readers only: clipped, not display:none, so it is still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link: hidden until focused, then shown top left. */
.skip {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--fg);
}
.skip:not(:focus) {
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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

.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-block: 1rem;
}

.brand { font-size: clamp(1.25rem, 9vw, 1.75rem); line-height: 1; overflow-wrap: anywhere; }
.brand-cursor { color: var(--red); }

.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

.picker { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; font-size: 0.9375rem; }
.picker a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.picker a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.picker-sep { color: var(--muted); }

.header-end { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.stored { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--safe); }
.stored svg { flex: none; width: 1em; height: 1em; }

/* ---------- main ---------- */

main {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  padding-block: 4rem 3rem;
}

.hero { display: flex; flex-direction: column; gap: 1.5rem; }
.hero-prompt { color: var(--muted); font-size: 0.9375rem; overflow-wrap: anywhere; }
.hero h1 {
  font-size: clamp(2.25rem, 6.5vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.cursor {
  display: inline-block;
  width: 0.5em;
  height: 0.8em;
  margin-left: 0.1em;
  background: var(--red);
  vertical-align: baseline;
}
.lead { max-width: 60ch; color: var(--soft); font-size: 1.0625rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  max-width: 100%;
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--red);
  border-radius: 0;
  background: var(--red);
  color: var(--on-red);
  font-size: 1.5rem;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
}
a.btn { text-decoration: none; }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn:focus-visible { outline-color: var(--fg); }
.btn[aria-disabled="true"] { cursor: progress; }
.btn-small { min-height: 44px; padding: 0.625rem 1rem; font-size: 1.375rem; }

/* A button that reads like a link (show, undo, double-check). */
.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.125rem;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: 2px; }

/* ---------- tags ---------- */
/* Verdict badges: leak is filled red, OK and can't-tell are outlined. */

.tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.25rem 0.625rem;
  border: 2px solid currentColor;
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
}
.tag svg { flex: none; width: 0.75em; height: 0.75em; }
.tag-leak { background: var(--red); border-color: var(--red); color: var(--on-red); }
.tag-ok { background: transparent; color: var(--safe); }
.tag-unknown { background: transparent; color: var(--muted); }

/* ---------- summary ---------- */

.summary { display: flex; flex-direction: column; gap: 0.75rem; }
.label {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hint { color: var(--soft); }
/* The 1px grid gap shows the --line background as thin dividers between tiles. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tiles:empty { display: none; }
.tile { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem; background: var(--bg); container-type: inline-size; }
.tile-num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 3.5rem;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.tile-num svg { flex: none; width: 1.75rem; height: 1.75rem; }
.tile-leak { color: var(--red); }
.tile-ok { color: var(--safe); }
/* Words never break mid-word: the size follows the tile's own width instead (cqi = 1% of it),
   so the longest word ("reconnaissable", 14 letters) still fits. FR and ES run longer. */
.tile-word { font-size: clamp(1.25rem, 10.5cqi, 3.5rem); line-height: 0.95; overflow-wrap: normal; hyphens: manual; }
.tile-fix { gap: 0.625rem; }
.tile-fix .btn { align-self: flex-start; }
.tile-text { color: var(--soft); font-size: 0.9375rem; }

/* ---------- sections ---------- */

.block { display: flex; flex-direction: column; gap: 1rem; scroll-margin-top: 1rem; }
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--fg);
}
.block-head h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; overflow-wrap: anywhere; }
.prompt { color: var(--red); }
.block-sub { color: var(--muted); font-size: 0.9375rem; }

/* Finding rows (filled by later tasks). */
/* Each row: label button, value, verdict tag; a hidden panel explains why and how to fix. */
.findings { list-style: none; padding: 0; display: flex; flex-direction: column; }
.findings > li {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid var(--line);
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1.5rem; }
.row-label { flex: 0 1 13.75rem; color: var(--muted); font-size: 0.9375rem; }
.row-value { flex: 1 1 16rem; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}
.row-toggle svg { flex: none; width: 0.75em; height: 0.75em; }
.row-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.row-toggle:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

/* Explanation panel: only fg and soft text sit on panel (contrast). */
.panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem 2rem;
  padding: 1.25rem;
  background: var(--panel);
  color: var(--fg);
}
.panel[hidden] { display: none; }
.panel-col { display: flex; flex-direction: column; gap: 0.375rem; }
.panel .label { color: var(--soft); font-weight: 700; }

/* Action box: a button with what pressing it does. */
.action-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.25rem;
  border: 2px dashed var(--muted);
}
.action-box > p { flex: 1 1 20rem; color: var(--soft); }
.action-box[hidden], .actions[hidden] { display: none; }
.link-btn[aria-pressed="true"] { font-weight: 700; }

/* ---------- connection: result card, "is this you?", outcome ---------- */

[hidden] { display: none !important; }

.result-card { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1.75rem; border: 2px solid var(--fg); }
.result-lines {
  display: flex;
  flex-direction: column;
  font-family: 'VCR OSD Mono', 'VT323', monospace;
  font-size: clamp(1.75rem, 6vw, 4.5rem);
  line-height: 0.95;
  overflow-wrap: anywhere;
}
.result-note { color: var(--soft); max-width: 60ch; }
.result-details { margin: 0; display: flex; flex-wrap: wrap; gap: 0 2.5rem; font-size: 0.9375rem; }
.detail { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.625rem; min-height: 44px; }
.detail dt { color: var(--muted); }
.detail dd { margin: 0; }
.detail-value { font-weight: 500; overflow-wrap: anywhere; }

.question { display: flex; flex-direction: column; gap: 0.875rem; }
.question-title, .compare-title {
  font-family: 'VCR OSD Mono', 'VT323', monospace;
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1;
}
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; }
/* The selected option changes only colours and an inset ring, never its size or font weight,
   so nothing on the page moves when an option is picked. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 56px;
  padding: 1rem 1.125rem;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.choice[aria-checked="true"] { background: var(--panel); border-color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.choice-dot { flex: none; width: 1rem; height: 1rem; margin-top: 0.25rem; border: 2px solid var(--fg); border-radius: 50%; }
.choice[aria-checked="true"] .choice-dot { background: var(--fg); }
.choice-text { min-width: 0; overflow-wrap: anywhere; }

.outcome:empty { display: none; }
.outcome-panel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.875rem 1.25rem; padding: 1.25rem 1.375rem; background: var(--panel); color: var(--fg); }
.outcome-body { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.outcome-body a:not(.btn) { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.outcome-body .btn { align-self: flex-start; }
/* On the panel colour only fg reaches 7:1, so the LEAK tag there keeps its own red fill. */

/* ---------- connection: "your VPN, checked" ---------- */

.vpn-check { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 1rem; scroll-margin-top: 1rem; }
.recap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--line); }
.recap-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.recap-line { font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: clamp(1.375rem, 3vw, 2rem); line-height: 1.05; overflow-wrap: anywhere; }
.said { display: inline-flex; align-items: center; padding: 0.25rem 0.625rem; border: 1px solid var(--safe); color: var(--safe); font-size: 0.875rem; }
.vpn-check .block-head h3 { font-family: 'VCR OSD Mono', 'VT323', monospace; font-weight: 400; font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; overflow-wrap: anywhere; }
#vpn-title:focus { outline: 3px solid var(--fg); outline-offset: 3px; }
.vpn-intro { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; }
.vpn-intro > p:first-child { flex: 1 1 22rem; max-width: 62ch; color: var(--soft); }
.vpn-summary { font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 2rem; line-height: 1; }
.vpn-rows { list-style: none; padding: 0; display: flex; flex-direction: column; }
.vpn-row { display: flex; flex-direction: column; gap: 0.5rem; padding-block: 1.125rem; border-top: 1px solid var(--line); }
.vpn-row-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.5rem 1.25rem; }
.vpn-row-text { flex: 1 1 24rem; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.vpn-q { font-weight: 700; font-size: 1.125rem; }
.vpn-a { overflow-wrap: anywhere; }
.vpn-desc { color: var(--muted); font-size: 0.9375rem; }
.vpn-fix { font-weight: 700; }

.compare { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.375rem 1.5rem; border: 2px dashed var(--muted); }
.compare-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; counter-reset: step; }
.compare-steps li { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border: 1px solid var(--line); box-shadow: inset 0 0 0 2px transparent; counter-increment: step; }
.compare-steps li::before { content: counter(step); font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 2.25rem; line-height: 1; }
/* The last step (turn the VPN back on) is the one people forget: a thick border. */
.compare-steps li:last-child { border-color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); font-weight: 700; }
.compare-run { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.compare-run p { flex: 1 1 22rem; color: var(--soft); font-size: 0.9375rem; }
.compare-result { display: flex; flex-direction: column; gap: 1rem; }
.compare-result:empty { display: none; }
.compare-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.compare-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; border: 2px solid var(--safe); }
.compare-card .label { color: var(--safe); font-weight: 700; }
.compare-card.is-without { border-color: var(--red); }
.compare-card.is-without .label { color: var(--red); }
.compare-place { font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 1.75rem; line-height: 1.05; overflow-wrap: anywhere; }
.compare-ip { color: var(--soft); font-size: 0.9375rem; overflow-wrap: anywhere; }
.compare-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1rem; font-weight: 700; }
.back-on { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.125rem; background: var(--fg); color: var(--bg); font-weight: 700; }
.back-on svg { flex: none; width: 1.25rem; height: 1.25rem; }

/* ---------- fix plan ---------- */

.findings > li:focus, #fix-title:focus { outline: 3px solid var(--fg); outline-offset: 3px; }
.fix-plan { display: flex; flex-direction: column; gap: 1.25rem; }
.policy { max-width: 72ch; color: var(--muted); font-size: 0.9375rem; }

.progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding-block: 0.25rem 0.5rem; }
.progress-count { font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.progress-bar { flex: 1 1 12rem; max-width: 20rem; display: flex; gap: 0.25rem; }
.bar-cell { flex: 1 1 0; height: 1rem; border: 2px solid var(--muted); }
.bar-cell.is-done { background: var(--safe); border-color: var(--safe); }
.rescan-result { flex-basis: 100%; font-weight: 700; }
.rescan-result:empty { display: none; }

.fix-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.problem-card { border: 2px solid var(--line); scroll-margin-top: 1rem; }
.problem-card.is-first { border-color: var(--fg); }
.problem-card.is-done { border-color: var(--safe); }
.card-body { display: flex; flex-direction: column; gap: 1.125rem; padding: 1.25rem 1.5rem 1.5rem; }
.card-index { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.card-count { font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 1.5rem; line-height: 1; color: var(--muted); }
.badge { font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 1.25rem; line-height: 1; padding: 0.25rem 0.625rem; background: var(--fg); color: var(--bg); }
/* Two columns with a big arrow between them; they stack on narrow screens. */
.card-cols { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.25rem 1.75rem; }
.card-problem { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.card-fix { flex: 1 1 26rem; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.card-arrow { flex: 0 0 auto; align-self: center; font-family: 'VCR OSD Mono', 'VT323', monospace; font-size: 4rem; line-height: 1; color: var(--muted); }
.tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.card-leaks { color: var(--red); font-weight: 700; font-size: 0.9375rem; }
.card-effort { color: var(--soft); font-size: 0.9375rem; }
.card-title { font-family: 'VCR OSD Mono', 'VT323', monospace; font-weight: 400; font-size: clamp(1.625rem, 3.5vw, 2.25rem); line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.card-desc, .fix-desc { color: var(--soft); }
.fix-name { margin: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 700; text-wrap: balance; overflow-wrap: anywhere; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip { max-width: 100%; padding: 0.25rem 0.5625rem; border: 1px solid var(--muted); font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
.options { display: flex; flex-direction: column; gap: 0.375rem; }
.option-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.option-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.875rem; padding-block: 0.5rem; border-bottom: 1px solid var(--line); }
.option-name { flex: 0 0 10rem; max-width: 100%; }
.option-note { flex: 1 1 13rem; min-width: 0; color: var(--soft); font-size: 0.9375rem; }
.options-note { color: var(--muted); font-size: 0.875rem; }
.coverage { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.coverage-text { font-size: 0.9375rem; font-weight: 500; }
.meter { display: inline-flex; flex-wrap: wrap; gap: 0.1875rem; }
.meter-cell { width: 0.875rem; height: 0.875rem; border: 2px solid var(--muted); }
.meter-cell.is-on { background: var(--safe); border-color: var(--safe); }
.further { color: var(--soft); font-size: 0.9375rem; }
.further strong { color: var(--fg); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; padding-top: 0.25rem; }
.done-check { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 44px; cursor: pointer; }
.done-check input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--safe); }
.fix-steps { padding-left: 1.375rem; display: flex; flex-direction: column; gap: 0.375rem; }
.card-done { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.25rem; padding: 0.875rem 1.375rem; }
.card-done-text { flex: 1 1 20rem; min-width: 0; color: var(--soft); }
.card-done-text strong { color: var(--fg); }

/* ---------- legal page ---------- */

.brand-link { text-decoration: none; color: inherit; }
.legal { gap: 2.5rem; max-width: 52rem; }
.legal h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.05; overflow-wrap: anywhere; }
.legal section { display: flex; flex-direction: column; gap: 1rem; }
.legal h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.05; padding-bottom: 0.5rem; border-bottom: 3px solid var(--fg); }
.legal h3 { margin: 0.75rem 0 0; font-size: 1.125rem; }
.legal p, .legal li { max-width: 72ch; color: var(--soft); }
.legal ul { padding-left: 1.375rem; display: flex; flex-direction: column; gap: 0.5rem; }
.legal strong { color: var(--fg); }
.legal dl { margin: 0; display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 0.75rem 1.5rem; }
.legal dt { color: var(--muted); }
.legal dd { margin: 0; overflow-wrap: anywhere; }
.legal a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
@media (max-width: 36rem) { .legal dl { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .legal dd { margin-bottom: 0.75rem; } }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  padding-block: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted);
}
.footer-links p { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; min-height: 44px; }