/* ==========================================================================
   Buy Back Your Week — Nederlandse site
   Merkrichting: DAGLICHT (zie lib/brand.js voor de volledige redenering).

   De week als gedrukt vel dat je bij daglicht leest. Warm, licht, precies,
   kalm. De vorige richting (donkere console met neon-limoen) is vervangen
   omdat hij de positioneringstoets van het board niet doorstond: tien
   concurrenten zien er exact zo uit, en een controlekamer bij nacht bevestigt
   het probleem van de lezer in plaats van te laten zien hoe het eruitziet als
   het is opgelost.

   Wat bleef: het weekvlak van 40 blokken en de vier keuzes met elk een eigen
   kleur. Dat is het enige onderscheidende visuele bezit van dit merk. Wat
   veranderde: ze lezen nu als inktstempels op papier in plaats van als neon
   op glas, en een blok dat van je bord af is, is nu letterlijk open.

   Kleuren, schriften en maten staan NIET in dit bestand. Die komen uit
   brand.css, dat gegenereerd wordt uit lib/brand.js.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
img{display:block}
a{color:inherit}
button{font:inherit}
::selection{background:var(--live);color:var(--sheet)}
:focus-visible{outline:2px solid var(--live);outline-offset:2px;border-radius:var(--r)}

/* --------------------------------------------------------------- chrome -- */
.nlh{
  position:sticky;top:0;z-index:60;
  background:rgba(244,243,239,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--seam);
}
.nlh-in{
  max-width:var(--maxw);margin:0 auto;padding:11px var(--gut);
  display:flex;align-items:center;gap:22px;
}

/* woordmerk: beeldmerk + naam + payoff */
.wm{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.wm-mark{display:block;flex:0 0 auto;line-height:0}
.wm-mark svg{display:block}
.wm-txt{display:block;line-height:1.15}
.wm-txt b{
  display:block;font-family:var(--display);font-weight:600;font-size:16px;
  letter-spacing:-.02em;color:var(--ink);
}
.wm-txt i{
  display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:1px;
}
.nlh nav{display:flex;align-items:center;gap:19px;margin-left:auto}
.nlh nav a{
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500;
  padding:5px 0;border-bottom:2px solid transparent;
}
.nlh nav a:hover{color:var(--ink);border-bottom-color:var(--seam)}
.nlh nav a.on{color:var(--ink);border-bottom-color:var(--live)}
.lang{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  color:var(--muted);text-decoration:none;border:1px solid var(--seam);
  padding:4px 7px;border-radius:var(--r);background:var(--sheet);
}
.lang:hover{color:var(--ink);border-color:var(--ink-2)}
.burger{
  display:none;background:var(--sheet);border:1px solid var(--seam);color:var(--ink);
  border-radius:var(--r);padding:9px 12px;margin-left:auto;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
}

/* ---------------------------------------------------------------- knop --- */
.b{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--live);color:var(--sheet);text-decoration:none;
  font-family:var(--sans);font-weight:600;font-size:15.5px;letter-spacing:-.005em;
  padding:13px 22px;border:1px solid var(--live);border-radius:var(--r);
  cursor:pointer;transition:background .14s ease,transform .1s ease;
  min-height:46px;
}
.b:hover{background:var(--live-deep);border-color:var(--live-deep)}
.b:active{transform:translateY(1px)}
.b.sm{padding:9px 15px;font-size:14.5px;min-height:38px}
.b.gh{background:var(--sheet);color:var(--ink);border-color:var(--ink);font-weight:500}
.b.gh:hover{background:var(--sheet-2);border-color:var(--ink)}
.b[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.b .ar{font-family:var(--mono);font-size:14px}

/* ------------------------------------------------------------- sectie ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section.sec{border-top:1px solid var(--seam);padding:clamp(46px,6.5vw,84px) 0}
section.sec:first-of-type{border-top:0}

/* De kopregel van een sectie leest als een regel op een staat: nummer,
   streep, onderwerp. */
.sec-h{display:flex;align-items:center;gap:13px;margin-bottom:28px;flex-wrap:wrap}
.idx{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;line-height:1;
  color:var(--sheet);background:var(--ink);padding:6px 8px;border-radius:var(--r);
}
.sec-h .kicker{position:relative;padding-left:14px}
.sec-h .kicker::before{
  content:"";position:absolute;left:0;top:50%;width:6px;height:1px;background:var(--seam);
}
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}

h1,h2,h3{font-family:var(--display);letter-spacing:-.022em;line-height:1.08;margin:0;color:var(--ink)}
h1{font-size:clamp(34px,6vw,62px);font-weight:600}
h2{font-size:clamp(27px,3.7vw,42px);font-weight:600;max-width:20ch}
h3{font-size:clamp(18px,2.1vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 16px}
.lede{font-size:clamp(17px,1.8vw,20px);color:var(--ink-2);max-width:64ch;line-height:1.55}
.sub{color:var(--muted);max-width:66ch}
.fine{font-size:13.5px;color:var(--muted);line-height:1.55}
.mono{font-family:var(--mono)}
strong{font-weight:600;color:var(--ink)}
.hl{color:var(--live)}

/* --------------------------------------------------------------- hero ---- */
.hero{padding:clamp(42px,6.5vw,88px) 0 clamp(36px,5vw,62px)}
.hero h1{margin:16px 0 0;max-width:15ch}
/* De nadruk in de kop staat onderstreept in plaats van in kleur: rustiger,
   en het werkt ook als iemand de pagina afdrukt. */
.hero h1 em{
  font-style:normal;color:var(--ink);
  background:linear-gradient(to top,var(--live-tint) 0 .34em,transparent .34em);
  box-shadow:inset 0 -.06em 0 var(--live);
}
.hero .lede{margin-top:20px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;align-items:center}
.trust{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:24px;
  font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em;
}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{
  content:"";width:7px;height:7px;border:1.5px solid var(--live);border-radius:1px;
}

/* --------------------------------------------------------- weekraster --- */
/* Het kernbezit. Een gevuld blok is werk dat bij jou ligt; een open blok is
   ruimte die je hebt teruggekocht. Dat verschil moet je van drie meter zien. */
.weekbox{
  border:1px solid var(--seam);border-radius:var(--r);background:var(--sheet);
  padding:clamp(18px,2.4vw,26px);
  box-shadow:0 1px 0 var(--shade),0 12px 28px -22px rgba(10,10,10,.5);
}
.weekbar{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;margin-bottom:15px;
  padding-bottom:12px;border-bottom:1px solid var(--seam-soft);
}
.grid40{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.blk{
  aspect-ratio:1/1;border-radius:1px;
  background:transparent;border:1.5px solid var(--seam);
  transition:transform .12s ease;position:relative;
}
.blk.k{background:var(--keep-fill);border-color:var(--keep-fill)}
.blk.d{background:var(--delegate-fill);border-color:var(--delegate-fill)}
.blk.a{background:var(--automate-fill);border-color:var(--automate-fill)}
/* Geschrapt werk bestaat niet meer: vergrijsd én doorgestreept. */
.blk.e{background:var(--eliminate-fill);border-color:var(--eliminate-fill)}
.blk.e::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - .8px),var(--eliminate) calc(50% - .8px),var(--eliminate) calc(50% + .8px),transparent calc(50% + .8px));
}
.blk.on{transform:scale(1.16)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--muted)}
.legend b{display:inline-flex;align-items:center;gap:7px;font-weight:400;color:var(--ink-2)}
.legend i{width:10px;height:10px;border-radius:1px;display:inline-block;font-style:normal}
.i-k{background:var(--keep-fill)}
.i-d{background:var(--delegate-fill)}
.i-a{background:var(--automate-fill)}
.i-e{background:var(--eliminate-fill)}

/* --------------------------------------------------------------- lijst -- */
.cols{display:grid;gap:clamp(18px,2.6vw,28px)}
.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start}

.card{
  border:1px solid var(--seam);border-radius:var(--r);background:var(--sheet);
  padding:clamp(18px,2.2vw,24px);
  box-shadow:0 1px 0 var(--shade);
}
.card h3{margin-bottom:9px}
.card p{color:var(--ink-2);margin:0;font-size:15.5px}
.card .n{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted);
  display:block;margin-bottom:12px;text-transform:uppercase;
}

/* herkenning: genummerde regels op een staat, geen kaartjes */
.recog{border-top:1px solid var(--seam);padding:0;margin:0;list-style:none}
.recog li{
  list-style:none;display:flex;gap:18px;align-items:flex-start;
  padding:16px 0;border-bottom:1px solid var(--seam-soft);
}
.recog li span.m{
  font-family:var(--mono);font-size:11.5px;color:var(--muted);flex:0 0 28px;padding-top:4px;
  letter-spacing:.06em;
}
.recog li p{margin:0;color:var(--ink-2)}

/* kosten / rekensom: het getal is het grootste element in zijn blok */
.tally{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.tally div{background:var(--sheet);padding:clamp(18px,2.2vw,24px)}
.tally .v{font-family:var(--display);font-size:clamp(34px,4.6vw,52px);font-weight:600;letter-spacing:-.04em;display:block;line-height:.95;color:var(--ink)}
.tally .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:12px}
.tally .n{color:var(--ink-2);font-size:14.5px;display:block;margin-top:8px}

/* stappen */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden;padding:0;margin:0}
.steps li{list-style:none;background:var(--sheet);padding:clamp(18px,2.4vw,26px);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:11.5px;color:var(--sheet);background:var(--ink);
  border-radius:var(--r);padding:6px 8px;line-height:1;letter-spacing:.06em;
}
.steps h3{margin-bottom:7px}
.steps p{margin:0;color:var(--ink-2);font-size:15.5px}
.steps .tag{
  font-family:var(--mono);font-size:11.5px;color:var(--gold);letter-spacing:.09em;
  text-transform:uppercase;display:inline-block;margin-top:12px;
  background:var(--gold-tint);padding:4px 8px;border-radius:var(--r);
}

/* keuze-stempels: de kleur is een vlak, niet een randje */
.choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.choices div{background:var(--sheet);padding:0}
.choices .ch-k{--k:var(--keep);--kf:var(--keep-fill)}
.choices .ch-d{--k:var(--delegate);--kf:var(--delegate-fill)}
.choices .ch-a{--k:var(--automate);--kf:var(--automate-fill)}
.choices .ch-e{--k:var(--eliminate);--kf:var(--eliminate-fill)}
.choices h3{
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  font-family:var(--mono);font-weight:500;color:var(--k);
  margin:0;padding:clamp(16px,2.2vw,20px) clamp(16px,2.2vw,22px) 0;
  display:flex;align-items:center;gap:9px;
}
.choices h3::before{content:"";width:13px;height:13px;border-radius:1px;background:var(--kf);flex:0 0 auto}
.choices p{font-size:14.5px;color:var(--ink-2);margin:0;padding:11px clamp(16px,2.2vw,22px) clamp(16px,2.2vw,20px)}

/* prijskaarten */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.pr{background:var(--sheet);padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column}
.pr.now{background:var(--sheet-2);box-shadow:inset 0 3px 0 var(--live)}
.pr .step{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.pr h3{margin:11px 0 4px;font-size:23px}
.pr .amt{font-family:var(--display);font-size:clamp(32px,3.8vw,44px);font-weight:600;letter-spacing:-.04em;margin:14px 0 3px;line-height:1;color:var(--ink)}
.pr .per{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.05em}
.pr ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.pr ul li{font-size:14.5px;color:var(--ink-2);padding-left:19px;position:relative;line-height:1.45}
.pr ul li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border:1.5px solid var(--live);border-radius:1px}
.pr .go{margin-top:auto;padding-top:24px}
.pr .go .b{width:100%;justify-content:center}

/* bewijs / eerlijkheid — het merk maakt eerlijkheid zichtbaar */
.proof{
  border:1px solid var(--seam);border-left:3px solid var(--gold);border-radius:var(--r);
  background:var(--sheet);padding:clamp(20px,2.6vw,28px);
  box-shadow:0 1px 0 var(--shade);
}
.proof h3{margin-bottom:11px}
.proof p{color:var(--ink-2);margin-bottom:12px}
.proof ul{margin:0;padding-left:19px;color:var(--ink-2);display:grid;gap:9px;font-size:15.5px}
.proof ul li::marker{color:var(--gold)}

/* faq */
.faq{border-top:1px solid var(--seam)}
.faq details{border-bottom:1px solid var(--seam-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 44px 18px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.015em;color:var(--ink);
}
.faq summary:hover{color:var(--live)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:15px;
  font-family:var(--mono);color:var(--live);font-size:21px;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--ink-2);margin:0 0 18px;max-width:72ch;font-size:15.5px}

/* formulieren */
.form{display:grid;gap:13px;max-width:520px}
.form label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form input,.form textarea,.form select{
  background:var(--sheet);border:1px solid var(--seam);border-radius:var(--r);
  color:var(--ink);padding:13px 14px;font:inherit;font-size:16px;width:100%;
}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--live);box-shadow:0 0 0 3px var(--live-tint)}
.form textarea{min-height:130px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:14px;color:var(--muted)}
.ok{color:var(--live)}
.err{color:#C23A22}

/* eind-cta: een vel dat op de grond ligt */
.final{
  border:1px solid var(--seam);border-radius:var(--r);background:var(--sheet);
  padding:clamp(30px,4.4vw,56px);text-align:center;
  box-shadow:0 1px 0 var(--shade),0 20px 44px -34px rgba(10,10,10,.55);
}
.final h2{max-width:20ch;margin:0 auto 16px}
.final .lede{margin:0 auto;text-align:center}
.final .cta-row{justify-content:center}

/* voet */
.nlf{border-top:1px solid var(--seam);padding:42px 0 64px;margin-top:22px}
.nlf-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:grid;gap:26px}
.nlf nav{display:flex;gap:18px;flex-wrap:wrap}
.nlf nav a{color:var(--muted);text-decoration:none;font-size:14px}
.nlf nav a:hover{color:var(--ink);text-decoration:underline}
.nlf .biz{font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.75}

/* ==========================================================================
   MERKGIDS (/merk) — de merkgids gebruikt dezelfde onderdelen als de site,
   plus een handvol dingen die alleen daar voorkomen.
   ========================================================================== */
.mk-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.mk-sw{background:var(--sheet);padding:0}
.mk-sw .chip{height:88px;display:block;border-bottom:1px solid var(--seam)}
.mk-sw .txt{padding:14px 16px 16px;display:block}
.mk-sw .nm{font-family:var(--display);font-weight:600;font-size:17px;display:block;color:var(--ink)}
.mk-sw .hx{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--muted);display:block;margin-top:3px}
.mk-sw .us{font-size:13.5px;color:var(--ink-2);display:block;margin-top:9px;line-height:1.45}

.mk-type{border:1px solid var(--seam);border-radius:var(--r);background:var(--sheet);padding:clamp(20px,2.6vw,28px);display:grid;gap:8px}
.mk-type+.mk-type{margin-top:1px}
.mk-type .spec{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mk-type .samp{line-height:1.05;color:var(--ink);overflow-wrap:anywhere}
.mk-type .samp.d{font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,54px);letter-spacing:-.03em}
.mk-type .samp.s{font-family:var(--sans);font-size:clamp(17px,2vw,21px);line-height:1.5;font-weight:400}
.mk-type .samp.m{font-family:var(--mono);font-size:clamp(13px,1.4vw,16px);letter-spacing:.06em}
.mk-type .why{color:var(--ink-2);font-size:15px;margin:6px 0 0;max-width:70ch}

.mk-logo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.mk-logo>div{background:var(--sheet);padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;align-items:flex-start;gap:16px;justify-content:space-between}
.mk-logo .lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mk-logo .stage{display:flex;align-items:center;justify-content:center;width:100%;padding:22px 0;border:1px dashed var(--seam);border-radius:var(--r)}
.mk-logo .stage.dark{background:var(--ink);border-color:transparent}
.mk-logo .stage.tiny svg{width:24px;height:24px}

.mk-do{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.mk-do>div{background:var(--sheet);padding:clamp(18px,2.2vw,24px)}
.mk-do h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px;font-weight:500}
.mk-do .yes h4{color:var(--live)}
.mk-do .no h4{color:#C23A22}
.mk-do ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.mk-do li{font-size:15px;color:var(--ink-2);padding-left:20px;position:relative;line-height:1.45}
.mk-do .yes li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--live);border-radius:1px}
.mk-do .no li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:#C23A22;border-radius:1px}

.mk-swap{width:100%;border-collapse:collapse;font-size:15px}
.mk-swap th,.mk-swap td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--seam-soft);vertical-align:top}
.mk-swap th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--seam)}
.mk-swap td.from{color:var(--eliminate);text-decoration:line-through;width:40%}
.mk-swap td.to{color:var(--ink)}
.mk-tablewrap{border:1px solid var(--seam);border-radius:var(--r);background:var(--sheet);overflow-x:auto}

.mk-words{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mk-words li{
  font-family:var(--mono);font-size:12.5px;color:var(--eliminate);
  border:1px solid var(--seam);border-radius:var(--r);padding:6px 10px;
  background:var(--sheet);text-decoration:line-through;
}

.mk-pers{display:grid;gap:1px;background:var(--seam);border:1px solid var(--seam);border-radius:var(--r);overflow:hidden}
.mk-pers>div{background:var(--sheet);padding:clamp(18px,2.2vw,24px);display:grid;grid-template-columns:minmax(0,180px) 1fr;gap:20px;align-items:start}
.mk-pers h3{font-size:19px}
.mk-pers .is{color:var(--ink-2);margin:0 0 7px;font-size:15.5px}
.mk-pers .no{color:var(--muted);margin:0;font-size:15px}
.mk-pers .no::before{content:"Niet: ";font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--eliminate)}

.mk-dl{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.mk-dl a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--ink);
  text-decoration:none;border:1px solid var(--ink);border-radius:var(--r);
  padding:9px 13px;background:var(--sheet);
}
.mk-dl a:hover{background:var(--ink);color:var(--sheet)}

/* ------------------------------------------------------------ responsief - */
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .c3,.c4,.choices,.prices,.tally,.mk-swatches,.mk-logo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-pers>div{grid-template-columns:1fr;gap:10px}
  .nlh nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--seam);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px;
  }
  .nlh nav.open{display:flex}
  .nlh nav a{padding:13px 0;border-bottom:1px solid var(--seam-soft)}
  .nlh nav .b{margin-top:12px;justify-content:center}
  .nlh nav .lang{align-self:flex-start;margin-top:12px}
  .burger{display:inline-block}
  .nlh-in{position:relative}
  .wm-txt i{display:none}
}
@media(max-width:640px){
  body{font-size:16px}
  .c2,.c3,.c4,.choices,.prices,.tally,.mk-swatches,.mk-logo,.mk-do{grid-template-columns:1fr}
  .grid40{grid-template-columns:repeat(8,1fr)}
  .cta-row .b{width:100%;justify-content:center}
  .steps li{grid-template-columns:1fr;gap:12px}
  .steps li::before{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* Afdrukken: de week hoort op papier te kunnen. */
@media print{
  .nlh,.nlf,.cta-row,.burger{display:none!important}
  body{background:#fff;font-size:11pt}
  .weekbox,.card,.final{box-shadow:none;break-inside:avoid}
}

/* Het woordmerk is op mobiel een raakvlak, geen regel tekst: minimaal 44px
   hoog, ook als de payoff eronder wegvalt. */
.wm{min-height:44px}

/* De hoofdknop in de kop is een knop, geen navigatielink. Zonder deze regel
   wint `.nlh nav a` op specificiteit en staat de belangrijkste knop van de
   site in donkergrijs op donkergroen (1,1:1 — praktisch onzichtbaar). */
.nlh nav a.b,
.nlh nav a.b:hover,
.nlh nav a.b.on{color:var(--sheet);border-bottom-color:transparent}