:root {
    /* Neutral off-black canvas with stepping surfaces. No blue tint: the earlier navy
       (#0a0f1f) plus the mesh glow was the single biggest "AI SaaS default" signal. */
    --bg: #0c0d10;
    --bg-soft: #131418;
    --card: #17181d;
    --ink: #f3f4f6;
    --muted: #9a9ca5;
    --line: #272830;
    /* ONE locked accent (cool blue): links, rings, focus. Distinct from the three
       status hues below, so nothing on the page competes with a scan verdict. */
    --brand: #6f90ff;
    /* Filled buttons; carries white text at AA. Matches the logo's blue stroke. */
    --brand-strong: #3f6bff;
    --brand-ink: #ffffff;
    /* The logo gradient: blue -> cyan -> green. The brand SIGNATURE, now reserved for
       brand marks only (the score ring, the logo). Never a background/decoration wash. */
    --brand-blue: #2f6bff;
    --brand-cyan: #22bde0;
    --brand-green: #2ecb74;
    --grad-brand: linear-gradient(100deg, #2f6bff 0%, #22bde0 52%, #2ecb74 100%);
    --grad-soft: linear-gradient(120deg, rgba(47, 107, 255, .12), rgba(34, 189, 224, .07) 55%, rgba(46, 203, 116, .09));
    --pass: #34d399;
    --warn: #fbbf24;
    --fail: #fb7185;
    /* One radius scale: --r for cards/panels, --r-el for controls, 999px for pills. */
    --r: 14px;
    --r-el: 10px;
    --radius: 14px; /* legacy alias kept so existing refs stay consistent */
    /* Neutral depth. No coloured glow anywhere; shadows are tinted to black only. */
    --shadow: 0 24px 60px -32px rgba(0, 0, 0, .7);
    --glow: 0 16px 40px -22px rgba(0, 0, 0, .6);
    /* Display face for headings gives the page a typographic identity the system
       stack never could. Body stays on the system stack (fast, neutral). */
    --font-display: "Space Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    /* Flat off-black. The mesh/glow wash is gone; depth now comes from surface
       steps (--bg-soft, --card) and hairlines, not from coloured light. */
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Headings carry the display face; tight tracking gives them a deliberate, drawn feel. */
h1, h2, h3 { font-family: var(--font-display); }
h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 600; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 .4rem; }
h3 { letter-spacing: -0.01em; }

/* ---------- Landing ---------- */
/* Left-aligned hero. Breaking the centred-over-dark symmetry is the single clearest
   move away from the templated look; the eye now has a real starting edge to read from. */
.hero {
    max-width: 820px;
    margin: clamp(2.5rem, 7vh, 4.5rem) auto 2rem;
    padding: 0 1.25rem;
    text-align: left;
}

.badge {
    display: inline-block;
    padding: .35rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
}

.sub { color: var(--muted); font-size: 1.2rem; max-width: 60ch; margin: .5rem 0 2rem; }

/* Brand lockup: the logo wordmark plus a beta tag, replacing the old text badge. */
.brand { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.brand-logo { height: 38px; width: auto; display: block; }
.beta-tag {
    font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand); background: rgba(108, 140, 255, .15);
    border: 1px solid var(--brand); border-radius: 999px; padding: .12rem .55rem;
}

.scan-form {
    display: flex;
    gap: .5rem;
    max-width: 560px;
    margin: 0 auto;
    background: var(--card);
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.scan-form input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 1.05rem;
    padding: .8rem 1rem;
    outline: none;
    min-width: 0;
}

button {
    border: 0;
    border-radius: 12px;
    background: var(--brand-strong);
    color: var(--brand-ink);
    font-weight: 700;
    font-size: 1rem;
    padding: .8rem 1.4rem;
    cursor: pointer;
    transition: transform .06s ease, filter .15s ease, box-shadow .2s ease;
    white-space: nowrap;
}
button:hover { filter: brightness(1.07); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* Blazor moves focus to the <h1> after enhanced navigation (good for screen readers), but the
   browser then draws its default focus ring around the heading, which reads as a stray box. This
   is programmatic focus on a non-interactive element, so suppress the ring. */
[tabindex="-1"]:focus { outline: none; }

/* Primary buttons: one solid accent, no gradient sweep, no coloured glow. The action
   reads as a confident single colour instead of an AI-gradient blob. */
.scan-form button, .cta-band button, .cta-band .btn-primary, .report-cta button, .auth-form button {
    background: var(--brand-strong);
    color: #fff;
    box-shadow: none;
    transition: transform .06s ease, filter .15s ease;
}
.scan-form button:hover, .cta-band button:hover, .cta-band .btn-primary:hover, .report-cta button:hover, .auth-form button:hover {
    filter: brightness(1.08);
}

.engine-select {
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    border-radius: 12px;
    padding: 0 .8rem;
    font-size: .95rem;
    cursor: pointer;
}

.engine-badge {
    color: var(--muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    margin-top: 1.5rem;
    opacity: .7;
}

.url-hint { color: var(--muted); font-size: .9rem; margin-top: .7rem; }

.fineprint { color: var(--muted); font-size: .9rem; margin-top: 1.2rem; }
.error { color: var(--fail); margin-top: 1rem; font-weight: 600; }

/* The line above the scan form: the promise that sets the expectation. */
.promise {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 1rem;
}

/* ---------- Returning visitor: earlier scans from localStorage ---------- */
.recent { max-width: 760px; margin: 2.5rem auto 0; padding: 0 1.25rem; }
.recent h2 {
    font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
    font-weight: 800; margin-bottom: .8rem; text-align: center;
}
.recent-list { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.recent-item {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: .35rem .9rem .35rem .4rem; color: var(--ink);
}
.recent-item:hover { border-color: var(--brand); text-decoration: none; }
.recent-score {
    display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem;
    border-radius: 50%; font-weight: 800; font-size: .8rem;
    border: 2px solid var(--line); background: var(--bg-soft);
}
.recent-score.good { color: var(--pass); border-color: var(--pass); }
.recent-score.mid { color: var(--warn); border-color: var(--warn); }
.recent-score.bad { color: var(--fail); border-color: var(--fail); }
.recent-host { font-weight: 600; }
.recent-when { color: var(--muted); font-size: .85rem; }

/* ---------- Catch: concrete failures we prevent (the "this is me" moment) ---------- */
.catch {
    max-width: 980px;
    margin: clamp(3rem, 8vh, 5rem) auto 0;
    padding: 0 1.25rem;
}
.catch h2 { font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin-bottom: .5rem; }
.catch-lead { color: var(--muted); text-align: center; max-width: 54ch; margin: 0 auto 2rem; font-size: 1.1rem; }
/* Explicit breakpoints so 4 cards never fall into a 3 + 1 orphan row:
   1 col on phones, 2 x 2 on mid widths, 4 across only when there is real room. */
.catch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 560px) { .catch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .catch-grid { grid-template-columns: repeat(4, 1fr); } }
.catch-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 1.3rem 1.4rem 1.4rem;
    transition: border-color .2s ease;
}
.catch-card:hover { border-color: #3a3c46; }
/* Icon tile: a monochrome line glyph in a quiet square, not an emoji sticker. */
.catch-ic {
    display: inline-grid; place-items: center;
    width: 2.5rem; height: 2.5rem; border-radius: var(--r-el);
    background: var(--bg-soft); border: 1px solid var(--line);
    color: var(--brand);
}
.catch-ic svg { width: 1.35rem; height: 1.35rem; display: block; }
.catch-card h3 { font-size: 1.1rem; margin: .8rem 0 .5rem; }
.catch-sees { color: var(--ink); font-size: .95rem; margin: 0 0 .7rem; }
.catch-sees b { color: var(--fail); font-weight: 700; }
.catch-cost { color: var(--muted); font-size: .9rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--line); }
.catch-foot { text-align: center; margin-top: 1.7rem; font-size: 1.1rem; font-weight: 600; }
.catch-foot .eye { color: var(--brand); }

/* ---------- Coverage groups: two labelled columns matching the report layout ---------- */
.cov-groups {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    text-align: left; margin: 1.4rem 0 .8rem;
}
.cov-group {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.3rem;
}
.cov-group h3 {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); margin: 0 0 .8rem; font-weight: 800;
}
.cov-group.primary { border-color: var(--brand); }
.cov-group.primary h3 { color: var(--brand); }
.cov-lead { color: var(--muted); text-align: center; max-width: 56ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
/* Checklist: each item is a check the scan ticks off, so the block reads as a run, not a tag cloud. */
.cov-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.cov-checks li {
    display: flex; align-items: center; gap: .6rem;
    color: var(--ink); font-size: .98rem; line-height: 1.25;
}
.cov-checks li::before {
    content: ""; flex: none; width: 1.2rem; height: 1.2rem; border-radius: 50%;
    background-color: rgba(46, 203, 116, .15);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%232ecb74' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: .72rem;
}
/* Legacy tag pills, kept for any other surface still using them. */
.cov-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.cov-tag {
    font-size: .88rem; background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 999px; padding: .28rem .75rem; color: var(--ink);
}
@media (max-width: 640px) { .cov-groups { grid-template-columns: 1fr; } }

/* ---------- Dashboard preview: shows what daily monitoring looks like ---------- */
.dash-preview {
    max-width: 820px; margin: clamp(3rem, 8vh, 5rem) auto 0;
    padding: 0 1.25rem; text-align: center;
}
.dash-preview h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.dash-preview .dp-lead { color: var(--muted); max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.dash-mock {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); text-align: left; overflow: hidden;
}
.dash-bar {
    display: flex; align-items: center; gap: .7rem; padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.dot-lg { width: .75rem; height: .75rem; border-radius: 50%; flex: none; }
.dash-bar.attention .dot-lg { background: var(--fail); box-shadow: 0 0 0 4px rgba(251, 113, 133, .18); }
.dash-bar.healthy .dot-lg { background: var(--pass); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.dash-bar-text { font-weight: 700; }
.dash-bar-text span { color: var(--muted); font-weight: 400; font-size: .92rem; }

/* One site row — shared between the homepage mock and the real portal. */
.site-row {
    display: flex; align-items: center; gap: 1rem; padding: 1rem 1.3rem;
    border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.site-row:last-child { border-bottom: 0; }
.site-main { flex: 1 1 auto; min-width: 0; }
.site-host { font-weight: 700; }
.site-event { color: var(--muted); font-size: .88rem; margin-top: .2rem; }
/* Status word with a leading dot in its own colour, replacing inline status emoji.
   Shared by the homepage mock and the portal (which uses good/bad/mid classes). */
.site-event .ok, .site-event .bad, .site-event .good, .site-event .mid {
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
}
.site-event .ok::before, .site-event .bad::before,
.site-event .good::before, .site-event .mid::before {
    content: ""; width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: currentColor;
}
.site-event .ok, .site-event .good { color: var(--pass); }
.site-event .bad { color: var(--fail); }
.site-event .mid { color: var(--warn); }
.spark { width: 84px; height: 32px; flex: none; }
.spark polyline { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.site-badge { flex: none; font-size: .8rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.site-badge.good { color: var(--pass); border-color: var(--pass); }
.site-badge.bad { color: var(--fail); border-color: var(--fail); }
.site-badge.mid { color: var(--warn); border-color: var(--warn); }
.dash-caption { color: var(--muted); font-size: .9rem; margin-top: 1rem; }

/* ---------- Proof: a real report excerpt next to the story ---------- */
.proof {
    max-width: 980px;
    margin: clamp(3rem, 8vh, 5rem) auto 0;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(300px, 6fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
}
@media (min-width: 761px) {
    .proof-intro { position: sticky; top: 5.5rem; }
}
.proof-intro h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.15; margin-bottom: .8rem; }
.proof-intro p { color: var(--muted); max-width: 46ch; }
.proof-intro .proof-real { color: var(--ink); }
.proof-link {
    display: inline-block;
    margin-top: .8rem;
    font-weight: 700;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .6rem 1.1rem;
}
.proof-link:hover { border-color: var(--brand); text-decoration: none; }
.proof-link::after { content: " →"; }

.mini-report {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem 1.4rem;
    box-shadow: var(--shadow);
}
.mini-url {
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 1rem;
}
.mini-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.2rem; }
.mini-head .gauge { width: 72px; height: 72px; }
.mini-head .gauge-num { font-size: 1.3rem; }
.mini-label {
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}
.mini-prio {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .9rem 1.1rem;
    margin-bottom: 1rem;
}
.mini-prio .prio-actie { margin-top: .3rem; }
.mini-check { border-top: 1px solid var(--line); padding-top: 1rem; }
.mini-check .shot { margin-top: .6rem; }
.mini-check .shot.mobile { max-width: 200px; }

/* ---------- Coverage: the full check list as proof of thoroughness ---------- */
.coverage {
    max-width: 720px;
    margin: clamp(3rem, 8vh, 5rem) auto 0;
    padding: 0 1.25rem;
    text-align: center;
}
.coverage h2 { font-size: 1.25rem; margin-bottom: .8rem; }
.coverage-list {
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 2;
    margin: 0 auto;
}
.coverage-note { color: var(--muted); font-size: .95rem; margin-top: .8rem; }

/* ---------- Twee lagen bewaking: dagelijkse diepe check + 5-min uptime-check ---------- */
.watch { max-width: 900px; margin: clamp(2.5rem, 7vh, 4.5rem) auto 0; padding: 0 1rem; text-align: center; }
.watch h2 { margin-bottom: .6rem; }
.watch-lead { color: var(--muted); max-width: 56ch; margin: 0 auto 2rem; font-size: 1.1rem; }
.watch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.watch-card {
    position: relative; overflow: hidden;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    padding: 1.5rem 1.4rem;
}
.watch-card.is-live { border-color: rgba(46, 203, 116, .35); }
.watch-top { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.watch-ic {
    width: 2.5rem; height: 2.5rem; flex: none; display: grid; place-items: center;
    border-radius: var(--r-el);
    background: var(--bg-soft); border: 1px solid var(--line); color: var(--brand);
}
.watch-ic svg { width: 1.35rem; height: 1.35rem; display: block; }
.watch-card.is-live .watch-ic { color: var(--brand-green); }
.watch-cadence {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 600; letter-spacing: 0;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
    padding: .28rem .7rem; background: var(--bg-soft);
}
.watch-card h3 { margin: 0 0 .5rem; font-size: 1.15rem; }
.watch-card p { color: var(--muted); margin: 0; line-height: 1.55; }
.live-dot {
    width: .5rem; height: .5rem; border-radius: 50%; flex: none; background: var(--brand-green);
    box-shadow: 0 0 0 0 rgba(46, 203, 116, .5); animation: livePulse 1.8s ease-out infinite;
}
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 203, 116, .5); }
    70% { box-shadow: 0 0 0 6px rgba(46, 203, 116, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 203, 116, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }
@media (max-width: 640px) { .watch-grid { grid-template-columns: 1fr; } }

/* ---------- Bridge: from one scan to daily monitoring ---------- */
.bridge {
    max-width: 640px;
    margin: clamp(2.5rem, 7vh, 4.5rem) auto 0;
    padding: 1.6rem 1.5rem;
    text-align: center;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.bridge-line { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin: 0 0 .5rem; }
.bridge-sub { color: var(--muted); margin: 0; }

/* Dev-only instruments: unmistakably marked so screenshots can't be confused with production. */
.dev-tool {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 2px dashed #f59e0b;
    border-radius: 12px;
    overflow: hidden;
}
.dev-tool .dev-tag {
    display: grid;
    place-items: center;
    background: #f59e0b;
    color: #1a1206;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 0 .45rem;
}
.dev-tool .engine-select { border: 0; border-radius: 0; }
.engine-badge.dev-tool {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .6rem .3rem 0;
    opacity: 1;
}

/* ---------- Report / progress ---------- */
.report, .progress-page {
    max-width: 780px;
    margin: 2.5rem auto 5rem;
    padding: 0 1.25rem;
}
.back { display: inline-block; color: var(--muted); margin-bottom: 1rem; }
.url { color: var(--muted); word-break: break-all; margin: 0 0 1.5rem; }

.summary {
    font-size: 1.2rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1.5rem;
}

/* ===== Report dashboard layout ===== */
/* The finished report widens on desktop and uses the full width: a hero band, a two-column body
   (main + reference rail), and a full-width call-to-action band. The gated view stays single column. */
.report-done { max-width: 820px; }
.report-done.is-wide { max-width: 1160px; }

/* Hero band: verdict + summary alongside the score card. */
.report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}
.hero-verdict { min-width: 0; display: flex; flex-direction: column; }
.hero-verdict h1 { margin-top: 0; }
.hero-verdict .url { margin-bottom: 1rem; }
.hero-verdict .summary { margin-bottom: 0; max-width: 68ch; }
.hero-score { margin-bottom: 0; height: 100%; align-content: center; }

/* Gated view stays a single readable column. */
.report-body.is-single { max-width: 720px; }

/* Reference strip: change + track record as a full-width row of compact cards. */
.ref-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
.ref-strip > .diff, .ref-strip > .history { margin: 0; height: 100%; }

/* Checks in a calm two-column masonry on desktop, one column on narrow screens. */
.check-grid { columns: 440px; column-gap: 1.25rem; margin-bottom: .5rem; }
.check-grid > .card { break-inside: avoid; margin: 0 0 1.25rem; }
/* Cap in-card screenshots so a tall full-page shot doesn't blow up one card and rag the columns.
   The top of the page is the useful part, so crop from the top. Phone shots keep their portrait look. */
.check-grid .shot:not(.mobile) { max-height: 240px; object-fit: cover; object-position: top center; }
.check-grid .shot.mobile { max-height: 340px; object-fit: cover; object-position: top center; }

/* Technique + findability: formerly a collapsed block, now a visible section. */
.tech-section { margin-top: 2.2rem; }
.tech-section .section-title.tech-head {
    font-size: 1.25rem; color: var(--ink); border-left: 4px solid var(--brand);
    padding-left: .7rem; border-bottom: none; margin: 0 0 .3rem; text-transform: none; letter-spacing: 0;
}
.tech-section > .section-title:not(.tech-head) { margin-top: 1.6rem; }

@media (max-width: 900px) {
    .report-hero { grid-template-columns: 1fr; }
}

/* Health score + gauge */
.score-row {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.gauge { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.gauge .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .ring-bg { fill: none; stroke: var(--line); stroke-width: 9; }
.gauge .ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.gauge.good .ring-fg { stroke: var(--pass); }
.gauge.mid  .ring-fg { stroke: var(--warn); }
.gauge.bad  .ring-fg { stroke: var(--fail); }
.gauge-num {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.score-meta { flex: 1 1 auto; }
.grade { font-size: 1.15rem; font-weight: 800; margin-bottom: .5rem; }
.grade.good { color: var(--pass); }
.grade.mid { color: var(--warn); }
.grade.bad { color: var(--fail); }
.export-btn {
    flex: 0 0 auto;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .6rem 1rem;
    font-size: .9rem;
    font-weight: 600;
}
.export-btn:hover { border-color: var(--brand); filter: none; }
.report-actions { display: flex; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; }

.scoreboard { display: flex; gap: .6rem; flex-wrap: wrap; }
.pill {
    padding: .35rem .8rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
    border: 1px solid var(--line);
}
.pill.pass { color: var(--pass); }
.pill.warn { color: var(--warn); }
.pill.fail { color: var(--fail); }

/* Compact score-trend sparkline next to the gauge (always shown when there is history). */
.score-spark { display: flex; align-items: center; gap: .6rem; margin-top: .7rem; }
.score-spark-svg { width: 104px; height: 34px; overflow: visible; }
.score-spark-svg polyline {
    fill: none; stroke: var(--brand); stroke-width: 2.5;
    stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.score-spark-delta { font-size: .82rem; font-weight: 700; white-space: nowrap; }
.score-spark-delta.up { color: var(--pass); }
.score-spark-delta.down { color: var(--fail); }

/* Prioritized "fix this first" block */
.priorities {
    background: var(--card);
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem 1.4rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow);
}
.priorities h2 { margin-bottom: 1rem; }
.priorities ol {
    margin: 0; padding: 0; list-style: none;
    counter-reset: prio;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem 1.4rem;
    align-items: start;
}
.priorities li { counter-increment: prio; padding-left: 2.4rem; position: relative; }
.priorities li::before {
    content: counter(prio);
    position: absolute; left: 0; top: 0;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--brand); color: var(--brand-ink);
    display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
.prio-actie { font-weight: 700; font-size: 1.05rem; display: block; }
.impact {
    display: inline-block;
    margin-bottom: .35rem;
    font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    padding: .15rem .5rem; border-radius: 6px;
}
.impact.bad { background: rgba(251, 113, 133, .15); color: var(--fail); }
.impact.mid { background: rgba(251, 191, 36, .15); color: var(--warn); }
.impact.good { background: rgba(108, 140, 255, .15); color: var(--brand); }
.prio-waarom { color: var(--muted); margin: .3rem 0 0; font-size: .95rem; }
.prio-hoe { color: var(--ink); margin: .4rem 0 0; font-size: .95rem; line-height: 1.5; }
.prio-hoe-label { font-weight: 700; color: var(--brand); }

/* "Zo los je dit op" hint under a check that needs attention. */
.fix-hint {
    margin: 0 0 .8rem; font-size: .92rem; line-height: 1.5; color: var(--ink);
    background: rgba(108, 140, 255, .08); border-left: 3px solid var(--brand);
    padding: .55rem .7rem; border-radius: 8px;
}
.fix-hint-label { font-weight: 700; color: var(--brand); }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

/* Section headings that group the checks */
.section-title {
    font-size: .8rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    margin: 1.9rem 0 .8rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--line);
}
.checks > .section-title:first-child { margin-top: 0; }

/* Social preview card */
.social-card { padding: 0; overflow: hidden; }
.social-label { padding: .85rem 1.2rem .2rem; color: var(--muted); font-size: .85rem; }
.social-media { position: relative; height: 200px; margin-top: .5rem; background: var(--bg-soft); }
.social-noimg {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
    color: var(--muted); font-size: .9rem; text-align: center; padding: 1rem;
    background: var(--bg-soft);
}
.social-noimg .noimg-icon { color: var(--muted); opacity: .8; }
.social-noimg .noimg-icon svg { width: 2rem; height: 2rem; display: block; }
.social-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.social-body { padding: .9rem 1.2rem 1.1rem; }
.social-host { color: var(--muted); font-size: .78rem; }
.social-title { font-weight: 700; font-size: 1.05rem; margin: .15rem 0; }
.social-desc { color: var(--muted); font-size: .92rem; line-height: 1.4; }

/* History / trend */
.history {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    margin: 1.5rem 0;
    box-shadow: var(--shadow);
}
.history h2 { margin-bottom: 1rem; }
.trend {
    width: 100%; height: 90px; display: block; margin-bottom: 1.2rem;
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px;
}
.trend polyline { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.history-list li { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.history-list li.cur { font-weight: 700; }
.h-score {
    display: inline-grid; place-items: center;
    min-width: 2.2rem; padding: .12rem .35rem; border-radius: 6px;
    font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums;
}
.h-score.pass { background: rgba(52, 211, 153, .15); color: var(--pass); }
.h-score.warn { background: rgba(251, 191, 36, .15); color: var(--warn); }
.h-score.fail { background: rgba(251, 113, 133, .15); color: var(--fail); }
.h-now { color: var(--brand); font-size: .78rem; font-weight: 700; }

/* Only the cards that need attention carry a coloured edge. "GOED" cards stay neutral so the eye
   lands on the warnings instead of a rainbow of borders. */
.check { border-left: 4px solid var(--line); }
.check.pass { border-left-color: var(--line); }
.check.warn { border-left-color: var(--warn); }
.check.fail { border-left-color: var(--fail); }
.check.neutral { border-left-color: var(--muted); }

.check-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .4rem; }
.status-badge {
    font-size: .78rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
    padding: .2rem .55rem; border-radius: 8px;
}
.status-badge.pass { background: rgba(52, 211, 153, .15); color: var(--pass); }
.status-badge.warn { background: rgba(251, 191, 36, .15); color: var(--warn); }
.status-badge.fail { background: rgba(251, 113, 133, .15); color: var(--fail); }
.status-badge.neutral { background: rgba(154, 156, 165, .15); color: var(--muted); }
.check-name { font-weight: 700; font-size: 1.05rem; }
.check-detail { color: var(--ink); margin: .2rem 0 .8rem; }
.check-page {
    display: inline-block;
    font-size: .85rem;
    color: var(--brand);
    text-decoration: none;
    margin: -.5rem 0 .8rem;
    word-break: break-all;
}
.check-page::before { content: "🔗 "; }
.check-page:hover { text-decoration: underline; }

.shot {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid var(--line);
    display: block;
}
/* Phone screenshots (390px wide) shown at phone size, not stretched across the card. */
.shot.mobile {
    width: auto;
    max-width: 260px;
    margin: 0 auto;
    border-radius: 18px;
}

.check-items {
    margin: 0 0 .9rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--bg-soft);
}
.check-items > summary {
    cursor: pointer;
    padding: .55rem .8rem;
    color: var(--muted);
    font-size: .9rem;
    user-select: none;
}
.check-items ul {
    list-style: none;
    margin: 0;
    padding: 0 .8rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.check-items li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .5rem;
    font-size: .88rem;
    border-top: 1px solid var(--line);
    padding-top: .35rem;
}
.check-items .dot {
    flex: 0 0 auto;
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--muted); align-self: center;
}
.check-items .dot.pass { background: var(--pass); }
.check-items .dot.warn { background: var(--warn); }
.check-items .dot.fail { background: var(--fail); }
.check-items .dot.neutral { background: var(--muted); }
.check-items .it-text {
    flex: 0 1 auto;
    min-width: 0;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.check-items .it-url {
    flex: 1 1 200px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}

.fail-card { border-left: 4px solid var(--fail); }

/* Week-over-week diff */
.diff {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
    margin-bottom: 1.5rem;
}
.diff h2 { font-size: 1rem; margin-bottom: .5rem; }
.diff-score { font-size: 1.05rem; margin: 0 0 .4rem; }
.delta.up { color: var(--pass); font-weight: 700; }
.delta.down { color: var(--fail); font-weight: 700; }
.diff-line { margin: .25rem 0; font-size: .95rem; }
.diff-line.ok { color: var(--pass); }
.diff-line.bad { color: var(--warn); }

/* Unlock gate — the gated view's conversion band, same accent-band treatment as the monitor CTA. */
.unlock {
    position: relative; overflow: hidden;
    background: rgba(108, 140, 255, .07);
    border: 1px solid rgba(108, 140, 255, .30); text-align: center;
}
.unlock::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--brand);
}
.unlock h2 { margin-bottom: .5rem; }
.unlock p { color: var(--muted); }
.unlock .lead-form { justify-content: center; margin-top: 1rem; }
.unlock .fineprint { margin-top: .8rem; }

/* Full-width conversion band — separates the CTA from the grid above it, with generous padding
   and a soft translucent accent edge (a hard 1px brand border reads harsh on the off-black).
   Note: named .report-cta, NOT .cta-band — the homepage already owns .cta-band (max-width 900,
   different padding), and reusing it here collided and stripped this band's width and padding. */
.report-cta {
    margin-top: 1.9rem;
    padding: clamp(1.9rem, 3.4vw, 2.6rem) clamp(1.7rem, 3.2vw, 2.5rem);
    border-radius: 16px;
}

/* Lead capture — the monitoring CTA is the real conversion. A soft accent wash lifts it off the
   neutral result cards so it reads as "do something", not as another result block. */
.lead {
    position: relative; overflow: hidden;
    background: rgba(108, 140, 255, .07);
    border: 1px solid rgba(108, 140, 255, .30);
}
.lead::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--brand);
}

/* Signed-in one-click state: copy on the left, the action as a block on the right. */
.report-cta.cta-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    align-items: center;
    gap: 1.4rem 2.6rem;
}
.cta-split .cta-copy { min-width: 0; }
.cta-split .cta-copy .lead-big { margin-top: 0; }
.cta-split .cta-copy .lead-lead { margin-bottom: 0; }
.cta-split .cta-action { display: flex; flex-direction: column; gap: .2rem; }
.cta-split .cta-action .monitor-oneclick { margin: 0; }
.cta-split .cta-action .cta-lg { width: 100%; margin-top: 0; }
.cta-split .cta-action .fineprint { margin-top: .1rem; }
@media (max-width: 720px) {
    .report-cta.cta-split { grid-template-columns: 1fr; }
}
.lead h2 { margin-top: .3rem; }
.lead-form { display: flex; gap: .5rem; margin-top: .8rem; flex-wrap: wrap; }
.lead-form input {
    flex: 1; min-width: 220px; border: 1px solid var(--line); background: var(--bg);
    color: var(--ink); border-radius: 12px; padding: .8rem 1rem; font-size: 1rem; outline: none;
}
.lead-ok { color: var(--pass); font-weight: 700; margin-top: .6rem; }
.lead { scroll-margin-top: 84px; }
.lead-big { font-size: 1.5rem; line-height: 1.25; margin: .2rem 0 .5rem; }
.lead-lead { color: var(--ink); font-size: 1.08rem; line-height: 1.55; }
.lead .cta-lg { font-size: 1.05rem; padding: .95rem 1.7rem; margin-top: 1rem; }
.lead-badge {
    font-size: 2.4rem; line-height: 1; margin-bottom: .3rem;
    animation: eyePop .5s ease both;
}
/* The "check your mail" success state: the bind moment turns green, no glow wash. */
.lead.is-pending {
    border-color: var(--pass);
    background: var(--bg-soft);
}
.lead.is-pending::before { background: var(--pass); }
@media (prefers-reduced-motion: reduce) { .lead-badge { animation: none; } }

.share { color: var(--muted); margin-top: 2rem; font-size: .9rem; }
.share code {
    display: block; margin-top: .4rem; padding: .6rem .8rem; background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 10px; word-break: break-all; color: var(--ink);
}

/* Live progress feed (WASM island) */
.scanlive { margin: 1.6rem 0 0; }

/* Fake browser chrome around the live screenshots. */
.browser {
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    background: var(--bg-soft); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .7);
    position: relative;
}
.browser::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: var(--grad-brand); opacity: .9; z-index: 3;
}
.browser-bar {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .8rem; border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.bdots { display: inline-flex; gap: .35rem; flex: none; }
.bdots i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--line); }
.baddr {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
    padding: .3rem .8rem; color: var(--muted); font-size: .85rem;
}
.baddr-lock { font-size: .75rem; flex: none; opacity: .8; }
.baddr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blive {
    flex: none; display: inline-flex; align-items: center; gap: .35rem;
    color: var(--pass); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.blive-dot {
    width: .5rem; height: .5rem; border-radius: 50%; background: var(--pass);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: liveDot 1.4s ease-out infinite;
}
@keyframes liveDot {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); }
    100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}
/* Queued, not yet claimed by a worker: a neutral (not green "live") state. Muted on purpose — the
   status colours are reserved for scan judgements, never UI chrome. */
.blive.is-waiting { color: var(--muted); }
.blive.is-waiting .blive-dot { background: var(--muted); box-shadow: none; animation: none; }

.browser-view {
    position: relative; height: 380px; background: var(--bg); overflow: hidden;
}
.shot-live {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block; animation: shotIn .5s ease both;
}
@keyframes shotIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: scale(1); } }

/* A soft scan-line sweeping down the frame: "the AI is reading this page". */
.scan-sheen {
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    background: linear-gradient(180deg, transparent 0%, rgba(111, 144, 255, .14) 48%,
        rgba(34, 189, 224, .28) 50%, rgba(111, 144, 255, .14) 52%, transparent 100%);
    background-size: 100% 220px; background-repeat: no-repeat;
    animation: sheen 2.6s linear infinite;
}
@keyframes sheen { 0% { background-position: 0 -240px; } 100% { background-position: 0 460px; } }

.shot-skeleton { position: absolute; inset: 0; padding: 1.6rem; overflow: hidden; }
.shot-skeleton::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(154, 166, 214, .08) 50%, transparent 70%);
    background-size: 200% 100%; animation: sheen2 1.4s linear infinite;
}
@keyframes sheen2 { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.shot-skeleton .sk-bar, .shot-skeleton .sk-line, .shot-skeleton .sk-block {
    background: var(--card); border-radius: 8px; margin-bottom: .9rem;
}
.shot-skeleton .sk-bar { height: 2.4rem; border-radius: 10px; }
.shot-skeleton .sk-line { height: 1rem; }
.shot-skeleton .sk-line.w70 { width: 70%; }
.shot-skeleton .sk-line.w40 { width: 40%; }
.shot-skeleton .sk-block { height: 8rem; }

.browser.is-done .scan-sheen { display: none; }

/* Growing breadcrumb of visited pages. */
.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
    margin: 1.1rem 0 .3rem; font-size: .9rem;
}
.crumb {
    display: inline-flex; align-items: center; gap: .4rem;
    border-radius: 999px; padding: .28rem .7rem; border: 1px solid var(--line);
}
.crumb.done { color: var(--ink); background: var(--card); }
.crumb.done::before { content: "✓"; color: var(--pass); font-weight: 800; font-size: .8rem; }
.crumb.loading {
    color: var(--brand); border-color: var(--brand);
    background: rgba(108, 140, 255, .1); font-weight: 600;
    animation: crumbIn .4s ease both;
}
.crumb-sep { color: var(--muted); }
@keyframes crumbIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* The watchdog's one-line commentary. */
.narrate {
    display: flex; align-items: center; gap: .7rem; margin: 1rem 0 1.3rem;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    border-left: 3px solid var(--brand); padding: .9rem 1.1rem;
}
.narrate-eye {
    font-size: 1.5rem; line-height: 1; flex: none;
    animation: eyePop .45s ease both;
    filter: drop-shadow(0 4px 12px rgba(108, 140, 255, .4));
}
.narrate-say {
    color: var(--ink); font-size: 1.08rem; font-weight: 600; line-height: 1.4;
    animation: sayIn .45s ease both;
}
@keyframes eyePop {
    0% { transform: scale(.4) rotate(-12deg); opacity: 0; }
    70% { transform: scale(1.18) rotate(3deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes sayIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* Collapsed technical feed. */
.feed-details { margin-top: 1.2rem; }
.feed-details > summary {
    cursor: pointer; color: var(--muted); font-size: .92rem; font-weight: 600;
    padding: .4rem 0; list-style: none; user-select: none;
}
.feed-details > summary::-webkit-details-marker { display: none; }
.feed-details > summary::before { content: "▸ "; color: var(--brand); }
.feed-details[open] > summary::before { content: "▾ "; }
.scanlive-hint { color: var(--muted); font-size: .9rem; margin-top: .8rem; text-align: center; }
.monitor-oneclick { margin: .2rem 0 .1rem; }

.feed { display: flex; flex-direction: column; gap: .4rem; margin: 1.5rem 0; }
.event {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: .7rem 1rem; color: var(--ink); font-size: .98rem;
}
.event.in { animation: eventIn .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes eventIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
.event.live {
    color: var(--ink); font-weight: 600; border-color: var(--brand);
    box-shadow: 0 0 0 1px var(--brand) inset, 0 0 22px -6px var(--brand);
    animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 1px var(--brand) inset, 0 0 10px -6px var(--brand); } 50% { box-shadow: 0 0 0 1px var(--brand) inset, 0 0 26px -4px var(--brand); } }
.event .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .6rem; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
    .event.in, .event.live, .shot-live, .narrate-eye, .narrate-say, .crumb.loading,
    .blive-dot, .shot-skeleton::after { animation: none; }
    .scan-sheen { display: none; }
}

/* =====================================================================
   Auto-playing scan showreel (homepage + /bureaus). Reuses the live-scan
   browser frame (.browser, .shot-live, .crumbs, .narrate, .scan-progress)
   and only adds the section chrome, the phone-view fit, and the end verdict.
   The step animation is driven by a global script in App.razor.
   ===================================================================== */
.showreel-section {
    max-width: 820px; margin: clamp(3rem, 8vh, 5rem) auto 0;
    padding: 0 1.25rem; text-align: center;
}
.showreel-title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.showreel-lead { color: var(--muted); max-width: 54ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.showreel { text-align: left; }
.showreel .scan-progress { margin-top: 1.1rem; }
.showreel-cap { color: var(--muted); font-size: .9rem; text-align: center; margin: .2rem 0 0; }

/* A mobile screenshot is a tall, narrow capture: letterbox it in the wide frame instead of
   cropping, so it reads as a phone rather than a stretched desktop shot. */
.shot-live.is-mobile { object-fit: contain; background: var(--bg-soft); }

/* End-of-loop verdict, laid over the last frame before the demo restarts. */
.sr-done {
    position: absolute; inset: 0; z-index: 4;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; text-align: center; padding: 1.5rem;
    background: rgba(12, 13, 16, .82); backdrop-filter: blur(3px);
    animation: srDoneIn .45s ease both;
}
@keyframes srDoneIn { from { opacity: 0; } to { opacity: 1; } }
.sr-done-eye { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 4px 14px rgba(108, 140, 255, .45)); }
.sr-done-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.sr-done .scoreboard { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.sr-done-line { color: var(--muted); margin: .2rem 0 0; max-width: 34ch; }
@media (prefers-reduced-motion: reduce) { .sr-done { animation: none; } }

.spinner {
    display: inline-block; width: .8rem; height: .8rem; margin-right: .3rem;
    border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%;
    animation: spin .8s linear infinite; vertical-align: -1px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .proof { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .hero h1 br { display: none; }
    .scan-form { flex-direction: column; }
    .scan-form button { width: 100%; }
    .dev-tool { align-self: stretch; }
    .dev-tool .engine-select { flex: 1; padding: .7rem .8rem; }
}


/* Positioning: the visitor-flow section is the headline, the bonus block is folded away. */
.section-title.primary {
    font-size: 1.5rem; color: var(--ink); border-left: 4px solid var(--brand);
    padding-left: .7rem; margin-top: 0;
}
.section-intro { color: var(--muted); margin: -.6rem 0 1.2rem; }

.bonus {
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius);
    margin: 1.8rem 0 .5rem; overflow: hidden;
}
.bonus > summary {
    cursor: pointer; list-style: none; padding: 1.1rem 1.3rem;
    display: flex; flex-direction: column; gap: .2rem;
}
.bonus > summary::-webkit-details-marker { display: none; }
.bonus > summary::after { content: "▾ techniek & vindbaarheid tonen"; color: var(--brand); font-size: .85rem; font-weight: 600; }
.bonus[open] > summary::after { content: "▴ inklappen"; }
.bonus-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.bonus-hint { color: var(--muted); font-size: .88rem; }
.bonus-body { padding: 0 1.3rem 1.2rem; }
.bonus-body .section-title { font-size: 1.05rem; margin: 1.4rem 0 .8rem; }

/* Honest note under form checks — we never claim submissions arrive. */
.form-note {
    color: var(--muted); font-size: .88rem; line-height: 1.45;
    border-left: 3px solid var(--line); padding: .2rem 0 .2rem .8rem; margin: 0 0 .8rem;
}
.form-note em { color: var(--brand); font-style: normal; font-weight: 600; }

/* Waitlist agency signal + coming-soon block. */
.agency-check {
    display: flex; align-items: center; gap: .5rem; color: var(--muted);
    font-size: .92rem; flex-basis: 100%; margin-top: .2rem;
}
.agency-check input { flex: none; min-width: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--brand); }
/* Binnenkort: a roadmap teaser as three tactile cards instead of a flat bullet list. */
.coming-soon { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.cs-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; flex-wrap: wrap; }
.cs-title {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--brand);
}
.cs-note {
    font-size: .72rem; font-weight: 700; color: var(--brand-green);
    background: rgba(46, 203, 116, .12); border: 1px solid rgba(46, 203, 116, .35);
    border-radius: 999px; padding: .1rem .6rem;
}
.cs-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem;
}
.cs-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: .4rem;
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: var(--r-el); padding: 1rem .9rem .95rem;
    transition: transform .18s ease, border-color .18s ease;
}
.cs-card:hover {
    transform: translateY(-3px); border-color: #3a3c46;
}
.cs-ico {
    width: 2.2rem; height: 2.2rem; display: grid; place-items: center; line-height: 1;
    border-radius: var(--r-el); background: var(--card); border: 1px solid var(--line); color: var(--brand);
}
.cs-ico svg { width: 1.25rem; height: 1.25rem; display: block; }
.cs-name { font-weight: 700; font-size: .96rem; color: var(--ink); }
.cs-desc { color: var(--muted); font-size: .84rem; line-height: 1.45; }
@media (max-width: 640px) {
    .cs-grid { grid-template-columns: 1fr; }
    .cs-card {
        display: grid; grid-template-columns: auto 1fr; column-gap: .85rem; row-gap: .2rem;
        align-items: center; padding: .85rem .9rem;
    }
    .cs-ico { grid-row: span 2; }
}

/* Multi-site overview page (batch report; the homepage multi-scan entry was removed). */
.batch-list { list-style: none; padding: 0; margin: 1.5rem 0; display: flex; flex-direction: column; gap: .6rem; }
.batch-row {
    display: flex; align-items: center; gap: 1rem; background: var(--card);
    border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1.1rem;
}
.b-score {
    flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center;
    font-weight: 800; background: var(--bg-soft); border: 2px solid var(--line); color: var(--muted);
}
.b-score.pass { border-color: var(--pass); color: var(--pass); }
.b-score.warn { border-color: var(--warn); color: var(--warn); }
.b-score.fail { border-color: var(--fail); color: var(--fail); }
.b-link { flex: 1; font-weight: 600; word-break: break-all; }
.b-status { flex: none; color: var(--muted); font-size: .88rem; }
.b-status.done { color: var(--pass); }
.b-status.failed { color: var(--fail); }


/* ===== Portaal & login ===== */
.portal { max-width: 760px; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.portal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.portal-head h1 { margin: .4rem 0 .2rem; }
.ghost-btn {
    background: transparent; color: var(--ink); border: 1px solid var(--line);
    border-radius: 10px; padding: .5rem 1rem; cursor: pointer; font: inherit;
}
.ghost-btn:hover { border-color: var(--brand); color: var(--brand); }
/* Health board: summary bar + edge-to-edge site rows (reuses .site-row / .spark / .site-badge). */
.portal-summary { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
.portal-board { padding: 0; overflow: hidden; }
.site-report { display: inline-block; margin-top: .35rem; font-size: .88rem; color: var(--brand); }

/* Per-site kapot/hersteld timeline (durable MonitorEvents). */
.site-timeline { margin-top: .5rem; }
.site-timeline > summary {
    cursor: pointer; color: var(--muted); font-size: .85rem; user-select: none; width: fit-content;
}
.site-timeline > summary:hover { color: var(--brand); }
.site-timeline ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.site-timeline li { display: flex; align-items: baseline; gap: .5rem; font-size: .88rem; }
.tl-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; align-self: center; background: var(--muted); }
.tl-dot.good { background: var(--pass); }
.tl-dot.bad { background: var(--fail); }
.tl-text { flex: 1 1 auto; color: var(--ink); }
.tl-time { flex: none; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.site-toggle { flex: none; }
.site-toggle .ghost-btn { padding: .4rem .8rem; font-size: .85rem; }
.portal-empty { text-align: center; padding: 2.4rem 1.4rem; }
.portal-empty .pe-eye { font-size: 2.6rem; line-height: 1; }
.portal-empty h2 { margin: .6rem 0 .4rem; }
.portal-empty p { color: var(--muted); max-width: 44ch; margin: 0 auto; }
/* Pause + delete controls, grouped at the right edge of each row. Wraps so the buttons never
   run past the card edge on narrow screens (the board clips overflow). */
.site-actions { display: flex; align-items: center; gap: .5rem; flex: none; flex-wrap: wrap; }
.site-actions .site-toggle { flex: none; }
.site-rescan { flex: none; margin: 0; }
.site-rescan .ghost-btn { padding: .4rem .8rem; font-size: .85rem; }
.rescan-spent { color: var(--muted); font-size: .8rem; line-height: 1; flex: none; }
.danger-link {
    color: var(--muted); font-size: .82rem; line-height: 1;
    border: 1px solid transparent; border-radius: 10px; padding: .45rem .6rem; cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.danger-link:hover, .danger-link:focus-visible {
    color: var(--fail); border-color: rgba(251, 113, 133, .4);
    background: rgba(251, 113, 133, .08); text-decoration: none;
}

/* Deletion confirmation — a real overlay, toggled by a hidden checkbox (no JS, no :target).
   :target needs real fragment navigation, which Blazor's enhanced navigation intercepts, so the
   overlay stayed hidden. A checkbox toggle involves no navigation and cannot be intercepted. */
.modal-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.modal {
    display: none; position: fixed; inset: 0; z-index: 100;
    align-items: center; justify-content: center; padding: 1.2rem;
}
.modal-toggle:checked ~ .modal { display: flex; }
.modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(3px); }
.modal-card {
    position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow); padding: 1.8rem 1.6rem 1.6rem;
    animation: modal-pop .16s ease-out;
}
@keyframes modal-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-icon {
    width: 52px; height: 52px; margin: 0 auto .9rem; display: grid; place-items: center;
    font-size: 1.55rem; line-height: 1; border-radius: 14px;
    background: rgba(251, 113, 133, .12); border: 1px solid rgba(251, 113, 133, .4);
}
.modal-card h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.modal-card p { color: var(--muted); font-size: .95rem; margin: 0 0 1.3rem; }
.modal-card strong { color: var(--ink); }
.modal-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.modal-actions form { margin: 0; }
.modal-actions .ghost-btn { display: inline-flex; align-items: center; text-decoration: none; }
.danger-btn { background: var(--fail); color: #40101a; }
.danger-btn:hover { filter: brightness(1.06); }

/* ----- Site toevoegen: a premium add-card with a live usage meter ----- */
.portal-add {
    position: relative; overflow: hidden; margin-top: 1.25rem;
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--r);
}
.pa-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.portal-add h2 { margin: 0; }
.pa-sub { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; max-width: 44ch; }
.pa-count {
    flex: none; font-weight: 800; font-size: 1.02rem; font-variant-numeric: tabular-nums;
    color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem;
    background: var(--bg-soft);
}
.pa-count-max { color: var(--muted); font-weight: 600; }
.pa-count.full { color: var(--warn); border-color: var(--warn); }
.pa-form { margin: 0; max-width: none; box-shadow: none; background: var(--bg-soft); }
.pa-limit {
    margin: 0; color: var(--ink); font-size: .92rem;
    background: rgba(251, 191, 36, .09); border: 1px solid rgba(251, 191, 36, .35);
    border-radius: 12px; padding: .8rem 1rem;
}
.portal-notice {
    color: var(--pass); margin: .8rem 0;
    background: rgba(52, 211, 153, .09); border: 1px solid rgba(52, 211, 153, .35);
    border-radius: 12px; padding: .7rem 1rem;
}
@media (max-width: 520px) {
    .site-badge, .site-actions { order: 3; }
    .site-actions { width: 100%; }
}
.portal-head-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* Agency portal: client-label groups, per-site settings, bulk add. */
.group-head {
    display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
    gap: .4rem 1rem; margin: 1.4rem 0 .5rem;
}
.group-head .group-title { margin: 0; }
.group-title {
    display: flex; align-items: baseline; gap: .5rem; margin: 1.4rem 0 .5rem;
    font-size: 1.05rem; font-weight: 800; color: var(--ink);
}
.group-routing { font-size: .9rem; }
.group-routing > summary { cursor: pointer; color: var(--muted); }
.group-routing .settings-form { margin-top: .6rem; }
.group-count {
    font-size: .8rem; font-weight: 700; color: var(--muted);
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .55rem;
}
.site-settings { grid-column: 1 / -1; margin-top: .4rem; }
.site-settings > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.settings-form {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .6rem;
    align-items: center; margin: .7rem 0 0; max-width: none; box-shadow: none;
}
.settings-form > label { grid-column: 1 / -1; font-size: .82rem; font-weight: 700; color: var(--muted); margin: 0; }
.settings-form > .fineprint { grid-column: 1 / -1; margin: 0; }
.settings-submit > .submit-toggle {
    grid-column: 1 / 2; display: inline-flex; align-items: center; gap: .5rem;
    font-size: .9rem; font-weight: 600; color: var(--ink); text-transform: none;
}
.settings-submit .submit-toggle input { width: auto; margin: 0; }
.pa-bulk { margin-top: .9rem; }
.pa-bulk > summary { cursor: pointer; color: var(--muted); font-size: .92rem; }
.pa-bulk-form { display: grid; gap: .6rem; margin-top: .7rem; max-width: none; box-shadow: none; }
.pa-bulk-form textarea {
    width: 100%; resize: vertical; font: inherit; padding: .7rem .8rem;
    color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px;
}
.admin-cap-form { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.admin-cap-form > label { font-size: .82rem; font-weight: 700; color: var(--muted); margin: 0; }
.admin-cap-form > input { width: 6rem; padding: .35rem .5rem; font: inherit;
    color: var(--ink); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px; }
.admin-cap-form > .fineprint { margin: 0; }
.portal-head-actions form { margin: 0; }

/* ---------- Beheer / superadmin ---------- */
.admin { max-width: 980px; margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.admin-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8rem; }
.admin-head h1 { margin: .4rem 0 .2rem; }
.admin-head .ghost-btn { flex: none; text-decoration: none; display: inline-flex; align-items: center; }
.admin-note {
    color: var(--muted); font-size: .9rem; margin: 0 0 1.4rem;
    background: var(--bg-soft); border: 1px solid var(--line);
    border-radius: 12px; padding: .7rem 1rem;
}

/* Stat tiles across the top. */
.admin-stats {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin-bottom: 2rem;
}
.admin-stat {
    display: flex; flex-direction: column; gap: .2rem; text-align: left;
    background: var(--card); border: 1px solid var(--line); border-radius: 14px;
    padding: 1rem 1.1rem;
}
.admin-stat .as-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.admin-stat .as-label { color: var(--muted); font-size: .82rem; }
.admin-stat.is-bad { border-color: var(--fail); }
.admin-stat.is-bad .as-num { color: var(--fail); }
.admin-stat.is-warn { border-color: var(--warn); }
.admin-stat.is-warn .as-num { color: var(--warn); }

.admin-listhead { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .8rem; }
.admin-listhead h2 { margin: 0; }
.admin-count {
    font-size: .8rem; font-weight: 700; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px; padding: .1rem .6rem;
    font-variant-numeric: tabular-nums;
}

.admin-board { padding: 0; overflow: hidden; }
.admin-row {
    display: flex; align-items: flex-start; gap: 1rem;
    padding: 1rem 1.2rem; border-bottom: 1px solid var(--line);
}
.admin-row:last-child { border-bottom: 0; }
.admin-main { flex: 1 1 auto; min-width: 0; }
.admin-email { font-weight: 700; word-break: break-all; }
.admin-meta { color: var(--muted); font-size: .86rem; margin-top: .2rem; }
.admin-sites { margin-top: .55rem; }
.admin-sites > summary {
    cursor: pointer; color: var(--muted); font-size: .85rem; user-select: none; width: fit-content;
}
.admin-sites > summary:hover { color: var(--brand); }
.admin-sites ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.admin-sites li { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.asite-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--muted); }
.asite-dot.good { background: var(--pass); }
.asite-dot.bad { background: var(--fail); }
.asite-dot.mid { background: var(--warn); }
.asite-host { flex: 0 1 auto; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asite-state { flex: none; color: var(--muted); font-size: .8rem; }

@media (max-width: 720px) {
    .admin-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 440px) {
    .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- Login / passwordless auth ---------- */
.login-hero {
    max-width: 440px;
    margin: clamp(1.75rem, 6vh, 3.75rem) auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.auth-card {
    position: relative;
    overflow: hidden;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 2.2rem 1.9rem 1.8rem;
}

.auth-badge {
    width: 52px; height: 52px; margin: 0 auto 1.1rem;
    display: grid; place-items: center;
    font-size: 1.6rem; line-height: 1;
    border-radius: var(--r-el);
    background: var(--bg-soft);
    border: 1px solid var(--line);
}

.login-hero h1 { font-size: clamp(1.5rem, 4vw, 1.95rem); line-height: 1.15; margin: 0 0 .4rem; }
.auth-sub { color: var(--muted); font-size: 1rem; margin: 0 auto 1.6rem; max-width: 34ch; }

.auth-form { display: flex; flex-direction: column; gap: .55rem; text-align: left; }
.auth-label { font-size: .82rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.auth-form input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font-size: 1.02rem;
    padding: .85rem 1rem;
    border-radius: var(--r-el);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-form input::placeholder { color: var(--muted); opacity: .7; }
.auth-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(111, 144, 255, .22); }
.auth-form button { width: 100%; margin-top: .35rem; padding: .9rem 1.4rem; font-size: 1.02rem; }
.auth-hint { color: var(--muted); font-size: .82rem; text-align: center; margin: .55rem 0 0; }

.auth-alert {
    text-align: left;
    background: rgba(251, 113, 133, .1);
    border: 1px solid rgba(251, 113, 133, .4);
    color: #ffd9df;
    padding: .7rem .9rem;
    border-radius: 12px;
    font-size: .9rem;
    margin: 0 0 1.1rem;
}

.auth-sent-icon { font-size: 2.4rem; line-height: 1; margin-bottom: .2rem; }
.auth-sent-note { color: var(--muted); font-size: .95rem; margin: 0 auto 1.3rem; max-width: 38ch; }
.auth-secondary { font-weight: 600; }

.auth-alt { color: var(--muted); font-size: .9rem; text-align: center; margin: 1.2rem 0 0; }

/* Inline error text, still used by the portal. */
.login-error { color: var(--fail); margin: .8rem 0; }

/* =====================================================================
   Global chrome: sticky header + footer (new in the redesign)
   ===================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(12, 13, 16, .72);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.header-inner {
    max-width: 1080px; margin: 0 auto; padding: .7rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.header-brand { display: inline-flex; align-items: center; line-height: 0; }
.header-brand img { height: 61px; width: auto; display: block; }
.header-nav { display: flex; align-items: center; gap: .35rem; }
.hn-link {
    color: var(--muted); font-weight: 600; font-size: .95rem;
    padding: .5rem .7rem; border-radius: 10px;
}
.hn-link:hover { color: var(--ink); text-decoration: none; background: rgba(255, 255, 255, .04); }
.hn-cta {
    color: #fff; font-weight: 700; font-size: .95rem;
    padding: .5rem 1rem; border-radius: var(--r-el);
    background: var(--brand-strong);
}
.hn-cta:hover { text-decoration: none; filter: brightness(1.08); }
/* Signed-in account actions in the top bar (portal / beheer): Beheer or Mijn sites + Uitloggen. */
.header-account { gap: .5rem; }
.header-account form { margin: 0; }
.hn-logout {
    background: transparent; color: var(--ink); border: 1px solid var(--line);
    border-radius: 10px; padding: .45rem .9rem; cursor: pointer;
    font: inherit; font-weight: 600; font-size: .95rem;
}
.hn-logout:hover { border-color: var(--brand); color: var(--brand); }
@media (max-width: 560px) {
    .hn-link { display: none; }
    .header-account .hn-link { display: inline-block; } /* keep the account shortcut reachable on mobile */
    .header-inner { padding: .6rem 1rem; }
}

main { display: block; }

/* Anchor jumps (/#hoe, /#faq, /#scan …) must clear the sticky header, else the heading
   scrolls up underneath it. */
section[id], #scan, [id].hero { scroll-margin-top: 84px; }

.site-footer {
    margin-top: clamp(3.5rem, 9vh, 6rem);
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(18, 25, 54, .35), transparent);
}
.footer-inner {
    max-width: 1080px; margin: 0 auto; padding: 2.6rem 1.25rem 1.6rem;
    display: grid; grid-template-columns: minmax(240px, 1.4fr) 2fr; gap: 2rem;
}
.foot-brand img { height: 32px; width: auto; display: block; margin-bottom: .9rem; }
.foot-tag { color: var(--muted); max-width: 34ch; margin: 0 0 .8rem; font-size: .95rem; }
.foot-made { color: var(--muted); font-size: .85rem; opacity: .8; margin: 0; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.foot-col h4 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted); font-weight: 800; margin: 0 0 .8rem;
}
.foot-col a { display: block; color: var(--ink); font-size: .93rem; padding: .28rem 0; }
.foot-col a:hover { color: var(--brand); text-decoration: none; }
.footer-legal {
    max-width: 1080px; margin: 0 auto; padding: 1rem 1.25rem 2.4rem;
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    color: var(--muted); font-size: .85rem;
}
.footer-legal .fl-note { opacity: .8; }
@media (max-width: 680px) {
    .footer-inner { grid-template-columns: 1fr; gap: 1.6rem; }
    .foot-cols { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   Hero refinements: eyebrow, trust row, gradient glow behind the form
   ===================================================================== */
/* A quiet label, not the pill-with-glowing-dot eyebrow. Sentence case, no uppercase
   tracking, no status dot: it states beta status once and gets out of the way. */
.hero-eyebrow {
    display: inline-block;
    font-size: .82rem; font-weight: 600; letter-spacing: 0;
    color: var(--muted);
    margin-bottom: 1.2rem;
}
.hero-eyebrow .dot { display: none; }

/* No glow behind the form. Left-aligned to match the hero. */
.scan-wrap { position: relative; max-width: 560px; margin: 0; }
.scan-wrap .scan-form { position: relative; margin: 0; }

/* One sober line of reassurances, left-aligned. No checkmark stickers, no chips. */
.trust-row {
    display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .3rem .9rem;
    margin: 1rem 0 0; max-width: 560px;
    color: var(--muted); font-size: .9rem;
}
.trust-chip {
    display: inline-flex; align-items: center;
    color: var(--muted); font-size: .9rem; font-weight: 500;
}
.trust-chip .tc-ic { display: none; }
/* Trailing separator dot glued to the RIGHT of each chip (not the left of the next one), so when the
   row wraps on mobile the dot stays at the end of the previous line instead of leading the new one. */
.trust-chip:not(:last-child)::after {
    content: ""; width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: .5; margin-left: .9rem; align-self: center;
}

/* =====================================================================
   "Zo werkt het" — a connected flow, not three identical icon cards
   ===================================================================== */
.how {
    max-width: 900px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0 1.25rem;
}
.how h2 { font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin-bottom: 2rem; }
.how-flow {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    counter-reset: step; position: relative;
}
.how-step { position: relative; padding: 0 1.2rem; text-align: center; }
.how-step:not(:last-child)::after {
    content: ""; position: absolute; top: 1.1rem; right: -1px; width: 2px; bottom: 0;
    /* a subtle connector line between steps on desktop */
    display: none;
}
.how-num {
    counter-increment: step;
    width: 2.5rem; height: 2.5rem; margin: 0 auto .8rem;
    display: grid; place-items: center; border-radius: 50%;
    background: transparent; border: 1px solid var(--brand);
    color: var(--brand); font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
}
.how-num::before { content: counter(step); }
.how-step h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.how-step p { color: var(--muted); font-size: .95rem; margin: 0; }
/* Connector: a single hairline behind the number row, not a gradient rail. */
.how-flow::before {
    content: ""; position: absolute; top: 1.25rem; left: 16%; right: 16%; height: 1px;
    background: var(--line); z-index: 0;
}
.how-step { z-index: 1; }
@media (max-width: 640px) {
    .how-flow { grid-template-columns: 1fr; gap: 1.6rem; }
    .how-flow::before { display: none; }
}

/* =====================================================================
   FAQ — accordion, doubles as FAQPage structured data
   ===================================================================== */
.faq { max-width: 760px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0 1.25rem; }
.faq h2 { font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin-bottom: 1.6rem; }
.faq-item {
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--card); margin-bottom: .7rem; overflow: hidden;
}
.faq-item > summary {
    cursor: pointer; list-style: none; padding: 1.05rem 1.2rem;
    font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: .8rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "+"; margin-left: auto; color: var(--brand); font-weight: 800; font-size: 1.3rem;
    line-height: 1; transition: transform .2s ease;
}
.faq-item[open] > summary::after { content: "−"; }
.faq-item[open] > summary { border-bottom: 1px solid var(--line); }
.faq-item .faq-a { padding: 1rem 1.2rem 1.2rem; color: var(--muted); }
.faq-item .faq-a p { margin: 0 0 .6rem; }
.faq-item .faq-a p:last-child { margin: 0; }

/* =====================================================================
   Final CTA band — repeat the primary action before the footer
   ===================================================================== */
.cta-band {
    max-width: 900px; margin: clamp(3.5rem, 9vh, 6rem) auto 0; padding: 0 1.25rem;
}
.cta-inner {
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--bg-soft);
    padding: clamp(2rem, 5vw, 3rem);
    text-align: center;
}
.cta-inner h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: .6rem; }
.cta-inner p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.6rem; font-size: 1.08rem; }
.cta-band .btn-primary {
    display: inline-block; border: 0; border-radius: 12px;
    padding: .95rem 1.8rem; font-weight: 800; font-size: 1.05rem; cursor: pointer;
    color: #fff;
}
.cta-band .btn-primary:hover { text-decoration: none; }
.cta-sub { margin-top: 1rem !important; font-size: .92rem !important; }

/* =====================================================================
   Live-scan progress bar (adds a sense of "nearly there" to the wait)
   ===================================================================== */
.scan-progress {
    height: 8px; border-radius: 999px; background: var(--bg-soft);
    border: 1px solid var(--line); overflow: hidden; margin: 0 0 1.4rem;
}
.scan-progress > i {
    display: block; height: 100%; width: 6%;
    background: var(--grad-brand); background-size: 200% 100%;
    border-radius: 999px;
    transition: width .8s cubic-bezier(.25, .8, .3, 1);
    animation: progressSheen 2.2s linear infinite;
}
@keyframes progressSheen { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .scan-progress > i { animation: none; } }

/* =====================================================================
   Bureaus page (/bureaus) + shared alert-mail example
   ===================================================================== */
/* Hero CTA as a real button; the generic .btn-primary styling is scoped elsewhere. */
.hero-cta-row { margin-top: 1.6rem; }
.hero-cta-row .btn-primary, .founding-card .btn-primary {
    display: inline-block; background: var(--brand-strong); color: #fff;
    border: 0; border-radius: 12px; padding: .95rem 1.8rem;
    font-weight: 800; font-size: 1.05rem;
    transition: transform .06s ease, filter .15s ease;
}
.hero-cta-row .btn-primary:hover, .founding-card .btn-primary:hover {
    filter: brightness(1.08); text-decoration: none;
}
.bureaus-hero .fineprint { margin-top: .9rem; }
.bureaus-mock { margin-top: 2.4rem; max-width: 820px; }
.bureaus-hero .dash-caption { text-align: left; }
.site-label {
    font-weight: 400; font-size: .8rem; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px;
    padding: .1rem .55rem; margin-left: .45rem; vertical-align: 1px;
}

/* The one sentence every agency recognises: styled as the client quote it is. */
.known-problem {
    max-width: 720px; margin: clamp(3.5rem, 9vh, 6rem) auto 0;
    padding: 0 1.25rem; text-align: center;
}
.kp-quote {
    font-size: clamp(1.4rem, 3.2vw, 2.1rem); line-height: 1.25;
    margin: 0 0 1rem;
}
.kp-text { color: var(--muted); font-size: 1.1rem; max-width: 58ch; margin: 0 auto; }

/* Feature list: quiet stacked rows with hairlines, no card grid (5 items would orphan). */
.bureau-feats { max-width: 760px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0 1.25rem; }
.bureau-feats h2 { font-size: clamp(1.4rem, 3vw, 2rem); text-align: center; margin-bottom: 1.6rem; }
.feat-rows {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden;
}
.feat-row { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.feat-row:last-child { border-bottom: 0; }
.feat-row h3 { font-size: 1.08rem; margin: 0 0 .45rem; }
.feat-row p { color: var(--muted); margin: 0; font-size: .98rem; }

/* Alert-mail example: a stylised e-mail frame, shared by /bureaus and the homepage. */
.alert-sample { max-width: 720px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0 1.25rem; text-align: center; }
.alert-sample h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .5rem; }
.alert-sample .as-lead { color: var(--muted); max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.alert-demo {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); text-align: left; overflow: hidden; margin-top: 1.6rem;
}
.ad-subject {
    padding: 1rem 1.3rem; background: var(--bg-soft);
    border-bottom: 1px solid var(--line); font-weight: 700;
}
.ad-label {
    display: inline-block; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    margin-right: .5rem;
}
.ad-body { padding: 1.2rem 1.3rem .4rem; }
.ad-body p { color: var(--muted); font-size: .96rem; margin: 0 0 .9rem; }
.ad-body p strong { color: var(--ink); }
.ad-actions {
    display: flex; flex-wrap: wrap; gap: .5rem;
    padding: .4rem 1.3rem 1.2rem;
}
.ad-chip {
    font-size: .85rem; color: var(--brand);
    border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem;
}

/* Why agencies buy: two claims side by side. */
.why-buy { max-width: 760px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0 1.25rem; text-align: center; }
.why-buy h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.6rem; }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.why-card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); padding: 1.3rem 1.4rem;
}
.why-card h3 { font-size: 1.05rem; margin: 0 0 .45rem; }
.why-card p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }

/* Founding offer: one card, one price, one promise. */
.founding { max-width: 720px; margin: clamp(3rem, 8vh, 5rem) auto 0; padding: 0 1.25rem; }
.founding-card {
    background: var(--bg-soft); border: 1px solid var(--brand);
    border-radius: var(--r); padding: clamp(1.8rem, 4vw, 2.6rem); text-align: center;
}
.founding-card h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .8rem; }
.founding-card p { color: var(--muted); max-width: 56ch; margin: 0 auto 1rem; }
.founding-card .founding-deal { color: var(--ink); }
.founding-card .btn-primary { margin-top: .8rem; }

/* Coming soon: honest list, no cards. */
.soon-list {
    list-style: none; margin: 1rem auto 0; padding: 0; max-width: 620px;
    text-align: left; display: flex; flex-direction: column; gap: .7rem;
}
.soon-list li { color: var(--muted); font-size: .98rem; padding-left: 1.3rem; position: relative; }
.soon-list li::before {
    content: ""; position: absolute; left: 0; top: .5em;
    width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand);
}
.soon-list li strong { color: var(--ink); }

/* Homepage: the above-the-fold line for agency visitors. */
.agency-line { color: var(--muted); font-size: .95rem; margin-top: 1.4rem; }
.agency-line a { font-weight: 600; }