:root {
  color-scheme: light;
  --ink: #080b0f;
  --graphite: #141920;
  --muted: #66707c;
  --line: #d8dce1;
  --soft-line: #e9ebee;
  --surface: #f5f6f7;
  --white: #ffffff;
  --lime: #b7f52a;
  --blue: #175cff;
  --coral: #ff4d3d;
  --amber: #ffb627;
  --good: #198754;
  --max: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 10px;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--white);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  background: var(--lime);
  pointer-events: none;
}

button,
input,
textarea { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { color: inherit; }

a { color: inherit; }

p { margin: 0; }

h1,
h2,
h3 { margin: 0; }

[hidden] { display: none !important; }

body[data-surface="marketing"] [data-surface-show="app"],
body[data-surface="app"] [data-surface-show="marketing"] { display: none !important; }

.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;
}

.skipLink {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--white);
  transform: translateY(-150%);
}

.skipLink:focus { transform: translateY(0); }

.siteHeader {
  width: min(100%, var(--max));
  min-height: 82px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  text-decoration: none;
}

.brandMark {
  position: relative;
  width: 31px;
  height: 31px;
  display: inline-block;
  background: var(--ink);
}

.brandMark i {
  position: absolute;
  top: 7px;
  width: 4px;
  height: 18px;
  background: var(--lime);
  transform: skewX(-25deg);
}

.brandMark i:first-child { left: 8px; }
.brandMark i:last-child { right: 8px; }

.brand > span:last-child { display: grid; }

.brand strong {
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.03em;
}

.brand small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mainNav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 46px);
}

.mainNav a {
  position: relative;
  padding: 10px 0;
  color: #303741;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mainNav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.mainNav a:hover::after,
.mainNav a:focus-visible::after { transform: scaleX(1); }

.balance {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}

.balance > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px #eafbc5;
}

.headerCta {
  min-height: 40px;
  padding: 9px 15px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 780;
  text-decoration: none;
  transition: transform 150ms ease, background-color 150ms ease;
}

.headerCta:hover,
.headerCta:focus-visible { background: var(--blue); transform: translateY(-1px); }

.checkoutNotice {
  position: sticky;
  top: 0;
  z-index: 90;
  padding: 13px var(--gutter);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
}

.checkoutNotice.success { background: #e9f8ee; color: #125c34; }
.checkoutNotice.cancelled { background: #fff5df; color: #704a00; }

.hero {
  position: relative;
  width: min(100%, var(--max));
  min-height: 710px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 118px) var(--gutter) clamp(70px, 8vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(480px, 1.16fr);
  align-items: center;
  gap: clamp(44px, 6vw, 100px);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 14%;
  right: -11%;
  width: 48%;
  height: 3px;
  background: var(--lime);
  transform: rotate(-42deg);
  transform-origin: right;
}

.heroCopy { min-width: 0; }

.hero h1 {
  max-width: 720px;
  font-size: clamp(54px, 5.8vw, 92px);
  line-height: .93;
  letter-spacing: -.066em;
  font-weight: 810;
}

.heroLead {
  max-width: 610px;
  margin-top: 28px;
  color: #4b5561;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.48;
  letter-spacing: -.015em;
}

.appEyebrow {
  margin-bottom: 18px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .17em;
}

.marketingActions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.marketingActions .primary,
.marketingActions .secondary { min-height: 52px; }

.marketingActions small {
  flex-basis: 100%;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.scannerShell {
  max-width: 630px;
  margin-top: 42px;
}

body[data-surface="app"] main {
  background:
    radial-gradient(circle at 82% 8%, rgba(183, 245, 42, .19), transparent 24rem),
    linear-gradient(180deg, #fbfcfd 0, #ffffff 40rem);
}

body[data-surface="app"] .hero {
  min-height: 0;
  padding-top: clamp(54px, 7vw, 90px);
  padding-bottom: clamp(54px, 7vw, 90px);
  grid-template-columns: minmax(0, 1fr);
}

body[data-surface="app"] .heroCopy { width: min(100%, 980px); margin: 0 auto; }
body[data-surface="app"] .hero h1 { max-width: 820px; font-size: clamp(52px, 6vw, 78px); }
body[data-surface="app"] .heroLead { max-width: 720px; }
body[data-surface="app"] .scannerShell { max-width: 900px; }
body[data-surface="app"] .trustLine { margin-top: 24px; }
body[data-surface="app"] .reportWorkspace { padding-top: 36px; }
body[data-surface="app"] .pricing { background: var(--white); }

.modeTabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.modeTab {
  min-height: 38px;
  padding: 7px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.modeTab span {
  margin-left: 5px;
  color: #9299a2;
  font-size: 10px;
  text-transform: uppercase;
}

.modeTab.active {
  border-color: var(--blue);
  color: var(--ink);
}

#scanForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: 1px solid #aeb4bc;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 12px 38px rgba(8, 11, 15, .08);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

#scanForm:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(23, 92, 255, .12), 0 12px 38px rgba(8, 11, 15, .08);
}

.urlField {
  min-width: 0;
  display: flex;
  align-items: center;
}

.urlIcon {
  flex: 0 0 auto;
  margin-left: 17px;
  color: var(--blue);
  font-size: 18px;
  font-weight: 800;
}

.urlField input {
  width: 100%;
  min-width: 0;
  height: 64px;
  padding: 0 16px 0 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}

.urlField input::placeholder { color: #9097a1; }

.primary,
.secondary,
.textButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  border-radius: 7px;
  font-weight: 780;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.primary {
  padding: 0 20px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
}

.primary:hover:not(:disabled) { background: #084be2; border-color: #084be2; transform: translateY(-1px); }

.secondary {
  padding: 0 16px;
  border: 1px solid #aeb4bc;
  background: var(--white);
  color: var(--ink);
}

.secondary:hover:not(:disabled) { border-color: var(--ink); transform: translateY(-1px); }

.textButton {
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--blue);
}

.primary:disabled,
.secondary:disabled { cursor: not-allowed; opacity: .48; transform: none; }

.scanCta {
  min-width: 154px;
  height: 52px;
  margin: 6px;
  border-radius: 6px;
}

.consent {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #555f6a;
  font-size: 11px;
  line-height: 1.45;
}

.consent input {
  width: 15px;
  height: 15px;
  margin: 1px 0 0;
  accent-color: var(--blue);
}

.authorization { color: #313942; }

.optionalCheck {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

.optionalCheck summary {
  width: fit-content;
  padding: 4px 0;
  font-weight: 700;
  cursor: pointer;
}

.sourcePicker {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #aeb4bc;
  border-radius: var(--radius);
  background: var(--white);
}

.sourcePicker strong { display: block; font-size: 15px; }
.sourcePicker p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.fileButton { flex: 0 0 auto; }
.fileButton input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.sourceSelection {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: 12px;
}

.error {
  min-height: 18px;
  margin-top: 10px;
  color: #ba271d;
  font-size: 12px;
  font-weight: 720;
}

.trustLine {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: #4e5863;
  font-size: 11px;
  font-weight: 720;
}

.trustLine span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 8px;
  display: inline-block;
  border-radius: 50%;
  background: var(--good);
  vertical-align: 1px;
}

.filmFrame {
  position: relative;
  min-width: 0;
  border: 1px solid #050709;
  background: var(--ink);
  box-shadow: 0 28px 80px rgba(8, 11, 15, .22);
}

.filmFrame::after {
  content: "";
  position: absolute;
  top: -12%;
  right: 8%;
  width: 3px;
  height: 124%;
  z-index: 3;
  background: var(--lime);
  transform: rotate(41deg);
  pointer-events: none;
  opacity: .94;
}

.filmTop {
  min-height: 42px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid #2a3139;
  color: #9ca5b0;
  font-size: 9px;
  letter-spacing: .12em;
}

.filmTop > span { display: flex; gap: 5px; }
.filmTop i { width: 7px; height: 7px; border-radius: 50%; background: #4a525c; }
.filmTop i:first-child { background: var(--coral); }
.filmTop i:nth-child(2) { background: var(--amber); }
.filmTop i:last-child { background: var(--lime); }
.filmTop b { justify-self: end; font-size: 9px; }

.filmFrame video {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
  background: var(--ink);
  object-fit: cover;
}

.filmCaption {
  min-height: 44px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  color: #9ca5b0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.filmCaption span { padding-left: 9px; border-left: 1px solid #37404a; }

.sectionNumber {
  margin-bottom: 20px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.riskSection,
.proofSection,
.workflow,
.reportWorkspace,
.coverageSection,
.trustSection,
.pricing,
.standards {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: clamp(76px, 9vw, 132px) var(--gutter);
  border-top: 1px solid var(--line);
}

.sectionIntro {
  display: grid;
  grid-template-columns: .72fr 1.18fr .8fr;
  gap: 50px;
  align-items: start;
}

.sectionIntro .sectionNumber { margin-top: 9px; }

.sectionIntro h2,
.workflowHeading h2,
.reportLead h2,
.coverageHeading h2,
.trustStatement h2,
.pricingHeading h2,
.standards h2 {
  font-size: clamp(42px, 5vw, 74px);
  line-height: .98;
  letter-spacing: -.058em;
  font-weight: 810;
}

.sectionIntro > p:last-child,
.reportLead > p:last-child,
.trustStatement > p:last-child,
.pricingHeading > p:last-child {
  color: #59636e;
  font-size: 16px;
  line-height: 1.65;
}

.riskRails { margin-top: 76px; border-top: 1px solid var(--ink); }

.riskRails article {
  min-height: 118px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
}

.riskCode {
  color: #929aa4;
  font-size: 11px;
  font-weight: 800;
}

.riskRails h3 { font-size: 22px; letter-spacing: -.025em; }
.riskRails p { max-width: 760px; margin-top: 7px; color: #5c6671; line-height: 1.5; }

.riskRails article > strong {
  min-width: 78px;
  padding: 8px 10px;
  border: 1px solid currentColor;
  border-radius: 100px;
  color: var(--coral);
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.riskRails article:nth-child(2) > strong { color: #c36e00; }
.riskRails article:nth-child(3) > strong { color: #606975; }

.riskFootnote {
  margin: 28px 0 0 112px;
  color: #5c6671;
  font-size: 13px;
  line-height: 1.55;
}

.riskFootnote b { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Waarschuwingsstrook direct onder de hero. Doel: in een oogopslag duidelijk
   maken wat het kost om dit over te slaan, met per cijfer de bron erbij.
   --------------------------------------------------------------------------- */
.alarmStrip {
  width: 100%;
  padding: clamp(46px, 5.5vw, 74px) var(--gutter);
  background: var(--ink);
  color: var(--white);
}

.alarmLead {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.alarmLead h2 {
  max-width: 20ch;
  font-size: clamp(30px, 4.2vw, 54px);
  font-weight: 820;
  letter-spacing: -.05em;
  line-height: 1.02;
}

.alarmLead > p {
  margin-top: 14px;
  color: #b3bcc6;
  font-size: 15px;
}

.alarmFacts {
  width: min(100%, var(--max));
  margin: 40px auto 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: #2b3138;
  border: 1px solid #2b3138;
}

.alarmFacts li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px 26px 24px;
  background: var(--ink);
}

.alarmFacts b {
  color: var(--lime);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 830;
  letter-spacing: -.05em;
  line-height: 1;
}

.alarmFacts span {
  color: #c3cbd4;
  font-size: 14px;
  line-height: 1.55;
}

.alarmFacts a {
  justify-self: start;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
}

.alarmClose {
  width: min(100%, var(--max));
  margin: 26px auto 0;
  color: #b3bcc6;
  font-size: 14px;
}

.alarmClose a { color: var(--lime); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Bewijssectie: vier gedocumenteerde gevallen met bron.
   --------------------------------------------------------------------------- */
.proofCases {
  margin-top: 66px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.proofCase {
  padding: 34px 32px 30px;
  background: var(--white);
}

.proofMeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.proofTag {
  padding: 5px 11px;
  border: 1px solid var(--coral);
  border-radius: 100px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.proofMeta time {
  color: #929aa4;
  font-size: 11px;
  font-weight: 700;
}

.proofCase h3 {
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.proofCase p {
  margin-top: 12px;
  color: #5c6671;
  font-size: 14px;
  line-height: 1.6;
}

.proofLesson {
  padding-top: 14px;
  border-top: 1px solid var(--soft-line);
}

.proofLesson b { color: var(--ink); }

.proofSource {
  font-size: 12px;
}

.proofSource a { color: #5c6671; text-decoration: underline; }
.proofSource a:hover { color: var(--ink); }

.proofNumbers {
  margin-top: 1px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 0;
}

.proofNumbers > div {
  padding: 30px 32px;
  background: var(--ink);
  color: var(--white);
}

.proofNumbers b {
  display: block;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 830;
  letter-spacing: -.045em;
  line-height: 1;
}

.proofNumbers span {
  display: block;
  margin-top: 12px;
  color: #b3bcc6;
  font-size: 13px;
  line-height: 1.55;
}

.proofNumbers a { color: var(--white); text-decoration: underline; }

@media (max-width: 720px) {
  .proofCase { padding: 26px 22px 24px; }
  .riskFootnote { margin-left: 0; }
}

.workflow { background: var(--ink); color: var(--white); }

.workflowHeading {
  display: grid;
  grid-template-columns: .72fr 1.98fr;
  gap: 50px;
}

.workflow .sectionNumber { color: var(--lime); margin-top: 9px; }

.workflow ol {
  margin: 76px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  border-top: 1px solid #3a424c;
}

.workflow li {
  min-height: 270px;
  padding: 24px 28px 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #3a424c;
}

.workflow li + li { padding-left: 28px; }
.workflow li:last-child { border-right: 0; }

.workflow li > span { color: var(--lime); font-size: 11px; font-weight: 800; }
.workflow h3 { font-size: 23px; letter-spacing: -.03em; }
.workflow li p { margin-top: 12px; color: #aeb6c0; font-size: 14px; line-height: 1.55; }

.reportLead {
  display: grid;
  grid-template-columns: .72fr 1.18fr .8fr;
  gap: 50px;
  align-items: start;
}

.reportLead .sectionNumber { margin-top: 9px; }

.reportGrid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  align-items: start;
  gap: 24px;
}

.report {
  min-width: 0;
  border: 1px solid #b8bec6;
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.reportHead {
  min-height: 78px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
}

.reportState { display: flex; align-items: center; gap: 11px; min-width: 0; }
.reportState > span:last-child { min-width: 0; display: grid; gap: 4px; }
.reportState strong { font-size: 14px; }
.reportState small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.check {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--lime);
  font-size: 13px;
  font-weight: 900;
}

.reportActions { display: flex; align-items: center; gap: 7px; }
.reportActions button { min-height: 36px; font-size: 10px; }
.fixPromptButton:not(:disabled) { border-color: var(--blue); color: var(--blue); }

.scanProgress {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #f7faff;
}

.scanProgress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.scanProgress strong,
.scanProgress span { font-size: 11px; }
.scanProgress small { color: var(--muted); font-size: 10px; }
.scanProgress .textButton { min-height: 28px; padding: 4px 0; font-size: 10px; }
.scanProgress progress {
  display: block;
  width: 100%;
  height: 5px;
  margin: 10px 0 8px;
  border: 0;
  accent-color: var(--blue);
}

.summary {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}

.score {
  min-height: 174px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
  background: #fff7f5;
}

.score.safe { background: #f3fae2; }
.score.limited { background: #fff9e8; }
.score div { display: flex; align-items: baseline; }
.score b { font-size: 58px; line-height: .9; letter-spacing: -.07em; }
.score span { margin-left: 5px; color: #7b848e; font-size: 12px; }
.score > strong { margin-top: 14px; color: var(--coral); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.score.safe > strong { color: var(--good); }
.score.limited > strong { color: #946400; }

.evidenceSummary { padding: 24px; }

.summaryTitle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.summaryTitle h3 { font-size: 17px; letter-spacing: -.02em; }
.summaryTitle p { margin-top: 6px; color: var(--muted); font-size: 10px; }

.coverageNumber { display: grid; text-align: right; }
.coverageNumber b { color: var(--blue); font-size: 21px; }
.coverageNumber span { color: var(--muted); font-size: 9px; text-transform: uppercase; }

.counts {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.counts div { min-height: 60px; padding: 12px; display: grid; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.counts b { font-size: 19px; }
.counts span { color: var(--muted); font-size: 9px; text-transform: uppercase; }

.reportFilters { padding: 12px 16px 0; display: flex; gap: 5px; }

.reportFilter {
  padding: 8px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}

.reportFilter.active { border-color: var(--blue); color: var(--ink); }

.findings { padding: 12px 16px 16px; overflow-x: auto; }

.tableHead,
.findingRow {
  min-width: 760px;
  display: grid;
  grid-template-columns: 1.25fr .65fr 1.8fr .6fr 1.8fr;
  gap: 12px;
  align-items: start;
}

/* De gewone taal is de hoofdtekst van een bevinding, niet een voetnoot. */
.plainWhat {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 4px;
}

.plainEffect {
  display: block;
  color: #4a5560;
  font-size: 11.5px;
  line-height: 1.5;
}

/* Zonder dit staat de knop "Meer info" direct tegen de laatste zin aan geplakt,
   want de tekst ernaast is een gewone inline-span. */
.fixText {
  display: block;
}

.moreInfo {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

.moreInfo:hover {
  background: var(--ink);
  color: #fff;
}

.findingDetails {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--ink);
  background: #f6f7f9;
  border-radius: 0 6px 6px 0;
}

.findingDetails p {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.55;
}

.findingDetails p:last-child { margin-bottom: 0; }

.findingDetails strong {
  display: block;
  margin-bottom: 2px;
  color: #78818c;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tableHead {
  padding: 9px 10px;
  border-bottom: 1px solid var(--ink);
  color: #78818c;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.findingRow { padding: 13px 10px; border-bottom: 1px solid var(--soft-line); font-size: 10px; line-height: 1.45; }
.findingRow > div { display: grid; gap: 4px; }
.findingRow strong { font-size: 11px; }
.findingRow small { color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.evidence { color: #4f5964; }

.status {
  width: fit-content;
  padding: 4px 7px;
  border-radius: 100px;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.result-fail { background: #fff0ee; color: #af251c; }
.result-warn { background: #fff6dd; color: #875c00; }
.result-pass { background: #eaf8ee; color: #146139; }
.result-manual { background: #edf2ff; color: #1c50c9; }
.severity-kritiek { color: #bf2117; font-weight: 800; text-transform: capitalize; }
.severity-hoog { color: #bd6500; font-weight: 800; text-transform: capitalize; }
.severity-middel { color: #6a5d00; font-weight: 800; text-transform: capitalize; }
.severity-laag { color: #59636e; font-weight: 800; text-transform: capitalize; }
/* capitalize hoort alleen bij het ernstwoord zelf. De zekerheidsregel eronder
   staat in dezelfde span en werd anders "Hoge Zekerheid" in plaats van
   "hoge zekerheid". */
.findingRow [class^="severity-"] small { text-transform: none; font-weight: 600; }

.empty { min-height: 88px; padding: 26px 10px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.notice { margin-top: 12px; padding: 11px 12px; background: var(--surface); color: #5d6670; font-size: 9px; line-height: 1.5; }

.report.loading .check { animation: pulse 900ms ease-in-out infinite; }

@keyframes pulse {
  50% { transform: scale(.82); opacity: .55; }
}

.scanWallet { position: sticky; top: 24px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); }
.walletTitle { min-height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #3a424c; }
.walletTitle span { color: var(--lime); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.walletTitle b { color: #9ea7b2; font-size: 9px; }
.creditNumber { padding: 25px 16px 20px; display: grid; }
.creditNumber b { font-size: 48px; line-height: 1; letter-spacing: -.06em; }
.creditNumber span { margin-top: 6px; color: #9da6b0; font-size: 10px; }
.scanWallet progress { width: calc(100% - 32px); height: 4px; margin: 0 16px; border: 0; accent-color: var(--lime); }
.scanWallet > p { padding: 10px 16px 20px; color: #9da6b0; font-size: 9px; }
.walletButton { margin: 0 16px 20px; }
.scanWallet dl { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 9px; border-top: 1px solid #3a424c; color: #9da6b0; font-size: 9px; }
.scanWallet dt, .scanWallet dd { margin: 0; }
.scanWallet dd { color: var(--white); text-align: right; }

.coverageHeading { max-width: 930px; }
.coverageColumns { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); }
.coverageColumns article { min-height: 410px; padding: 24px 36px 30px 0; border-right: 1px solid var(--line); }
.coverageColumns article + article { padding-left: 36px; }
.coverageColumns article:last-child { border-right: 0; }
.coverageColumns article > span { color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .14em; }
.coverageColumns h3 { margin-top: 42px; font-size: 25px; letter-spacing: -.035em; }
.coverageColumns ul { margin: 28px 0 0; padding: 0; list-style: none; }
.coverageColumns li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--soft-line); color: #525d68; font-size: 13px; line-height: 1.4; }
.coverageColumns li::before { content: ""; position: absolute; top: 15px; left: 0; width: 6px; height: 6px; background: var(--lime); }

.trustSection { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(60px, 8vw, 130px); background: var(--surface); }
.trustStatement { position: sticky; top: 30px; align-self: start; }
.trustStatement .sectionNumber { color: var(--good); }
.trustStatement > p:last-child { margin-top: 28px; }
.trustProofs { margin: 0; padding: 0; border-top: 1px solid var(--ink); list-style: none; }
.trustProofs li { min-height: 126px; padding: 25px 0; display: grid; grid-template-columns: 54px 1fr; border-bottom: 1px solid var(--line); }
.trustProofs li > span { color: var(--good); font-size: 10px; font-weight: 800; }
.trustProofs strong { font-size: 18px; letter-spacing: -.02em; }
.trustProofs p { margin-top: 7px; color: #59636e; font-size: 13px; line-height: 1.55; }

.pricingHeading { display: grid; grid-template-columns: .7fr 1.2fr .8fr; gap: 50px; align-items: start; }
.pricingHeading .sectionNumber { margin-top: 9px; }

.purchaseConsent {
  max-width: 900px;
  margin: 64px auto 0;
  padding: 20px 22px;
  display: grid;
  gap: 11px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12px;
}

.purchaseConsent > strong { font-size: 14px; }
.purchaseConsent label { display: flex; align-items: flex-start; gap: 9px; color: #505a65; line-height: 1.45; }
.purchaseConsent input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: var(--blue); }
.purchaseConsent a { color: var(--blue); font-weight: 700; }
.purchaseConsent p { padding-top: 9px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 750; }
.purchaseConsent p.ready { color: var(--good); }
.purchaseConsent p.blocked { color: #ac2e24; }

.creditPacks { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.creditPack { position: relative; min-height: 330px; padding: 26px; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.creditPack:last-child { border-right: 0; }
.creditPack.featured::before { content: ""; position: absolute; inset: -1px -1px auto; height: 5px; background: var(--lime); }
.packLabel { color: var(--blue); font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.packPrice { margin-top: 32px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.packPrice strong { font-size: 43px; line-height: 1; letter-spacing: -.055em; }
.packPrice span { color: var(--muted); font-size: 9px; text-align: right; }
.creditPack h3 { margin-top: 22px; font-size: 21px; }
.creditPack p { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.creditPack small { margin-top: 10px; color: #3f4954; font-size: 10px; }
.creditPack button { width: 100%; margin-top: auto; }
.packSkeleton { grid-column: 1 / -1; padding: 55px; color: var(--muted); text-align: center; }
.pricingNote { max-width: 900px; margin: 20px auto 0; color: var(--muted); font-size: 10px; line-height: 1.55; text-align: center; }

.standards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 8vw, 130px); background: var(--ink); color: var(--white); }
.standards h2 { font-size: clamp(36px, 4vw, 58px); }
.standards .sectionNumber { color: var(--lime); }
.standards ul { margin: 0; padding: 0; border-top: 1px solid #3a424c; list-style: none; }
.standards li { min-height: 82px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; border-bottom: 1px solid #3a424c; }
.standards strong { font-size: 14px; }
.standards span { color: #9fa8b3; font-size: 11px; line-height: 1.4; }

.siteFooter {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 38px var(--gutter) 46px;
  display: grid;
  grid-template-columns: .7fr 1.2fr 1fr;
  gap: 30px;
  align-items: start;
  border-top: 1px solid var(--line);
  color: #59636e;
  font-size: 10px;
  line-height: 1.55;
}

.siteFooter > div { display: grid; }
.siteFooter > div strong { color: var(--ink); font-size: 16px; }
.siteFooter > div span { margin-top: 4px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.siteFooter nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.siteFooter a { color: var(--ink); font-weight: 720; }
.siteFooter small { grid-column: 2 / -1; color: #89919b; }

dialog {
  width: min(900px, calc(100% - 30px));
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 100px rgba(8, 11, 15, .3);
}

dialog::backdrop { background: rgba(8, 11, 15, .68); }
.dialogHead { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dialogHead h2 { font-size: 25px; letter-spacing: -.035em; }
.dialogHead p { margin-top: 6px; color: var(--muted); font-size: 11px; }
.dialogClose { width: 36px; height: 36px; border: 1px solid var(--line); background: var(--white); font-size: 22px; cursor: pointer; }
.promptWarning { margin: 18px 22px 0; padding: 13px; background: #fff6df; color: #614800; font-size: 11px; line-height: 1.5; }
dialog > label { margin: 18px 22px 8px; display: block; font-size: 11px; font-weight: 750; }
#fixPromptText { width: calc(100% - 44px); min-height: 340px; margin: 0 22px; padding: 15px; resize: vertical; border: 1px solid var(--line); background: #f7f8f9; color: var(--graphite); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1.55; }
.dialogActions { padding: 16px 22px 22px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.dialogActions span { margin-right: auto; color: var(--muted); font-size: 10px; }

:focus-visible { outline: 3px solid rgba(23, 92, 255, .35); outline-offset: 3px; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .heroCopy { max-width: 760px; }
  .filmFrame { max-width: 860px; }
  .sectionIntro,
  .reportLead,
  .pricingHeading { grid-template-columns: .55fr 1.2fr; }
  .sectionIntro > p:last-child,
  .reportLead > p:last-child,
  .pricingHeading > p:last-child { grid-column: 2; }
  .reportGrid { grid-template-columns: 1fr; }
  .scanWallet { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .walletTitle { grid-column: 1 / -1; }
  .walletButton { align-self: start; }
  .scanWallet dl { border-top: 0; border-left: 1px solid #3a424c; }
}

@media (max-width: 800px) {
  .siteHeader { grid-template-columns: 1fr auto; }
  .mainNav { display: none; }
  .hero { min-height: 0; padding-top: 70px; grid-template-columns: 1fr; gap: 55px; }
  .hero h1 { max-width: 680px; }
  .sectionIntro,
  .workflowHeading,
  .reportLead,
  .pricingHeading { grid-template-columns: 1fr; gap: 22px; }
  .sectionIntro > p:last-child,
  .reportLead > p:last-child,
  .pricingHeading > p:last-child { grid-column: auto; }
  .workflow ol { grid-template-columns: 1fr 1fr; }
  .workflow li:nth-child(2) { border-right: 0; }
  .workflow li:nth-child(3),
  .workflow li:nth-child(4) { border-top: 1px solid #3a424c; }
  .coverageColumns { grid-template-columns: 1fr; }
  .coverageColumns article,
  .coverageColumns article + article { min-height: 0; padding: 28px 0 35px; border-right: 0; border-bottom: 1px solid var(--line); }
  .coverageColumns h3 { margin-top: 20px; }
  .trustSection,
  .standards { grid-template-columns: 1fr; }
  .trustStatement { position: static; }
  .creditPacks { grid-template-columns: 1fr; }
  .creditPack { min-height: 290px; border-right: 0; border-bottom: 1px solid var(--line); }
  .siteFooter { grid-template-columns: 1fr 1fr; }
  .siteFooter small { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .siteHeader { min-height: 68px; padding-top: 14px; padding-bottom: 14px; }
  .brand small { display: none; }
  .balance { padding: 7px 10px; font-size: 10px; }
  .hero { padding-top: 54px; padding-bottom: 70px; }
  .hero h1 { font-size: clamp(48px, 14.5vw, 66px); }
  .heroLead { margin-top: 22px; font-size: 17px; }
  .scannerShell { margin-top: 30px; }
  #scanForm { grid-template-columns: 1fr; padding: 5px; }
  .urlField input { height: 54px; }
  .scanCta { width: 100%; height: 50px; margin: 0; }
  .sourcePicker { align-items: stretch; flex-direction: column; }
  .fileButton { width: 100%; }
  .sourceSelection { align-items: stretch; flex-direction: column; }
  .trustLine { gap: 8px 14px; }
  .filmTop { grid-template-columns: 1fr auto; }
  .filmTop > strong { display: none; }
  .filmCaption { grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .riskSection,
  .workflow,
  .reportWorkspace,
  .coverageSection,
  .trustSection,
  .pricing,
  .standards { padding-top: 72px; padding-bottom: 72px; }
  .sectionIntro h2,
  .workflowHeading h2,
  .reportLead h2,
  .coverageHeading h2,
  .trustStatement h2,
  .pricingHeading h2,
  .standards h2 { font-size: 43px; }
  .riskRails { margin-top: 50px; }
  .riskRails article { min-height: 145px; grid-template-columns: 30px 1fr; gap: 14px; padding: 20px 0; }
  .riskRails article > strong { grid-column: 2; justify-self: start; }
  .riskFootnote { margin-left: 44px; }
  .workflow ol { grid-template-columns: 1fr; margin-top: 50px; }
  .workflow li,
  .workflow li + li { min-height: 190px; padding: 22px 0; border-right: 0; border-top: 1px solid #3a424c; }
  .workflow li:first-child { border-top: 0; }
  .reportGrid { margin-top: 50px; }
  .reportHead { align-items: flex-start; flex-direction: column; }
  .reportActions { width: 100%; flex-wrap: wrap; }
  .reportActions .secondary { flex: 1; }
  .summary { grid-template-columns: 1fr; }
  .score { min-height: 130px; border-right: 0; border-bottom: 1px solid var(--line); }
  .counts { grid-template-columns: 1fr 1fr; }
  .scanWallet { display: block; }
  .scanWallet dl { border-top: 1px solid #3a424c; border-left: 0; }
  .coverageColumns { margin-top: 48px; }
  .trustProofs li { grid-template-columns: 36px 1fr; }
  .purchaseConsent { margin-top: 42px; }
  .siteFooter { grid-template-columns: 1fr; }
  .siteFooter small { grid-column: auto; }
  .dialogActions { align-items: stretch; flex-direction: column; }
  .dialogActions span { margin-right: 0; }
  .dialogActions button { width: 100%; }
}

.legalPage {
  min-height: 100vh;
  background: #f4f6f8;
}

.legalPage > header {
  min-height: 82px;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
}

.legalPage .brand > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--lime);
  font-size: 10px;
  font-weight: 850;
}

.legalPage .brand > strong { display: grid; }

.legalPage .brand small {
  display: block;
  margin-top: 5px;
}

.legalPage > header nav,
.legalPage > footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.legalPage > header nav a,
.legalPage > footer nav a {
  color: #3e4854;
  font-size: 12px;
  font-weight: 720;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.legalPage main {
  padding: clamp(46px, 7vw, 92px) var(--gutter) clamp(70px, 9vw, 126px);
}

.legalDocument {
  width: min(100%, 940px);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 76px);
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: 0 30px 80px rgba(8, 11, 15, .08);
}

.legalPreview {
  margin-bottom: 34px;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  border-left: 4px solid var(--amber);
  background: #fff7e5;
  color: #644300;
  font-size: 12px;
  line-height: 1.45;
}

.legalDocument .eyebrow {
  display: inline-block;
  color: var(--blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legalDocument h1 {
  max-width: 760px;
  margin-top: 16px;
  font-size: clamp(42px, 7vw, 72px);
  line-height: .98;
  letter-spacing: -.055em;
}

.legalIntro {
  max-width: 700px;
  margin-top: 22px;
  color: #4e5966;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
}

.legalDocument section {
  margin-top: 38px;
  padding-top: 34px;
  border-top: 1px solid var(--soft-line);
}

.legalDocument h2 {
  max-width: 760px;
  font-size: clamp(23px, 3vw, 31px);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.legalDocument section p,
.legalDocument section li,
.legalDocument address {
  color: #46515d;
  font-size: 15px;
  line-height: 1.72;
}

.legalDocument section p,
.legalDocument section ul,
.legalDocument address { margin: 16px 0 0; }

.legalDocument section p + p { margin-top: 12px; }
.legalDocument section ul { padding-left: 22px; }
.legalDocument section a { color: #114fd4; text-underline-offset: 3px; }
.legalDocument address { font-style: normal; }

/* Herroepingsformulier op /withdrawal. Werkt zonder JavaScript, dus dit is een
   gewoon formulier binnen de juridische paginastijl. */
.withdrawalForm {
  display: grid;
  gap: 8px;
  max-width: 520px;
  margin-top: 18px;
}

.withdrawalForm label {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
}

.withdrawalForm input,
.withdrawalForm textarea {
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font: inherit;
}

.withdrawalForm button {
  margin-top: 16px;
  justify-self: start;
}

.modelForm {
  margin-top: 18px;
  padding: 18px 22px;
  border-left: 4px solid var(--line);
  background: #f7f8fa;
}

.legalVersion {
  margin-top: 46px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.legalPage > footer {
  padding: 30px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.legalPage > footer strong { font-size: 14px; }

@media (max-width: 700px) {
  .legalPage > header,
  .legalPage > footer { align-items: flex-start; flex-direction: column; }
  .legalPage > header nav,
  .legalPage > footer nav { gap: 10px 18px; }
  .legalDocument { padding: 28px 22px 36px; }
  .legalDocument section { margin-top: 30px; padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.headerAuth {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.scanDepth,
.domainVerification {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--soft-line);
  border-radius: var(--radius);
  background: #fbfcfd;
}

.scanDepth { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.scanDepth label { display: grid; gap: 4px; font-size: 12px; }
.scanDepth label span, .domainVerification p { color: var(--muted); font-size: 11px; line-height: 1.5; }
.scanDepth select, .verificationActions select {
  min-height: 42px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
}

.domainVerification > div:first-child { display: grid; gap: 4px; }
.verificationActions { margin-top: 12px; display: flex; gap: 8px; }
.verificationInstructions { margin-top: 12px; display: grid; gap: 8px; }
.verificationInstructions code {
  display: block;
  padding: 10px;
  overflow-wrap: anywhere;
  border: 1px solid #dce4ef;
  border-radius: 6px;
  background: #f0f5ff;
  color: #173968;
  font-size: 11px;
}
#verificationStatus { margin-top: 10px; min-height: 17px; color: #31506f; }

#accountDialog { width: min(560px, calc(100vw - 28px)); }
#accountDialog section { padding: 22px; }
#loginForm, #mfaSetup { display: grid; gap: 10px; }
#loginForm input, #mfaCode {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}
#loginStatus, #accountStatus { min-height: 20px; margin-top: 12px; color: #31506f; font-size: 12px; }
.accountSecurity { margin-top: 18px; padding: 16px; border: 1px solid var(--soft-line); border-radius: 8px; background: #f7fafc; }
.accountSecurity p { margin: 5px 0 12px; color: var(--muted); font-size: 12px; }
#mfaSetup { margin: 12px 0; padding: 16px; border: 1px solid #d7e2ef; border-radius: 8px; }
#mfaQr { width: min(240px, 100%); height: auto; margin: 0 auto 8px; }
.billingPanel, .privacyPanel { margin-top: 14px; padding: 16px; border: 1px solid var(--soft-line); border-radius: 8px; background: #fbfcfd; }
.billingHeading, .privacyPanel { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.billingHeading p, .privacyPanel p, .retentionNotice { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.billingHeading button, .privacyPanel button { flex: 0 0 auto; }
.billingDocuments { margin-top: 14px; display: grid; gap: 8px; }
.billingDocument { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding-top: 10px; border-top: 1px solid var(--soft-line); }
.billingDocument strong { overflow-wrap: anywhere; font-size: 13px; }
.billingDocument span { color: var(--muted); font-size: 11px; }
.billingDocument b { grid-row: 1 / 3; grid-column: 2; align-self: center; font-size: 13px; }
.billingEmpty { margin: 0; color: var(--muted); font-size: 12px; }
.retentionNotice { padding: 10px 12px; border-left: 3px solid #b9c8d9; background: #f7fafc; }
.accountActions { margin-top: 18px; display: flex; justify-content: space-between; gap: 10px; }
.dangerButton { padding: 10px 14px; border: 1px solid #d7372f; border-radius: 7px; background: #fff8f7; color: #a5221b; font-weight: 750; cursor: pointer; }

.statusPage { min-height: 100vh; padding: clamp(24px, 6vw, 80px); background: #f3f6f8; }
.statusPage main { max-width: 820px; margin: 0 auto; }
.statusCard { margin-top: 40px; padding: clamp(26px, 6vw, 62px); border: 1px solid var(--line); border-radius: 18px; background: var(--white); box-shadow: 0 24px 80px rgba(39, 57, 77, .08); }
.statusCard h1 { margin: 12px 0 16px; font-size: clamp(38px, 7vw, 68px); letter-spacing: -.055em; line-height: .98; }
.statusCard > p { max-width: 620px; color: var(--muted); line-height: 1.6; }
.statusCard dl { margin: 32px 0; display: grid; grid-template-columns: 1fr auto; }
.statusCard dt, .statusCard dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--soft-line); }
.statusCard dd { font-weight: 800; text-transform: capitalize; }
.statusGood { color: var(--good); }
.statusNotice { color: #8b5c00; }

@media (max-width: 700px) {
  .scanDepth { align-items: stretch; flex-direction: column; }
  .verificationActions, .accountActions, .billingHeading, .privacyPanel { align-items: stretch; flex-direction: column; }
}

/* ---------------------------------------------------------------------------
   Belangstelling zolang de verkoop dicht staat. Dit blok verschijnt op het
   moment dat iemand door zijn gratis scans heen is: het enige moment waarop
   iemand uit zichzelf zijn adres achterlaat.
   --------------------------------------------------------------------------- */
.interestBlock {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 420px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-top: 40px;
  padding: clamp(26px, 3.5vw, 44px);
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--white);
}

.interestCopy h3 {
  max-width: 22ch;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.interestCopy p {
  margin-top: 12px;
  color: #c3cbd4;
  font-size: 14px;
  line-height: 1.6;
}

.interestForm {
  display: grid;
  gap: 6px;
}

.interestForm label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
}

.interestForm input[type="email"],
.interestForm select {
  padding: 11px 13px;
  border: 1px solid #3a424b;
  background: #12161b;
  color: var(--white);
  font: inherit;
}

.interestForm .consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  margin-top: 14px;
  color: #b3bcc6;
  font-size: 12.5px;
  line-height: 1.5;
}

.interestForm button {
  margin-top: 16px;
  justify-self: start;
}

.interestStatus {
  min-height: 18px;
  margin-top: 10px;
  color: var(--lime);
  font-size: 13px;
}

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

/* Openbare controlelijst op /wat-wij-controleren. De tabel moet op mobiel
   apart kunnen schuiven, anders duwt hij de hele pagina breed. */
.coverageTable { overflow-x: auto; margin-top: 14px; }

.coverageTable table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.coverageTable th {
  padding: 8px 12px 8px 0;
  border-bottom: 2px solid var(--ink);
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.coverageTable td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--soft-line);
  vertical-align: top;
}

.coverageWhat { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.legalDocument h2 small {
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.sev-kritiek { color: #bf2117; font-weight: 800; }
.sev-hoog { color: #bd6500; font-weight: 800; }
.sev-middel { color: #6a5d00; font-weight: 800; }
.sev-laag { color: #59636e; font-weight: 700; }

.coverageLink { margin-top: 16px; font-size: 14px; }
.coverageLink a { color: var(--blue); font-weight: 700; text-decoration: underline; }

/* ─── Laptop in de hero (marketing): waarschuwingen + 3-stappen-demo ─── */

.heroLaptop { min-width: 0; }
body[data-surface="app"] .heroLaptop { display: none; }
.lapWrap { width: min(640px, 100%); margin: 0 auto; }
.lapCaption { min-height: 28px; margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 15px; font-weight: 700; }
@media (hover: hover) {
  .lapScene { transition: transform 0.45s ease; }
  .lapScene:hover { transform: scale(1.06); }
}

.lapDevice { position: relative; width: 100%; }
.lapScene:not(.is-static) .lapDevice { animation: lap-float 8s ease-in-out infinite; }
.lapScene.is-offscreen .lapDevice { animation-play-state: paused; }
@keyframes lap-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Beeldscherm met dunne bezel */
.lapDisplay {
  position: relative;
  width: 84%;
  margin: 0 auto;
  aspect-ratio: 16 / 10;
  border-radius: 18px 18px 0 0;
  background: #10131a;
  border: 1px solid #2c3240;
  border-bottom: 0;
  padding: 2.6% 2.2% 2.2%;
  box-shadow: 0 24px 48px -18px rgba(23, 30, 44, 0.35);
}
.lapDisplayCam { position: absolute; top: 1.2%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #2c3240; box-shadow: inset 0 0 2px #05060a; }
.lapDisplayScreen { width: 100%; height: 100%; border-radius: 8px; background: #05060a; overflow: hidden; transition: opacity 0.6s ease; opacity: 0; }
.lapScene.is-on .lapDisplayScreen, .lapScene.is-static .lapDisplayScreen { opacity: 1; }

/* Behuizing onder het scherm */
.lapBody { position: relative; width: 100%; height: clamp(14px, 2.6vw, 20px); border-radius: 0 0 14px 14px; background: #d3d8e2; border: 1px solid #aeb6c4; border-top: 1px solid #8f97a6; }
.lapBodyNotch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14%; height: 42%; border-radius: 0 0 10px 10px; background: #b9c0cd; }
.lapFoot { width: 76%; height: clamp(5px, 1vw, 8px); margin: 0 auto; border-radius: 0 0 12px 12px; background: #aeb6c4; }

/* Schermwissel: alleen het scherm van de actieve fase is zichtbaar */
.lapDisplayScreen > [data-lap-screen] { display: none; }
.lapScene[data-phase="warn-0"] [data-lap-screen="warn-0"],
.lapScene[data-phase="warn-1"] [data-lap-screen="warn-1"],
.lapScene[data-phase="warn-2"] [data-lap-screen="warn-2"],
.lapScene[data-phase="final"] [data-lap-screen="final"] { display: flex; }
.lapScene[data-phase="step-1"] [data-lap-screen="step-1"],
.lapScene[data-phase="step-2"] [data-lap-screen="step-2"],
.lapScene[data-phase="step-3"] [data-lap-screen="step-3"] { display: flex; }

/* Waarschuwingsberichten op het laptopscherm */
.lapWarnscreen { width: 100%; height: 100%; align-items: center; justify-content: center; padding: 5%; animation: lap-msg-in 0.55s ease-out both; }
@keyframes lap-msg-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.lapWarncard { width: 88%; border: 1px solid #39404e; border-left: 4px solid var(--coral); border-radius: 8px; background: #10131a; padding: 5% 6%; font-size: clamp(7px, 1.3vw, 11px); }
.lapWarnKicker { display: inline-flex; align-items: center; gap: 0.6em; color: var(--coral); font-size: 0.95em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; }
.lapWarnDot { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--coral); animation: lap-blink 1.1s step-end infinite; }
@keyframes lap-blink { 50% { opacity: 0.25; } }
.lapWarnText { margin: 0.9em 0 1em; color: #f2f4f8; font-size: 1.55em; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.lapWarnSource { display: block; color: #a7afbd; font-size: 0.95em; font-weight: 700; }
.lapFinalcard { display: flex; flex-direction: column; align-items: center; gap: 1.1em; text-align: center; font-size: clamp(8px, 1.5vw, 13px); }
.lapFinalcard .lapMiniMark { width: 2.6em; height: 2.6em; background: #10131a; border: 1px solid #39404e; }
.lapFinalcard .lapMiniMark i { background: var(--lime); height: 1.5em; width: 3px; }
.lapFinalcard p { margin: 0; max-width: 16em; color: #f2f4f8; font-size: 1.8em; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }

/* Mini-weergave van de echte scanner-interface */
.lapUi { width: 100%; height: 100%; animation: lap-msg-in 0.55s ease-out both; border-radius: 6px; background: var(--white); color: var(--ink); overflow: hidden; flex-direction: column; padding: 3.4% 4%; font-size: clamp(6px, 1.15vw, 9px); pointer-events: none; }
.lapUiChrome { display: flex; align-items: center; gap: 6px; padding-bottom: 5%; border-bottom: 1px solid #d8dde6; }
.lapMiniMark { width: 1.9em; height: 1.9em; display: inline-flex; align-items: center; justify-content: center; gap: 2px; background: var(--ink); }
.lapMiniMark i { width: 2px; height: 1.1em; background: var(--lime); transform: skew(-24deg); }
.lapUiBrand { font-weight: 800; font-size: 1.15em; letter-spacing: -0.02em; }
.lapUiNavdots { margin-left: auto; display: flex; gap: 4px; }
.lapUiNavdots i { width: 2.4em; height: 0.55em; border-radius: 99px; background: #e4e8ef; }
.lapUiHeadline { margin: 6% 0 5%; font-weight: 800; font-size: 1.75em; line-height: 1.06; letter-spacing: -0.03em; max-width: 88%; }
.lapUiTabs { display: flex; gap: 4px; margin-bottom: 5%; }
.lapUiTab { padding: 0.5em 1.1em; border: 1px solid #cdd3df; border-radius: 99px; font-weight: 700; color: #3f4654; }
.lapUiTabActive { background: var(--ink); color: var(--white); border-color: var(--ink); }
.lapUiField { margin-bottom: 5%; }
.lapUiFieldlabel { display: block; font-weight: 700; margin-bottom: 0.5em; color: #3f4654; }
.lapUiFieldbox { display: block; padding: 0.7em 0.9em; border: 1px solid #9ba5b5; border-radius: 5px; color: #68707d; background: var(--white); }
.lapUiCta { align-self: flex-start; padding: 0.75em 1.6em; border-radius: 5px; background: var(--blue); color: var(--white); font-weight: 800; }
.lapUiRail { margin-top: auto; display: flex; gap: 1.4em; flex-wrap: wrap; padding-top: 5%; }
.lapUiRail span { color: #3f4654; font-weight: 700; border-top: 2px solid var(--lime); padding-top: 0.5em; }
.lapUiScanbox { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4em; }
.lapUiHeadlineCenter { margin: 0; max-width: none; text-align: center; }
.lapUiProgress { width: 62%; height: 0.9em; border-radius: 99px; background: #e4e8ef; overflow: hidden; }
.lapUiProgress i { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--blue); animation: lap-progress 2.6s ease-in-out infinite; }
@keyframes lap-progress {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(260%); }
}
.lapUiScannote { color: #3f4654; font-weight: 700; }
.lapUiHeadlineReport { font-size: 1.5em; margin: 5% 0 4%; }
.lapUiRows { display: flex; flex-direction: column; gap: 4px; margin-bottom: 5%; }
.lapUiRow { display: flex; align-items: center; gap: 0.8em; padding: 0.65em 0.9em; border: 1px solid #d8dde6; border-radius: 5px; }
.lapUiRow span { font-weight: 700; flex: 1; }
.lapUiRow em { font-style: normal; font-weight: 800; color: #3f4654; }
.lapUiSev { width: 0.7em; height: 0.7em; border-radius: 50%; flex: 0 0 auto; }
.lapUiSevHigh { background: #c2410c; }
.lapUiSevMed { background: #8a6500; }
.lapUiCtaGhost { background: var(--white); color: var(--ink); border: 1px solid #9ba5b5; }

@media (prefers-reduced-motion: reduce) {
  .lapScene, .lapDevice, .lapWarnscreen, .lapUi, .lapWarnDot, .lapUiProgress i {
    animation: none !important;
    transition: none !important;
  }
  .lapDisplayScreen { opacity: 1; }
}