/* ------------------------------------------------------------------
   All-Right — Risk & Readiness Scan
   Gegenereerd uit wiki/20260912 Risk & Readiness Scan — standalone EN & NL.html
   Niet met de hand bijwerken: pas dat bestand aan en genereer opnieuw,
   anders lopen de losse versie en de site uit elkaar.
------------------------------------------------------------------ */

/* Inter, zelf gehost. Zet inter-400.woff2 en inter-500.woff2 in assets/fonts/
   (zie assets/fonts/LEES-MIJ.txt). Ontbreken ze, dan valt de tekst terug op
   system-ui — dat scheelt visueel weinig en breekt niets. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}

    :root {
      --ink: #173330;
      --ink-soft: #49615d;
      --muted: #778985;
      --paper: #f1f4f0;
      --paper-deep: #e8eeea;
      --card: #fbfcfa;
      --white: #fff;
      --accent: #276258;
      --accent-deep: #19463f;
      --accent-soft: #dce9e3;
      --line: #d6e0db;
      --line-soft: #e3e9e5;
      --warm: #d7c8b4;
      --error: #a94335;
      --shadow: 0 18px 50px rgba(23, 51, 48, .08);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--ink);
      font-family: "avenir-next-lt-pro", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      line-height: 1.62;
    }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font: inherit; }
    button { color: inherit; }
    img { max-width: 100%; display: block; }
    p { margin-top: 0; }
    h1, h2, h3 {
      margin-top: 0;
      font-family: "iowan-old-style-bt", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      font-weight: 500;
      letter-spacing: -.025em;
      text-wrap: balance;
    }
    h1 { max-width: 850px; margin-bottom: 28px; font-size: clamp(46px, 6.2vw, 78px); line-height: 1.035; }
    h2 { margin-bottom: 22px; font-size: clamp(34px, 4vw, 52px); line-height: 1.08; }
    h3 { margin-bottom: 14px; font-size: clamp(24px, 2.5vw, 32px); line-height: 1.14; }
    .wrap { width: min(100% - 48px, 1160px); margin-inline: auto; }
    .narrow { width: min(100% - 48px, 820px); margin-inline: auto; }
    .section { padding: 96px 0; }
    .section-tight { padding: 66px 0; }
    .eyebrow, .micro {
      margin: 0 0 20px;
      color: var(--accent);
      font-size: 11px;
      font-weight: 720;
      letter-spacing: .16em;
      line-height: 1.4;
      text-transform: uppercase;
    }
    .lead {
      max-width: 720px;
      margin-bottom: 34px;
      color: var(--ink-soft);
      font-size: 18px;
      line-height: 1.68;
    }
    .section-heading { max-width: 850px; margin-bottom: 45px; }
    .section-heading .lead { margin-bottom: 0; }
    .button-row { display: flex; flex-wrap: wrap; gap: 12px; }
    .button {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--accent);
      border-radius: 12px;
      background: var(--accent);
      color: var(--white);
      cursor: pointer;
      font-size: 14px;
      font-weight: 680;
      line-height: 1.3;
      padding: 13px 20px;
      text-align: center;
      transition: .16s ease;
    }
    .button:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
    .button.secondary { background: transparent; color: var(--accent); }
    .button.secondary:hover { background: var(--accent-soft); }
    .button.light { border-color: var(--white); background: var(--white); color: var(--ink); }
    .text-link { color: var(--accent); font-size: 14px; font-weight: 680; }
    .skip {
      position: fixed;
      left: 20px;
      top: -80px;
      z-index: 100;
      border-radius: 8px;
      background: var(--ink);
      color: var(--white);
      padding: 10px 14px;
    }
    .skip:focus { top: 16px; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      border-bottom: 1px solid rgba(214, 224, 219, .82);
      background: rgba(241, 244, 240, .93);
      backdrop-filter: blur(18px);
    }
    .header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .brand {
      flex: none;
      font-family: "iowan-old-style-bt", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      font-size: 20px;
      font-weight: 600;
      letter-spacing: -.015em;
    }
    .brand span { color: var(--accent); font-weight: 500; }
    .nav { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
    .nav-link { border-radius: 9px; color: var(--ink-soft); font-size: 14px; font-weight: 510; padding: 10px 11px; }
    .nav-link:hover, .nav-link.active { background: rgba(255, 255, 255, .58); color: var(--accent); }
    .nav .button { min-height: 42px; margin-left: 8px; padding: 10px 15px; font-size: 13px; }
    .menu { display: none; border: 1px solid var(--line); border-radius: 10px; background: transparent; padding: 9px 12px; }
    .hero { position: relative; overflow: hidden; padding: 116px 0 96px; }
    .hero-grid { display: grid; grid-template-columns: 1.7fr .72fr; gap: 88px; align-items: end; }
    .hero-outcomes { border-top: 1px solid var(--ink); padding-top: 22px; }
    .outcome { display: grid; grid-template-columns: 32px 1fr; gap: 12px; border-bottom: 1px solid var(--line); padding: 18px 0; }
    .outcome span { color: var(--muted); font-size: 11px; }
    .outcome strong { font-family: var(--font-display); font-size: 18px; }
    .transformation {
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--card);
      box-shadow: var(--shadow);
      padding: 50px;
    }
    .transform-head, .transform-row { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 18px; }
    .transform-head { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .transform-head span:last-child { grid-column: 3; }
    .transform-row { align-items: center; border-top: 1px solid var(--line); padding: 18px 0; }
    .transform-row p { margin: 0; color: var(--ink-soft); }
    .transform-row p:last-child { color: var(--ink); font-weight: 620; }
    .transform-row > span { color: var(--accent); text-align: center; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .card {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--card);
      padding: 32px;
    }
    .card-number { display: block; margin-bottom: 34px; color: var(--accent); font-size: 12px; font-weight: 700; }
    .card p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }
    .offer-preview, .two-col {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 78px;
      align-items: start;
    }
    .offer-preview { border-block: 1px solid var(--line); padding: 56px 0; }
    .offer-preview p { color: var(--ink-soft); }
    .vision {
      display: grid;
      grid-template-columns: 90px 1fr;
      gap: 40px;
      align-items: start;
      border-radius: 24px;
      background: var(--ink);
      color: var(--white);
      padding: 56px;
    }
    .vision-mark { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; font-family: var(--font-display); font-size: 20px; }
    .vision p:last-child { margin-bottom: 0; color: #c9d7d2; }
    .fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .fit-card { border-top: 1px solid var(--line); padding-top: 24px; }
    .fit-card ul, .qualification ul { margin: 0; padding: 0; list-style: none; }
    .fit-card li, .qualification li { position: relative; border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); padding: 12px 0 12px 22px; }
    .fit-card li::before, .qualification li::before { position: absolute; left: 0; top: 21px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); content: ""; }
    .closing {
      border-radius: 24px;
      background: var(--card);
      box-shadow: var(--shadow);
      padding: 58px;
      text-align: center;
    }
    .closing p:not(.eyebrow) { max-width: 720px; margin-inline: auto; color: var(--ink-soft); }
    .closing .button-row { justify-content: center; }
    .page-hero { padding: 104px 0 78px; }
    .editorial { max-width: 980px; }
    .portrait-grid { display: grid; grid-template-columns: 1.1fr .72fr; gap: 76px; align-items: center; }
    .portrait {
      overflow: hidden;
      border-radius: 24px;
      background: var(--card);
      box-shadow: var(--shadow);
    }
    .portrait img { width: 100%; aspect-ratio: 1.18; object-fit: cover; object-position: center 38%; }
    .authority { padding: 10px 24px 20px; }
    .authority > div { display: grid; gap: 3px; border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
    .authority > div:last-child { border: 0; }
    .authority strong { font-size: 12px; }
    .authority span { color: var(--muted); font-size: 11px; }
    .support-shifts { display: grid; gap: 12px; }
    .support-shift { display: grid; grid-template-columns: 1fr 40px 1fr; gap: 18px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: 24px; }
    .support-shift > span { color: var(--accent); font-family: var(--font-display); font-size: 26px; text-align: center; }
    .support-shift p { margin: 0; color: var(--ink-soft); font-size: 14px; }
    .support-shift .micro { margin-bottom: 6px; font-size: 9px; }
    .case-sections { display: grid; gap: 0; }
    .case-sections article { display: grid; grid-template-columns: 40px 1fr; gap: 18px; border-top: 1px solid var(--line); padding: 26px 0; }
    .case-sections article > span { color: var(--accent); font-size: 12px; font-weight: 700; }
    .case-sections h3 { font-size: 25px; }
    .insight { display: grid; grid-template-columns: 160px 1fr; gap: 40px; border-top: 1px solid var(--line); padding: 42px 0; }
    .insight .micro { margin-bottom: 6px; }
    .site-footer { border-top: 1px solid var(--line); padding: 52px 0 28px; }
    .footer-top, .footer-bottom { display: flex; justify-content: space-between; gap: 28px; }
    .footer-links, .legal-links { display: flex; flex-wrap: wrap; gap: 18px; color: var(--ink-soft); font-size: 12px; }
    .footer-links { align-items: center; justify-content: flex-end; gap: 16px 22px; }
    .footer-links a {
      align-items: center;
      border-bottom: 1px solid rgba(39, 98, 88, .28);
      color: var(--accent);
      display: inline-flex;
      font-size: 13.5px;
      font-weight: 650;
      gap: 7px;
      padding: 6px 0;
    }
    .footer-links a::after { content: "→"; transition: transform .16s ease; }
    .footer-links a:hover { border-bottom-color: var(--accent); color: var(--ink); }
    .footer-links a:hover::after { transform: translateX(2px); }
    .footer-bottom { align-items: center; border-top: 1px solid var(--line); margin-top: 34px; padding-top: 22px; color: var(--muted); font-size: 11px; }
    .prototype-note { margin: 18px 0 0; color: var(--muted); font-size: 10px; }
    .form {
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--card);
      box-shadow: var(--shadow);
      padding: 42px;
    }
    .form-grid { display: grid; gap: 20px; }
    .form-grid.two { grid-template-columns: 1fr 1fr; }
    .field { margin-bottom: 22px; }
    .field label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 680; line-height: 1.4; }
    .field input, .field select, .field textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 11px;
      background: var(--white);
      color: var(--ink);
      outline: none;
      padding: 13px 14px;
    }
    .field textarea { min-height: 116px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39, 98, 88, .12); }
    .field-note { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
    .form-error { margin: 0 0 18px; border-left: 3px solid var(--error); color: var(--error); font-size: 13px; padding-left: 12px; }
    .booking-bg { background: var(--paper-deep); }
    .booking-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: 76px; align-items: start; }
    .booking-copy { position: sticky; top: 116px; }
    .calendar-box { border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); padding: 36px; }
    .calendar-box p { color: var(--ink-soft); }
    .scan-page { min-height: 75vh; padding: 76px 0 104px; }
    .scan-intro, .gate { padding-top: 42px; }
    .category-pills, .risk-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 22px; }
    .category-pills span, .risk-facts span { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.62); color: var(--ink-soft); font-size: 12px; padding: 8px 12px; }
    .practical { margin-bottom: 28px; color: var(--ink-soft); font-size: 13px; font-weight: 680; }
    .disclaimer { margin-top: 18px; color: var(--muted); font-size: 11px; }
    .progress { margin-bottom: 44px; }
    .progress-meta { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .progress-meta strong { color: var(--accent); }
    .track { height: 4px; overflow: hidden; border-radius: 99px; background: var(--line); }
    .track span { height: 100%; display: block; background: var(--accent); }
    .question-category { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 680; text-transform: uppercase; }
    .question-category span { color: var(--accent); }
    .question h1 { margin: 22px 0 34px; font-size: clamp(34px, 5vw, 51px); }
    .answers { display: grid; gap: 10px; }
    .answer {
      width: 100%;
      display: flex;
      gap: 14px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255,255,255,.72);
      cursor: pointer;
      padding: 16px 18px;
      text-align: left;
    }
    .answer.selected { border-color: var(--accent); background: var(--accent-soft); }
    .dot { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--white); }
    .answer.selected .dot { border: 5px solid var(--accent); }
    .why { border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; background: var(--card); margin-top: 24px; padding: 22px 24px; }
    .why .micro { margin-bottom: 7px; }
    .why p:last-child { margin: 0; color: var(--ink-soft); font-size: 14px; }
    .question-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 30px; }
    .back, .restart { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 10px 0; }
    .back:disabled, .button:disabled { opacity: .42; cursor: not-allowed; }
    .opt-in { display: flex; gap: 13px; align-items: flex-start; border: 1px solid rgba(39,98,88,.22); border-radius: 15px; background: var(--accent-soft); margin: 4px 0 25px; cursor: pointer; padding: 19px 21px; }
    .opt-in input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--accent); }
    .opt-in span { display: grid; gap: 4px; }
    .opt-in strong { font-size: 13px; }
    .opt-in small { color: var(--ink-soft); font-size: 11.5px; }
    .report-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; border-bottom: 1px solid var(--line); padding: 26px 0 58px; }
    .report-hero-summary { border-radius: 22px; background: var(--accent); color: var(--white); padding: 48px; margin-bottom: 10px; }
    .report-hero-summary .eyebrow { color: var(--accent-soft); }
    .report-hero-summary h1 { color: var(--white); margin: 0 0 14px; }
    .report-hero-summary .report-summary { color: #eaf3ef; max-width: 640px; font-size: 17px; }
    .priority-badge { display: inline-block; margin-left: 12px; vertical-align: middle; background: var(--accent); color: var(--white); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; font-weight: 600; }
    @media (max-width: 760px) { .report-hero-summary { padding: 30px 22px; border-radius: 18px; } }
    .ring { width: 172px; height: 172px; display: grid; place-items: center; border-radius: 50%; }
    .ring > div { width: 138px; height: 138px; display: grid; place-content: center; border-radius: 50%; background: var(--paper); text-align: center; }
    .ring strong { font-family: var(--font-display); font-size: 40px; line-height: 1; }
    .ring span { margin-top: 7px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
    .report-summary { max-width: 640px; margin: 0; color: var(--ink-soft); font-size: 16px; }
    .category-results { display: grid; gap: 22px; margin: 54px 0; }
    .category-result { border: 1px solid var(--line); border-radius: 20px; background: var(--card); padding: 34px; }
    .category-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
    .category-head h2 { margin-bottom: 5px; font-size: clamp(28px, 3.5vw, 40px); }
    .category-head > span { border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: var(--white); font-size: 11px; font-weight: 720; padding: 8px 12px; text-transform: uppercase; }
    .category-readiness { margin: 0 0 12px; color: var(--muted); font-size: 11px; }
    .score-bar { height: 5px; overflow: hidden; border-radius: 99px; background: var(--line-soft); }
    .score-bar span { height: 100%; display: block; background: var(--accent); }
    .result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; margin-top: 30px; }
    .result-grid h3 { margin-bottom: 7px; color: var(--accent); font-family: inherit; font-size: 10px; font-weight: 720; letter-spacing: .12em; text-transform: uppercase; }
    .result-grid p { margin: 0; color: var(--ink-soft); font-size: 13px; }
    .wide { grid-column: 1 / -1; }
    .risk-list { margin: 0; padding: 0; list-style: none; }
    .risk-list li { display: grid; gap: 3px; border-top: 1px solid var(--line-soft); padding: 12px 0; }
    .risk-list strong { font-size: 13px; }
    .risk-list span { color: var(--muted); font-size: 12px; }
    .recommendation { border-left: 3px solid var(--accent); border-radius: 0 18px 18px 0; background: var(--accent-soft); margin: 54px 0 22px; padding: 32px 34px; }
    .recommendation h2 { margin: 0; font-size: clamp(28px, 3.7vw, 39px); }
    .report-cta { border-radius: 22px; background: var(--ink); color: var(--white); padding: 48px; }
    .report-cta p:not(.eyebrow) { max-width: 700px; color: #c9d7d2; }
    .report-footer { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 11px; }
    .qualification-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
    .qualification { border: 1px solid var(--line); border-radius: 20px; background: var(--white); padding: 34px; }
    .qualification.muted { background: var(--paper); }
    .qualification > p:not(.micro) { color: var(--ink-soft); font-size: 14px; }
    .prototype-calendar-note { border-bottom: 1px solid #dfd1b8; background: #f7f0e4; color: #66563e; padding: 19px 22px; }
    .prototype-calendar-note strong { display: block; margin-bottom: 4px; font-size: 12px; }
    .prototype-calendar-note p { margin: 0; font-size: 11.5px; }
    .time-card { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
    .time-meta { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 15px 22px; color: var(--ink-soft); font-size: 12px; }
    .time-options { display: grid; gap: 10px; padding: 22px; }
    .time-option { width: 100%; display: flex; justify-content: space-between; gap: 22px; align-items: center; border: 1px solid var(--line); border-radius: 13px; background: var(--white); cursor: pointer; padding: 16px 17px; text-align: left; }
    .time-option.selected { border-color: var(--accent); background: var(--accent-soft); }
    .time-option span { display: grid; gap: 2px; }
    .time-option small { color: var(--muted); }
    .time-option b { color: var(--accent); font-size: 11.5px; }
    .requested { margin: 0; border-top: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font-size: 12.5px; padding: 16px 22px; }
    .scan-context { border: 1px solid var(--line); border-radius: 15px; background: var(--accent-soft); margin-bottom: 28px; padding: 22px; }
    .scan-context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .scan-context-grid div { display: grid; }
    .scan-context-grid span { color: var(--muted); font-size: 9px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
    .scan-context-grid strong { font-family: var(--font-display); font-size: 17px; }
    .confirmation { border: 1px solid var(--line); border-radius: 24px; background: var(--card); box-shadow: var(--shadow); padding: 52px; }
    .language-switch { margin-left: 8px; border-left: 1px solid var(--line); padding-left: 12px; color: var(--muted); font-size: 12px; }
    .trust-note, .review-placeholder { border-left: 3px solid var(--accent); background: var(--card); padding: 20px 22px; color: var(--ink-soft); }
    .review-placeholder { border: 1px dashed var(--line); border-left: 3px solid var(--warm); border-radius: 14px; }
    .compact-scan { border-block: 1px solid var(--line); background: var(--paper-deep); }

    /* Quieter editorial components used in the revised prototype */
    .compact-scan .offer-preview { padding: 50px 0; }
    .compact-scan h2 { max-width: 610px; }
    .editorial-rule { border-top: 1px solid var(--line); }
    .scope-list { margin: 0 0 26px; padding: 0; list-style: none; }
    .scope-list li { border-bottom: 1px solid var(--line-soft); color: var(--ink-soft); padding: 12px 0; }
    .profile-grid { display: grid; grid-template-columns: 1.12fr .72fr; gap: 78px; align-items: start; }
    .profile-photo { overflow: hidden; border-radius: 22px; background: var(--paper-deep); box-shadow: var(--shadow); }
    .profile-photo img { width: 100%; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: center 34%; }
    .portrait-photo-shell { position: relative; background: var(--paper-deep); }
    .portrait-photo-shell img { width: 100%; aspect-ratio: 1.18; object-fit: cover; object-position: center 38%; }
    .portrait-photo-shell .photo-fallback { min-height: 340px; display: none; place-items: center; padding: 34px; color: var(--muted); text-align: center; }
    .portrait-photo-shell.photo-error img { display: none; }
    .portrait-photo-shell.photo-error .photo-fallback { display: grid; }
    .closing.quiet { border: 1px solid var(--line); box-shadow: none; }
    @media (max-width: 980px) {
      .profile-grid { grid-template-columns: 1fr; gap: 46px; }
      .profile-photo { max-width: 620px; }
    }

    @media (max-width: 980px) {
      .nav { display: none; position: absolute; left: 24px; right: 24px; top: 66px; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); padding: 14px; }
      .nav.open { display: flex; }
      .nav .button { margin: 8px 0 0; }
      .menu { display: block; }
      .hero-grid, .portrait-grid, .offer-preview, .two-col, .booking-grid { grid-template-columns: 1fr; gap: 46px; }
      .hero-outcomes, .portrait { max-width: 620px; }
      .booking-copy { position: static; }
      .grid-3 { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .wrap, .narrow { width: min(100% - 32px, 1160px); }
      .section { padding: 72px 0; }
      .hero, .page-hero { padding: 78px 0 58px; }
      .transformation, .vision, .closing, .report-cta, .confirmation { padding: 30px 22px; border-radius: 18px; }
      .transform-head { display: none; }
      .transform-row { grid-template-columns: 1fr; gap: 8px; }
      .transform-row > span { transform: rotate(90deg); }
      .fit-grid, .qualification-grid, .form-grid.two, .result-grid, .scan-context-grid { grid-template-columns: 1fr; }
      .vision { grid-template-columns: 1fr; }
      .support-shift { grid-template-columns: 1fr; }
      .support-shift > span { transform: rotate(90deg); }
      .form { padding: 28px 22px; }
      .report-hero { grid-template-columns: 1fr; }
      .wide { grid-column: auto; }
      .category-result { padding: 26px 22px; }
      .category-head { flex-direction: column; }
      .time-option { align-items: flex-start; flex-direction: column; gap: 10px; }
      .footer-top, .footer-bottom, .report-footer { align-items: flex-start; flex-direction: column; }
      .footer-links { justify-content: flex-start; }
    }
    @media print {
      .site-header, .site-footer, .prototype-note { display: none; }
      .section { padding: 32px 0; }
    }


    /* Final visual refinement: quieter typography, fewer competing panels and more editorial space */
    :root {
      --shadow: 0 14px 40px rgba(23, 51, 48, .055);
    }
    body {
      font-family: "avenir-next-lt-pro", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.66;
    }
    h1, h2, h3 {
      font-family: "iowan-old-style-bt", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      font-weight: 500;
      letter-spacing: -.022em;
    }
    h1 { max-width: 820px; font-size: clamp(42px, 5.25vw, 68px); line-height: 1.065; }
    h2 { font-size: clamp(31px, 3.55vw, 46px); line-height: 1.105; }
    h3 { font-size: clamp(22px, 2.15vw, 29px); line-height: 1.18; }
    .section { padding: 86px 0; }
    .section-tight { padding: 58px 0; }
    .hero { padding: 104px 0 84px; }
    .page-hero { padding: 92px 0 64px; }
    .hero-grid { gap: 76px; }
    .lead { font-size: 17.5px; line-height: 1.72; }
    .transformation {
      border-radius: 18px;
      box-shadow: none;
      padding: 44px;
    }
    .closing {
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: none;
      padding: 48px;
    }
    .card, .form, .calendar-box, .time-card, .confirmation, .portrait, .profile-photo {
      box-shadow: none;
    }
    .card, .qualification, .category-result, .form, .calendar-box, .time-card, .confirmation {
      border-radius: 16px;
    }
    .offer-preview { gap: 64px; padding: 48px 0; }
    .compact-scan .offer-preview { padding: 46px 0; }
    .compact-scan h2 { max-width: 650px; }
    .portrait, .profile-photo { border: 1px solid var(--line); border-radius: 18px; }
    .authority { padding: 8px 22px 18px; }
    .authority > div { padding: 14px 0; }
    .authority strong { font-size: 12.5px; }
    .authority span { font-size: 11.5px; line-height: 1.55; }
    .service-model-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 72px;
      align-items: start;
    }
    .quiet-panel {
      border-top: 1px solid var(--ink);
      padding-top: 24px;
    }
    .quiet-panel p:last-child { margin-bottom: 0; }
    .compact-pair {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }
    .compact-panel {
      border-top: 1px solid var(--line);
      padding: 26px 4px 0;
    }
    .compact-panel p:last-child { margin-bottom: 0; }
    .boundary-note {
      margin-top: 24px;
      border-left: 2px solid var(--accent);
      padding-left: 18px;
      color: var(--ink-soft);
      font-size: 13.5px;
    }
    .review-placeholder p { margin-bottom: 0; }
    .review-placeholder .micro { margin-bottom: 8px; }
    .language-switch { display: inline-flex; gap: 6px; align-items: center; }
    .language-switch a { color: var(--muted); text-decoration: none; }
    .language-switch a.active { color: var(--accent); font-weight: 700; }
    .portrait-photo-shell .photo-fallback {
      min-height: 350px;
      background: linear-gradient(145deg, var(--paper-deep), var(--card));
    }
    .photo-fallback strong {
      display: block;
      margin-bottom: 6px;
      font-family: "iowan-old-style-bt", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      font-size: 25px;
      font-weight: 500;
      color: var(--ink);
    }
    .photo-fallback span { font-size: 12px; }
    @media (max-width: 980px) {
      .service-model-grid, .compact-pair { grid-template-columns: 1fr; gap: 42px; }
    }
    @media (max-width: 720px) {
      h1 { font-size: clamp(38px, 11vw, 53px); }
      h2 { font-size: clamp(29px, 8.5vw, 40px); }
      .section { padding: 66px 0; }
      .section-tight { padding: 48px 0; }
      .hero, .page-hero { padding: 70px 0 54px; }
      .transformation, .closing { padding: 28px 20px; }
      .offer-preview { padding: 40px 0; }
    }

    .review-strip {
      max-width: 820px;
      margin-inline: auto;
      border: 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      padding: 26px 0;
      text-align: center;
    }
    .review-strip p { max-width: 620px; margin-inline: auto; }
    .review-strip .micro { margin-bottom: 8px; }
    .client-perspective {
      border-top: 1px solid var(--ink);
      border-bottom: 1px solid var(--line);
      display: grid;
      grid-template-columns: .48fr 1.52fr;
      gap: 76px;
      padding: 44px 0 48px;
      align-items: start;
    }
    .client-perspective-meta { padding-top: 4px; }
    .client-perspective-meta .micro { margin-bottom: 18px; }
    .client-perspective-person { display: grid; gap: 2px; margin-top: 28px; }
    .client-perspective-person strong { color: var(--ink); font-size: 14px; }
    .client-perspective-person span { color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
    .client-perspective-company { margin-top: 14px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
    .client-perspective-quote { margin: 0; max-width: 760px; }
    .client-perspective-quote p {
      font-family: var(--font-body);
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 400;
      line-height: 1.65;
      letter-spacing: 0;
      color: var(--ink);
      margin: 0 0 20px;
    }
    .client-perspective-quote p:last-child { margin-bottom: 0; }
    .client-perspective.compact-review {
      grid-template-columns: .42fr 1.58fr;
      gap: 46px;
      padding: 34px 0 38px;
    }
    .compact-review .client-perspective-person { margin-top: 20px; }
    .compact-review .client-perspective-quote { max-width: 840px; }
    .compact-review .client-perspective-action { margin-top: 24px; }
    .compact-review .client-perspective-action .button {
      width: 100%;
      justify-content: center;
      text-align: center;
    }
    .compact-review .client-perspective-quote p {
      font-size: clamp(18px, 1.55vw, 22px);
      line-height: 1.65;
      margin-bottom: 16px;
    }
    @media (max-width: 820px) {
      .client-perspective { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 40px; }
      .client-perspective.compact-review { grid-template-columns: 1fr; gap: 24px; padding: 30px 0 34px; }
      .client-perspective-person { margin-top: 18px; }
    }
    .legal-document {
      width: min(100% - 48px, 900px);
      margin-inline: auto;
    }
    .legal-document article {
      border-top: 1px solid var(--line);
      padding: 42px 0 18px;
    }
    .legal-document article:first-child { border-top: 0; padding-top: 0; }
    .legal-document h2 {
      margin-bottom: 22px;
      font-size: clamp(27px, 3vw, 35px);
    }
    .legal-document p { color: var(--ink-soft); }
    .legal-subparagraph { margin: -8px 0 14px 24px; }
    .legal-details {
      margin-top: 26px;
      border-top: 1px solid var(--line);
      color: var(--ink-soft);
      padding-top: 26px;
    }
    .legal-document ul {
      margin: 0 0 22px;
      padding-left: 22px;
      color: var(--ink-soft);
    }
    .legal-document li { margin-bottom: 8px; }
    .legal-document .contact-block {
      margin: 4px 0 22px;
      color: var(--ink-soft);
      line-height: 1.75;
    }
    .legal-document .contact-block a { color: var(--accent); font-weight: 600; }
    .legal-document .legal-note {
      border-left: 2px solid var(--accent);
      margin: 26px 0 0;
      padding-left: 18px;
      color: var(--ink-soft);
    }

    /* Client information is intentionally more compact than the longer legal documents. */
    .client-info-hero { padding-bottom: 30px; }
    .client-info-body { padding-top: 12px; }
    .client-info-body .legal-document article { padding: 28px 0 10px; }
    .client-info-body .legal-document h2 { margin-bottom: 14px; }
    .client-info-body .legal-document p { margin-bottom: 14px; }
    .client-info-body .legal-document .contact-block { margin: 2px 0 14px; }
    @media (max-width: 720px) {
      .client-info-hero { padding-bottom: 24px; }
      .client-info-body { padding-top: 8px; }
      .client-info-body .legal-document article { padding: 24px 0 8px; }
    }

    /*
      Unified typography system
      -------------------------
      The prototype intentionally uses one display face, one body face and a
      restrained type scale. Labels remain in sentence case so the hierarchy
      comes from spacing and size rather than competing capitals and weights.
    */
    :root {
      --font-display: "iowan-old-style-bt", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      --font-body: "avenir-next-lt-pro", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
      --type-label: 13px;
      --type-small: 14px;
      --type-body: 16px;
      --type-lead: 18px;
    }
    body {
      font-family: var(--font-body);
      font-size: var(--type-body);
      font-weight: 400;
      line-height: 1.68;
    }
    p, li, input, select, textarea, button { line-height: 1.68; }
    p { margin-bottom: 20px; }
    strong, b { font-weight: 600; }
    h1, h2, h3 {
      font-family: var(--font-display);
      font-weight: 500;
      letter-spacing: -.018em;
    }
    .brand, .vision-mark, .support-shift > span,
    .ring strong, .photo-fallback strong { font-family: var(--font-display); }
    h1 {
      max-width: 820px;
      margin-bottom: 26px;
      font-size: clamp(44px, 5.2vw, 66px);
      line-height: 1.08;
    }
    h2 {
      margin-bottom: 20px;
      font-size: clamp(32px, 3.5vw, 44px);
      line-height: 1.13;
    }
    h3 {
      margin-bottom: 14px;
      font-size: clamp(24px, 2.2vw, 28px);
      line-height: 1.2;
    }
    .eyebrow, .micro {
      margin-bottom: 16px;
      color: var(--accent);
      font-family: var(--font-body);
      font-size: var(--type-label);
      font-weight: 600;
      letter-spacing: .025em;
      line-height: 1.45;
      text-transform: none;
    }
    .lead {
      max-width: 740px;
      margin-bottom: 32px;
      font-size: var(--type-lead);
      line-height: 1.68;
    }
    .large-copy {
      color: var(--ink-soft);
      font-family: var(--font-display);
      font-size: 21px;
      line-height: 1.55;
    }
    .button, .text-link, .nav-link, .field label {
      font-family: var(--font-body);
      font-weight: 600;
    }
    .button { font-size: 14.5px; line-height: 1.35; }
    .nav-link { font-size: var(--type-small); font-weight: 500; }
    .field label { font-size: 14.5px; line-height: 1.5; }

    .transform-head,
    .progress-meta,
    .question-category,
    .ring span,
    .category-head > span,
    .result-grid h3,
    .scan-context-grid span {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      letter-spacing: .025em;
      line-height: 1.45;
      text-transform: none;
    }
    .outcome span, .card-number {
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: .025em;
    }
    .outcome strong {
      font-family: var(--font-display);
      font-size: 19px;
      font-weight: 500;
      line-height: 1.35;
    }
    .transform-row p,
    .card p,
    .support-shift p,
    .case-sections p,
    .qualification > p:not(.micro),
    .why p:last-child,
    .result-grid p,
    .risk-list strong,
    .risk-list span {
      font-size: 15.5px;
      line-height: 1.68;
    }
    .transform-row p:last-child { font-weight: 500; }
    .practical { font-size: 14.5px; font-weight: 600; line-height: 1.55; }
    .field-note, .disclaimer, .prototype-note,
    .authority span, .time-option small, .requested {
      font-size: 12.5px;
      line-height: 1.6;
    }
    .authority strong { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
    .category-readiness, .time-meta, .report-footer,
    .footer-links, .legal-links, .footer-bottom {
      font-size: 12.5px;
      line-height: 1.55;
    }
    .prototype-calendar-note strong { font-size: 13px; font-weight: 600; }
    .prototype-calendar-note p { font-size: 12.5px; line-height: 1.55; }
    .scan-context-grid strong {
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 500;
      line-height: 1.4;
    }
    .scan-context-note {
      margin: 14px 0 0;
      color: var(--ink-soft);
      font-size: 12.5px;
      line-height: 1.6;
    }
    .scan-context-note span { font-weight: 600; }
    .choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .choice-grid.employee-size { grid-template-columns: repeat(5, 1fr); }
    .choice-card { position: relative; display: block; cursor: pointer; }
    .choice-card input { position: absolute; opacity: 0; pointer-events: none; }
    .choice-card span { min-height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--ink-soft); padding: 11px 10px; text-align: center; font-size: 13.5px; font-weight: 600; line-height: 1.35; transition: .16s ease; }
    .choice-card input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 2px rgba(39, 98, 88, .08); }
    .choice-card input:focus-visible + span { outline: 3px solid rgba(39, 98, 88, .18); outline-offset: 2px; }
    .conditional-field[hidden] { display: none; }
    .selected-time-note { margin-bottom: 24px; border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 18px 20px; color: var(--ink-soft); }
    .selected-time-note p { margin: 0; }
    .selected-time-note strong { color: var(--ink); }
    .category-head h2, .recommendation h2,
    .insight h2, .compact-panel h2 {
      font-size: clamp(28px, 3vw, 36px);
      line-height: 1.18;
    }
    .question h1 { font-size: clamp(34px, 4.6vw, 48px); line-height: 1.14; }
    .case-sections h3 { font-size: clamp(24px, 2.2vw, 28px); }

    .section { padding: 84px 0; }
    .section-tight { padding: 60px 0; }
    .section-heading { margin-bottom: 42px; }
    .hero { padding: 102px 0 82px; }
    .page-hero { padding: 90px 0 64px; }
    .hero h1, .page-hero h1 { font-size: clamp(44px, 4.2vw, 54px); }

    .compact-transformation { padding: 36px 40px; }
    .compact-transformation .section-heading { margin-bottom: 28px; }
    .compact-transformation .transform-row { padding: 14px 0; }
    .client-perspective-followup {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }
    .report-summary-cta { margin-top: 20px; }
    .mobile-header-actions { display: none; }

    /* Portrait crop: upper body and arms remain visible; legs fall outside the frame. */
    .portrait-photo-shell .joyce-portrait {
      width: 100%;
      aspect-ratio: 6 / 5;
      object-fit: cover;
      object-position: center top;
    }

    @media (max-width: 720px) {
      h1 { font-size: clamp(38px, 10.5vw, 50px); }
      .hero h1, .page-hero h1 { font-size: clamp(34px, 9vw, 44px); }
      h2 { font-size: clamp(30px, 8vw, 38px); }
      h3 { font-size: clamp(23px, 6.5vw, 27px); }
      .lead { font-size: 17px; }
      .section { padding: 64px 0; }
      .section-tight { padding: 48px 0; }
      .hero, .page-hero { padding: 68px 0 52px; }
      .compact-transformation { padding: 26px 20px; }
      .compact-transformation .section-heading { margin-bottom: 24px; }
      .client-perspective-followup { justify-content: flex-start; }
      .category-head h2, .recommendation h2,
      .insight h2, .compact-panel h2 { font-size: clamp(27px, 7.5vw, 34px); }
      .choice-grid, .choice-grid.employee-size { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 980px) {
      .employer-header .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
      }
      .employer-header .mobile-call-button {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 12.5px;
      }
      .employer-header .menu { display: block; }
    }
    @media (max-width: 420px) {
      .employer-header .header-inner { gap: 10px; }
      .employer-header .brand span { display: none; }
      .employer-header .mobile-header-actions { gap: 6px; }
      .employer-header .mobile-call-button { padding: 8px 10px; font-size: 12px; }
      .employer-header .menu { padding: 8px 9px; }
    }

  
    /* Blog: clear separation between overview and individual articles. */
    .blog-page-hero { padding-bottom: 42px; }
    .blog-list { border-top: 1px solid var(--ink); }
    .blog-card {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 64px;
      border-bottom: 1px solid var(--line);
      padding: 42px 0 46px;
      align-items: start;
    }
    .blog-card-meta { color: var(--ink-soft); }
    .blog-card-meta .micro { margin-bottom: 6px; }
    .blog-card-copy { max-width: 760px; }
    .blog-card-copy h2 {
      max-width: 720px;
      margin-bottom: 16px;
      font-size: clamp(31px, 3.8vw, 46px);
      line-height: 1.12;
    }
    .blog-card-copy p {
      max-width: 650px;
      margin-bottom: 20px;
      color: var(--ink-soft);
      font-size: 16.5px;
      line-height: 1.72;
    }
    .blog-card-copy .text-link { display: inline-block; }

    .blog-article-hero { padding-bottom: 46px; }
    .blog-back-link {
      display: inline-block;
      margin-bottom: 26px;
      color: var(--accent);
      font-size: 14px;
      font-weight: 600;
    }
    .blog-article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 13px;
    }
    .blog-article-hero h1 {
      max-width: 920px;
      margin-bottom: 26px;
      font-size: clamp(38px, 4.5vw, 54px);
    }
    .blog-article-hero .lead { max-width: 760px; }
    .blog-article-wrap {
      width: min(100% - 48px, 760px);
      margin-inline: auto;
    }
    .blog-article-body > p {
      color: var(--ink-soft);
      font-size: 16.5px;
      line-height: 1.8;
    }
    .blog-article-body h2 {
      margin: 52px 0 18px;
      padding-top: 2px;
      font-size: clamp(28px, 3vw, 35px);
      line-height: 1.18;
    }
    .blog-callout {
      margin: 38px 0 44px;
      border-left: 3px solid var(--accent);
      background: var(--accent-soft);
      padding: 26px 30px;
    }
    .blog-callout h2 {
      margin: 0 0 12px;
      padding: 0;
      font-size: 25px;
    }
    .blog-callout p:last-child {
      margin-bottom: 0;
      color: var(--ink-soft);
      font-size: 15.5px;
      line-height: 1.72;
    }
    .blog-perspective {
      margin: 38px 0 44px;
      border-left: 3px solid var(--accent);
      background: var(--accent-soft);
      padding: 26px 30px;
    }
    .blog-perspective p:last-child {
      margin: 0;
      color: var(--ink);
      font-family: var(--font-display);
      font-size: 22px;
      line-height: 1.5;
    }
    .blog-takeaway {
      margin-top: 56px;
      border-top: 1px solid var(--ink);
      border-bottom: 1px solid var(--line);
      padding: 30px 0 12px;
    }
    .blog-takeaway p:not(.micro) {
      color: var(--ink-soft);
      font-size: 16.5px;
      line-height: 1.75;
    }
    .blog-cta {
      margin-top: 56px;
      border-radius: 18px;
      background: var(--ink);
      color: var(--white);
      padding: 34px 36px;
    }
    .blog-cta h2 {
      margin: 0 0 16px;
      padding: 0;
      font-size: clamp(28px, 3vw, 35px);
      line-height: 1.18;
    }
    .blog-cta p:not(.eyebrow) {
      max-width: 650px;
      color: #c9d7d2;
      font-size: 15.5px;
      line-height: 1.72;
    }
    .blog-cta .button { margin-top: 4px; }
    @media (max-width: 820px) {
      .blog-card { grid-template-columns: 1fr; gap: 16px; }
    }
    @media (max-width: 720px) {
      .blog-page-hero, .blog-article-hero { padding-bottom: 34px; }
      .blog-article-hero h1 { font-size: clamp(34px, 9vw, 44px); }
      .blog-card { padding: 32px 0 36px; }
      .blog-card-copy h2 { font-size: clamp(29px, 8.5vw, 39px); }
      .blog-article-wrap { width: min(100% - 32px, 760px); }
      .blog-callout, .blog-perspective { margin: 32px 0 38px; padding: 22px 20px; }
      .blog-callout h2 { font-size: 23px; }
      .blog-article-body h2 { margin-top: 44px; }
      .blog-cta { margin-top: 42px; padding: 28px 22px; }
      .blog-cta h2 { margin-top: 0; }
    }

    /* Client information: compact page transition and clearly separated contact details. */
    .page-hero.client-info-hero { padding-bottom: 30px; }
    .client-info-hero .lead { margin-bottom: 0; }
    .section.section-tight.client-info-body { padding-top: 12px; }
    .client-info-contacts {
      display: grid;
      gap: 14px;
      max-width: 680px;
      margin: 22px 0;
    }
    .client-info-contact {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--card);
      padding: 20px 22px;
    }
    .client-info-contact .micro { margin-bottom: 10px; }
    .client-info-body .legal-document .client-info-contact .contact-block { margin: 0; }
    @media (max-width: 720px) {
      .page-hero.client-info-hero { padding-bottom: 24px; }
      .section.section-tight.client-info-body { padding-top: 8px; }
      .client-info-contact { padding: 18px; }
    }

    /* --- alleen voor deze standalone scan --- */
    /* Knoptekst in Inter regular (verzoek Eline, 14-09-2026). */
    .button, .back, .restart {
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    .button, .back, .restart { font-weight: 400; }
    /* Subkoppen en labels in Inter medium, capslock (verzoek Eline, 14-09-2026).
       .question-category = "Operational Control · Advice before decisions are made"
       .micro             = "Why this matters for your business", "Recommended route forward"
       .eyebrow           = "Your indicated risk level", "Your result is ready", "Strategy Call"
       .result-grid h3    = "Indicatie van het risico", "Wat staat er op het spel?"
       .progress-meta     = de balk bovenaan met de scannaam en 01 / 13
       Het risicolabel in de categoriekop (.category-head > span) blijft bewust
       zoals het was — dat is een badge, geen label. */
    .question-category,
    .progress-meta,
    .scan-page .micro,
    .scan-page .eyebrow,
    .result-grid h3 {
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      font-weight: 500;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    /* Achtergrond van de scan (verzoek Eline, 14-09-2026). */
    /* Terug naar #f4f6f3 (17-09): het sitetoken #f1f4f0 is iets groener en
       donkerder, waardoor de bijna-witte antwoordblokken er te hard tegen
       afstaken. Deze tint houdt hetzelfde karakter, maar rustiger. */
    body,
    .scan-page { background: #f4f6f3; }

    /* --- In lijn met de site (16-09-2026) ---------------------------------
       De knoppen zijn overgenomen van de gebouwde pagina's, niet uit de
       Elementor-kit: de kit staat op radius 0, maar elke knop op de site
       overschrijft dat met 10px. Waarden van de homepage (pagina 75):
       Inter 14px regular, geen hoofdletters, letterafstand 0, radius 10px,
       padding 12/15. De afrondingen elders in de scan (10-24px) blijven
       staan; de site gebruikt op containers ook 10 en 20px. */
    .scan-page .button {
      border-radius: 10px;
      padding: 12px 15px;
      min-height: 0;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      text-transform: none;
    }

    /* Vorige en volgende in dezelfde maat: Inter 400, 14px, radius 10.
       Verzoek Eline, 17-09-2026. De vorige-knop heeft geen vlak, dus de
       afronding is daar pas zichtbaar als hij ooit een achtergrond krijgt. */
    .scan-page .back,
    .scan-page .restart {
      border-radius: 10px;
      font-size: 14px;
      font-weight: 400;
    }

    /* Knoptekst blijft Inter en in gewone schrijfwijze, ook binnen de site
       (17-09-2026). De Elementor-kit zet op élke <button> Avenir Next, vet en
       in hoofdletters (.elementor-kit-5 button) en die regel is specifieker dan
       onze .button/.back/.restart hierboven. Op de losse scan klopte het daardoor
       wel, op de pagina zelf niet: "← VORIGE" in plaats van "← Vorige". Daarom
       hier nog een keer, nu binnen .scan-page. */
    .scan-page .button,
    .scan-page .back,
    .scan-page .restart {
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      font-weight: 400;
      text-transform: none;
      letter-spacing: 0;
    }

    /* --- Kit-knoppen neutraliseren binnen de scan (17-09-2026) --------------
       De Elementor-kit stijlt élke <button> op de site: donkergroen vlak, witte
       hoofdletters, Avenir 13px vet, afronding 0 — ook in hover. Die regel
       (.elementor-kit-5 button) is specifieker dan de eigen regels van de scan,
       waardoor de antwoordblokken en de vorige-knop op de pagina veranderden in
       groene site-knoppen. Hieronder zetten we per knopsoort de eigen vormgeving
       van de scan terug, zwaar genoeg om van de kit te winnen, en voor alle
       standen tegelijk zodat er bij hover niets verspringt. */
    .scan-page .answer,
    .scan-page .answer:hover,
    .scan-page .answer:focus,
    .scan-page .answer:active {
      font: inherit;
      line-height: 1.68;
      letter-spacing: 0;
      text-transform: none;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255,255,255,.72);
      color: var(--ink);
      padding: 16px 18px;
      text-align: left;
    }
    .scan-page .answer.selected,
    .scan-page .answer.selected:hover,
    .scan-page .answer.selected:focus { border-color: var(--accent); background: var(--accent-soft); }

    .scan-page .back,
    .scan-page .back:hover,
    .scan-page .back:focus,
    .scan-page .back:active,
    .scan-page .restart,
    .scan-page .restart:hover,
    .scan-page .restart:focus,
    .scan-page .restart:active {
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      padding: 10px 0;
    }

    .scan-page .button,
    .scan-page .button:focus,
    .scan-page .button:active {
      border: 1px solid var(--accent);
      background: var(--accent);
      color: var(--white);
      line-height: 1.3;
      text-align: center;
    }
    .scan-page .button:hover { border-color: var(--accent-deep); background: var(--accent-deep); color: var(--white); }
    .scan-page .button.light,
    .scan-page .button.light:hover,
    .scan-page .button.light:focus { border-color: var(--white); background: var(--white); color: var(--ink); }
    .scan-page .button:disabled,
    .scan-page .button:disabled:hover,
    .scan-page .back:disabled { opacity: .42; cursor: not-allowed; }

    /* Afronding blijft staan bij hover (verzoek Eline, 17-09-2026).
       De Elementor-kit zet de afronding van élke <button> terug naar 0 zodra
       je erover gaat (button_hover_border_radius in de kit, en die regel is
       specifieker dan de onze). Daardoor sprongen vorige/volgende — en ook de
       antwoordblokken — bij hover ineens naar vierkant. Hieronder leggen we de
       afronding vast voor alle standen, zodat er niets meer verspringt. */
    .scan-page .button,
    .scan-page .button:hover,
    .scan-page .button:focus,
    .scan-page .button:active,
    .scan-page .back,
    .scan-page .back:hover,
    .scan-page .back:focus,
    .scan-page .back:active,
    .scan-page .restart,
    .scan-page .restart:hover,
    .scan-page .restart:focus,
    .scan-page .restart:active { border-radius: 10px; }
    .scan-page .answer,
    .scan-page .answer:hover,
    .scan-page .answer:focus,
    .scan-page .answer:active { border-radius: 13px; }
    .scan-page .dot { border-radius: 50%; }

    /* De koppen op de site staan strak afgespatieerd (kit: -0,022em). */
    .scan-page h1,
    .scan-page h2 { letter-spacing: -0.02em; }

    /* Strategy Call-blok in het rapport: de kop hoort wit te zijn (erft van
       .report-cta), maar op de site zet de Elementor-kit (.elementor-kit-5 h2)
       er #222 overheen — donkere tekst op groen. Daarom hier expliciet
       (melding Eline, 21-09-2026; geldt voor EN en NL). */
    .scan-page .report-cta h2 { color: var(--white); }

    /* Vraagkoppen op 45px (verzoek Eline, 17-09-2026; stond eerst op 55).
       Op smalle schermen zakt hij naar 36px, anders vult een vraag van vier
       regels het hele telefoonscherm en zie je de antwoorden niet meer. */
    .scan-page .question h1 { font-size: clamp(36px, 4.4vw, 45px); }

    /* Geen header/footer: de scan staat los, dus iets meer lucht aan de bovenkant. */
    .scan-page { padding-top: 56px; }
    @media (max-width: 640px) { .scan-page { padding-top: 32px; } }

    /* (ongebruikt sinds de kop verviel, blijft staan voor als de scan ooit
       toch in een pagina met navigatie wordt gezet) --- eenvoudige kop zonder menu --- */
    .scan-nav { display: flex !important; position: static; flex-direction: row; align-items: center;
      justify-content: flex-end; gap: 10px; border: 0; background: none; padding: 0; box-shadow: none; }
    .scan-nav .button { margin: 0; }
    @media (max-width: 640px) {
      .scan-nav { gap: 8px; }
      .scan-nav .button { font-size: 12px; padding: 9px 12px; min-height: 38px; }
    }