/* ===========================================================================
   ZERO SLACK-LAAG OVER DE TOOLS (tools.css)

   10 pagina's: het overzicht + negen werkende rekentools. Alle vragen,
   berekeningen, uitkomsten en teksten blijven exact die van de bron — het
   script (tools.js) is niet aangeraakt. Alleen de vormtaal verandert.

   BRON VAN DE MATEN — twee live oppervlakken van zeroslack.nl:

     1. /academy  (leesidioom)      → spiegel 1180px, h1 clamp(2.1rem,6.4vw,
        4.6rem), .ac-hero met 2px carbon onderrand, .ac-toc als omlijnd wit
        paneel, .ac-list als hairline-rij, .ac-next a als kaart, .ac-start als
        acid vlak, .ac-kpi als omlijnd cijferblok, .ac-bar als 9px rail met
        acid vulling.
     2. /10voor10 (formulieridioom) → .tv-veld label = mono 10px/.16em/
        kapitaal/ink-60; invoervelden = 2px carbon op wit, sans 16px/600,
        0 radius; focus = 3px acid outline met 1px offset; fout = #C0392B op
        #FFF5F4; .tv-kaartform = papier met 2px ACID rand; .tv-knoprij .note =
        mono 10px/.1em/kapitaal.

   DE VIER BESLISSINGEN (houden/delegeren/automatiseren/schrappen) houden hun
   eigen kleur: dat is betekenisdragend beeld, geen merkdecoratie. Ze zijn wel
   in het Zero Slack-palet gezet (carbon / amber / acid / grijs).
   =========================================================================== */

/* ═══ 1. SPIEGEL ═══════════════════════════════════════════════════════════ */
.tlwrap{max-width:1180px;padding-left:clamp(20px,5vw,80px);padding-right:clamp(20px,5vw,80px)}

/* ═══ 2. KOP ═══════════════════════════════════════════════════════════════ */

.tlhero{
  border-bottom:2px solid var(--ink);
  padding:clamp(26px,4vw,48px) 0 clamp(32px,5vw,58px);
}
.tlhero .crumb{
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin:0 0 16px;
}
.tlhero .crumb a{color:var(--ink-60);text-decoration:none}
.tlhero .crumb a:hover{color:var(--ink);text-decoration:underline}
.tlhero .crumb span{opacity:.4;padding:0 5px}

.tlhero h1{
  font-family:var(--sans);font-weight:900;
  font-size:clamp(2.1rem,6.4vw,4.6rem);
  letter-spacing:-.035em;line-height:.95;margin:0;max-width:20ch;
}
.tlhero .lede{
  margin-top:20px;font-size:clamp(1.02rem,1.9vw,1.24rem);
  line-height:1.5;color:var(--ink-60);max-width:60ch;font-weight:500;
}
.tlhero .meta{gap:6px 10px;margin-top:24px}
.tlhero .meta b{
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
  border:1px solid var(--ink-30);padding:4px 8px;border-radius:0;background:transparent;
}
.tlhero .meta b.t{background:var(--acid);border-color:var(--acid);color:var(--ink)}

/* ═══ 3. KOLOMMEN EN ZIJKOLOM ══════════════════════════════════════════════ */

.tlcols{padding:clamp(34px,4.6vw,56px) 0 clamp(44px,5.5vw,72px)}
.tlside{top:88px}
.tlside section{
  border-top:0;border:1px solid var(--ink-30);background:#fff;
  padding:18px;margin-bottom:10px;
}
.tlside h4{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin:0 0 12px;
}
.tlside a{
  color:var(--ink);text-decoration:none;padding:9px 0;line-height:1.4;
  font-size:14.5px;font-weight:700;
  border-bottom:0;border-top:1px solid var(--ink-30);
}
.tlside a:first-of-type{border-top:0}
.tlside a:hover{color:var(--ink);text-decoration:underline}
.tlside a b{color:var(--ink);font-weight:700}
.tlside a span{color:var(--ink-60);font-size:13px;font-weight:500;margin-top:3px}

/* ═══ 4. HET WERKPANEEL ════════════════════════════════════════════════════ */
/* De `.ac-toc` van de Academy: één omlijnd wit blok, geen schaduw. */

.tlpanel{
  border:1px solid var(--ink-30);background:#fff;border-radius:0;
  padding:clamp(20px,3vw,30px);margin:0 0 26px;
}
.tlpanel>h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.25rem,2.4vw,1.6rem);margin:0 0 8px;
}
.tlpanel>p.intro{color:var(--ink-60);margin:0 0 24px;max-width:62ch;font-size:16px;line-height:1.55}

/* ═══ 5. VRAGENRIJ ═════════════════════════════════════════════════════════ */

.tlq{border-top:1px solid var(--ink-30);padding:16px 0;gap:16px}
.tlq.done{opacity:1}
.tlq.done p{color:var(--ink-60)}
.tlq .lab{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);margin-bottom:6px;
}
.tlq p{margin:0;font-size:16px;line-height:1.45;color:var(--ink);font-weight:500}

.tlopts{gap:0}
.tlopts button{
  background:#fff;border:2px solid var(--ink);border-left-width:0;
  color:var(--ink);font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;
  border-radius:0;cursor:pointer;transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s;
}
.tlopts button:first-child{border-left-width:2px}
.tlopts button:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tlopts button.on{background:var(--acid);border-color:var(--ink);color:var(--ink)}
.tlopts button:focus-visible,.tlq input:focus-visible{outline:3px solid var(--acid);outline-offset:1px}

/* ═══ 6. INVOERVELDEN — het formulieridioom van zeroslack.nl ═══════════════ */

.tlfields{gap:16px}
.tlfield>span{
  display:block;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60);
  margin-bottom:7px;line-height:1.4;
}
.tlfield input,.tlfield select,.tlfield textarea{
  width:100%;max-width:100%;
  border:2px solid var(--ink);background:#fff;
  padding:13px 14px;border-radius:0;
  font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.tlfield select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
                   linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px;
}
.tlfield textarea{min-height:96px;resize:vertical;line-height:1.5}
.tlfield input:focus,.tlfield select:focus,.tlfield textarea:focus{
  outline:3px solid var(--acid);outline-offset:1px;border-color:var(--ink);
}
.tlfield .hint{font-size:12.5px;color:var(--ink-60);margin-top:7px;line-height:1.45}
.tlfield.mono input{font-family:var(--mono);font-weight:700}
.tlfield .unit i{
  font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);right:14px;
}
.tlfield .unit input{padding-right:48px}

/* ═══ 7. KEUZEGROEP ════════════════════════════════════════════════════════ */

.tlchoice{border-top:1px solid var(--ink-30);padding:18px 0}
.tlchoice>span{font-size:16px;color:var(--ink);margin-bottom:11px;font-weight:500}
.tlchips{gap:6px}
.tlchips button{
  background:#fff;border:2px solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-weight:700;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;
  padding:9px 13px;border-radius:0;cursor:pointer;
  transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s;
}
.tlchips button:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tlchips button.on{background:var(--acid);border-color:var(--ink);color:var(--ink);font-weight:700}
.tlchips button:focus-visible{outline:3px solid var(--acid);outline-offset:1px}

/* ═══ 8. RIJEN MET TAKEN ═══════════════════════════════════════════════════ */

.tlrow{
  border:1px solid var(--ink-30);background:#fff;border-radius:0;
  padding:16px;margin-bottom:10px;
}
.tlrow input,.tlrow select{
  background:#fff;border:2px solid var(--ink);color:var(--ink);
  font-family:var(--sans);font-size:15.5px;font-weight:600;
  padding:11px 12px;border-radius:0;-webkit-appearance:none;appearance:none;
}
.tlrow input[type=number]{text-align:right;font-family:var(--mono);font-weight:700}
.tlrow input:focus,.tlrow select:focus{outline:3px solid var(--acid);outline-offset:1px;border-color:var(--ink)}
.tlrow .sliders label,.tlrow .picks label{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);
}
.tlrow .sliders label b{color:var(--ink);font-family:var(--mono);font-weight:700}
.tlrow .sliders label i{
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-60);margin-top:4px;
}
.tlrow .del{
  background:transparent;border:2px solid var(--ink-30);color:var(--ink-60);
  font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:0;
}
.tlrow .del:hover{border-color:var(--ink);color:var(--ink);background:transparent}
input[type=range]{accent-color:var(--ink);margin-top:8px}

/* ═══ 9. ACTIEBALK ═════════════════════════════════════════════════════════ */

.tlact{gap:14px;margin-top:22px;padding-top:20px;border-top:2px solid var(--ink)}
.tlact .status{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
}
.tlerr{
  color:#C0392B;font-size:14px;margin:12px 0 0;
  font-family:var(--mono);font-weight:700;letter-spacing:.06em;
}

/* ═══ 10. HET RESULTAAT ════════════════════════════════════════════════════ */
/* Het oordeel = de `.ac-answer` van de Academy: 4px acid op wit. */

.tlres{scroll-margin-top:96px}
.tlverdict{
  border:0;border-left:4px solid var(--acid);background:#fff;
  padding:20px 22px;border-radius:0;margin:0 0 20px;
}
.tlverdict .k{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:9px;
}
.tlverdict h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.035em;line-height:.99;
  font-size:clamp(1.5rem,3.6vw,2.6rem);margin:0 0 12px;max-width:22ch;
}
.tlverdict p{margin:0;color:var(--ink);font-size:16.5px;line-height:1.55;max-width:62ch;font-weight:500}
/* De vier uitkomsten houden hun betekeniskleur in de linkerrand. */
.tlverdict.keep{border-left-color:var(--keep)}
.tlverdict.delegate{border-left-color:var(--delegate-fill)}
.tlverdict.automate{border-left-color:var(--acid)}
.tlverdict.eliminate{border-left-color:var(--ink-30)}

/* Cijferblokken = de `.ac-kpi` van de Academy. */
.tlscores{gap:0;margin:0 0 22px;border:1px solid var(--ink-30);background:var(--ink-30)}
.tlscore{border:0;background:#fff;padding:16px;border-radius:0}
.tlscore span{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);margin-bottom:9px;
}
.tlscore b{
  font-family:var(--sans);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;
  letter-spacing:-.045em;line-height:1;color:var(--ink);
}
.tlscore b small{font-size:.5em;color:var(--ink-60);font-weight:700;letter-spacing:-.02em}
.tlscore i{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin-top:8px;
}
/* De rail = de `.ac-bar .tr`: 9px, ink-30, acid vulling. */
.tlmeter{height:9px;background:var(--ink-30);border-radius:0;margin-top:11px}
.tlmeter i{background:var(--acid)}

.tltable{
  margin:0 0 22px;font-size:14px;border:1px solid var(--ink-30);
  border-collapse:collapse;display:block;overflow-x:auto;
}
.tltable th,.tltable td{border:0;border-bottom:1px solid var(--ink-30);padding:11px 14px;vertical-align:top}
.tltable th{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);background:transparent;
}
.tltable td{color:var(--ink-60)}
.tltable td:first-child{color:var(--ink);font-weight:700}
.tltable td.num{font-family:var(--mono);font-weight:700}
.tltable tr.sum td{background:var(--acid);color:var(--ink);font-weight:700}
.tltable tr:last-child td{border-bottom:0}
.tltable .why{font-size:12.5px;color:var(--ink-60);margin-top:5px;line-height:1.45}

/* Labels: mono-chip met carbon rand, zoals de `.ac-src .k` van de Academy. */
.tag{
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:0;border:1px solid var(--ink);color:var(--ink);
}
.tag.keep{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag.delegate{background:var(--delegate-fill);color:var(--ink);border-color:var(--ink)}
.tag.automate{background:var(--acid);color:var(--ink);border-color:var(--ink)}
.tag.eliminate{background:transparent;color:var(--ink-60);border-color:var(--ink-30)}

.tlblock{
  border:1px solid var(--ink-30);background:#fff;border-radius:0;
  padding:18px;margin-bottom:8px;
}
.tlblock h3{
  font-family:var(--sans);font-weight:900;font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:-.025em;line-height:1.15;margin:0;
}
.tlblock p{margin:0 0 9px;font-size:15px;color:var(--ink-60);line-height:1.55}
.tlblock p strong{color:var(--ink);font-weight:700}
.tlblock p.proof{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);
}

.tlgroups{gap:0;margin:0 0 22px;border:1px solid var(--ink-30);background:var(--ink-30)}
.tlgroup{border:0;background:#fff;padding:16px;border-radius:0}
.tlgroup span{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);
}
.tlgroup b{
  font-family:var(--sans);font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:900;
  letter-spacing:-.04em;margin:8px 0 0;line-height:1;
}
.tlgroup p{margin:10px 0 0;font-size:12.5px;color:var(--ink-60);line-height:1.5}

/* ═══ 11. HET ARTEFACT (de uitdraai) ═══════════════════════════════════════ */

.tlartifact{border:2px solid var(--ink);background:#fff;border-radius:0;margin:0 0 22px}
.tlartifact .ah{padding:12px 16px;border-bottom:2px solid var(--ink);background:var(--ink)}
.tlartifact .ah span{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
}
.tlartifact .ab{padding:22px}
.tlartifact .ab h4{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  margin:24px 0 9px;padding-bottom:6px;border-bottom:1px solid var(--ink-30);
}
.tlartifact .ab h4:first-child{margin-top:0}
.tlartifact .ab p,.tlartifact .ab ul,.tlartifact .ab ol{color:var(--ink);font-size:15.5px;line-height:1.6}
.tlartifact .ab p{margin:0 0 11px}

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

/* ═══ 12. DE VERVOLGSTAP ═══════════════════════════════════════════════════ */
/* De `.ac-start` van de Academy: vol acid met 2px carbon rand. */

.tlnext{
  border:2px solid var(--ink);border-left-width:2px;background:var(--acid);
  border-radius:0;padding:clamp(22px,3.4vw,34px);margin:0 0 26px;
}
.tlnext .k{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px;
}
.tlnext h3{
  font-family:var(--sans);font-weight:900;letter-spacing:-.035em;line-height:.99;
  font-size:clamp(1.4rem,3vw,2.1rem);margin:0 0 12px;max-width:20ch;color:var(--ink);
}
.tlnext p{margin:0 0 20px;color:rgba(10,10,10,.70);max-width:58ch;font-size:16px;line-height:1.55}
.tlnext .row{gap:16px}
.tlnext .fine{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:rgba(10,10,10,.62);margin:0;
}
/* Op acid wordt de knop carbon, anders valt hij weg. */
.tlnext .b,.tlmain .tlnext a.b{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tlnext .b:hover,.tlmain .tlnext a.b:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.tlnext .b.gh,.tlmain .tlnext a.b.gh{background:transparent;border-color:var(--ink);color:var(--ink)}
.tlnext .b.gh:hover,.tlmain .tlnext a.b.gh:hover{background:var(--ink);color:var(--acid)}

/* de toolkaart, ook hier (tools.css bevat zijn eigen kopie) */
.tlcard{
  border:0;border-left:4px solid var(--acid);background:#fff;
  border-radius:0;padding:18px 20px;margin:26px 0;
}
.tlcard .k{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:8px;
}
.tlcard h4{font-family:var(--sans);font-weight:900;font-size:16.5px;letter-spacing:-.025em;margin:0 0 8px}
.tlcard p{margin:0 0 14px;font-size:15px;color:var(--ink-60);line-height:1.55}
.tlcard a{
  font-family:var(--mono);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:2px solid var(--acid);
}
.tlcard a:hover{background:var(--acid);text-decoration:none}
.tlcard .sec2{margin-top:10px;font-size:13px;color:var(--ink-60)}
.tlcard .sec2 a{
  font-family:var(--sans);font-weight:500;font-size:13px;text-transform:none;
  letter-spacing:0;color:var(--ink-60);border-bottom:0;text-decoration:underline;
}

/* ═══ 13. DE UITLEG ════════════════════════════════════════════════════════ */

.tlprose{max-width:66ch;margin:0 0 clamp(34px,4.6vw,56px)}
.tlprose h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(1.5rem,3.6vw,2.6rem);margin:clamp(34px,4.6vw,56px) 0 0;max-width:22ch;
}
.tlprose h2:first-child{margin-top:0}
.tlprose p{margin:16px 0 0;color:var(--ink);font-size:16.5px;line-height:1.6;max-width:64ch}
.tlprose p+p{margin-top:12px}
.tlprose ul{margin:26px 0 0;border-top:1px solid var(--ink-30)}
.tlprose li{
  border-bottom:1px solid var(--ink-30);
  padding:15px 0 15px 34px;margin:0;
  font-size:16px;line-height:1.5;color:var(--ink);max-width:70ch;
}
.tlprose li::before{content:"";left:0;top:23px;width:18px;height:2px;background:var(--ink)}
.tlprose details{border-top:1px solid var(--ink-30);padding:0}
.tlprose details summary{
  padding:18px 0;font-family:var(--sans);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1rem,1.8vw,1.15rem);color:var(--ink);
}
.tlprose details summary::after{font-family:var(--mono);font-weight:700;font-size:18px;color:var(--ink)}
.tlprose details[open] summary::after{content:"\2212"}
.tlprose details p{margin:0 0 18px;font-size:15.5px;color:var(--ink-60)}

/* ═══ 14. HET OVERZICHT ════════════════════════════════════════════════════ */

.tlfase{margin:0 0 clamp(34px,4.6vw,46px)}
.tlfase .fh{gap:12px;margin-bottom:10px}
.tlfase .fh .idx{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--acid);background:var(--ink);padding:4px 7px;
}
.tlfase .fh h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.035em;line-height:1;
  font-size:clamp(1.3rem,2.8vw,1.9rem);margin:0;
}
.tlfase>p{color:var(--ink-60);margin:0 0 20px;font-size:16px;line-height:1.55;max-width:64ch}

/* De tegels = de `.ac-next a` van de Academy: 1px op wit, carbon bij hover. */
.tlgrid{gap:8px}
.tltile{
  border:1px solid var(--ink-30);background:#fff;border-radius:0;padding:18px;
  transition:background .18s cubic-bezier(.2,.7,.2,1),color .18s;
}
.tltile:hover{border-color:var(--ink-30);background:var(--ink);transform:none}
.tltile .badge{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);
}
.tltile:hover .badge{color:var(--acid)}
.tltile h3{
  font-family:var(--sans);font-weight:900;font-size:clamp(1.05rem,2vw,1.3rem);
  letter-spacing:-.025em;line-height:1.05;text-transform:uppercase;margin:9px 0 8px;color:var(--ink);
}
.tltile:hover h3{color:var(--paper)}
.tltile p{margin:0;font-size:14px;color:var(--ink-60);line-height:1.5}
.tltile:hover p{color:var(--pap-60)}
.tltile .go{
  margin-top:14px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.tltile:hover .go{color:var(--acid)}

.tlflow{
  border:1px solid var(--ink-30);background:#fff;border-radius:0;
  padding:22px;margin:0 0 clamp(34px,4.6vw,44px);
}
.tlflow h2{
  font-family:var(--sans);font-weight:900;letter-spacing:-.03em;
  font-size:clamp(1.15rem,2.2vw,1.45rem);margin:0 0 16px;
}
.tlflow li{
  border-top:1px solid var(--ink-30);padding-top:12px;
  font-size:15px;color:var(--ink-60);
}
.tlflow li b{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
}
.tlflow li a{color:var(--ink);text-decoration:underline;border-bottom:0;font-weight:700}
.tlflow li a:hover{background:var(--acid);border-bottom:0}

/* Een knop is een knop, geen tekstlink. */
.tlmain a.b,.tlprose a.b{color:var(--paper);border-bottom:0;text-decoration:none}
.tlmain a.b:hover,.tlprose a.b:hover{background:var(--acid);color:var(--ink)}
.tlmain a.b.gh,.tlprose a.b.gh{color:var(--ink);border-bottom:0;text-decoration:none}
.tlmain a.b.gh:hover,.tlprose a.b.gh:hover{background:var(--ink);color:var(--paper)}

/* ═══ 15. TELEFOON ═════════════════════════════════════════════════════════ */

@media (max-width:620px){
  .tlhero{padding:26px 0 28px}
  .tlhero h1{max-width:none}
  .tlopts{width:100%}
  .tlopts button{flex:1;text-align:center;padding:12px 6px}
  .tlscores{grid-template-columns:1fr 1fr}
}

/* ═══ 16. CHROOM OP LEESBREEDTE ════════════════════════════════════════════ */
/* Zelfde reden als in de kennisbank: de balk moet boven de kolom uitlijnen. */
.nlh-in,.nlf-in{max-width:1180px}

/* ═══ 17. GEMETEN CORRECTIE ════════════════════════════════════════════════ */
/* 51px overloop op 360px: "rendementscalculator" past niet op de kopmaat van
   Zero Slack. Breken mag; zijwaarts schuiven niet. */
.tlhero h1,.tlverdict h2,.tlprose h2,.tlblock h3,.tltile h3{overflow-wrap:break-word}

/* ═══ 18. KOPBALK EXACT ALS DE ACADEMY ═════════════════════════════════════ */
/* Zelfde meting als bij de kennisbank: op het leesoppervlak van zeroslack.nl
   is de balk .92 doorschijnend en 69px hoog. */
.nlh{background:rgba(244,243,239,.92)}
.nlh-in{padding-top:14px;padding-bottom:14px}

/* De kleine knop is op het LEESoppervlak van zeroslack.nl 10,5px (op de
   homepage 11px) — gemeten verschil op de echte site, dus hier ook. */
.b.sm{padding:10px 15px;font-size:10.5px}

/* Grote cijfers in mono, zoals overal op zeroslack.nl. */
.tlscore b,.tlgroup b{font-family:var(--mono);font-weight:700;letter-spacing:-.045em}
.tlscore b small{font-family:var(--mono);font-weight:700}