/* Skuply · webontwerp naar Figma 8dwQAjy3PZSYXHaaEExBFT
   Bewegingslaag volgens brandkit bord 14 · Beweging */

:root{
  --papier:#F3F2ED; --papier-diep:#E8E6DE;
  --inkt:#101211; --inkt-op:#1C1F1D;
  --lijn:#D5D3C8; --lijn-inkt:#2E312E;
  --t-inkt:#101211; --inkt-60:#61645E; --inkt-35:#A2A39B;
  --t-papier:#F3F2ED; --papier-60:#93958D;
  --blauw:#2036E8; --blauw-licht:#6F80FF; --blauw-zacht:#DFE3FD;
  --rood:#C4361A; --rood-licht:#FF6A45; --rood-zacht:#FCEDE7;

  --nav:72px;
  --kolom:1240px;
  --marge:100px;

  --uit:cubic-bezier(.2,.8,.2,1);
  --snel:.15s var(--uit);
  --binnen:.6s var(--uit);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}   /* anders wint display:flex van de UA-regel */
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papier); color:var(--t-inkt);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:25px; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ---------- typografie ---------- */
.d1{font-size:64px;line-height:64px;letter-spacing:-.032em;font-weight:500;margin:0;text-wrap:balance}
.d2{font-size:64px;line-height:64px;letter-spacing:-.03em;font-weight:500;margin:0;text-wrap:balance}
/* Een maat tussen d2 en h1 in, voor een kop die naast een formulier staat
   en dus niet de hele breedte mag opeisen. */
.d3{font-size:46px;line-height:48px;letter-spacing:-.028em;font-weight:500;margin:0;text-wrap:balance}
.h1{font-size:48px;line-height:52px;letter-spacing:-.025em;font-weight:500;margin:0;text-wrap:balance}
.h2{font-size:34px;line-height:40px;letter-spacing:-.02em;font-weight:500;margin:0}
.h3{font-size:24px;line-height:30px;letter-spacing:-.015em;font-weight:500;margin:0}
.groot{font-size:19px;line-height:29px;letter-spacing:-.01em;margin:0}
.basis{font-size:16px;line-height:25px;letter-spacing:-.005em;margin:0}
.klein{font-size:14px;line-height:21px;margin:0}
.mono,.label{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.label{font-size:11px;line-height:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;margin:0}
.label-k{font-size:10px;line-height:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0}
.waarde{font-family:"Geist Mono",ui-monospace,monospace;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
.zacht{color:var(--inkt-60)}
.blauw{color:var(--blauw)}
.rood{color:var(--rood)}

/* ---------- raster ---------- */
.wrap{max-width:var(--kolom);margin:0 auto;padding:0 var(--marge)}
@media(max-width:1440px){:root{--marge:64px}}
section{position:relative}
.sec{padding:120px 0}
[data-grond="inkt"]{background:var(--inkt);color:var(--t-papier)}
[data-grond="inkt"] .zacht{color:var(--papier-60)}
[data-grond="inkt"] .blauw{color:var(--blauw-licht)}
[data-grond="inkt"] .rood{color:var(--rood-licht)}
hr.lijn{border:0;height:1px;background:var(--lijn);margin:0}
[data-grond="inkt"] hr.lijn{background:var(--lijn-inkt)}
hr.dik{background:var(--inkt)}
[data-grond="inkt"] hr.dik{background:var(--blauw-licht)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav);z-index:50;
  display:flex;align-items:center;
  color:var(--t-inkt);
  transition:color .2s var(--uit), background-color .2s var(--uit), border-color .2s var(--uit);
  border-bottom:1px solid var(--lijn);
  background:rgba(243,242,237,.86);backdrop-filter:blur(10px);
}
body[data-nav="inkt"] .nav{
  color:var(--t-papier);
  background:rgba(16,18,17,.82);
  border-bottom-color:var(--lijn-inkt);
}
.nav .wrap{display:flex;align-items:center;gap:40px;width:100%}
.merk{display:flex;align-items:center;gap:10px;font-weight:500;font-size:19px;letter-spacing:-.02em}
.mark{width:22px;height:22px;flex:0 0 22px}
.mark i{position:absolute;width:4.4px;height:4.4px;background:currentColor;border-radius:1px}
.mark{position:relative}
.mark .vol{background:var(--blauw)}
body[data-nav="inkt"] .mark .vol{background:var(--blauw-licht)}
.nav nav{display:flex;gap:28px;position:absolute;left:50%;transform:translateX(-50%)}
.nav .wrap{position:relative}
.nav nav a{font-size:15px;letter-spacing:-.01em;position:relative;padding:4px 0}
.nav nav a.aan::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .2s var(--uit)}
.nav nav a:hover::after{right:0}
.nav .rechts{margin-left:auto;display:flex;align-items:center;gap:16px}
.taal{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--inkt-60);padding:6px 2px;transition:color var(--snel)}
.taal:hover{color:var(--t-inkt)}
body[data-nav="inkt"] .taal{color:var(--papier-60)}
body[data-nav="inkt"] .taal:hover{color:var(--t-papier)}
.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;
  padding:0;flex-direction:column;justify-content:center;gap:5px;color:inherit}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;margin:0 auto;
  transition:transform var(--snel),opacity var(--snel)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:absolute;top:var(--nav);left:0;right:0;background:var(--papier);
  border-bottom:1px solid var(--lijn);padding:8px 20px 20px}
body[data-nav="inkt"] .menu{background:var(--inkt);border-bottom-color:var(--lijn-inkt)}
.menu .taal{display:none}
.menu a{display:block;padding:12px 0;font-size:19px;letter-spacing:-.01em;
  border-bottom:1px solid var(--lijn)}
body[data-nav="inkt"] .menu a{border-bottom-color:var(--lijn-inkt)}

/* ---------- knoppen ---------- */
.knop{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 26px;border-radius:3px;border:1px solid transparent;
  font-size:15px;line-height:16px;letter-spacing:-.01em;font-weight:500;
  white-space:nowrap;
  cursor:pointer;transition:transform var(--snel),background-color var(--snel),color var(--snel);
  background:var(--blauw);color:#fff;
}
.knop:active{transform:scale(.98)}
/* de knop loopt vol met cellen, zelfde mechanisme als de balk */
.knop{position:relative;overflow:hidden;isolation:isolate}
.knop > .lab{position:relative;z-index:2}
.vul{position:absolute;inset:0;z-index:1;display:block;pointer-events:none}
.vul i{position:absolute;opacity:0;background:var(--inkt);
  /* kort en hard: de cel klapt aan. vervaagt hij, dan wordt het een veeg */
  transition:opacity .05s linear;transition-delay:calc(var(--d) * 1ms)}
.knop:hover .vul i,.knop:focus-visible .vul i{opacity:1}
.knop.rand .vul i{background:var(--blauw)}
.knop.rand:hover,.knop.rand:focus-visible{color:#fff;border-color:var(--blauw)}
[data-grond="inkt"] .knop.licht .vul i{background:var(--blauw)}
[data-grond="inkt"] .knop.licht:hover,[data-grond="inkt"] .knop.licht:focus-visible{color:#fff}
.knop,.knop.rand{transition:transform var(--snel),color .18s linear,border-color .18s linear}
.knop.klein{height:42px;padding:0 20px}
.knop.rand{background:transparent;color:var(--t-inkt);border-color:var(--inkt)}
body[data-nav="inkt"] .nav .knop.rand{color:var(--t-papier);border-color:var(--papier-60)}
[data-grond="inkt"] .knop.licht{background:var(--papier);color:var(--inkt)}

/* ---------- binnenkomen ---------- */
.rev{opacity:1;transform:none}
html.js .rev{opacity:0;transform:translateY(16px);
  transition:opacity var(--binnen),transform var(--binnen);
  transition-delay:calc(var(--d,0) * 60ms)}
html.js .rev.in{opacity:1;transform:none}

/* ---------- hero ---------- */
/* twee kolommen op desktop: tekst links, het raster met zijn annotatie rechts.
   Onder 1080 wordt het één kolom en gaat de annotatie onder het beeld staan. */
.hero{padding:calc(var(--nav) + 44px) 0 88px}
.heroraster-grid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,620px);
  gap:0 60px;align-items:start}
.hero .kop{max-width:560px}
.hero .intro{max-width:560px;margin-top:24px}
.hero .acties{display:flex;gap:12px;margin-top:32px}
.hero .fijn{margin-top:20px;max-width:560px}
.hero-tekst{padding-top:0}

.rasterdoos{position:relative;padding:44px 0 70px}
.beeld{position:relative}
.beeld canvas{width:100%;height:auto}
.raster-labels{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.raster-labels p:first-child{text-align:right}

/* annotatie: labels in de banden boven en onder het beeld, marker op het beeld */
.annot{position:absolute;width:210px}
.annot .waarde{margin-top:4px;white-space:nowrap}
.annot.am{left:16%;top:0}
.annot.ae{left:54%;top:0}
/* De annotaties staan op maat van de Nederlandse regels. "full-grain leather"
   is breder dan "rundleer, volnerf", dus in het Engels schuift de rechter er
   drie procent vandaan. Er is 32px speling tot de rand van de rasterdoos. */
html[lang=en] .annot.ae{left:57%}
.annot.az{left:56%;bottom:16px}
.annot.ag{left:10%;bottom:16px}
.marker{position:absolute;width:7px;height:7px;background:var(--blauw);border-radius:1px;
  box-shadow:0 0 0 4px var(--papier)}
.marker.leeg{background:var(--rood)}
.marker.m1{left:25%;top:45%}
.marker.m2{left:55%;top:38%}
.marker.m3{left:62%;top:79%}
.marker.m4{left:18%;top:65%}
.leider{position:absolute;background:var(--lijn);width:1px}
.leider.l1{left:calc(25% + 3px);top:24%;height:21%}
.leider.l2{left:calc(55% + 3px);top:0;height:38%}
.leider.l3{left:calc(62% + 3px);top:79%;height:21%}
.leider.l4{left:calc(18% + 3px);top:65%;height:35%}

/* ---------- hero op inkt, met het landschap ernaast ----------
   De rechterdertig procent van de hero is het landschap, over de volle hoogte.
   Het doek staat absoluut en niet in een rasterkolom, zodat de tekst gewoon op
   de wrap van de site blijft staan: dezelfde linkerlijn als elke sectie eronder.
   De tekst krijgt daarom een eigen breedte die de kolom niet raakt. Gemeten op
   1440: tekst tot 820, kolom begint op 1008. */
.hero.donker{position:relative;overflow:hidden;padding:0;
  min-height:100svh;
  display:grid;align-content:center}
.hero.donker > .wrap{width:100%;padding-top:calc(var(--nav) + 26px);padding-bottom:26px}
.hero.donker .kop,.hero.donker .intro,.hero.donker .fijn,
.hero.donker .acties,.hero.donker .label{max-width:min(720px,56vw)}
.hero-vuur{position:absolute;right:0;top:var(--nav);bottom:0;width:30%;overflow:hidden}
/* absoluut, anders telt het doek mee als min-content van zijn doos en duwt elke
   hermeting de hero verder op: doek hoger, doos hoger, doek hoger. */
.hero-vuur canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
[data-grond="inkt"] .knop.rand{color:var(--t-papier);border-color:var(--papier-60)}
[data-grond="inkt"] .knop.rand .vul i{background:var(--blauw-licht)}
[data-grond="inkt"] .knop.rand:hover,[data-grond="inkt"] .knop.rand:focus-visible{
  color:var(--inkt);border-color:var(--blauw-licht)}

/* ---------- het product uitgerekend ----------
   De laars stond in de hero. Hij verdient de uitleg ernaast, want zonder die
   uitleg is 34 tegen 93 een plaatje en geen bewijs. */
.laarsraster-grid{display:grid;grid-template-columns:minmax(0,600px) minmax(0,540px);
  gap:0 64px;align-items:center}
.bronlijst{margin:32px 0 0}
.bronrij{display:grid;grid-template-columns:190px 1fr;gap:0 24px;
  padding:15px 0;border-top:1px solid var(--lijn);align-items:baseline}
.bronrij:last-child{border-bottom:1px solid var(--lijn)}

/* ---------- marquee ---------- */
.strip{border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);
  padding:34px 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.spoor{display:flex;width:max-content;animation:loop 40s linear infinite}
.strip:hover .spoor{animation-play-state:paused}
.helft{display:flex;align-items:center;gap:56px;padding-right:56px}
/* optische hoogte: een breed woordmerk moet kleiner dan een vierkant icoon,
   anders leest het als groter. hoogte = basis * aspect^-0.35 (gemeten) */
.helft img{height:24px;width:auto;opacity:.85;filter:brightness(0)}
/* het woocommerce-merk is bijna vijf keer zo breed als hoog; op gelijke hoogte
   leest het als een streepje. hoogte = basis * aspect^-0.35 (gemeten) */
.helft img[alt="WooCommerce"]{height:13px}
.helft img[alt="Magento"]{height:23px}
.helft img[alt="Google"]{height:22px}
.punt{width:7px;height:7px;background:var(--blauw);border-radius:1px;flex:0 0 7px}
@keyframes loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- balken ---------- */
.balk{display:flex;gap:3px;flex-wrap:nowrap}
.balk i{border-radius:1px;box-shadow:inset 0 0 0 1px var(--lijn);background:transparent;
  transition:background-color .18s linear,box-shadow .18s linear}
[data-grond="inkt"] .balk i{box-shadow:inset 0 0 0 1px var(--lijn-inkt)}
.balk.in i.vol{background:var(--inkt);box-shadow:none}
[data-grond="inkt"] .balk.in i.vol{background:var(--papier)}
.balk.in i.nieuw{background:var(--blauw);box-shadow:none}
[data-grond="inkt"] .balk.in i.nieuw{background:var(--blauw-licht)}
.balk.in i.laag{background:var(--rood);box-shadow:none}

/* ---------- de score ---------- */
.score-grid{display:grid;grid-template-columns:minmax(0,620px) minmax(0,580px);
  gap:0 40px;margin-top:70px;align-items:start}
.kanalen .rij{display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--lijn)}
.kanalen .rij.kop{padding:0 0 10px;border-top:0}
.scorekaart{background:var(--papier-diep);border-radius:4px;padding:32px}
.scorekaart .kkop{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.chip{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--papier);border-radius:3px;padding:5px 10px;color:var(--inkt-60)}
.scorekaart .score{display:flex;align-items:flex-end;gap:36px;margin:28px 0 24px}
.scorekaart .arij{display:grid;grid-template-columns:110px 1fr 44px;gap:16px;align-items:center;
  padding:10px 0;border-top:1px solid var(--lijn)}
.scorekaart .arij .waarde{text-align:right}
.balk.mini i{box-shadow:inset 0 0 0 1px var(--lijn)}

/* ---------- kolommen ---------- */
.kop-blok{max-width:820px}
.rooster{display:grid;gap:40px 40px;margin-top:56px}
.k4{grid-template-columns:repeat(4,minmax(0,1fr))}
.k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k2{grid-template-columns:repeat(2,minmax(0,1fr))}
.item h3{margin:16px 0 8px}
.item canvas{width:100%;height:auto}
/* het silhouet staat gecentreerd in zijn vierkant, dus het label ook */
.item.midden p{text-align:center}
.item .lijnkop{height:1px;background:var(--inkt)}
[data-grond="inkt"] .item .lijnkop{background:var(--blauw-licht)}
.cijfer{font-size:64px;line-height:64px;letter-spacing:-.03em;font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- prijs ---------- */
.staffel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px;align-items:stretch}
.kaart{background:var(--papier-diep);border-radius:4px;padding:28px 26px 30px}
.kaart{display:flex;flex-direction:column}
/* Een knop die zijn breedte van de kaart krijgt heeft geen zijruimte nodig om
   zich af te tekenen. Gemeten op 1024: met 26px links en rechts bleef er 108px
   over voor 114px etiket, en sinds knoppen niet meer afbreken liep dat over. */
.kaart .knop.vol{width:100%;margin-top:auto;padding-top:0;padding-left:12px;padding-right:12px}
.kaart .prijs{font-size:34px;line-height:40px;letter-spacing:-.02em;font-weight:500;margin-top:18px;font-variant-numeric:tabular-nums}
.kaart .klein.zacht+.knop{margin-top:24px}

/* ---------- de meter onder de staffel ---------- */
.meter{margin-top:56px;padding-top:32px;border-top:1px solid var(--lijn)}
.meter .balk{margin-top:16px}
.meterlabels{display:flex;justify-content:space-between;margin-top:12px;color:var(--inkt-60)}
.meterlabels span:nth-child(2),.meterlabels span:nth-child(3),.meterlabels span:nth-child(4){color:var(--blauw)}

/* ---------- previewrapport ---------- */
.pkop{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.scorevlak{margin-top:44px}
.scorevlak .vregel{justify-content:flex-start;gap:48px}
.rekenkaart.licht{background:var(--papier-diep)}
.rekenkaart.licht .rrij{border-bottom-color:var(--lijn)}
.tijdlijn{margin-top:20px;position:relative;padding-left:4px}
.tijdlijn .trij{padding:18px 0}

/* ---------- juridisch ---------- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.tab{border-radius:3px;padding:10px 18px;font-size:14px;background:var(--papier);
  border:1px solid var(--lijn)}
.tab.aan{background:var(--inkt);color:var(--t-papier);border-color:var(--inkt)}
.doc{display:grid;grid-template-columns:280px 1fr;gap:80px;align-items:start}
.inhoud{position:sticky;top:calc(var(--nav) + 32px)}
.inhoud a{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:baseline;
  padding:9px 0;font-size:14px;color:var(--inkt-60)}
.inhoud a:hover{color:var(--t-inkt)}
.inhoud .label-k{margin-top:0}
.inhoud > .label-k{margin-bottom:14px}
.jsec{padding:32px 0;border-top:1px solid var(--inkt)}
.jsec .h3{margin:14px 0 12px}
.jsec:first-child{border-top:0;padding-top:0}
.verwerkers{margin-top:28px;background:var(--papier-diep);border-radius:4px;padding:24px 28px}
.wrij{display:grid;grid-template-columns:1fr 1.4fr 80px;gap:24px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--lijn)}
.wrij.kop{border-top:0;padding-top:0}

/* ---------- voorbeeldrapport ---------- */
.rapport{background:var(--papier);border:1px solid var(--lijn);border-radius:4px;
  padding:48px;max-width:900px;margin:0 auto}
.rkop{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:24px}
.rscore{display:flex;align-items:flex-end;gap:36px;margin:32px 0 28px}
.rtellers{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:32px}
.rtellers .klein{margin-top:6px}
.rattr{margin-top:16px}
.rrijattr{display:grid;grid-template-columns:120px 1fr 120px;gap:24px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--lijn)}
.rrijattr .waarde{text-align:right}
.rreden{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:baseline;padding:14px 0}
.rhold{display:flex;justify-content:space-between;align-items:baseline;
  padding:16px 0;border-bottom:1px solid var(--lijn)}

/* ---------- platformpagina's ---------- */
.valkuil{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.vkaart{background:var(--papier);border-radius:4px;padding:32px;position:relative;overflow:hidden}
.vbalk{position:absolute;left:0;top:0;right:0;height:3px}
.vbalk.rood{background:var(--rood)}
.vbalk.blauw{background:var(--blauw)}
.code{margin-top:22px;border-radius:3px;padding:14px 16px}
.code.rood-zacht{background:var(--rood-zacht)}
.code.blauw-zacht{background:var(--blauw-zacht)}
.vkaart .label-k{margin-top:16px}
.veldtabel{margin-top:56px;background:var(--inkt);border-radius:4px;padding:28px 32px}
.veldtabel .label-k{color:var(--papier-60)}
.vrij{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--lijn-inkt)}
.vrij:first-of-type{margin-top:12px}
.vrij .klein{color:var(--papier-60)}
.vragen{margin-top:40px}
.vraag{padding:26px 0;border-top:1px solid var(--lijn);max-width:900px}

/* ---------- over en scan bezig ---------- */
.persoon{display:flex;gap:20px;align-items:center}
.portret{width:72px;height:72px;flex:0 0 72px;border-radius:3px;background:var(--papier);
  border:1px solid var(--lijn)}
.adres{margin:32px auto 0;max-width:420px;background:var(--papier-diep);border-radius:3px;padding:14px}
.voortgang{margin-top:44px}
.voortgang .balk{justify-content:center}
.vregel{display:flex;justify-content:space-between;margin-top:14px;max-width:640px;
  margin-left:auto;margin-right:auto}
.stappen{margin-top:48px;max-width:640px;margin-left:auto;margin-right:auto;text-align:left}
.strij{display:grid;grid-template-columns:22px 1fr 90px;gap:14px;align-items:center;
  padding:16px 0;border-top:1px solid var(--lijn)}
.strij .label{text-align:right}
.scel{width:10px;height:10px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--lijn)}
.scel.klaar{background:var(--inkt);box-shadow:none}
.scel.bezig{background:var(--blauw);box-shadow:none}
[data-stap="klaar"] .scel{background:var(--inkt);box-shadow:none}
[data-stap="klaar"] .groot{color:var(--t-inkt)}
.beloftekaart{margin-top:48px;background:var(--papier-diep);border-radius:4px;padding:32px;text-align:left}

/* ---------- contact, inloggen, 404 ---------- */
.routes{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.route{background:var(--papier);border-radius:4px;padding:40px}
.agenda{margin-top:28px}
.arij{display:grid;grid-template-columns:90px 1fr;gap:20px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--lijn)}
.mailkaart{background:var(--inkt);color:var(--t-papier);border-radius:4px;padding:32px;margin-top:48px}
.mailkaart .zacht{color:var(--papier-60)}
.smal{padding:calc(var(--nav) + 120px) 0 140px}
.smal .wrap{max-width:760px}
.smal .wrap.midden{text-align:center}
.kaartje{background:var(--papier-diep);border-radius:4px;padding:48px}
.inlog{display:flex;gap:12px;margin-top:32px}
.inlog input{flex:1;height:52px;border-radius:3px;border:1px solid var(--lijn);
  background:var(--papier);padding:0 18px;font-family:"Geist Mono",monospace;font-size:15px}
.inlog input::placeholder{color:var(--inkt-35)}
#inloguitkomst .knop{display:inline-flex}
#inloguitkomst .h3{line-height:32px}
.leegbalk{margin-top:44px;max-width:520px;margin-left:auto;margin-right:auto}
.leegbalk .balk{justify-content:center}

/* ---------- veiligheid ---------- */
.logregel{margin-top:40px;background:var(--inkt-op);border-radius:4px;padding:20px 24px;overflow-x:auto}
.logregel .waarde{white-space:nowrap}
.grens{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 40px;margin-top:48px}
.grij{display:flex;gap:16px;align-items:flex-start}
.gstreep{width:3px;flex:0 0 3px;align-self:stretch;background:var(--rood);border-radius:1px}
.grij .klein{margin-top:8px}
.drempel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.dkaart{background:var(--papier);border-radius:4px;padding:26px}
.dkaart .h2{margin:14px 0 10px}
.trij{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.stip{width:10px;height:10px;flex:0 0 10px;background:var(--blauw);border-radius:1px;margin-top:9px}
.trij .klein{margin-top:6px}
.staging{background:var(--papier);border-radius:4px;padding:28px}
.srij{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--lijn)}
.srij .klein{margin-top:4px}

/* ---------- wat het doet ---------- */
.pijplijn{display:grid;grid-template-columns:repeat(7,1fr);gap:20px;margin-top:48px}
.pstap .balk{margin:14px 0 14px}
.pstap .klein{max-width:150px}
.mapping{display:grid;grid-template-columns:300px 1fr;gap:60px;margin-top:44px;align-items:start}
.mbron{background:var(--papier-diep);border-radius:4px;padding:24px}
.mbron .waarde{margin-top:14px;font-size:15px}
.mbron .klein{margin-top:6px}
.mrij{display:grid;grid-template-columns:220px 1fr;gap:24px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--lijn)}

/* ---------- prijzenpagina ---------- */
.alles{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 48px;margin-top:24px}
.alles > div{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-bottom:1px solid var(--lijn)}
.vink{width:11px;height:11px;border-radius:1px;background:var(--inkt);flex:0 0 11px;transform:translateY(-1px)}
.vgl{margin-top:24px}
.vgl .rij{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:24px;align-items:baseline;
  padding:18px 0;border-top:1px solid var(--lijn)}
.vgl .rij.kop{border-top:0;padding-bottom:8px}
.rekenkaart{background:var(--inkt-op);border-radius:4px;padding:28px}
.rrij{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--lijn-inkt)}
[data-grond="inkt"] .rekenkaart .basis{color:var(--t-papier)}

/* ---------- scan ---------- */
.scanveld{display:flex;gap:12px;margin-top:44px;max-width:1000px}
.scanveld input{flex:1;height:56px;border-radius:3px;border:1px solid var(--lijn-inkt);
  background:var(--inkt-op);color:var(--t-papier);padding:0 18px;
  font-family:"Geist Mono",monospace;font-size:15px}
.scanveld input::placeholder{color:var(--papier-60)}
.scanveld input:focus{outline:2px solid var(--blauw-licht);outline-offset:2px}

/* ---------- footer ---------- */
.voet{padding:96px 0 40px}
.voet .boven{display:grid;grid-template-columns:1.1fr 1fr;gap:64px}
.voet .kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:56px}
.voet .kolommen a{display:block;padding:5px 0;font-size:15px}
.voet .kolommen a:hover{color:var(--blauw-licht)}
.voet .paneel{border:1px solid var(--lijn-inkt);border-radius:4px;padding:16px}
.voet .onder{display:flex;justify-content:space-between;gap:24px;margin-top:64px;
  padding-top:24px;border-top:1px solid var(--lijn-inkt)}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px}
[data-grond="inkt"] :focus-visible{outline-color:var(--blauw-licht)}

/* ---------- mobiel ---------- */
/* Onder 1080 past een staande kolom van 30 procent niet meer naast een kop van
   40px. Daar wordt het weer een liggende band, 30 procent van de hoogte. */
@media(max-width:1080px){
  .hero.donker{grid-template-rows:1fr 30svh;align-content:stretch;
    min-height:100svh}
  .hero.donker > .wrap{align-self:center}
  .hero.donker .kop,.hero.donker .intro,.hero.donker .fijn,
  .hero.donker .acties,.hero.donker .label{max-width:none}
  .hero-vuur{position:relative;right:auto;top:auto;bottom:auto;width:auto;min-height:0}
}

@media(max-width:1180px){
  .heroraster-grid,.score-grid,.laarsraster-grid{grid-template-columns:minmax(0,1fr)}
  .laarsraster-grid .hero-beeld{margin-top:0}
  .laars-uitleg{margin-top:56px}
  .hero-tekst{padding-top:0}
  .hero-beeld{margin-top:72px}
  .scorekaart{margin-top:48px}
  /* onder 1180 wordt de annotatie een lijst onder het beeld (bord 13) */
  .rasterdoos{padding:0;display:flex;flex-direction:column}
  .beeld{order:-1}
  .marker,.leider{display:none}
  .annot{position:static;width:auto;display:grid;grid-template-columns:170px 1fr;gap:24px;
    align-items:baseline;padding:14px 0;border-bottom:1px solid var(--lijn)}
  .annot .waarde{margin-top:0;white-space:normal}
  .annot.am{border-top:1px solid var(--lijn);margin-top:28px}
}

/* Gemeten op 768px: zeven pijplijnstappen naast elkaar liepen 163px uit beeld,
   en de inhoudsopgave van 280px naast een artikel 12px. Deze twee vallen daarom
   eerder terug op één kolom dan de rest. */
/* "Verwerkersovereenkomst" is 22 tekens en steekt in de d2-maat 63px buiten een
   scherm van 390. Nederlandse samenstellingen breken netjes af als je het
   toestaat; break-word staat erachter voor het geval de browser geen
   woordenboek heeft. */
.jurkop{hyphens:auto;overflow-wrap:break-word}

@media(max-width:900px){
  .staffel{grid-template-columns:1fr 1fr}
  .k4{grid-template-columns:1fr 1fr}
  .pijplijn{grid-template-columns:1fr;gap:0}
  .pstap{padding:18px 0;border-bottom:1px solid var(--lijn)}
  .pstap .klein{max-width:none}
  .doc{grid-template-columns:1fr;gap:36px}
  .inhoud{position:static}
}

@media(max-width:760px){
  :root{--marge:20px;--nav:64px}
  .hero.donker > .wrap{padding-top:calc(var(--nav) + 8px);padding-bottom:8px}
  .hero.donker .acties{margin-top:24px}
  .hero.donker .fijn{margin-top:14px}
  .bronrij{grid-template-columns:1fr;gap:4px}
  body{font-size:15px;line-height:23px}
  .d1{font-size:40px;line-height:41px}
  .d2{font-size:40px;line-height:41px}
  .d3{font-size:34px;line-height:36px}
  .h1{font-size:30px;line-height:33px;letter-spacing:-.03em}
  .h2{font-size:25px;line-height:29px}
  .h3{font-size:19px;line-height:24px}
  .groot{font-size:17px;line-height:26px}
  .basis{font-size:15px;line-height:23px}
  .klein{font-size:13px;line-height:19px}
  .sec{padding:72px 0}
  .nav nav{display:none}
  .burger{display:flex}
  /* Gemeten op 390: met de taalwissel erbij bleef er 104px binnenruimte over
     voor "Scan mijn catalogus" en brak het etiket over twee regels, waardoor de
     knop onder de navbalk uitstak. De wissel staat op mobiel in het menu. */
  .nav .rechts .knop{height:40px;padding:0 14px;font-size:14px}
  .nav .rechts .taal{display:none}
  .menu .taal{display:block;font-size:15px}
  .hero{padding:calc(var(--nav) + 56px) 0 0}
  .hero .acties{flex-direction:column}
  .hero .acties .knop{width:100%}
  .k4,.k3,.k2,.staffel{grid-template-columns:1fr}
  .kanalen .rij{grid-template-columns:1fr;gap:4px}
  .alles{grid-template-columns:1fr}
  .pijplijn{grid-template-columns:1fr;gap:0}
  .grens,.drempel{grid-template-columns:1fr;gap:24px}
  .routes{grid-template-columns:1fr;gap:24px}
  .strij{grid-template-columns:18px 1fr;gap:10px}
  .valkuil{grid-template-columns:1fr}
  .rapport{padding:24px 20px}
  .doc{grid-template-columns:1fr;gap:36px}
  .inhoud{position:static}
  .wrij{grid-template-columns:1fr;gap:4px}
  .wrij.kop{display:none}
  .rtellers{grid-template-columns:1fr 1fr}
  .rrijattr{grid-template-columns:90px 1fr;gap:10px}
  .rrijattr .waarde{grid-column:2;text-align:left}
  .rkop{flex-direction:column;align-items:flex-start;gap:10px}
  .vkaart{padding:24px}
  .vrij{grid-template-columns:1fr;gap:4px}
  .veldtabel{padding:24px 20px}
  .strij .label{grid-column:2;text-align:left}
  .vregel{flex-direction:column;gap:4px}
  .route{padding:28px 24px}
  .arij{grid-template-columns:80px 1fr;gap:12px}
  .kaartje{padding:28px 24px}
  .inlog{flex-direction:column}
  .smal{padding:calc(var(--nav) + 72px) 0 96px}
  .pstap{padding:18px 0;border-bottom:1px solid var(--lijn)}
  .pstap .klein{max-width:none}
  .mapping{grid-template-columns:1fr;gap:28px}
  .mrij{grid-template-columns:1fr;gap:4px}
  .vgl .rij{grid-template-columns:1fr 1fr;gap:8px 16px}
  .vgl .rij.kop{display:none}
  .kanalen .rij.kop{display:none}
  .scorekaart{padding:24px 20px}
  .scorekaart .score{gap:20px}
  .scorekaart .arij{grid-template-columns:80px 1fr 40px;gap:10px}
  .rasterdoos .annot{grid-template-columns:1fr}
  .attr .rij{grid-template-columns:1fr;gap:4px}
  .cijfer{font-size:40px;line-height:44px}
  .voet .boven{grid-template-columns:1fr}
  .voet .kolommen{grid-template-columns:1fr 1fr}
  .voet .onder{flex-direction:column;gap:8px}
  .scanveld{flex-direction:column}
}

/* ---------- rustig ---------- */
@media(prefers-reduced-motion:reduce){
  html.js .rev{opacity:1;transform:none;transition:none}
  .spoor{animation:none}
  .knop,.nav,.balk i{transition:none}
}


/* ==========================================================================
   DE APP
   Eigen schil, zelfde tokens. Dichter en tabellarischer dan de site: dit
   scherm wordt gescand en bediend, niet gelezen.
   ========================================================================== */
body.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh;background:var(--papier)}
.rail{background:var(--inkt);color:var(--t-papier);padding:26px 0;display:flex;
  flex-direction:column;position:sticky;top:0;height:100vh}
.rail .rmerk{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:500;
  letter-spacing:-.02em;padding:0 28px;margin-bottom:34px}
.rail nav{display:flex;flex-direction:column}
.ritem{position:relative;padding:11px 28px;font-size:16px;color:var(--papier-60);
  display:flex;align-items:center;gap:10px;transition:color var(--snel),background-color var(--snel)}
.ritem:hover{color:var(--t-papier)}
.ritem.aan{color:var(--t-papier);background:var(--inkt-op)}
.ritem.aan::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blauw-licht)}
.badge{margin-left:auto;background:var(--blauw);color:#fff;border-radius:3px;
  font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.1em;padding:3px 8px}
.rvoet{margin-top:auto;padding:0 28px;border-top:1px solid var(--lijn-inkt);padding-top:20px}
.rvoet .label-k{color:var(--t-papier)}
.rvoet .klein{margin-top:8px;color:var(--papier-60)}
.rvoet a{color:var(--blauw-licht)}

.apphoofd{min-width:0}
.topbalk{height:72px;border-bottom:1px solid var(--lijn);display:flex;align-items:center;
  gap:24px;padding:0 40px;position:sticky;top:0;background:rgba(243,242,237,.9);
  backdrop-filter:blur(10px);z-index:20}
.topbalk .subtitel{margin-left:8px}
.chip{margin-left:auto;font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--blauw-zacht);color:var(--blauw);
  border-radius:3px;padding:7px 12px}
.appblok{padding:40px}
.appblok + .appblok{padding-top:0}
.appkop{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:18px}

/* tellers */
.tellers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.teller{background:var(--papier-diep);border-radius:4px;padding:24px}
.teller .d2{margin:14px 0 10px}
.teller .klein{margin-top:2px}

/* twee kolommen in de app */
.appgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;
  margin-top:40px;align-items:start}
.appkolom > .label{color:var(--inkt-60)}
.appkolom hr{margin:10px 0 0}

/* grafiek: kolommen van cellen */
.kolomgrafiek{display:flex;align-items:flex-end;gap:0;margin-top:28px}
.kmaand{display:flex;flex-direction:column;align-items:center;flex:1}
.kstapel{display:flex;flex-direction:column-reverse;gap:3px}
.kstapel span{display:flex;gap:3px}
.kstapel i{width:11px;height:11px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--lijn)}
.kstapel i.vol{background:var(--inkt);box-shadow:none}
.kstapel i.nieuw{background:var(--blauw);box-shadow:none}
.kmaand .label-k{margin-top:12px;color:var(--inkt-60)}
.kmaand.laatst .label-k{color:var(--t-inkt)}

/* grafiek: honderd cellen */
.wafel{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:28px;max-width:330px}
.wafel i{aspect-ratio:1;border-radius:1px;background:var(--lijn)}
.legenda{margin-top:24px}
.lrij{display:grid;grid-template-columns:14px 1fr 50px;gap:10px;align-items:center;padding:6px 0}
.lrij i{width:11px;height:11px;border-radius:1px}
.lrij .waarde{text-align:right}

/* rijen en tabellen */
.arij{display:grid;gap:24px;align-items:center;padding:16px 0;border-top:1px solid var(--lijn)}
.arij.kop{border-top:0;padding-bottom:8px}
.attr6{grid-template-columns:120px 1fr 60px}
.log .lregel{padding:14px 0;border-top:1px solid var(--lijn)}
.log .lregel:first-child{border-top:0}
.log .label-k{color:var(--blauw)}
.log .klein{margin-top:6px}
.holdoutblok{background:var(--inkt);color:var(--t-papier);border-radius:4px;padding:32px;margin-top:40px}
.holdoutblok .zacht{color:var(--papier-60)}
.hocijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.filter{display:flex;align-items:center;gap:10px;border-radius:3px;padding:8px 14px;
  background:var(--papier-diep);font-size:14px;cursor:pointer}
.filter .label-k{color:var(--inkt-60)}
.filter.aan{background:var(--inkt);color:var(--t-papier)}
.filter.aan .label-k{color:var(--papier-60)}
.zoekveld{height:44px;border-radius:3px;border:1px solid var(--lijn);background:var(--papier);
  padding:0 16px;font-family:"Geist Mono",monospace;font-size:14px;width:100%;max-width:420px}
.zoekveld::placeholder{color:var(--inkt-35)}

/* reviewlijst */
.rvw{grid-template-columns:minmax(0,1.5fr) 100px minmax(0,1.3fr) minmax(0,1.1fr) 120px 170px;gap:20px}
.rvw .knopjes{display:flex;gap:8px;justify-content:flex-end}
.knopje{border-radius:3px;padding:7px 14px;font-size:13px;border:1px solid var(--lijn);
  background:var(--papier);cursor:pointer}
.knopje.ja{background:var(--inkt);color:var(--t-papier);border-color:var(--inkt)}
.arij.uitgelicht{background:var(--papier-diep);margin:0 -16px;padding-left:16px;padding-right:16px;border-radius:3px}
.bronblok{background:var(--inkt);color:var(--t-papier);border-radius:4px;padding:28px;margin-top:24px}
.bronblok .zacht{color:var(--papier-60)}
.bronnen{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:18px}
.minibalk{display:flex;gap:1px}
.minibalk i{width:6px;height:6px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--lijn)}
.minibalk i.vol{background:var(--inkt);box-shadow:none}
.minibalk i.laag{background:var(--rood);box-shadow:none}

/* producten en product */
.prod{grid-template-columns:minmax(0,1.6fr) 130px 150px minmax(0,1.3fr) 140px;gap:20px}
.veldrij{grid-template-columns:130px minmax(0,1.4fr) minmax(0,1.1fr) 56px 88px;gap:16px}
.ns{grid-template-columns:150px 80px 120px minmax(0,1fr) 170px;gap:20px}
.kol{grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.3fr) 96px;gap:20px}

/* bestand */
.sleep{display:block;color:inherit;border:1px dashed var(--lijn);border-radius:4px;background:var(--papier-diep);
  padding:52px;text-align:center;margin-top:28px}
.uitkomst{background:var(--inkt);color:var(--t-papier);border-radius:4px;padding:32px;
  margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:32px;align-items:center}
.uitkomst .zacht{color:var(--papier-60)}
.regelblok{background:var(--inkt);color:var(--t-papier);border-radius:4px;padding:28px}
.regelblok .zacht{color:var(--papier-60)}
.regelblok .rr{padding:14px 0;border-top:1px solid var(--lijn-inkt)}
.regelblok .rr:first-of-type{border-top:0}

/* instellingen */
/* De balk is 40 cellen van 12px met 3px ertussen: 597px die niet kan krimpen.
   Als vaste maat duwt hij de hele kolom uit beeld op een telefoon. Daarom mogen
   de cellen krimpen; op desktop halen ze hun 12px gewoon. */
.drempelbalk{display:flex;gap:3px;margin-top:20px;max-width:100%}
.drempelbalk i{flex:0 1 12px;min-width:0;height:12px;border-radius:1px;box-shadow:inset 0 0 0 1px var(--lijn)}
.drempelbalk i.vol{background:var(--inkt);box-shadow:none}
.drempelbalk i.over{background:var(--rood-zacht);box-shadow:none}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chips span{background:var(--papier-diep);border-radius:3px;padding:8px 14px;
  font-family:"Geist Mono",monospace;font-size:13px}

@media(max-width:1100px){
  body.app{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;align-items:center;gap:20px;
    padding:14px 20px;overflow-x:auto}
  .rail .rmerk{margin-bottom:0;padding:0}
  .rail nav{flex-direction:row}
  .ritem{padding:8px 12px;white-space:nowrap;font-size:14px}
  .ritem.aan::before{display:none}
  .rvoet{display:none}
  .topbalk{padding:0 20px;height:auto;min-height:64px;flex-wrap:wrap;gap:8px;padding-top:12px;padding-bottom:12px}
  .appblok{padding:24px 20px}
  .tellers{grid-template-columns:1fr 1fr}
  .appgrid{grid-template-columns:1fr;gap:36px}
  .drempelbalk{gap:2px}
  .arij{grid-template-columns:1fr !important;gap:6px}
  .arij.kop{display:none}
  .rvw .knopjes{justify-content:flex-start}
  .uitkomst{grid-template-columns:1fr;gap:20px}
  .hocijfers{grid-template-columns:1fr}
  .kstapel i{width:7px;height:7px}
}

/* ---------- als de scan er niet in komt ---------- */
.scanfout{margin-top:40px;padding:32px 28px;background:var(--rood-zacht);border-radius:4px;
  max-width:640px;margin-left:auto;margin-right:auto;text-align:center}
.scanfout .groot{max-width:520px;margin-left:auto;margin-right:auto}
.scanfout .basis{max-width:520px;margin-left:auto;margin-right:auto}

/* ---------- de onvindbaar-tabel ---------- */
/* .vgl staat op vijf kolommen voor de staffel; deze heeft er drie. */
[data-o-tabel] .rij{grid-template-columns:1.6fr .6fr 1.4fr}
@media(max-width:760px){
  [data-o-tabel] .rij{grid-template-columns:1fr auto;gap:4px 16px}
  [data-o-tabel] .rij p:last-child{grid-column:1 / -1}
  [data-o-tabel] .rij.kop{display:none}
}

/* ---------- de agenda draagt nu twee regels per trede ---------- */
/* start, niet baseline: de tweede kolom is nu een blok met twee alinea's en dan
   zakt de basislijn naar het midden, waardoor de tijd naast de kop zweeft. */
.agenda .arij{padding:18px 0;border-bottom:1px solid var(--lijn);align-items:start}
.agenda .arij .waarde{line-height:26px}
.agenda .arij:first-child{border-top:1px solid var(--lijn)}
.agenda .arij .klein{margin-top:6px}

/* ---------- de rekensom in het maandrapport ---------- */
/* Geen invoervelden hier: dit is de nabootsing van een pdf die in een inbox
   ligt. Alles wat je kunt aanklikken hoort op de site, niet in de mail. */
.rsom{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px;
  padding:22px 0;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.rsom .h3{margin-top:6px}
@media(max-width:760px){.rsom{grid-template-columns:1fr;gap:16px}}

/* ---------- de drie leegste producten, los van de illustratie ---------- */
.slijst{margin-top:36px;max-width:760px}
.slijst .srij{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--lijn)}
.slijst .srij:last-child{border-bottom:1px solid var(--lijn)}

/* ---------- de eigen attributen van de winkel ---------- */
[data-e-tabel] .rij{grid-template-columns:1.6fr .8fr 1fr}
@media(max-width:760px){
  [data-e-tabel] .rij{grid-template-columns:1fr auto;gap:4px 16px}
  [data-e-tabel] .rij p:nth-child(2){grid-column:1 / -1;order:3}
  [data-e-tabel] .rij.kop{display:none}
}

/* ---------- codeblok op de scannerpagina ---------- */
/* Wat hier staat moet iemand letterlijk kunnen overtypen in een robots.txt of
   een firewallregel, dus vaste breedte en niets dat afkapt. */
.codeblok{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:22px;
  background:var(--inkt);color:var(--t-papier);padding:18px 22px;border-radius:3px;
  margin-top:18px;max-width:520px;overflow-x:auto;white-space:pre}
code{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}

/* ---------- koppelpagina ---------- */
/* De staffel die iemand aanklikte staat hier terug, zodat de pagina antwoord
   geeft op de knop waar hij vandaan komt en niet opnieuw begint. */
.kgekozen{margin-top:40px;padding:20px 24px;border-left:2px solid var(--blauw);
  background:var(--papier-diep);max-width:420px;border-radius:0 3px 3px 0}
[data-grond="inkt"] .kgekozen{background:var(--inkt);border-left-color:var(--blauw-licht)}
.krek{margin-top:32px;max-width:760px}
.krij{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:16px 0;border-top:1px solid var(--lijn)}
.krij:last-child{border-bottom:1px solid var(--lijn)}
@media(max-width:560px){
  .krij{grid-template-columns:1fr;gap:4px}
  .krij .waarde{text-align:left}
}

/* ---------- afrekenen op de koppelpagina ---------- */
.afrek{margin-top:32px;max-width:620px}
.afrij{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--papier-60)}
.afrij:last-child{border-bottom:1px solid var(--papier-60)}
[data-grond="inkt"] .afrij .basis{color:var(--t-papier)}
.wstappen{margin-top:44px;max-width:560px;margin-left:auto;margin-right:auto;text-align:left}
@media(max-width:560px){.afrij{grid-template-columns:1fr;gap:4px}.afrij .waarde{text-align:left}}

/* ---------- de startpagina: doen, niet lezen ---------- */
/* Wie hier komt heeft al besloten. Het veld en de knop staan daarom boven de
   vouw en de uitleg eronder, niet andersom. */
.startsec{padding:calc(var(--nav) + 72px) 0 88px}
.startsec .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:64px;align-items:start}
.startveld{display:flex;gap:12px;margin-top:32px;max-width:560px}
.startveld input{flex:1 1 auto;min-width:0;height:52px;padding:0 18px;border:1px solid var(--inkt);
  border-radius:3px;background:var(--papier);font:inherit;font-size:16px}
.startveld input:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.startveld .knop{flex:0 0 auto;height:52px}
.startuit{margin-top:32px;max-width:560px}
.startuit .afrij{border-top-color:var(--lijn)}
.startuit .afrij:last-of-type{border-bottom:1px solid var(--lijn)}
.startstappen{list-style:none;margin-top:44px;padding:0;max-width:560px;
  border-top:1px solid var(--lijn)}
.startstappen li{display:flex;gap:16px;align-items:flex-start;padding:18px 0;
  border-bottom:1px solid var(--lijn)}
.stap-n{flex:0 0 26px;width:26px;height:26px;border-radius:2px;background:var(--inkt);
  color:var(--t-papier);font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.startzij{background:var(--papier-diep);padding:28px 30px;border-radius:3px;position:sticky;top:calc(var(--nav) + 24px)}
.startlijst{margin-top:18px;display:grid;gap:12px}
.startlijst > div{display:flex;gap:10px;align-items:flex-start}
@media(max-width:900px){
  .startsec .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .startzij{position:static}
}
@media(max-width:560px){
  .startveld{flex-direction:column}
  .startveld .knop{width:100%}
}

/* ---------- de welkomstpagina bevestigt wat er echt betaald is ---------- */
.wbon{margin:36px auto 0;max-width:460px;text-align:left}
.wbon .afrij{border-top-color:var(--lijn)}
.wbon .afrij:last-child{border-bottom:1px solid var(--lijn)}