/* Calculators (/tools and /tools/<slug>). Dark panel in the palette of the owner's missed-call
   calculator; the page around it is the site's own. Everything is prefixed calc- or tools-. */
.calc-section{--c-bg:#07101c;--c-bg2:#0a1423;--c-card:#111d2b;--c-card2:#162335;--c-line:#26364a;--c-text:#f3f7fb;--c-muted:#9fb0c4;--c-accent:#18e0c0;--c-accent2:#11c9ad;--c-danger:#ff6b7a;
  background:radial-gradient(circle at 85% 0%,rgba(24,224,192,.10),transparent 35%),linear-gradient(180deg,var(--c-bg2),var(--c-bg));color:var(--c-text);padding:56px 0 72px}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.calc-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:22px;padding:26px;box-shadow:0 28px 80px rgba(0,0,0,.38)}
.calc-inputs h2{margin:0 0 18px;font-size:20px;letter-spacing:-.01em}
.calc-field{display:grid;gap:8px;padding:14px 0;border-top:1px solid rgba(255,255,255,.06)}
.calc-field:first-of-type{border-top:0;padding-top:0}
.calc-field label{font-weight:750;font-size:15px}
.calc-field small{color:var(--c-muted);font-size:12.5px;line-height:1.45}
.calc-number{display:flex;align-items:center;background:var(--c-bg);border:1px solid var(--c-line);border-radius:12px;padding:0 12px;transition:border-color .15s}
.calc-number:focus-within{border-color:var(--c-accent)}
.calc-number input{flex:1;min-width:0;background:transparent;border:0;color:var(--c-text);font:inherit;font-size:18px;font-weight:800;padding:11px 0;outline:0;-moz-appearance:textfield}
.calc-number input::-webkit-outer-spin-button,.calc-number input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-unit{color:var(--c-muted);font-weight:800;padding:0 6px 0 0}
.calc-number input+.calc-unit{padding:0 0 0 6px;white-space:nowrap;font-size:13px}
.calc-field select{background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-line);border-radius:12px;padding:12px;font:inherit;font-weight:750}
.calc-field select:focus{outline:0;border-color:var(--c-accent)}
.calc-range{width:100%;accent-color:var(--c-accent);margin:2px 0}
.calc-assumptions{margin-top:10px;border:1px solid var(--c-line);border-radius:14px;padding:0 14px;background:var(--c-card2)}
.calc-assumptions summary{cursor:pointer;padding:13px 0;font-weight:850}
.calc-assumptions summary span{color:var(--c-muted);font-weight:600;font-size:13px;margin-left:6px}
.calc-assumptions .calc-field:first-of-type{border-top:1px solid rgba(255,255,255,.06);padding-top:14px}
.calc-result{position:sticky;top:18px}
.calc-headline{padding:20px;border-radius:16px;background:var(--c-bg);border:1px solid var(--c-line)}
.calc-headline span{display:block;color:var(--c-muted);font-weight:750;font-size:14px}
.calc-headline strong{display:block;font-size:clamp(40px,5vw,56px);line-height:1.05;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums}
.calc-headline em{display:block;font-style:normal;font-weight:800;margin-top:6px;color:var(--c-accent)}
.calc-headline.tone-loss strong{color:var(--c-danger)}
.calc-headline.tone-gain strong{color:var(--c-accent)}
.calc-subs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:10px}
.calc-subs div{padding:14px 16px;border-radius:14px;background:var(--c-card2);border:1px solid var(--c-line)}
.calc-subs span{display:block;color:var(--c-muted);font-size:12.5px;line-height:1.35}
.calc-subs b{display:block;font-size:24px;margin-top:4px;font-variant-numeric:tabular-nums}
.calc-subs .tone-gain b{color:var(--c-accent)}.calc-subs .tone-loss b{color:var(--c-danger)}
.calc-rows{margin:14px 0 0;display:grid}
.calc-rows div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid rgba(255,255,255,.06);font-size:14px}
.calc-rows dt{color:var(--c-muted)}.calc-rows dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-explain{margin:12px 0 0;color:var(--c-muted);font-size:12.5px;line-height:1.5}
.calc-explain b{color:var(--c-text)}
.calc-report{margin-top:18px;padding-top:18px;border-top:1px solid var(--c-line)}
.calc-lead h3,.calc-thanks h3{margin:0 0 6px;font-size:19px}
.calc-lead>p,.calc-thanks p{margin:0 0 12px;color:var(--c-muted);font-size:14px}
.calc-lead-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.calc-lead-fields label{display:grid;gap:5px;font-size:13px;font-weight:750}
.calc-lead-fields i{font-style:normal;color:var(--c-muted);font-weight:600}
.calc-lead-wide{grid-column:1/-1}
.calc-lead-fields input{background:var(--c-bg);border:1px solid var(--c-line);border-radius:11px;color:var(--c-text);font:inherit;padding:11px 12px;outline:0}
.calc-lead-fields input:focus{border-color:var(--c-accent)}
.calc-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.calc-btn{width:100%;margin-top:12px;background:linear-gradient(135deg,var(--c-accent),var(--c-accent2));color:#04201b;box-shadow:0 12px 28px rgba(24,224,192,.22)}
.calc-btn:disabled{opacity:.7;cursor:wait;transform:none}
.calc-lead-error{margin:10px 0 0!important;color:var(--c-danger)!important;font-weight:750}
.calc-privacy{margin:10px 0 0!important;font-size:12px!important}
.calc-noscript{color:var(--c-muted)}
/* Static content under the calculator */
.calc-steps{counter-reset:s;display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
.calc-steps li{counter-increment:s;display:flex;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink)}
.calc-steps li:before{content:counter(s);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e6fbf7;color:#0b8f7b;font-weight:900}
.calc-sources{margin-top:18px;font-size:13px;color:var(--muted)}
/* On a card in the blog overview, `.offer-card p` (two components) would otherwise outrank
   `.calc-sources` and render the source at 15px, indistinguishable from the summary above it. */
.offer-card .calc-sources{margin:2px 0 8px;font-size:13px;line-height:1.45}
.tools-groups{display:grid;gap:34px}
.tools-group h2{margin:0 0 4px;font-size:26px;letter-spacing:-.02em}
.tools-group>p{margin:0 0 14px;color:var(--muted)}
.tools-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tools-card{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:.18s}
.tools-card:hover{border-color:#8fe3d6;box-shadow:var(--shadow2);transform:translateY(-2px)}
.tools-card b{font-size:17px}.tools-card span{color:var(--muted);font-size:14px}
.tools-card i{font-style:normal;margin-top:auto;padding-top:8px;color:#0b8f7b;font-weight:850;font-size:14px}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr}.calc-result{position:static}}
@media(max-width:520px){.calc-card{padding:20px 16px;border-radius:18px}.calc-lead-fields{grid-template-columns:1fr}.calc-section{padding:36px 0 52px}}
.calc-lead>p strong,.calc-thanks p strong{color:var(--c-text);font-weight:800}
/* Calculators inside the site's pages: a dark band with a heading, optionally tabs. */
.calc-head{max-width:760px;margin-bottom:26px}
.calc-section .eyebrow{color:var(--c-accent)}
.calc-section .title{color:var(--c-text)}
.calc-section .subtitle{color:var(--c-muted)}
.calc-tabbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.calc-tabbar button{font:inherit;font-weight:800;font-size:14px;padding:10px 14px;border-radius:999px;border:1px solid var(--c-line);background:var(--c-card);color:var(--c-muted);cursor:pointer}
.calc-tabbar button:hover{color:var(--c-text);border-color:var(--c-accent)}
.calc-tabbar button[aria-selected="true"]{background:var(--c-accent);border-color:var(--c-accent);color:#04201b}
.calc-full{display:inline-block;margin-top:14px;color:var(--c-accent);font-weight:800;font-size:14px}
.calc-more{margin:18px 0 0;color:var(--c-muted)}
.calc-more a{color:var(--c-accent);font-weight:800}
.calc-link{display:block;margin-top:6px;color:#0b8f7b!important}
@media(max-width:520px){.calc-tabbar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.calc-tabbar button{flex:none}}
.calc-thanks .tb-book{margin-top:14px}
/* Sector pages (/sectoren/<slug>): the before/after scenario. One dark band that tells the same
   request twice — red as it goes today, teal as it goes with the system — so a visitor sees the
   difference instead of a promise. Both cards hang in the same grid (--ba-rows from the generator)
   and pick up its rows with subgrid, so every step lines up with its counterpart and both outcomes
   sit on one line. Without subgrid support the rows simply size themselves, as they did before. */
.ba-head{max-width:840px;margin-bottom:28px}
.ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--ba-rows,8),auto);gap:20px}
.ba-col{display:grid;grid-row:1/-1;grid-template-rows:subgrid;row-gap:0;padding:26px;border-radius:22px;background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.28)}
.ba-col header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ba-col h3{margin:0;font-size:23px;letter-spacing:-.02em}
.ba-tag{border-radius:999px;padding:5px 10px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.ba-sub{margin:8px 0 0;color:var(--muted);font-size:14px;align-self:start}
.ba-steps{display:contents}
.ba-steps li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid var(--line)}
.ba-steps li:first-child{margin-top:14px}
.ba-steps b{font-size:12px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;padding-top:3px;font-variant-numeric:tabular-nums}
.ba-steps li>div>strong{display:block;font-size:16px;line-height:1.35}
.ba-steps p strong.kw{display:inline}
.ba-steps p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.ba-out{align-self:stretch;display:flex;align-items:center;margin:18px 0 0;padding:15px 18px;border-radius:15px;font-size:15px;line-height:1.45;font-weight:700}
.ba-before{border-color:#f0cfd4}
.ba-before .ba-tag{background:#fdeaec;color:#b3323f}
.ba-before .ba-steps b{color:#c2525e}
.ba-before .ba-out{background:#fdeff1;color:#a32b38}
.ba-after{border-color:#b9e7de}
.ba-after .ba-tag{background:#dcf7f1;color:#0b8f7b}
.ba-after .ba-steps b{color:#0b8f7b}
.ba-after .ba-out{background:#e6fbf7;color:#0a7565}
/* .dark paints every strong.kw white; inside these light cards it follows the card again. */
.ba-col strong.kw{color:var(--ink);font-weight:900}
.ba-col .ba-out strong.kw{color:inherit}
@media(max-width:860px){
  .ba-grid{grid-template-columns:1fr;grid-template-rows:none}
  .ba-col{display:flex;flex-direction:column;grid-row:auto}
  .ba-out{margin-top:auto}
}
@media(max-width:520px){.ba-col{padding:22px 18px}.ba-steps li{grid-template-columns:62px minmax(0,1fr);gap:11px}.ba-steps b{font-size:11px}}
/* The demo CTA names the strategiegesprek as the other afspraak; that line is not the promise, so
   it sits smaller under the text (build-tools.mjs, cta()). */
.cta-alt{margin:12px 0 0!important;font-size:14px;color:rgba(255,255,255,.6)!important}
.cta-alt a{color:#7db8ff;font-weight:800;text-decoration:underline;text-underline-offset:2px}
.cta-alt em{font-style:normal;color:rgba(255,255,255,.85)}

/* --- Leesopmaak voor artikels en landingspagina's (eigenaar koos stijl E, 2026-10-08) ----------
   De blog erfde de opmaak van de gidsen, en die zijn gemaakt om af te drukken: volle breedte,
   grijze tekst, geen eigen lettertype. Over 1180px loopt een regel tegen de 170 tekens, waar een
   mens er 65 tot 75 comfortabel leest.

   Stijl E: koppen in Inter, lopende tekst in een schreef die al op het toestel staat (Charter op
   Apple, Palatino op Windows, Georgia als laatste redmiddel). Daardoor hoeft er voor de tekst zelf
   niets gedownload te worden - de snelste van de vijf varianten, en snelheid telt mee voor Google.
   Alleen voor /blog en de landingspagina's; de rest van de site blijft zoals ze is. */
.artikel{max-width:40rem;margin-inline:auto}
.artikel p,.artikel li{
  font-family:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:1.1875rem;line-height:1.7;color:var(--ink);
}
.artikel p{margin:0 0 1.15em}
.artikel h2{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1.5rem;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:var(--ink);
  margin:2.2em 0 .5em;
}
.artikel h2:first-child{margin-top:0}
.artikel ul{padding-left:1.15rem;margin:0 0 1.3em}
.artikel li{margin-bottom:.55em}
.artikel li::marker{color:var(--blue)}
.artikel .guide-quote{
  font-family:Charter,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:1.0625rem;line-height:1.6;margin:1.6em 0;padding:1em 1.2em;
}
/* De bronregel hoort klein te blijven, ook naast grotere leestekst. */
.artikel .calc-sources{font-size:.9375rem;line-height:1.55;margin-top:2em;
  padding-top:1.2em;border-top:1px solid var(--line)}
.artikel .guide-print{margin-top:2em}

@media (max-width:640px){
  .artikel p,.artikel li{font-size:1.125rem;line-height:1.66}
  .artikel h2{font-size:1.35rem;margin:1.9em 0 .45em}
}