/* Meetriq: gedeeld stijlblad voor meetriq.studio en meetriq.cloud.
   Volgt de herziene huisstijl: papier en marine, geel alleen als lijn,
   geen schaduwen, geen gradients, tekst nooit kleiner dan 12px.
   Lay-out: container van 1240px, secties gescheiden door ruimte. */
:root{
  color-scheme:light;
  --bg:#faf7f0; --surface:#ffffff; --subtle:#f2efe6;
  --fg:#0b0b0b; --muted:#5a5854;
  --rule:#e6e2d6; --rule-strong:#c9c4b5; --field-border:#8a8679;
  --marine-900:#06122a; --marine-800:#0b2545; --marine-700:#133a66;
  --marine-500:#2e5d8f; --marine-300:#6fa0cf; --marine-100:#d7e5f2;
  --paper:#faf7f0;
  --accent:#ffd400; --signal-cyan:#2fd9c8; --signal-deep:#0f766e;
  --danger:#c7402f;
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius-sm:6px; --radius-md:10px;
  --bar-a:#0b2545; --bar-b:#6fa0cf; --bar-c:#8a8679;
  --gutter:24px; --container:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1rem/1.6 var(--font);-webkit-font-smoothing:antialiased;hyphens:auto}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance;hyphens:manual}
:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px}
.mq-dark :focus-visible{outline-color:var(--signal-cyan)}
.mq-skip{position:absolute;left:16px;top:-48px;background:var(--surface);color:var(--fg);padding:8px 12px;border-radius:var(--radius-sm);border:1px solid var(--field-border);z-index:200}
.mq-skip:focus{top:8px}

.mq-wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.mq-section{padding:96px 0}
.mq-section--tight{padding:64px 0}
.mq-section--subtle{background:var(--subtle)}
.mq-dark{background:var(--marine-800);color:var(--paper)}
.mq-dark--deep{background:var(--marine-900)}
@media(max-width:700px){.mq-section{padding:64px 0}.mq-section--tight{padding:48px 0}:root{--gutter:16px}}

/* Typografie */
.mq-display{font-weight:800;font-size:clamp(2.5rem,5.6vw,4.5rem);line-height:1.02;letter-spacing:-.03em}
.mq-h2{font-weight:800;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.02em}
.mq-h3{font-weight:600;font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.mq-lead{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.45;max-width:34em}
.mq-text{max-width:38em}
.mq-small{font-size:.875rem;line-height:1.55}
.mq-muted{color:var(--muted)}
.mq-dark .mq-muted{color:var(--marine-300)}
.mq-label{font-weight:600;font-size:.8125rem;line-height:1.3;letter-spacing:.01em;color:var(--muted)}
.mq-dark .mq-label{color:var(--marine-300)}
.mq-num{font-variant-numeric:tabular-nums}
.mq-code{font-family:var(--mono);font-size:.8125rem}
.mq-stack{display:flex;flex-direction:column;gap:16px}
.mq-stack--lg{gap:32px}
.mq-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px}

/* De basislijn: een gele lijn onder wat telt */
@keyframes mq-bl{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mq-baseline{display:block;width:64px;height:3px;border-radius:3px;background:var(--accent);transform-origin:left;animation:mq-bl .6s cubic-bezier(.4,0,.2,1) both}

/* Knoppen */
.mq-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .9375rem/1.2 var(--font);text-decoration:none;border-radius:var(--radius-sm);border:1px solid transparent;padding:12px 22px;cursor:pointer;transition:background-color .15s ease-out,border-color .15s ease-out,color .15s ease-out}
.mq-btn--primary{background:var(--marine-800);color:var(--paper);padding-bottom:18px}
.mq-btn--primary::after{content:"";position:absolute;left:22px;right:22px;bottom:8px;height:3px;border-radius:3px;background:var(--accent)}
.mq-btn--primary:hover{background:var(--marine-700)}
.mq-dark .mq-btn--primary{background:var(--marine-700);border-color:var(--marine-500)}
.mq-dark .mq-btn--primary:hover{background:var(--marine-500)}
.mq-btn--secondary{background:var(--surface);color:var(--fg);border-color:var(--field-border)}
.mq-btn--secondary:hover{border-color:var(--fg)}
.mq-btn--ghost{background:transparent;color:var(--paper);border-color:var(--marine-300)}
.mq-btn--ghost:hover{background:var(--marine-700)}
.mq-btn--sm{font-size:.875rem;padding:8px 16px}
.mq-btn--sm.mq-btn--primary{padding-bottom:14px}
.mq-btn--sm.mq-btn--primary::after{left:16px;right:16px;bottom:6px}
.mq-btn--block{width:100%}
.mq-actions{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.mq-link{font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px}
.mq-link:hover{text-decoration-color:currentColor}
.mq-dark .mq-link{text-decoration-color:var(--marine-500)}

/* Header */
.mq-header{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--rule)}
.mq-header--marine{background:var(--marine-800);border-bottom-color:var(--marine-700);color:var(--paper)}
.mq-header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.mq-lockup{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.mq-tile{flex:none;display:grid;place-items:center;background:var(--marine-800);border:1px solid var(--marine-700);border-radius:25%}
.mq-lockup-name{display:block;font-weight:800;font-size:1.25rem;line-height:1;letter-spacing:-.02em}
.mq-lockup-sub{display:block;margin-top:5px;font:500 .75rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal-deep)}
.mq-header--marine .mq-lockup-sub,.mq-dark .mq-lockup-sub{color:var(--marine-300)}
.mq-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.mq-nav a.mq-navlink{position:relative;padding:8px 12px;border-radius:var(--radius-sm);text-decoration:none;font-weight:500;font-size:.9375rem;color:var(--muted);transition:background-color .15s ease-out,color .15s ease-out}
.mq-nav a.mq-navlink:hover{background:var(--subtle);color:var(--fg)}
.mq-nav a.mq-navlink[aria-current="page"]{color:var(--fg);font-weight:600}
.mq-nav a.mq-navlink[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
.mq-header--marine .mq-nav a.mq-navlink{color:var(--marine-300)}
.mq-header--marine .mq-nav a.mq-navlink:hover{background:var(--marine-700);color:var(--paper)}
.mq-header--marine .mq-nav a.mq-navlink[aria-current="page"]{color:var(--paper)}
.mq-nav .mq-btn{margin-left:8px}

/* Hero */
.mq-hero{padding:96px 0}
.mq-hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:center}
.mq-hero-copy{display:flex;flex-direction:column;gap:24px}
.mq-proof{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600;font-size:.9375rem}
.mq-proof li{display:flex;align-items:center;gap:10px}
.mq-proof li::before{content:"";width:14px;height:3px;border-radius:3px;background:var(--accent);flex:none}
.mq-hero-art{display:flex;justify-content:center}
@media(max-width:900px){.mq-hero{padding:64px 0}.mq-hero-grid{grid-template-columns:1fr;gap:40px}.mq-hero-art{justify-content:flex-start}}

/* Logo-animatie: tekent zichzelf eenmalig */
.d{stroke-dasharray:1.01 1.01;animation:mq-d var(--dur,.9s) cubic-bezier(.4,0,.2,1) var(--t,0s) both}
.p{transform-box:fill-box;transform-origin:center;animation:mq-p var(--dur,.4s) cubic-bezier(.34,1.56,.64,1) var(--t,0s) both}
.g{transform-box:fill-box;transform-origin:50% 100%;animation:mq-g var(--dur,.55s) cubic-bezier(.2,.7,.2,1) var(--t,0s) both}
@keyframes mq-d{0%{stroke-dashoffset:1.01;opacity:0}2%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes mq-p{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes mq-g{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Rasters en kaarten */
.mq-grid{display:grid;gap:24px}
.mq-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.mq-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mq-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1024px){.mq-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.mq-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mq-grid--4,.mq-grid--3,.mq-grid--2{grid-template-columns:1fr}}
.mq-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);padding:24px;color:var(--fg)}
a.mq-card{text-decoration:none;transition:border-color .15s ease-out}
a.mq-card::after{content:"";position:absolute;left:24px;right:24px;bottom:-2px;height:3px;border-radius:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.4,0,.2,1)}
a.mq-card:hover{border-color:var(--rule-strong)}
a.mq-card:hover::after,a.mq-card:focus-visible::after{transform:scaleX(1)}
.mq-card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);font-weight:600;font-variant-numeric:tabular-nums}
.mq-dark .mq-card{background:var(--marine-800);border-color:var(--marine-700);color:var(--paper)}
.mq-dark--deep .mq-card{background:var(--marine-800)}

/* Voor wie */
.mq-who{display:flex;flex-direction:column;gap:8px}
.mq-who::before{content:"";width:24px;height:3px;border-radius:3px;background:var(--accent)}
.mq-who strong{font-weight:600;font-size:1.0625rem}

/* Twee kolommen: kop links, inhoud rechts */
.mq-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;align-items:start}
@media(max-width:900px){.mq-split{grid-template-columns:1fr;gap:32px}}
.mq-steps{display:flex;flex-direction:column}
.mq-step{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--rule-strong)}
.mq-step:last-child{border-bottom:1px solid var(--rule-strong)}
.mq-dark .mq-step{border-color:var(--marine-700)}
.mq-step-n{font-weight:800;font-size:1.25rem;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums}
.mq-dark .mq-step-n{color:var(--marine-300)}
.mq-step-t{font-weight:600;font-size:1.125rem;line-height:1.3}
.mq-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:s}
.mq-flow li{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:3px solid var(--marine-800)}
.mq-dark .mq-flow li{border-top-color:var(--marine-500)}
.mq-flow li:last-child{border-top-color:var(--accent)}
@media(max-width:900px){.mq-flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.mq-flow{grid-template-columns:1fr}}

/* Lijsten met namen */
.mq-names{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.mq-names li{color:var(--fg)}
.mq-rows{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 32px;align-items:baseline}
@media(max-width:700px){.mq-rows{grid-template-columns:1fr;gap:8px}}

/* Modules */
.mq-modgroup{display:flex;flex-direction:column;gap:14px}
.mq-modgroup + .mq-modgroup{margin-top:40px}
.mq-mod{flex-direction:row;align-items:flex-start;gap:16px;padding:18px 20px}
.mq-mod-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.mq-mod-name{font-weight:600;font-size:1.0625rem;line-height:1.3}
.mq-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-weight:600;font-size:.75rem;line-height:1;padding:5px 9px;border-radius:999px;border:1px solid var(--rule-strong);background:var(--surface);color:var(--fg)}
.mq-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal-deep)}
.mq-dark .mq-chip{background:var(--marine-700);border-color:var(--marine-700);color:var(--paper)}
.mq-dark .mq-chip::before{background:var(--signal-cyan)}

/* Modulepagina */
.mq-modhero{padding:56px 0 64px}
.mq-back{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.875rem;text-decoration:none;color:var(--marine-300)}
.mq-back:hover{color:var(--paper)}
.mq-modtitle{display:flex;align-items:center;gap:20px;margin:28px 0 20px;flex-wrap:wrap}
.mq-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mq-benefits li{padding-top:16px;border-top:3px solid var(--marine-800);font-weight:600;font-size:1.0625rem;line-height:1.4}
@media(max-width:800px){.mq-benefits{grid-template-columns:1fr;gap:16px}}
.mq-note{display:flex;flex-direction:column;gap:4px;background:var(--subtle);border:1px solid var(--rule);border-radius:var(--radius-md);padding:14px 18px;max-width:44em}
.mq-pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--rule)}
.mq-pager a{font-weight:600;text-decoration:none}
.mq-pager a:hover{text-decoration:underline}

/* Tabellen */
.mq-tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius-md);background:var(--surface)}
.mq-table{width:100%;border-collapse:collapse;font-size:.9375rem;min-width:640px}
.mq-table th{text-align:left;font-weight:600;font-size:.8125rem;color:var(--muted);background:var(--subtle);padding:12px 16px;border-bottom:1px solid var(--rule)}
.mq-table td{padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.mq-table tr:last-child td{border-bottom:0}
.mq-table td:first-child{font-weight:600}

/* Formulier */
.mq-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:var(--surface);color:var(--fg);border-radius:var(--radius-md);padding:28px}
.mq-field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.875rem}
.mq-field--wide{grid-column:1/-1}
.mq-field input,.mq-field select,.mq-field textarea{font:400 1rem/1.4 var(--font);color:var(--fg);background:var(--surface);border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:10px 12px;width:100%;transition:border-color .15s ease-out}
.mq-field textarea{min-height:88px;resize:vertical}
.mq-field input:hover,.mq-field select:hover,.mq-field textarea:hover{border-color:var(--fg)}
.mq-field input:focus-visible,.mq-field select:focus-visible,.mq-field textarea:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px}
.mq-form-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.mq-status{grid-column:1/-1;font-size:.875rem;font-weight:600;border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:10px 12px}
.mq-status[hidden]{display:none}
.mq-status--error{border-color:var(--danger);color:var(--danger)}
@media(max-width:600px){.mq-form{grid-template-columns:1fr;padding:20px}}

/* Video */
.mq-video{display:block;width:100%;aspect-ratio:16/9;background:var(--marine-900);border:1px solid var(--marine-700);border-radius:var(--radius-md)}
.mq-videobox{display:flex;flex-direction:column;gap:10px}

/* Prijsvergelijking */
.mq-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:stretch}
@media(max-width:900px){.mq-calc{grid-template-columns:1fr}}
.mq-panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;gap:20px}
.mq-fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.mq-fieldset legend{padding:0;margin-bottom:10px;font-weight:600;font-size:.875rem}
.mq-seg{display:flex;flex-wrap:wrap;gap:8px}
.mq-seg label{position:relative;cursor:pointer}
.mq-seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.mq-seg span{display:block;font-weight:500;font-size:.875rem;padding:8px 14px 10px;border:1px solid var(--field-border);border-radius:var(--radius-sm);background:var(--surface)}
.mq-seg input:checked + span{border-color:var(--fg);font-weight:600;box-shadow:inset 0 -3px 0 var(--accent)}
.mq-seg input:focus-visible + span{outline:2px solid var(--signal-deep);outline-offset:2px}
.mq-range{width:100%;accent-color:var(--marine-800)}
.mq-rangehead{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:.875rem}
.mq-rangehead output{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.mq-kpi{display:flex;flex-direction:column;gap:6px}
.mq-kpi-v{align-self:flex-start;font-weight:800;font-size:clamp(2.25rem,4.6vw,3.25rem);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-bottom:9px;border-bottom:3px solid var(--accent)}
.mq-bars{display:flex;flex-direction:column;gap:18px}
.mq-barrow{display:flex;flex-direction:column;gap:6px}
.mq-barhead{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:.9375rem}
.mq-barhead span:last-child{font-variant-numeric:tabular-nums}
.mq-bar{display:flex;height:22px;border-radius:3px;overflow:hidden;background:var(--subtle);border:1px solid var(--rule)}
.mq-bar i{display:block;height:100%}
.mq-bar .a{background:var(--bar-a)}
.mq-bar .b{background:var(--bar-b);border-left:2px solid var(--surface)}
.mq-bar .c{background:var(--bar-c);border-left:2px solid var(--surface)}
.mq-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.8125rem;color:var(--muted)}
.mq-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.mq-fine{font-size:.8125rem;line-height:1.55;color:var(--muted);max-width:60em}

/* Aanmeldpagina */
.mq-loginpage{min-height:100vh;display:grid;place-items:center;background:var(--marine-800);padding:32px 16px}
.mq-login{width:100%;max-width:400px;background:var(--surface);color:var(--fg);border-radius:var(--radius-md);padding:32px;display:flex;flex-direction:column;gap:16px}
.mq-login h1{font-weight:800;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;margin-top:8px}
.mq-login .mq-field input{background:var(--surface)}
.mq-pwrow{display:flex;gap:8px}
.mq-pwrow input{flex:1;min-width:0}
.mq-or{display:flex;align-items:center;gap:12px;font-size:.8125rem;color:var(--muted)}
.mq-or::before,.mq-or::after{content:"";flex:1;height:1px;background:var(--rule-strong)}
.mq-loginfoot{font-size:.8125rem;color:var(--muted);text-align:center;line-height:1.6}

/* Footer */
.mq-footer{background:var(--marine-900);color:var(--marine-300);padding:40px 0;font-size:.875rem}
.mq-footer-in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-start;justify-content:space-between}
.mq-footer .mq-lockup{color:var(--paper)}
.mq-footer .mq-lockup-sub{color:var(--marine-300)}
.mq-footer ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.mq-footer a{color:var(--paper)}
.mq-footer-legal{display:flex;flex-direction:column;gap:6px;max-width:44em}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Donker thema */
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark;--bg:#06122a;--surface:#0b2545;--subtle:#0e2f57;--fg:#faf7f0;--muted:#a9c4e0;
    --rule:#133a66;--rule-strong:#2e5d8f;--field-border:#6fa0cf;--signal-deep:#2fd9c8;
    --bar-a:#6fa0cf;--bar-b:#2e5d8f;--bar-c:#d7e5f2}
  .mq-btn--primary{background:var(--marine-700);border-color:var(--marine-500)}
  .mq-btn--primary:hover{background:var(--marine-500)}
  .mq-dark--deep{background:#030a1a}
  .mq-section--subtle{background:#081a36}
  .mq-footer{background:#030a1a;border-top:1px solid var(--rule)}
  .mq-header--marine{background:var(--marine-900)}
  .mq-lockup-sub{color:var(--marine-300)}
  .mq-tile{border-color:var(--marine-500)}
}
/* Onder de motorkap voor techneuten */
.mq-tech{border:1px solid var(--rule-strong);border-radius:var(--radius-md);background:var(--subtle)}
.mq-tech summary{cursor:pointer;list-style:none;padding:16px 20px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-weight:600}
.mq-tech summary::-webkit-details-marker{display:none}
.mq-tech summary::after{content:"+";font-weight:800;font-size:1.25rem;line-height:1}
.mq-tech[open] summary::after{content:"\2212"}
.mq-tech-body{padding:0 20px 20px;display:flex;flex-direction:column;gap:10px}
.mq-tech-body dt{font-weight:600;font-size:.8125rem;color:var(--muted)}
.mq-tech-body dd{margin:0 0 8px}
.mq-dark .mq-tech{background:var(--marine-800);border-color:var(--marine-700)}
.mq-nick{font-weight:600;font-size:.8125rem;color:var(--muted)}
.mq-dark .mq-nick{color:var(--marine-300)}
.mq-view[hidden]{display:none}
.mq-example{border-left:3px solid var(--accent);padding:2px 0 2px 16px;max-width:36em}
.mq-sub{font-size:.9375rem;color:var(--muted)}
.mq-total{font-weight:800}
.mq-logo-art{filter:none}
[tabindex="-1"]:focus{outline:none}
.mq-form .mq-muted{color:var(--muted)}
.mq-form .mq-link{color:var(--fg)}

/* Demo-schermen: donkere toepassing met voorbeeldgegevens */
.mq-app{min-height:100vh;display:flex;flex-direction:column;background:var(--marine-900);color:var(--paper)}
.mq-app-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 24px;background:var(--marine-800);border-bottom:1px solid var(--marine-700)}
.mq-app-top .mq-lockup-name{font-size:1.0625rem}
.mq-app-body{display:grid;grid-template-columns:200px minmax(0,1fr);flex:1}
.mq-app-nav{background:var(--marine-800);border-right:1px solid var(--marine-700);padding:16px 12px;display:flex;flex-direction:column;gap:2px}
.mq-app-nav span{display:block;padding:8px 12px;border-radius:var(--radius-sm);font-weight:500;font-size:.9375rem;color:var(--marine-300)}
.mq-app-nav span[aria-current]{background:var(--marine-700);color:var(--paper);font-weight:600}
.mq-app-main{padding:28px;display:flex;flex-direction:column;gap:24px;min-width:0}
.mq-app-foot{padding:12px 24px;border-top:1px solid var(--marine-700);color:var(--marine-300);font:500 .6875rem/1.4 var(--mono)}
@media(max-width:760px){.mq-app-body{grid-template-columns:1fr}.mq-app-nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--marine-700)}.mq-app-main{padding:16px}}
.mq-dpanel{background:var(--marine-800);border:1px solid var(--marine-700);border-radius:var(--radius-md);padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.mq-dgrid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.mq-dgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.mq-dgrid,.mq-dgrid--2{grid-template-columns:1fr}}
.mq-dlabel{font-weight:600;font-size:.8125rem;color:var(--marine-300)}
.mq-kpi-d{font-weight:800;font-size:2.25rem;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;align-self:flex-start;padding-bottom:8px;border-bottom:3px solid var(--accent)}
.mq-kpi-s{font-weight:800;font-size:1.75rem;line-height:1.1;font-variant-numeric:tabular-nums}
.mq-dtable{width:100%;border-collapse:collapse;font-size:.9375rem}
.mq-dtable th{text-align:left;font-weight:600;font-size:.8125rem;color:var(--marine-300);padding:8px 10px;border-bottom:1px solid var(--marine-700)}
.mq-dtable td{padding:10px;border-bottom:1px solid var(--marine-700);vertical-align:top}
.mq-dtable .r{text-align:right;font-variant-numeric:tabular-nums}
.mq-dtable tr.mq-click{cursor:pointer}
.mq-dtable tr.mq-click:hover td{background:var(--marine-700)}
.mq-dtable tr[aria-selected="true"] td{background:var(--marine-700)}
.mq-dtable button{all:unset;cursor:pointer;font-weight:600;text-decoration:underline;text-decoration-color:var(--marine-500);text-underline-offset:4px}
.mq-dtable button:focus-visible{outline:2px solid var(--signal-cyan);outline-offset:2px}
.mq-demo-chip{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.75rem;padding:5px 10px;border-radius:999px;border:1px solid var(--marine-500);color:var(--paper)}
.mq-input-d{font:400 1rem/1.4 var(--font);color:var(--paper);background:var(--marine-900);border:1px solid var(--marine-300);border-radius:var(--radius-sm);padding:10px 12px;width:100%;max-width:360px}
.mq-pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.75rem;line-height:1;padding:5px 9px;border-radius:999px;background:var(--marine-700);color:var(--paper);white-space:nowrap}
.mq-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--marine-300)}
.mq-pill--ok::before{background:var(--signal-cyan)}
.mq-quote{border-left:3px solid var(--marine-500);padding-left:14px;display:flex;flex-direction:column;gap:2px}
.mq-quote b{font-weight:600;font-size:.8125rem;color:var(--marine-300)}
.mq-kpirow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--marine-700)}
.mq-kpirow:last-child{border-bottom:0}
.mq-kpirow > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.mq-btn--d{background:var(--marine-700);color:var(--paper);border-color:var(--marine-500)}
.mq-btn--d:hover{background:var(--marine-500)}
.mq-app .mq-muted{color:var(--marine-300)}
.mq-app .mq-lockup-sub{color:var(--signal-cyan)}
.mq-app .mq-code{color:var(--marine-100)}
.mq-kpirow .mq-btn{white-space:nowrap}
.mq-app a:focus-visible,.mq-app button:focus-visible,.mq-app input:focus-visible{outline-color:var(--signal-cyan)}

/* ===== Redesign ronde 1: studio-home en cloud-landing ===== */
section[id]{scroll-margin-top:72px}

/* Eyebrow: mono, hoofdletters, gedempt (het signaal blijft vrij voor één element per sectie) */
.mq-eyebrow{font:500 .75rem/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mq-dark .mq-eyebrow{color:var(--marine-300)}
.mq-head .mq-sub{max-width:40em}

/* Tikdoelen van minstens 44px */
.mq-btn--sm{min-height:44px}
.mq-nav a.mq-navlink{display:inline-flex;align-items:center;min-height:44px}
.mq-range{min-height:44px}
.mq-lockup{min-height:44px}
.mq-actions .mq-link{display:inline-flex;align-items:center;min-height:44px}
.mq-tech summary{min-height:44px}

/* Tegel op een marinevlak: rand zichtbaar houden */
.mq-dark .mq-tile{border-color:var(--marine-500)}

/* Hero: bewijspunten en toelichting na de knoppen */
.mq-hero-copy .mq-proof{margin-top:4px}
.mq-herofine{padding-top:20px;border-top:1px solid var(--rule);max-width:44em}
.mq-dark .mq-herofine{border-top-color:var(--marine-700)}

/* Voorbeeld-weekrapport in de hero van meetriq.studio */
.mq-report{width:100%;max-width:400px;display:flex;flex-direction:column;gap:20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-md);padding:24px;position:relative}
.mq-report-head{display:flex;align-items:center;gap:14px}
.mq-report-list{display:flex;flex-direction:column}
.mq-report-list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--rule);font-size:.9375rem}
.mq-report-list b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.mq-report .mq-kpi-v{font-size:clamp(2rem,3.4vw,2.75rem)}

/* Aanbod: prijs bovenaan met basislijn */
.mq-offer .mq-price{align-self:flex-start;font-weight:800;font-size:1.375rem;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums;padding-bottom:8px;border-bottom:3px solid var(--accent);margin:4px 0 6px}
.mq-offer p{color:var(--fg)}

/* Referenties en technologie */
.mq-logos{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center}
.mq-logo{display:flex;align-items:center;min-height:36px}
.mq-logo img{display:block;height:32px;width:auto;max-width:160px}
.mq-logo--text{font-weight:600;color:var(--muted)}
@media (prefers-color-scheme:dark){.mq-logo img{background:#faf7f0;padding:6px 10px;border-radius:var(--radius-sm);box-sizing:content-box}}
.mq-tech .mq-logos{padding:0 20px 20px}

/* Rekenmodule: linkerpaneel niet oprekken */
.mq-calc{align-items:start}

/* Focusring op marine vlakken buiten .mq-dark: cyaan (3:1 vereist) */
.mq-header--marine :focus-visible,.mq-footer :focus-visible,.mq-modhero :focus-visible{outline-color:var(--signal-cyan)}

/* Modulepagina's en pager: tikdoelen */
.mq-back{min-height:44px}
.mq-pager a{display:inline-flex;align-items:center;min-height:44px}

/* Uitklappanelen: rand van 3:1 tegen de achtergrond, ook in het donkere thema */
.mq-tech{border-color:var(--field-border)}

/* Loginkaart ook zichtbaar in het donkere thema */
.mq-login{border:1px solid var(--rule-strong)}
@media (prefers-color-scheme:dark){.mq-loginpage{background:var(--marine-900)}}
/* Onder de motorkap: titel links, toelichting en plusteken rechts */
.mq-tech summary{justify-content:flex-start}
.mq-tech summary > span:nth-child(2){margin-left:auto}
/* Demo-panelen op eigen hoogte */
.mq-dgrid--2{align-items:start}

/* Demo's */
.mq-flow--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.mq-flow--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.mq-flow--4{grid-template-columns:1fr}}
.mq-app-nav{flex-wrap:wrap}
.mq-dscroll{overflow-x:auto}
.mq-dtable--stack{min-width:640px}
@media(max-width:600px){
  .mq-dtable--stack{min-width:0}
  .mq-dtable--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mq-dtable--stack tr{display:block;padding:10px 0;border-bottom:1px solid var(--marine-700)}
  .mq-dtable--stack td{display:block;padding:2px 0;border:0}
  .mq-dtable--stack td[data-label]::before{content:attr(data-label);display:block;font-weight:600;font-size:.75rem;color:var(--marine-300);margin-top:6px}
  .mq-kpirow{flex-direction:column}
  .mq-kpirow > div:last-child{align-items:flex-start!important}
  .mq-kpirow .mq-btn{white-space:normal}
}
.mq-dtable button{min-height:44px;display:inline-flex;align-items:center}

/* Tabellen: op smalle schermen gestapeld in plaats van zijwaarts scrollen */
@media(max-width:600px){
  .mq-table--stack{min-width:0}
  .mq-table--stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .mq-table--stack tr{display:block;padding:12px 16px;border-bottom:1px solid var(--rule)}
  .mq-table--stack tr:last-child{border-bottom:0}
  .mq-table--stack td{display:block;padding:2px 0;border:0}
  .mq-table--stack td[data-label]::before{content:attr(data-label);display:block;font-weight:600;font-size:.75rem;color:var(--muted);margin-top:6px}
  .mq-header-in{gap:4px 16px}
  .mq-nav{gap:0}
}