/* Webkeurmeester – fris en vriendelijk, maar betrouwbaar.
   Hoofdkleur turquoise (#0d9488 voor vlakken en vormen, #0f766e voor tekst, links en knoppen: 5,5:1 op wit),
   accent koraal (#ff7a59, altijd met donkere tekst #3b1206: 6,4:1) voor de belangrijkste knoppen.
   Zachte achtergrondvormen in mint, perzik en lichtgeel; nooit achter de tekst van een rapport.
   Statuskleuren hebben een vaste betekenis: rood (NU FIXEN / probleem), oranje (Let op!), geel (Aandacht), groen (in orde).
   Afstanden in stappen van 8px, hoeken van 12-16px, dunne randen, zachte schaduwen. */

:root {
  --bg: #f4faf8; --card: #fff; --text: #1f2733; --muted: #5b6575; --line: #e1ebe8; --line-strong: #c5d3cf;
  --subtle: #f5f9f8;                      /* lichte vlakken binnen een kaart */
  --brand: #0f766e; --brand-hover: #115e59; --brand-text: #fff; --brand-soft: #e6f7f4; --brand-bright: #0d9488;
  --link: #0f766e;
  --accent: #ff7a59; --accent-hover: #ff6a45; --accent-text: #3b1206;
  --mint: #ccfbf1; --peach: #ffe4d6; --sun: #fef3c7;
  --shape-mint: #ccfbf1; --shape-peach: #ffe4d6; --shape-sun: #fef3c7; --shape-ring: rgba(13, 148, 136, .35);
  --head-bg: #fff; --head-text: #1f2733; --head-link: #46505e; --head-hover: #eef8f6;
  --focus: #0d9488;
  --shadow: 0 1px 2px rgba(16, 42, 38, .04), 0 4px 16px rgba(16, 42, 38, .05);
  --ok: #157347; --ok-bg: #e8f5ee; --warn: #9a5b00; --warn-bg: #fff4e0;
  --fail: #b42318; --fail-bg: #fdeceb; --info: #475467; --info-bg: #eef1f5;
  --r1: #f5c400; --r1-bg: #fff8d6; --r1-text: #4d3d00;
  --r2: #f08c00; --r2-bg: #fff1de; --r2-text: #3d1f00;
  --r3: #d92d20; --r3-bg: #fdeceb; --r3-text: #fff; --r3-strong: #b42318;
  --radius: 16px; --radius-md: 12px; --radius-sm: 10px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --measure: 70ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1514; --card: #13201e; --text: #e6eeec; --muted: #9db0ad; --line: #233533; --line-strong: #34504c;
    --subtle: #182927;
    --brand: #2dd4bf; --brand-hover: #5eead4; --brand-text: #042f2e; --brand-soft: #12302c; --brand-bright: #2dd4bf;
    --link: #5eead4;
    --accent: #ff8a6b; --accent-hover: #ffa085; --accent-text: #3b1206;
    --mint: #12302c; --peach: #3a2219; --sun: #332b12;
    --shape-mint: rgba(45, 212, 191, .07); --shape-peach: rgba(255, 138, 107, .06); --shape-sun: rgba(250, 204, 21, .05);
    --shape-ring: rgba(94, 234, 212, .18);
    --head-bg: #13201e; --head-text: #e6eeec; --head-link: #b9c8c5; --head-hover: #1b2d2a;
    --focus: #5eead4;
    --shadow: none;
    --ok: #4cc38a; --ok-bg: #12301f; --warn: #f0b04a; --warn-bg: #33270f;
    --fail: #f2777c; --fail-bg: #3a1618; --info: #b0b8c6; --info-bg: #232a35;
    --r1: #e8c22a; --r1-bg: #2e2810; --r1-text: #1d1700;
    --r2: #f59f3a; --r2-bg: #33230f; --r2-text: #241300;
    --r3: #d92d20; --r3-bg: #3a1614; --r3-text: #fff; --r3-strong: #f2777c;
  }
}

/* ---------- basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--font); background: var(--bg); color: var(--text);
       display: flex; flex-direction: column; min-height: 100vh; overflow-wrap: break-word;
       position: relative; }
main { flex: 1 0 auto; width: 100%; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { line-height: 1.25; color: var(--text); }
h1 { font-size: 2rem; font-weight: 750; letter-spacing: -.015em; margin: 0 0 var(--s1); }
h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.005em; margin: var(--s5) 0 var(--s2); }
h3 { font-size: 1.0625rem; font-weight: 650; margin: 0; }
h4 { font-size: .9375rem; margin: 0; }
code { font-family: var(--mono); font-size: .85em; word-break: break-all; }
pre { font-family: var(--mono); }
ul, ol { padding-left: 1.25em; }
.muted { color: var(--muted); font-size: .9375rem; }
.grow { flex: 1; min-width: 0; }
.nowrap { overflow-wrap: anywhere; }
.keep { white-space: nowrap; }
.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; }
.eyebrow { margin: 0 0 4px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
           color: var(--link); }
.skip { position: absolute; left: var(--s2); top: -100px; z-index: 10; background: var(--card); color: var(--text);
        padding: var(--s1) var(--s2); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); }
.skip:focus { top: var(--s1); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--s3); }
main.wrap { padding-top: var(--s5); padding-bottom: var(--s8); }

/* ---------- achtergrondvormen ----------
   Twee vage vormen in de hoeken van elke pagina (div.bg-shapes in base.html). De laag ligt onder alle inhoud
   (z-index -1), vangt geen klikken op en snijdt de vormen zelf af, zodat er geen horizontale scrollbalk ontstaat.
   Op pagina's met een rapport tonen we ze niet, zodat de leesbaarheid daar precies gelijk blijft. */
.bg-shapes { position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.bg-shapes::before, .bg-shapes::after { content: ""; position: absolute; }
.bg-shapes::before { top: 40px; right: -140px; width: 380px; height: 340px; background: var(--shape-mint);
                     border-radius: 62% 38% 46% 54% / 55% 45% 55% 45%; transform: rotate(-12deg); }
.bg-shapes::after { top: 640px; left: -110px; width: 220px; height: 220px; border-radius: 50%; background: var(--shape-peach); }
body:has(.report-head, .rp-level, .summary) .bg-shapes { display: none; }

/* ---------- kop ---------- */
.top { background: var(--head-bg); color: var(--head-text); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: var(--s3); min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.1875rem;
        letter-spacing: -.01em; text-decoration: none; color: var(--head-text); white-space: nowrap; margin-right: auto; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-shield { fill: var(--brand-bright); }
.logo-tick { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .logo-tick { stroke: #042f2e; } }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { color: var(--head-link); text-decoration: none; padding: 8px 14px; border-radius: 999px;
               white-space: nowrap; font-size: .9375rem; font-weight: 550; }
.nav-links a:hover { color: var(--head-text); background: var(--head-hover); }
.nav-links a[aria-current="page"] { color: var(--link); background: var(--brand-soft); font-weight: 650; }
.nav-action { display: flex; align-items: center; }

/* Smal scherm: logo en knop op de eerste regel, menu op de tweede (zonder JavaScript) */
@media (max-width: 600px) {
  .wrap { padding: 0 var(--s2); }
  .nav { flex-wrap: wrap; gap: 0 var(--s2); min-height: 0; padding-top: 12px; }
  .nav-action { order: 2; }
  .nav-links { order: 3; margin: 10px -8px 0; width: calc(100% + 16px); border-top: 1px solid var(--line);
               padding: 6px 0 8px; flex-wrap: nowrap; justify-content: flex-start; gap: 2px; }
  .nav-links a { padding: 6px 9px; font-size: .875rem; }
}
@media (max-width: 359px) { .nav-links { flex-wrap: wrap; justify-content: flex-start; } }

/* ---------- voet ---------- */
.foot { background: var(--card); border-top: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.foot-inner { display: flex; gap: var(--s3) var(--s5); justify-content: space-between; align-items: flex-start;
              flex-wrap: wrap; padding-top: var(--s5); padding-bottom: var(--s5); }
.foot-about { max-width: 52ch; }
.foot-about p { margin: 0; }
.foot-name { font-weight: 750; color: var(--text); font-size: .9375rem; margin-bottom: 4px !important; }
.foot-name::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 22px;
                     background: var(--brand-bright); box-shadow: 14px 0 0 var(--accent); vertical-align: 1px; }
.foot-about .foot-legal { margin-top: var(--s1); }
.foot-legal a { color: var(--muted); }
.foot-legal a:hover { color: var(--link); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px var(--s3); }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--link); text-decoration: underline; }

/* ---------- knoppen en formulieren ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--brand); color: var(--brand-text);
       border: 1px solid var(--brand); border-radius: var(--radius-md); padding: 11px 22px; min-height: 46px;
       font: inherit; font-weight: 650; line-height: 1.25; cursor: pointer; text-decoration: none; text-align: center;
       transition: background-color .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.small { padding: 6px 16px; min-height: 38px; font-size: .9375rem; border-radius: 10px; }
.btn.secondary { background: var(--card); color: var(--text); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--brand-soft); border-color: var(--brand-bright); color: var(--text); }
/* belangrijkste knop: koraal met donkere tekst (wit op koraal haalt het contrast niet) */
.btn.accent, .cta .btn { background: var(--accent); border-color: var(--accent); color: var(--accent-text);
                         box-shadow: 0 2px 0 rgba(59, 18, 6, .12); }
.btn.accent:hover, .cta .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); }
.btn.light { background: var(--card); color: var(--link); border-color: var(--line-strong); }
.btn.light:hover { background: var(--brand-soft); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--head-hover); border-color: var(--brand-bright); }
.btn.block { display: flex; width: 100%; padding: 13px 22px; }
.btn.btn-danger { background: var(--fail); border-color: var(--fail); color: #fff; }
.btn.btn-danger:hover { background: var(--fail); filter: brightness(.9); }
@media (prefers-color-scheme: dark) { .btn.btn-danger { background: #b42318; border-color: #b42318; } }
button.link { background: none; border: 0; color: var(--link); font: inherit; cursor: pointer; padding: 0;
              text-decoration: underline; text-underline-offset: .18em; }
button.danger { color: var(--fail); }
form.inline { display: inline; margin: 0; }

input[type=email], input[type=password], input[type=text], input[name=domain],
.stack input:not([type=checkbox]):not([type=hidden]) {
  width: 100%; padding: 10px 14px; min-height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font: inherit; background: var(--card); color: var(--text); transition: border-color .15s, box-shadow .15s; }
input[type=email]:hover, input[type=password]:hover, input[type=text]:hover, input[name=domain]:hover { border-color: var(--brand-bright); }
input::placeholder { color: var(--muted); opacity: .85; }
input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); border-radius: var(--radius-md); }
.error { color: var(--fail); font-weight: 500; }

.stack { display: flex; flex-direction: column; gap: var(--s2); }
.stack label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.stack label.check { flex-direction: row; font-weight: 400; gap: 10px; align-items: flex-start; }
.stack input[type=checkbox] { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--brand); }
.stack label.pw-toggle { font-size: .9375rem; color: var(--muted); margin-top: -8px; cursor: pointer; }
.stack label.pw-toggle[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.stack .field > label, .field-head label { font-weight: 600; }
.field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.small-link { font-size: .875rem; }
.hint { color: var(--muted); font-size: .875rem; }
.small-print { font-size: .875rem; margin: var(--s2) 0 0; }

/* meldingen bovenaan de pagina en in formulieren */
.flash, .alert { padding: 12px 16px; border-radius: var(--radius-md); margin: 0 0 var(--s3); background: var(--info-bg);
                 border: 1px solid var(--line); border-left: 4px solid var(--info); }
.flash.ok, .alert.ok { background: var(--ok-bg); border-left-color: var(--ok); }
.flash.warn { background: var(--warn-bg); border-left-color: var(--warn); }
.flash.fail, .alert.fail { background: var(--fail-bg); border-left-color: var(--fail); }
.alert { margin-bottom: var(--s2); }
.verify-bar form.inline { display: inline-block; margin: 6px 0 0 6px; vertical-align: middle; }

/* ---------- kaarten en algemene blokken ---------- */
.card, .features > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3);
                         box-shadow: var(--shadow); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card + .card { margin-top: var(--s2); }
.card.narrow { max-width: 440px; margin: 0 auto; }
.page-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px var(--s2);
             flex-wrap: wrap; margin-bottom: var(--s3); }
.page-head h1 { margin: 0; }
.page-head p { margin: 0; }
.back-link { margin: var(--s4) 0 0; font-size: .9375rem; }
.back-link.top-back { margin: 0 0 var(--s2); }
.back-link a { text-decoration: none; font-weight: 550; } .back-link a:hover { text-decoration: underline; }

.pill { display: inline-block; font-size: .8125rem; font-weight: 600; line-height: 1.5; padding: 1px 10px;
        border-radius: 999px; background: var(--info-bg); color: var(--info); white-space: nowrap; vertical-align: middle; }
.pill.ok { background: var(--ok-bg); color: var(--ok); } .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.fail { background: var(--fail-bg); color: var(--fail); }

/* risiconiveaus: Aandacht (geel), Let op! (oranje), NU FIXEN (rood) */
.badge { display: inline-block; font-size: .78rem; font-weight: 800; line-height: 1.5; padding: 2px 10px;
         border-radius: 999px; white-space: nowrap; letter-spacing: .03em; vertical-align: middle; }
.badge.r1 { background: var(--r1); color: var(--r1-text); }
.badge.r2 { background: var(--r2); color: var(--r2-text); }
.badge.r3 { background: var(--r3); color: var(--r3-text); }

/* ---------- startpagina ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--card); border: 1px solid var(--line);
        border-radius: 24px; text-align: center; padding: var(--s8) var(--s4) var(--s6); box-shadow: var(--shadow); }
/* vormen in de hero: ze liggen onder de tekst (z-index -1) en vangen geen klikken op */
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.hero-home { padding: 88px var(--s4) 72px;
             background:
               radial-gradient(circle at calc(100% - 120px) 70px, var(--shape-sun) 0 44px, transparent 45px),
               radial-gradient(circle at 92px calc(100% - 64px), transparent 0 13px, var(--shape-ring) 14px 17px, transparent 18px),
               radial-gradient(circle at calc(100% - 64px) calc(100% - 170px), var(--accent) 0 6px, transparent 7px),
               radial-gradient(circle at 150px 64px, var(--brand-bright) 0 5px, transparent 6px),
               linear-gradient(170deg, var(--card) 40%, var(--subtle));
             border-color: transparent; }
.hero-home::before { top: -150px; left: -130px; width: 400px; height: 360px; background: var(--shape-mint);
                     border-radius: 58% 42% 63% 37% / 46% 54% 46% 54%; transform: rotate(18deg); }
.hero-home::after { bottom: -160px; right: -120px; width: 420px; height: 340px; background: var(--shape-peach);
                    border-radius: 41% 59% 38% 62% / 57% 39% 61% 43%; transform: rotate(-14deg); }
.hero-mail::before { top: -120px; right: -110px; width: 300px; height: 260px; background: var(--shape-mint);
                     border-radius: 58% 42% 63% 37% / 46% 54% 46% 54%; }
.hero-mail::after { bottom: -90px; left: -70px; width: 200px; height: 200px; border-radius: 50%; background: var(--shape-sun); }
.hero h1 { font-size: 2.5rem; max-width: 22ch; margin: 0 auto var(--s2); letter-spacing: -.02em; }
.lead { color: var(--muted); font-size: 1.125rem; line-height: 1.6; max-width: 60ch; margin: 0 auto var(--s4); }
.checkform { display: flex; gap: var(--s1); max-width: 560px; margin: 0 auto; }
.checkform input { flex: 1; min-width: 0; }
.hero .checkform { background: var(--card); padding: 8px; border-radius: 18px; border: 1px solid var(--line-strong);
                   box-shadow: 0 8px 28px rgba(15, 118, 110, .12); }
.hero .checkform input { min-height: 52px; font-size: 1.0625rem; padding: 12px 16px; border-color: transparent; }
.hero .checkform input:hover { border-color: transparent; }
/* de focusrand staat om het hele zoekvak, niet als tweede rand om het invoerveld */
.hero .checkform:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus), 0 8px 28px rgba(15, 118, 110, .12); }
.hero .checkform input:focus-visible { outline: none; border-color: transparent; }
.hero .checkform .btn { min-height: 52px; padding: 12px 30px; font-size: 1.0625rem; }
.hero .error, .hero .busy-msg { margin: var(--s2) auto 0; max-width: 560px; }
.hero .busy-msg { color: var(--muted); }
.trust { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px var(--s2);
         margin: var(--s3) 0 0; padding: 0; color: var(--text); font-size: .9375rem; }
.trust li { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px 4px 10px; }
.trust li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 6px; }

.pillars > h2 { margin-top: var(--s8); text-align: center; font-size: 1.625rem; }
.pillar-grid { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.pillar { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s3);
          box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.pillar:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 42, 38, .05), 0 10px 24px rgba(16, 42, 38, .08); }
.pillar h3 { margin: var(--s2) 0 var(--s1); font-size: 1.125rem; }
.pillar p { margin: 0; color: var(--muted); font-size: .9375rem; }
.pillar-icon { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--mint);
               color: var(--brand); align-items: center; justify-content: center; }
.pillar:nth-child(3n+2) .pillar-icon { background: var(--peach); color: #c2410c; }
.pillar:nth-child(3n) .pillar-icon { background: var(--sun); color: #92400e; }
.pillar-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
                   stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) {
  .pillar-icon { color: #5eead4; }
  .pillar:nth-child(3n+2) .pillar-icon { color: #ffa085; }
  .pillar:nth-child(3n) .pillar-icon { color: #fcd34d; }
  .pillar:hover { box-shadow: none; }
}

.invite { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--s6); background: var(--mint);
          border-radius: var(--radius); padding: var(--s4) var(--s5); display: flex; gap: var(--s2) var(--s4);
          align-items: center; justify-content: space-between; flex-wrap: wrap; }
.invite::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -60px; top: -70px;
                 width: 220px; height: 220px; border-radius: 50%; background: var(--shape-sun); opacity: .9; }
.invite-text { flex: 1; min-width: 260px; }
/* illustratie: mail die in de prullenbak valt */
.invite-art { flex: none; width: 118px; height: 110px; overflow: visible; color: var(--brand-bright); }
.invite-art .ia-path { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .7; }
.invite-art .ia-bin-body { fill: var(--card); stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.invite-art .ia-bin-ribs { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.invite-art .ia-lid { transform: rotate(24deg); transform-origin: 112px 66px; }
.invite-art .ia-lid rect { fill: currentColor; }
.invite-art .ia-lid path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.invite-art .ia-env { fill: var(--accent); stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
.invite-art .ia-flap { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.invite-art .ia-speed { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.invite-art .ia-mail { animation: ia-bob 2.8s ease-in-out infinite; }
@keyframes ia-bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(3px, 4px); } }
.invite h2 { margin: 0 0 4px; font-size: 1.25rem; }
.invite p { margin: 0; color: var(--text); }
.invite .btn.secondary { border-color: transparent; }
@media (prefers-color-scheme: dark) { .invite::after { background: rgba(250, 204, 21, .06); } }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.features > div { border-top: 4px solid var(--brand-bright); }
.features > div:nth-child(3n+2) { border-top-color: var(--accent); }
.features > div:nth-child(3n) { border-top-color: #facc15; }
.features h3 { margin-bottom: var(--s1); }
.features p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ---------- rapport: kop met score ---------- */
.report-head { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; background: var(--card);
               border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); margin-bottom: var(--s2);
               box-shadow: var(--shadow); }
.report-head h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.report-head p { margin: 0; }
.report-head .rp-pdf { margin-left: auto; }
.score { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: baseline; justify-content: center;
         gap: 1px; padding-top: 24px; border: 5px solid var(--line); flex: none; background: var(--card); }
.score .num { font-size: 1.75rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score .of { font-size: .75rem; color: var(--muted); }
.score.ok { border-color: var(--ok); } .score.warn { border-color: var(--r2); } .score.fail { border-color: var(--r3); }
.rp-actions { display: flex; gap: var(--s1); flex-wrap: wrap; align-items: center; }
.rp-actions form { margin: 0; }

/* rapport: samenvatting */
.summary { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--ok);
           border-radius: var(--radius); padding: var(--s3); margin: 0 0 var(--s4); box-shadow: var(--shadow); }
.summary.r1 { border-top-color: var(--r1); } .summary.r2 { border-top-color: var(--r2); } .summary.r3 { border-top-color: var(--r3); }
.summary h2 { margin: 0 0 var(--s2); font-size: 1.25rem; }
.summary > p { max-width: var(--measure); }
.summary > p:last-child { margin-bottom: 0; }
.rp-overview h2 { font-size: 1.3125rem; line-height: 1.4; max-width: var(--measure); margin-bottom: var(--s3); }
.rp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s1); }
.rp-card { border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--radius-md); background: var(--card); }
.rp-card a { color: inherit; text-decoration: none; display: block; padding: 12px 14px; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.rp-card a:hover { background: var(--subtle); }
.rp-card a:hover .rp-card-state { text-decoration: underline; }
.rp-card:not(:has(a)) { padding: 12px 14px; }
.rp-card-name { display: block; font-weight: 650; }
.rp-card-state { display: block; font-size: .875rem; color: var(--ok); font-weight: 600; margin-top: 2px; }
.rp-card.r1 { border-left-color: var(--r1); } .rp-card.r2 { border-left-color: var(--r2); } .rp-card.r3 { border-left-color: var(--r3); }
.rp-card.r1 .rp-card-state { color: var(--r1-text); } .rp-card.r2 .rp-card-state { color: var(--r2-text); }
.rp-card.r3 .rp-card-state { color: var(--r3-strong); }
.rp-card.info { border-left-color: var(--line-strong); } .rp-card.info .rp-card-state { color: var(--muted); }
.rp-copyall { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line);
              display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
.rp-copyall p { margin: 0; flex: 1; min-width: 220px; }
@media (prefers-color-scheme: dark) {
  .rp-card.r1 .rp-card-state { color: var(--r1); } .rp-card.r2 .rp-card-state { color: var(--r2); }
}

/* uitnodiging om een account te maken */
.cta { background: var(--mint); border: 1px solid transparent; border-radius: var(--radius); padding: var(--s3);
       margin: 0 0 var(--s4); display: flex; gap: var(--s2) var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta p { margin: 0; flex: 1; min-width: 240px; max-width: var(--measure); }

/* rapport: meldingen per risiconiveau */
.rp-level { margin-top: var(--s4); }
.rp-level > h2 { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 1rem; font-weight: 500;
                 margin: 0 0 var(--s2); }
.rp-meaning { color: var(--muted); font-size: .9375rem; }
.res { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: var(--radius-md);
       padding: var(--s2) var(--s3); margin-bottom: 12px; }
.res.ok { border-left-color: var(--ok); } .res.warn { border-left-color: var(--warn); } .res.fail { border-left-color: var(--fail); }
.res.r1 { border-left-color: var(--r1); } .res.r2 { border-left-color: var(--r2); } .res.r3 { border-left-color: var(--r3); }
.res p { margin: 8px 0 0; max-width: var(--measure); }
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h3 { margin: 0; }
.rp-issue { padding: var(--s3); margin-bottom: var(--s2); }
.rp-group { color: var(--muted); font-size: .875rem; }
.rp-title { font-size: 1.1875rem; font-weight: 650; line-height: 1.35; margin: 12px 0 0; max-width: var(--measure); }
.rp-layer h4 { font-size: .8125rem; margin: var(--s2) 0 0; color: var(--muted); font-weight: 650;
               text-transform: uppercase; letter-spacing: .05em; }
.rp-layer p { margin: 4px 0 0; }
.res p.advice, .rp-tech-body p.advice { max-width: none; }
.advice { background: var(--subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
.why, .fix, .record { border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 12px; max-width: none; }
.why { background: var(--warn-bg); }
.res.fail .why { background: var(--fail-bg); }
.res.r1 .why { background: var(--r1-bg); } .res.r2 .why { background: var(--r2-bg); } .res.r3 .why { background: var(--r3-bg); }
.why p, .fix p { margin: 4px 0 0; }
.fix { border: 1px solid var(--line); }
.fix .links { display: flex; gap: 8px var(--s2); flex-wrap: wrap; }
.record { background: var(--subtle); border: 1px solid var(--line); }
.record dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 8px 0 0; }
.record dt { color: var(--muted); } .record dd { margin: 0; min-width: 0; }
code.copy { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; user-select: all; }
pre.copy { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0;
           font-size: .8125rem; white-space: pre-wrap; word-break: break-all; user-select: all; }
.listings { margin: 8px 0 0; padding-left: 18px; } .listings li { margin: 4px 0; }

details { margin-top: 8px; font-size: .9375rem; }
summary { cursor: pointer; }
details > summary:hover { text-decoration: underline; text-underline-offset: .18em; }
details.rp-tech { margin-top: var(--s2); border-top: 1px solid var(--line); padding-top: 12px; }
details.rp-tech > summary { color: var(--link); font-weight: 600; }
.rp-tech-body { margin-top: 12px; }
.rp-tech-body > p { margin: 8px 0 0; }
.rp-copyline { margin: 0 0 12px !important; }
pre.rp-src { white-space: pre-wrap; word-break: break-word; font-size: .8125rem; background: var(--subtle);
             border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; }
.rp-offscreen { position: fixed; top: 0; left: -9999px; opacity: 0; }

.res form.mute { margin-top: 12px; text-align: right; font-size: .875rem; }
.res form.mute button.link { color: var(--muted); text-decoration: none; }
.res form.mute button.link:hover { color: var(--link); text-decoration: underline; }

/* ingeklapte lijsten: wat in orde is en wat niet gecontroleerd is */
details.rp-fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 0; margin: var(--s2) 0 0; }
details.rp-fold > summary { font-weight: 600; padding: var(--s2) var(--s3); }
details.rp-fold[open] > summary { border-bottom: 1px solid var(--line); }
details.rp-fold > p { margin: 12px var(--s3) 0; }
details.rp-fold ul { list-style: none; margin: 4px 0 0; padding: 0 var(--s3) 12px; }
details.rp-fold li { padding: 10px 0 10px 28px; position: relative; border-top: 1px solid var(--line); }
details.rp-fold li:first-child { border-top: 0; }
.rp-ok li::before { content: "✓"; position: absolute; left: 4px; top: 10px; color: var(--ok); font-weight: 800; }
.rp-info li::before { content: "–"; position: absolute; left: 6px; top: 10px; color: var(--muted); }
details.rp-mini { margin-top: 4px; font-size: .875rem; }
details.rp-mini > summary { color: var(--muted); }
details.rp-mini p { margin: 4px 0 0; color: var(--muted); }

/* ---------- dashboard en domeinpagina ---------- */
.domain-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 var(--s3); }
.domain-row { display: flex; gap: var(--s2); align-items: center; background: var(--card); border: 1px solid var(--line);
              border-radius: var(--radius); padding: var(--s2) var(--s3); text-decoration: none; color: var(--text);
              box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.domain-row:hover { border-color: var(--brand-bright); text-decoration: none; transform: translateY(-1px); }
.domain-row:hover .domain-name { text-decoration: underline; text-underline-offset: .18em; }
.domain-row .grow { display: flex; flex-direction: column; gap: 2px; }
.domain-name { font-size: 1.0625rem; overflow-wrap: anywhere; }
.domain-row .score { width: 60px; height: 60px; padding-top: 0; align-items: center; border-width: 4px; }
.domain-row .score .num { font-size: 1.125rem; } .domain-row .score .of { display: none; }
.chev { color: var(--link); font-size: 1.5rem; line-height: 1; margin-left: 4px; }
.empty-state { margin-bottom: var(--s2); }
.empty-state h2 { margin: 0 0 4px; font-size: 1.125rem; }
.add-domain h2 { margin: 0 0 var(--s2); font-size: 1.125rem; }
.add-domain .checkform { margin: 0; max-width: 560px; }
.add-domain .busy-msg { margin: 12px 0 0; color: var(--muted); }
.history { margin: 0 0 var(--s2); }
.history h2 { margin: 0 0 var(--s2); font-size: 1.125rem; }
.spark { width: 100%; height: 80px; display: block; }
.spark rect { fill: var(--info); } .spark rect.ok { fill: var(--ok); } .spark rect.warn { fill: var(--r2); } .spark rect.fail { fill: var(--r3); }
.alerts { padding-left: 18px; margin: 0; } .alerts li { margin: 4px 0; }
section.card { margin-top: var(--s2); }
section.card > h2 { margin: 0 0 var(--s1); font-size: 1.125rem; }
.muted-list { list-style: none; margin: 8px 0 0; padding: 0; }
.muted-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap;
                 padding: 12px 0; border-top: 1px solid var(--line); }
.muted-list li:first-child { border-top: 0; }
.muted-list li > span { min-width: 0; overflow-wrap: anywhere; }
.muted-list form { margin: 0; flex: none; }
.remove-domain { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: .9375rem; }

/* ---------- aflevertest ---------- */
.mailtest-start { margin: 0; }
.mailtest-start .btn { min-height: 52px; padding: 12px 28px; font-size: 1.0625rem; }
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
         max-width: 720px; margin: var(--s4) auto 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line);
         color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.steps li { counter-increment: step; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.steps li::before { content: counter(step); display: inline-flex; width: 28px; height: 28px; border-radius: 50%;
                    align-items: center; justify-content: center; background: var(--mint); color: var(--link);
                    font-size: .9375rem; font-weight: 750; flex: none; width: 36px; height: 36px; }
.steps li:nth-child(2)::before { background: var(--peach); color: #c2410c; }
.steps li:nth-child(3)::before { background: var(--sun); color: #92400e; }
@media (prefers-color-scheme: dark) {
  .steps li:nth-child(2)::before { color: #ffa085; } .steps li:nth-child(3)::before { color: #fcd34d; }
}
.mailtest-addr { margin-bottom: var(--s2); }
.mailtest-addr p { margin: 0 0 12px; }
.mailtest-addr p:last-child { margin: 0; }
.mailtest-addr .addr { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 1.125rem; }
.mailtest-addr .addr code { font-size: 1rem; padding: 6px 10px; }
.waiting { display: flex; gap: 12px; align-items: center; margin: var(--s3) 0; background: var(--card);
           border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s2) var(--s3); }
.spinner { width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--brand-bright); border-radius: 50%;
           animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
#mailtest > .summary { margin-bottom: var(--s3); }
.oklist ul { list-style: none; margin: 0; padding: 0; }
.oklist li { padding: 8px 0; border-top: 1px solid var(--line); }
.oklist li:first-child { border-top: 0; }
.oklist .tick { color: var(--ok); font-weight: 800; }
.card.oklist { margin: var(--s2) 0; padding: 8px var(--s3); }
.causes { margin: 4px 0 0; padding-left: 20px; }
details.tech { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--s2) var(--s3); margin: var(--s2) 0; }
details.tech summary { font-weight: 600; }
details.tech[open] summary { margin-bottom: 12px; }
details.tech pre.copy { margin-bottom: 12px; }
table.symbols { width: 100%; border-collapse: collapse; font-size: .8125rem; margin-top: 8px; display: block; overflow-x: auto; }
table.symbols th, table.symbols td { text-align: left; padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
table.symbols td:last-child { word-break: break-all; }
.cta-line { margin: var(--s3) 0; }

/* ---------- inloggen, account maken, wachtwoord en mijn account ---------- */
.auth { max-width: 440px; margin: 0 auto; }
.auth-card { padding: var(--s5) var(--s4); border-top: 4px solid var(--brand-bright); }
.auth-card h1 { font-size: 1.625rem; }
.auth-card > p { margin: 0 0 var(--s2); }
.auth-intro { margin: 0 0 var(--s3) !important; }
.auth-alt { text-align: center; margin: var(--s3) 0 0; color: var(--muted); }
.auth-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             font-size: 1.5rem; font-weight: 800; margin-bottom: var(--s2); }
.auth-icon.ok { background: var(--ok-bg); color: var(--ok); }
.auth-icon.warn { background: var(--warn-bg); color: var(--warn); }
.auth-card .stack .btn.block { margin-top: 4px; }
/* ---------- privacyverklaring ---------- */
.legal-page { max-width: 720px; margin: 0 auto; }
.legal-page .lead-left { color: var(--muted); font-size: 1.0625rem; margin: 0 0 var(--s3); }
.legal-page .card { margin: 0 0 var(--s2); }
.legal-page .card h2 { margin: 0 0 var(--s1); font-size: 1.1875rem; }
.legal-page .card p { margin: 0 0 12px; }
.legal-page .card > :last-child { margin-bottom: 0; }
.legal-page ul { margin: 0 0 12px; padding-left: 1.25em; }
.legal-page li + li { margin-top: 6px; }
.legal-page code { font-family: var(--mono); font-size: .875em; background: var(--subtle); border: 1px solid var(--line);
                   border-radius: 6px; padding: 1px 5px; }
.pv-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s2); margin: var(--s2) 0 0; }
.pv-facts dt { font-weight: 650; }
.pv-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pv-date { margin: var(--s3) 0 0; }
@media (max-width: 560px) {
  .legal-page .card { padding: var(--s2); }
  .pv-facts { grid-template-columns: 1fr; gap: 0; }
  .pv-facts dd + dt { margin-top: 8px; }
}

.account { max-width: 640px; margin: 0 auto; }
.account > .muted { margin: 0 0 var(--s3); }
.account .card { margin: 0 0 var(--s2); padding: var(--s3); }
.account .card h2 { margin: 0 0 4px; font-size: 1.125rem; }
.account .card > p.muted { margin: 0 0 var(--s2); }
.account .danger-zone { border-color: var(--fail); }
.account .danger-zone h2 { color: var(--fail); }

/* ---------- 404 ---------- */
.notfound { max-width: 560px; margin: var(--s4) auto 0; padding: var(--s5) var(--s4); text-align: center; }
.notfound p.muted { margin: 0 auto var(--s3); max-width: 46ch; }
.notfound-actions { display: flex; gap: var(--s1); justify-content: center; flex-wrap: wrap; }

/* ---------- kleine illustraties (zelfde stijl als .invite-art) ---------- */
.ill { flex: none; display: block; overflow: visible; color: var(--brand-bright); }
.ill .i-path { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .7; }
.ill .i-card { fill: var(--card); stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.ill .i-soft { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.ill .i-faint { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; opacity: .3; }
.ill .i-acc { fill: var(--accent); stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
.ill .i-ink { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill .i-ink.faint { opacity: .35; }
.ill .i-speed { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.ill .i-box { fill: var(--card); stroke: var(--text); stroke-width: 2.5; }
.ill .i-lens { fill: var(--card); stroke: var(--text); stroke-width: 2.5; }
.ill .i-q { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.ill .i-dot { fill: currentColor; }
.ill .i-dot-ink { fill: var(--text); }
.ill .i-tip { fill: var(--card); stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
.ill .i-nib { fill: var(--text); }
.ill .i-post { fill: currentColor; }
.ill .i-hover { animation: ill-hover 3.2s ease-in-out infinite; }
.ill .i-fly { animation: ill-fly 2.4s ease-in-out infinite; }
@keyframes ill-hover { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-4px, -3px); } 66% { transform: translate(3px, -1px); } }
@keyframes ill-fly { 0%, 100% { transform: translate(-5px, 3px); } 50% { transform: translate(6px, -3px); } }
/* 404: vergrootglas boven een leeg blad */
.ill-404 { width: 124px; height: 108px; margin: 0 auto var(--s2); }
/* lege lijst: klembord met lege vakjes en een pen */
.empty-state { display: flex; align-items: center; gap: var(--s3); }
.empty-text { flex: 1; min-width: 0; }
.ill-list { width: 92px; height: 96px; }
/* wachten op de mail: envelop vliegt naar de brievenbus */
.ill-wait { width: 150px; height: 63px; margin-right: var(--s1); }
.waiting-text { flex: 1 1 200px; min-width: 0; }
/* rapport: stempel "goedgekeurd" */
.ill-stamp { width: 96px; height: 96px; margin-left: auto; color: var(--ok); opacity: .92;
             animation: ill-stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.report-head .ill-stamp + .rp-actions .rp-pdf { margin-left: 0; }
.ill-stamp .i-ring { fill: none; stroke: currentColor; stroke-width: 4; }
.ill-stamp .i-ring.thin { stroke-width: 2; }
.ill-stamp .i-stamp-text { fill: currentColor; font-size: 13.5px; font-weight: 800; letter-spacing: .03em; }
.ill-stamp .i-stamp-text.small { font-size: 12px; letter-spacing: .35em; }
.ill-stamp .i-stamp-dot { fill: currentColor; }
.ill-stamp .i-check { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes ill-stamp { from { transform: scale(1.35) rotate(8deg); opacity: 0; } }
/* e-mailadres bevestigd: envelop met groen vinkje */
.ill-mailok { width: 104px; height: 82px; margin-bottom: var(--s2); }
.ill-mailok .i-badge { fill: var(--ok); stroke: var(--card); stroke-width: 4; }
.ill-mailok .i-badge-check { fill: none; stroke: var(--card); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ill-mailok .i-pop { transform-origin: 82px 64px; animation: ill-pop .5s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ill-pop { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .ill .i-hover, .ill .i-fly, .ill-stamp, .ill-mailok .i-pop { animation: none; }
}
@media (max-width: 560px) {
  .ill-404 { width: 96px; height: 84px; }
  .empty-state { gap: var(--s2); }
  .ill-list { width: 60px; height: 63px; }
  .waiting { flex-wrap: wrap; }
  .ill-wait { width: 100%; height: 72px; margin: 0 0 4px; flex-basis: 100%; }
  .ill-stamp { width: 60px; height: 60px; }
  .ill-mailok { width: 84px; height: 66px; }
}

/* ---------- smalle schermen ---------- */
@media (max-width: 900px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  main.wrap { padding-top: var(--s3); padding-bottom: var(--s6); }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  .hero { padding: var(--s5) var(--s2) var(--s4); border-radius: 20px; }
  .hero-home { padding: 56px var(--s2) var(--s5); }
  .hero-home::before { width: 260px; height: 230px; top: -120px; left: -110px; }
  .hero-home::after { width: 260px; height: 220px; bottom: -120px; right: -110px; }
  .hero-mail::before { width: 200px; height: 180px; top: -100px; right: -90px; }
  .hero-mail::after { display: none; }
  .hero h1 { font-size: 1.75rem; }
  .hero .checkform { padding: 6px; border-radius: 16px; }
  .hero-home { background: radial-gradient(circle at calc(100% - 36px) 36px, var(--shape-sun) 0 30px, transparent 31px),
                            linear-gradient(170deg, var(--card) 40%, var(--subtle)); }
  .bg-shapes::before { width: 220px; height: 200px; right: -120px; top: 60px; }
  .bg-shapes::after { display: none; }
  .lead { font-size: 1.0625rem; margin-bottom: var(--s3); }
  .checkform { flex-direction: column; }
  .checkform .btn { width: 100%; }
  .trust { gap: 4px var(--s2); font-size: .875rem; }
  .steps { grid-template-columns: 1fr; max-width: 320px; text-align: left; }
  .steps li { flex-direction: row; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-grid { gap: var(--s2); margin-top: var(--s3); }
  .pillars > h2 { margin-top: var(--s6); font-size: 1.375rem; }
  .pillar { padding: var(--s3) var(--s2); display: grid; grid-template-columns: 48px 1fr; column-gap: var(--s2); }
  .pillar-icon { width: 48px; height: 48px; }
  .pillar-icon { grid-row: span 2; }
  .pillar h3 { margin: 8px 0 4px; }
  .invite { padding: var(--s3) var(--s3); }
  .invite .btn { width: 100%; }
  .invite-art { width: 86px; height: 80px; }
  .card, .features > div { padding: var(--s2); }
  .report-head { padding: var(--s2); gap: var(--s2); }
  .report-head .score { width: 72px; height: 72px; padding-top: 19px; border-width: 4px; }
  .report-head .score .num { font-size: 1.5rem; }
  .report-head .rp-actions { width: 100%; }
  .report-head .rp-actions > * { flex: 1 1 auto; }
  .report-head .rp-actions .btn, .report-head .rp-actions form .btn { width: 100%; }
  .report-head .rp-pdf { margin-left: 0; }
  .summary { padding: var(--s2); }
  .rp-overview h2 { font-size: 1.1875rem; }
  .rp-cards { grid-template-columns: 1fr 1fr; }
  .rp-copyall .btn { width: 100%; }
  .cta { padding: var(--s2); }
  .cta .btn { width: 100%; }
  .res { padding: var(--s2); }
  .rp-issue { padding: var(--s2); }
  .rp-title { font-size: 1.125rem; }
  .record dl { grid-template-columns: 1fr; gap: 2px; } .record dd { margin-bottom: 8px; }
  details.rp-fold > summary { padding: 12px var(--s2); }
  details.rp-fold > p { margin: 12px var(--s2) 0; }
  details.rp-fold ul { padding: 0 var(--s2) 8px; }
  .domain-row { padding: 12px var(--s2); gap: 12px; }
  .domain-row .score { width: 52px; height: 52px; }
  .chev { display: none; }
  .muted-list li { align-items: flex-start; }
  .auth-card { padding: var(--s4) var(--s3); }
  .auth-card h1 { font-size: 1.4rem; }
  .account .card { padding: var(--s2); }
  .account .btn { width: 100%; }
  .notfound { padding: var(--s4) var(--s2); }
  .notfound-actions .btn { width: 100%; }
  .foot-inner { padding-top: var(--s3); padding-bottom: var(--s3); }
}

/* ---------- minder beweging en afdrukken ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .top, .foot, .skip, .rp-pdf, .rp-actions, .rp-copyall, .mute, .cta, .remove-domain { display: none; }
  body { background: #fff; }
  .card, .res, .summary, .report-head { border-color: #ccc; }
}