/*
 * De landingspagina's. Wit als basis, blauw als accent: geen donkere vlakken,
 * alleen zachte blauwe gloed, blauwe randen en blauwe tekst waar iets klikt.
 * Diepte komt van lichte schaduwen en van var(--papier), niet van kleurvlakken.
 */

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  /* Twee zachte blauwe gloeden op wit. Dat geeft de bovenkant lucht zonder
     dat er ook maar iets donker wordt. */
  background:
    radial-gradient(760px 420px at 8% -18%, #e2ecfb 0%, rgba(226, 236, 251, 0) 70%),
    radial-gradient(620px 380px at 92% -10%, #eaf1fc 0%, rgba(234, 241, 252, 0) 72%),
    var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.hero__raster {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 56px; align-items: center;
  /* padding-block, want de zijmarge komt van .omhulsel. */
  padding-block: 64px 68px;
}
.hero h1 {
  font-size: clamp(2.05rem, 1.2rem + 3vw, 3.15rem); line-height: 1.07;
  letter-spacing: -.032em; margin: 0 0 16px; text-wrap: balance; color: var(--blauw-900);
}
.hero__onder {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); font-weight: 600;
  color: var(--blauw-700); line-height: 1.45; margin: 0 0 14px; max-width: 42ch;
  /* Voorkomt dat er één woord alleen op de laatste regel achterblijft. */
  text-wrap: pretty;
}
.hero__lead { font-size: 1.02rem; color: var(--tekst-zacht); margin: 0; max-width: 48ch; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 14px; }
.hero__anders { font-size: .89rem; color: var(--tekst-zacht); margin: 0 0 22px; }

/* De vier keuzes: de bezoeker wijst zijn eigen zaak aan, en dat is meteen
   de eerste stap van de intake. */
.keuzekaarten { margin: 28px 0 22px; }
.keuzekaarten__vraag {
  font-weight: 700; font-size: .95rem; color: var(--blauw-900); margin: 0 0 12px;
}
.keuzekaarten__rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.keuzekaart {
  display: flex; flex-direction: column; gap: 2px; padding: 15px 16px;
  border: 1.5px solid var(--rand-sterk); border-radius: var(--radius); background: var(--vlak);
  text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .1s;
}
.keuzekaart:hover, .keuzekaart:focus-visible {
  border-color: var(--actie); box-shadow: 0 6px 18px rgba(14, 148, 134, .14);
  transform: translateY(-1px);
}
.keuzekaart__naam { font-weight: 700; color: var(--blauw-800); font-size: 1rem; }
.keuzekaart__onder { font-size: .82rem; color: var(--tekst-zacht); line-height: 1.35; }
.keuzekaarten__over { font-size: .89rem; color: var(--tekst-zacht); margin: 12px 0 0; }

.waarborgen {
  list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.waarborgen li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .89rem; font-weight: 580; color: var(--tekst-zacht);
}
.waarborgen svg { width: 17px; height: 17px; flex: none; }

/* De proefkaart: laat zien wat je terugkrijgt, voordat je iets doet. */
.hero__beeld { display: flex; flex-direction: column; gap: 14px; }
.proefkaart {
  border: 1px solid var(--rand); border-radius: 18px; background: var(--vlak);
  box-shadow: 0 18px 44px rgba(11, 18, 80, .1); overflow: hidden;
}
.proefkaart__balk {
  display: flex; gap: 6px; padding: 12px 16px; background: var(--papier);
  border-bottom: 1px solid var(--rand);
}
.proefkaart__stip { width: 9px; height: 9px; border-radius: 50%; background: var(--rand-sterk); }
.proefkaart__lijf { padding: 22px 22px 24px; }
.chipje {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: var(--blauw-100); color: var(--blauw-600);
  font-size: .72rem; font-weight: 720; text-transform: uppercase; letter-spacing: .06em;
}
.proefkaart__kop {
  font-size: 1.16rem; font-weight: 740; color: var(--blauw-900);
  margin: 12px 0 16px; line-height: 1.3; letter-spacing: -.015em;
}
.proefkaart__rijen { margin: 0; display: grid; gap: 0; }
.proefkaart__rijen > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--rand);
}
.proefkaart__rijen dt { font-size: .86rem; color: var(--tekst-zacht); margin: 0; }
.proefkaart__rijen dd { font-size: .88rem; font-weight: 660; margin: 0; text-align: right; }
.proefkaart__stap {
  margin: 16px 0 0; padding: 11px 14px; border-radius: var(--radius-klein);
  background: var(--blauw-50); border: 1px solid var(--blauw-100);
  font-size: .87rem; font-weight: 640; color: var(--blauw-700);
}
.hero__beelduitleg { font-size: .85rem; color: var(--tekst-zacht); margin: 0; max-width: 42ch; }

/* --------------------------------------------------------------- secties -- */
.blok { padding-block: 66px; }
.blok--papier { background: var(--papier); border-block: 1px solid var(--rand); }
.sectiekop { max-width: 62ch; margin-bottom: 34px; }
.sectiekop h2 { text-wrap: balance; color: var(--blauw-900); }
.sectiekop p { color: var(--tekst-zacht); margin-bottom: 0; }
.fijndruk { font-size: .85rem; color: var(--tekst-zacht); }

/* --------------------------------------------------------- de vergoeding -- */
.vergoeding__raster {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 34px; align-items: start;
}
.bedragkaart { padding: 26px; }
.bedragkaart__titel {
  display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tekst-zacht); font-weight: 720;
}
.bedragkaart__bedrag {
  display: block; font-size: clamp(2.5rem, 6vw, 3.1rem); font-weight: 800;
  letter-spacing: -.035em; margin: 4px 0 8px; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--blauw-800);
}
.bedragkaart__onder { color: var(--tekst-zacht); font-size: .92rem; margin: 0; }
.staaf { display: grid; grid-template-columns: repeat(42, 1fr); gap: 3px; margin: 20px 0 14px; }
.staaf span { height: 30px; border-radius: 4px; }
.staaf .t1 { background: var(--blauw-100); }
.staaf .t2 { background: #7fc9c0; }
.staaf .t3 { background: var(--actie); }
.tarieven { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.tarieven li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: .87rem; color: var(--tekst-zacht);
}
.tarieven strong {
  min-width: 3.4em; font-size: 1rem; color: var(--blauw-800);
  font-variant-numeric: tabular-nums;
}
.vergoeding__tekst h3 { color: var(--blauw-900); margin-bottom: 10px; }
.vergoeding__tekst p { color: var(--tekst-zacht); }

/* -------------------------------------------------------------- de fasen -- */
.fasen { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.fase {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 22px 24px; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--vlak); box-shadow: var(--schaduw-klein);
}
.fase__merk {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: var(--blauw-50); border: 1px solid var(--blauw-100);
  color: var(--blauw-600); font-weight: 800; font-size: 1.1rem;
}
.fase h3 { font-size: 1.06rem; margin: 2px 0 6px; color: var(--blauw-900); }
.fase p { font-size: .95rem; color: var(--tekst-zacht); margin: 0; max-width: 68ch; }
.fase__tijd {
  display: inline-block; margin-top: 10px; font-size: .79rem; font-weight: 660;
  color: var(--blauw-600); background: var(--blauw-50); border-radius: 999px; padding: 3px 11px;
}

.middenknop { margin-top: 32px; text-align: center; }
.middenknop .fijndruk { margin: 12px 0 0; }

/* ----------------------------------------------------------- het plan ---- */
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.plan__stap { padding: 24px; }
.plan__wanneer {
  display: inline-block; font-size: .74rem; font-weight: 740; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blauw-600); margin-bottom: 10px;
}
.plan__stap h3 { font-size: 1.02rem; margin-bottom: 8px; color: var(--blauw-900); }
.plan__stap p { font-size: .93rem; color: var(--tekst-zacht); margin: 0; }

/* De tijdlijn: wat de klant na het machtigen te zien krijgt. */
.tijdlijnvoorbeeld {
  margin-top: 30px; padding: 28px; border-radius: var(--radius);
  background: var(--vlak); border: 1px solid var(--rand);
}
.tijdlijnvoorbeeld h3 { font-size: 1.02rem; margin-bottom: 18px; color: var(--blauw-900); }
.tijdlijn { list-style: none; padding: 0; margin: 0; }
.tijdlijn__punt {
  position: relative; padding: 0 0 20px 34px;
  display: grid; gap: 1px;
}
.tijdlijn__punt::before {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--vlak); border: 2px solid var(--rand-sterk);
}
/* De lijn loopt van bolletje naar bolletje, niet voorbij het laatste. */
.tijdlijn__punt::after {
  content: ""; position: absolute; left: 9.5px; top: 18px; bottom: 0;
  width: 2px; background: var(--rand);
}
.tijdlijn__punt:last-child { padding-bottom: 0; }
.tijdlijn__punt:last-child::after { display: none; }
.tijdlijn__punt--klaar::before { background: var(--groen-600); border-color: var(--groen-600); }
.tijdlijn__punt--bezig::before { background: var(--actie); border-color: var(--actie); }
.tijdlijn__datum {
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tekst-zacht);
}
.tijdlijn__tekst { font-size: .95rem; font-weight: 580; }
.tijdlijnvoorbeeld .fijndruk { margin: 14px 0 0; }

/* -------------------------------------------------------------- ingangen -- */
.ingangen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ingang { padding: 24px; }
.ingang h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 1.02rem; color: var(--blauw-900);
}
.ingang ul { list-style: none; padding: 0; margin: 14px 0 0; }
.ingang li { border-top: 1px solid var(--rand); }
.ingang li:first-child { border-top: 0; }
.ingang a {
  display: block; padding: 9px 0; font-size: .93rem; font-weight: 560;
  color: var(--blauw-600); text-decoration: none;
}
.ingang a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- kosten -- */
.kosten { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.kosten article { padding: 24px; }
.kosten h3 {
  display: flex; align-items: center; gap: 9px; font-size: 1rem; margin-bottom: 8px;
  color: var(--blauw-900);
}
.kosten h3 svg { width: 20px; height: 20px; flex: none; }
.kosten p { font-size: .93rem; color: var(--tekst-zacht); margin: 0; }

/* ---------------------------------------------------------------- vragen -- */
details.vraag { border-bottom: 1px solid var(--rand); padding: 17px 0; }
details.vraag:first-of-type { border-top: 1px solid var(--rand); }
details.vraag summary {
  cursor: pointer; font-weight: 640; list-style: none; color: var(--blauw-900);
  display: flex; justify-content: space-between; gap: 18px; align-items: flex-start;
}
details.vraag summary::-webkit-details-marker { display: none; }
details.vraag summary::after {
  content: "+"; color: var(--blauw-600); font-size: 1.45rem; line-height: 1; flex: none;
}
details.vraag[open] summary::after { content: "\2212"; }
details.vraag p { margin: 12px 0 0; font-size: .94rem; color: var(--tekst-zacht); max-width: 72ch; }

/* ----------------------------------------------------------------- slot --- */
.oproep {
  margin-top: 56px; padding: 44px 40px; border-radius: 20px; text-align: center;
  background: linear-gradient(160deg, var(--blauw-50), #e4edfb);
  border: 1px solid var(--blauw-100);
}
.oproep h2 { color: var(--blauw-900); text-wrap: balance; }
.oproep p { color: var(--blauw-700); max-width: 48ch; margin: 0 auto 24px; }
.oproep__fijn { font-size: .84rem; color: var(--tekst-zacht); margin: 18px auto 0; }

.knop--groot { padding: 15px 28px; font-size: 1.04rem; }

/* --------------------------------------------------------------- mobiel --- */
@media (max-width: 980px) {
  .hero__raster { grid-template-columns: 1fr; gap: 40px; padding-block: 44px 48px; }
  .hero__beeld { max-width: 520px; }
  .vergoeding__raster { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 640px) {
  .blok { padding-block: 46px; }
  .hero__raster { padding-block: 34px 40px; }
  .keuzekaarten__rij { grid-template-columns: 1fr; }
  .hero__knoppen .knop, .middenknop .knop, .oproep .knop { width: 100%; }
  .waarborgen { gap: 8px; }
  .waarborgen li { width: 100%; }
  .fase { grid-template-columns: 36px 1fr; gap: 14px; padding: 20px 18px; }
  .fase__merk { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; }
  .bedragkaart, .plan__stap, .ingang, .kosten article, .tijdlijnvoorbeeld { padding: 20px 18px; }
  .staaf span { height: 24px; }
  .oproep { padding: 30px 20px; margin-top: 40px; }
  .proefkaart__lijf { padding: 18px; }
  .proefkaart__rijen > div { gap: 10px; }
}

/* ==========================================================================
   Toevoegingen voor de nieuwe indeling: herkenning, keten, verdeling,
   dossiervoorbeeld, redenen en vertrouwen.
   ========================================================================== */

/* De prijstrigger in de hero: het antwoord op "waarom nu?". */
.hero__trigger {
  margin: 14px 0 0; font-size: 1rem; color: var(--blauw-800);
  padding: 11px 15px; border-radius: var(--radius-klein);
  background: var(--blauw-50); border: 1px solid var(--blauw-100);
}
.hero__trigger strong { font-weight: 780; }
.hero__beeldkop {
  margin: 0 0 8px; font-size: .76rem; font-weight: 720; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tekst-zacht);
}

/* De keuzekaarten zijn knoppen geworden: ze personaliseren de pagina. */
.keuzekaart { font: inherit; text-align: left; cursor: pointer; }
.keuzekaart.gekozen {
  border-color: var(--blauw-600); background: var(--blauw-50);
  box-shadow: inset 0 0 0 1px var(--blauw-600);
}
.keuzekaarten__vervolg { margin-top: 18px; }
.keuzeknoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.keuzeknop {
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  padding: 9px 15px; border-radius: 999px; background: var(--vlak);
  border: 1.5px solid var(--rand-sterk); color: var(--blauw-800);
  transition: border-color .15s, background .15s;
}
.keuzeknop:hover { border-color: var(--actie); }
.keuzeknop.gekozen { border-color: var(--blauw-600); background: var(--blauw-600); color: #fff; }

/* Het leesproces in de voorbeeldkaart. */
.leesstappen {
  list-style: none; padding: 0 0 14px; margin: 0 0 14px;
  border-bottom: 1px solid var(--rand); display: grid; gap: 6px;
}
.leesstappen li {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--tekst-zacht);
}
.leesstappen svg { width: 15px; height: 15px; flex: none; }
.leesstappen__bestand {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem;
  color: var(--blauw-700); background: var(--papier); border-radius: 6px;
  padding: 5px 9px; display: inline-block;
}

/* ------------------------------------------------------------ herkenning -- */
.herkenning { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.herkenning__geval { padding: 24px; }
.herkenning__geval h3 { font-size: 1.02rem; margin-bottom: 7px; color: var(--blauw-900); }
.herkenning__geval p { font-size: .94rem; color: var(--tekst-zacht); margin: 0; }
.middenknop__zin { font-size: 1.04rem; margin: 0 0 18px; color: var(--blauw-900); }

/* ----------------------------------------------------------------- keten -- */
.keten {
  list-style: none; padding: 0; margin: 0 0 34px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.keten__stap {
  position: relative; padding: 18px 16px; border-radius: var(--radius);
  background: var(--vlak); border: 1px solid var(--rand);
}
/* Het pijltje tussen de stappen; op mobiel wijst hij naar beneden. */
.keten__stap::after {
  content: ""; position: absolute; right: -12px; top: 50%; width: 12px; height: 2px;
  background: var(--rand-sterk); transform: translateY(-50%);
}
.keten__stap:last-child::after { display: none; }
.keten__merk {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--blauw-50); border: 1px solid var(--blauw-100);
  color: var(--blauw-600); font-weight: 780; font-size: .82rem; margin-bottom: 10px;
}
.keten__stap strong { display: block; font-size: .96rem; color: var(--blauw-900); margin-bottom: 3px; }
.keten__stap span { font-size: .86rem; color: var(--tekst-zacht); }
.keten__stap--geld { background: var(--blauw-50); border-color: var(--blauw-100); }

/* --------------------------------------------------------- de demo + scherm */
.demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px; align-items: start; }
.minischerm {
  border-radius: var(--radius); overflow: hidden; position: sticky; top: 84px;
  border: 1px solid var(--blauw-100); box-shadow: 0 16px 40px rgba(11, 18, 80, .1);
  background: var(--vlak);
}
.minischerm__kop {
  display: flex; align-items: center; gap: 9px; padding: 15px 20px;
  background: var(--blauw-600); color: #fff; font-weight: 660; font-size: .95rem;
}
.minischerm__kop svg { width: 18px; height: 18px; flex: none; }
.minischerm__rijen { margin: 0; padding: 6px 20px 4px; }
.minischerm__rijen > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--rand);
}
.minischerm__rijen > div:first-child { border-top: 0; }
.minischerm__rijen dt { font-size: .85rem; color: var(--tekst-zacht); margin: 0; }
.minischerm__rijen dd { font-size: .88rem; font-weight: 660; margin: 0; text-align: right; }
.minischerm__slot {
  margin: 0; padding: 14px 20px; background: var(--blauw-50);
  border-top: 1px solid var(--blauw-100);
  font-weight: 700; color: var(--blauw-700); font-size: .95rem;
}

.vertrouwenregel {
  display: inline-flex; align-items: flex-start; gap: 8px; text-align: left;
  margin: 16px auto 0; max-width: 54ch; font-size: .85rem; color: var(--tekst-zacht);
}
.vertrouwenregel svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--groen-600); }

/* ------------------------------------------------------------- verdeling -- */
.verdeling { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.verdeling__kant { padding: 26px 24px; }
.verdeling__kant--wij { background: var(--blauw-50); border-color: var(--blauw-100); }
.verdeling__wie {
  display: block; font-size: .74rem; font-weight: 740; letter-spacing: .07em;
  text-transform: uppercase; color: var(--blauw-600); margin-bottom: 14px;
}
.verdeling__kant ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.verdeling__kant li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.verdeling__kant li svg { width: 18px; height: 18px; margin-top: 2px; }
.verdeling__kant li span { font-size: .95rem; }
.verdeling__tijd { margin: 16px 0 0; font-size: .86rem; color: var(--tekst-zacht); font-style: italic; }

/* -------------------------------------------------------- dossiervoorbeeld -- */
.dossierdemo {
  max-width: 640px; padding: 26px; border-radius: 18px; background: var(--vlak);
  border: 1px solid var(--rand); box-shadow: 0 16px 40px rgba(11, 18, 80, .08);
}
.dossierdemo__kop {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.dossierdemo__ref {
  font-size: .74rem; font-weight: 740; letter-spacing: .07em; color: var(--blauw-600);
}
.dossierdemo__kop h3 { margin: 4px 0 0; font-size: 1.14rem; color: var(--blauw-900); }
.dossierdemo__staat {
  padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 660;
  background: var(--groen-100); color: var(--groen-600); white-space: nowrap;
}
.dossierdemo__klok {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; margin-bottom: 20px; border-radius: var(--radius-klein);
  background: var(--blauw-50); border: 1px solid var(--blauw-100);
}
.dossierdemo__klok strong {
  font-size: 1.5rem; font-weight: 800; color: var(--blauw-800); letter-spacing: -.02em;
}
.dossierdemo__klok span { font-size: .9rem; color: var(--blauw-700); }
.dossierdemo .tijdlijn { list-style: none; padding: 0; margin: 0; }
.dossierdemo .tijdlijn li { position: relative; padding: 0 0 18px 32px; }
.dossierdemo .tijdlijn li::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--vlak); border: 2px solid var(--rand-sterk);
}
.dossierdemo .tijdlijn li::after {
  content: ""; position: absolute; left: 8.5px; top: 18px; bottom: 0; width: 2px; background: var(--rand);
}
.dossierdemo .tijdlijn li:last-child { padding-bottom: 0; }
.dossierdemo .tijdlijn li:last-child::after { display: none; }
.dossierdemo .tijdlijn li.klaar::before { background: var(--groen-600); border-color: var(--groen-600); }
.dossierdemo .tijdlijn li.bezig::before {
  background: var(--blauw-600); border-color: var(--blauw-600);
  box-shadow: 0 0 0 4px var(--blauw-100);
}
.dossierdemo .tijdlijn__titel { display: block; font-weight: 620; font-size: .96rem; }
.dossierdemo .tijdlijn__datum { display: block; font-size: .82rem; color: var(--tekst-zacht); margin-top: 2px; }
.dossierdemo__rust {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--rand);
  font-size: .93rem; color: var(--tekst-zacht);
}

/* --------------------------------------------------------------- redenen -- */
.redenen { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.redenen article { padding: 22px; }
.redenen h3 { font-size: 1rem; margin-bottom: 7px; color: var(--blauw-900); }
.redenen p { font-size: .92rem; color: var(--tekst-zacht); margin: 0; }
.redenen__slot {
  margin: 26px 0 0; font-size: 1.02rem; color: var(--blauw-900); font-weight: 600;
  text-align: center; text-wrap: balance;
}

/* ---------------------------------------------------------------- kosten -- */
.kosten--tarief { background: var(--blauw-50); border-color: var(--blauw-100); }
.kosten__voorbeeld {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius-klein);
  background: var(--vlak); border: 1px solid var(--blauw-100);
  font-size: .88rem; color: var(--blauw-800);
}
.kosten__slot { margin: 24px 0 0; font-size: .93rem; color: var(--tekst-zacht); }

/* ------------------------------------------------------------ vertrouwen -- */
.vertrouwen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.vertrouwen__wie { padding: 26px 24px; }
.vertrouwen__wie h3 { font-size: 1.04rem; margin-bottom: 10px; color: var(--blauw-900); }
.vertrouwen__wie p { font-size: .94rem; color: var(--tekst-zacht); }
.vertrouwen__gegevens { margin: 18px 0; }
.vertrouwen__gegevens > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-top: 1px solid var(--rand);
}
.vertrouwen__gegevens dt { font-size: .86rem; color: var(--tekst-zacht); margin: 0; }
.vertrouwen__gegevens dd { font-size: .89rem; font-weight: 620; margin: 0; text-align: right; }
.vertrouwen__punten { display: grid; gap: 16px; }
.vertrouwen__punten article { padding: 22px; }
.vertrouwen__punten h3 {
  display: flex; align-items: center; gap: 9px; font-size: 1rem; margin-bottom: 8px;
  color: var(--blauw-900);
}
.vertrouwen__punten h3 svg { width: 19px; height: 19px; flex: none; color: var(--groen-600); }
.vertrouwen__punten p { font-size: .92rem; color: var(--tekst-zacht); margin: 0; }
.vertrouwen__punten p + p { margin-top: 8px; }

/* --------------------------------------------------------------- mobiel --- */
@media (max-width: 980px) {
  .keten { grid-template-columns: 1fr 1fr; }
  .keten__stap::after { display: none; }
  .demo { grid-template-columns: 1fr; }
  .minischerm { position: static; max-width: 460px; }
  .vertrouwen { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .keten { grid-template-columns: 1fr; gap: 10px; }
  .keten__stap { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
  .keten__merk { margin-bottom: 0; }
  .herkenning__geval, .verdeling__kant, .redenen article,
  .vertrouwen__wie, .vertrouwen__punten article { padding: 20px 18px; }
  .dossierdemo { padding: 20px 18px; }
  .dossierdemo__klok strong { font-size: 1.3rem; }
  .hero__trigger { font-size: .95rem; }
}

/* ----------------------------------------------- nog niet te laat (8b) --- */
/* Wie nu nog niets kan, is een klant van over drie weken. Daarom een eigen
   blok en geen voetnoot: dat is de hele belofte, iemand die eraan denkt. */
.nogniet {
  display: grid; gap: 26px; align-items: center;
  padding: 30px; border-radius: var(--radius);
  background: var(--blauw-50); border: 1px solid var(--blauw-100);
}
.nogniet h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.6rem); margin-bottom: 10px; }
.nogniet p { color: var(--blauw-800); margin-bottom: 18px; }
.nogniet__punten { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.nogniet__punten li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .95rem; color: var(--blauw-800); font-weight: 560;
}
.nogniet__punten svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
@media (min-width: 860px) { .nogniet { grid-template-columns: 1.5fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .nogniet { padding: 24px 20px; } }

/* ------------------------------------------------- de volgende stap (keuze) -- */
/* Verschijnt onder de keuzeknoppen zodra iemand heeft aangewezen op wie hij
   wacht. Eerder veranderde de pagina wel, maar alleen boven de vouw: op een
   telefoon leek een tik dan niets te doen. */
.keuzeactie {
  margin-top: 18px; padding: 22px 24px; border-radius: var(--radius);
  background: var(--blauw-900); color: #fff;
  box-shadow: 0 16px 36px -14px rgba(11, 18, 80, .5);
}
.keuzeactie__kop {
  margin: 0 0 6px; font-size: clamp(1.05rem, .98rem + .4vw, 1.22rem);
  font-weight: 720; color: #fff; letter-spacing: -.01em;
}
.keuzeactie__onder { margin: 0 0 16px; font-size: .93rem; color: rgba(255, 255, 255, .88); }
.keuzeactie__knop {
  width: 100%; background: var(--actie); color: #fff; border-color: var(--actie);
}
.keuzeactie__knop:hover { background: var(--actie-donker); color: #fff; border-color: var(--actie-donker); }
.keuzeactie__fijn {
  margin: 12px 0 0; font-size: .82rem; color: rgba(255, 255, 255, .82); text-align: center;
}
@media (min-width: 620px) {
  .keuzeactie__knop { width: auto; min-width: 280px; }
  .keuzeactie__fijn { text-align: left; }
}

/* ------------------------------------------------ de termijn van deze zaak --

   Het blok dat per zaakpagina verschilt: de beslistermijn, waar die vandaan
   komt, en een voorbeeld dat met precies die termijn is doorgerekend. Het staat
   direct onder de hero, want wie zoekt op "hoelang mag UWV erover doen" komt
   voor dat antwoord en niet voor de rest van de pagina. */

.termijnkaart {
  display: inline-block; padding: 16px 24px; margin: 0 0 20px;
  border-radius: var(--radius); background: var(--blauw-50); border: 1px solid var(--blauw-100);
}
.termijnkaart__getal { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; }
.termijnkaart__onder { margin: 4px 0 0; font-size: .9rem; color: var(--tekst-zacht); }

#termijn p { max-width: 72ch; }
#termijn h3 { margin: 30px 0 8px; font-size: 1.05rem; }

.voorbeeldlijst { margin: 10px 0 18px; padding-left: 22px; max-width: 72ch; }
.voorbeeldlijst li { margin-bottom: 9px; }

.let-op-regel {
  padding: 12px 15px; border-radius: var(--radius-klein);
  background: var(--oranje-50); border: 1px solid var(--oranje-100);
}
.wetnoot-regel { font-size: .86rem; color: var(--tekst-zacht); }

@media (max-width: 640px) {
  .termijnkaart { display: block; }
  .termijnkaart__getal { font-size: 1.7rem; }
}