/*!
 * Vigilo design system — vigilo.css
 * "The night watch for your website."
 * Single stylesheet for the whole app. Plain CSS, no build step, no third-party assets.
 * Docs: docs/DESIGN.md · Living style guide: design/styleguide.html
 *
 * Contents
 *  01 Tokens (day / night / forced-night subtree)
 *  02 Reset & base
 *  03 Typography
 *  04 Layout primitives
 *  05 Site header, nav, footer
 *  06 Buttons & links
 *  07 Forms & the scan form
 *  08 Status system: icons, badges, tags, check IDs
 *  09 Alerts, toasts, disclaimer
 *  10 Panels
 *  11 Watch log
 *  12 Check rows & result summaries
 *  13 Score gauge & grade badge
 *  14 Hero & beacon beam
 *  15 Marketing blocks: watch list, steps, FAQ, stats, quote
 *  16 Pricing
 *  17 Data tables
 *  18 Navigation widgets: tabs, breadcrumbs, pagination
 *  19 Feedback: progress, scanning, skeleton, empty state, dialog
 *  20 App shell: sidebar, topbar, dashboard pieces
 *  21 Admin helpers
 *  22 Report page
 *  23 Prose (legal pages)
 *  24 Utilities
 *  25 Motion preferences
 *  26 Print
 */

/* ==========================================================================
   01 TOKENS
   Day (light) is the :root default. Night (dark) applies via
   prefers-color-scheme unless [data-theme="light"], or via [data-theme="dark"].
   .theme-night forces night tokens on any subtree (hero bands, agency band).
   ========================================================================== */

:root {
  /* --- Brand constants (identical in both themes) --- */
  --navy-950: #08121f;
  --navy-900: #0c1a2b;   /* Harbour night: brand navy */
  --navy-800: #12243a;
  --navy-700: #183049;
  --navy-600: #284563;
  --navy-500: #3a5a7d;
  --navy-300: #8a9db3;
  --navy-200: #b3c2d3;
  --navy-100: #dfe7f0;
  --navy-50:  #eef2f6;   /* Chart paper */
  --amber-500: #f4a83a;  /* Beacon */
  --amber-400: #ffc163;
  --amber-700: #8a5300;  /* Beacon ink: amber usable as text on light */

  /* --- Typography --- */
  --font-display: Charter, "Bitstream Charter", "Sitka Text", "Iowan Old Style", Cambria, "Palatino Linotype", Georgia, serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  /* Type scale: major third (1.25) on a 1rem = 16px root, body at step 0 = 17px */
  --step--2: 0.75rem;     /* 12px  legal fine print only */
  --step--1: 0.875rem;    /* 14px  meta, table headers, mono IDs */
  --step-0:  1.0625rem;   /* 17px  body */
  --step-1:  1.25rem;     /* 20px  lead, h5 */
  --step-2:  1.5625rem;   /* 25px  h4 */
  --step-3:  clamp(1.625rem, 1.4rem + 0.9vw, 1.953rem);  /* h3 */
  --step-4:  clamp(1.875rem, 1.5rem + 1.6vw, 2.441rem);  /* h2 */
  --step-5:  clamp(2.25rem, 1.6rem + 2.8vw, 3.815rem);   /* h1 / display */
  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 68ch;
  --measure-narrow: 52ch;

  /* --- Spacing (4px base) --- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;
  --gutter: 1rem;            /* page side gutter; grows at breakpoints */
  --section-y: var(--s-8);

  /* --- Radius: hierarchy, not one-size-fits-all --- */
  --r-1: 3px;      /* inline: tags, check IDs, kbd */
  --r-2: 6px;      /* controls: buttons, inputs, badges */
  --r-3: 10px;     /* containers: panels, log, dialogs */
  --r-round: 999px;

  /* --- Motion --- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --sweep: 9s;

  /* --- Layout --- */
  --wrap: 72rem;
  --wrap-narrow: 46rem;
  --wrap-wide: 84rem;
  --sidebar-w: 16rem;
  --topbar-h: 3.75rem;
  --touch: 44px;

  /* --- Status icons (masks; colour comes from currentColor). Shapes differ per status:
         pass = circle + tick, warn = triangle + !, fail = diamond + ×, info = square + i --- */
  --icon-pass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm4.2 5.3a1 1 0 0 0-1.4 0L8.7 10.4 7.2 8.9a1 1 0 1 0-1.4 1.4l2.2 2.2a1 1 0 0 0 1.4 0l4.8-4.8a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E");
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.3 2.2a2 2 0 0 1 3.4 0l7.3 12.6A2 2 0 0 1 17.3 18H2.7A2 2 0 0 1 1 14.8L8.3 2.2ZM10 6.5a1 1 0 0 0-1 1V11a1 1 0 1 0 2 0V7.5a1 1 0 0 0-1-1Zm0 6.8a1.15 1.15 0 1 0 0 2.3 1.15 1.15 0 0 0 0-2.3Z'/%3E%3C/svg%3E");
  --icon-fail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M8.6.9a2 2 0 0 1 2.8 0l7.7 7.7a2 2 0 0 1 0 2.8l-7.7 7.7a2 2 0 0 1-2.8 0L.9 11.4a2 2 0 0 1 0-2.8L8.6.9Zm-.5 6a1 1 0 0 0-1.4 1.4L8.6 10l-1.9 1.9a1 1 0 1 0 1.4 1.4l1.9-1.9 1.9 1.9a1 1 0 0 0 1.4-1.4L11.4 10l1.9-1.9a1 1 0 0 0-1.4-1.4L10 8.6 8.1 6.9Z'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M4 2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm6 3.6a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4ZM10 9a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0v-4a1 1 0 0 0-1-1Z'/%3E%3C/svg%3E");
  --icon-skip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm0 2a7 7 0 1 0 0 14 7 7 0 0 0 0-14Zm-4 6h8a1 1 0 1 1 0 2H6a1 1 0 1 1 0-2Z'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.3 4.3a1 1 0 0 1 1.4 0l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4L11.6 10 7.3 5.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E");
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%235a6d83' d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E");

  /* --- DAY theme (light): chart paper, navy ink --- */
  color-scheme: light;
  --bg: #eef2f6;
  --bg-alt: #e4eaf1;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-sunk: #e8edf3;
  --line: #ccd6e1;
  --line-strong: #76899f;  /* 3.6:1 on surface: meets 1.4.11 for input borders */
  --text: #0c1a2b;        /* 16.4:1 on --bg, 17.6:1 on --surface */
  --text-2: #3e5168;      /* 7.5:1 on --bg */
  --text-3: #55687e;      /* 5.2:1 on --bg (meta only) */
  --accent: #f4a83a;      /* beacon fill (with --on-accent text) */
  --accent-hover: #ffb950;
  --accent-ink: #8a5300;  /* amber as text/links on light: 5.6:1 on --bg */
  --on-accent: #0c1a2b;   /* 8.6:1 on --accent */
  --link: #1d4f91;        /* 7.3:1 on --bg */
  --link-hover: #0c1a2b;
  --focus: #1d5fb0;       /* 5.6:1 vs --bg: meets 3:1 non-text */
  --focus-halo: #ffffff;
  --selection: #ffd99a;

  --pass: #13703f;        /* 5.8:1 on --bg  · starboard green */
  --warn: #8a5300;        /* 5.6:1 on --bg  · beacon amber */
  --fail: #b3261e;        /* 5.5:1 on --bg  · port red */
  --info: #1d5fb0;        /* 5.6:1 on --bg  · harbour blue */
  --skip: #55687e;
  /* graphic tones: icons, lamps, arcs, stripes (>=3:1 non-text, brighter than text tones) */
  --pass-graphic: #1f8a52; --warn-graphic: #b87100; --fail-graphic: #d0342a; --info-graphic: #2a6fc4;
  --pass-bg: #e3f3ea;
  --warn-bg: #fdf0da;
  --fail-bg: #fbe6e4;
  --info-bg: #e3edf9;
  --pass-line: #9fd2b4;
  --warn-line: #ebc27d;
  --fail-line: #eca9a3;
  --info-line: #a7c4ea;

  --shadow-1: 0 1px 2px rgb(12 26 43 / 0.06), 0 1px 1px rgb(12 26 43 / 0.04);
  --shadow-2: 0 2px 4px rgb(12 26 43 / 0.05), 0 8px 20px -6px rgb(12 26 43 / 0.12);
  --shadow-3: 0 4px 8px rgb(12 26 43 / 0.06), 0 24px 48px -12px rgb(12 26 43 / 0.24);
  --beam-color: 244 168 58;   /* rgb triplet for beam gradients */
  --rule-texture: rgb(12 26 43 / 0.045);
}

/* NIGHT theme tokens. Kept identical in three places on purpose:
   OS preference, explicit [data-theme="dark"], and the .theme-night subtree. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c1a2b; --bg-alt: #0f2033; --surface: #12243a; --surface-2: #163049; --surface-sunk: #0a1625;
    --line: #284563; --line-strong: #6283a8;
    --text: #e9eff6; --text-2: #b3c2d3; --text-3: #93a6bb;
    --accent: #f4a83a; --accent-hover: #ffc163; --accent-ink: #f4b04b; --on-accent: #0c1a2b;
    --link: #8cc0ff; --link-hover: #ffffff; --focus: #f4b04b; --focus-halo: #0c1a2b; --selection: #3a5a7d;
    --pass: #5fd49a; --warn: #f4b740; --fail: #ff8a80; --info: #8cc0ff; --skip: #93a6bb; --pass-graphic: #5fd49a; --warn-graphic: #f4b740; --fail-graphic: #ff8a80; --info-graphic: #8cc0ff;
    --pass-bg: #0f2e2a; --warn-bg: #2f2716; --fail-bg: #35192a; --info-bg: #13294a;
    --pass-line: #22604a; --warn-line: #6b5223; --fail-line: #7a3340; --info-line: #2d5689;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 2px 4px rgb(0 0 0 / 0.25), 0 10px 24px -8px rgb(0 0 0 / 0.5);
    --shadow-3: 0 6px 12px rgb(0 0 0 / 0.3), 0 28px 56px -16px rgb(0 0 0 / 0.6);
    --rule-texture: rgb(233 239 246 / 0.04);
  }
}
:root[data-theme="dark"],
.theme-night {
  color-scheme: dark;
  --bg: #0c1a2b; --bg-alt: #0f2033; --surface: #12243a; --surface-2: #163049; --surface-sunk: #0a1625;
  --line: #284563; --line-strong: #6283a8;
  --text: #e9eff6; --text-2: #b3c2d3; --text-3: #93a6bb;
  --accent: #f4a83a; --accent-hover: #ffc163; --accent-ink: #f4b04b; --on-accent: #0c1a2b;
  --link: #8cc0ff; --link-hover: #ffffff; --focus: #f4b04b; --focus-halo: #0c1a2b; --selection: #3a5a7d;
  --pass: #5fd49a; --warn: #f4b740; --fail: #ff8a80; --info: #8cc0ff; --skip: #93a6bb; --pass-graphic: #5fd49a; --warn-graphic: #f4b740; --fail-graphic: #ff8a80; --info-graphic: #8cc0ff;
  --pass-bg: #0f2e2a; --warn-bg: #2f2716; --fail-bg: #35192a; --info-bg: #13294a;
  --pass-line: #22604a; --warn-line: #6b5223; --fail-line: #7a3340; --info-line: #2d5689;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.25), 0 10px 24px -8px rgb(0 0 0 / 0.5);
  --shadow-3: 0 6px 12px rgb(0 0 0 / 0.3), 0 28px 56px -16px rgb(0 0 0 / 0.6);
  --rule-texture: rgb(233 239 246 / 0.04);
}
.theme-night { color: var(--text); background-color: var(--bg); }

/* Status tone: any element with data-status gets --tone / --tone-bg / --tone-line / --tone-icon */
[data-status="pass"] { --tone-graphic: var(--pass-graphic); --tone: var(--pass); --tone-bg: var(--pass-bg); --tone-line: var(--pass-line); --tone-icon: var(--icon-pass); }
[data-status="warn"] { --tone-graphic: var(--warn-graphic); --tone: var(--warn); --tone-bg: var(--warn-bg); --tone-line: var(--warn-line); --tone-icon: var(--icon-warn); }
[data-status="fail"] { --tone-graphic: var(--fail-graphic); --tone: var(--fail); --tone-bg: var(--fail-bg); --tone-line: var(--fail-line); --tone-icon: var(--icon-fail); }
[data-status="info"] { --tone-graphic: var(--info-graphic); --tone: var(--info); --tone-bg: var(--info-bg); --tone-line: var(--info-line); --tone-icon: var(--icon-info); }
[data-status="skip"] { --tone-graphic: var(--skip); --tone: var(--skip); --tone-bg: var(--surface-sunk); --tone-line: var(--line); --tone-icon: var(--icon-skip); }

@media (min-width: 40em) { :root { --gutter: 1.5rem; --section-y: var(--s-9); } }
@media (min-width: 64em) { :root { --gutter: 2.5rem; } }

/* ==========================================================================
   02 RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--s-4));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video, canvas, picture { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, li, dd, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-6); }
::selection { background: var(--selection); color: var(--text); }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   03 TYPOGRAPHY
   Serif (Charter family) for display + headings: the logbook voice.
   System sans for interface + body. Mono only for machine facts: check IDs,
   timestamps, URLs, DNS records, code.
   ========================================================================== */

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.012em;
  color: var(--text);
  text-wrap: balance;
}
h5, h6, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 650;
  line-height: var(--leading-snug);
}
.display { font-size: var(--step-5); letter-spacing: -0.02em; line-height: 1.05; }
h1, .h1 { font-size: var(--step-5); letter-spacing: -0.02em; line-height: 1.06; }
h2, .h2 { font-size: var(--step-4); }
h3, .h3 { font-size: var(--step-3); }
h4, .h4 { font-size: var(--step-2); line-height: var(--leading-snug); }
h5, .h5 { font-size: var(--step-1); }
h6, .h6 { font-size: var(--step-0); }

p { max-width: var(--measure); text-wrap: pretty; }
.lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-2); max-width: 60ch; }
.meta, small, .small { font-size: var(--step--1); color: var(--text-3); line-height: 1.5; }
.fine { font-size: var(--step--2); color: var(--text-3); line-height: 1.5; }
.muted { color: var(--text-2); }
strong, b { font-weight: 650; }
em { font-style: italic; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }

code, kbd, samp, pre, .mono { font-family: var(--font-mono); font-size: 0.9em; }
:not(pre) > code {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}
kbd {
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-1);
  padding: 0 0.35em;
  font-size: 0.85em;
  background: var(--surface);
}
pre, .code-block {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
  overflow-x: auto;
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 100%;
}
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   04 LAYOUT PRIMITIVES
   Low specificity via :where() so components can override spacing freely.
   ========================================================================== */

:where(.wrap) { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
:where(.wrap--narrow) { max-width: calc(var(--wrap-narrow) + 2 * var(--gutter)); }
:where(.wrap--wide) { max-width: calc(var(--wrap-wide) + 2 * var(--gutter)); }

:where(.section) { padding-block: var(--section-y); }
:where(.section--tight) { padding-block: var(--s-7); }
:where(.section--alt) { background-color: var(--bg-alt); }
:where(.section--surface) { background-color: var(--surface); }
:where(.section + .section:not(.section--alt, .theme-night, .section--surface)) { border-top: 1px solid var(--line); }

.section__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: 44rem; }
.section__head--split { max-width: none; }
@media (min-width: 56em) {
  .section__head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--s-7); }
}

:where(.stack) { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
:where(.stack--xs) { --stack-gap: var(--s-1); }
:where(.stack--sm) { --stack-gap: var(--s-2); }
:where(.stack--lg) { --stack-gap: var(--s-6); }
:where(.stack--xl) { --stack-gap: var(--s-7); }
:where(.flow > * + *) { margin-top: var(--flow-gap, 1em); }

:where(.cluster) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }
:where(.cluster--between) { justify-content: space-between; }
:where(.cluster--end) { justify-content: flex-end; }
:where(.cluster--sm) { --cluster-gap: var(--s-2); }
:where(.cluster--lg) { --cluster-gap: var(--s-5); }

/* Auto-fitting grid. Set --min to control the column floor. */
:where(.grid) {
  display: grid;
  gap: var(--grid-gap, var(--s-5));
  grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 16rem), 100%), 1fr));
}
:where(.grid--2) { --min: 22rem; }
:where(.grid--3) { --min: 16rem; }
:where(.grid--4) { --min: 12rem; }

/* Two-column split: stacks below 56em */
:where(.split) { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 56em) {
  :where(.split) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  :where(.split--wide-left) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  :where(.split--wide-right) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  :where(.split--center) { align-items: center; }
}

/* Content + side column (report page, settings) */
:where(.with-aside) { display: grid; gap: var(--s-6); }
@media (min-width: 64em) {
  :where(.with-aside) { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--s-7); }
  :where(.with-aside--left) { grid-template-columns: 15rem minmax(0, 1fr); }
}

.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-3); top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent); font-weight: 650;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-2); text-decoration: none;
}
.skip-link:focus { top: var(--s-3); }

/* ==========================================================================
   05 SITE HEADER, NAV, FOOTER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.theme-night { background: color-mix(in srgb, var(--navy-900) 92%, transparent); }
.site-header__inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: var(--topbar-h);
}
.site-header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.01em;
  min-height: var(--touch);
}
.brand:hover { color: var(--text); }
.brand__mark { width: 1.75rem; height: 1.75rem; }
.brand__mark .beam-fill { fill: var(--accent); opacity: 0.28; }
.brand__mark .lamp { fill: var(--accent); }
.brand__mark .arms { stroke: currentColor; }
.brand__tag { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 400; color: var(--text-3); letter-spacing: 0; }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: var(--s-1); list-style: none; padding: 0; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--touch);
  padding-inline: var(--s-3); border-radius: var(--r-2);
  color: var(--text-2); text-decoration: none; font-size: 0.975rem; font-weight: 500;
}
.site-nav a:hover { color: var(--text); background: var(--surface-sunk); }
.site-nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
@media (min-width: 56em) { .site-nav { display: block; margin-left: var(--s-5); } }

/* Mobile menu: <details class="menu"> needs no JS */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  width: min(18rem, calc(100vw - 2 * var(--gutter)));
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--shadow-3); padding: var(--s-2); z-index: 50;
}
.menu__panel a {
  display: flex; align-items: center; min-height: var(--touch); padding-inline: var(--s-3);
  border-radius: var(--r-2); color: var(--text); text-decoration: none;
}
.menu__panel a:hover { background: var(--surface-sunk); }
@media (min-width: 56em) { .menu--mobile { display: none; } }

.site-footer {
  background: var(--navy-950); color: var(--navy-200);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--step--1);
}
.site-footer { --text: #e9eff6; --text-2: #b3c2d3; --text-3: #93a6bb; --line: #1f3550; --link: #c9daee; --link-hover: #ffffff; --focus: #f4b04b; --accent: #f4a83a; color-scheme: dark; }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.site-footer h2 { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 650; color: var(--text); letter-spacing: 0; margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-1); }
.site-footer a { color: var(--link); text-decoration: none; display: inline-flex; min-height: 2rem; align-items: center; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .brand { color: var(--text); }
.site-footer__base {
  margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between;
  color: var(--text-3);
}
.imprint { font-style: normal; display: grid; gap: 0.15rem; color: var(--text-2); }
.placeholder { outline: 1px dashed currentColor; outline-offset: 2px; border-radius: 2px; }

/* ==========================================================================
   06 BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-line: var(--line-strong);
  --btn-bg-hover: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--touch);
  padding: 0.55em 1.15em;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-2);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-2); }
.btn svg { width: 1.15em; height: 1.15em; }

/* Primary = the beacon. Use at most one per view. */
.btn--primary {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-line: transparent; --btn-bg-hover: var(--accent-hover);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 1px 2px rgb(12 26 43 / 0.2);
}
.btn--secondary { --btn-bg: var(--text); --btn-fg: var(--bg); --btn-line: transparent; --btn-bg-hover: var(--text-2); }
.btn--ghost { --btn-bg: transparent; --btn-line: transparent; --btn-bg-hover: var(--surface-sunk); --btn-fg: var(--text); }
.btn--outline { --btn-bg: transparent; --btn-line: var(--line-strong); --btn-bg-hover: var(--surface-sunk); }
.btn--danger { --btn-bg: var(--fail); --btn-fg: #ffffff; --btn-line: transparent; --btn-bg-hover: color-mix(in srgb, var(--fail) 86%, #000); }
:root[data-theme="dark"] .btn--danger, .theme-night .btn--danger { --btn-fg: var(--navy-900); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--danger { --btn-fg: var(--navy-900); } }

.btn--sm { min-height: 2.25rem; padding: 0.35em 0.8em; font-size: var(--step--1); }
.btn--sm::after { content: ""; position: absolute; inset: -4px; } /* keep 44px hit area */
.btn--sm { position: relative; }
.btn--lg { min-height: 3.25rem; padding: 0.7em 1.5em; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn--icon { padding: 0; width: var(--touch); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}

.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { text-decoration: underline; color: inherit; }

/* Theme toggle button (see theme.js) */
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ==========================================================================
   07 FORMS
   ========================================================================== */

.field { display: grid; gap: var(--s-2); }
.field + .field { margin-top: var(--s-5); }
.label { font-weight: 600; font-size: 0.975rem; color: var(--text); }
.label .optional { font-weight: 400; color: var(--text-3); }
.hint { font-size: var(--step--1); color: var(--text-2); }
.field-error {
  display: flex; gap: var(--s-2); align-items: flex-start;
  font-size: var(--step--1); color: var(--fail); font-weight: 600;
}
.field-error::before {
  content: ""; width: 1.1em; height: 1.1em; margin-top: 0.15em; flex-shrink: 0;
  background: currentColor; -webkit-mask: var(--icon-fail) center / contain no-repeat; mask: var(--icon-fail) center / contain no-repeat;
}

.input, .select, .textarea {
  width: 100%;
  min-height: var(--touch);
  padding: 0.6em 0.8em;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: none; border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--fail); box-shadow: inset 3px 0 0 var(--fail); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-sunk); color: var(--text-3); cursor: not-allowed; }
.input--mono { font-family: var(--font-mono); font-size: 0.95rem; }
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none; padding-right: 2.5em;
  background-image: var(--icon-select); background-repeat: no-repeat;
  background-position: right 0.7em center; background-size: 1.1em;
}

.input-group { display: flex; align-items: stretch; }
.input-group > .input { border-radius: var(--r-2) 0 0 var(--r-2); }
.input-group > .btn { border-radius: 0 var(--r-2) var(--r-2) 0; }
.input-group__addon {
  display: inline-flex; align-items: center; padding-inline: 0.8em;
  border: 1px solid var(--line-strong); border-right: 0; border-radius: var(--r-2) 0 0 var(--r-2);
  background: var(--surface-sunk); color: var(--text-2); font-family: var(--font-mono); font-size: 0.9rem;
}
.input-group__addon + .input { border-radius: 0 var(--r-2) var(--r-2) 0; }

/* Checkbox & radio: native inputs, restyled, 44px row */
.check-field, .radio-field {
  display: flex; gap: var(--s-3); align-items: flex-start;
  min-height: var(--touch); padding-block: var(--s-2); cursor: pointer;
}
.check-field input, .radio-field input {
  appearance: none; flex-shrink: 0;
  width: 1.375rem; height: 1.375rem; margin-top: 0.1em;
  border: 2px solid var(--line-strong); background: var(--surface);
  display: grid; place-content: center; cursor: pointer;
}
.check-field input { border-radius: 4px; }
.radio-field input { border-radius: 50%; }
.check-field input::before {
  content: ""; width: 0.95rem; height: 0.95rem; transform: scale(0);
  background: var(--on-accent); -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
  transition: transform var(--dur-1) var(--ease-out);
}
.radio-field input::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--on-accent); transform: scale(0); transition: transform var(--dur-1) var(--ease-out); }
.check-field input:checked, .radio-field input:checked { background: var(--accent); border-color: var(--accent); }
.check-field input:checked::before, .radio-field input:checked::before { transform: scale(1); }
.check-field input:focus-visible, .radio-field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.check-field__text { display: grid; gap: 0.1rem; }
.check-field__text .hint { font-weight: 400; }

/* Switch: <button role="switch" aria-checked="true" class="switch"> */
.switch {
  position: relative; width: 3rem; height: 1.75rem; border-radius: var(--r-round);
  border: 1px solid var(--line-strong); background: var(--surface-sunk); padding: 0; flex-shrink: 0;
}
.switch::before { content: ""; position: absolute; inset: -9px -2px; } /* hit area */
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--text-3); transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2);
}
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(1.25rem); background: var(--on-accent); }

.fieldset { border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); min-width: 0; }
.fieldset legend { padding-inline: var(--s-2); font-weight: 650; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-6); }

/* The scan form: URL in, beacon button out. Used in hero and empty states. */
.scan-form { display: grid; gap: var(--s-2); width: 100%; max-width: 36rem; }
.scan-form__row {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-2); border-radius: calc(var(--r-2) + 4px);
  background: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-2);
}
.scan-form__row:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent), var(--shadow-2); }
.scan-form__input {
  flex: 1; min-width: 0; min-height: 3.25rem; border: 0; background: transparent; color: var(--text);
  padding-inline: var(--s-3); font-family: var(--font-mono); font-size: 1.0625rem;
}
.scan-form__input::placeholder { color: var(--text-3); opacity: 1; }
.scan-form__input:focus-visible { outline: none; }
.scan-form__note { font-size: var(--step--1); color: var(--text-2); }
@media (min-width: 30em) {
  .scan-form__row { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   08 STATUS SYSTEM
   Rule: status is never colour alone. Every status shows a distinct shape
   (circle/triangle/diamond/square) AND a text label.
   ========================================================================== */

.sicon {
  display: inline-block; width: 1.25em; height: 1.25em; flex-shrink: 0;
  background-color: var(--tone-graphic, currentColor);
  -webkit-mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat;
  mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat;
  vertical-align: -0.2em;
}
.sicon--lg { width: 1.75rem; height: 1.75rem; }

.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  min-height: 1.75rem; padding: 0.15em 0.6em 0.15em 0.45em;
  border-radius: var(--r-2);
  border: 1px solid var(--tone-line, var(--line));
  background: var(--tone-bg, var(--surface-sunk));
  color: var(--tone, var(--text-2));
  font-size: var(--step--1); font-weight: 650; line-height: 1.2; white-space: nowrap;
}
.badge[data-status]::before {
  content: ""; width: 1.05em; height: 1.05em; background: currentColor;
  -webkit-mask: var(--tone-icon) center / contain no-repeat; mask: var(--tone-icon) center / contain no-repeat;
}
.badge--solid { background: var(--tone); color: var(--surface); border-color: transparent; }
.badge--count { font-variant-numeric: tabular-nums; }

/* Neutral tag for categories / plan names */
.tag {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.1em 0.5em; border-radius: var(--r-1);
  background: var(--surface-sunk); border: 1px solid var(--line);
  color: var(--text-2); font-size: var(--step--1); font-weight: 550; line-height: 1.5;
}
.tag--accent { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--text); }

/* Check ID: the catalogue number of a check, e.g. MAIL-03. Always mono. */
.cid {
  display: inline-block;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-2);
  padding: 0.05em 0.4em; border-radius: var(--r-1);
  border: 1px solid var(--line); background: var(--surface-2);
  white-space: nowrap; line-height: 1.5;
}

/* Small live-status lamp (monitoring on/off) */
.lamp {
  display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--tone-graphic, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-graphic, var(--accent)) 25%, transparent);
  flex-shrink: 0;
}
.lamp--live { animation: lamp-pulse 2.4s var(--ease-in-out) 4; }

/* Status counts strip: 3 fail · 5 warn · 21 pass */
.tally { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; }
.tally__item {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.35em 0.75em; border-radius: var(--r-2);
  background: var(--tone-bg); color: var(--tone); border: 1px solid var(--tone-line);
  font-weight: 650; font-size: var(--step--1);
}
.tally__item .sicon { width: 1.1em; height: 1.1em; }
.tally__num { font-variant-numeric: tabular-nums; font-size: 1rem; }
.tally__label { color: var(--text); font-weight: 500; }

/* ==========================================================================
   09 ALERTS, TOASTS, DISCLAIMER
   ========================================================================== */

.alert {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4); border-radius: var(--r-2);
  background: var(--tone-bg, var(--surface-sunk));
  border: 1px solid var(--tone-line, var(--line));
  border-left: 4px solid var(--tone-graphic, var(--line-strong));
  color: var(--text);
}
.alert::before {
  content: ""; width: 1.35rem; height: 1.35rem; margin-top: 0.1rem;
  background: var(--tone-graphic, var(--text-2));
  -webkit-mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat; mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat;
}
.alert__title { font-weight: 650; }
.alert__body { display: grid; gap: var(--s-1); }
.alert__body > p { max-width: none; }
.alert__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

/* Banner variant spans the page top (e.g. "Payments are in test mode") */
.banner {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; justify-content: center;
  padding: var(--s-2) var(--gutter); min-height: var(--touch);
  background: var(--tone-bg, var(--surface-sunk)); color: var(--text);
  border-bottom: 1px solid var(--tone-line, var(--line)); font-size: var(--step--1);
}

/* Toasts: <div class="toast-region" aria-live="polite"> + .toast children */
.toast-region {
  position: fixed; z-index: 90; inset-inline: var(--gutter); bottom: var(--gutter);
  display: grid; gap: var(--s-2); justify-items: end; pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: start;
  width: min(24rem, 100%);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--navy-900); color: #e9eff6;
  border: 1px solid var(--navy-600); border-radius: var(--r-3); box-shadow: var(--shadow-3);
  animation: toast-in var(--dur-3) var(--ease-out);
  --pass: #5fd49a; --warn: #f4b740; --fail: #ff8a80; --info: #8cc0ff;
  --pass-graphic: #5fd49a; --warn-graphic: #f4b740; --fail-graphic: #ff8a80; --info-graphic: #8cc0ff;
}
.toast::before {
  content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.15rem;
  background: var(--tone, var(--info));
  -webkit-mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat; mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat;
}
.toast__text { font-size: 0.95rem; }
.toast__close { color: #b3c2d3; background: none; border: 0; width: 2.75rem; height: 2.75rem; margin: -0.5rem -0.25rem -0.5rem 0; border-radius: var(--r-2); display: grid; place-items: center; }
.toast__close:hover { color: #fff; background: rgb(255 255 255 / 0.08); }

/* The non-legal-advice notice. Required on every scan result + report. */
.disclaimer {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px dashed var(--line-strong); border-radius: var(--r-2);
  color: var(--text-2); font-size: var(--step--1); line-height: 1.5;
  background: var(--surface-2);
}
.disclaimer::before {
  content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; background: var(--text-3);
  -webkit-mask: var(--icon-info) center / contain no-repeat; mask: var(--icon-info) center / contain no-repeat;
}
.disclaimer p { max-width: none; }

/* ==========================================================================
   10 PANELS
   Panels are containers with --r-3. Not every block needs one.
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--panel-pad, var(--s-5));
  box-shadow: var(--shadow-1);
  min-width: 0;
}
.panel--flush { --panel-pad: 0; overflow: hidden; }
.panel--sunk { background: var(--surface-sunk); box-shadow: none; }
.panel--raised { box-shadow: var(--shadow-2); }
.panel--accent { border-top: 3px solid var(--accent); }
.panel__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.panel__title { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; }
.panel__body { padding: var(--s-5); }
.panel__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--step--1); color: var(--text-2); }
@media (max-width: 30em) { .panel:not(.panel--flush) { --panel-pad: var(--s-4); } .panel__head, .panel__body { padding-inline: var(--s-4); } }

/* ==========================================================================
   11 WATCH LOG
   The signature component. A logbook of timestamped observations, each with
   a lamp on a vertical "watch line". Used for scan progress, scan results,
   monitoring history and the admin audit trail.

   <ol class="log">
     <li class="log__entry" data-status="fail">
       <time class="log__time" datetime="2026-11-04T03:12:07Z">03:12:07</time>
       <span class="log__lamp" aria-hidden="true"></span>
       <div class="log__body">
         <p class="log__head"><span class="cid">MAIL-03</span> <span class="log__title">No DMARC policy</span> <span class="log__status">Fail</span></p>
         <p class="log__text">Plain-language explanation…</p>
       </div>
     </li>
   </ol>
   ========================================================================== */

.log {
  list-style: none; padding: 0; margin: 0;
  position: relative;
  font-size: 0.975rem;
}
.log__entry {
  position: relative;
  display: grid;
  grid-template-columns: 4.75rem 1.5rem minmax(0, 1fr);
  column-gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule-texture);
}
.log__entry:first-child { border-top: 0; }
/* watch line */
.log__entry::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(4.75rem + var(--s-3) + 0.75rem - 1px);
  width: 2px; background: var(--line);
}
.log__entry:first-child::before { top: 1.4rem; }
.log__entry:last-child::before { bottom: calc(100% - 1.4rem); }
.log__entry:only-child::before { display: none; }
.log__time {
  font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-3);
  font-variant-numeric: tabular-nums; padding-top: 0.2rem; white-space: nowrap;
}
.log__lamp {
  position: relative; z-index: 1; justify-self: center;
  width: 1.25rem; height: 1.25rem; margin-top: 0.15rem;
  background: var(--tone-graphic, var(--text-3));
  -webkit-mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat; mask: var(--tone-icon, var(--icon-info)) center / contain no-repeat;
}
.log__body { display: grid; gap: 0.2rem; min-width: 0; }
.log__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; max-width: none; }
.log__title { font-weight: 650; color: var(--text); }
.log__status {
  font-size: var(--step--1); font-weight: 650; color: var(--tone, var(--text-3));
}
.log__text { color: var(--text-2); max-width: 62ch; }
.log__meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-3); overflow-wrap: anywhere; }

/* Pending entry: the beam is still checking this one */
.log__entry[data-state="running"] .log__lamp {
  -webkit-mask: none; mask: none; border-radius: 50%;
  width: 0.875rem; height: 0.875rem; margin-top: 0.35rem;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: lamp-pulse 1.4s var(--ease-in-out) infinite;
}
.log__entry[data-state="running"] .log__title { color: var(--text-2); font-weight: 500; }
.log__entry[data-state="queued"] { opacity: 0.6; }
.log__entry[data-state="queued"] .log__lamp { -webkit-mask: none; mask: none; border-radius: 50%; width: 0.75rem; height: 0.75rem; margin-top: 0.4rem; background: var(--surface); border: 2px solid var(--line-strong); }

/* Log inside a panel with a header strip: "Watch log · example.nl" */
.logbook { overflow: hidden; }
.logbook__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.logbook__site { font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); display: inline-flex; align-items: center; gap: var(--s-2); overflow-wrap: anywhere; }
.logbook__body {
  padding: var(--s-2) var(--s-5);
}
.logbook__foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--text-3); display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between; }
@media (max-width: 30em) {
  .log__entry { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .log__entry::before { left: calc(0.75rem - 1px); }
  .log__time { grid-column: 2; grid-row: 1; padding-top: 0; }
  .log__lamp { grid-column: 1; grid-row: 1 / span 2; }
  .log__body { grid-column: 2; }
  .logbook__body, .logbook__head, .logbook__foot { padding-inline: var(--s-4); }
}

/* ==========================================================================
   12 CHECK ROWS & RESULTS
   A check row is one finding in a report or result page; expand for the fix.

   <article class="check" data-status="warn">
     <span class="sicon" aria-hidden="true"></span>
     <div class="check__main">
       <p class="check__meta"><span class="cid">HDR-02</span> Security headers</p>
       <h3 class="check__title">Content-Security-Policy is missing</h3>
       <p class="check__summary">…</p>
       <details class="check__fix"><summary>How to fix</summary> … </details>
     </div>
     <span class="badge" data-status="warn">Warning</span>
   </article>
   ========================================================================== */

.checks { display: grid; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); overflow: hidden; }
.check {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  position: relative;
}
.checks > .check:first-child { border-top: 0; }
.check::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone-graphic, transparent); }
.check[data-status="pass"]::before, .check[data-status="skip"]::before { background: transparent; }
/* narrow screens: the badge carries icon + label, so the standalone icon hides */
.check > .sicon { display: none; width: 1.4rem; height: 1.4rem; margin-top: 0.15rem; }
.check > .badge { grid-column: 1; justify-self: start; align-self: start; grid-row: 1; }
.check__main { display: grid; gap: var(--s-1); min-width: 0; grid-column: 1; }
.check__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--step--1); color: var(--text-3); max-width: none; }
.check__title { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; line-height: 1.35; }
.check__summary { color: var(--text-2); }
.check__evidence { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-2); background: var(--surface-sunk); border-radius: var(--r-1); padding: var(--s-2) var(--s-3); overflow-wrap: anywhere; max-width: 100%; }
@media (min-width: 40em) {
  .check { grid-template-columns: auto minmax(0, 1fr) auto; }
  .check > .badge { grid-column: 3; grid-row: 1; justify-self: end; }
  .check > .sicon { display: block; grid-column: 1; grid-row: 1; }
  .check__main { grid-column: 2; grid-row: 1; }
}
.check[data-status="pass"] .check__title { font-weight: 550; }

/* Expandable fix steps (native details) */
.check__fix, .disclosure { margin-top: var(--s-2); }
.check__fix > summary, .disclosure > summary {
  display: inline-flex; align-items: center; gap: 0.35em; min-height: var(--touch);
  color: var(--link); font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--r-2);
}
.check__fix > summary::-webkit-details-marker, .disclosure > summary::-webkit-details-marker { display: none; }
.check__fix > summary::before, .disclosure > summary::before {
  content: ""; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
.check__fix[open] > summary::before, .disclosure[open] > summary::before { transform: rotate(90deg); }
.check__fix > summary:hover, .disclosure > summary:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.fix-steps { display: grid; gap: var(--s-3); padding: var(--s-4); margin-top: var(--s-1); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); }
.fix-steps ol { padding-left: 1.25rem; display: grid; gap: var(--s-2); }
.fix-steps .ref { font-size: var(--step--1); color: var(--text-3); }

/* Group heading inside a results list */
.check-group { display: grid; gap: var(--s-3); }
.check-group + .check-group { margin-top: var(--s-7); }
.check-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.check-group__title { font-size: var(--step-2); }

/* Result header: gauge + grade + tally */
.result-head {
  display: grid; gap: var(--s-5); align-items: center;
  padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface);
}
@media (min-width: 48em) { .result-head { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6); } }
.result-head__site { font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-2); overflow-wrap: anywhere; }

/* ==========================================================================
   13 SCORE GAUGE & GRADE BADGE
   <div class="gauge" style="--score:72" data-status="warn" role="img" aria-label="Score 72 out of 100, grade C">
     <span class="gauge__value">72</span><span class="gauge__unit">of 100</span>
   </div>
   Colour by grade: A–B pass, C–D warn, E–F fail.
   ========================================================================== */

.gauge {
  --size: 9.5rem;
  --score: 0;
  --track: 10px;
  position: relative; display: inline-grid; place-content: center; text-align: center;
  width: var(--size); height: var(--size); flex-shrink: 0;
  border-radius: 50%;
  isolation: isolate;
}
/* bezel ticks: an instrument dial, every 9° */
.gauge::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(var(--line-strong) 0 0.6deg, transparent 0.6deg 9deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  opacity: 0.8;
}
/* score arc */
.gauge::after {
  content: ""; position: absolute; inset: 8px; border-radius: 50%; z-index: -1;
  background: conic-gradient(var(--tone-graphic, var(--accent)) calc(var(--score) * 1%), var(--surface-sunk) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--track)), #000 calc(100% - var(--track) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--track)), #000 calc(100% - var(--track) + 0.5px));
}
.gauge__value { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--size) * 0.3); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.gauge__unit { font-size: var(--step--1); color: var(--text-3); margin-top: 0.2rem; }
.gauge--sm { --size: 4.5rem; --track: 6px; }
.gauge--sm::before { display: none; }
.gauge--sm::after { inset: 0; }
.gauge--sm .gauge__unit { display: none; }
.gauge--lg { --size: 12rem; --track: 12px; }

.grade {
  display: inline-grid; place-items: center;
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: var(--r-2);
  background: var(--tone-bg, var(--surface-sunk));
  border: 2px solid var(--tone, var(--line-strong));
  color: var(--tone, var(--text));
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1;
  position: relative;
}
/* flag hoist: a heavier left edge, like a signal flag on its line */
.grade { border-left-width: 5px; }
.grade--sm { width: 2.25rem; height: 2.25rem; font-size: 1.25rem; border-width: 1.5px; border-left-width: 4px; }
.grade--lg { width: 5rem; height: 5rem; font-size: 3rem; }

.score-line { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.score-line__text { display: grid; gap: 0.15rem; }
.score-line__label { font-weight: 650; }

/* ==========================================================================
   14 HERO & BEACON BEAM
   The one orchestrated moment on marketing pages: a slow beam sweep behind the
   hero while the sample watch log writes itself. Static under reduced motion.
   ========================================================================== */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--s-8) var(--s-8);
  background-color: var(--navy-950);
}
@media (min-width: 56em) { .hero { padding-block: var(--s-9) var(--s-9); } }
.hero__grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 64em) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); } }
.hero__copy { display: grid; gap: var(--s-5); justify-items: start; }
.hero__title { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 15ch; }
.hero__lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-2); max-width: 34rem; }
.hero__visual { position: relative; min-width: 0; }

/* Horizon: thin line + faint harbour lights at the hero base */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}

.beam {
  position: absolute; z-index: -1; pointer-events: none;
  width: 260vmax; height: 260vmax;
  left: var(--beam-x, 78%); top: var(--beam-y, 108%);
  translate: -50% -50%;
  background: conic-gradient(from 0deg,
    rgb(var(--beam-color) / 0) 0deg,
    rgb(var(--beam-color) / 0.0) 318deg,
    rgb(var(--beam-color) / 0.10) 340deg,
    rgb(var(--beam-color) / 0.22) 352deg,
    rgb(var(--beam-color) / 0.0) 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 0, #000 30%, transparent 62%);
  mask: radial-gradient(closest-side, #000 0, #000 30%, transparent 62%);
  rotate: -42deg;
}
@media (prefers-reduced-motion: no-preference) {
  .beam { animation: beam-sweep var(--sweep) var(--ease-in-out) 3 alternate; } /* WCAG 2.2.2: stops after ~27 s, and can be paused */
}
/* The lantern at the beam origin */
.beam-origin {
  position: absolute; z-index: -1; width: 10px; height: 10px; border-radius: 50%;
  left: var(--beam-x, 78%); top: var(--beam-y, 108%); translate: -50% -50%;
  background: var(--accent); box-shadow: 0 0 24px 8px rgb(var(--beam-color) / 0.5);
}
/* Starfield / harbour-light texture for night bands */
.night-sky {
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgb(255 255 255 / 0.35), transparent),
    radial-gradient(1px 1px at 33% 64%, rgb(255 255 255 / 0.22), transparent),
    radial-gradient(1px 1px at 58% 16%, rgb(255 255 255 / 0.3), transparent),
    radial-gradient(1px 1px at 81% 42%, rgb(255 255 255 / 0.2), transparent),
    radial-gradient(1.5px 1.5px at 92% 12%, rgb(255 255 255 / 0.35), transparent),
    radial-gradient(1px 1px at 6% 78%, rgb(255 255 255 / 0.18), transparent),
    radial-gradient(1200px 500px at 70% 120%, #183049 0, transparent 70%);
}

/* Log reveal on page load (hero only): add .is-writing to the .log */
@media (prefers-reduced-motion: no-preference) {
  .log.is-writing > .log__entry { animation: log-write var(--dur-3) var(--ease-out) both; }
  .log.is-writing > .log__entry:nth-child(1) { animation-delay: 300ms; }
  .log.is-writing > .log__entry:nth-child(2) { animation-delay: 750ms; }
  .log.is-writing > .log__entry:nth-child(3) { animation-delay: 1200ms; }
  .log.is-writing > .log__entry:nth-child(4) { animation-delay: 1650ms; }
  .log.is-writing > .log__entry:nth-child(5) { animation-delay: 2100ms; }
  .log.is-writing > .log__entry:nth-child(6) { animation-delay: 2550ms; }
  .log.is-writing > .log__entry:nth-child(n+7) { animation-delay: 3000ms; }
}

/* ==========================================================================
   15 MARKETING BLOCKS
   ========================================================================== */

/* Watch list: what we check, as a catalogue with check-family codes */
.watchlist { list-style: none; padding: 0; display: grid; border-top: 1px solid var(--line); }
@media (min-width: 48em) { .watchlist { grid-template-columns: 1fr 1fr; column-gap: var(--s-7); } }
.watchlist__item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s-1) var(--s-4);
  padding-block: var(--s-5); border-bottom: 1px solid var(--line);
}
.watchlist__code { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; color: var(--accent-ink); padding-top: 0.25rem; }
@media (max-width: 29.99em) { .watchlist__item { grid-template-columns: minmax(0, 1fr); } .watchlist__code { padding-top: 0; } }
@media (min-width: 30em) { .watchlist__code { grid-row: span 3; } }
.watchlist__title { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 650; letter-spacing: 0; line-height: 1.35; }
.watchlist__text { color: var(--text-2); }
.watchlist__ref { font-size: var(--step--1); color: var(--text-3); }

/* Steps: a real sequence, so numbered */
.steps { list-style: none; padding: 0; display: grid; gap: var(--s-6); counter-reset: step; }
@media (min-width: 56em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.step { position: relative; display: grid; gap: var(--s-2); counter-increment: step; padding-top: var(--s-7); }
.step::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  background: var(--surface); color: var(--text); border: 2px solid var(--accent);
}
/* the course line linking the steps */
.step::after {
  content: ""; position: absolute; top: 1.25rem; left: 3.25rem; right: calc(-1 * var(--s-6) + 0.75rem); height: 0;
  border-top: 2px dashed var(--line-strong);
}
.step:last-child::after { display: none; }
@media (max-width: 55.99em) { .step::after { display: none; } }
.step__title { font-size: var(--step-2); }
.step__text { color: var(--text-2); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: var(--touch); padding-block: var(--s-4);
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.35;
  cursor: pointer; list-style: none;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: ""; width: 1.25rem; height: 1.25rem; flex-shrink: 0; background: var(--text-2);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat;
  rotate: 90deg; transition: rotate var(--dur-2) var(--ease-out);
}
.faq__item[open] > summary::after { rotate: -90deg; }
.faq__item > summary:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq__answer { padding-bottom: var(--s-5); color: var(--text-2); display: grid; gap: var(--s-3); }

/* Stat: a figure with its source. Only for sourced facts. */
.stat { display: grid; gap: var(--s-1); padding-left: var(--s-4); border-left: 2px solid var(--accent); }
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat__label { color: var(--text-2); max-width: 30ch; }
.stat__source { font-size: var(--step--2); color: var(--text-3); }

/* Ticked list for plan features */
.ticks { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.ticks li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-2); }
.ticks li::before {
  content: ""; width: 1.1rem; height: 1.1rem; margin-top: 0.3em; background: var(--pass);
  -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat;
}
.ticks li.is-no::before { background: var(--text-3); -webkit-mask: var(--icon-skip) center / contain no-repeat; mask: var(--icon-skip) center / contain no-repeat; }
.ticks li.is-no { color: var(--text-3); }

/* Callout band (CTA strip) */
.cta-band { display: grid; gap: var(--s-5); align-items: center; padding: var(--s-6); border-radius: var(--r-3); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 56em) { .cta-band { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-7); } }

/* ==========================================================================
   16 PRICING
   Pricing is a comparison, so it is a table-like grid with aligned rows,
   not three identical floating cards.
   ========================================================================== */

.pricing {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}
@media (min-width: 64em) {
  .pricing { gap: 0; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
  .pricing > .plan { border: 0; border-radius: 0; box-shadow: none; }
  .pricing > .plan + .plan { border-left: 1px solid var(--line); }
  .pricing > .plan--featured { box-shadow: inset 0 3px 0 var(--accent); }
}
.plan {
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--s-4);
  padding: var(--s-6) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  position: relative; min-width: 0;
}
.plan--featured { border-top: 3px solid var(--accent); }
.plan__name { font-size: var(--step-2); }
.plan__for { color: var(--text-2); font-size: 0.975rem; }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.plan__amount { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__per { color: var(--text-2); }
.plan__vat { flex-basis: 100%; font-size: var(--step--1); color: var(--text-3); }
.plan__flag { position: absolute; top: var(--s-4); right: var(--s-4); }
.plan__cta { margin-top: var(--s-2); }

/* Price compact (checkout summary) */
.price-summary { display: grid; gap: var(--s-2); }
.price-summary__row { display: flex; justify-content: space-between; gap: var(--s-4); font-variant-numeric: tabular-nums; }
.price-summary__row--total { border-top: 1px solid var(--line); padding-top: var(--s-3); margin-top: var(--s-2); font-weight: 700; font-size: var(--step-1); }

/* Payment method choice (radio cards) */
.choice { display: grid; gap: var(--s-2); }
.choice__option {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: 3.5rem; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); cursor: pointer;
}
.choice__option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.choice__option:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice__option input { accent-color: var(--accent); width: 1.25rem; height: 1.25rem; }

/* ==========================================================================
   17 DATA TABLES
   Wrap in .table-wrap for horizontal scroll inside the component (never the page).
   ========================================================================== */

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.table { width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.table caption { text-align: left; padding: var(--s-4) var(--s-4) var(--s-2); font-weight: 650; }
.table th, .table td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.table thead th {
  font-size: var(--step--1); font-weight: 650; color: var(--text-2);
  background: var(--surface-2); white-space: nowrap; position: sticky; top: 0;
}
.table tbody tr:last-child > * { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .is-num { text-align: right; }
.table .is-mono { font-family: var(--font-mono); font-size: 0.85rem; }
.table .is-nowrap { white-space: nowrap; }
.table .is-actions { text-align: right; white-space: nowrap; }
.table--dense th, .table--dense td { padding: var(--s-2) var(--s-3); }
.table--dense { font-size: 0.9rem; }
.table--zebra tbody tr:nth-child(even) { background: var(--surface-2); }
.table a { font-weight: 550; }
.th-sort { display: inline-flex; align-items: center; gap: 0.3em; background: none; border: 0; padding: 0; font: inherit; color: inherit; min-height: 2rem; }
.th-sort[aria-sort]::after { content: ""; width: 0.8em; height: 0.8em; background: currentColor; -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; rotate: 90deg; }
th[aria-sort="ascending"] .th-sort::after { rotate: -90deg; }

/* Key-value list (report metadata, account details) */
.kv { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--s-2) var(--s-5); }
.kv dt { color: var(--text-3); font-size: 0.95rem; }
.kv dd { color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 30em) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: var(--s-3); } }

/* ==========================================================================
   18 NAVIGATION WIDGETS
   ========================================================================== */

.tabs { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.tabs__tab {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: var(--touch);
  padding-inline: var(--s-4); border: 0; background: none; white-space: nowrap;
  color: var(--text-2); font-weight: 600; font-size: 0.975rem; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs__tab:hover { color: var(--text); background: var(--surface-sunk); }
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs__count { font-size: var(--step--1); color: var(--text-3); font-variant-numeric: tabular-nums; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); list-style: none; padding: 0; font-size: var(--step--1); color: var(--text-3); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--line-strong); }
.breadcrumbs a { color: var(--text-2); display: inline-flex; min-height: 2rem; align-items: center; }
.breadcrumbs [aria-current="page"] { color: var(--text); }

.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); list-style: none; padding: 0; }
.pagination a, .pagination span {
  display: inline-grid; place-items: center; min-width: var(--touch); min-height: var(--touch);
  padding-inline: var(--s-2); border-radius: var(--r-2); text-decoration: none; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.pagination a:hover { background: var(--surface-sunk); color: var(--text); }
.pagination [aria-current="page"] { background: var(--text); color: var(--bg); font-weight: 650; }

/* Segmented control (filters, period switch) */
.segmented { display: inline-flex; align-self: flex-start; padding: 3px; gap: 2px; background: var(--surface-sunk); border: 1px solid var(--line); border-radius: calc(var(--r-2) + 3px); max-width: 100%; overflow-x: auto; }
.segmented button, .segmented a {
  min-height: 2.5rem; padding-inline: var(--s-3); border: 0; border-radius: var(--r-2);
  background: none; color: var(--text-2); font-weight: 600; font-size: var(--step--1); white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em;
}
.segmented [aria-pressed="true"], .segmented [aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }

/* ==========================================================================
   19 FEEDBACK
   ========================================================================== */

.progress { display: grid; gap: var(--s-2); }
.progress__bar { height: 6px; border-radius: var(--r-round); background: var(--surface-sunk); overflow: hidden; border: 1px solid var(--line); }
.progress__fill { height: 100%; width: calc(var(--value, 0) * 1%); background: var(--accent); border-radius: inherit; transition: width var(--dur-3) var(--ease-out); }
.progress__label { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--step--1); color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Scanning indicator: the beam sweeping a small dial.
   <div class="scanning" role="status"><span class="scanning__dial" aria-hidden="true"></span><span>Checking security headers…</span></div> */
.scanning { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text-2); font-weight: 550; }
.scanning__dial {
  position: relative; width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line-strong); overflow: hidden;
  background: conic-gradient(from 0deg, transparent 0 270deg, rgb(var(--beam-color) / 0.15) 300deg, rgb(var(--beam-color) / 0.9) 360deg);
  animation: spin 2.2s linear infinite;
}
.scanning__dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); translate: -50% -50%; }
.scanning--lg .scanning__dial { width: 3.5rem; height: 3.5rem; }

.skeleton {
  display: block; border-radius: var(--r-1);
  background: linear-gradient(90deg, var(--surface-sunk) 0%, var(--surface-2) 50%, var(--surface-sunk) 100%);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite;
  min-height: 1em;
}
.skeleton--text { height: 0.9em; margin-block: 0.35em; }
.skeleton--title { height: 1.4em; width: 60%; }

.empty {
  display: grid; justify-items: center; text-align: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  border: 1px dashed var(--line-strong); border-radius: var(--r-3);
  background: var(--surface-2);
}
.empty__icon { width: 4rem; height: 4rem; color: var(--text-3); }
.empty__icon .lamp-fill { fill: var(--accent); }
.empty__title { font-size: var(--step-2); }
.empty__text { color: var(--text-2); max-width: 40ch; }
.empty .scan-form { width: 100%; margin-top: var(--s-2); }

/* Dialog: native <dialog class="dialog"> */
.dialog {
  width: min(32rem, calc(100vw - 2 * var(--gutter)));
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-3);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-3);
}
.dialog::backdrop { background: rgb(8 18 31 / 0.6); backdrop-filter: blur(2px); }
.dialog__head { padding: var(--s-5) var(--s-5) 0; display: grid; gap: var(--s-2); }
.dialog__title { font-size: var(--step-2); }
.dialog__body { padding: var(--s-4) var(--s-5); color: var(--text-2); }
.dialog__foot { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
@media (prefers-reduced-motion: no-preference) { .dialog[open] { animation: toast-in var(--dur-2) var(--ease-out); } }

/* Tooltip-free definitions: <abbr> with dotted underline */
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }

/* ==========================================================================
   20 APP SHELL (dashboard, report viewer, admin)
   <div class="app">
     <aside class="app__sidebar" id="app-nav"> … <nav class="sidenav"> … </nav></aside>
     <header class="app__topbar"> <button class="btn btn--ghost btn--icon app__menu" data-nav-toggle aria-controls="app-nav" aria-expanded="false">…</button> … </header>
     <main class="app__main" id="main"> … </main>
   </div>
   ========================================================================== */

.app { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.app__sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: min(var(--sidebar-w), 85vw);
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--navy-900); color: #e9eff6;
  border-right: 1px solid var(--navy-700);
  transform: translateX(-100%); visibility: hidden;
  transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  overflow-y: auto;
  /* sidebar is always night: the bridge of the ship */
  color-scheme: dark;
  --text: #e9eff6; --text-2: #b3c2d3; --text-3: #93a6bb; --line: #284563; --line-strong: #6283a8;
  --surface: #12243a; --surface-2: #163049; --surface-sunk: #0a1625; --bg: #0c1a2b;
  --focus: #f4b04b; --link: #8cc0ff; --link-hover: #ffffff;
  --pass: #5fd49a; --warn: #f4b740; --fail: #ff8a80; --info: #8cc0ff;
  --pass-graphic: #5fd49a; --warn-graphic: #f4b740; --fail-graphic: #ff8a80; --info-graphic: #8cc0ff;
}
.app[data-nav-open] .app__sidebar { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out); box-shadow: var(--shadow-3); }
.app__scrim { display: none; }
.app[data-nav-open] .app__scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgb(8 18 31 / 0.55); border: 0; }
.app__topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--topbar-h); padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.app__topbar-title { font-weight: 650; font-size: 1.0625rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app__topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.app__main { padding: var(--s-6) var(--gutter) var(--s-8); min-width: 0; width: 100%; max-width: 80rem; }
.app__brand { color: #e9eff6; padding-inline: var(--s-2); }
@media (min-width: 64em) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .app__sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; transform: none; visibility: visible; width: auto; grid-row: 1 / span 2; transition: none; }
  .app__menu { display: none; }
  .app__main { padding: var(--s-7) var(--s-7) var(--s-9); }
  .app__topbar { padding-inline: var(--s-7); }
}

.sidenav { display: grid; gap: var(--s-5); }
.sidenav__group { display: grid; gap: 2px; }
.sidenav__label { font-size: var(--step--1); color: var(--text-3); padding: 0 var(--s-3) var(--s-1); }
.sidenav a {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--touch); padding-inline: var(--s-3);
  border-radius: var(--r-2); color: var(--text-2); text-decoration: none; font-weight: 550; font-size: 0.975rem;
}
.sidenav a svg { width: 1.2rem; height: 1.2rem; opacity: 0.85; }
.sidenav a:hover { background: rgb(255 255 255 / 0.06); color: var(--text); }
.sidenav a[aria-current="page"] { background: rgb(244 168 58 / 0.14); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.sidenav__count { margin-left: auto; font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--text-3); }
.sidenav__foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--text-3); display: grid; gap: var(--s-2); }

.page-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.page-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); }
.page-head__title { font-size: var(--step-4); }
.page-head__sub { color: var(--text-2); }

/* Stat tiles for dashboard. Use sparingly: 3–4 per view. */
.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.tile { padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); display: grid; gap: var(--s-1); }
.tile__label { font-size: var(--step--1); color: var(--text-2); display: flex; align-items: center; gap: var(--s-2); }
.tile__value { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile__delta { font-size: var(--step--1); color: var(--text-3); }

/* Site card: one watched site in the dashboard list */
.site-list { display: grid; gap: var(--s-3); }
.site-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3);
  position: relative;
}
.site-card:hover { border-color: var(--line-strong); }
.site-card__name { font-family: var(--font-mono); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.site-card__name a { color: var(--text); text-decoration: none; }
.site-card__name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-3); } /* whole card clickable */
.site-card__name a:focus-visible { outline: none; }
.site-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-card__meta { font-size: var(--step--1); color: var(--text-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.site-card__status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2); position: relative; }
@media (min-width: 48em) {
  .site-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-card__status { grid-column: auto; justify-content: flex-end; }
}

/* Uptime / history strip: one cell per night */
.nights { display: flex; gap: 2px; align-items: flex-end; height: 1.75rem; }
.nights__cell { flex: 1; min-width: 3px; max-width: 10px; height: 100%; border-radius: 2px; background: var(--tone-graphic, var(--line)); }
.nights__cell[data-status="pass"] { height: 45%; }
.nights__cell[data-status="warn"] { height: 72%; }
.nights__cell[data-status="fail"] { height: 100%; }

/* ==========================================================================
   21 ADMIN HELPERS
   ========================================================================== */

.admin-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--gutter); min-height: 2.5rem;
  background: repeating-linear-gradient(-45deg, var(--warn-bg) 0 12px, color-mix(in srgb, var(--warn-bg) 70%, var(--surface)) 12px 24px);
  border-bottom: 1px solid var(--warn-line); color: var(--text); font-size: var(--step--1); font-weight: 600;
}
.filters { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; padding: var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); margin-bottom: var(--s-4); }
.filters .field { flex: 1 1 12rem; }
.filters .field + .field { margin-top: 0; }
.json-view { font-family: var(--font-mono); font-size: 0.8125rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 28rem; overflow: auto; }
.status-pill { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--step--1); font-weight: 600; color: var(--text-2); }
.status-pill::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tone, var(--text-3)); }

/* ==========================================================================
   22 REPORT PAGE
   <article class="report">
     <header class="report__cover"> … </header>
     <nav class="report__toc"> … </nav>
     <section class="report__section"> … </section>
   </article>
   ========================================================================== */

.report { max-width: 56rem; margin-inline: auto; display: grid; gap: var(--s-7); }
.report__cover {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: var(--s-5);
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-3);
}
@media (min-width: 48em) { .report__cover { padding: var(--s-8) var(--s-7); } }
.report__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); color: var(--text-2); font-size: var(--step--1); }
.report__title { font-size: var(--step-5); max-width: 18ch; }
.report__site { font-family: var(--font-mono); font-size: var(--step-1); color: var(--accent-ink); overflow-wrap: anywhere; }
.report__summary { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 40em) { .report__summary { grid-template-columns: auto auto minmax(0, 1fr); } }
.report__toc ol { columns: 2 14rem; column-gap: var(--s-6); padding-left: 1.25rem; }
.report__toc li { break-inside: avoid; padding-block: 0.2rem; }
.report__section { display: grid; gap: var(--s-4); scroll-margin-top: var(--s-6); }
.report__section > h2 { padding-bottom: var(--s-2); border-bottom: 2px solid var(--text); }
.report__sign { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-2) var(--r-2) 0; }
.priority-list { counter-reset: prio; list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.priority-list > li {
  counter-increment: prio; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface);
}
.priority-list > li::before {
  content: counter(prio); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--r-1);
  background: var(--text); color: var(--bg); font-weight: 700; font-variant-numeric: tabular-nums;
}
.print-only { display: none; }

/* ==========================================================================
   23 PROSE (legal pages, long-form help)
   ========================================================================== */

.prose { max-width: var(--measure); font-size: var(--step-0); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--step-3); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-2); margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: 0.4em; }
.prose li::marker { color: var(--text-3); }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: var(--s-4); color: var(--text-2); }
.prose table { width: 100%; font-size: 0.95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: var(--s-2) var(--s-3); text-align: left; }
.prose .updated { font-size: var(--step--1); color: var(--text-3); }

/* ==========================================================================
   24 UTILITIES (small, deliberate set)
   ========================================================================== */

.u-center { text-align: center; }
.u-right { text-align: right; }
.u-mono { font-family: var(--font-mono); }
.u-serif { font-family: var(--font-display); }
.u-nowrap { white-space: nowrap; }
.u-break { overflow-wrap: anywhere; }
.u-muted { color: var(--text-2); }
.u-faint { color: var(--text-3); }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-7 { margin-top: var(--s-7); }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-full { width: 100%; }
.u-measure { max-width: var(--measure); }
.u-hide-mobile { display: none; }
@media (min-width: 48em) { .u-hide-mobile { display: revert; } .u-hide-desktop { display: none; } }
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--s-6); }

/* ==========================================================================
   25 MOTION
   ========================================================================== */

@keyframes spin { to { rotate: 360deg; } }
@keyframes beam-sweep { from { rotate: -62deg; } to { rotate: -18deg; } }
@keyframes lamp-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone, var(--accent)) 25%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tone, var(--accent)) 0%, transparent); }
}
@keyframes log-write { from { opacity: 0; translate: -6px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes toast-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scanning__dial { animation: none; background: conic-gradient(from 300deg, transparent 0 270deg, rgb(var(--beam-color) / 0.9) 360deg); }
  .lamp--live, .log__entry[data-state="running"] .log__lamp { animation: none; }
  .skeleton { animation: none; }
}

/* ==========================================================================
   26 PRINT — reports must print cleanly on A4, light, ink-friendly.
   ========================================================================== */

@media print {
  @page { size: A4; margin: 16mm 15mm 18mm; }
  /* :root:not([data-theme="light"]) matches the specificity of the OS dark-mode rule so paper always wins */
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"], .theme-night, .app__sidebar, .site-footer {
    color-scheme: light;
    --rule-texture: rgb(12 26 43 / 0.06); --focus: #1d5fb0; --on-accent: #0c1a2b;
    --bg: #ffffff; --bg-alt: #ffffff; --surface: #ffffff; --surface-2: #f6f8fb; --surface-sunk: #eef2f6;
    --line: #c4ceda; --line-strong: #8a9db3;
    --text: #0c1a2b; --text-2: #2f4157; --text-3: #4a5d73;
    --accent: #f4a83a; --accent-ink: #7a4900; --link: #0c1a2b;
    --pass: #13703f; --warn: #7a4900; --fail: #a3221b; --info: #1d5fb0;
    --pass-graphic: #13703f; --warn-graphic: #b87100; --fail-graphic: #a3221b; --info-graphic: #1d5fb0;
    --pass-bg: #ffffff; --warn-bg: #ffffff; --fail-bg: #ffffff; --info-bg: #ffffff;
    --skip: #4a5d73; --pass-line: #13703f; --warn-line: #7a4900; --fail-line: #a3221b; --info-line: #1d5fb0; --selection: #ffd99a;
    --shadow-1: none; --shadow-2: none; --shadow-3: none;
  }
  html { font-size: 10.5pt; }
  body { background: #fff !important; color: #0c1a2b; }
  .site-header, .site-footer, .app__sidebar, .app__topbar, .app__scrim, .no-print, .toast-region,
  .beam, .beam-origin, .btn, .scan-form, .tabs, .pagination, .skip-link, .theme-toggle, .banner, .admin-strip { display: none !important; }
  .print-only { display: block !important; }
  .app { display: block; }
  .app__main { padding: 0; max-width: none; }
  .report { max-width: none; gap: 8mm; }
  .report__cover { padding: 0 0 6mm; border-radius: 0; border-bottom: 2px solid #0c1a2b; background: none !important; color: #0c1a2b; }
  .report__cover * { color: #0c1a2b; }
  .night-sky { background: none !important; }
  .report__section { break-before: auto; }
  .report__section > h2 { break-after: avoid; }
  .check, .priority-list > li, .result-head, .panel, .stat, .tile, .alert, .disclaimer, .fix-steps, tr { break-inside: avoid; }
  .check { padding-inline: 0 0; border-top: 1px solid #c4ceda; }
  .check::before { display: none; }
  .checks, .panel, .result-head, .table-wrap { border-color: #c4ceda; box-shadow: none; border-radius: 0; }
  .table-wrap { overflow: visible; }
  .table thead th { position: static; }
  /* fix steps print expanded: theme.js opens all <details> on beforeprint; ::details-content covers Ctrl+P without JS in modern Chromium */
  details.check__fix > summary { display: none; }
  details.check__fix::details-content { content-visibility: visible; display: block; }
  a { color: inherit; text-decoration: none; }
  .prose a[href^="http"]::after, .report a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #4a5d73; overflow-wrap: anywhere; }
  .gauge::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .sicon, .badge::before, .alert::before, .log__lamp { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .disclaimer { border: 1px solid #8a9db3; background: none; }
  .print-footer { position: fixed; bottom: -12mm; left: 0; right: 0; font-size: 8pt; color: #4a5d73; display: flex; justify-content: space-between; }
}

/* === Page additions (B) === login, app, admin pages (frontend B) */

/* Loading skeleton shapes */
.tile-skel { height: 5.5rem; border-radius: var(--r-3); }
.block-skel { height: 14rem; border-radius: var(--r-3); }

/* Login */
.login-wrap { max-width: 30rem; display: grid; gap: var(--s-4); }
.login-panel { padding: var(--s-6) var(--s-5); }
@media (min-width: 40em) { .login-panel { padding: var(--s-7) var(--s-6); } }
.login-sent__icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-round); background: var(--pass-bg); }
.login-foot { text-align: center; margin-inline: auto; }

/* Shell additions */
.app-topbar__user { display: none; align-items: center; gap: var(--s-3); min-width: 0; }
.app-topbar__email { font-size: var(--step--1); color: var(--text-2); max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-plan-tag { text-decoration: none; }
@media (min-width: 48em) { .app-topbar__user { display: inline-flex; } }
.sidenav__email { color: var(--text-2); }
.brand__tag { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 600; color: var(--accent); margin-left: var(--s-1); }
.app__main:focus { outline: none; }
.app__main > .admin-strip { margin: calc(-1 * var(--s-6)) calc(-1 * var(--gutter)) var(--s-5); }
@media (min-width: 64em) { .app__main > .admin-strip { margin: calc(-1 * var(--s-7)) calc(-1 * var(--s-7)) var(--s-6); padding-inline: var(--s-7); } }
.page-head__title:focus { outline: none; }
.page-head__title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.page-head__text { min-width: 0; }
.page-head__actions { gap: var(--s-2); }

/* Sections and columns */
.app-section { display: grid; gap: var(--s-4); margin-top: var(--s-7); min-width: 0; align-content: start; }
.app-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.app-section__title { font-size: var(--step-2); }
.app-section__title:focus { outline: none; }
.app-columns { display: grid; gap: 0 var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 72em) { .app-columns { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.app-tiles + .app-section, .tiles + .app-columns > .app-section { margin-top: var(--s-6); }
.form-grid { display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.form-grid > .field + .field { margin-top: 0; }
.hint[data-status] { color: var(--tone); font-weight: 600; }

/* Score trend: sparkline + large chart */
.spark { display: block; width: 7.5rem; height: 2rem; overflow: visible; }
.spark__line { stroke: var(--tone-graphic, var(--text-2)); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark__dot { fill: var(--tone-graphic, var(--text-2)); }
.spark__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.spark--lg { width: 100%; height: 10rem; }
.trend-chart { display: grid; gap: var(--s-1); }
.trend-chart__axis { display: flex; justify-content: space-between; }

/* Site cards */
.site-card__trend { display: flex; align-items: center; gap: var(--s-3); }
.site-card__trend .nights { width: 7.5rem; height: 1.5rem; }
.site-card__status { align-items: center; }
@media (max-width: 29.99em) { .site-card__trend .spark { display: none; } }

/* Site detail */
.site-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4) var(--s-5); align-items: center; margin-bottom: var(--s-6); }
.site-summary__score { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; font-variant-numeric: tabular-nums; }
.site-summary__trend { grid-column: 1 / -1; display: grid; gap: var(--s-2); }
.site-summary__trend .spark { width: 100%; max-width: 16rem; }
@media (min-width: 48em) { .site-summary { grid-template-columns: auto minmax(0, 1fr) auto; } .site-summary__trend { grid-column: auto; min-width: 14rem; } }
.tab-panel { padding-top: var(--s-5); }
.tab-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-1); }
.site-result { display: grid; gap: var(--s-5); }
.scan-inline { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); }

/* Orders */
.report-cards { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.report-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); }
.report-card__site { font-weight: 600; }
.table-actions { gap: var(--s-1) var(--s-4); flex-wrap: nowrap; }

/* Account */
.account-toc ul { list-style: none; padding: 0; gap: var(--s-1) var(--s-5); }
.account-toc a { display: inline-flex; align-items: center; min-height: var(--touch); }
.branding-grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56em) { .branding-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.accent-group .input { min-width: 0; }
.color-swatch { width: 3.25rem; min-height: var(--touch); padding: 4px; border: 1px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r-2) var(--r-2) 0; background: var(--surface); cursor: pointer; }
.brand-preview {
  --brand-accent: #1d4f91;
  position: relative; overflow: hidden; display: grid; gap: var(--s-2);
  padding: var(--s-6) var(--s-5) var(--s-5); border: 1px solid #ccd6e1; border-radius: var(--r-3);
  background: #ffffff; color: #0c1a2b; color-scheme: light;
}
.brand-preview__bar { position: absolute; inset: 0 0 auto; height: 6px; background: var(--brand-accent); }
.brand-preview__head { display: flex; align-items: center; gap: var(--s-3); min-height: 2.5rem; }
.brand-preview__logo { max-width: 160px; max-height: 48px; width: auto; height: auto; object-fit: contain; }
.brand-preview__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); overflow-wrap: anywhere; }
.brand-preview__kicker { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); }
.brand-preview__site { color: var(--brand-accent); font-weight: 600; }
.brand-preview__btn { display: inline-flex; align-items: center; min-height: 2.25rem; padding-inline: var(--s-3); border-radius: var(--r-2); background: var(--brand-accent); color: #fff; font-weight: 600; font-size: var(--step--1); }
.brand-preview__powered { font-size: var(--step--1); color: #55687e; }
.plan-options { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.plan-option { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
@media (min-width: 40em) { .plan-option { grid-template-columns: minmax(0, 1fr) auto auto; } }
.plan-option__name { font-weight: 650; }
.plan-option__price { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Admin */
.admin-tiles { grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); }
.table tr.is-urgent > * { background: var(--fail-bg); }
.due { display: inline-flex; align-items: center; gap: 0.35em; }
.due--urgent { color: var(--fail); font-weight: 650; }
.link-button { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; text-align: left; font: inherit; cursor: pointer; min-height: 1.75rem; }
.link-button:hover { color: var(--link-hover, var(--text)); }
.review-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); }
@media (min-width: 80em) { .review-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .review-aside { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); } .review-aside { grid-column: 2; grid-row: 1; } .review-main { grid-column: 1; grid-row: 1; } }
.review-main > .app-section:first-child { margin-top: 0; }
.review-timer[data-status] { color: var(--tone); font-weight: 650; }
.kv--stacked { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kv--stacked dt { margin-top: var(--s-2); }
.notes-text { white-space: pre-wrap; }
.summary-textarea { min-height: 12rem; }
.prio-editor { list-style: none; padding: 0; display: grid; gap: var(--s-3); counter-reset: prio; }
.prio-editor__item { counter-increment: prio; position: relative; display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-4) var(--s-4) 3.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.prio-editor__item::before { content: counter(prio); position: absolute; left: var(--s-4); top: var(--s-4); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: var(--r-1); background: var(--text); color: var(--bg); font-weight: 700; font-variant-numeric: tabular-nums; }
.prio-editor__empty { padding: var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--r-3); }
.prio-editor__fields { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-3); min-width: 0; }
.prio-editor__fields .field + .field { margin-top: 0; }
.prio-editor__row { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .prio-editor__row { grid-template-columns: minmax(0, 1fr) 11rem; } }
.prio-editor__row .field + .field { margin-top: 0; }
.prio-editor__actions { gap: var(--s-1); }
.review-cats { gap: var(--s-3); }
.review-cat { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.review-cat > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); min-height: var(--touch); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; }
.review-cat > summary::-webkit-details-marker { display: none; }
.review-cat > summary::before { content: ""; width: 0.55rem; height: 0.55rem; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out); margin-right: var(--s-1); }
.review-cat[open] > summary::before { transform: rotate(45deg); }
.review-cat > summary:hover { background: var(--surface-sunk); }
.review-cat__name { font-weight: 650; margin-right: auto; }
.review-cat > .checks { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-3) var(--r-3); }
.textarea--note { min-height: 4.5rem; }
.review-note { margin-top: var(--s-2); }
.publish-warnings { padding-left: 1.25rem; color: var(--warn); }
.outbox-layout { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 80em) { .outbox-layout:has(.outbox-viewer:not([hidden])) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .outbox-viewer { position: sticky; top: calc(var(--topbar-h) + var(--s-4)); } }
.outbox-viewer { display: grid; gap: var(--s-4); min-width: 0; }
.outbox-viewer h2:focus { outline: none; }
.email-text { margin: 0; max-height: 36rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.875rem; }
.email-frame { width: 100%; height: 32rem; border: 1px solid var(--line); border-radius: var(--r-2); background: #fff; }
/* keep visually-hidden helpers inside scrolling tables from widening the page */
.table-wrap { position: relative; }

/* === Page additions (A) === marketing + purchase-flow pages (frontend A) */
.page-hero { padding-bottom: var(--s-7); }
.page-bare { min-height: 100vh; }
.scan-form__fine { font-size: var(--step--1); color: var(--text-3); max-width: 60ch; }
.scan-form .field-error:not([hidden]) { margin-top: var(--s-2); }
.layout-scan { white-space: nowrap; }
@media (min-width: 56em) and (max-width: 71.99em) { .layout-scan { display: none; } }
/* home */
.stats-grid { --min: 16rem; gap: var(--s-6); }
.stats-grid .stat__value { font-size: var(--step-3); }
.diff-list { display: grid; gap: var(--s-5); }
.diff-item { display: grid; gap: var(--s-1); padding-left: var(--s-4); border-left: 2px solid var(--line); }
.diff-item p { color: var(--text-2); }
/* checks catalogue */
.catalogue-cat { display: grid; gap: var(--s-4); padding-top: var(--s-6); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + var(--s-4)); }
.catalogue-cat__head { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s-4); }
.catalogue-cat__q { font-family: var(--font-display); font-style: italic; }
.check-desc { display: block; font-weight: 400; color: var(--text-2); font-size: var(--step--1); margin-top: 0.15rem; }
.catalogue-cat .table th[scope="row"] { font-weight: 600; text-align: left; }
.catalogue-toc ol { padding-left: 1.25rem; display: grid; gap: var(--s-1); }
@media (min-width: 64em) { .catalogue-aside { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); align-self: start; } }
@media (max-width: 63.99em) { .catalogue-aside { display: none; } }
/* how it works / agencies */
.video-slot { aspect-ratio: 16 / 9; display: grid; place-items: center; text-align: center; padding: var(--s-5); color: var(--text-2); }
.agency-points { gap: var(--s-6); }
.agency-points p { color: var(--text-2); }
/* pricing */
.pricing-strip { justify-content: flex-start; border: 1px solid var(--tone-line, var(--line)); border-radius: var(--r-2); }
.pricing-capacity:empty { display: none; }
.pricing-capacity { margin-top: var(--s-4); }
.plan .segmented { margin-block: var(--s-1); }
.plan .fine { color: var(--text-3); }
.compare-table th[scope="row"] { font-weight: 600; text-align: left; white-space: nowrap; }
.compare-table td { min-width: 12rem; }
/* checkout */
.checkout-steps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--text-3); font-size: var(--step--1); }
.checkout-steps li { display: inline-flex; align-items: center; gap: var(--s-2); }
.checkout-steps li[aria-current="step"] { color: var(--text); font-weight: 650; }
.checkout-steps__num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--r-round); border: 1.5px solid currentColor; font-variant-numeric: tabular-nums; }
.checkout-steps li[aria-current="step"] .checkout-steps__num { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.checkout-error:empty { display: none; }
.checkout-error { margin-bottom: var(--s-5); }
.checkout-error .alert:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-grid { --min: 15rem; gap: var(--s-4) var(--s-5); }
.field--narrow { max-width: 16rem; }
.choice__text { display: grid; gap: 0.1rem; }
.choice > legend { margin-bottom: var(--s-2); }
.ticks--compact { gap: var(--s-1); font-size: var(--step--1); color: var(--text-2); }
.price-summary__sub { display: block; font-weight: 400; }
.price-summary__row > span:last-child { white-space: nowrap; }
@media (min-width: 64em) { .checkout__aside { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); align-self: start; } }
.checkout [data-next-start]:empty { display: none; }
/* mock payment page */
.pay-page { min-height: 100vh; padding-block: var(--s-7); background: var(--bg-alt); }
.pay-test-flag { padding: var(--s-3) var(--s-4); border: 2px dashed var(--warn-graphic, #b87100); border-radius: var(--r-2); background: var(--warn-bg, #fdf0da); color: var(--text); text-align: center; }
.pay-test-flag strong { letter-spacing: 0.02em; }
.pay-brand { font-size: 1.125rem; min-height: 0; }
.pay-alt { justify-content: space-between; }
/* loading + shared result layout */
.page-loading { padding-block: var(--s-7); display: grid; place-items: center; }
.page-loading[hidden] { display: none; }
.scan-result { min-width: 0; }
.scan-result > .result-head { margin-bottom: 0; }
.result-section-head { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
.result-section-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.fix-steps__why, .fix-steps__label { margin-bottom: var(--s-2); }
.fix-steps > * + * { margin-top: var(--s-2); }
.check__note { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-1) var(--r-1) 0; font-size: 0.95rem; }
.locked-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.locked-list li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--s-2); align-items: start; color: var(--text-2); }
.locked-list .sicon { margin-top: 0.25em; }
.unlock-panel { border-top: 3px solid var(--accent); }
.unlocked-bar { padding: var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); }
.upsell-grid { --min: 15rem; }
.upsell { display: flex; flex-direction: column; }
.upsell__cta { margin-top: auto; align-self: flex-start; }
#result-title:focus { outline: none; }
#result-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
/* order */
.order-timeline .log__time { min-width: 6.5ch; }
/* report */
.report__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.report__logo { max-width: 160px; max-height: 48px; width: auto; height: auto; }
.report__brand-name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--text); }
.report--branded .report__cover { box-shadow: inset 0 4px 0 var(--brand-accent); }
.report--branded .report__section > h2 { border-bottom-color: var(--brand-accent); }
.report--branded .report__sign { border-left-color: var(--brand-accent); }
.report--branded .priority-list > li::before { background: var(--brand-accent); color: #fff; }
.report__actions { justify-content: flex-start; }
.priority__head { align-items: baseline; }
.priority__title { font-size: 1.0625rem; }
.priority__tags { gap: var(--s-1); }
.report__pages { columns: 2 14rem; font-size: var(--step--1); padding-left: 1.25rem; margin-top: var(--s-2); }
.report-page .report__cover .result-head { margin: 0; }
@media print {
  .report-page { padding: 0; }
  .report--branded .report__cover { box-shadow: none; border-bottom-color: var(--brand-accent); }
  .report__actions, .report__toc { display: none !important; }
  .upsells, .unlock-panel, .unlocked-bar { display: none !important; }
}
.app-section > *, .review-main > *, .stack > .table-wrap { min-width: 0; }
@media (min-width: 64em) { .app { background: linear-gradient(to right, var(--navy-900) var(--sidebar-w), var(--bg) 0); } }
.table .u-break { overflow-wrap: normal; }
@media (min-width: 56em) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps--4 .step:nth-child(2n)::after { display: none; } }
@media (min-width: 64em) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .steps--4 .step:nth-child(2n)::after { display: block; } .steps--4 .step:last-child::after { display: none; } }
.stats-grid { --min: 12.5rem; }
@media (min-width: 64em) { .stats-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); } }
.review-check.is-hidden { opacity: 0.6; }
.review-check.is-hidden .check__title { text-decoration: line-through; }
.review-hide { min-height: 2.25rem; margin-top: var(--s-1); }
.runs-list { list-style: none; padding: 0; display: grid; gap: var(--s-2); font-size: var(--step--1); }
[data-scan-view] { display: grid; gap: var(--s-6); min-width: 0; }
.scan-title { font-size: var(--step-4); overflow-wrap: anywhere; }
.scan-title .u-mono { font-weight: 600; letter-spacing: -0.02em; }
#result-title:focus, #result-title:focus-visible { outline: none; }
.fix-steps__why, .fix-steps__label { margin-bottom: 0; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 var(--s-3); min-width: 0; }
.form-grid { align-items: start; }
.checkout-summary .btn--lg { white-space: normal; text-align: center; }
.form-grid { align-items: start; }
.plan--toggle { grid-template-rows: auto auto auto auto 1fr auto auto; }
.pricing-strip { display: block; padding-block: var(--s-3); }
.plan--toggle .segmented { justify-self: start; }
.outbox-layout .link-button { min-width: 14rem; }
.plan .ticks { align-content: start; }
.filters ~ * .input-group__addon, .app-section .input-group__addon { white-space: nowrap; }
@media print {
  /* Report footer (BUG-11 / L15): the brand on it is the agency's on white-label reports (rendered by report.js into
     .print-footer, repeated on every page as a fixed element); the margin box only carries the page number. */
  .report-page .print-footer {
    display: grid !important; grid-template-columns: auto 1fr; gap: 0 6mm; align-items: baseline;
    bottom: -15mm; right: 28mm; font-size: 7pt; line-height: 1.3;
  }
  .report-page .print-footer__disc { grid-column: 1 / -1; }
  @page {
    @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 7pt system-ui, sans-serif; color: #4a5d73; }
  }
}

/* === Review fixes (copy/compliance/a11y, Nov 2026) === */
/* H4 / WCAG 1.4.1: links inside footer text are underlined, not told apart by colour alone. Nav lists stay plain. */
.site-footer p a, .site-footer address a { text-decoration: underline; text-underline-offset: 0.15em; }
/* M10 / WCAG 2.2.2: pause control for the hero animations */
.motion-toggle {
  position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 2;
  font-size: var(--step--1); min-height: 2.25rem;
}
[data-motion="paused"] .beam, [data-motion="paused"] .lamp--live, [data-motion="paused"] .log.is-writing > .log__entry { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
/* L28: long placeholders in imprint tables wrap instead of overflowing at 320 px */
.prose table td { overflow-wrap: anywhere; }
/* Unreachable state (no letter grade) */
.grade--unreachable { font-weight: 600; }
/* BUG-5: per-site re-scan sits above the card-wide link overlay */
.site-card__rescan { position: relative; z-index: 1; justify-items: start; }
.site-card__msg:empty { display: none; }
.report__action-msg:empty { display: none; }
.report__action-msg { margin-block: var(--s-4); }