/* ===========================================================================
   ZERO SLACK-HUISSTIJLLAAG over de bronopmaak heen.

   Doel: wie deze pagina naast zeroslack.nl legt, moet geen verschil in
   vormtaal kunnen aanwijzen. De INHOUD, de volgorde, de teksten en de
   componenten van de bron blijven ongemoeid — maar het merkgebaar wordt
   volledig dat van Zero Slack:

     1. BANDEN   — zeroslack.nl is voor het overgrote deel carbon (#0A0A0A)
                   met papieren en witte tussenbanden. De bron was volledig
                   licht. Dat is het grootste enkele verschil, dus dat eerst.
     2. TYPE     — Archivo 900, line-height .98, letterafstand -.035em,
                   h1 clamp(2.75rem,6.75vw,6.1rem) / h2 clamp(2rem,5.2vw,4.6rem).
                   De bron stond op 600 / 62px / 42px: een editoriale maat.
     3. MONO     — JetBrains Mono als labeltaal: kickers, knoppen, cijfers,
                   voetnoten, navigatie. Altijd kapitaal, letterafstand .1-.16em.
     4. ACID     — #C6F432 als enige accent: markering in koppen, de pulserende
                   punt, de primaire knop, hover-toestanden.
     5. SCHERP   — 0 hoekradius, 2px knopranden, hairlines i.p.v. schaduw.

   Alle maatvoering hieronder is letterlijk overgenomen uit de live CSS van
   zeroslack.nl, niet benaderd.
   =========================================================================== */

/* ═══ 1. FUNDAMENT ═════════════════════════════════════════════════════════ */

body{
  font-weight:500;
  line-height:1.45;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1440px;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}

/* Zero Slack ademt veel ruimer dan de bron en zet geen streep tussen secties —
   het kleurvlak doet het scheidingswerk.
   LET OP: de bron schrijft dit als `section.sec`. Een kale `.sec` verliest
   die strijd, hoe laat het blad ook geladen wordt. Daarom hier ook element+klasse. */
section.sec{padding:clamp(72px,10vw,150px) 0;border-top:0}
section.sec:first-of-type{border-top:0}

::selection{background:var(--acid);color:var(--ink)}

/* ═══ 2. TYPOGRAFIE ════════════════════════════════════════════════════════ */

h1,h2,h3{font-weight:900;letter-spacing:-.035em;line-height:.98}
h1{font-size:clamp(2.75rem,6.75vw,6.1rem);max-width:16ch}
h2{font-size:clamp(2rem,5.2vw,4.6rem);max-width:18ch;font-weight:900}
h3{font-size:clamp(1.3rem,2.25vw,2rem);font-weight:900;letter-spacing:-.02em;line-height:1.1}

/* De acid-markering onder een woord: hét beeldmerk van zeroslack.nl. */
h1 em,h2 em{
  font-style:normal;color:var(--ink);
  background:linear-gradient(to top,var(--acid) 42%,transparent 42%);
  box-shadow:none;
}

.lede{
  font-size:clamp(1rem,1.35vw,1.2rem);
  color:var(--ink-60,rgba(10,10,10,.60));
  max-width:56ch;line-height:1.5;font-weight:500;
}
.hero .lede{margin-top:26px}

.sub,.fine{color:var(--ink-60,rgba(10,10,10,.60))}
.fine{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;line-height:2}

/* ═══ 3. KICKER-IDIOOM ═════════════════════════════════════════════════════ */
/* Bron: chip met nummer + streepje + kicker.
   Zero Slack: pulserende acid-punt + mono-label in kapitaal. */

.sec-h{gap:11px;margin-bottom:clamp(26px,3vw,38px)}

.idx{
  font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.13em;line-height:1;
  color:var(--acid);background:var(--ink);
  padding:4px 7px;border-radius:0;
}

.kicker,.sec-h .kicker{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding-left:17px;position:relative;
}
/* De pulserende acid-punt vóór elk sectielabel — het herkenbaarste kleine
   gebaar van zeroslack.nl. De bron zet hier een grijs streepje; dat wordt
   op `.sec-h .kicker::before` geschreven, dus die zwaarte is hier nodig. */
.kicker::before,.sec-h .kicker::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:8px;height:8px;background:var(--acid);border-radius:50%;
  box-shadow:0 0 0 0 rgba(198,244,50,.8);animation:zspulse 2.4s infinite;
}
@keyframes zspulse{
  0%{box-shadow:0 0 0 0 rgba(198,244,50,.75)}
  70%{box-shadow:0 0 0 9px rgba(198,244,50,0)}
  100%{box-shadow:0 0 0 0 rgba(198,244,50,0)}
}
.hero .kicker{display:inline-block;margin-bottom:22px}

/* ═══ 4. KNOPPEN ═══════════════════════════════════════════════════════════ */

.b{
  font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;
  padding:14px 22px;border:2px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);
  transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s,border-color .18s;
}
.b:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.b:active{transform:translateY(2px)}
.b.sm{padding:11px 16px;font-size:11px}

/* De eerste knop in de hero is bij Zero Slack acid, niet carbon. */
.hero .cta-row .b:first-child,
.final .cta-row .b:first-child{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.hero .cta-row .b:first-child:hover,
.final .cta-row .b:first-child:hover{background:var(--ink);color:var(--acid);border-color:var(--ink)}

.b.gh{background:transparent;color:var(--ink);border-color:var(--ink);font-weight:700}
.b.gh:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.cta-row{gap:14px;margin-top:36px}

/* ═══ 5. KOP- EN VOETBALK ══════════════════════════════════════════════════ */

.nlh{
  position:fixed;top:0;left:0;right:0;z-index:90;
  background:rgba(244,243,239,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--seam);
}
body{padding-top:0}
/* 9px i.p.v. 11px: daarmee komt de balk op exact 65px, de hoogte van de
   kopbalk van zeroslack.nl. */
.nlh-in{max-width:1440px;padding:9px clamp(20px,5vw,80px)}

.nlh nav a{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}
.nlh nav a:hover{border-bottom-color:var(--acid)}
.nlh nav a.on{border-bottom-color:var(--acid)}

/* Woordmerk in Zero Slack-schrijfwijze: zwaar, kapitaal, acid-blok achter
   het tweede woorddeel — precies zoals ZERO SLACK het doet. */
.wm-txt b{
  font-weight:900;font-size:17px;letter-spacing:-.05em;
  text-transform:uppercase;color:var(--ink);
}
.wm-txt i{
  font-family:var(--mono);font-size:9px;font-weight:700;line-height:1.15;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60,rgba(10,10,10,.6));
  margin-top:0;
}
.wm-txt{line-height:1.05}
.wm-txt b{line-height:1.15}

/* De knop in de kopbalk erft anders de letterafstand van de menulinks
   (.nlh nav a weegt zwaarder dan .b) en wordt daardoor breder dan bij
   Zero Slack. Hier terug op de .12em van de echte knop. */
.nlh nav a.b{letter-spacing:.12em;color:var(--paper)}
.nlh nav a.b:hover{color:var(--ink)}

.lang,.burger{
  border-radius:0;font-family:var(--mono);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;font-size:11px;
  border:2px solid var(--ink);color:var(--ink);background:transparent;
}
.lang:hover,.burger:hover{background:var(--acid);border-color:var(--acid)}

/* Voetbalk: bij Zero Slack carbon, met mono-links in kapitaal. */
.nlf{
  background:var(--ink);color:var(--paper);
  border-top:0;padding:72px 0 60px;margin-top:0;
}
.nlf-in{max-width:1440px;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px);gap:30px}
.nlf nav{gap:10px 20px}
.nlf nav a{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--pap-60,rgba(244,243,239,.6));text-decoration:none;
}
.nlf nav a:hover{color:var(--acid);text-decoration:none}
.nlf .biz,.nlf .fine{color:var(--pap-60,rgba(244,243,239,.6))}
.nlf .fine{text-transform:none;letter-spacing:.02em;font-size:11px;line-height:1.75}

/* ═══ 6. HERO ══════════════════════════════════════════════════════════════ */

section.sec.hero{padding-top:clamp(96px,7.8vw,112px);padding-bottom:clamp(52px,6vw,92px)}
.hero h1{margin:0;max-width:14ch}

.trust{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60,rgba(10,10,10,.6));
  margin-top:30px;padding-top:24px;border-top:2px solid var(--ink);gap:18px;
}
.trust span::before{border:2px solid var(--acid);background:var(--acid);border-radius:0;width:7px;height:7px}

/* Het weekvlak: bij Zero Slack krijgt het sleutelpaneel van de hero een
   acid-omlijning — dat is daar de grootste accenttoepassing van allemaal. */
.weekbox{
  border:2px solid var(--acid);border-radius:0;
  background:transparent;box-shadow:none;
  padding:clamp(20px,2.6vw,28px);
}
.weekbar{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-60,rgba(10,10,10,.6));
}
.blk{border-radius:0;border-width:1px}

/* ═══ 7. PANELEN EN RASTERS ════════════════════════════════════════════════ */

.card,.proof,.final,.weekbox{border-radius:0;box-shadow:none}
.card{border:1px solid var(--seam);background:transparent;padding:clamp(22px,2.6vw,30px)}
.card .n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.card p{font-size:15px;line-height:1.55}

.tally .v,.pr .amt{font-family:var(--sans);font-weight:900;letter-spacing:-.045em}
.tally .l,.pr .step,.pr .per{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}

.steps li::before{background:var(--acid);color:var(--ink);border-radius:0;font-weight:700;letter-spacing:.1em}
.steps .tag{border-radius:0;font-family:var(--mono);letter-spacing:.12em}

/* Het bewijsblok is op zeroslack.nl geen omrand kaartje maar een vol
   acid-vlak met carbon tekst — daar landt op die site het meeste accent. */
.proof{background:var(--acid);border:0;border-left:6px solid var(--ink);padding:clamp(26px,3.2vw,38px)}
.proof h3,.proof p,.proof li,.proof strong{color:var(--ink)}
.proof ul li::marker{color:var(--ink)}

.faq summary{font-family:var(--sans);font-weight:900;letter-spacing:-.025em;font-size:19px}
.faq summary:hover{color:var(--ink)}
.faq summary::after{color:var(--acid);font-weight:700}

/* Het aanbevolen aanbod krijgt bij Zero Slack geen subtiel randje maar een
   vol acid-vlak: dat is daar hét gebaar voor "dit is de keuze". */
.pr.now{background:var(--acid);box-shadow:none}
.pr.now h3,.pr.now .amt,.pr.now li,.pr.now strong{color:var(--ink)}
.pr.now .step,.pr.now .per{color:rgba(10,10,10,.66)}
.pr.now .b{background:var(--ink);border-color:var(--ink);color:var(--acid)}
.pr.now .b:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.pr h3{letter-spacing:-.03em}

.final{border:1px solid var(--seam);background:transparent;padding:clamp(40px,5vw,72px)}
.final h2{max-width:18ch}

/* ═══ 8. DE CARBON-BANDEN ══════════════════════════════════════════════════ */
/* Dit is wat zeroslack.nl zijn gewicht geeft: hele secties in carbon, met
   alle inhoud daarbinnen omgekeerd. Alleen kleur — geen maat, geen positie. */

.sec.zs-dark{background:var(--ink);color:var(--paper)}

.sec.zs-dark h1,
.sec.zs-dark h2,
.sec.zs-dark h3,
.sec.zs-dark h4,
.sec.zs-dark strong,
.sec.zs-dark b{color:var(--paper)}

.sec.zs-dark p,
.sec.zs-dark li,
.sec.zs-dark .lede,
.sec.zs-dark .sub,
.sec.zs-dark .fine{color:var(--pap-60,rgba(244,243,239,.6))}

.sec.zs-dark .kicker{color:var(--paper)}
.sec.zs-dark .idx{background:var(--acid);color:var(--ink)}

.sec.zs-dark h2 em,
.sec.zs-dark h1 em{color:var(--ink)}

/* hairlines en vlakken omkeren */
.sec.zs-dark .card,
.sec.zs-dark .final,
.sec.zs-dark .weekbox{border-color:var(--pap-20,rgba(244,243,239,.18));background:transparent}
.sec.zs-dark .card:hover{background:rgba(244,243,239,.05)}
.sec.zs-dark .proof{background:var(--acid);border-left-color:var(--paper)}
.sec.zs-dark .proof h3,.sec.zs-dark .proof p,.sec.zs-dark .proof li{color:var(--ink)}

/* rasters met 1px-voegen: voeg wordt papierlijn, cel wordt carbon */
.sec.zs-dark .tally,
.sec.zs-dark .steps,
.sec.zs-dark .prices,
.sec.zs-dark .choices{background:var(--pap-20,rgba(244,243,239,.18));border-color:var(--pap-20,rgba(244,243,239,.18))}
.sec.zs-dark .tally div,
.sec.zs-dark .steps li,
.sec.zs-dark .pr,
.sec.zs-dark .choices>div{background:var(--ink)}
.sec.zs-dark .pr.now{background:rgba(244,243,239,.05)}

.sec.zs-dark .tally .v,
.sec.zs-dark .pr .amt{color:var(--acid)}
.sec.zs-dark .tally .l,
.sec.zs-dark .tally .n,
.sec.zs-dark .pr .step,
.sec.zs-dark .pr .per,
.sec.zs-dark .card .n{color:var(--pap-60,rgba(244,243,239,.6))}

.sec.zs-dark .recog,
.sec.zs-dark .faq{border-top-color:var(--pap-20,rgba(244,243,239,.18))}
.sec.zs-dark .recog li{border-bottom-color:rgba(244,243,239,.12)}
.sec.zs-dark .recog li span.m{color:var(--pap-60,rgba(244,243,239,.6))}
.sec.zs-dark .faq details{border-bottom-color:rgba(244,243,239,.12)}
.sec.zs-dark .faq summary{color:var(--paper)}

.sec.zs-dark .trust{color:var(--pap-60,rgba(244,243,239,.6));border-top-color:var(--paper)}
.sec.zs-dark .weekbar{color:var(--pap-60,rgba(244,243,239,.6));border-bottom-color:var(--pap-20,rgba(244,243,239,.18))}
.sec.zs-dark .blk{border-color:var(--pap-20,rgba(244,243,239,.18))}

.sec.zs-dark a{color:var(--paper)}
.sec.zs-dark a:hover{color:var(--acid)}

/* knoppen op carbon */
.sec.zs-dark .b{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.sec.zs-dark .b:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.sec.zs-dark .b.gh{background:transparent;color:var(--paper);border-color:var(--paper)}
.sec.zs-dark .b.gh:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}

/* de vier keuzes houden hun eigen kleur — dat is betekenisdragend beeld.
   Alleen "houden" moet op carbon zichtbaar blijven, dus die wordt papier. */
.sec.zs-dark .choices .ch-k{--k:var(--paper);--kf:var(--paper)}
.sec.zs-dark .blk.k{background:var(--paper);border-color:var(--paper)}
.sec.zs-dark .i-k{background:var(--paper)}

/* De vier keuzes houden op carbon hun eigen betekeniskleur. Zonder deze
   regel wint de algemene carbon-kopregel hierboven en worden alle vier wit —
   dan is het kleurverschil dat de bron juist draagt, weg. */
.sec.zs-dark .choices .ch-k h3{color:var(--paper)}
.sec.zs-dark .choices .ch-d h3{color:#E08A00}
.sec.zs-dark .choices .ch-a h3{color:var(--acid)}
.sec.zs-dark .choices .ch-e h3{color:rgba(244,243,239,.58)}
.sec.zs-dark .choices .ch-d{--kf:#E08A00}
.sec.zs-dark .choices .ch-a{--kf:var(--acid)}
.sec.zs-dark .choices .ch-e{--kf:rgba(244,243,239,.38)}

/* Het amberlabel van de bron is op carbon onleesbaar (contrast 2,75).
   Op een donkere band wordt het het acid-label. */
.sec.zs-dark .steps .tag{
  color:var(--acid);background:rgba(198,244,50,.14);
}

/* Slotpaneel op carbon: acid-omlijnd, zoals de eindblokken van zeroslack.nl. */
.sec.zs-dark .final{border:2px solid var(--acid)}

/* ═══ 9. DE WITTE BAND ═════════════════════════════════════════════════════ */
/* zeroslack.nl zet één sectie op zuiver wit i.p.v. papier — een laboratorium-
   band tussen de carbonvlakken door. */

.sec.zs-white{background:#fff}
.sec.zs-white .card,
.sec.zs-white .final{background:#fff}
/* het bewijsblok blijft óók op de witte band een vol acid-vlak */
.sec.zs-white .proof{background:var(--acid)}

/* ═══ 10. TELEFOON ═════════════════════════════════════════════════════════ */

@media(max-width:900px){
  section.sec.hero{padding-top:clamp(96px,18vw,124px)}
  h1{max-width:none}
  h2{max-width:none}
}
@media(max-width:640px){
  section.sec{padding:clamp(56px,13vw,90px) 0}
  .cta-row .b{width:100%;justify-content:center;padding:16px 18px}
  .nlh nav{background:var(--paper)}
}

/* ═══ 11. DE WERKRUIMTE (/werkruimte) ══════════════════════════════════════ */
/* Het ingelogde dashboard. Dit is een werkinstrument, geen verkooppagina:
   dicht, scanbaar, tabellen boven kaarten, status via kleur. Dat is precies
   wat Zero Slack met zijn eigen beheeroppervlakken doet — dus geen carbon
   banden en geen reuzentype hier, maar wel hetzelfde schrift, dezelfde
   hairlines, dezelfde 0 radius en dezelfde acid-accenten. */

.wr{max-width:1440px}
.wr-top h1{
  font-family:var(--sans);font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.5rem,3.2vw,2.3rem);
}
.wr-top .who{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-60);
}

.wr-kpi>button{background:#fff;border-radius:0;border-color:var(--ink-30)}
.wr-kpi>button:hover{background:var(--acid)}
.wr-kpi .n{
  font-family:var(--sans);font-weight:900;letter-spacing:-.045em;
  font-size:clamp(1.5rem,2.8vw,2rem);color:var(--ink);
}
.wr-kpi .n small{font-family:var(--mono);font-size:.5em;font-weight:700;color:var(--ink-60)}
.wr-kpi .l{font-size:13px;color:var(--ink);font-weight:700;margin-top:7px}
.wr-kpi .s{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-60);
}

.wr-now{border:2px solid var(--ink);background:#fff;border-radius:0}
.wr-now>h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.1rem,2vw,1.35rem);
}
.wr-now.has>h2{color:var(--ink)}
.wr-item{border-bottom:1px solid var(--ink-30)}
.wr-item .t{font-size:15px;color:var(--ink);font-weight:700}
.wr-item .w{font-size:13px;color:var(--ink-60)}
.wr-calm{color:var(--ink-60);font-size:14px}
.wr-calm b{color:var(--ink);font-weight:900}

.wb{
  border:2px solid var(--ink);background:transparent;color:var(--ink);border-radius:0;
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
}
.wb:hover{border-color:var(--ink);background:var(--acid);color:var(--ink)}
.wb.go{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.wb.go:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.wb.off{background:transparent;color:var(--ink-60);border-color:var(--ink-30)}

.wr-sec h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.05rem,2vw,1.3rem);
}
.wr-sec .hint{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
}

.wr-tbl{border:1px solid var(--ink-30);background:#fff;border-radius:0}
.wr-tbl th{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
  background:transparent;border-bottom:2px solid var(--ink);
}
.wr-tbl td{border-bottom:1px solid var(--ink-30)}
.wr-tbl tbody tr:hover{background:rgba(10,10,10,.035)}
.wr-tbl .task{font-weight:700;color:var(--ink)}
.wr-tbl .task:hover{color:var(--ink);text-decoration:underline}
.wr-tbl .sub{font-size:12px;color:var(--ink-60)}
.wr-tbl .num{font-family:var(--mono);font-weight:700;font-size:12.5px;color:var(--ink)}

/* Status via kleur: het stipje houdt zijn betekenis, in het ZS-palet. */
.dot{font-size:12.5px;color:var(--ink);font-weight:500}
.dot i{border-radius:0;width:8px;height:8px;background:var(--ink-30)}
.dot.s1 i{background:#E08A00}
.dot.s2 i{background:var(--acid)}
.dot.s3 i{background:#8C5309}
.dot.s4 i{background:var(--ink)}

.wr-open{border:2px solid var(--ink);background:#fff}
.wr-detail{background:#fff}
.wr-load{color:var(--ink-60);font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase}

/* ═══ 12. LICHTE PANELEN IN EEN CARBON BAND ════════════════════════════════ */
/* GEMETEN FOUT (31× op /merk): de bron zet panelen op var(--sheet) = wit.
   Staat zo'n paneel in een carbon band, dan erft de tekst erbinnen de
   papierkleur van de band en komt papier op wit terecht — 1,06:1, volstrekt
   onleesbaar. Deze panelen worden daarom in een carbon band doorzichtig met
   een papieren hairline, precies zoals .card dat al deed. */
.sec.zs-dark .mk-sw,
.sec.zs-dark .mk-type,
.sec.zs-dark .mk-tablewrap,
.sec.zs-dark .mk-do>div,
.sec.zs-dark .mk-pers>div,
.sec.zs-dark .pr,
.sec.zs-dark .tally div,
.sec.zs-dark .steps li,
.sec.zs-dark .choices div{
  background:transparent;border-color:var(--pap-20,rgba(244,243,239,.18));
}
.sec.zs-dark .mk-swatches,
.sec.zs-dark .mk-do,
.sec.zs-dark .mk-pers{background:var(--pap-20,rgba(244,243,239,.18))}

/* De beeldmerk-demo is een UITZONDERING: die cellen laten het logo zien op
   daglicht, op inkt en op 24 pixels. Doorzichtig maken zou de demonstratie
   zelf kapotmaken. Ze blijven dus wit — en dan moet de tekst erin carbon
   blijven in plaats van de papierkleur van de band te erven. */
.sec.zs-dark .mk-logo{background:var(--seam);border-color:var(--seam)}
.sec.zs-dark .mk-logo>div{background:#fff}
.sec.zs-dark .mk-logo .lbl{color:var(--ink-60,rgba(10,10,10,.6))}
.sec.zs-dark .mk-logo .stage{border-color:var(--ink-30)}
.sec.zs-dark .mk-dl a{color:var(--ink);border-color:var(--ink)}
.sec.zs-dark .mk-dl a:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}

/* De payoff onder het woordmerk staat in ink-60; op carbon is dat 1:1. */
.sec.zs-dark .wm-txt b{color:var(--paper)}
.sec.zs-dark .wm-txt i{color:var(--pap-60,rgba(244,243,239,.6))}

.sec.zs-dark .mk-sw .nm,
.sec.zs-dark .mk-type .samp,
.sec.zs-dark .mk-tablewrap th,
.sec.zs-dark .mk-do>div b,
.sec.zs-dark .mk-pers>div b{color:var(--paper)}
.sec.zs-dark .mk-sw .hx,
.sec.zs-dark .mk-sw .us,
.sec.zs-dark .mk-type .spec,
.sec.zs-dark .mk-type .why,
.sec.zs-dark .mk-tablewrap td{color:var(--pap-60,rgba(244,243,239,.6))}

/* Op een WITTE band is het omgekeerde waar: daar moet alles carbon blijven. */
.sec.zs-white .mk-sw,
.sec.zs-white .mk-type,
.sec.zs-white .mk-tablewrap,
.sec.zs-white .mk-do>div,
.sec.zs-white .mk-pers>div{background:#fff;border-color:var(--seam)}

/* ═══ 13. LANGE SAMENSTELLINGEN ════════════════════════════════════════════ */
/* GEMETEN FOUT (51px overloop op 360px): Nederlandse samenstellingen als
   "rendementscalculator" zijn op de Zero Slack-kopmaat breder dan een
   telefoonscherm. Zero Slack heeft korte koppen en loopt er niet tegenaan;
   deze site wel. De kop mag dus breken — liever een afbreking dan een
   pagina die zijwaarts schuift. */
h1,h2,h3,.kbhero h1,.tlhero h1,.q-title{overflow-wrap:break-word}
@media (max-width:640px){
  h1,h2,h3{hyphens:auto}
}


/* ═══ 14. ACCENT OP DE WERKRUIMTE ══════════════════════════════════════════ */
/* GEMETEN FOUT: op /werkruimte stond geen enkel acid-accent. Zero Slack heeft
   altijd één acid-markering in beeld. Het rol-label boven de pagina is daar
   de natuurlijke plek — dat is ook waar zeroslack.nl zijn kickers zet. */
.wr-top .who{
  background:var(--acid);color:var(--ink);padding:4px 8px;display:inline-block;
}
.wr-empty b{
  background:linear-gradient(to top,var(--acid) 42%,transparent 42%);
  color:var(--ink);font-weight:900;
}

/* ═══ 15. TOKENS BINNEN EEN CARBON BAND ════════════════════════════════════ */
/* GEMETEN FOUT: de bron zet op sommige plekken een kleur INLINE, bijvoorbeeld
   style="color:var(--muted)". Een inline stijl wint van elke regel in een
   blad, dus geen enkele selector hierboven kan daar nog bij — op carbon werd
   dat carbon-op-carbon (1:1).

   De juiste ingang is dan niet de selector maar het TOKEN: binnen een carbon
   band betekent "gedempte tekst" nu eenmaal papier-60 in plaats van inkt-60.
   Door het token om te draaien klopt elk inline gebruik vanzelf, ook dat wat
   ik niet apart heb gezien. */
.sec.zs-dark{
  --muted:var(--pap-60,rgba(244,243,239,.60));
  --faint:var(--pap-60,rgba(244,243,239,.60));
  --ink-2:var(--pap-60,rgba(244,243,239,.60));
  --seam:var(--pap-20,rgba(244,243,239,.18));
  --seam-soft:rgba(244,243,239,.10);
}
/* ...maar binnen een licht paneel IN die band gelden de gewone tokens weer,
   anders keert de fout gewoon om (papier op wit). */
.sec.zs-dark .mk-logo>div,
.sec.zs-dark .proof,
.sec.zs-dark .pr.now{
  --muted:rgba(10,10,10,.60);
  --faint:rgba(10,10,10,.60);
  --ink-2:rgba(10,10,10,.72);
  --seam:rgba(10,10,10,.16);
  --seam-soft:rgba(10,10,10,.085);
}

/* ═══ 16. HET BEWIJSBLOK IN EEN CARBON BAND ════════════════════════════════ */
/* GEMETEN FOUT (1,15:1 op /playbook): .proof is een vol ACID vlak. Staat dat
   blok in een carbon band, dan pakte de algemene carbonregel hierboven de
   knoppen erin en werden ze papier — papier op acid is onleesbaar. Binnen een
   acid vlak is de knop altijd carbon, ongeacht de band eromheen. */
.sec.zs-dark .proof .b,
.sec.zs-dark .proof .b.gh{
  background:var(--ink);border-color:var(--ink);color:var(--paper);
}
.sec.zs-dark .proof .b:hover,
.sec.zs-dark .proof .b.gh:hover{
  background:var(--paper);border-color:var(--ink);color:var(--ink);
}
.sec.zs-dark .proof .b.gh{background:transparent;color:var(--ink)}
.sec.zs-dark .proof .b.gh:hover{background:var(--ink);color:var(--acid)}
.sec.zs-dark .proof a{color:var(--ink)}
.sec.zs-dark .proof .fine,.sec.zs-dark .proof .sub{color:rgba(10,10,10,.66)}

/* ═══ 17. LAATSTE UITLIJNING OP ZEROSLACK.NL ═══════════════════════════════ */
/* Gemeten naast de live site, verschil voor verschil weggewerkt.             */

/* De kleine knop van zeroslack.nl is .btn.sm: 10,5px met .12em op 10/15 padding.
   Die van de kopie stond op 11px/16px en was daardoor net iets breder. */
.b.sm{padding:10px 15px;font-size:11px}

/* Het pijltje in een knop erft bij Zero Slack de knopmaat; de bron zette het
   op 14px, waardoor er een mono-maat op de pagina stond die zeroslack.nl niet
   heeft. */
.b .ar,.b.sm .ar{font-size:inherit}

/* De payoff onder het woordmerk stond op 9px — één maat kleiner dan de
   kleinste die zeroslack.nl gebruikt. */
.wm-txt i{font-size:10px}


/* ═══ 18. GROTE CIJFERS STAAN IN MONO ══════════════════════════════════════ */
/* GEMETEN op zeroslack.nl: élk groot getal en élke prijs staat daar in
   JetBrains Mono 700 met een strakke negatieve letterafstand — €22.330 op
   67px/-.05em, "40" en "75" op 48px/-.05em, €1.950 op 38px/-.03em, de
   herocijfers op 30px/-.04em. Nergens Archivo.

   Dat is geen detail maar een kenmerk: bij Zero Slack zie je aan de VORM of
   iets een bewering is (Archivo) of een getal (mono). De bron zette zijn
   cijfers in de kopserif; die stonden hier dus nog in Archivo 900. */
.tally .v,
.pr .amt,
.wr-kpi .n,
.mk-sw .hx{
  font-family:var(--mono);font-weight:700;letter-spacing:-.045em;
}
.pr .amt{letter-spacing:-.03em}
.mk-sw .hx{letter-spacing:.06em;font-weight:700}

/* MONO-SCHAAL — de bron kapte zijn grote cijfers af op 52px (kerncijfers) en
   44px (prijzen). Die twee maten bestaan niet op zeroslack.nl: daar staat elk
   groot kerncijfer op 48px en elke prijs op 38px. Twee maten buiten de schaal
   maakten het verschil zichtbaar, dus ze worden op de Zero Slack-trap gezet.
   De onderkant van de clamp schaalt mee, zodat mobiel niet te groot wordt. */
.tally .v{font-size:clamp(32px,4.2vw,48px)}
.pr .amt{font-size:clamp(28px,3.3vw,38px)}

/* Het sectienummer stond op 9px — kleiner dan de kleinste maat die
   zeroslack.nl gebruikt (10px). */
.idx{font-size:10px}