/* Unter site · gedeeld door alle pagina's. Nu: het mobiele menu (Nick 15-10: "op mobiel geen menu").
   site.js bouwt de knop en het menuscherm uit de bestaande <nav>; onder 900px verbergen de pagina's .links zelf. */
.mm-knop{display:none}
/* Sticky navigatie op elke breedte (Nick 15-10: "menu moet sticky worden op mobiel", daarna "kan je het menu op desktop
   ook sticky maken"). overflow-x:clip in plaats van hidden,
   anders wordt body een scrollcontainer en blijft niets plakken. De subbalk van de pagina's plakt eronder. */
html:root,html:root body{overflow-x:clip}   /* sterker dan de body-regel van de pagina, ook als site.css eerder laadt */
html body > nav{position:sticky;top:0;z-index:40;background:var(--paper,#F5F7F4)}
html body .sub{top:64px}
html:root{scroll-padding-top:124px}   /* ankers (zoals index.html#faq) landen onder nav en subbalk */
@media (max-width:900px){
  .mm-knop{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;border:0;background:var(--oat,#E9ECE8);color:var(--ink,#0A0B0D);cursor:pointer;padding:0;flex:none}
  .mm-knop svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
  .mm-knop:focus-visible{outline:2px solid var(--ink,#0A0B0D);outline-offset:3px}
  nav .right{gap:8px}
}
.mm{position:fixed;inset:0;z-index:100;background:var(--paper,#F5F7F4);color:var(--ink,#0A0B0D);display:flex;flex-direction:column;padding:0 16px env(safe-area-inset-bottom,0px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;overflow-y:auto;overscroll-behavior:contain}
.mm.open{opacity:1;visibility:visible;transition:opacity .3s ease}
.mm-top{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between}
.mm-top img{width:112px;display:block}
.mm-dicht{display:grid;place-items:center;width:38px;height:38px;border-radius:999px;border:0;background:var(--oat,#E9ECE8);color:inherit;cursor:pointer;padding:0}
.mm-dicht svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.mm-dicht:focus-visible,.mm a:focus-visible{outline:2px solid var(--ink,#0A0B0D);outline-offset:3px}
.mm-lbl{margin:28px 0 8px;font-family:var(--mono,'DM Mono',monospace);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#646A71)}
.mm ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line,rgba(10,11,13,.09))}
.mm li{border-bottom:1px solid var(--line,rgba(10,11,13,.09))}
.mm li a{display:flex;align-items:center;justify-content:space-between;padding:16px 0;font-size:34px;font-weight:400;line-height:1.05;letter-spacing:-0.035em;color:inherit;text-decoration:none}
.mm li a::after{content:"";width:9px;height:9px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);margin-right:6px;opacity:.35}
.mm li a[aria-current="page"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime,#DDFF1F);margin-right:12px;flex:none;order:-1}
.mm li a[aria-current="page"]{justify-content:flex-start}
.mm li a[aria-current="page"]::after{margin-left:auto}
.mm-onder{margin-top:auto;padding:32px 0 24px;display:flex;flex-direction:column;gap:12px}
.mm-onder .pill{height:54px;width:100%;font-size:17px}
.mm-onder .mm-contact{text-align:center;font-size:16px;color:var(--ink-2,#3A3F45);text-decoration:underline;text-underline-offset:4px;padding:8px 0}
html.mm-vast,html.mm-vast body{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .mm li{transform:translateY(14px);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease}
  .mm.open li{transform:none;opacity:1}
  .mm.open li:nth-child(2){transition-delay:.04s}.mm.open li:nth-child(3){transition-delay:.08s}
  .mm.open li:nth-child(4){transition-delay:.12s}.mm.open li:nth-child(5){transition-delay:.16s}.mm.open li:nth-child(6){transition-delay:.2s}
}
@media (min-width:901px){.mm{display:none}}

/* Cookiemelding (meten.js, Nick 17-10). Kaart linksonder, op mobiel over de volle breedte. Twee gelijke knoppen:
   weigeren is even makkelijk en even zichtbaar als accepteren. De lime stip zonder outline, label in DM Mono. */
.ck{position:fixed;left:24px;bottom:24px;z-index:90;width:min(400px,calc(100vw - 32px));box-sizing:border-box;padding:22px 22px 20px;border-radius:20px;background:var(--ink,#0A0B0D);color:var(--paper,#F5F7F4);font-family:inherit;box-shadow:0 18px 50px rgba(10,11,13,.28);opacity:0;transform:translateY(16px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.ck.open{opacity:1;transform:none}
.ck-lbl{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--mono,'DM Mono',monospace);font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:rgba(245,247,244,.6)}
.ck-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime,#DDFF1F);flex:none}
.ck-txt{margin:0 0 18px;font-size:15px;line-height:1.45;font-weight:400;color:var(--paper,#F5F7F4)}
.ck-txt a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(245,247,244,.4)}
.ck-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ck-knop{height:46px;border:0;border-radius:999px;background:var(--paper,#F5F7F4);color:var(--ink,#0A0B0D);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.ck-knop:hover{background:#fff}
.ck-knop:focus-visible,.ck-txt a:focus-visible{outline:2px solid var(--lime,#DDFF1F);outline-offset:3px}
.ck-instel{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Mobiel pakket (Nick 20-10): op een telefoon een lagere kaart, zodat de hero en zijn knoppen vrij blijven.
   Zelfde tekst en dezelfde twee gelijke knoppen; het label valt weg, de kaart zegt zelf waar hij over gaat. */
@media (max-width:600px){
  .ck{left:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));width:calc(100vw - 24px);padding:16px 16px 14px;border-radius:18px}
  .ck-lbl{display:none}
  .ck-txt{font-size:14px;line-height:1.4;margin-bottom:12px}
  .ck-knop{height:44px}
}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* Mobiel pakket (Nick 20-10): alles wat je aantikt is op een telefoon minstens 44px hoog. Het tikvlak groeit
   onzichtbaar mee (::after); logo en knoppen houden hun maat en hun plek. De voetlinks krijgen echte regels van 44px. */
@media (max-width:900px){
  html body > nav a:has(> img.logo),html body > nav .right .pill,.mm-knop,.mm-dicht,html body .foot .meta a,html body .foot .ck-instel{position:relative}
  html body > nav a:has(> img.logo)::after,html body > nav .right .pill::after,html body .foot .meta a::after,html body .foot .ck-instel::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
  .mm-knop::after,.mm-dicht::after{content:"";position:absolute;inset:-3px;border-radius:999px}
  /* voetlinks: elke regel 44px hoog in plaats van 21px met 10px ertussen */
  html body .foot ul{gap:0}
  html body .foot ul a{display:inline-flex;align-items:center;min-height:44px}
  /* losse tekstlinks naast of onder een knop */
  html body .ctas a:not(.pill),html body .card > a{position:relative}
  html body .ctas a:not(.pill)::after,html body .card > a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;transform:translateY(-50%)}
}

/* Nagebootste schermen (Nick 20-10, na een bezoeker die twee keer op "Continue" tikte): de checkout op de pagina is
   een plaatje. Wie erop tikt, krijgt een balk met de weg naar de echte demo. site.js zet hem neer. */
.pd-card{cursor:pointer}
.voorproef{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:95;display:flex;align-items:center;gap:14px;width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;padding:6px 6px 6px 18px;border-radius:999px;background:var(--ink,#0A0B0D);color:var(--paper,#F5F7F4);font-size:14px;line-height:1.3;box-shadow:0 18px 50px rgba(10,11,13,.28);opacity:0;transform:translate(-50%,12px);transition:opacity .25s ease,transform .4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.voorproef.open{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.voorproef a{display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:999px;background:var(--lime,#DDFF1F);color:var(--ink,#0A0B0D);font-weight:500;text-decoration:none;white-space:nowrap}
.voorproef a:focus-visible{outline:2px solid var(--paper,#F5F7F4);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.voorproef{transition:none}}
/* Rekenhulp-knop in de balk (Nick 21-10); onder 900px staat hij in het menu, de balk houdt alleen Try it yourself. */
@media (max-width:900px){nav .right a.nav-calc{display:none}}
/* Middelbreed (901-1180px): de balk heeft met de rekenhulp-knop meer ruimte nodig. Linkteksten breken niet af; "Contact" staat dan
   alleen in de footer en het menu, de knoppen blijven. */
nav .links a{white-space:nowrap}
@media (min-width:901px) and (max-width:1180px){
  html body > nav{gap:24px}
  nav .links{gap:18px}
  nav .right{gap:10px}
  nav .right a:not(.pill){display:none}
}