/* Layout: one narrow column, one screen per step, like a test run that ends in a report.
   Color and type follow m2q.be: Montserrat, M2Q blue and red, pill buttons. Deliberately light only. */
#m2q-scan{--blue:#065DA2;--blue-dark:#044a82;--red:#C0021F;--ink:#1F2933;--mute:#56626C;--line:#C9DBEA;--tint:#EAF2F9;--red-tint:#FBEAED;--amber:#8A5A00;--amber-tint:#FFF4DC;--green:#1B6E3C;--green-tint:#E5F4EA;--paper:#FFFFFF;
 --font:"Montserrat","Helvetica Neue",Arial,sans-serif;
 max-width:720px;margin:0 auto;padding-block:100px 72px;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;background:var(--paper);text-align:left}
#m2q-scan *{box-sizing:border-box}
#m2q-scan h1,#m2q-scan h2,#m2q-scan h3,#m2q-scan p,#m2q-scan ol,#m2q-scan ul,#m2q-scan fieldset{margin:0;padding:0;border:0}
#m2q-scan h1,#m2q-scan h2{font-family:var(--font);color:var(--blue);font-weight:700;text-transform:none;letter-spacing:0;text-wrap:balance}
#m2q-scan h1:focus,#m2q-scan h2:focus{outline:none}
#m2q-scan h1{font-size:clamp(28px,5vw,38px);line-height:1.18}
#m2q-scan h2{font-size:clamp(22px,4vw,28px);line-height:1.25}
#m2q-scan h3{font-family:var(--font);font-size:13px;line-height:1.3;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}
#m2q-scan .eyebrow{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--red)}
#m2q-scan .step{display:grid;gap:24px}
#m2q-scan .stack{display:grid;gap:12px}
#m2q-scan .lead{font-size:18px;color:var(--ink)}
#m2q-scan .small{font-size:14px;color:var(--mute)}
#m2q-scan a{color:var(--blue);text-decoration:underline}
#m2q-scan .areas{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;counter-reset:a;border-top:1px solid var(--line)}
#m2q-scan .areas li{counter-increment:a;display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;min-width:0;margin:0}
#m2q-scan .areas li::before{content:counter(a);color:var(--blue);font-variant-numeric:tabular-nums;font-weight:700;min-width:1em}
#m2q-scan button{font-family:var(--font);cursor:pointer}
#m2q-scan .btn{display:inline-block;border:2px solid var(--blue);border-radius:999px;padding:13px 28px;background:var(--blue);color:#fff;font-size:14px;line-height:1.2;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-align:center;min-height:48px}
#m2q-scan .btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff}
#m2q-scan .btn.red{background:var(--red);border-color:var(--red)}
#m2q-scan .btn.red:hover{background:#9a0119;border-color:#9a0119}
#m2q-scan .btn.white{background:#fff;border-color:#fff;color:var(--blue)}
#m2q-scan .btn.white:hover{background:var(--tint);border-color:var(--tint);color:var(--blue)}
#m2q-scan .btn[disabled]{background:#fff;border-color:var(--line);color:#7b8791;cursor:not-allowed}
#m2q-scan .link{background:none;border:0;padding:12px 4px;color:var(--blue);font-size:15px;font-weight:600;text-decoration:underline;min-height:44px;text-transform:none;letter-spacing:0}
#m2q-scan .link:hover{background:none;color:var(--blue-dark)}
#m2q-scan :focus-visible{outline:3px solid var(--red);outline-offset:2px}
#m2q-scan .progress{display:grid;gap:8px}
#m2q-scan .bar{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
#m2q-scan .bar i{display:block;height:6px;border-radius:3px;background:var(--line)}
#m2q-scan .bar i.on{background:var(--blue)}
#m2q-scan .opts{display:grid;gap:10px}
#m2q-scan .opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;background:#fff;margin:0;font-size:16px;font-weight:500;line-height:1.4;color:var(--ink)}
#m2q-scan .opt:hover{border-color:var(--blue)}
#m2q-scan .opt:has(input:checked){border-color:var(--blue);background:var(--tint)}
#m2q-scan .opt input{margin:3px 0 0;flex:none;width:18px;height:18px;accent-color:var(--blue)}
#m2q-scan .nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#m2q-scan label.field{display:grid;gap:6px;font-weight:600;font-size:15px;margin:0}
#m2q-scan input[type=email]{width:100%;font-family:var(--font);font-size:16px;line-height:1.3;color:var(--ink);background:#fff;border:1.5px solid var(--blue);border-radius:10px;padding:13px 14px;min-height:48px;box-shadow:none}
#m2q-scan .error{color:var(--red);font-size:14px;font-weight:600}
#m2q-scan .check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;margin:0;font-weight:400}
#m2q-scan .check input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--blue)}
#m2q-scan .trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#m2q-scan .notice{background:var(--amber-tint);color:#5c3c00;border-radius:8px;padding:10px 12px;font-size:14px}
#m2q-scan .verdict{display:grid;gap:14px;background:var(--tint);border-radius:12px;padding:22px}
#m2q-scan .scale{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#m2q-scan .scale span{display:block;border-radius:6px;background:#fff;color:var(--mute);text-align:center;padding:8px 4px;font-size:14px;font-weight:700;letter-spacing:.04em}
#m2q-scan .scale span.on{background:var(--blue);color:#fff}
#m2q-scan .score{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
#m2q-scan .score b{font-size:32px;line-height:1;color:var(--blue);font-weight:700}
#m2q-scan .todo{list-style:none;display:grid;gap:0;border-top:1px solid var(--line)}
#m2q-scan .todo li{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--line);margin:0}
#m2q-scan .todo strong{font-weight:700}
#m2q-scan .rows{list-style:none;display:grid;border-top:1px solid var(--line)}
#m2q-scan .rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;margin:0}
#m2q-scan .pill{flex:none;border-radius:999px;padding:3px 12px;font-size:13px;font-weight:700}
#m2q-scan .pill.s2{background:var(--green-tint);color:var(--green)}
#m2q-scan .pill.s1{background:var(--amber-tint);color:var(--amber)}
#m2q-scan .pill.s0{background:var(--red-tint);color:var(--red)}
#m2q-scan .pill.sq{background:#EDEFF1;color:var(--mute)}
#m2q-scan .cta{display:grid;gap:14px;background:var(--blue);color:#fff;border-radius:12px;padding:24px;justify-items:start}
#m2q-scan .cta h2{color:#fff}
#m2q-scan .cta p{color:#fff}
@media (max-width:520px){#m2q-scan .areas{grid-template-columns:minmax(0,1fr)}#m2q-scan .nav .btn{flex:1 1 100%}#m2q-scan .cta .btn{width:100%}}
@media (prefers-reduced-motion:no-preference){#m2q-scan .step{animation:m2qIn .18s ease-out}@keyframes m2qIn{from{transform:translateY(4px)}to{transform:none}}}

/* Knop en popup voor blogpagina's: [m2q_ai_quick_scan_popup] */
a.m2q-scan-open.m2q-scan-open{display:inline-block;margin:8px 0;padding:14px 28px;border-radius:999px;background:#C0021F;color:#fff!important;font-family:"Montserrat","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.3;font-weight:700;text-align:center;text-decoration:none!important}
a.m2q-scan-open.m2q-scan-open:hover{background:#9a0119;color:#fff!important}
a.m2q-scan-open.m2q-scan-open:focus-visible{outline:3px solid #065DA2;outline-offset:2px}
#m2q-scan-dialog{width:min(720px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:min(6vh,48px) auto auto;padding:0;border:0;border-radius:16px;background:#fff;overflow:auto;box-shadow:0 20px 60px rgba(6,40,80,.35)}
@media (max-height:640px),(max-width:520px){#m2q-scan-dialog{margin-top:16px}}
html.m2q-scan-locked{overflow:hidden}
#m2q-scan-dialog::backdrop{background:rgba(10,30,60,.6)}
#m2q-scan-dialog #m2q-scan{max-width:none;padding:32px clamp(20px,5vw,44px) 40px}
#m2q-scan-dialog .m2q-scan-close{position:sticky;top:10px;float:right;z-index:2;display:block;width:44px;height:44px;margin:10px 10px -54px 0;padding:0;border:0;border-radius:50%;background:#EAF2F9;color:#065DA2;font:400 26px/44px Arial,sans-serif;text-align:center;cursor:pointer}
#m2q-scan-dialog .m2q-scan-close:hover{background:#C9DBEA;color:#044a82}
#m2q-scan-dialog .m2q-scan-close:focus-visible{outline:3px solid #C0021F;outline-offset:2px}
#m2q-scan-dialog #m2q-scan h1,#m2q-scan-dialog #m2q-scan .progress{padding-right:44px}