/* Design tokens. Torvane indigo (#4A3AE8, highlight #7566FF) on neutral surfaces: a light theme with
   borders over shadows, 16px body text and 150ms motion, and a neutral
   near-black dark theme with Hanken Grotesk and JetBrains Mono, rounded
   cards and a 4px grid.
   Purple is for actions only (buttons, links, focus, selection). Status
   is always shown with the severity colours, never with the brand. Every
   text colour below passes WCAG AA on the surfaces it is used on. */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces and text */
  --bg: #ffffff; --surface: #f6f6f8; --panel: #ffffff;
  --ink: #131416; --muted: #52627e; --line: #e2e3e8; --line-strong: #c9cbd3;
  /* Brand purple: actions only */
  --brand: #4a3ae8; --brand-hover: #3a2bc9; --on-brand: #ffffff;
  --brand-tint: #f1efff; --brand-edge: #c9c3ff;
  --link: #4a3ae8; --focus: #4a3ae8;
  /* Fixed dark tones for the homepage's dark bands, in both themes */
  --night: #131416; --night-raised: #1f2023; --night-line: #27292c;
  --on-night: #ebedef; --muted-on-night: #a1a7af; --brand-on-night: #a79eff;
  /* Severity (status, never the brand) */
  --critical: #a4161a; --high: #c2410c; --medium: #a15c07; --low: #2f68a8; --info: #646b75; --pass: #2e7d4f;
  /* Severity chips: a light tint of each colour with a dark shade of it as text (all >= 5:1) */
  --critical-bg: #f5e5e6; --critical-fg: #a4161a; --high-bg: #f8eae4; --high-fg: #b23b0b;
  --medium-bg: #f5ede4; --medium-fg: #8f5206; --low-bg: #e8eef5; --low-fg: #2a5e99;
  --info-bg: #eeeff0; --info-fg: #555b64; --pass-bg: #e8f1ec; --pass-fg: #276b44;
  /* Grade badges carry white text, so they keep fixed colours in both themes */
  --grade-a: #2e7d4f; --grade-b: #3f7f35; --grade-c: #a15c07; --grade-d: #c2410c; --grade-f: #a4161a;
  /* Shape: rounded cards, pills for controls */
  --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --pill: 9999px;
  /* Depth: only for things that float above the page */
  --float: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* Motion */
  --dur: 150ms; --ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Type */
  --font: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-family: var(--font);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131416; --surface: #1f2023; --panel: #17181a;
    --ink: #ebedef; --muted: #a1a7af; --line: #27292c; --line-strong: #35373b;
    --brand: #8f84ff; --brand-hover: #a79eff; --on-brand: #0b0b24;
    --brand-tint: #1c1940; --brand-edge: #3f379a;
    --link: #a79eff; --focus: #a79eff;
    --critical: #e5484d; --high: #f2994a; --medium: #f5c04a; --low: #6ba4e6; --info: #8a8f98; --pass: #5bb974;
    --critical-bg: #3c2123; --critical-fg: #ec767a; --high-bg: #3e2f23; --high-fg: #f5b277;
    --medium-bg: #3f3623; --medium-fg: #f8d077; --low-bg: #26313f; --low-fg: #90bbec;
    --info-bg: #2c2d31; --info-fg: #a7abb2; --pass-bg: #23352a; --pass-fg: #84ca97;
    --float: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, pre, textarea, .mono { font-family: var(--mono); font-size: .875em; letter-spacing: 0; }
main { max-width: 960px; margin: 0 auto; padding: 32px 16px 48px; }

/* Type: Hanken Grotesk, tightened at large sizes */
h1, h2, h3, h4 { font-weight: 500; }
h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.025em; margin: 8px 0 16px; }
h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; margin: 32px 0 8px; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
h2.inline { display: inline; font-size: 20px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { font-size: 18px; max-width: 40em; }
.hero { padding: 32px 0 16px; }
.narrow { max-width: 420px; }
.crumbs { color: var(--muted); margin: 0; font-size: 14px; }

/* Header: sticks to the top on a hairline */
header.top {
  position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  min-height: 64px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line);
}
header.top nav { display: flex; gap: 4px; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); }
.brand-mark { flex: none; display: block; width: 22px; height: 26px; }
.brand-name { display: inline-flex; }
.brand-wordmark { display: block; width: 92px; height: 16px; }

/* Focus and motion */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a, .btn, .nav-link, button.link, .card, input, select, textarea {
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Buttons: pills. Primary is the one purple action in a view. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 24px; border: 1px solid var(--brand); border-radius: var(--pill);
  background: var(--brand); color: var(--on-brand);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); text-decoration: none; }
.btn svg { width: 16px; height: 16px; }
.btn.small { min-height: 32px; padding: 4px 16px; font-size: 14px; }
.btn.large { min-height: 48px; padding: 12px 28px; font-size: 16px; }
/* Ghost: a secondary action beside the primary one */
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface); }
/* Outline: a secondary action on a dark band */
.btn.outline { background: transparent; color: var(--on-night); border-color: #35373b; }
.btn.outline:hover { background: var(--night-raised); border-color: var(--muted-on-night); }
.btn.danger { background: var(--grade-f); color: #ffffff; border-color: var(--grade-f); }
.btn.danger:hover { background: #8a1216; border-color: #8a1216; }
button.link { background: none; border: 0; color: var(--link); font: inherit; cursor: pointer; padding: 0; }
/* Navigation link: pill that fills on hover */
.nav-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border: 0; border-radius: var(--pill);
  background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.nav-link:hover { background: var(--surface); color: var(--ink); text-decoration: none; }

/* Cards: rounded, bordered, flat. Linked cards light up on hover. */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 16px 0; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--brand-edge); }
.cards.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; font-size: 14px; }
label.check { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 16px; }
label small, small { font-weight: 400; font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], select, textarea {
  font: inherit; font-size: 16px; font-weight: 400; min-height: 40px; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); width: 100%;
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, select:hover, textarea:hover { border-color: var(--muted); }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus { border-color: var(--focus); outline: 2px solid var(--brand-tint); outline-offset: 0; }
input[type=checkbox] { accent-color: var(--brand); width: 16px; height: 16px; margin-top: 4px; }
textarea { resize: vertical; font-size: 13px; }
form.inline { display: inline; }

/* Messages */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid; background: var(--panel); }
.flash.ok { border-color: var(--pass); color: var(--pass); }
.flash.err, .err-text { border-color: var(--critical); color: var(--critical); }
.flash.warn { border-color: var(--medium); }

/* Tables */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.list th, table.list td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--surface); }
table.mono td { font-size: 13px; }
td.url { word-break: break-all; }

/* Chips */
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--pill); border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.pill.ok { color: var(--pass); border-color: var(--pass); }
.pill.warn { color: var(--medium); border-color: var(--medium); }

/* Verification */
.copy { display: flex; gap: 8px; align-items: flex-start; }
.copy textarea { flex: 1; }
details summary { cursor: pointer; }

/* Report */
.grade { min-width: 88px; text-align: center; border-radius: var(--radius); padding: 8px 16px; color: #fff; background: var(--info); }
.grade span { display: block; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.grade small { color: #fff; opacity: .9; }
.grade-A { background: var(--grade-a); } .grade-B { background: var(--grade-b); } .grade-C { background: var(--grade-c); }
.grade-D { background: var(--grade-d); } .grade-F { background: var(--grade-f); }
/* Severity: a glyph whose lit bars show the level, always next to its name;
   a thin summary bar; a legend in text colours. Colour sits on marks only. */
.sevmark { flex: none; width: 18px; height: 18px; vertical-align: -4px; color: var(--info); }
.sevmark rect { fill: var(--line-strong); }
.sevmark rect.on { fill: currentColor; }
.sm-critical { color: var(--critical); } .sm-high { color: var(--high); } .sm-medium { color: var(--medium); }
.sm-low { color: var(--low); } .sm-info { color: var(--info); } .sm-pass { color: var(--pass); }
.sevchip { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--pill); font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--info-bg); color: var(--info-fg); }
.sevchip .sevmark { width: 14px; height: 14px; color: inherit; }
.sevchip .sevmark rect { fill: currentColor; opacity: .3; }
.sevchip .sevmark rect.on { opacity: 1; }
.sc-critical { background: var(--critical-bg); color: var(--critical-fg); }
.sc-high { background: var(--high-bg); color: var(--high-fg); }
.sc-medium { background: var(--medium-bg); color: var(--medium-fg); }
.sc-low { background: var(--low-bg); color: var(--low-fg); }
.sc-pass { background: var(--pass-bg); color: var(--pass-fg); }
.sc-monitor { background: var(--brand-tint); color: var(--link); }
.sc-monitor svg { width: 13px; height: 13px; }
/* Where the row is narrow, the chip is just the bell (the label stays for screen readers). */
.ov-grid .sc-monitor { padding: 4px 6px; }
.ov-grid .sc-monitor > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 767px) {
  .sc-monitor { padding: 4px 6px; }
  .sc-monitor > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.sevsummary { margin: 20px 0; }
.sevbar { display: block; }
.sevbar .sb-critical { fill: var(--critical); } .sevbar .sb-high { fill: var(--high); }
.sevbar .sb-medium { fill: var(--medium); } .sevbar .sb-low { fill: var(--low); }
.sevbar .sb-none { fill: var(--line); }
.sevbar .sb-gap { fill: var(--sevbar-gap, var(--bg)); }
.sevlegend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.sevlegend li { display: inline-flex; align-items: center; gap: 8px; }
.sevlegend strong { min-width: 1ch; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sevlegend li.is-zero strong { color: var(--muted); font-weight: 500; }
.sevlegend li.is-zero .sevmark { opacity: .4; }
/* Finding: reads like a short document. Severity appears once, in the meta line. */
.finding { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin: 16px 0; }
.finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.finding-access::before, .finding-status::before { content: "·"; margin: 0 10px; color: var(--line-strong); }
.finding-status { font-weight: 600; color: var(--ink); }
.finding h3 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; }
.finding h4 { margin: 20px 0 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.occurrences { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.occurrences li { padding: 8px 12px; background: var(--surface); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.occurrences code { color: var(--ink); }
.evidence { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--panel); border: 1px solid var(--line); }
.explain { margin: 0; }
ol.fix { margin: 0; padding: 0; list-style: none; counter-reset: fix; display: grid; gap: 8px; }
ol.fix li { counter-increment: fix; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
ol.fix li::before { content: counter(fix); padding-top: 1px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
pre.log { max-height: 420px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; font-size: 12px; white-space: pre-wrap; }
.status { text-align: center; }
/* Motion: the Torvane motion kit's shield animations (views/motion.templ).
   The spinner and the scanner keep moving slowly under reduced motion,
   because they show that work is happening; the one-off animations and the
   monitoring waves are dropped. */
:root { --tv-success: #16a34a; --tv-warning: #f59e0b; --tv-bg: var(--panel); }
.tv-spin, .tv-scan, .tv-live, .tv-ok, .tv-alert { display: inline-flex; flex: none; }
.tv-spin svg, .tv-scan svg, .tv-live svg, .tv-ok svg, .tv-alert svg { display: block; width: 100%; height: 100%; overflow: visible; }

.tv-spin { width: 40px; height: 40px; margin: 16px auto; }
.rp-empty .tv-spin { display: flex; }
.tv-spin-track { fill: none; stroke: #7566ff; stroke-opacity: .3; stroke-width: 7; stroke-linejoin: round; }
.tv-spin-t { fill: #7566ff; animation: tv-spin-t 1.3s ease-in-out infinite; }
.tv-spin-run { fill: none; stroke: #7566ff; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26 74; animation: tv-spin-run 1.3s linear infinite; }
@keyframes tv-spin-run { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes tv-spin-t { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }

.tv-scan { width: 56px; height: 56px; margin: 0 0 12px; }
.tv-scan-bar { transform: translateY(-24px); animation: tv-scan 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes tv-scan { 0% { transform: translateY(-24px); } 75%, 100% { transform: translateY(96px); } }

.tv-live { width: 36px; height: 36px; }
.tv-live-wave { fill: none; stroke: #7566ff; stroke-width: 3; stroke-linejoin: round; opacity: 0; transform-box: fill-box; transform-origin: center; animation: tv-live 2.4s ease-out infinite; }
.tv-live-wave-2 { animation-delay: 1.2s; }
@keyframes tv-live { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
.tv-live-row { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 14px; font-weight: 600; }

.tv-result { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.tv-result p { margin: 0; }
.tv-result-title { font-weight: 600; }
.tv-result-text { color: var(--muted); font-size: 14px; }
.tv-ok, .tv-alert { width: 56px; height: 56px; }
.tv-ok-mark { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.6); animation: tv-ok-pop .55s cubic-bezier(.34, 1.56, .64, 1) .1s forwards; }
.tv-ok-badge { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: tv-badge .4s cubic-bezier(.34, 1.56, .64, 1) .55s forwards; }
.tv-ok-check { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tv-ok-draw .35s ease-out .85s forwards; }
.tv-alert-mark { animation: tv-alert-shake .5s ease-in-out .1s; }
.tv-alert-badge { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: tv-badge .4s cubic-bezier(.34, 1.56, .64, 1) .5s forwards; }
@keyframes tv-ok-pop { to { opacity: 1; transform: scale(1); } }
@keyframes tv-badge { to { transform: scale(1); } }
@keyframes tv-ok-draw { to { stroke-dashoffset: 0; } }
@keyframes tv-alert-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  .tv-spin * { animation-duration: 3s !important; }
  .tv-scan-bar { animation-duration: 4s; }
  .tv-live-wave { animation: none; }
  .tv-ok *, .tv-alert * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
}
@media (max-width: 640px) {
  table.list { display: block; overflow-x: auto; }
  header.top { padding: 12px 16px; }
  .nav-link { padding: 6px 12px; }
}

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

/* Header: frosted where supported */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.top { background: var(--panel); }
}
@media (max-width: 900px) { .nav-section { display: none; } }

/* Footer */
.site-footer { margin-top: 0; background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 48px 24px 32px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; }
.footer-brand p { margin: 12px 0 0; max-width: 28em; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer-links h2 { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-note { max-width: 1072px; margin: 0 24px; padding: 16px 0 32px; border-top: 1px solid var(--line); font-size: 13px; }
@media (min-width: 1120px) { .footer-note { margin: 0 auto; } }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; gap: 32px; padding: 40px 16px 24px; }
  .footer-note { margin: 0 16px; }
}

/* Sign-up and log-in carrying a site from the homepage */
.pending-site { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 24px; padding: 12px 16px; background: var(--brand-tint); border: 1px solid var(--brand-edge); border-radius: var(--radius-sm); }
.pending-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.pending-site strong { word-break: break-all; }

/* Security and your data */
.doc { max-width: 720px; }
.doc-eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.doc section { margin-top: 40px; }
.doc h2 { margin: 0 0 12px; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.doc-contact { margin-top: 40px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }

/* Homepage: calm, light and precise. Depth only on the product window. */
:root { --hero-wash: rgba(74, 58, 232, 0.09); --window-shadow: 0 1px 2px rgba(19, 20, 22, 0.04), 0 16px 40px -16px rgba(19, 20, 22, 0.16), 0 48px 100px -40px rgba(74, 58, 232, 0.28); }
@media (prefers-color-scheme: dark) {
  :root { --hero-wash: rgba(180, 167, 255, 0.10); --window-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 64px -24px rgba(0, 0, 0, 0.7), 0 48px 120px -48px rgba(124, 99, 255, 0.35); }
}
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }
main.wide { max-width: none; padding: 0; }
.hp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hp-section { padding: 120px 0; }
.hp-section[id] { scroll-margin-top: 64px; }
.hp-eyebrow { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--link); }
.hp-h2 { margin: 0; font-size: clamp(32px, 3.8vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.hp-sub { margin: 20px 0 0; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.hp-head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.hp-head .hp-sub { margin-left: auto; margin-right: auto; }

/* Hero */
.hp-hero { padding: 88px 0 0; background: radial-gradient(1100px 560px at 50% -120px, var(--hero-wash), transparent 72%), var(--bg); }
.hp-hero-copy { max-width: 880px; margin: 0 auto; text-align: center; }
.hp-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 32px; padding: 5px 16px 5px 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); box-shadow: var(--float);
  font-size: 14px; color: var(--muted); text-decoration: none;
}
.hp-pill:hover { border-color: var(--brand-edge); text-decoration: none; }
.hp-pill-icon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-tint); color: var(--link); }
.hp-pill-icon svg { width: 14px; height: 14px; }
.hp-pill strong { font-weight: 600; color: var(--ink); }
.hp-pill-sep { width: 1px; height: 14px; background: var(--line-strong); }
.hp-pill-link { font-weight: 500; color: var(--link); }
.hp-display { margin: 0; font-size: clamp(42px, 6vw, 76px); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.hp-lead { margin: 24px auto 0; max-width: 36em; font-size: 20px; line-height: 1.55; color: var(--muted); text-wrap: balance; }

/* Address form */
.scan-form { max-width: 580px; margin: 40px auto 0; }
.scan-row {
  display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--pill);
  box-shadow: 0 1px 2px rgba(19, 20, 22, 0.04), 0 10px 30px -14px rgba(19, 20, 22, 0.18);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.scan-row:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint), 0 10px 30px -14px rgba(19, 20, 22, 0.18); }
.scan-icon { display: inline-grid; place-items: center; padding-left: 12px; color: var(--muted); }
.scan-icon svg { width: 18px; height: 18px; }
.scan-row input[type=text] { flex: 1; min-width: 0; width: auto; min-height: 0; padding: 10px 4px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.scan-row input[type=text]:focus { outline: none; }
.scan-row .btn { flex: none; min-height: 44px; padding: 10px 22px; }
.scan-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 20px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.scan-assure li { display: inline-flex; align-items: center; gap: 6px; }
.scan-assure svg { width: 16px; height: 16px; color: var(--link); stroke-width: 2.25; }

/* Product window */
.pw { max-width: 1120px; margin: 72px auto 0; overflow: hidden; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--window-shadow); }
.pw.is-switching .pw-body { animation: pw-fade .25s var(--ease); }
@keyframes pw-fade { from { opacity: .4; } }
.pw-bar { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.pw-dots { display: inline-flex; gap: 6px; }
.pw-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.pw-title { flex: 1; margin: 0; overflow: hidden; font-size: 13px; font-weight: 500; color: var(--muted); text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.pw-toggle, .hp-tablist { display: none; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); }
.js .pw-toggle, .js .hp-tablist { display: inline-flex; flex-wrap: wrap; }
.pw-toggle button, .hp-tablist button { padding: 4px 12px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pw-toggle button:hover, .hp-tablist button:hover { color: var(--ink); }
.pw-toggle button[aria-pressed="true"], .hp-tablist button[aria-selected="true"] { background: var(--ink); color: var(--panel); }
.pw-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); transition: min-height .35s var(--ease); }
.pw-side { padding: 28px; border-right: 1px solid var(--line); }
.pw-grade { display: flex; align-items: center; gap: 16px; }
.pw .grade { min-width: 72px; padding: 8px 12px; }
.pw .grade span { font-size: 32px; }
.pw-site { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.pw-meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pw { --sevbar-gap: var(--panel); }
.pw-side .sevsummary { margin: 28px 0 0; }
.pw-side .sevlegend { flex-direction: column; gap: 10px; margin-top: 20px; }
.pw-main { padding: 8px 28px 24px; }
.pw-main-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 18px 0 10px; font-size: 13px; font-weight: 600; }
.pw-main-count { font-weight: 400; color: var(--muted); }
.pw-list { list-style: none; margin: 0; padding: 0; }
.pw-row { border-top: 1px solid var(--line); }
.pw-row-head { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 15px; }
.pw-chip { flex: none; min-width: 112px; }
.pw-chip-after { display: none; }
.pw-row-title { flex: 1; min-width: 0; transition: color var(--dur) var(--ease); }
.pw-detail { margin: -2px 0 14px 98px; padding: 14px 16px; background: var(--surface); border-radius: 10px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pw-detail p { margin: 0; }
.pw-fixstep { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); }
.pw-fixstep span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pw-more { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.pw[data-state="after"] .is-fixed:not(.rc-pending) .pw-row-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.pw[data-state="after"] .is-unchecked:not(.rc-pending) .pw-row-title { color: var(--muted); }
.pw[data-state="after"] .is-fixed:not(.rc-pending) .pw-chip-sev, .pw[data-state="after"] .is-unchecked:not(.rc-pending) .pw-chip-sev, .pw[data-state="after"] .pw-detail { display: none; }
.pw[data-state="after"] .is-fixed:not(.rc-pending) .pw-chip-after, .pw[data-state="after"] .is-unchecked:not(.rc-pending) .pw-chip-after { display: block; }
.pw-caption { margin: 16px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* Trust strip */
.hp-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; max-width: 1120px; margin: 72px auto 0; padding: 40px 0 96px; list-style: none; border-top: 1px solid var(--line); }
.hp-trust li { display: flex; gap: 14px; align-items: flex-start; }
.hp-trust-icon { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-tint); color: var(--link); }
.hp-trust-icon svg { width: 18px; height: 18px; }
.hp-trust h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.hp-trust p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* What we check */
.hp-checks-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 96px; align-items: start; }
.hp-checks-intro { position: sticky; top: 112px; }
.hp-notes { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.hp-notes li { display: flex; gap: 10px; align-items: flex-start; }
.hp-notes svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--link); }
.hp-check-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.hp-check { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.hp-check-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.hp-check-icon svg { width: 20px; height: 20px; }
.hp-check-tag { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--link); }
.hp-check h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.hp-check p:last-child { margin: 8px 0 0; color: var(--muted); }

/* The report */
.hp-band { background: var(--surface); border-block: 1px solid var(--line); }
.hp-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 96px; align-items: center; }
.hp-points { display: grid; gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.hp-points li { display: flex; gap: 12px; align-items: flex-start; }
.hp-points svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--link); stroke-width: 2.25; }
.hp-points strong { font-weight: 600; }
.hp-finding { margin: 0; padding: 32px; border-radius: 16px; box-shadow: var(--window-shadow); }
.hp-tabs .hp-tablist { margin-bottom: 12px; }
.hp-prompt { margin: 0; padding: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.6; white-space: pre-line; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* How it works */
.hp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.hp-step { display: flex; flex-direction: column; padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.hp-step-num { margin: 0; font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--link); }
.hp-step h3 { margin: 16px 0 8px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.hp-step > p:not(.hp-step-num) { margin: 0 0 28px; color: var(--muted); }
.hp-step-visual { margin-top: auto; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
.hp-step-visual code { overflow-wrap: anywhere; }
.hp-step-visual .sevsummary { margin: 0; }
.hp-step-visual .sevlegend { gap: 6px 14px; font-size: 13px; }
.hp-step-fixed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }

/* Safety: the one dark band */
.hp-safety { color: var(--on-night); background: var(--night); }
.hp-safety .hp-eyebrow { color: var(--brand-on-night); }
.hp-safety .hp-sub { color: var(--muted-on-night); }
.hp-safety-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; margin-bottom: 64px; }
.hp-safety-link { flex: none; font-weight: 500; color: #c9c3ff; text-decoration: none; }
.hp-safety-link:hover { text-decoration: underline; }
.hp-safety-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; margin: 0; padding: 0; list-style: none; }
.hp-safety-grid li { padding: 32px 0; border-top: 1px solid var(--night-line); }
.hp-safety-grid svg { width: 22px; height: 22px; color: var(--brand-on-night); }
.hp-safety-grid h3 { margin: 16px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.hp-safety-grid p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-on-night); }
.hp-safety :focus-visible { outline-color: var(--brand-on-night); }

/* FAQ */
.hp-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 96px; align-items: start; }
.hp-faq { border-top: 1px solid var(--line); }
.hp-faq details { border-bottom: 1px solid var(--line); }
.hp-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; list-style: none; transition: color var(--dur) var(--ease); }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 18px; font-weight: 400; color: var(--muted); transition: transform .2s var(--ease); }
.hp-faq details[open] summary::after { transform: rotate(45deg); }
.hp-faq summary:hover { color: var(--link); }
.hp-faq details p { margin: 0 0 22px; max-width: 40em; color: var(--muted); }

/* Closing */
.hp-final { padding: 120px 0; text-align: center; background: radial-gradient(900px 420px at 50% 120%, var(--hero-wash), transparent 70%), var(--bg); border-top: 1px solid var(--line); }
.hp-final .hp-sub { margin-left: auto; margin-right: auto; }

@media (max-width: 1023px) {
  .hp-checks-grid, .hp-split, .hp-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hp-checks-intro { position: static; }
  .hp-steps { grid-template-columns: minmax(0, 1fr); }
  .hp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-safety-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-body { grid-template-columns: 240px minmax(0, 1fr); }
  .pw-side { padding: 24px 20px; }
}
@media (max-width: 767px) {
  .hp-wrap { padding: 0 16px; }
  .hp-section, .hp-final { padding: 72px 0; }
  .hp-safety-grid li { padding: 24px 0; }
  .hp-checks-grid, .hp-split, .hp-faq-grid { gap: 32px; }
  .hp-notes { margin-top: 24px; }
  .hp-hero { padding-top: 56px; }
  .hp-pill { margin-bottom: 24px; font-size: 13px; }
  .hp-lead { font-size: 18px; }
  .hp-head { margin-bottom: 40px; }
  .pw { margin-top: 48px; border-radius: 12px; }
  .pw-title { display: none; }
  .pw-bar { justify-content: space-between; }
  .pw-body { grid-template-columns: minmax(0, 1fr); }
  .pw-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .pw-side .sevlegend { flex-direction: row; gap: 6px 16px; }
  .pw-main { padding: 4px 16px 16px; }
  .pw-row-head { align-items: flex-start; font-size: 14px; }
  .pw-detail { display: none; }
  .pw-chip { min-width: 0; }
  .hp-trust { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 48px; padding-bottom: 64px; }
  .hp-safety-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-safety-head { margin-bottom: 40px; }
  .hp-finding, .hp-step { padding: 24px 20px; }
  .hp-check { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .hp-check-icon { width: 40px; height: 40px; }
}
@media (max-width: 480px) {
  .scan-row { flex-wrap: wrap; border-radius: 20px; }
  .scan-row input[type=text] { flex-basis: calc(100% - 48px); }
  .scan-row .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pw.is-switching .pw-body { animation: none; }
}

/* Report: a summary sidebar beside one panel of findings, like the
   homepage's product window. */
.rp { max-width: 1200px; margin: 0 auto; padding: 28px 24px 96px; }
.rp-crumbs { margin: 0 0 24px; font-size: 14px; color: var(--muted); }
.rp-crumbs a { color: var(--muted); text-decoration: none; }
.rp-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.rp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 32px; }
.rp-head .hp-eyebrow { margin-bottom: 8px; }
.rp-title { margin: 0; font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.rp-meta { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.rp-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.rp-action form { margin: 0; }
.rp-action p { margin: 0; max-width: 26em; font-size: 13px; color: var(--muted); }
.rp-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.rp-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.rp-card { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; --sevbar-gap: var(--panel); }
.rp-score { display: flex; align-items: center; gap: 16px; }
.rp-score .grade { min-width: 72px; padding: 8px 12px; }
.rp-score .grade span { font-size: 32px; }
.rp-score-label { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rp-score-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.rp-card .sevsummary { margin: 24px 0 0; }
.rp-side .sevlegend { flex-direction: column; gap: 10px; margin-top: 20px; }
.rp-note { margin: 20px 0 0; padding: 12px; background: var(--surface); border-radius: 10px; font-size: 13px; color: var(--muted); }
.rp-links { display: grid; gap: 2px; padding: 8px; }
.rp-links a { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.rp-links a:hover { background: var(--surface); text-decoration: none; }
.rp-links svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--link); }
.rp-links strong { display: block; font-size: 14px; font-weight: 600; }
.rp-links small { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.rp-main { display: grid; gap: 24px; min-width: 0; }
.rp-panel { overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(19, 20, 22, 0.04); }
.rp-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.rp-panel-head h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.rp-panel-head span { font-size: 13px; color: var(--muted); }
.rp-panel-text { margin: 0; padding: 16px 24px; font-size: 14px; color: var(--muted); }
.rp-collapse:not([open]) > .rp-panel-head { border-bottom: 0; }
.rp-collapse > summary { cursor: pointer; list-style: none; }
.rp-collapse > summary::-webkit-details-marker { display: none; }
.rp-collapse > summary span::after { content: " ▾"; }
.rp-collapse[open] > summary span::after { content: " ▴"; }
.rp-collapse pre.log { margin: 0; border: 0; border-radius: 0; }
.rp-group { display: flex; align-items: center; gap: 8px; margin: 0; padding: 22px 24px 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.rp-group span { font-weight: 400; color: var(--muted); }
.rp-finding { border-top: 1px solid var(--line); }
.rp-finding > summary { display: flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 15px; list-style: none; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.rp-finding > summary::-webkit-details-marker { display: none; }
.rp-finding > summary:hover { background: var(--surface); }
.rp-finding > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 3px 4px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); transition: transform var(--dur) var(--ease); }
.rp-finding[open] > summary::after { margin-bottom: -3px; transform: rotate(-135deg); }
.rp-finding > summary .sevchip { min-width: 84px; }
.rp-row-title { flex: 1; min-width: 0; font-weight: 500; }
.rp-tag { flex: none; padding: 1px 8px; border: 1px solid var(--line-strong); border-radius: var(--pill); font-size: 12px; font-weight: 600; color: var(--muted); }
.rp-tag.new { border-color: var(--brand-edge); background: var(--brand-tint); color: var(--link); }
.rp-finding-body.finding { margin: 0; padding: 4px 24px 28px 122px; background: transparent; border: 0; border-radius: 0; }
.rp-finding-body .occurrences { margin-top: 4px; }
.rp-access { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.rp-access strong { font-weight: 600; color: var(--ink); }
.rp-more-prompts { margin-top: 12px; }
.rp-more-prompts > summary { font-size: 14px; font-weight: 500; color: var(--link); }
.rp-prompt-name { margin: 16px 0 6px; font-size: 13px; font-weight: 600; }
.rp-fixed { margin: 0; padding: 0; list-style: none; }
.rp-fixed li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 14px; padding: 12px 24px; border-top: 1px solid var(--line); font-size: 15px; }
.rp-fixed li:first-child { border-top: 0; }
.rp-fixed-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.rp-fixed-detail { grid-column: 2; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.rp-empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.rp-empty-icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--pass); }
.rp-empty-icon svg { width: 24px; height: 24px; }
.rp-empty-title { margin: 12px 0 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
.rp-empty p { margin: 0; }
.rp-passed { columns: 2; column-gap: 32px; margin: 0; padding: 16px 24px 20px; list-style: none; font-size: 14px; }
.rp-passed li { display: flex; gap: 8px; padding: 4px 0; break-inside: avoid; }
.rp-passed .sevmark { margin-top: 2px; }
.rp-panel table.list { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.rp-disclaimer { margin: 0; font-size: 13px; color: var(--muted); }
.rp .card.status { margin: 0; padding: 48px 24px; border-radius: 16px; }
@media (max-width: 1023px) {
  .rp-grid { grid-template-columns: minmax(0, 1fr); }
  .rp-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .rp-side .sevlegend { flex-direction: row; gap: 6px 16px; }
}
@media (max-width: 640px) {
  .rp { padding: 20px 16px 64px; }
  .rp-action { align-items: flex-start; text-align: left; }
  .rp-panel-head, .rp-panel-text, .rp-group, .rp-fixed li { padding-left: 16px; padding-right: 16px; }
  .rp-finding > summary { align-items: flex-start; padding: 14px 16px; font-size: 14px; }
  .rp-finding-body.finding { padding: 4px 16px 24px; }
  .rp-passed { columns: 1; padding: 12px 16px 16px; }
}

/* Sites: same panels and rows as the report */
.st-add-body { display: grid; grid-template-columns: minmax(0, 1fr) 240px auto; align-items: end; gap: 16px; padding: 20px 24px 8px; }
.st-add-body .btn { min-height: 42px; }
.st-add-help { margin: 0; padding: 4px 24px 20px; font-size: 13px; color: var(--muted); }
.rp > .rp-panel + .rp-panel { margin-top: 24px; }
.st-list { margin: 0; padding: 0; list-style: none; }
.st-list li + li { border-top: 1px solid var(--line); }
.st-row { display: flex; align-items: center; gap: 16px; padding: 16px 24px; color: var(--ink); text-decoration: none; transition: background-color var(--dur) var(--ease); }
.st-row:hover { background: var(--surface); text-decoration: none; }
.st-name { flex: 1; min-width: 0; }
.st-name strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.st-name small { display: block; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.st-last { flex: none; min-width: 150px; font-size: 14px; color: var(--muted); text-align: right; }
.st-chevron { flex: none; width: 7px; height: 7px; margin-right: 4px; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); }
.grade-mini { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--info); color: #fff; font-size: 18px; font-weight: 700; }
.grade-mini.grade-A { background: var(--grade-a); } .grade-mini.grade-B { background: var(--grade-b); } .grade-mini.grade-C { background: var(--grade-c); }
.grade-mini.grade-D { background: var(--grade-d); } .grade-mini.grade-F { background: var(--grade-f); }
.grade-mini.grade-none { background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.chip-dot { width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: currentColor; }
.st-empty-icon { color: var(--link); }
.st-side-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.st-side-text { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.st-tool { display: grid; gap: 0; }
.st-tool .btn { justify-self: start; margin-top: 14px; }
.st-danger > summary { font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.st-danger .btn { margin-top: 14px; }
.st-methods { display: grid; gap: 16px; padding: 0 24px 24px; }
.st-method { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.st-method-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-method h3 { margin: 0; font-size: 16px; }
.st-method p { margin: 0; font-size: 14px; color: var(--muted); }
.st-method .btn { margin-top: 4px; align-self: flex-start; }
.st-method .rp-more-prompts { margin-top: 0; }
.st-kv { font-size: 12px !important; font-weight: 600; color: var(--ink) !important; }
.st-note { font-size: 13px !important; }
@media (max-width: 767px) {
  .st-add-body { grid-template-columns: minmax(0, 1fr); padding: 16px 16px 8px; }
  .st-add-help { padding: 4px 16px 16px; }
  .st-row { flex-wrap: wrap; gap: 8px 12px; padding: 14px 16px; }
  .st-name { flex-basis: calc(100% - 80px); }
  .st-last { min-width: 0; margin-left: 52px; text-align: left; }
  .st-row .sevchip { order: 5; }
  .st-chevron { display: none; }
  .st-methods { padding: 0 16px 16px; }
}

/* Activity: rows grouped by day */
.ac-list { margin: 0; padding: 0; list-style: none; }
.ac-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 24px; border-top: 1px solid var(--line); }
.ac-icon { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--muted); }
.ac-icon svg { width: 17px; height: 17px; }
.ac-ok { background: var(--pass-bg); color: var(--pass-fg); }
.ac-warn { background: var(--medium-bg); color: var(--medium-fg); }
.ac-bad { background: var(--critical-bg); color: var(--critical-fg); }
.st-row .ac-icon { width: 32px; height: 32px; }
.ov-alert-title { font-size: 14px !important; letter-spacing: 0 !important; }
.ac-body { flex: 1; min-width: 0; padding-top: 1px; }
.ac-body strong { display: block; font-size: 15px; font-weight: 600; }
.ac-body small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.ac-body small a { margin-left: 6px; font-weight: 500; }
.ac-meta { flex: none; padding-top: 2px; font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.ac-meta small { display: block; font-size: 12px; }
@media (max-width: 640px) {
  .ac-row { padding: 12px 16px; gap: 12px; }
  .ac-meta small { display: none; }
}

/* Request ledger */
.rq-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.rq-big { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rq-kv { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.rq-kv-col { flex-direction: column; margin-top: 4px; }
.rq-kv-col li { display: flex; align-items: center; gap: 8px; }
.rq-kv-col strong { margin-left: auto; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rq-method { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.rq-dot { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.rq-dot.s2 { background: var(--pass); } .rq-dot.s3 { background: var(--low); } .rq-dot.s4 { background: var(--line-strong); }
.rq-dot.s5 { background: var(--medium); } .rq-dot.s0 { background: transparent; border: 1.5px solid var(--muted); }
.rq-status { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.rq-scroll { overflow-x: auto; }
.rq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rq-table th { position: sticky; top: 0; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; white-space: nowrap; }
.rq-table td { padding: 9px 16px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.rq-table tr:last-child td { border-bottom: 0; }
.rq-table tbody tr:hover { background: var(--surface); }
.rq-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rq-table .muted { color: var(--muted); }
.rq-table td:last-child { white-space: normal; min-width: 180px; }
.rq-path { max-width: 420px; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 12px; }
@media (max-width: 1023px) { .rq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .rq-stats { grid-template-columns: minmax(0, 1fr); } }

/* Terms page and site authorization (attestation) */
.st-attest { display: grid; gap: 16px; padding: 0 20px 20px; }
.st-attest label { display: grid; gap: 6px; font-weight: 600; }
.st-attest label.check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 400; }
.st-attest small { color: var(--muted); }
.st-more-proof > summary { cursor: pointer; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.st-more-proof > summary span { color: var(--muted); font-size: 14px; }
.st-more-proof[open] > summary { border-bottom: 1px solid var(--line); }
.st-more-proof > .rp-panel { border: 0; margin: 0; box-shadow: none; }

/* Log in and sign up */
.auth { max-width: 440px; margin: 0 auto; padding: 40px 0 72px; }
.auth-head { margin-bottom: 24px; }
.auth-head .hp-eyebrow { margin-bottom: 8px; }
.auth-head .rp-meta { margin-top: 8px; }
.auth-form { display: grid; gap: 18px; padding: 24px; }
.auth-form .btn { width: 100%; justify-content: center; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0; font-size: 14px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-switch { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--muted); }

/* Terms page note */
.doc-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
.doc section p { margin: 0 0 12px; }

/* Scan status (queued, running, failed) */
.scan-failed-icon { color: var(--critical); }
#scan-status .rp-empty p:not(.rp-empty-title) { max-width: 36em; margin: 0 auto; }


/* App shell: a sidebar for signed-in pages */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 16px; border-radius: var(--pill); background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.skip-link:focus { left: 8px; }
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.app-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 24px; padding: 20px 16px; background: var(--surface); border-right: 1px solid var(--line); }
.app-brand { padding: 4px 8px; }
.app-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.app-link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 15px; font-weight: 500; text-decoration: none; }
.app-link svg { flex: none; width: 18px; height: 18px; }
.app-link:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.app-link[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.app-link[aria-current="page"] svg { color: var(--link); }
.app-link-end { margin-top: auto; }
.app-user { display: flex; flex-direction: column; gap: 8px; padding: 14px 8px 0; border-top: 1px solid var(--line); }
.app-user form { margin: 0; }
.app-user-email { overflow: hidden; font-size: 13px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.app-logout { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.app-logout:hover { color: var(--link); }
.app-col { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.app-main { flex: 1; max-width: none; margin: 0; padding: 0; min-width: 0; }
.app-foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 20px 24px; border-top: 1px solid var(--line); font-size: 13px; }
.app-foot a { color: var(--muted); }
.app-foot a:hover { color: var(--ink); }
.app .rp-side { top: 24px; }
@media (max-width: 899px) {
  .app { display: block; }
  .app-side { z-index: 10; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand user" "nav nav"; align-items: center; gap: 4px 12px; padding: 10px 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-brand { grid-area: brand; padding: 0; }
  .app-user { grid-area: user; flex-direction: row; align-items: center; padding: 0; border: 0; }
  .app-user-email { display: none; }
  /* Every section stays in view: the links wrap onto a second row rather
     than scrolling off the edge where nothing says they are there. */
  .app-nav { grid-area: nav; flex-direction: row; flex-wrap: wrap; gap: 4px; padding-bottom: 8px; }
  .app-link { flex: none; min-height: 36px; padding: 6px 12px; font-size: 14px; }
  .app-link-end { margin-top: 0; }
  .app-col { min-height: 0; }
  .app-foot { padding: 20px 16px; }
}

/* Dashboard */
.ov-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.ov-stat { display: grid; gap: 12px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; color: var(--muted); }
.ov-stat[class*="sc-"] { border-color: transparent; }
.ov-stat.sc-critical { background: var(--critical-bg); color: var(--critical-fg); }
.ov-stat.sc-high { background: var(--high-bg); color: var(--high-fg); }
.ov-stat.sc-medium { background: var(--medium-bg); color: var(--medium-fg); }
.ov-stat.sc-low { background: var(--low-bg); color: var(--low-fg); }
.ov-stat-n { font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: inherit; }
.ov-stat:not([class*="sc-"]) .ov-stat-n { color: var(--ink); }
.ov-stat-l { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ov-stat .sevmark { width: 16px; height: 16px; color: inherit; }
.ov-stat .sevmark rect { fill: currentColor; opacity: .3; }
.ov-stat .sevmark rect.on { opacity: 1; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.ov-main { display: grid; gap: 24px; min-width: 0; }
.ov-more { border-top: 1px solid var(--line); }
.rp-panel-head a { font-size: 13px; }
.ov-steps { display: grid; gap: 4px; margin: 0; padding: 8px 24px 20px; list-style: none; counter-reset: step; }
.ov-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; padding: 12px 0; counter-increment: step; }
.ov-steps li::before { content: counter(step); display: inline-grid; place-items: center; grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--brand-tint); color: var(--link); font-size: 14px; font-weight: 600; }
.ov-steps strong { font-size: 16px; font-weight: 600; }
.ov-steps span { font-size: 14px; color: var(--muted); }
.st-row.compact { gap: 12px; padding: 14px 20px; }
.st-row.compact .st-last { min-width: 0; font-size: 13px; }
.scan-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 380px; }
.pill-note { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: var(--pill); font-size: 12px; color: var(--muted); }
/* /issues */
.is-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 24px; }
.is-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.is-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.is-tab:hover { color: var(--ink); text-decoration: none; }
.is-tab[aria-current="page"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 20, 22, 0.08); }
.is-count { min-width: 20px; padding: 0 6px; border-radius: var(--pill); background: var(--line); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.is-site { display: flex; align-items: center; gap: 8px; }
.is-site select { min-width: 200px; }
.rp > .is-group + .is-group, .rp > .rp-panel + .is-group { margin-top: 16px; }
.is-head { align-items: center; justify-content: flex-start; }
.is-head h2 { flex: 1; min-width: 0; }
.is-subject { font-family: var(--mono, ui-monospace, monospace); font-size: 12px !important; }
.is-row .sevchip { flex: none; }
@media (max-width: 767px) {
  .is-tabs { width: 100%; }
  .is-tab { flex: 1 1 auto; justify-content: center; padding: 6px 8px; }
  .is-site, .is-site label, .is-site select { width: 100%; min-width: 0; }
  .is-head { flex-wrap: wrap; }
  .is-head h2 { flex-basis: 100%; order: 2; }
}

/* /monitoring */
.mo-upsell { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.mo-upsell .btn { flex: none; }
.mo-note { margin: 0 0 24px; }
.mo-stats .ov-stat-n small { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.mo-stats .ov-stat[class*="sc-"] .ov-stat-n small { color: inherit; opacity: .75; }
.mo-stat-l { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
.mo-stat-l small { font-size: 13px; font-weight: 400; overflow-wrap: anywhere; }
.mo-table table.list { font-size: 14px; }
.mo-table td small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.mo-table td { min-width: 120px; }
.mo-table td:first-child { min-width: 190px; }
.mo-table td:nth-child(4) { min-width: 200px; max-width: 280px; }
.mo-site { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.mo-site:hover strong { text-decoration: underline; }
.mo-site .grade-mini { width: 32px; height: 32px; border-radius: 8px; font-size: 15px; }
.mo-site strong { display: block; font-weight: 600; white-space: nowrap; }
.mo-muted { color: var(--muted); }
.mo-paused { color: var(--medium-fg); font-weight: 500; }
.mo-cert { font-weight: 600; }
.mo-cert-high { color: var(--high-fg); }
.mo-cert-critical { color: var(--critical-fg); }
.mo-action { flex: none; font-size: 14px; font-weight: 500; color: var(--link); }
.ac-body small a.mo-host { margin-left: 0; }
.mo-items { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 13px; color: var(--ink); }
.mo-items li + li { margin-top: 2px; }
@media (max-width: 767px) {
  .mo-upsell { flex-direction: column; align-items: flex-start; }
  .mo-action { display: none; }
  /* The table becomes one card per site. */
  .mo-table table.list, .mo-table tbody, .mo-table tr, .mo-table td { display: block; }
  .mo-table table.list { overflow: visible; }
  .mo-table thead { display: none; }
  .mo-table tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .mo-table tr:first-child { border-top: 0; }
  .mo-table table.list td, .mo-table table.list td:first-child, .mo-table table.list td:nth-child(4) { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; min-width: 0; max-width: none; padding: 4px 0; border: 0; }
  .mo-table td > * { grid-column: 2; }
  .mo-table td::before { content: attr(data-label); grid-row: 1 / span 3; font-size: 13px; font-weight: 600; color: var(--muted); }
  .mo-table table.list td:first-child { display: block; padding-bottom: 8px; }
  .mo-table td:first-child::before { content: none; }
  .mo-site strong { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 1099px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
  .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ov-steps { padding: 8px 16px 16px; }
  .scan-chips { justify-content: flex-start; max-width: none; }
}

/* Settings */
.rp-narrow { max-width: 800px; }
.set-body { display: grid; gap: 18px; padding: 20px 24px 24px; }
.set-body label { max-width: 480px; }
.set-actions { display: flex; margin: 0; }
.set-text { margin: 0; font-size: 15px; color: var(--muted); }
.form-error { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--critical-bg); color: var(--critical-fg); font-size: 14px; }
@media (max-width: 767px) { .set-body { padding: 16px 16px 20px; } }
@media (max-width: 480px) {
  .app-nav { gap: 2px; }
  .app-link { padding: 6px 8px; }
  .app-link svg { display: none; }
}

/* Scan progress */
.sp { display: grid; justify-items: center; gap: 12px; padding: 40px 24px 20px; text-align: center; }
.sp-title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.sp-sub { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.sp-bar { width: 100%; max-width: 560px; height: 10px; margin-top: 8px; border: 0; border-radius: var(--pill); background: var(--surface); appearance: none; -webkit-appearance: none; overflow: hidden; }
.sp-bar::-webkit-progress-bar { background: var(--surface); border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--line); }
.sp-bar::-webkit-progress-value { background: var(--brand); border-radius: var(--pill); transition: width 600ms var(--ease); }
.sp-bar::-moz-progress-bar { background: var(--brand); border-radius: var(--pill); }
.sp-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sp-facts span { font-weight: 400; color: var(--muted); }
.sp-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; width: 100%; max-width: 640px; margin: 12px 0 4px; padding: 16px 20px; list-style: none; background: var(--surface); border-radius: var(--radius); text-align: left; font-size: 14px; }
.sp-step { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.sp-mark { flex: none; width: 14px; height: 14px; border: 2px solid var(--line-strong); border-radius: 50%; }
.sp-done { color: var(--ink); }
.sp-done .sp-mark { border-color: var(--pass); background: var(--pass); }
.sp-now { color: var(--ink); font-weight: 600; }
.sp-now .sp-mark { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 3px var(--brand-tint); }
.sp-cancel { margin: 0; }
.sp-actions { display: grid; justify-items: center; gap: 12px; padding: 0 24px 28px; text-align: center; }
.sp-note { max-width: 40em; margin: 0; font-size: 13px; color: var(--muted); }
.sp-warn { max-width: 36em; margin: 0 auto 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--medium-bg); color: var(--medium-fg); font-size: 14px; }
.st-confirm { margin: 14px 0 0; }
.st-tool label.check { font-size: 14px; font-weight: 600; }
.st-tool label + label, .st-tool p + label, .st-tool label + p { margin-top: 14px; }
.bill-includes { margin: 4px 0 18px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; }
.st-next { border-color: var(--brand-edge); background: var(--brand-tint); }
.st-next h2 { margin: 0 0 6px; font-size: 17px; }
.st-confirm code { word-break: break-all; }
@media (max-width: 640px) {
  .sp { padding: 28px 16px 24px; }
  .sp-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .sp-bar::-webkit-progress-value { transition: none; } }

/* Export menu */
.rp-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.rp-btns form { margin: 0; }
details.exp { position: relative; }
details.exp > summary { list-style: none; cursor: pointer; user-select: none; }
details.exp > summary::-webkit-details-marker { display: none; }
details.exp > summary svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
details.exp[open] > summary svg { transform: rotate(180deg); }
.exp-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, 88vw); padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px -8px rgba(19, 20, 22, .24), 0 0 0 1px rgba(0, 0, 0, .03); text-align: left; }
.exp-item { display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.exp-item:hover, .exp-item:focus-visible { background: var(--surface); text-decoration: none; }
.exp-item strong { font-size: 15px; font-weight: 600; }
.exp-item small { font-size: 13px; color: var(--muted); }
.exp-note { margin: 4px 6px 4px; padding: 8px 8px 4px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.rp-panel-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-panel-actions .btn.small { min-height: 28px; padding: 2px 12px; }
@media (max-width: 767px) { .rp-btns { justify-content: flex-start; } .exp-panel { right: auto; left: 0; } }
.exp-panel.exp-left { left: 0; right: auto; }
.scan-speed { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.scan-speed select { font: inherit; font-size: 14px; min-height: 36px; width: auto; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background-color: var(--panel); color: var(--ink); }
.fc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 4px; padding: 10px 14px; border: 1px solid var(--brand-edge); border-radius: var(--radius-sm); background: var(--brand-tint); font-size: 14px; }
.fc-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; color: var(--ink); }
.fc-form { margin: 0; }
.fc-run .fc-text { color: var(--muted); }
.fc-result { font-weight: 600; }
.fc-fixed { color: #1a7f4b; }
.fc-present { color: var(--grade-f); }
.fc-unverified, .fc-failed { color: #8a5a00; }
.fc-when, .fc-detail { font-weight: 400; color: var(--muted); }
.fc-err { color: var(--grade-f); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fc-fixed { color: #5ad19a; }
  :root:not([data-theme="light"]) .fc-unverified, :root:not([data-theme="light"]) .fc-failed { color: #e8b44f; }
}
.rp-withfixes { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--brand-edge); border-radius: var(--radius-sm); background: var(--brand-tint); font-size: 14px; }
.rp-withfixes span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.wf-A { color: var(--grade-a); } .wf-B { color: var(--grade-b); } .wf-C { color: var(--grade-c); } .wf-D { color: var(--grade-d); } .wf-F { color: var(--grade-f); }

/* Banners from the operator, above signed-in pages */
.banner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 0; padding: 10px 24px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: 14px; }
.banner a { font-weight: 600; }
.banner-warning { background: var(--medium-bg); color: var(--medium-fg); border-color: var(--medium); }
.banner-incident { background: var(--critical-bg); color: var(--critical-fg); border-color: var(--critical); }
.banner-warning a, .banner-incident a { color: inherit; }

/* Admin area */
.ad-band { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 8px 24px; background: var(--night); color: var(--on-night); font-size: 13px; }
.ad-band strong { letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-on-night); }
.ad-band a { margin-left: auto; color: var(--on-night); }
.ad-band-warn { padding: 2px 10px; border-radius: var(--pill); background: var(--medium); color: #fff; font-weight: 600; }
.admin .app { min-height: calc(100vh - 36px); }
.admin .app-side { height: calc(100vh - 36px); top: 0; }
.ad-nav-group { margin: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ad-main { padding: 24px; max-width: 1280px; }
.ad-main .flash { margin: 0 0 16px; }
.ad-h { margin: 32px 0 12px; font-size: 18px; }
.ad-narrow { max-width: 520px; }
.ad-scroll { overflow-x: auto; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 16px; }
.ad-table th { padding: 8px 12px; border-bottom: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--muted); text-align: left; white-space: nowrap; }
.ad-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ad-table tbody tr:hover { background: var(--surface); }
.ad-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ad-wrap { max-width: 420px; overflow-wrap: anywhere; }
.ad-url { max-width: 520px; overflow-wrap: anywhere; font-family: var(--mono); font-size: 12px; }
.ad-json { font-family: var(--mono); font-size: 11px; }
.ad-json span { display: block; }
.ad-bars td { padding: 4px 12px; }
.ad-bar { width: 50%; }
.ad-bar progress { width: 100%; height: 10px; accent-color: var(--brand); }
.ad-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.ad-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.ad-stat-n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-stat-l { font-size: 13px; color: var(--muted); }
.ad-stat-h { font-size: 12px; color: var(--muted); }
.ad-stat-bad { border-color: var(--critical); }
.ad-stat-bad .ad-stat-n { color: var(--critical); }
.ad-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0 0 16px; }
.ad-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ad-field > span { color: var(--muted); font-weight: 600; }
.ad-field input, .ad-field select { min-height: 36px; }
.ad-check { display: flex; gap: 6px; align-items: center; min-height: 36px; font-size: 14px; }
.ad-form { display: flex; flex-direction: column; gap: 12px; margin: 12px 0; }
.ad-form.card { margin: 12px 0; }
.ad-inline-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; margin: 8px 0 0; }
.ad-inline { display: flex; gap: 6px; align-items: center; margin: 0; }
.ad-short { width: 150px; min-height: 32px; }
.ad-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.ad-danger { padding-top: 12px; border-top: 1px solid var(--line); }
.ad-pager { display: flex; gap: 16px; align-items: center; margin: 8px 0; font-size: 14px; color: var(--muted); }
.ad-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.ad-tabs a { padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: var(--pill); color: var(--muted); text-decoration: none; font-size: 14px; }
.ad-tabs a[aria-current="page"] { background: var(--brand-tint); border-color: var(--brand-edge); color: var(--link); font-weight: 600; }
.ad-secret { display: inline-block; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 16px; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.ad-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.ad-codes code { font-size: 15px; }
.ad-quote { margin: 12px 0; padding: 12px 16px; border-left: 3px solid var(--line-strong); background: var(--surface); overflow-wrap: anywhere; white-space: pre-wrap; }
.ad-setting { margin: 8px 0; padding: 16px 20px; }
.ad-setting-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ad-setting p { margin: 6px 0; }
.ad-newcode { border-color: var(--pass); }
@media (max-width: 899px) {
  .admin .app-side { height: auto; }
  .ad-main { padding: 16px; }
  .ad-nav-group { display: none; }
}
.ad-inline-form input[type="number"] { width: 120px; min-height: 36px; }
.ad-inline-form select { min-width: 160px; min-height: 36px; }
.ad-inline-form .ad-field { min-width: 180px; }
.ad-setting .ad-inline-form { margin-top: 12px; }
.acc { display: block; margin: 6px 0 2px; font-size: 14px; }
.acc summary { cursor: pointer; color: var(--muted); width: fit-content; }
.acc summary:hover { color: var(--ink); }
.acc-form { display: grid; gap: 8px; margin-top: 8px; max-width: 460px; }
.acc-form label { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.acc-form input[type="text"], .acc-form select { font: inherit; color: var(--ink); padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); }
.acc-note { margin: 0; font-size: 13px; color: var(--muted); }
.acc-on { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 8px 0 2px; padding: 8px 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); font-size: 14px; }
.hist { width: 100%; height: auto; display: block; }
.hist-grid { stroke: var(--line); stroke-width: 1; }
.hist-tick { fill: var(--muted); font-size: 11px; }
.hist-line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; }
.hist-dot { stroke: var(--panel); stroke-width: 2; fill: var(--muted); }
.hist-A { fill: var(--grade-a); } .hist-B { fill: var(--grade-b); } .hist-C { fill: var(--grade-c); } .hist-D { fill: var(--grade-d); } .hist-F { fill: var(--grade-f); }
.hist-sum, .hist-empty { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* Billing */
.bill-price { margin: 4px 0; font-size: 28px; font-weight: 700; }
.bill-pro { border-color: var(--brand-edge); background: var(--brand-tint); }
.bill-trial { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.ad-qr { display: flex; justify-content: center; margin: 16px 0; }
.ad-qr svg { width: 220px; height: 220px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.ad-manual { margin: 8px 0 16px; }
.ad-manual summary { cursor: pointer; color: var(--link); font-size: 14px; }

/* Homepage additions: reassurance, honest limits, plan strip */
.scan-reassure { margin: 10px 0 0; font-size: 14px; color: var(--muted, #55607a); }
.hp-limits { margin-top: 18px; font-size: 14px; color: var(--muted, #55607a); }

/* Pricing page */
.pr { max-width: 1180px; margin: 0 auto; }
.pr-hero { text-align: center; padding: 40px 0 8px; }
.pr-hero h1 { max-width: 780px; margin: 12px auto; }
.pr-intro { color: var(--muted); font-size: 18px; max-width: 620px; margin: 0 auto; }
.pr-toggle-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 28px 0 8px; flex-wrap: wrap; }
.pr-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: var(--pill); background: var(--panel); }
.pr-toggle button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: var(--pill); cursor: pointer; color: var(--muted); }
.pr-toggle button:hover { color: var(--ink); }
.pr-toggle button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.pr-save { font-size: 12px; font-weight: 600; color: var(--pass-fg); background: var(--pass-bg); padding: 4px 10px; border-radius: var(--pill); }
.pr-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.pr-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 22px 24px; display: flex; flex-direction: column; background: var(--panel); position: relative; }
.pr-card h2 { font-size: 20px; margin: 0; }
.pr-featured { background: var(--brand-tint); border-color: var(--brand-edge); }
.pr-dark { background: var(--night); color: var(--on-night); border-color: var(--night); }
.pr-dark .pr-tag, .pr-dark .pr-per, .pr-dark .pr-note { color: var(--muted-on-night); }
.pr-badge { position: absolute; top: -13px; left: 22px; background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--pill); }
.pr-tag { color: var(--muted); font-size: 14.5px; margin: 6px 0 0; min-height: 66px; }
.pr-price { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 2px; }
.pr-amount { font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.pr-per { color: var(--muted); font-size: 14px; }
.pr-note { font-size: 12.5px; color: var(--muted); min-height: 38px; margin: 0; }
.pr-trial { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.pr-btn { display: block; text-align: center; margin-top: 14px; padding: 13px 16px; border-radius: var(--pill); font-weight: 600; font-size: 15px; border: 1px solid var(--ink); color: var(--ink); background: var(--panel); text-decoration: none; transition: background var(--dur), color var(--dur); }
.pr-btn:hover { background: var(--ink); color: var(--panel); }
.pr-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pr-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pr-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); }
.pr-dark .pr-btn { background: var(--on-night); color: var(--night); border-color: var(--on-night); }
.pr-dark .pr-btn:hover { background: var(--brand-on-night); color: var(--night); border-color: var(--brand-on-night); }
.pr-btn-off { opacity: .6; border-style: dashed; }
.pr-card ul { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.pr-card li { padding-left: 24px; position: relative; }
.pr-card li::before { content: ""; position: absolute; left: 0; top: 5px; width: 14px; height: 8px; border-left: 2.2px solid var(--brand); border-bottom: 2.2px solid var(--brand); transform: rotate(-45deg) scale(.9); }
.pr-dark li::before { border-color: var(--brand-on-night); }
.pr-card li.lead { font-weight: 600; padding-left: 0; }
.pr-card li.lead::before { display: none; }
.pr-compare { margin-top: 72px; }
.pr-compare h2 { font-size: 24px; margin: 0 0 18px; }
.pr-scroll { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; }
.pr-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14.5px; }
.pr-table th, .pr-table td { padding: 14px 22px; text-align: left; border-top: 1px solid var(--line); vertical-align: middle; }
.pr-table thead th { background: var(--surface); font-weight: 600; font-size: 14px; border-top: 0; }
.pr-table .pr-hl { color: var(--brand); }
.pr-table tbody th[scope="row"] { font-weight: 400; width: 34%; }
.pr-table small { display: block; color: var(--muted); font-size: 12.5px; }
.pr-group th { background: var(--surface); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 22px; }
.pr-foot { color: var(--muted); font-size: 13px; margin-top: 14px; }
.pr-fine { text-align: center; color: var(--muted); font-size: 14px; max-width: 700px; margin: 44px auto 0; }
.pr-cta { margin: 48px 0 0; background: var(--night); color: var(--on-night); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; }
.pr-cta h2 { font-size: 24px; margin: 0 0 8px; }
.pr-cta p { color: var(--muted-on-night); margin: 0 0 20px; }
.pr-cta .pr-btn { display: inline-block; padding: 14px 28px; background: var(--on-night); color: var(--night); border-color: var(--on-night); }
@media (max-width: 1020px) { .pr-cards { grid-template-columns: repeat(2, 1fr); } .pr-tag { min-height: 0; } }
@media (max-width: 640px) { .pr-cards { grid-template-columns: 1fr; } .pr-note { min-height: 0; margin-bottom: 4px; } }

/* Enterprise contact page */
.ct { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: start; max-width: 1040px; margin: 0 auto; padding: 24px 0 40px; }
.ct h1 { margin: 12px 0; }
.ct-lede { margin: 0; }
.ct-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.ct-points li { padding-left: 28px; position: relative; font-size: 15px; display: grid; }
.ct-points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2.2px solid var(--brand); border-bottom: 2.2px solid var(--brand); transform: rotate(-45deg) scale(.9); }
.ct-points span { color: var(--muted); }
.ct-safe { margin-top: 28px; background: var(--brand-tint); border: 1px solid var(--brand-edge); border-radius: var(--radius); padding: 16px 18px; font-size: 14px; }
.ct-form { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 28px; background: var(--panel); box-shadow: 0 10px 40px rgba(74, 58, 232, .06); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-field { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.ct-field label, .ct-field legend { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.ct-field input[type=text], .ct-field input[type=email], .ct-field select, .ct-field textarea { width: 100%; font: inherit; font-size: 15px; padding: 11px 13px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); }
.ct-field textarea { min-height: 96px; resize: vertical; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: 2px solid var(--brand-edge); border-color: var(--brand); }
.ct-hint { font-size: 13px; color: var(--muted); margin: 5px 0 0; }
.ct-check { display: flex !important; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 400 !important; margin: 0 0 8px !important; }
.ct-check input { margin-top: 4px; accent-color: var(--brand); }
.ct-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #8a3410; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin: 0 0 18px; }
.ct-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.ct-submit { width: 100%; }
.ct-status { margin: 14px 0 0; font-size: 14px; min-height: 0; }
.ct-status.ok { color: var(--pass-fg); }
.ct-status.err { color: var(--critical-fg); }
.ct-fine { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; text-align: center; }
@media (max-width: 860px) { .ct { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 520px) { .ct-row { grid-template-columns: 1fr; } .ct-form { padding: 24px 18px; } }

/* Ultra: clients, branding, sharing */
.st-client { margin: 18px 0 6px; font-size: 14px; letter-spacing: .02em; color: var(--muted); }
.st-client-none { font-weight: 500; }
.brand-preview { max-height: 56px; max-width: 220px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.share-panel form { display: grid; gap: 10px; }
.share-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.share-list li { display: flex; gap: 10px; align-items: center; justify-content: space-between; }

/* The header must fit a phone: the Torvane name stays on top and the links
   move to their own line below it, kept on one line. */
header.top .nav-link, header.top .btn, header.top .brand { white-space: nowrap; }
@media (max-width: 480px) {
  header.top { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  header.top nav { flex: 1 0 100%; gap: 0; justify-content: space-between; }
  header.top .nav-link { padding: 6px 8px; }
  header.top .nav-link:first-child { padding-left: 0; }
  header.top .btn.small { padding: 8px 12px; }
}

/* Pages inside the wide layout need their own side padding. */
.pr, .ct { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
.ct-check input[type=checkbox] { width: auto; flex: 0 0 auto; margin: 3px 0 0; padding: 0; }
.ct-check span { flex: 1 1 auto; }
.ct-check { flex-direction: row !important; align-items: center !important; }
.ct-check:has(span) { align-items: flex-start !important; }

/* The example window's toggle must look clickable, and the notes under it */
.pw-toggle button:hover, .hp-tablist button:hover { background: var(--surface); }
.pw-toggle button[aria-pressed="true"]:hover, .hp-tablist button[aria-selected="true"]:hover { background: var(--ink); }
.pw-toggle button:focus-visible, .hp-tablist button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pw-calib { margin-top: 6px; }
.pw-note { margin: 10px auto 0; max-width: 640px; font-size: 12.5px; color: var(--muted); text-align: center; }
.pw-samplelink { font-weight: 600; }
.hp-proof { padding-top: 8px; padding-bottom: 8px; }
.hp-proof .hp-wrap { text-align: center; }
.hp-founder { margin: 0 auto 18px; max-width: 640px; }
.hp-founder blockquote { margin: 8px 0; font-size: 20px; line-height: 1.45; }
.hp-founder figcaption { font-size: 14px; color: var(--muted); }
.hp-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin: 0; color: var(--muted); font-size: 15px; }
.hp-facts strong { color: var(--ink); }

/* Sample report */
.sample-banner { margin: 0 0 18px; padding: 12px 16px; background: var(--brand-tint); border: 1px solid var(--brand-edge); border-radius: var(--radius); font-size: 14px; }
.sample-toggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); }
.sample-toggle a { padding: 4px 14px; border-radius: var(--pill); color: var(--muted); font-size: 13px; font-weight: 500; text-decoration: none; }
.sample-toggle a:hover { background: var(--surface); color: var(--ink); }
.sample-toggle a[aria-current] { background: var(--ink); color: var(--panel); }
.sample-cta { margin: 28px 0 8px; padding: 28px; text-align: center; background: var(--night); color: var(--on-night); border-radius: var(--radius-lg); }
.sample-cta h2 { margin: 0 0 6px; }
.sample-cta p { margin: 0 0 16px; color: var(--muted-on-night); }

/* Homepage plan cards: the pricing page, compact */
.pr-teaser { padding-top: 88px; padding-bottom: 0; }
.pr-teaser + .hp-section { padding-top: 88px; }
.pr-teaser .hp-head { text-align: center; max-width: 640px; margin: 0 auto; }
.pr-teaser .hp-sub { margin-left: auto; margin-right: auto; }
.pr-teaser .pr-toggle-row { margin: 28px 0 8px; }
.pr-toggle button { min-height: 44px; padding: 0 20px; }
.pr-cards-teaser { list-style: none; margin: 34px 0 0; padding: 0; }
.pr-cards-teaser > .pr-card { text-align: left; }
.pr-cards-teaser .pr-card h3 { font-size: 20px; margin: 0; }
.pr-cards-teaser .pr-tag { min-height: 0; margin-top: 4px; font-size: 14px; }
.pr-cards-teaser .pr-note { min-height: 20px; }
.pr-cards-teaser .pr-card ul { margin: 14px 0 22px; flex: 1 1 auto; }
.pr-cards-teaser .pr-btn { margin-top: auto; }
.pr-teaser-links { text-align: center; margin: 28px 0 0; color: var(--muted); font-size: 15px; }
.pr-teaser-links a { font-weight: 600; }
.pr-teaser-foot { text-align: center; margin-top: 10px; }
@media (max-width: 640px) { .pr-teaser, .pr-teaser + .hp-section { padding-top: 56px; } }
.pr-cards-teaser .pr-card ul { align-content: start; }
.pr-dark { border-color: var(--night-line); }

/* Homepage example: a one-time replay of the two real scans. Everything here
   is an enhancement that home.js switches on (.has-replay); the markup
   underneath is the finished card. Only opacity and transform animate, and
   hidden parts keep their space, so the card never changes height. */
.pw-tag, .pw-steps { display: none; }
.js .pw-tag { display: inline-block; flex: none; padding: 2px 10px; border: 1px solid var(--line); border-radius: var(--pill); font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.pw.has-replay .pw-toggle { display: none; }
.pw.has-replay .pw-steps { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pw-stages { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pw-stages button { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color var(--dur) var(--ease); }
.pw-stages button:hover { color: var(--ink); }
.pw-stages button:focus-visible, .pw-replay:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pw-stage-n { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 11px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.pw-stages button[aria-current="step"] { color: var(--ink); }
.pw-stages button[aria-current="step"] .pw-stage-n { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.pw-end { display: inline-flex; align-items: center; gap: 8px; }
.pw-cta { padding: 6px 14px; font-size: 13px; }
.pw-cta[hidden] { display: none; }
.pw-replay { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 16px; line-height: 1; cursor: pointer; }
.pw-replay:hover { background: var(--surface); }
.pw-replay[hidden] { display: none; }
.pw-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.pw-prog i { display: block; height: 100%; background: var(--focus); transform: scaleX(0); transform-origin: left; }

.pw-detail { position: relative; }
.js .pw-detail { min-height: 196px; }
.pw-prompt { position: absolute; inset: 0; padding: 12px 16px; overflow: hidden; background: var(--surface); border-radius: 10px; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.pw.fx-prompt .pw-prompt { opacity: 1; visibility: visible; transition-delay: 0s; }
.pw-prompt-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pw-prompt .hp-tablist { margin-bottom: 8px; }
.pw-prompt .hp-prompt { max-height: 108px; overflow: hidden; padding: 10px 12px; font-size: 12px; line-height: 1.5; }

.pw.is-replay .pw-row, .pw.is-replay .grade, .pw.is-replay .pw-main-count, .pw.is-replay .pw-more, .pw.is-replay .sevlegend, .pw.is-replay .grade span { opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.pw.is-replay .pw-row { transform: translateY(10px); }
.pw.is-replay .pw-row.is-in { opacity: 1; transform: none; }
.pw.is-replay .grade.is-in, .pw.is-replay .grade.is-in.has-letter span, .pw.is-replay .pw-main-count.is-in, .pw.is-replay .pw-more.is-in, .pw.is-replay .sevsummary.is-in .sevlegend { opacity: 1; }
.pw.is-replay .grade.is-in:not(.has-letter) span { opacity: 0; }
.pw.is-replay .grade.st-before.is-in span { opacity: 1; }
.pw .sevbar g { transform-origin: 0 0; transition: transform .7s var(--ease); }
.pw.is-replay .sevsummary:not(.is-in) .sevbar g { transform: scaleX(0); }

@media (max-width: 767px) {
  .pw.is-replay .pw-row:nth-child(n+6) { display: none; }
}
@media (max-width: 480px) {
  .js .pw-tag { padding: 2px 8px; font-size: 11px; }
  .pw-stages { flex-wrap: nowrap; gap: 6px; }
  .pw-stages button { padding: 4px; }
  .pw-stages button:not([aria-current="step"]) .pw-stage-l { display: none; }
  .pw-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pw .sevbar g, .pw-prompt { transition: none; }
}

/* Selects draw their own chevron so it keeps its right padding in every
   browser (Safari ignores padding around the native arrow) and follows the
   theme. Kept last so it wins over the per-form select rules above. */
select:not([multiple]) {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Ownership proof: the callout that opens the dialog, and the dialog. */
.vd-callout { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; }
.vd-callout-strong { border-color: var(--brand-edge); background: var(--brand-tint); }
.vd-callout-body { display: flex; gap: 14px; align-items: flex-start; flex: 1 1 320px; }
.vd-callout-body h2 { margin: 0 0 4px; font-size: 17px; }
.vd-callout-body p { margin: 0; font-size: 14px; color: var(--muted); }
.vd-callout-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--brand); }
.vd-callout-icon svg { width: 20px; height: 20px; }
.vd-callout-methods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vd-callout noscript .rp-panel { border: 0; box-shadow: none; }

.vd { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24); }
.vd::backdrop { background: rgba(19, 20, 22, 0.55); }
.vd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; }
.vd-head h2 { margin: 0 0 6px; font-size: 20px; }
.vd-head p { margin: 0; font-size: 14px; color: var(--muted); }
.vd-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; }
.vd-close:hover { color: var(--ink); border-color: var(--line-strong); }
.vd-close svg { width: 18px; height: 18px; }
.vd-err { margin: 0 24px 12px; }
.vd-radio { position: absolute; opacity: 0; pointer-events: none; }
.vd-tabs { display: flex; gap: 4px; margin: 0 24px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.vd-tabs label { flex: 1; flex-direction: row; justify-content: center; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; text-align: center; }
.vd-tabs label:hover { color: var(--ink); }
#vd-m-meta:checked ~ .vd-tabs label[for="vd-m-meta"],
#vd-m-file:checked ~ .vd-tabs label[for="vd-m-file"],
#vd-m-dns:checked ~ .vd-tabs label[for="vd-m-dns"] { background: var(--panel); color: var(--ink); box-shadow: var(--float); }
#vd-m-meta:focus-visible ~ .vd-tabs label[for="vd-m-meta"],
#vd-m-file:focus-visible ~ .vd-tabs label[for="vd-m-file"],
#vd-m-dns:focus-visible ~ .vd-tabs label[for="vd-m-dns"] { outline: 2px solid var(--focus); outline-offset: 1px; }
.vd-panel { display: none; flex-direction: column; gap: 10px; padding: 16px 24px 4px; }
#vd-m-meta:checked ~ .vd-panels .vd-p-meta,
#vd-m-file:checked ~ .vd-panels .vd-p-file,
#vd-m-dns:checked ~ .vd-panels .vd-p-dns { display: flex; }
.vd-panel p { margin: 0; font-size: 14px; color: var(--muted); }
.vd-panel .btn { align-self: flex-start; margin-top: 4px; }
.vd-foot { margin: 0; padding: 12px 24px 20px; font-size: 13px; color: var(--muted); }
@media (max-width: 560px) {
  .vd-head, .vd-panel, .vd-foot { padding-left: 16px; padding-right: 16px; }
  .vd-tabs, .vd-err { margin-left: 16px; margin-right: 16px; }
  .vd-tabs label .rp-tag { display: none; }
  .vd-callout { padding: 16px; }
}

/* A log the plan does not include. */
.log-locked { display: grid; justify-items: start; gap: 6px; padding: 4px 24px 24px; }
.log-locked p { margin: 0; font-size: 14px; color: var(--muted); }
.log-locked p strong { color: var(--ink); font-size: 15px; }
.log-locked .btn { margin-top: 6px; }

/* Toasts: the page's confirmation or error, floating at the top right (the
   bottom on phones), tinted with the status colours. */
.toasts { position: fixed; top: 76px; right: 20px; z-index: 50; display: grid; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toasts[popover] { inset: 76px 20px auto auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: inherit; }
.toast { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 14px 12px 14px 14px; overflow: hidden; pointer-events: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(19, 20, 22, 0.14), 0 2px 6px rgba(19, 20, 22, 0.06);
  animation: toast-in 220ms var(--ease) both; }
.toast-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; }
.toast-icon svg { width: 16px; height: 16px; stroke-width: 2.25; }
.toast-ok .toast-icon { background: var(--pass-bg); color: var(--pass-fg); }
.toast-err { border-color: var(--critical-bg); }
.toast-err .toast-icon { background: var(--critical-bg); color: var(--critical-fg); }
.toast-text { flex: 1; margin: 4px 0 0; font-size: 14px; line-height: 1.45; font-weight: 500; }
.toast-close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.toast-close:hover { background: var(--surface); color: var(--ink); }
.toast-close svg { width: 16px; height: 16px; }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pass); transform-origin: left; animation: toast-timer 5s linear both; }
.toast-paused .toast-timer { animation-play-state: paused; }
.toast-out { animation: toast-out 200ms var(--ease) both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-color-scheme: dark) {
  .toast { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.02); }
}
@media (max-width: 560px) {
  .toasts, .toasts[popover] { inset: auto 16px 16px 16px; width: auto; }
  @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
}
@media (prefers-reduced-motion: reduce) {
  .toast, .toast-out { animation: none; }
  .toast-timer { display: none; }
}
@media (min-width: 561px) { .app-main .toasts, .app-main .toasts[popover] { top: 20px; } }
.st-recipients { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.st-rcpt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-rcpt-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; word-break: break-all; }
.st-rcpt-add { display: flex; gap: 8px; align-items: center; }
.st-rcpt-add label { flex: 1; }