/* Free My ID site stylesheet. Built by tools/build_site.py from site_src/css/*.css and
   site_src/tokens.yaml. No external fonts, scripts or trackers. Edit the sources, not site/style.css. */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    --color-bg: light-dark(#ffffff, #0d131d);
    --color-bg-alt: light-dark(#f4f6f9, #121a26);
    --color-card: light-dark(#ffffff, #172131);
    --color-surface: light-dark(#eef2f7, #1a2434);
    --color-surface-strong: light-dark(#e1e8f2, #25334b);
    --color-text: light-dark(#151b26, #eef1f6);
    --color-muted: light-dark(#414b5c, #c0c8d5);
    --color-heading: light-dark(#14264a, #dde7fb);
    --color-brand: light-dark(#1b3366, #a9c3f3);
    --color-brand-ink: light-dark(#ffffff, #0d131d);
    --color-brand-soft: light-dark(#e6edf8, #1d2b45);
    --color-band-brand: light-dark(#1b2f5b, #162543);
    --color-band-brand-ink: light-dark(#ffffff, #eef1f6);
    --color-accent: light-dark(#a3202e, #f5a3ab);
    --color-link: light-dark(#17488f, #a8caff);
    --color-ok: light-dark(#1c6639, #8fd6a6);
    --color-warn: light-dark(#7a4f00, #f0c674);
    --color-line: light-dark(#dbe1ea, #2a374d);
    --color-line-strong: light-dark(#6b778c, #8794ab);
    --color-focus: light-dark(#f2b705, #f2b705);
    --color-focus-inner: light-dark(#151b26, #eef1f6);
    --color-footer-bg: light-dark(#0f1c38, #080c14);
    --color-footer-text: light-dark(#e8edf6, #dfe5ee);
    --color-flag-white: light-dark(#ffffff, #e8edf6);
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
    --space-xl: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);
    --space-3xl: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    --step--1: 0.85rem;
    --step-0: 1rem;
    --step-1: clamp(1.1rem, 1.05rem + 0.3vw, 1.25rem);
    --step-2: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-3: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
    --step-4: clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem);
    --step-5: clamp(2.1rem, 1.5rem + 3vw, 3.4rem);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;
    --wrap: 62rem;
    --measure: 36rem;
    --tap: 3rem;
    --gutter: clamp(1rem, 4vw, 2rem);
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-display: var(--font-body);
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --shadow-1: 0 1px 2px rgb(10 20 45 / 0.06), 0 1px 6px rgb(10 20 45 / 0.05);
    --shadow-2: 0 1px 3px rgb(10 20 45 / 0.07), 0 8px 24px rgb(10 20 45 / 0.09);
    --shadow-3: 0 2px 6px rgb(10 20 45 / 0.08), 0 20px 48px rgb(10 20 45 / 0.14);
  }
  /* Fallback for browsers without light-dark() (before ~2024). */
  @supports not (color: light-dark(#000, #fff)) {
    :root {
    --color-bg: #ffffff;
    --color-bg-alt: #f4f6f9;
    --color-card: #ffffff;
    --color-surface: #eef2f7;
    --color-surface-strong: #e1e8f2;
    --color-text: #151b26;
    --color-muted: #414b5c;
    --color-heading: #14264a;
    --color-brand: #1b3366;
    --color-brand-ink: #ffffff;
    --color-brand-soft: #e6edf8;
    --color-band-brand: #1b2f5b;
    --color-band-brand-ink: #ffffff;
    --color-accent: #a3202e;
    --color-link: #17488f;
    --color-ok: #1c6639;
    --color-warn: #7a4f00;
    --color-line: #dbe1ea;
    --color-line-strong: #6b778c;
    --color-focus: #f2b705;
    --color-focus-inner: #151b26;
    --color-footer-bg: #0f1c38;
    --color-footer-text: #e8edf6;
    --color-flag-white: #ffffff;
    }
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) {
        --color-bg: #0d131d;
        --color-bg-alt: #121a26;
        --color-card: #172131;
        --color-surface: #1a2434;
        --color-surface-strong: #25334b;
        --color-text: #eef1f6;
        --color-muted: #c0c8d5;
        --color-heading: #dde7fb;
        --color-brand: #a9c3f3;
        --color-brand-ink: #0d131d;
        --color-brand-soft: #1d2b45;
        --color-band-brand: #162543;
        --color-band-brand-ink: #eef1f6;
        --color-accent: #f5a3ab;
        --color-link: #a8caff;
        --color-ok: #8fd6a6;
        --color-warn: #f0c674;
        --color-line: #2a374d;
        --color-line-strong: #8794ab;
        --color-focus: #f2b705;
        --color-focus-inner: #eef1f6;
        --color-footer-bg: #080c14;
        --color-footer-text: #dfe5ee;
        --color-flag-white: #e8edf6;
      }
    }
    :root[data-theme="dark"] {
    --color-bg: #0d131d;
    --color-bg-alt: #121a26;
    --color-card: #172131;
    --color-surface: #1a2434;
    --color-surface-strong: #25334b;
    --color-text: #eef1f6;
    --color-muted: #c0c8d5;
    --color-heading: #dde7fb;
    --color-brand: #a9c3f3;
    --color-brand-ink: #0d131d;
    --color-brand-soft: #1d2b45;
    --color-band-brand: #162543;
    --color-band-brand-ink: #eef1f6;
    --color-accent: #f5a3ab;
    --color-link: #a8caff;
    --color-ok: #8fd6a6;
    --color-warn: #f0c674;
    --color-line: #2a374d;
    --color-line-strong: #8794ab;
    --color-focus: #f2b705;
    --color-focus-inner: #eef1f6;
    --color-footer-bg: #080c14;
    --color-footer-text: #dfe5ee;
    --color-flag-white: #e8edf6;
    }
  }
}
/* Styleguide swatches (generated; the CSP forbids style="" attributes). */
@layer pages {
  .sw--bg-l { background: #ffffff; } .sw--bg-d { background: #0d131d; }
  .sw--bg-alt-l { background: #f4f6f9; } .sw--bg-alt-d { background: #121a26; }
  .sw--card-l { background: #ffffff; } .sw--card-d { background: #172131; }
  .sw--surface-l { background: #eef2f7; } .sw--surface-d { background: #1a2434; }
  .sw--surface-strong-l { background: #e1e8f2; } .sw--surface-strong-d { background: #25334b; }
  .sw--text-l { background: #151b26; } .sw--text-d { background: #eef1f6; }
  .sw--muted-l { background: #414b5c; } .sw--muted-d { background: #c0c8d5; }
  .sw--heading-l { background: #14264a; } .sw--heading-d { background: #dde7fb; }
  .sw--brand-l { background: #1b3366; } .sw--brand-d { background: #a9c3f3; }
  .sw--brand-ink-l { background: #ffffff; } .sw--brand-ink-d { background: #0d131d; }
  .sw--brand-soft-l { background: #e6edf8; } .sw--brand-soft-d { background: #1d2b45; }
  .sw--band-brand-l { background: #1b2f5b; } .sw--band-brand-d { background: #162543; }
  .sw--band-brand-ink-l { background: #ffffff; } .sw--band-brand-ink-d { background: #eef1f6; }
  .sw--accent-l { background: #a3202e; } .sw--accent-d { background: #f5a3ab; }
  .sw--link-l { background: #17488f; } .sw--link-d { background: #a8caff; }
  .sw--ok-l { background: #1c6639; } .sw--ok-d { background: #8fd6a6; }
  .sw--warn-l { background: #7a4f00; } .sw--warn-d { background: #f0c674; }
  .sw--line-l { background: #dbe1ea; } .sw--line-d { background: #2a374d; }
  .sw--line-strong-l { background: #6b778c; } .sw--line-strong-d { background: #8794ab; }
  .sw--focus-l { background: #f2b705; } .sw--focus-d { background: #f2b705; }
  .sw--focus-inner-l { background: #151b26; } .sw--focus-inner-d { background: #eef1f6; }
  .sw--footer-bg-l { background: #0f1c38; } .sw--footer-bg-d { background: #080c14; }
  .sw--footer-text-l { background: #e8edf6; } .sw--footer-text-d { background: #dfe5ee; }
  .sw--flag-white-l { background: #ffffff; } .sw--flag-white-d { background: #e8edf6; }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, select, textarea { font: inherit; }
  :where(ul, ol)[role="list"] { list-style: none; padding: 0; }
}

@layer base {
  html {
    font-size: 125%;                 /* 20px base: easy reading, still follows browser zoom */
    color-scheme: light dark;
    scroll-padding-block-start: var(--space-m);
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1; }
  h1, h2, h3, h4 {
    color: var(--color-heading);
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.012em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }
  h1 { font-size: var(--step-4); line-height: 1.12; letter-spacing: -0.022em; }
  h2 { font-size: var(--step-3); line-height: 1.16; letter-spacing: -0.018em; }
  h3 { font-size: var(--step-2); }
  h4 { font-size: var(--step-1); }
  p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
  :where(p, ul, ol, dl, details, figure, table, blockquote) + :where(p, ul, ol, dl, details, figure, table, blockquote) {
    margin-block-start: var(--space-s);
  }
  h1 + :where(*) { margin-block-start: var(--space-s); }   /* WR-34: page title never sits flush on its lead */
  :where(h2, h3, h4) + :where(p, ul, ol, dl) { margin-block-start: var(--space-2xs); }
  :where(p, ul, ol, dl, figure, table) + :where(h2, h3, h4) { margin-block-start: var(--space-l); }
  :where(p, ul, ol, dl) + :where(.btn-row) { margin-block-start: var(--space-s); }
  :where(ul, ol):not([role="list"]) { padding-inline-start: 1.4em; }
  li + li { margin-block-start: var(--space-2xs); }
  a {
    color: var(--color-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }
  a:hover { text-decoration-thickness: 0.14em; }
  strong { font-weight: 700; }
  code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-sm);
    padding: 0.05em 0.3em;
    overflow-wrap: anywhere;
  }
  /* Focus: dark inner ring + 3px gold outer ring, visible on every background. */
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--color-focus-inner);
    border-radius: 2px;
  }
  ::selection { background: var(--color-focus); color: #14181f; }
  pre {
    overflow-x: auto; max-inline-size: 100%; padding: var(--space-s); font-size: 0.8rem; line-height: 1.5;
    background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  }
  pre code { background: none; border: 0; padding: 0; font-size: inherit; overflow-wrap: normal; }
  hr { border: 0; border-block-start: 1px solid var(--color-line); margin-block: var(--space-xl); }
}

/* Cross-document page transitions, only for people who haven't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .wrap--narrow { max-inline-size: calc(var(--measure) + 2 * var(--gutter) + 4rem); }
  .prose { max-inline-size: var(--measure); }

  /* v2 section bands: calm white / off-white alternation, one deep navy band. */
  .band { padding-block: var(--space-xl); }
  .band--tight { padding-block: var(--space-m); }
  .band--alt { background: var(--color-bg-alt); }
  .band--brand {
    background: var(--color-band-brand); color: var(--color-band-brand-ink);
    --color-heading: var(--color-band-brand-ink); --color-muted: var(--color-band-brand-ink);
    --color-link: var(--color-band-brand-ink); --color-accent: var(--color-band-brand-ink);
  }
  .band + .band:not(.band--alt, .band--brand) { border-block-start: 1px solid var(--color-line); }

  /* Section header: optional kicker, h2, lead. Centered above grids and tables. */
  .section-head {
    max-inline-size: 44rem; margin-inline: auto; margin-block-end: var(--space-l); text-align: center;
  }
  .section-head > * + * { margin-block-start: var(--space-xs); }
  .section-head .kicker { justify-content: center; }
  .section-head .lead { margin-inline: auto; }
  .wrap--narrow .section-head, .prose .section-head { text-align: start; margin-inline: 0; margin-block-end: var(--space-m); }
  .wrap--narrow .section-head .kicker { justify-content: flex-start; }
  .wrap--narrow .section-head .lead { margin-inline: 0; }

  /* Stack helpers. */
  .stack > * + * { margin-block-start: var(--space-s); }
  .stack-l > * + * { margin-block-start: var(--space-l); }
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); align-items: center; }
  .two-col { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 60em) {
    .two-col { grid-template-columns: 1.1fr 0.9fr; }
  }
  .main-pad { padding-block: var(--space-l) var(--space-xl); }
}

/* Components, v2 (D6). Files 50-56 share the `components` layer and load in name order:
   50 base pieces, 51 legacy v1 classes (delete once no template uses them), 52 header/footer,
   54 contract sections, 56 widgets (mockup, SmartScreen drawing, download card, guide list). */
@layer components {
  /* ---------- Skip link ---------- */
  .skip-link {
    position: absolute; inset-inline-start: var(--space-s); inset-block-start: -10rem;
    z-index: 30; background: var(--color-bg); color: var(--color-link);
    padding: var(--space-xs) var(--space-s); border-radius: var(--radius-md); font-weight: 700;
    box-shadow: var(--shadow-2);
  }
  .skip-link:focus { inset-block-start: var(--space-xs); }

  /* ---------- Flag bar: the one flag accent on the site (navy / white / red, 4px) ---------- */
  .flagbar { display: grid; grid-template-columns: 1fr 1fr 1fr; block-size: 4px; }
  .flagbar span:nth-child(1) { background: #1b2f5b; }
  .flagbar span:nth-child(2) { background: var(--color-flag-white); }
  .flagbar span:nth-child(3) { background: #a3202e; }

  /* ---------- Logo A (brand/logo/final). Light fills first, light-dark() where supported. ---------- */
  .bm-bg { fill: #1b2f5b; fill: light-dark(#1b2f5b, #c4d5f7); }
  .bm-star { fill: #fff; fill: light-dark(#fff, #0f1520); }
  .bm-bar { fill: #a3202e; fill: light-dark(#a3202e, #f5a3ab); }

  /* ---------- Text pieces ---------- */
  .kicker {
    display: flex; align-items: center; gap: 0.45em;
    color: var(--color-brand); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.01em;
  }
  .kicker svg { inline-size: 1.1em; block-size: 1.1em; flex: none; }
  .lead { font-size: var(--step-1); line-height: 1.55; color: var(--color-muted); max-inline-size: var(--measure); }
  .note { font-size: var(--step--1); color: var(--color-muted); }
  .caption { font-size: var(--step--1); color: var(--color-muted); margin-block-start: var(--space-xs); }
  .label { font-weight: 800; letter-spacing: 0.02em; }

  /* ---------- Buttons: one primary per screen ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
    min-block-size: var(--tap); padding: 0.55em 1.25em;
    background: var(--color-brand); color: var(--color-brand-ink);
    border: 2px solid var(--color-brand); border-radius: var(--radius-md);
    font-weight: 700; font-size: 1rem; line-height: 1.25; text-align: center; text-decoration: none;
    box-shadow: var(--shadow-1);
    transition: box-shadow 0.15s ease, background-color 0.15s ease;
  }
  .btn:hover { text-decoration: underline; text-underline-offset: 0.2em; box-shadow: var(--shadow-2); }
  .btn svg { inline-size: 1.2em; block-size: 1.2em; flex: none; }
  .btn--primary { background: var(--color-brand); color: var(--color-brand-ink); border-color: var(--color-brand); }
  .btn--secondary {
    background: transparent; color: var(--color-heading); border-color: var(--color-line-strong); box-shadow: none;
  }
  .btn--secondary:hover { border-color: var(--color-heading); box-shadow: none; }
  .btn--ghost {
    background: transparent; color: var(--color-link); border-color: transparent; box-shadow: none;
    padding-inline: 0.15em; text-decoration: underline; text-underline-offset: 0.2em;
  }
  .btn--ghost:hover { box-shadow: none; text-decoration-thickness: 0.14em; }
  .btn--large, .btn--lg { font-size: var(--step-1); padding: 0.7em 1.5em; min-block-size: 3.5rem; }
  .btn--ghost.btn--large { padding-inline: 0.15em; }
  .btn--small { font-size: 0.9rem; padding: 0.4em 1em; min-block-size: 2.5rem; }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); align-items: center; }
  .btn-row--center { justify-content: center; }
  .link-solo { display: inline-flex; align-items: center; min-block-size: 3rem; }

  /* ---------- Chips ---------- */
  .chip {
    display: inline-block; padding: 0.1em 0.65em; border-radius: var(--radius-pill);
    font-size: 0.8rem; font-weight: 700; white-space: nowrap;
    background: var(--color-surface-strong); color: var(--color-text);
  }
  .chip--ok { color: var(--color-ok); }
  .chip--warn { color: var(--color-warn); }
  .chip--brand { background: var(--color-brand); color: var(--color-brand-ink); }

  /* ---------- Breadcrumbs ---------- */
  .crumbs { font-size: var(--step--1); margin-block-end: var(--space-xs); }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.4em; list-style: none; padding: 0; }
  .crumbs li { margin: 0; display: inline-flex; align-items: center; gap: 0.4em; }
  .crumbs li + li::before { content: "/"; color: var(--color-muted); }
  .crumbs a { display: inline-flex; align-items: center; min-block-size: 2.4rem; }
  .crumbs [aria-current="page"] { color: var(--color-muted); }

  .center { text-align: center; }
  .center .lead { margin-inline: auto; }
}

@layer components {
  /* ---------- Header (D1): brand | nav | Download. Sticky only when the screen is tall enough,
     so at 400% zoom it never covers the page. Works with either markup:
       nav.site-nav (wide)  +  details.menu > nav.site-nav (narrow)       [siblings]
       nav.site-nav > ul    +  details.menu (inside the nav)              [nested]
     ---------- */
  .site-header { position: relative; z-index: 20; background: var(--color-bg); border-block-end: 1px solid var(--color-line); }
  @media (min-height: 36em) {
    .site-header { position: sticky; inset-block-start: 0; }
    html { scroll-padding-block-start: 6rem; }
  }
  .site-header > .wrap, .site-header__inner {
    display: flex; align-items: center; gap: var(--space-xs) var(--space-s);
    min-block-size: 4.25rem; padding-block: var(--space-2xs);
  }
  .brand {
    display: inline-flex; align-items: center; gap: 0.55em; min-block-size: var(--tap); margin-inline-end: auto;
    color: var(--color-heading); text-decoration: none; font-weight: 800; font-size: 1.1rem;
    letter-spacing: -0.015em; white-space: nowrap;
  }
  .brand svg { inline-size: 1.75em; block-size: 1.75em; flex: none; }
  .site-nav { display: flex; align-items: center; }
  .site-nav ul { display: flex; align-items: center; gap: var(--space-3xs) 0.15rem; list-style: none; padding: 0; }
  .site-nav li { margin: 0; }
  .site-nav a:not(.btn) {
    display: inline-flex; align-items: center; min-block-size: var(--tap);
    padding-inline: var(--space-xs); border-radius: var(--radius-md);
    color: var(--color-text); text-decoration: none; font-size: 0.9rem; font-weight: 600;
  }
  .site-nav a:not(.btn):hover { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.3em; }
  .site-nav a[aria-current="page"]:not(.btn) {
    color: var(--color-heading); text-decoration: underline; text-decoration-thickness: 3px;
    text-decoration-color: var(--color-brand); text-underline-offset: 0.45em;
  }
  .site-header__cta { flex: none; }

  /* No-JS menu (details/summary), shown below 62em. */
  .menu { position: static; display: flex; align-items: center; margin: 0; }
  .menu > summary {
    display: inline-flex; align-items: center; gap: 0.45em; min-block-size: var(--tap);
    padding-inline: var(--space-s); border: 2px solid var(--color-line-strong); border-radius: var(--radius-md);
    font-weight: 700; color: var(--color-heading); cursor: pointer; list-style: none; user-select: none; white-space: nowrap;
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary svg { inline-size: 1.2em; block-size: 1.2em; flex: none; }
  .menu > summary .when-open { display: none; }
  .menu[open] > summary .when-open { display: inline; }
  .menu[open] > summary .when-closed { display: none; }
  .menu > :not(summary) {
    position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 5; display: block;
    background: var(--color-bg); border-block-end: 1px solid var(--color-line); box-shadow: var(--shadow-3);
    padding: var(--space-2xs) var(--gutter) var(--space-s);
  }
  .menu ul { display: grid; gap: 0; }
  .menu li + li { border-block-start: 1px solid var(--color-line); }
  .menu a:not(.btn) { display: flex; inline-size: 100%; font-size: 1rem; padding-inline: var(--space-2xs); }
  .menu .btn { margin-block: var(--space-xs) 0; inline-size: 100%; }
  .menu > :not(summary) > ul { padding: 0; }

  @media (max-width: 61.99em) {
    .site-nav:not(.menu .site-nav) > :not(.menu, .site-header__cta) { display: none; }
  }
  /* Phones: icon-only menu toggle (its label stays for screen readers) and a compact Download,
     so brand + menu + Download fit in one row down to 320px. */
  @media (max-width: 34em) {
    .site-header > .wrap, .site-header__inner { gap: 0.4rem; padding-inline: max(0.8rem, 3vw); }
    .brand { font-size: 0.9rem; gap: 0.4em; }
    .menu > summary { inline-size: 2.5rem; min-block-size: 2.5rem; padding: 0; justify-content: center; }
    .menu > summary span {
      position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    :is(.site-header__cta.btn, .site-header__cta .btn) { font-size: 0.8rem; min-block-size: 2.5rem; padding: 0.35em 0.7em; }
    .site-header__cta svg { display: none; }
    .site-header__cta { min-inline-size: 0; }
  }
  @media (min-width: 62em) {
    .menu { display: none; }
  }
  @media (max-width: 21em) {   /* 336px and below: the logo alone names the home link */
    .brand > span:not(.visually-hidden) {
      position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
  }

  /* ---------- Footer ---------- */
  .site-footer {
    background: var(--color-footer-bg); color: var(--color-footer-text);
    padding-block: var(--space-2xl) var(--space-l); font-size: 0.9rem;
    --color-focus-inner: var(--color-footer-bg);
  }
  .site-footer a { color: inherit; text-decoration-color: rgb(255 255 255 / 0.45); }
  .site-footer a:hover { text-decoration-color: currentColor; }
  .site-footer .brand { color: inherit; margin-inline-end: 0; }
  .site-footer .wrap > p { margin-block: var(--space-2xs) var(--space-l); }
  .footer-cols {
    display: grid; gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  }
  .site-footer h2, .site-footer h3 {
    color: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    margin-block-end: var(--space-2xs);
  }
  .site-footer ul { list-style: none; padding: 0; }
  .site-footer li { margin: 0; }
  .site-footer li a { display: inline-flex; align-items: center; min-block-size: 2.4rem; text-decoration: none; }
  .site-footer li a:hover { text-decoration: underline; }
  .footer-legal {
    border-block-start: 1px solid rgb(255 255 255 / 0.2); margin-block-start: var(--space-xl);
    padding-block-start: var(--space-m); max-inline-size: 52rem;
  }
  .footer-legal > * + * { margin-block-start: var(--space-2xs); }
}

/* Contract components (docs/WEBSITE_REDESIGN.md). Class names are the contract: restyle, never rename. */
@layer components {
  /* Breathing room between block components and whatever follows them inside a section. */
  :where(.dodont, .cards, .steps, .table-scroll, .trustbar, .faq, .price-card, .proof, .checklist) + :where(*),
  :where(*) + :where(.dodont, .cards, .steps, .table-scroll, .trustbar, .faq, .price-card, .proof) {
    margin-block-start: var(--space-m);
  }
  /* ---------- Deep navy surfaces: brand band and final CTA flip the color roles ---------- */
  .band--brand, .cta-final {
    background: var(--color-band-brand); color: var(--color-band-brand-ink);
    --color-heading: var(--color-band-brand-ink); --color-muted: var(--color-band-brand-ink);
    --color-link: var(--color-band-brand-ink); --color-accent: var(--color-band-brand-ink);
    --color-brand: var(--color-band-brand-ink); --color-brand-ink: var(--color-band-brand);
    --color-line-strong: var(--color-band-brand-ink); --color-focus-inner: var(--color-band-brand);
  }

  /* ---------- Hero: text + product picture, two columns from 900px ---------- */
  .hero {
    display: grid; gap: var(--space-xl); align-items: center;
    padding-block: var(--space-xl);
    padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter));
    background: linear-gradient(var(--color-bg-alt), var(--color-bg));
    border-block-end: 1px solid var(--color-line);
  }
  .hero > .wrap { grid-column: 1 / -1; padding-inline: 0; max-inline-size: none; }
  .hero > .wrap, .hero > .wrap.two-col { display: grid; gap: var(--space-xl); align-items: center; }
  @media (min-width: 56.25em) {
    .hero, .hero > .wrap { grid-template-columns: 0.9fr 1.1fr; }
    .hero > .wrap { grid-template-columns: subgrid; }
  }
  .hero__text > * + * { margin-block-start: var(--space-s); }
  .hero h1 { font-size: var(--step-5); line-height: 1.08; letter-spacing: -0.025em; max-inline-size: 16ch; margin-block: var(--space-xs) var(--space-s); }
  .hero .btn-row { margin-block-start: var(--space-m); }
  .hero__lead { font-size: var(--step-1); line-height: 1.55; color: var(--color-muted); max-inline-size: 34rem; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-s); align-items: center; }
  .hero__text > .hero__actions { margin-block-start: var(--space-m); }
  .hero__note { font-size: var(--step--1); color: var(--color-muted); }
  .hero__text > .hero__note { margin-block-start: var(--space-xs); }
  .hero__media { margin: 0; min-inline-size: 0; }
  .hero__media > img, .proof > img, .hero__media > picture img, .proof > picture img {
    inline-size: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-line);
    box-shadow: var(--shadow-3); background: var(--color-card);
  }
  .hero__media > .caption, .proof > .caption { text-align: center; }
  @media (min-width: 60em) {
    .hero__actions .btn:first-child { white-space: nowrap; }   /* WR-23 */
  }

  /* ---------- Trust bar: four short promises in one calm strip ---------- */
  .trustbar {
    list-style: none; padding: var(--space-s); display: grid; gap: var(--space-xs) var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
  }
  .trustbar__item {
    display: flex; align-items: center; gap: var(--space-xs); margin: 0;
    min-block-size: var(--tap); padding: var(--space-2xs) var(--space-xs);
    font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--color-heading);
  }
  .trustbar__item > a {   /* the whole item may be the link */
    display: flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); inline-size: 100%;
    border-radius: var(--radius-md);
  }
  .trustbar__item svg {
    inline-size: 3rem; block-size: 3rem; padding: 0.65rem; flex: none;
    color: var(--color-brand); background: var(--color-brand-soft); border-radius: 50%;
  }
  @media (max-width: 30em) {   /* phones: one tidy list, more room for the words */
    .trustbar { padding: var(--space-2xs); gap: 0; }
    .trustbar__item { padding-inline: var(--space-2xs); }
    .trustbar__item svg { inline-size: 2.5rem; block-size: 2.5rem; padding: 0.55rem; }
  }
  @media (min-width: 60em) {   /* four across: icon above a short centered line, so each promise reads as one block */
    .trustbar__item, .trustbar__item > a { flex-direction: column; justify-content: flex-start; text-align: center; gap: var(--space-2xs); }
    .trustbar__item > a { padding-block: var(--space-2xs); }
  }
  .trustbar__item a { color: inherit; text-decoration-color: var(--color-line-strong); text-underline-offset: 0.2em; }
  .trustbar__item a:hover { color: var(--color-link); text-decoration-color: currentColor; }

  /* ---------- Steps: three numbered steps side by side when there is room ---------- */
  .steps { display: grid; gap: var(--space-l); list-style: none; padding: 0; }
  .steps:not(.steps--list) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .step { position: relative; margin: 0; }
  .step > * + * { margin-block-start: var(--space-2xs); }
  .step__num {
    display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
    background: var(--color-brand); color: var(--color-brand-ink); font-weight: 800; font-size: 1.15rem;
    margin-block-end: var(--space-xs);
  }
  .step > h3 { font-size: var(--step-2); }
  .step > p { color: var(--color-muted); }

  /* Steps as a vertical numbered list (instructions with any content: lists, pictures, callouts).
     The number sits in a gutter on the left; everything else stays in one readable column. */
  .steps--list { gap: var(--space-m); max-inline-size: calc(var(--measure) + 3.75rem); }
  .steps--list > .step { padding-inline-start: 3.75rem; min-block-size: 2.75rem; }
  .steps--list > .step > .step__num { position: absolute; inset-inline-start: 0; inset-block-start: -0.15rem; margin: 0; }
  .steps--list > .step > .step__num + * { margin-block-start: 0; }
  .steps--list > .step > h3 { font-size: var(--step-1); padding-block-start: 0.3rem; }
  .steps--list > .step > p { color: var(--color-text); }
  .steps--list > .step > ul { padding-inline-start: 1.2em; }
  @media (max-width: 30em) {
    .steps--list > .step { padding-inline-start: 3rem; }
    .steps--list > .step > .step__num { inline-size: 2.25rem; block-size: 2.25rem; font-size: 1rem; inset-block-start: 0; }
    .steps--list > .step > h3 { padding-block-start: 0.1rem; }
  }

  /* ---------- Cards ---------- */
  .cards {
    list-style: none; padding: 0; display: grid; gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  .cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(14rem, (100% - 2 * var(--space-m)) / 3)), 1fr)); }
  .cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(12rem, (100% - 3 * var(--space-m)) / 4)), 1fr)); }
  .card {
    margin: 0; min-inline-size: 0;
    background: var(--color-card); color: var(--color-text);
    border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    padding: var(--space-m); box-shadow: var(--shadow-1);
  }
  .card > * + * { margin-block-start: var(--space-2xs); }
  .card h3 { font-size: var(--step-1); }
  .card p { color: var(--color-muted); }
  .card__icon {
    display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; padding: 0.65rem;
    margin-block-end: var(--space-xs); color: var(--color-brand); background: var(--color-brand-soft);
    border-radius: var(--radius-md);
  }
  .card__icon svg { inline-size: 100%; block-size: 100%; }
  @media (max-width: 34em) {   /* WR-32: four short items read as a compact 2 x 2 on phones */
    .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
    .cards--4 > .card { padding: var(--space-s); }
    .cards--4 > .card h3 { font-size: var(--step-0); line-height: 1.3; }
    .cards--4 > .card p { font-size: var(--step--1); }
    .cards--4 .card__icon { inline-size: 2.5rem; block-size: 2.5rem; padding: 0.55rem; margin-block-end: var(--space-2xs); }
  }

  /* ---------- Proof picture ---------- */
  .proof { margin: 0 auto; max-inline-size: 40rem; }
  /* Show the top of the report (title + first rows) at a fixed height; width/height attributes stay for CLS. */
  .proof > img {
    max-block-size: 30rem; object-fit: cover; object-position: top;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
  }

  /* ---------- Comparison table: scrolls inside its own box at 320px, never the page ---------- */
  /* WR-31 scroll cue, no JS: an edge shadow fixed to the box (scroll) that a card-coloured cover at the end
     of the content (local) hides once you reach it, so it only shows while there is more to the right. */
  .table-scroll {
    overflow-x: auto; max-inline-size: 100%;
    background:
      linear-gradient(to right, transparent, var(--color-card) 60%) 100% 0 / 3rem 100% no-repeat local,
      radial-gradient(farthest-side at 100% 50%, var(--color-line-strong), transparent) 100% 0 / 1.25rem 100% no-repeat scroll,
      var(--color-card);
    border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
  }
  .table-scroll:focus-visible { outline-offset: 3px; }
  /* Fixed layout: the first header row sets the widths, so the Free My ID column can't grow past the others. */
  .compare { inline-size: 100%; min-inline-size: 34rem; table-layout: fixed; border-collapse: collapse; font-size: 0.92rem; line-height: 1.45; }
  .compare thead th:first-child { inline-size: 22%; }
  @media (max-width: 34em) {
    .compare { min-inline-size: 31rem; font-size: 0.85rem; }
    .compare thead th:first-child { inline-size: 7.5rem; }
    .compare th, .compare td { padding: 0.7em 0.75em; }
    /* Stacked cards when every cell names its column (td[data-label]): no sideways scrolling on phones.
       Browsers without :has() keep the scrolling table above. */
    .compare:has(td[data-label]) { min-inline-size: 0; font-size: 0.95rem; }
    .compare:has(td[data-label]) :is(tbody, tr, th, td) { display: block; }
    .compare:has(td[data-label]) thead {
      position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }
    .compare:has(td[data-label]) tr { padding: var(--space-xs) var(--space-s); border-block-end: 1px solid var(--color-line); }
    .compare:has(td[data-label]) tbody tr:last-child { border-block-end: 0; }
    .compare:has(td[data-label]) th[scope="row"] {
      position: static; padding: 0 0 var(--space-3xs); border: 0; box-shadow: none; background: none; font-size: var(--step-0);
    }
    .compare:has(td[data-label]) td { padding: 0.4em 0.6em; border: 0; border-radius: var(--radius-sm); }
    .compare:has(td[data-label]) td + td { margin-block-start: var(--space-3xs); }
    .compare:has(td[data-label]) td::before {
      content: attr(data-label); display: block; color: var(--color-muted); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em;
    }
  }
  .compare caption { padding: var(--space-xs) var(--space-s); text-align: start; color: var(--color-muted); font-size: var(--step--1); caption-side: bottom; }
  .compare th, .compare td { padding: 0.8em 1em; text-align: start; vertical-align: top; border-block-end: 1px solid var(--color-line); }
  .compare tbody tr:last-child > * { border-block-end: 0; }
  .compare thead th { background: var(--color-surface); color: var(--color-heading); font-weight: 700; }
  .compare th[scope="row"] {
    color: var(--color-heading); font-weight: 600;
    position: sticky; inset-inline-start: 0; z-index: 1; background: var(--color-card);
    box-shadow: inset -1px 0 var(--color-line);
  }
  .compare thead th:nth-child(2) { background: var(--color-brand); color: var(--color-brand-ink); }
  .compare td:nth-child(2) { background: var(--color-brand-soft); }
  .compare td.yes { color: var(--color-ok); font-weight: 700; }
  .compare td:nth-child(2).yes { color: var(--color-heading); }
  .compare td.no { color: var(--color-muted); }
  .compare td.partial { color: var(--color-warn); font-weight: 600; }
  .compare td svg { display: inline-block; vertical-align: -0.2em; inline-size: 1.15em; block-size: 1.15em; margin-inline-end: 0.3em; }

  /* ---------- Callout: calm, never a red alarm. Icon optional, any children. ---------- */
  .callout {
    display: grid; grid-template-columns: auto 1fr; column-gap: 0; align-items: start;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    padding: var(--space-s) var(--space-m); margin-block: var(--space-m);
  }
  .callout > svg {
    grid-column: 1; grid-row: 1 / span 12; inline-size: 1.5rem; block-size: 1.5rem;
    margin-inline-end: var(--space-s); margin-block-start: 0.1em; color: var(--color-brand);
  }
  .callout > :not(svg) { grid-column: 2; min-inline-size: 0; }
  .callout > :not(svg) + :not(svg) { margin-block-start: var(--space-2xs); }
  .callout > div > * + * { margin-block-start: var(--space-2xs); }
  .callout h2, .callout h3 { font-size: var(--step-1); }
  .callout--info { background: var(--color-brand-soft); border-color: transparent; border-inline-start: 4px solid var(--color-brand); }
  .callout--note { border-inline-start: 4px solid var(--color-focus); }

  /* ---------- Does / doesn't ---------- */
  .dodont { display: grid; gap: var(--space-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .dodont__col {
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    border-block-start: 4px solid var(--color-ok); padding: var(--space-s) var(--space-m); box-shadow: var(--shadow-1);
  }
  .dodont__col--dont { border-block-start-color: var(--color-line-strong); }
  .dodont__col > h3 { font-size: var(--step-1); margin-block-end: var(--space-xs); }
  .dodont__col > ul:not(.checklist) { list-style: disc; padding-inline-start: 1.2em; font-size: 0.95rem; line-height: 1.45; }
  .dodont__col > ul > li + li { margin-block-start: var(--space-3xs); }
  .dodont__col > ul:not(.checklist) > li::marker { font-size: 1.2em; }
  .dodont__col--do > ul:not(.checklist) > li::marker { color: var(--color-ok); }
  .dodont__col--dont > ul:not(.checklist) > li::marker { color: var(--color-muted); }

  /* ---------- Checklist: ticks are real inline SVG icons ({{ icon('check') }}) ---------- */
  .checklist { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
  .checklist > li { display: flex; gap: var(--space-xs); align-items: flex-start; margin: 0; }
  .checklist > li > svg { inline-size: 1.3em; block-size: 1.3em; flex: none; margin-block-start: 0.15em; color: var(--color-ok); }
  .checklist--no > li > svg { color: var(--color-muted); }

  /* ---------- Price card ($0, D9): one card, centered ---------- */
  .price-card {
    max-inline-size: 30rem; margin-inline: auto; text-align: center;
    background: var(--color-card); color: var(--color-text);
    border: 1px solid var(--color-line); border-radius: var(--radius-xl);
    padding: var(--space-l) var(--space-l) var(--space-m); box-shadow: var(--shadow-3);
  }
  .price-card > * + * { margin-block-start: var(--space-s); }
  .price-card__label { color: var(--color-brand); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; }
  .price-card .price-card__price {
    margin-block-start: var(--space-2xs); color: var(--color-heading);
    font-size: clamp(3rem, 2.4rem + 3vw, 4.25rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  }
  .price-card .price-card__sub { margin-block-start: var(--space-2xs); color: var(--color-muted); font-weight: 600; }
  .price-card .checklist {
    text-align: start; margin-block: var(--space-m); padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--color-line);
  }
  .price-card .btn { inline-size: 100%; }

  /* ---------- FAQ ---------- */
  .faq { display: grid; gap: var(--space-xs); max-inline-size: 46rem; margin-inline: auto; }
  .faq details, .faq__item {
    margin: 0; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-md);
  }
  .faq details[open] { border-color: var(--color-line-strong); box-shadow: var(--shadow-1); }
  .faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-s);
    min-block-size: var(--tap); padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-s);
    cursor: pointer; font-weight: 700; color: var(--color-heading); list-style: none; border-radius: inherit;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--color-link); }
  .faq summary::after {   /* chevron drawn with borders: no icon file, no data: URI */
    content: ""; flex: none; inline-size: 0.6rem; block-size: 0.6rem; margin-inline-end: 0.2rem;
    border-inline-end: 2.5px solid currentColor; border-block-end: 2.5px solid currentColor;
    transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.15s ease;
  }
  .faq details[open] > summary::after { transform: translateY(0.15rem) rotate(-135deg); }
  .faq details > :not(summary) { padding-inline: var(--space-s); }
  .faq details > :last-child { padding-block-end: var(--space-s); }
  .faq__body > * + * { margin-block-start: var(--space-xs); }

  /* ---------- Final CTA ---------- */
  .cta-final { padding: var(--space-3xl) var(--gutter); text-align: center; }
  .cta-final > * { max-inline-size: 40rem; margin-inline: auto; }
  .cta-final > * + * { margin-block-start: var(--space-s); }
  .cta-final h2 { font-size: var(--step-4); }
  .cta-final > .btn, .cta-final > .wrap > .btn { margin-block-start: var(--space-m); }
  .cta-final > .wrap > * + * { margin-block-start: var(--space-s); }
  .cta-final > p:not(.cta-final__note) { font-size: var(--step-1); }
  .cta-final__note { font-size: var(--step--1); }
}

/* Widgets: drawn product mockup, Windows SmartScreen drawing, download card, guide list, styleguide swatches. */
@layer components {
  /* ---------- Product mockup (drawn in HTML, fake data) ---------- */
  .mock { margin: 0; }
  .mock__window {
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2); overflow: hidden; font-size: 0.85rem; line-height: 1.45;
  }
  .mock__bar {
    display: flex; align-items: center; gap: 0.6em; padding: 0.5em 0.9em;
    background: var(--color-surface-strong); border-block-end: 1px solid var(--color-line);
    font-weight: 700; color: var(--color-heading);
  }
  .mock__bar svg { inline-size: 1.2em; block-size: 1.2em; }
  .mock__bar .mock__ctl { margin-inline-start: auto; letter-spacing: 0.6em; color: var(--color-muted); font-weight: 400; }
  .mock__body { padding: 1em; display: grid; gap: 0.8em; }
  .mock__who { font-weight: 700; color: var(--color-heading); font-size: 1rem; }
  .mock__status {
    display: flex; gap: 0.6em; align-items: flex-start; padding: 0.7em 0.8em;
    background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-line);
  }
  .mock__status svg { inline-size: 1.3em; block-size: 1.3em; flex: none; color: var(--color-ok); }
  .mock__todo {
    border: 2px solid var(--color-brand); border-radius: var(--radius-md); padding: 0.8em;
    display: grid; gap: 0.6em;
  }
  .mock__btn {
    justify-self: start; background: var(--color-brand); color: var(--color-brand-ink);
    border-radius: var(--radius-sm); padding: 0.4em 1em; font-weight: 700;
  }
  .mock__list { list-style: none; padding: 0; display: grid; gap: 0.4em; }
  .mock__list li { display: flex; justify-content: space-between; gap: 0.6em; flex-wrap: wrap; margin: 0;
    padding-block-end: 0.4em; border-block-end: 1px solid var(--color-line); }
  .mock figcaption, figure.mock > figcaption { margin-block-start: var(--space-2xs); font-size: var(--step--1); color: var(--color-muted); }

  /* ---------- Windows SmartScreen drawing ---------- */
  .ss { margin: 0; }
  .ss__box {
    background: #0b5cad; color: #ffffff; padding: 1.1em 1.2em; border-radius: 4px;
    font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.85rem; line-height: 1.45;
    display: grid; gap: 0.7em; max-inline-size: 30rem; box-shadow: var(--shadow-2);
  }
  .ss__title { font-size: 1.35rem; font-weight: 300; line-height: 1.2; }
  .ss__link { text-decoration: underline; font-weight: 600; }
  .ss__btns { display: flex; justify-content: flex-end; gap: 0.6em; flex-wrap: wrap; }
  .ss__btn { border: 2px solid #ffffff; padding: 0.3em 1em; }
  .ss__btn--hi { background: #ffffff; color: #0b3f78; font-weight: 700; }
  .ss__hint { outline: 3px dashed #f2b705; outline-offset: 3px; }
  .ss figcaption { margin-block-start: var(--space-2xs); font-size: var(--step--1); color: var(--color-muted); }

  /* ---------- Download card ---------- */
  .download-card {
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg);
    padding: var(--space-m); box-shadow: var(--shadow-2); display: grid; gap: var(--space-s);
  }
  /* WR-33: a callout inside a card drops its outer margin (the grid gap spaces it) and most of its padding. */
  .download-card > .callout, .card > .callout, .price-card > .callout { margin: 0; padding: var(--space-xs) var(--space-s); }
  @media (max-width: 34em) {
    .download-card { padding: var(--space-s); }
    /* Icon floats beside the first line only; the text below gets the full card width. */
    .download-card > .callout { display: block; padding-inline: var(--space-xs); }
    .download-card > .callout > svg { float: left; float: inline-start; margin-inline-end: var(--space-2xs); }
  }
  .facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-3xs) var(--space-s); font-size: var(--step--1); }
  .facts dt { font-weight: 700; color: var(--color-muted); }
  .facts dd { margin: 0; overflow-wrap: anywhere; }
  .hash { font-family: var(--font-mono); font-size: 0.85rem; overflow-wrap: anywhere; }

  /* ---------- Guide list ---------- */
  .guide-list { display: grid; gap: var(--space-xs); list-style: none; padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
  .guide-list li { margin: 0; }
  .guide-list a {
    display: flex; flex-direction: column; justify-content: center; min-block-size: var(--tap); block-size: 100%;
    padding: var(--space-xs) var(--space-s); border: 1px solid var(--color-line); border-radius: var(--radius-md);
    background: var(--color-card); font-weight: 700; text-decoration: none;
  }
  .guide-list a:hover { border-color: var(--color-line-strong); text-decoration: underline; }
  .guide-list small { display: block; font-weight: 400; color: var(--color-muted); font-size: 0.8rem; }

  /* ---------- Swatches (styleguide only) ---------- */
  .swatches { display: grid; gap: var(--space-xs); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); list-style: none; padding: 0; }
  .swatches li { margin: 0; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; font-size: 0.8rem; }
  .swatches .chipbar { display: grid; grid-template-columns: 1fr 1fr; block-size: 3rem; }
  .swatches p { padding: 0.4em 0.6em; margin: 0; }

}
@layer components {
  /* 320px / 400% zoom: let long words (file names, email addresses) break. */
  .btn, .steps > li, .download-card, .callout > div, .card, .trustbar__item { min-inline-size: 0; overflow-wrap: anywhere; }
  .two-col > *, .hero > * { min-inline-size: 0; }
}

@layer pages {
  /* Styleguide only */
  .sg-h1 { font: 700 var(--step-4)/1.2 var(--font-display); color: var(--color-heading); }
  .sg-h2 { font: 700 var(--step-3)/1.2 var(--font-display); color: var(--color-heading); }
  .sg-h3 { font: 700 var(--step-2)/1.2 var(--font-body); color: var(--color-heading); }
  .sg-icon { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); color: var(--color-heading); }
  .sg-icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .center { text-align: center; }
  .mt-0 { margin-block-start: 0 !important; }
  .mt-s { margin-block-start: var(--space-s) !important; }
  .mt-m { margin-block-start: var(--space-m) !important; }
  .mt-l { margin-block-start: var(--space-l) !important; }
  .mb-s { margin-block-end: var(--space-s) !important; }
  .no-wrap { white-space: nowrap; }
}

/* People print instructions: plain black on white, no navigation, show where links go. */
@media print {
  html { font-size: 12pt; }
  :root { color-scheme: light; }
  body { background: #fff !important; color: #000 !important; display: block; }
  .flagbar, .site-header nav, .menu, .site-header__cta, .skip-link, .btn-row .btn--secondary,
  .hero__actions .btn--secondary, .no-print { display: none !important; }
  .site-header { position: static !important; }
  .site-header, .hero, .band, .band--brand, .cta-final {
    background: none !important; color: #000 !important; border: 0 !important; padding-block: 0.5rem !important;
  }
  .site-footer { background: none !important; color: #000 !important; border-block-start: 1px solid #000; padding-block: 0.5rem; }
  .footer-cols { display: none; }
  a { color: #000 !important; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; overflow-wrap: anywhere; }
  .btn { background: none !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; }
  .card, .callout, .download-card, .mock__window, .trustbar, .price-card, .dodont__col, .table-scroll, .faq details, .hero__media img, .proof img {
    box-shadow: none !important; break-inside: avoid;
  }
  .table-scroll { overflow: visible; }
  .compare { min-inline-size: 0; }
  .compare thead th, .compare td, .compare th[scope="row"] { background: none !important; color: #000 !important; position: static; }
  .steps > li, .step { break-inside: avoid; }
  .steps > li::before, .step__num { background: none !important; color: #000 !important; border: 2px solid #000; }
  h1, h2, h3 { color: #000 !important; break-after: avoid; }
  .faq details > :not(summary) { display: block !important; }
}