/* Maskbreak homepage: one paper page, one instrument.
   (2026-09-30: the display voice is the sans since the product-site
   redesign; the serif below is kept for the shared header panels.)
   Warm paper and a serif display voice (the calm of an editorial page),
   drawn on an architectural frame (dashed rules at the shell edges, faint
   column rules behind the hero), with data set in mono. The visitor's own
   live check is the hero object; the verdicts are shown as the API's real
   response fields, the signals as the fields they set. Ultramarine is the
   only accent: buttons, links, the live dot. No glow, no gradient text,
   no tinted icon tiles. One sheet owns the page; motion is the copy's
   entrance and the live pulse, both off under reduced motion. */

/* ── 0. Display face ────────────────────────────────────────────────────── */
/* Newsreader (Production Type, SIL OFL 1.1 — assets/fonts/newsreader-OFL.txt),
   trimmed with the fontTools instancer to opsz 24–72 / wght 300–600: every
   headline from 40px to 110px. Homepage-only, so declared here rather than
   in the shared fonts.css. Same subset ranges as fonts.css. */
@font-face {
    font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
    src: url(/assets/fonts/newsreader-var-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
    src: url(/assets/fonts/newsreader-var-latin.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;
}

/* ── 1. Tokens and base ─────────────────────────────────────────────────── */
:root {
    --paper: #f9f8f4; --paper-2: #f1efe8; --surface: #fff; --stage: var(--paper-2);
    --ink: #15161a; --text: #3d3d3a; --text-dim: #64625c;
    --rule: #e4e1d8; --rule-2: #d6d2c6; --frame: #dcd8cc;
    --hairline: var(--rule); --hairline-soft: #ece9e1;
    --accent: #2733d9; --accent-deep: #1f2abf; --accent-wash: #eef0fd; --accent-line: #c9cdf5;
    --ok: #15803d; --warn: #b45309; --danger: #b91c1c;
    --ok-ink: #166534; --warn-ink: #92400e; --danger-ink: #991b1b;
    --sand: #fbf6ea;
    --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
    --sans: 'Schibsted Grotesk', -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --shell: 1240px;
    --frame-x: max(10px, calc(50% - 620px));
    --ring: 0 0 0 1px rgba(20, 20, 19, .085);
    --lift: 0 1px 2px rgba(20, 20, 19, .04), 0 14px 36px -18px rgba(20, 20, 19, .16);
    --ease: cubic-bezier(.22,1,.36,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (max-width: 640px) { html { scroll-padding-top: 72px; } }
/* The body stays transparent: the page frame below is a fixed layer at
   z-index -1, which a painted body background would cover. */
body { font: 400 1rem/1.65 var(--sans); background: transparent; color: var(--text); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--accent-deep); text-underline-offset: 4px; }
button, summary { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: #dde0fb; color: var(--ink); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10001; padding: 12px 20px; color: #fff; background: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 16px; }
.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; }

/* ── 2. The frame ───────────────────────────────────────────────────────── */
/* Two dashed rules at the shell edges run the length of the page; sections
   meet them with full-width rules. Cards sit on top of the frame. */
body::before {
    content: ''; position: fixed; top: 0; bottom: 0; left: var(--frame-x); right: var(--frame-x);
    z-index: -1; pointer-events: none;
    border-inline: 1px dashed var(--frame);
}
main > section:not(.hero), main > aside { border-top: 1px solid var(--rule); }

/* ── 3. Type, kickers, buttons ──────────────────────────────────────────── */
/* 2026-09-30 redesign (owner: a clean product-site layout, "more clean and
   understandable"): headings in the sans at 600, white bordered cards on
   the paper, the dashed frame kept. 2026-10-11 (owner: take inspiration
   from a reference site, "remake a bit"): kickers are a short line in the
   accent, in the sans (they were mono capitals with a square), and a
   section heading is one colour: the accent phrase (the <em> the catalogs
   keep) is coloured in the hero only. */
.hm-shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 28px; }
.hm-sec { padding-block: 96px; }
.hm-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent-deep); font: 600 .9375rem/1.45 var(--sans); letter-spacing: -.005em; }
.hm-h2 { color: var(--ink); font: 600 clamp(2rem, 3.5vw, 3.05rem)/1.08 var(--sans); letter-spacing: -.035em; text-wrap: balance; }
.hm-h2 em { font-style: normal; color: inherit; }
.hero-h1 em { font-style: normal; color: var(--accent); }
/* The hero accent phrase (the <em> inside .hero-h1) takes its own line. */
.hero-h1 em { display: block; }
.hm-ico { display: block; width: 20px; height: 20px; flex: none; }
.hm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 10px;
    font: 600 .9rem/1.35 var(--sans); letter-spacing: -.005em; text-decoration: none; text-align: center;
    cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.hm-btn svg { flex: none; }
/* A physical edge, not a glow: a border one step darker than the fill,
   a highlight on top and a one-pixel contact shadow. */
.hm-btn-primary { background: var(--accent); border-color: #1e28b4; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(20,20,19,.14); }
.hm-btn-primary:hover { background: var(--accent-deep); }
.hm-btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--ring), 0 1px 2px rgba(20,20,19,.05); }
.hm-btn-ghost:hover { box-shadow: 0 0 0 1px var(--rule-2), 0 1px 2px rgba(20,20,19,.06); }
/* Icon tiles: white, ringed, the glyph in the accent. */
.case-icon, .sig-icon, .trust-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: var(--ring), 0 1px 2px rgba(20,20,19,.05); color: var(--accent); }
.section-intro { max-width: 720px; margin-bottom: 44px; }
.section-intro > p:not(.hm-tag) { margin-top: 20px; max-width: 58ch; font-size: 1.04rem; }
@media (max-width: 640px) { .hm-shell { padding-inline: 20px; } .hm-sec { padding-block: 72px; } }

/* ── 6. Header ───────────────────────────────────────────────────────────── */
/* The site header (and the footer) are site-chrome.css since 2026-09-29: one
   sheet for every page. The hero starts under the header band, in the flow. */

/* ── 7. Say what it does, then show a real visit ────────────────────── */
/* One centred column: kicker, headline with its accent phrase, lede, two
   actions, the proof line; then the live check in a tray that is slotted
   into the frame (the visitor's own check is the demo). Faint column rules
   sit behind the hero only and fade out before the instrument. */
.hero { position: relative; isolation: isolate; margin-top: 0; padding: 84px 28px 0; }
.hero::before {
    content: ''; position: absolute; z-index: -1; top: 0; height: 640px;
    left: max(var(--frame-x), calc(50% - 460px)); right: max(var(--frame-x), calc(50% - 460px));
    pointer-events: none; border-inline: 1px solid var(--rule);
    -webkit-mask-image: linear-gradient(#000 40%, transparent 96%);
    mask-image: linear-gradient(#000 40%, transparent 96%);
}
.hero-panel { max-width: 1184px; margin: auto; }
.hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 980px; margin: 0 auto; }
/* One line of text that may wrap; the dot and the arrow ride with its
   first and last words. */
.hero-eyebrow {
    display: inline-block; max-width: 100%;
    margin-bottom: 22px; font: 600 .9375rem/1.45 var(--sans); letter-spacing: -.005em;
    color: var(--accent-deep); text-decoration: none; text-wrap: pretty;
}
.hero-eyebrow:hover { color: var(--accent); }
.hero-eyebrow-dot { display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: .14em; border-radius: 50%; background: var(--accent); }
.hero-eyebrow > span:last-child { margin-left: 6px; color: var(--accent); }
.hero-h1 { color: var(--ink); font: 600 clamp(2.7rem, 5.4vw, 4.4rem)/1.03 var(--sans); letter-spacing: -.045em; text-wrap: balance; overflow-wrap: break-word; }
@media (min-width: 641px) { html:lang(de) .hero-h1, html:lang(et) .hero-h1 { font-size: clamp(2.7rem, 5vw, 4.1rem); } }
.hero-lede { margin: 26px auto 0; max-width: 58ch; font-size: 1.15rem; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.hero-lede strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-direction: column; align-items: center; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 32px; }
/* Three facts, each after a small drawn check (2026-10-11): the dots
   between them dangled at a line end when the row wrapped (German). */
.hero-free { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 16px; font: 500 .875rem/1.6 var(--sans); letter-spacing: 0; color: var(--text-dim); }
.hero-free > span[aria-hidden] { display: none; }
.hero-free > span { display: block; }
.hero-free > span::before { content: ''; display: inline-block; width: 9px; height: 5px; margin: 0 9px 0 1px; vertical-align: .22em; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
/* What happens after the click: a self-serve key, watch mode first. */
@media (max-width: 46.25em) {
    .hero-free { gap: 2px 16px; }
    .hero-free > span:first-child { flex: 0 0 100%; text-align: center; }
}
.hero-setup-note { max-width: 70ch; margin: 12px auto 0; font-size: .875rem; line-height: 1.55; color: var(--text-dim); text-wrap: pretty; }
.hero-setup-note strong { color: var(--ink); font-weight: 600; }
.hero-capabilities { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-top: 12px; }
.hero-capabilities a { display: inline-flex; align-items: center; gap: 6px; font: 600 .875rem/1.6 var(--sans); letter-spacing: -.005em; color: var(--text); text-decoration: none; }
.hero-capabilities a:hover { color: var(--ink); }
.hero-capabilities span { color: var(--accent); }
/* The tray: a recessed band around the instrument, its top edge a toolbar
   carrying the live note. Inner radius = outer radius − padding. */
.hero-stage { min-width: 0; container-type: inline-size; margin-top: 52px; padding: 0 7px 7px; background: var(--paper-2); border-radius: 22px; box-shadow: inset 0 0 0 1px var(--rule); }
.hero-live-note { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 0 14px; font: 500 .8125rem/1.5 var(--sans); letter-spacing: 0; color: var(--text); }
.hero-live-note > span { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none; }
/* Under the check: where it sits between your site and your next step. */
.visit-route { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 32px; align-items: center; margin-top: 40px; padding: 26px 0; border-top: 1px solid var(--rule); }
.visit-route-intro .hm-tag { margin-bottom: 8px; }
.visit-route-intro p { font-size: .9rem; line-height: 1.6; max-width: 34ch; color: var(--text); }
.visit-route ol { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.visit-route li { display: flex; align-items: flex-start; gap: 12px; position: relative; min-width: 0; }
.visit-route li:not(:last-child)::after { content: '→'; position: absolute; top: 5px; right: -17px; color: var(--text-dim); }
.route-number, .route-mark { display: grid; place-items: center; width: 30px; height: 30px; flex: none; font: 500 .72rem var(--mono); background: #fff; border-radius: 8px; box-shadow: var(--ring); color: var(--text-dim); }
.route-mark { color: #fff; background: var(--ink); box-shadow: none; }
.visit-route strong { display: block; color: var(--ink); font-size: .9rem; font-weight: 600; margin-top: 2px; }
.visit-route li div > span { display: block; font-size: .8rem; color: var(--text-dim); margin-top: 4px; }
/* The real response under the three steps: paper colours, not a second dark card. */
.route-sample { grid-column: 2; min-width: 0; margin: 0; background: var(--surface); border-radius: 12px; box-shadow: var(--ring); overflow: hidden; }
.route-sample figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: .8rem; line-height: 1.5; color: var(--text-dim); text-wrap: pretty; }
.route-sample figcaption a { color: var(--accent); font-weight: 500; text-decoration: none; }
.route-sample figcaption a:hover { color: var(--accent-deep); text-decoration: underline; }
.route-sample pre { margin: 0; padding: 14px 16px; overflow-x: auto; font: 450 .78rem/1.65 var(--mono); font-variant-ligatures: none; color: var(--ink); tab-size: 2; }
.route-sample code { font: inherit; }
.route-sample .c-key { color: var(--text); }
.route-sample .c-st { color: var(--accent); }
.route-sample .c-num { color: var(--ink); }
.product-fit.hm-shell { padding: 0; max-width: 1184px; margin-top: 0; font-size: .85rem; }
.product-fit summary { cursor: pointer; padding: 4px 0 28px; color: var(--text-dim); }
.product-fit summary:hover { color: var(--ink); }
.product-fit p { max-width: 100ch; margin: 0 0 16px; }
@media (max-width: 880px) {
    .hero { padding-top: 64px; }
    .visit-route { grid-template-columns: 1fr; gap: 20px; }
    .visit-route-intro p { max-width: none; }
    .route-sample { grid-column: auto; }
}
@media (max-width: 640px) {
    .hero { padding: 40px 20px 0; }
    .hero::before, body::before { display: none; }
    .hero-eyebrow, .hero-capabilities { display: none; }
    .hero-h1 { font-size: clamp(1.9rem, calc((100vw - 40px) / 9.2), 2.75rem); letter-spacing: -.04em; }
    .hero-lede { margin-top: 18px; font-size: 1.02rem; }
    .hero-actions { align-self: stretch; }
    .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 10px; margin-top: 26px; }
    .hero-ctas > * { justify-content: center; }
    .hero-free { margin-top: 14px; font-size: .75rem; }
    .hero-setup-note { margin-top: 12px; font-size: .84rem; }
    .hero-stage { margin-top: 30px; margin-inline: -8px; padding: 0 5px 5px; border-radius: 18px; }
    .hero-live-note { min-height: 38px; font-size: .78rem; }
    .visit-route { margin-top: 28px; }
    .visit-route ol { grid-template-columns: 1fr; gap: 22px; }
    .visit-route li:not(:last-child)::after { content: ''; left: 14px; top: 38px; bottom: -16px; width: 1px; background: var(--rule-2); }
    .route-sample pre { padding: 12px 14px; }
}

/* ── 8. Live visitor instrument ───────────────────────────────────────── */
/* The DOM inside .scanner-widget is live functionality wired to fixed ids —
   these rules skin it. The loader is presentation-only; result hooks stay intact. State classes written by
   the JS: .pending .val-flash .val-scanning .score-pop .expanded .fading
   .visible .show-rows .is-transitioning .verdict-{threat,warn,clean}
   .demo(-active) .hot .on .chip-{safe,threat}. All must stay styled.
   The JS writes the verdict colours as literal hex (#15803d / #b45309 /
   #b91c1c); on this white instrument they read at ≥4.5:1. */

.scanner-widget {
    --accent: #2733d9;               /* scanner fallback accent; JS reads it */
    position: relative;
    color: var(--ink);
    background: var(--surface);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--ring), 0 1px 2px rgba(20,20,19,.05), 0 22px 48px -30px rgba(20,20,19,.3);
}
.scanner-glow { display: none; }

.scanner-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 52px; padding: 10px 24px;
    border-bottom: 1px solid var(--hairline-soft);
    background: #fff;
}
.scanner-title {
    display: flex; align-items: center; gap: 9px; flex: 1 1 auto;
    font-family: var(--sans); font-size: .88rem; font-weight: 600;
    letter-spacing: -.01em; line-height: 1.4; white-space: nowrap;
    color: var(--ink);
    min-width: 0;
}
.scanner-title .sq-sm { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); flex-shrink: 0; }
.scanner-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.scanner-live-status {
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    min-height: 30px; padding: 0 4px;
    font-family: var(--sans); font-size: .78rem; font-weight: 500;
    color: var(--text-dim);
}
.scanner-live-status span { white-space: nowrap; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #2733d9; flex-shrink: 0; }

.scan-time-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-height: 24px; padding: 0; white-space: nowrap;
    font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .04em;
    color: var(--text-dim);
    opacity: 0; visibility: hidden; pointer-events: none;
}
.scan-time-chip.on { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 640px) { .scan-time-chip { display: none; } }

.scanner-rescan {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 12px; flex-shrink: 0; cursor: pointer;
    background: #fff; border: 0; border-radius: var(--r-sm); box-shadow: var(--ring);
    color: var(--text);
    font-family: var(--sans); font-size: .76rem; font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.scanner-rescan:hover { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--rule-2); }
.scanner-rescan svg { width: 11px; height: 11px; }

/* Header controls yield in order of importance as the instrument narrows:
   the latency chip goes first, then Rescan drops to its icon (the title
   attribute and the visually-hidden label keep its accessible name). The
   title itself is a flex container, so text-overflow cannot ellipsize it —
   it must be given room instead of clipped. Must stay AFTER the base rules
   above: same specificity, cascade order decides. */
@container (max-width: 660px) {
    .scanner-rescan { padding: 0 9px; }
    .scanner-rescan span {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}
@container (max-width: 560px) {
    .scan-time-chip { display: none; }
    .scanner-title { flex: 0 1 auto; }
    .scanner-header-right { min-width: 0; flex: 1; justify-content: flex-end; }
    .scanner-live-status { padding: 0; min-width: 0; }
    .scanner-live-status span { overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 430px) {
    .scanner-header { gap: 6px; }
    .scanner-live-status span { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
}

/* One stable report and its footnote; no overlaid loading screen. */
.scanner-body {
    position: relative; padding: 0;
}
.scanner-result { grid-row: 1; align-self: start; }
.scanner-footer {
    display: flex; align-items: center; gap: 20px; padding: 12px 26px;
    border-top: 1px solid var(--hairline-soft); background: #fcfbf8;
}
.scanner-footnote {
    flex: 1; font-size: .76rem; line-height: 1.55;
    color: var(--text-dim); margin-right: auto;
}

/* The report itself is the loading state. One small header indicator is
   the only motion; no duplicate panel, instruction sequence or result reveal. */
.scanner-loading-msg { display: inline-flex; align-items: center; }
.scanner-loading-msg[hidden] { display: none; }
.scanner-widget[aria-busy="true"] #scanner-pulse { display: none; }
.scan-activity { width: 12px; height: 12px; border: 2px solid #e6e3da; border-top-color: var(--accent); border-radius: 50%; animation: scanActivity 1.8s linear infinite; flex: none; }
@keyframes scanActivity { to { transform: rotate(360deg); } }
/* Result state: the answer on the left, six readouts on the right. */
.scanner-result {
    grid-area: 1 / 1;
    display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: 0;
    position: relative;
}
.scanner-result.visible { opacity: 1; visibility: visible; pointer-events: auto; }
.scanner-result .result-row { opacity: 1; }
.scanner-result.show-rows .result-row { opacity: 1; }

.scanner-left { display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 22px; }
.scanner-signals {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 0;
}

.result-row {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 8px; min-width: 0; padding: 2px 18px;
    border-left: 1px solid var(--hairline-soft);
}
.result-row:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.result-row-label {
    font: 500 .62rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-dim);
}
.result-row-val {
    font-family: var(--sans); font-size: .9rem; font-weight: 550;
    color: var(--ink); letter-spacing: -0.01em; line-height: 1.4;
    display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start;
    min-width: 0; overflow-wrap: anywhere; text-align: left;
    flex-shrink: 1; flex-wrap: wrap;
    /* A long word in a narrow phone column ("Automatisierung") breaks at a
       syllable with a hyphen, not mid-letter; anywhere stays the backstop. */
    -webkit-hyphens: auto; hyphens: auto;
}

/* Keep an IPv4 address whole, allowing its flag to wrap separately. IPv6
   can wrap within the address; it must not widen the report on a phone. */
#res-ip { word-break: normal; font-family: var(--mono); font-size: .84rem; font-weight: 500; gap: 7px; }
.scanner-ip-address { white-space: nowrap; max-width: 100%; }
.scanner-ip-address.ipv6 { white-space: normal; overflow-wrap: anywhere; }
.scanner-ip-route { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; max-width: 100%; }
.scanner-ip-secondary { color: var(--text-dim); font-size: .82em; }
#res-seen { font-variant-numeric: tabular-nums; }
#res-ip img { width: 16px; height: 12px; object-fit: cover; border-radius: 2px; }
.scanner-widget[aria-busy="true"] .result-row-val.is-pending {
    position: relative; color: transparent; min-width: 90px; min-height: 23px;
}
.scanner-widget[aria-busy="true"] .result-row-val.is-pending::after {
    content: ''; position: absolute; inset: 4px 0; border-radius: 4px; background: #efece5;
}

/* Legacy state classes stay compatible with the scanner. Every field keeps
   its place whether it is pending, unavailable or populated. */
.result-row.collapsible, .result-row.collapsible.expanded { opacity: 1; }

.result-row-val.val-flash { border-radius: 4px; }
.result-row-val.val-scanning { color: var(--text-dim); }

/* Marks beside the Device and Connection rows (2026-09-29): a bare glyph
   from /assets/marks.svg in ink, never a brand colour (green / amber / red
   are the verdict colours); a category glyph with no brand behind it (the
   network globe, a VPN shield …) sits in the dimmer text colour. */
.bl-mark { width: 15px; height: 15px; flex: none; display: block; color: var(--ink); overflow: visible; }
.bl-mark-generic { color: var(--text-dim); }
/* A mark and its name wrap as one piece: the mark never ends a line alone.
   A long name ("Samsung Internet 28", a carrier) breaks between words inside
   the piece ("Google Chrome" / "140", never "1" / "40") instead of running
   into the next column, and the mark stays centred on its first line
   (1.4em = the row's line-height). */
.bl-named { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; max-width: 100%; }
.bl-named > .bl-mark { margin-top: calc((1.4em - 15px) / 2); }
.bl-named > span { min-width: 0; overflow-wrap: break-word; word-break: normal; }
/* The carrier after "Mobile network ·" (any length: the network's owner on a
   cellular link) shares the dot's line when 10ch fit there, else starts the
   next line with it, and wraps between words inside itself. */
.bl-carrier { flex: 1 1 10ch; min-width: 0; overflow-wrap: break-word; word-break: normal; }
/* Pieces that wrap to several lines line up on their first line (the dot
   too), not on the middle of the tallest piece. One piece alone: no change. */
#res-service, #res-device { align-items: flex-start; }

/* Silent app-detection row (dormant; container kept by the JS). */
.scheme-scan-row { padding: 7px 0 2px; margin-top: 2px; border-top: 1px solid var(--hairline-soft); }
.scheme-scan-label {
    font-family: var(--mono); font-size: .75rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 6px;
}
.scheme-scan-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.scheme-scan-btn {
    font-family: var(--mono); font-size: .75rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-dim); background: var(--paper);
    border: 1px solid var(--rule); border-radius: 5px;
    padding: 4px 9px; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.scheme-scan-btn svg { width: 8px; height: 8px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* A recommendation, not a decorative risk dial: the verdict word is set in
   the display sans, a 3px leading rule carries the verdict colour. */
.scanner-right { order: -1; position: relative; display: grid; grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 24px 28px; background: #fcfbf8; border-right: 1px solid var(--hairline-soft); }
.scanner-widget.verdict-threat .scanner-right { background: #fdf8f6; box-shadow: inset 3px 0 0 var(--danger); }
.scanner-widget.verdict-warn .scanner-right { background: #fdf9f2; box-shadow: inset 3px 0 0 var(--warn); }
.scanner-widget.verdict-clean .scanner-right { background: #f7faf7; box-shadow: inset 3px 0 0 var(--ok); }

.scanner-data-badge {
    position: absolute; top: 24px; right: 28px; max-width: 48%; text-align: right;
    font: 600 .64rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-dim);
}
.scanner-widget.verdict-clean .scanner-data-badge { color: var(--ok-ink); }
.scanner-widget.verdict-warn .scanner-data-badge { color: var(--warn-ink); }
.scanner-widget.verdict-threat .scanner-data-badge { color: var(--danger-ink); }
.scanner-data-badge.demo { color: var(--warn-ink); }

.score-block { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.risk-meter { display: none; visibility: hidden; } /* Public checks supply a recommendation, not a score. */
#risk-score-circle {
    font-family: var(--sans); font-weight: 600; font-size: 2.3rem; line-height: 1.05; letter-spacing: -.035em;
    color: var(--text-dim); overflow-wrap: anywhere;
}
#risk-score-circle.pending { color: var(--text-dim); }
.gauge-score-label { order: -1; font: 500 .62rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.risk-bar { display: none; }
.risk-bar-fill {
    display: block; height: 100%; width: 0; background: #16a34a;
}
.score-pop { opacity: 1; }

.scanner-verdict { text-align: left; width: 100%; }
#result-message {
    font-family: var(--sans); font-size: 1.02rem; font-weight: 600;
    letter-spacing: -.02em; color: var(--ink); line-height: 1.4;
    position: relative; margin-bottom: 6px; text-wrap: balance;
}
.verdict-sub { position: relative; font-size: .8rem; color: var(--text-dim); line-height: 1.55; margin: 0 0 12px; font-family: var(--sans); max-width: 46ch; }
.scanner-widget[aria-busy="true"] #result-message { min-height: 2.8em; }
.scanner-widget[aria-busy="true"] .verdict-sub { min-height: 3.1em; }
.scanner-widget[aria-busy="true"] #result-message:empty::after {
    content: ''; position: absolute; inset: 6px 14% auto 0; height: 18px;
    border-radius: 4px; background: #efece5;
}
.scanner-widget[aria-busy="true"] .verdict-sub:empty::after {
    content: ''; position: absolute; inset: 6px 7.5% auto 0; height: 28px;
    background: linear-gradient(#efece5 0 8px, transparent 8px 18px, #efece5 18px 26px, transparent 26px);
}
.verdict-link {
    font-family: var(--sans); font-size: .76rem; color: var(--text-dim);
    text-decoration: none; display: inline-block;
    border-bottom: 1px solid var(--rule-2); padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}
.verdict-link:hover { color: var(--accent-deep); border-color: var(--accent-line); }

/* The one action beside the verdict, a filled button like the hero's
   (PostHog, 2026-10-17: visitors spend their ~20 s on this report, and as a
   text link it got 3 clicks in about 200 recorded homepage visits). */
.verdict-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
    min-height: 40px; padding: 8px 16px; border: 1px solid #1e28b4; border-radius: 10px;
    background: var(--accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(20,20,19,.14);
    font: 600 .84rem/1.3 var(--sans); text-decoration: none; text-align: center;
    transition: background .15s;
}
.verdict-cta:hover { background: var(--accent-deep); }

.scanner-tabs {
    display: flex; gap: 3px; width: fit-content; max-width: 100%; margin-top: 22px;
    background: var(--paper-2); border-radius: 10px; padding: 3px;
}
.scanner-tab {
    flex: 0 0 auto; min-height: 30px; white-space: nowrap; padding: 4px 14px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--sans); font-size: .76rem; font-weight: 500; text-align: center;
    background: transparent; border: none; border-radius: 8px;
    color: var(--text-dim); cursor: pointer; line-height: 1.4;
    transition: color 0.18s, background 0.18s, box-shadow 0.18s;
}
.scanner-tab:hover { color: var(--ink); }
.scanner-tab:disabled { color: var(--text-dim); opacity: .65; cursor: wait; }
.scanner-tab.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,19,.08), 0 0 0 1px rgba(20,20,19,.06); }
.scanner-tab.demo-active { background: #fff; color: var(--accent-deep); box-shadow: 0 1px 2px rgba(20,20,19,.08), 0 0 0 1px rgba(20,20,19,.06); }

/* Detail panel atoms the JS may write into (dormant markup, null-guarded). */
.detail-item-label { color: var(--text-dim); font-weight: 600; white-space: nowrap; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.detail-item-val { font-family: var(--mono); font-size: .75rem; font-weight: 600; white-space: nowrap; transition: color 0.3s ease; }
.detail-val-safe { color: var(--ok); }
.detail-val-danger { color: var(--danger); }
.detail-val-warn { color: var(--warn); }
.scanner-visitor-id {
    font-family: var(--mono); font-size: .75rem; font-weight: 600;
    color: var(--text-dim); letter-spacing: 0.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.scanner-visitor-id.threat { color: var(--danger); }
.scanner-seen-count { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.scanner-seen-count.hot { color: var(--danger); }
.chip-num { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-num.chip-safe { color: var(--ok); }
.chip-num.chip-threat { color: var(--danger); }

@container (max-width: 860px) {
    .scanner-result { grid-template-columns: 1fr; }
    .scanner-right { border-right: 0; border-bottom: 1px solid var(--hairline-soft); }
    .scanner-verdict { max-width: 60ch; }
}
@container (max-width: 760px) {
    .scanner-header { padding: 10px 18px; }
    .scanner-left { padding: 20px 20px 20px; }
    .scanner-right { padding: 22px 20px; }
    .scanner-data-badge { top: 22px; right: 20px; }
    .scanner-footer { flex-wrap: wrap; gap: 4px 16px; padding: 12px 20px; }
    .scanner-footnote { flex-basis: 100%; max-width: none; }
    .scan-time-chip { display: none; }
    .verdict-cta { flex-basis: 100%; margin-top: 8px; }
}
@container (max-width: 560px) {
    .scanner-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
    .result-row:nth-child(3n+1) { border-left: 1px solid var(--hairline-soft); padding-left: 14px; }
    .result-row:nth-child(odd) { border-left: 0; padding-left: 0; }
    .result-row { padding-right: 14px; }
    #risk-score-circle { font-size: 2.2rem; }
}
@container (max-width: 440px) {
    .scanner-verdict { min-height: 118px; }
    .scanner-data-badge { display: none; }
    .result-row-val, #res-ip { font-size: .82rem; }
}
@container (max-width: 374px) {
    .scanner-live-status #scanner-live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .scanner-left { padding: 16px; }
    .scanner-right { padding: 18px 16px; }
    .result-row { padding-right: 10px; }
    .result-row:nth-child(3n+1) { padding-left: 10px; }
    .result-row:nth-child(odd) { padding-left: 0; }
    .scanner-tab { padding: 4px 10px; white-space: normal; }
}
/* Browsers without container queries (Chrome < 105, Safari < 16, Firefox
   < 110: Android emulator images, iOS 15) never matched the rules above and
   laid a phone out as the two-column desktop instrument, labels overlapping
   and words broken one letter per line (2026-09-27). The same rules by
   viewport width: the tray is the viewport minus 34 px up to 640 px, minus
   70 px above it, so container 860/760/660/560/440/374 px = viewport
   930/830/730/594/474/408 px. Same order as the originals. */
@supports not (container-type: inline-size) {
    @media (max-width: 930px) {
        .scanner-result { grid-template-columns: 1fr; }
        .scanner-right { border-right: 0; border-bottom: 1px solid var(--hairline-soft); }
        .scanner-verdict { max-width: 60ch; }
    }
    @media (max-width: 830px) {
        .scanner-header { padding: 10px 18px; }
        .scanner-left { padding: 20px 20px 20px; }
        .scanner-right { padding: 22px 20px; }
        .scanner-data-badge { top: 22px; right: 20px; }
        .scanner-footer { flex-wrap: wrap; gap: 4px 16px; padding: 12px 20px; }
        .scanner-footnote { flex-basis: 100%; max-width: none; }
        .scan-time-chip { display: none; }
        .verdict-cta { flex-basis: 100%; margin-top: 8px; }
    }
    @media (max-width: 730px) {
        .scanner-rescan { padding: 0 9px; }
        .scanner-rescan span {
            position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
            overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
        }
    }
    @media (max-width: 594px) {
        .scanner-title { flex: 0 1 auto; }
        .scanner-header-right { min-width: 0; flex: 1; justify-content: flex-end; }
        .scanner-live-status { padding: 0; min-width: 0; }
        .scanner-live-status span { overflow: hidden; text-overflow: ellipsis; }
        .scanner-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 0; }
        .result-row:nth-child(3n+1) { border-left: 1px solid var(--hairline-soft); padding-left: 14px; }
        .result-row:nth-child(odd) { border-left: 0; padding-left: 0; }
        .result-row { padding-right: 14px; }
        #risk-score-circle { font-size: 2.2rem; }
    }
    @media (max-width: 474px) {
        .scanner-verdict { min-height: 118px; }
        .scanner-data-badge { display: none; }
        .result-row-val, #res-ip { font-size: .82rem; }
    }
    @media (max-width: 408px) {
        .scanner-live-status #scanner-live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
        .scanner-left { padding: 16px; }
        .scanner-right { padding: 18px 16px; }
        .result-row { padding-right: 10px; }
        .result-row:nth-child(3n+1) { padding-left: 10px; }
        .result-row:nth-child(odd) { padding-left: 0; }
        .scanner-tab { padding: 4px 10px; white-space: normal; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .scan-activity { animation: none; }
}

/* ── 9. The sections after the check (2026-09-30 redesign) ───────────── */

/* Coverage: four live figures, each on a thin rule at its left (2026-10-11;
   dashed centred cells before), where a customer-logo strip would sit on
   other sites (no logos: none may be invented). */
.stats-bar { padding: 0 28px; }
.stats-bar.stats-pending { opacity: 0; }
.stats-bar.stats-empty { visibility: hidden; }
.stats-title { max-width: 1184px; margin: 0 auto; padding-top: 40px; font: 600 .9375rem/1.45 var(--sans); letter-spacing: -.005em; color: var(--accent-deep); }
.stats-inner { max-width: 1184px; margin: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; padding: 24px 0 48px; }
.stat-item { min-width: 0; padding: 4px 0 6px 22px; border-left: 1px solid var(--rule-2); }
.stat-num { font: 600 clamp(2rem, 3.2vw, 2.8rem)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: lining-nums; color: var(--ink); }
.stat-label { margin-top: 12px; max-width: 26ch; font: 500 .875rem/1.5 var(--sans); color: var(--text-dim); }

/* Use cases: an accordion; the example beside it follows the open case
   (data-case on the section, set by a small ES5 script). */
.cases-grid { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: 72px; align-items: start; }
.cases-intro { margin-top: 20px; max-width: 52ch; font-size: 1.04rem; }
.case-list { margin-top: 34px; border-top: 1px solid var(--rule); }
.case { border-bottom: 1px solid var(--rule); }
.case > summary { display: flex; align-items: center; gap: 14px; padding: 16px 4px; cursor: pointer; list-style: none; color: var(--ink); font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; }
.case > summary::-webkit-details-marker { display: none; }
.case > summary:hover .case-t { color: var(--accent-deep); }
.case .case-icon { width: 36px; height: 36px; border-radius: 9px; }
.case .hm-ico { width: 18px; height: 18px; }
.case-t { flex: 1 1 auto; min-width: 0; }
.case-chev { flex: none; color: var(--text-dim); transition: transform .2s var(--ease); }
.case[open] .case-chev { transform: rotate(180deg); }
.case-body { padding: 0 4px 22px 54px; }
.case-body p { font-size: .96rem; }
.case-body a { display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 600; text-decoration: none; }
.case-body a:hover { text-decoration: underline; }
.cases-all { margin-top: 30px; }
.cases-demo { position: sticky; top: 96px; min-width: 0; }
.case-ex { display: none; background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring), var(--lift); overflow: hidden; }
#use-cases[data-case="signup"] .case-ex[data-case="signup"],
#use-cases[data-case="ato"] .case-ex[data-case="ato"],
#use-cases[data-case="trial"] .case-ex[data-case="trial"],
#use-cases[data-case="card"] .case-ex[data-case="card"] { display: block; }
.case-ex-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 18px 22px; border-bottom: 1px solid var(--rule); }
.case-ex-k { font: 600 .8125rem/1.5 var(--sans); color: var(--text-dim); }
.case-ex-scn { font-size: .92rem; font-weight: 600; color: var(--ink); }
.case-ex-main { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.case-form { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; background: var(--paper); border-right: 1px solid var(--rule); }
.cf-url { overflow: hidden; padding: 6px 10px; border-radius: 6px; background: #fff; box-shadow: var(--ring); font: 500 .7rem/1.4 var(--mono); color: var(--text-dim); white-space: nowrap; text-overflow: ellipsis; }
.cf-field { padding: 9px 12px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--rule-2); font-size: .8rem; color: var(--text-dim); }
.cf-btn { margin-top: 4px; padding: 10px 12px; border-radius: 7px; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 600; text-align: center; }
.case-sig { display: block; min-width: 0; padding: 6px 22px; }
.case-sig > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); }
.case-sig > div:last-child { border-bottom: 0; }
.case-sig dt { font: 500 .76rem/1.5 var(--mono); color: var(--text); }
.case-sig dd { font: 600 .76rem/1.5 var(--mono); color: var(--ok-ink); text-align: right; }
.case-sig .is-bad dd { color: var(--danger-ink); }
.case-sig .is-warn dd { color: var(--warn-ink); }
.case-ex-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 15px 22px; border-top: 1px solid var(--rule); background: #fcfbf8; box-shadow: inset 3px 0 0 var(--danger); font: 500 .74rem/1.6 var(--mono); color: var(--ink); }
.case-ex-foot.is-review { box-shadow: inset 3px 0 0 var(--warn); }
.case-ex-foot code { font: inherit; overflow-wrap: anywhere; }
.case-note { margin-top: 14px; font-size: .8rem; color: var(--text-dim); }

/* Section heads on desktops (2026-10-11): kicker and heading on the left,
   the intro on the right, its last line level with the heading's. */
@media (min-width: 1024px) {
    .home-signals .section-intro, .home-trust .section-intro { max-width: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 64px; align-items: end; }
    .home-signals .section-intro .hm-tag, .home-trust .section-intro .hm-tag { grid-column: 1 / -1; }
    .home-signals .section-intro > .hm-h2, .home-trust .section-intro > .hm-h2 { align-self: start; }
    .home-signals .section-intro > p:not(.hm-tag), .home-trust .section-intro > p:not(.hm-tag) { width: min(48ch, 100%); max-width: none; margin: 0 0 6px auto; text-wrap: pretty; }
}

/* Decisions: three cards, each showing the API's real answer. */
.home-decisions .section-intro { max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: end; }
.home-decisions .hm-tag { grid-column: 1 / -1; }
.home-decisions .section-intro > p:not(.hm-tag) { max-width: 48ch; margin: 0 0 4px auto; text-wrap: pretty; }
.decision-board-label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 0 2px 14px; font: 500 .8125rem/1.5 var(--sans); color: var(--text-dim); }
.decision-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.decision-card { --v: var(--ok); --v-ink: var(--ok-ink); position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 30px 28px 26px; color: var(--v-ink); background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring), inset 0 3px 0 var(--v); }
.decision-card[data-decision="review"] { --v: var(--warn); --v-ink: var(--warn-ink); }
.decision-card[data-decision="block"] { --v: var(--danger); --v-ink: var(--danger-ink); }
.decision-situation { font-size: .84rem; line-height: 1.5; color: var(--text-dim); min-height: 3em; margin-bottom: 12px; }
.decision-card h3 { font: 600 2rem/1.05 var(--sans); letter-spacing: -.035em; margin-bottom: 14px; color: var(--v-ink); }
.decision-card > p:not(.decision-situation) { font-size: .94rem; color: var(--text); margin-bottom: 26px; }
/* The scene is the response excerpt: mono text inside one inline SVG. */
.decision-scene { order: 3; width: 100%; margin-top: auto; container-type: inline-size; }
.decision-scene svg { display: block; width: 100%; height: auto; }
.rx-panel { fill: var(--paper); stroke: var(--rule); }
.rx { font-family: var(--mono); font-size: 12.5px; font-weight: 500; }
.rx-cap { fill: var(--text-dim); font-size: 10.5px; letter-spacing: .06em; }
.rx-key { fill: var(--ink); }
.rx-pun { fill: var(--text-dim); }
.rx-val { fill: currentColor; font-weight: 600; }
.rx-arr { fill: var(--text); }
@container (max-width: 320px) { .rx { font-size: 14.5px; } .rx-cap { font-size: 13px; } }
.decision-note { font-size: .84rem; color: var(--text-dim); margin-top: 20px; max-width: 86ch; }
.decision-note a { white-space: normal; }

/* Under the hood (#layers, right after the coverage strip since
   2026-09-30): the two detection engines side by side, each with what it
   catches as a checked list and the API fields it sets; the bot check they
   share runs as a strip across both. */
.engine-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.engine { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px 32px 28px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring); }
.engine .sig-icon { margin-bottom: 22px; }
.engine h3 { font: 600 1.5rem/1.25 var(--sans); letter-spacing: -.025em; color: var(--ink); text-wrap: pretty; }
.engine h3 a { color: var(--ink); text-decoration: none; }
.engine h3 a:hover { color: var(--accent-deep); }
.engine h3 span { color: var(--accent); margin-left: 4px; font-size: .8em; }
.engine-lead { margin-top: 10px; font-size: 1rem; color: var(--text); }
.engine-points { list-style: none; align-self: stretch; margin-top: 22px; border-top: 1px solid var(--hairline-soft); }
.engine-points li { position: relative; padding: 13px 0 13px 30px; border-bottom: 1px solid var(--hairline-soft); font-size: .94rem; line-height: 1.55; color: var(--text); }
/* A drawn check mark (two borders, turned), centred on the first line. */
.engine-points li::before { content: ''; position: absolute; left: 3px; top: calc(13px + .775em - 6px); width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.engine-points strong { color: var(--ink); font-weight: 600; }
.signal-field { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 22px; }
.signal-field code { display: inline-block; padding: 4px 8px; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); font: 500 .74rem/1.4 var(--mono); color: var(--accent-deep); }
.engine-bots { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px 22px; padding: 24px 32px; }
.engine-bots .sig-icon { margin-bottom: 0; }
.engine-bots h3 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -.015em; }
.engine-bots-copy p { margin-top: 4px; max-width: 76ch; font-size: .94rem; color: var(--text); }
.engine-bots .signal-field { margin-top: 0; padding-top: 0; }

/* Email and phone intelligence (2026-10-18): a console tool, beside an example
   of one check's result. The example is an illustration and its caption says
   so; the plans' numbers are lib/billing.js's (tests/home-contact). */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px 72px; align-items: center; }
.contact-copy { min-width: 0; }
.home-contact .hm-tag::after { content: ''; order: -1; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash); }
.contact-lede { margin-top: 20px; max-width: 54ch; font-size: 1.04rem; color: var(--text); text-wrap: pretty; }
.contact-points { list-style: none; margin-top: 24px; border-top: 1px solid var(--hairline-soft); }
.contact-points li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid var(--hairline-soft); font-size: .94rem; line-height: 1.55; color: var(--text); }
.contact-points li::before { content: ''; position: absolute; left: 3px; top: calc(12px + .775em - 6px); width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.contact-points strong { color: var(--ink); font-weight: 600; }
.contact-plans { margin: 18px 0 24px; font-size: .9rem; color: var(--text-dim); }
.contact-demo { min-width: 0; margin: 0; }
.ct-card { overflow: hidden; border-radius: var(--r-lg); background: #fff; box-shadow: var(--ring), 0 30px 60px -36px rgba(21,22,26,.42); }
.ct-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--hairline-soft); background: linear-gradient(180deg, #fff 0%, #faf9f6 100%); }
.ct-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fff; box-shadow: var(--ring); color: var(--accent); }
.ct-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ct-kind { font-size: .75rem; line-height: 1.4; color: var(--text-dim); }
.ct-value { font: 600 1rem/1.35 var(--mono); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.ct-gauge { flex: none; display: flex; align-items: center; gap: 10px; }
.ct-ring { position: relative; display: grid; place-items: center; width: 52px; height: 52px; }
.ct-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ct-ring circle { fill: none; stroke-width: 3.2; }
.ct-track { stroke: #ecebe6; }
.ct-fill { stroke: #c2750a; stroke-linecap: round; }
.ct-ring b { position: relative; font: 700 1rem/1 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.ct-gauge-text { display: flex; flex-direction: column; font-size: .75rem; line-height: 1.3; color: var(--text-dim); }
.ct-gauge-text strong { font-size: .875rem; font-weight: 650; color: var(--warn-ink); }
.ct-callouts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 16px 20px 6px; }
.ct-callout { padding: 11px 13px; border: 1px solid; border-radius: 10px; font-size: .82rem; line-height: 1.45; color: var(--text); }
.ct-callout.is-look { border-color: #f3dfbd; background: #fffaf1; }
.ct-callout.is-real { border-color: #cfe6d6; background: #f5fbf7; }
.ct-callout-title { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-weight: 650; color: var(--ink); }
.ct-callout.is-look .ct-callout-title svg { color: #c2750a; }
.ct-callout.is-real .ct-callout-title svg { color: var(--ok); }
.ct-callout p + p { margin-top: 2px; }
.ct-facts { margin: 0; padding: 6px 20px 14px; }
.ct-facts div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hairline-soft); font-size: .84rem; line-height: 1.45; }
.ct-facts div:last-child { border-bottom: 0; }
.ct-facts dt { color: var(--text-dim); }
.ct-facts dd { margin: 0; font-weight: 500; color: var(--ink); text-align: right; }
.ct-facts dd.is-good::before, .ct-facts dd.is-bad::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; vertical-align: middle; }
.ct-facts dd.is-good::before { background: var(--ok); }
.ct-facts dd.is-bad { color: var(--danger-ink); }
.ct-facts dd.is-bad::before { background: var(--danger); }
.contact-demo figcaption { margin-top: 12px; font-size: .82rem; color: var(--text-dim); text-align: center; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0,1fr); gap: 36px; } }
@media (max-width: 520px) {
    .ct-head { flex-wrap: wrap; padding: 16px; }
    .ct-gauge { width: 100%; padding-top: 10px; border-top: 1px dashed var(--hairline-soft); }
    .ct-callouts { grid-template-columns: minmax(0,1fr); padding: 14px 16px 4px; }
    .ct-facts { padding: 4px 16px 12px; }
}

/* For developers: the one dark surface, like a code editor. */
.dev-card { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,6fr); gap: 44px 56px; padding: 56px; border-radius: 24px; background-color: #15161a; color: #d6d5cf; }
.dev-copy { min-width: 0; }
.dev-card .hm-tag { color: #b3bbff; }
.dev-card .hm-h2 { color: #fff; }
.dev-intro { margin-top: 18px; max-width: 48ch; color: #cfcec8; }
.setup-steps { list-style: none; counter-reset: setup; margin-top: 30px; border-top: 1px solid rgba(255,255,255,.1); }
.setup-steps li { counter-increment: setup; display: grid; grid-template-columns: 40px minmax(0,1fr); padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.setup-steps li::before { content: counter(setup, decimal-leading-zero); grid-row: span 2; font: 600 .74rem/1.9 var(--mono); color: #b3bbff; }
.setup-steps h3 { color: #fff; font-size: 1rem; line-height: 1.5; font-weight: 600; text-wrap: pretty; }
.setup-steps p { margin-top: 4px; font-size: .9rem; color: #c4c3bc; }
.dev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.dev-card a { color: #c8ccff; }
.dev-card a.hm-btn-primary { color: #fff; }
.setup-docs { font-size: .9rem; font-weight: 600; text-decoration: none; }
.setup-docs:hover { text-decoration: underline; }
.dev-code { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.code-win { margin: 0; min-width: 0; border-radius: 14px; background-color: #1d1e23; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); overflow: hidden; }
.code-win figcaption { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font: 500 .72rem/1.4 var(--mono); color: #c4c3bc; }
.code-dots { display: inline-flex; gap: 6px; }
.code-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.code-lang { margin-left: auto; color: #a3a29b; }
.code-win pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: 450 .78rem/1.7 var(--mono); font-variant-ligatures: none; color: #ecebe6; tab-size: 2; }
.code-win code { font: inherit; }
.c-cm { color: #a3a29b; }
.c-kw { color: #d0b8ff; }
.c-st { color: #a9dcae; }
.c-key { color: #b3bbff; }
.c-num { color: #f2bd8c; }
.dev-links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.dev-card .dev-links a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background-color: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: #fff; font-size: .92rem; font-weight: 500; text-decoration: none; }
.dev-card .dev-links a:hover { background-color: rgba(255,255,255,.08); }
.dev-links .hm-ico { color: #b3bbff; }
.build-guides { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
.build-guides > span { margin-right: 6px; font: 600 .875rem/1.5 var(--sans); color: #b1b0a8; }
.dev-card .build-guides a { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); color: #ecebe6; font-size: .82rem; text-decoration: none; }
.dev-card .build-guides a:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); color: #fff; }
.dev-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: -18px; font-size: .86rem; color: #b1b0a8; }
.dev-more a { text-decoration: none; }
.dev-more a:hover { text-decoration: underline; }

/* Privacy: three plain facts, each with where to read more. */
.trust-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.trust-grid article { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px 26px 24px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--ring); }
.trust-icon { margin-bottom: 22px; }
.trust-grid h3 { font: 600 1.14rem/1.35 var(--sans); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.trust-grid p { margin-top: 10px; font-size: .93rem; }
.trust-grid .trust-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 18px; font-size: .86rem; }

/* Guides, public interest, questions. */
.reading-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 36px; }
.reading-heading .hm-tag { margin-bottom: 18px; }
.reading-heading > a { font-size: .88rem; flex: none; text-decoration: none; }
/* Four guides in a row, each with its post's own photo (2026-10-11): the
   blog's credited 16:9 files (scripts/blog/photos.js), credits under the
   grid. The photo is decorative (alt=""): the card's title names the post. */
.reading-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.reading-card { display: flex; flex-direction: column; align-items: stretch; overflow: hidden; padding: 0 0 20px; background: #fff; color: var(--text); border-radius: var(--r-lg); text-decoration: none; box-shadow: var(--ring); transition: box-shadow .2s; }
.reading-card:hover { box-shadow: 0 0 0 1px var(--rule-2), 0 1px 2px rgba(20,20,19,.05), 0 20px 44px -20px rgba(20,20,19,.2); }
.reading-media { display: block; aspect-ratio: 16 / 9; margin-bottom: 18px; overflow: hidden; background: var(--paper-2); }
.reading-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.reading-card:hover .reading-media img { transform: scale(1.035); }
.reading-card > :not(.reading-media) { margin-inline: 20px; }
.reading-kind { font: 600 .8125rem/1.5 var(--sans); color: var(--accent-deep); margin-bottom: 8px; }
.reading-card h3 { font: 600 1.12rem/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.reading-card p { font-size: .875rem; line-height: 1.55; margin-block: 8px 18px; }
.reading-link { display: flex; justify-content: space-between; margin-top: auto; border-top: 1px solid var(--rule); padding-top: 14px; font-size: .84rem; font-weight: 600; color: var(--accent-deep); }
.reading-credits { margin-top: 14px; font-size: .8rem; }
.reading-credits a { color: var(--text-dim); }
@media (max-width: 1179px) { .reading-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.home-purpose { display: flex; align-items: baseline; justify-content: space-between; gap: 20px 40px; padding-block: 26px; font-size: .9rem; }
.home-purpose.hm-shell { max-width: none; padding-inline: max(28px, calc(50% - 592px)); }
.home-purpose p { max-width: 72ch; }
.home-purpose strong { color: var(--ink); }
.home-purpose > a { flex-shrink: 0; }
.home-faq-grid { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: 80px; }
.home-faq-links { font-size: .86rem; line-height: 2; margin-top: 26px; }
.home-faq-links a { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.home-faq-answers { border-top: 1px solid var(--rule); }
.home-faq-answers article { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.home-faq-answers h3 { font: 600 1.08rem/1.45 var(--sans); letter-spacing: -.012em; color: var(--ink); margin-bottom: 10px; text-wrap: pretty; }
.home-faq-answers p { font-size: .95rem; line-height: 1.7; }

/* The close (2026-10-11): one card in two halves, the heading and the two
   actions on the left, what an account starts with on the right: the
   hero's own facts (the same catalog keys) and the privacy fact scoped as
   /privacy states it (start.ip-hashed). */
main > .home-start { border-top: 0; }
.home-start { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 36px 64px; max-width: 1184px; width: calc(100% - 56px); margin: 16px auto 88px; padding: 56px; background: var(--paper-2); border-radius: 24px; box-shadow: inset 0 0 0 1px var(--rule); }
.home-start .hm-h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.start-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.home-start .hm-btn { min-height: 52px; padding-inline: 26px; font-size: .95rem; }
.start-points { list-style: none; padding: 6px 26px; background: #fff; border-radius: 18px; box-shadow: var(--ring); }
.start-points li { position: relative; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--hairline-soft); font-size: .96rem; line-height: 1.5; color: var(--text); }
.start-points li:last-child { border-bottom: 0; }
.start-points li::before { content: ''; position: absolute; left: 3px; top: calc(15px + .75em - 6px); width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.start-points strong { color: var(--ink); font-weight: 600; }
/* Two columns only beside room for both buttons (German needed ~490px). */
@media (max-width: 1179px) { .home-start { grid-template-columns: minmax(0,1fr); } }

@media (max-width: 1023px) {
    .cases-grid { grid-template-columns: 1fr; gap: 40px; }
    .cases-demo { position: static; }
    .trust-grid { grid-template-columns: 1fr; }
    .engine { padding: 28px 26px 24px; }
    .dev-card { grid-template-columns: 1fr; padding: 44px 36px; }
}
@media (max-width: 880px) {
    .decision-card { padding: 26px 22px 22px; }
    .home-decisions .section-intro { gap: 14px 36px; }
    .home-faq-grid { gap: 36px; grid-template-columns: 1fr; }
    .home-purpose { flex-wrap: wrap; }
    .stats-inner { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; padding-bottom: 40px; }
    .stat-item { padding: 2px 0 4px 16px; }
    .dev-links { grid-template-columns: 1fr; }
}
/* The two engines stay side by side on a tablet; one column from 760px. */
@media (max-width: 760px) {
    .engine-grid { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 1023px) {
    .decision-grid { grid-template-columns: 1fr; }
    .decision-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); column-gap: 36px; align-items: start; }
    .decision-card > :not(.decision-scene) { grid-column: 1; }
    .decision-scene { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
    .decision-situation { min-height: 0; }
    .decision-card > p:not(.decision-situation) { margin-bottom: 0; }
}
@media (max-width: 640px) {
    .section-intro { margin-bottom: 30px; }
    .home-decisions .section-intro { grid-template-columns: 1fr; gap: 0; }
    .home-decisions .section-intro > p:not(.hm-tag) { margin: 18px 0 0; }
    .decision-grid { grid-template-columns: 1fr; gap: 12px; }
    .decision-situation { min-height: 0; margin-bottom: 10px; }
    .decision-card h3 { font-size: 1.8rem; margin-bottom: 12px; }
    .decision-card > p:not(.decision-situation) { margin-bottom: 20px; }
    .stats-bar { padding: 0 20px; }
    .stat-num { font-size: min(2rem, 8.4vw); }
    .case > summary { font-size: 1rem; gap: 12px; }
    .case-body { padding-left: 4px; }
    .case-ex-main { grid-template-columns: 1fr; }
    .case-form { display: none; }
    .case-ex-top, .case-sig, .case-ex-foot { padding-inline: 18px; }
    .engine, .trust-grid article { padding: 24px 22px 22px; }
    .engine h3 { font-size: 1.3rem; }
    .engine-points li { font-size: .92rem; }
    .engine-bots { grid-template-columns: 1fr; justify-items: start; }
    .dev-card { margin-inline: -8px; padding: 32px 20px; border-radius: 20px; gap: 32px; }
    .code-win pre { padding: 16px; font-size: .72rem; }
    .dev-more { margin-top: -10px; flex-direction: column; }
    .reading-heading { align-items: flex-start; flex-direction: column; }
    /* Phones: a photo thumbnail beside the title, no excerpt. */
    .reading-grid { grid-template-columns: 1fr; gap: 12px; }
    .reading-card { display: grid; grid-template-columns: 112px minmax(0,1fr); grid-template-rows: auto auto 1fr; column-gap: 14px; align-items: start; padding: 12px 16px 12px 12px; }
    .reading-media { grid-row: 1 / -1; align-self: start; aspect-ratio: 16 / 9; margin: 2px 0 0; border-radius: 8px; }
    .reading-card > :not(.reading-media) { margin-inline: 0; }
    .reading-kind { margin: 2px 0 4px; font-size: .78rem; }
    .reading-card h3 { font-size: 1rem; line-height: 1.35; }
    .reading-card p { display: none; }
    .reading-link { margin-top: 8px; padding-top: 0; border-top: 0; font-size: .8rem; }
    .home-purpose.hm-shell { padding-inline: 20px; }
    .home-purpose > a { flex-shrink: 1; }
    .home-start { width: calc(100% - 40px); margin-bottom: 72px; padding: 40px 24px; gap: 28px; }
    .start-points { padding: 0; background: none; box-shadow: none; }
    .start-points li { font-size: .92rem; }
    .start-actions { width: 100%; flex-direction: column; }
    .home-start .hm-btn { width: 100%; }
}

/* ── 10. (The footer is site-chrome.css since 2026-09-29.) ──────────────── */
/* Windows High Contrast drops box-shadows: give the ringed surfaces real edges. */
@media (forced-colors: active) { .scanner-widget, .scanner-rescan, .scanner-tabs, .hero-stage, .route-sample, .decision-card, .reading-card, .route-number, .hm-btn-ghost, .home-start, .case-icon, .sig-icon, .trust-icon, .case-ex, .engine, .trust-grid article, .dev-card, .code-win, .dev-links a, .build-guides a { border: 1px solid CanvasText; } }

/* ── 11. Motion ─────────────────────────────────────────────────────────── */
/* The copy rises in once and the live dots breathe. The instrument never
   fades in, so the first paint is the real report. */
@media (prefers-reduced-motion: no-preference) {
    .hero-eyebrow, .hero-h1, .hero-lede, .hero-ctas, .hero-free, .hero-setup-note, .hero-capabilities { opacity: 0; transform: translateY(12px); animation: heroRise .8s var(--ease) forwards; }
    .hero-h1 { animation-delay: .06s; }
    .hero-lede { animation-delay: .16s; }
    .hero-ctas { animation-delay: .24s; }
    .hero-free { animation-delay: .3s; }
    .hero-setup-note { animation-delay: .33s; }
    .hero-capabilities { animation-delay: .36s; }
    .hero-live-note > span { animation: livePulse 2.6s ease-in-out infinite; }
    @keyframes heroRise { to { opacity: 1; transform: none; } }
    @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(39,51,217,.28); } 50% { box-shadow: 0 0 0 6px rgba(39,51,217,0); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto; transition: none !important; } }

/* ── No JavaScript (2026-09-26, reworked 2026-09-27) ───────────────────────
   Without JavaScript (Tor Browser "Safest", NoScript, text browsers), and
   when the watchdog in the scanner section replaces a scanner that could not
   run, a frame in the scanner body carries this visit's address-level result
   (/api/visit-check, lib/nojs-check.js). Its sizes and the rules that hide
   the report are in /assets/scan-nojs.css, loaded only beside the frame: no
   :has() and no (scripting: none), which older engines and NoScript lack. */