/* ============================================================================
   /pakketten/ en /hoe-wij-rangschikken/

   Drie kaarten naast elkaar, Boost als losse band eronder — want Boost is geen
   vierde trede maar een bijkoop. Het maandbedrag mag groot, maar het jaartotaal
   staat er in hetzelfde blok onder en niet in de kleine letters: dat is geen
   vormgeving maar een eis. Zie de kop van templates/tb-pakketten.php.
   ========================================================================= */

.tb-pakketten,
.tb-uitleg{
  background:var(--tb-ground);
  padding:0 0 var(--tb-ruimte-s,48px);
}

.tb-pakketten > *,
.tb-uitleg > *{
  max-width:var(--tb-container,1200px);
  margin:0 auto;
  padding:0 24px;
}

.tb-pakketten-kop,
.tb-uitleg-kop{
  padding-top:var(--tb-ruimte-s,48px);
  text-align:center;
}
.tb-uitleg-kop{text-align:left;max-width:760px}

.tb-pakketten h1,
.tb-uitleg h1{
  margin:0 0 12px;
  font-size:clamp(28px, 4vw, 40px);
  line-height:1.15;
  color:var(--tb-ink);
}

.tb-pakketten-sub,
.tb-uitleg-sub{
  margin:0 auto 24px;
  max-width:620px;
  font-size:17px;
  line-height:1.6;
  color:var(--tb-muted);
}
.tb-uitleg-sub{margin-left:0}

/* --------------------------------------------------------------- schakelaar */

.tb-pakketten-schakel{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:var(--tb-r-pill);
  background:var(--tb-ground-alt);
  border:1px solid var(--tb-line);
}
.tb-pakketten-schakel button{
  /* Expliciet kolom: een globale regel maakt knoppen inline-flex, en dan komt
     "2 maanden gratis" tegen "Jaarlijks" aan te plakken. */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:var(--tb-r-pill);
  background:none;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--tb-body);
  cursor:pointer;
}
.tb-pakketten-schakel button.is-actief{
  background:var(--tb-surface);
  color:var(--tb-ink);
  box-shadow:0 1px 3px rgba(20,26,51,.08);
}
.tb-pakketten-schakel button span{
  display:block;
  font-size:11.5px;
  font-weight:600;
  color:var(--tb-accent-text);
}

/* -------------------------------------------------------------- de pakketten */

.tb-pakketten-lijst{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:20px;
  margin:32px auto 0;
}

.tb-pakket{
  display:flex;
  flex-direction:column;
  padding:24px 24px 26px;
  border-radius:var(--tb-r-card);
  background:var(--tb-surface);
  border:1px solid var(--tb-line);
}
.tb-pakket.is-uitgelicht{
  border-color:var(--tb-accent-line);
  box-shadow:0 1px 3px rgba(20,26,51,.06), 0 12px 28px -22px rgba(20,26,51,.5);
}

.tb-pakket h2{
  margin:0 0 10px;
  font-size:20px;
  color:var(--tb-ink);
}

.tb-pakket-bedrag{
  margin:0;
  font-size:30px;
  font-weight:700;
  line-height:1.15;
  color:var(--tb-ink);
}
.tb-pakket-bedrag span{
  font-size:15px;
  font-weight:600;
  color:var(--tb-muted);
}

/* Het jaartotaal. Zelfde blok, gewone leesgrootte — nooit kleiner wegzetten. */
.tb-pakket-totaal{
  margin:4px 0 14px;
  font-size:14px;
  line-height:1.45;
  color:var(--tb-body);
}

.tb-pakket-regel{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.55;
  color:var(--tb-body);
}

.tb-pakket-punten{
  list-style:none;
  margin:0 0 20px;
  padding:0;
  flex:1 1 auto;
}
.tb-pakket-punten li{
  position:relative;
  padding:0 0 8px 22px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--tb-body);
}
.tb-pakket-punten li::before{
  content:"";
  position:absolute;
  left:2px;
  top:7px;
  width:9px;
  height:5px;
  border-left:2px solid var(--tb-action);
  border-bottom:2px solid var(--tb-action);
  transform:rotate(-45deg);
}

.tb-pakket-knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:var(--tb-r-ctrl);
  background:var(--tb-action);
  color:#fff;
  font-weight:650;
  font-size:16px;
  text-decoration:none;
}
.tb-pakket-knop:hover{background:var(--tb-action-hover);color:#fff}
.tb-pakket-knop--stil{
  background:var(--tb-surface);
  color:var(--tb-action-hover);
  border:1px solid var(--tb-border-strong);
}
.tb-pakket-knop--stil:hover{background:var(--tb-ground-alt);color:var(--tb-action-hover)}

/* ------------------------------------------------------------------- boost */

.tb-pakket-boost{
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:flex-start;
  justify-content:space-between;
  margin-top:24px;
  padding:24px;
  border-radius:var(--tb-r-card);
  background:var(--tb-ground-alt);
  border:1px solid var(--tb-line);
}
.tb-pakket-boost > div:first-child{flex:1 1 320px}
.tb-pakket-boost h2{margin:0 0 8px;font-size:20px;color:var(--tb-ink)}
.tb-pakket-boost p{margin:0 0 10px;font-size:15px;line-height:1.55;color:var(--tb-body)}
.tb-pakket-klein{font-size:13.5px;color:var(--tb-soft)}
.tb-pakket-boostprijs{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.tb-pakket-boostprijs .tb-pakket-knop{margin-top:8px}

.tb-pakket-kleinelettertjes{
  margin-top:28px;
  max-width:760px;
}
.tb-pakket-kleinelettertjes p{
  margin:0 0 10px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--tb-muted);
}

/* -------------------------------------------------- hoe wij rangschikken */

.tb-uitleg section{max-width:760px;margin-top:32px}
.tb-uitleg h2{margin:0 0 10px;font-size:22px;color:var(--tb-ink)}
.tb-uitleg h3{margin:0 0 6px;font-size:17px;color:var(--tb-ink)}
.tb-uitleg p{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--tb-body)}
.tb-uitleg a{color:var(--tb-accent-text)}

.tb-uitleg-lijst{list-style:none;margin:0;padding:0;counter-reset:stap}
.tb-uitleg-lijst > li{
  position:relative;
  margin:0 0 20px;
  padding:16px 18px;
  border-radius:var(--tb-r-card);
  background:var(--tb-surface);
  border:1px solid var(--tb-line);
}
.tb-uitleg-lijst p:last-child{margin-bottom:0}

.tb-uitleg-punten{margin:0 0 14px;padding:0 0 0 20px}
.tb-uitleg-punten li{margin:0 0 6px;font-size:15.5px;line-height:1.6;color:var(--tb-body)}

.tb-uitleg-slot{border-top:1px solid var(--tb-line);padding-top:24px}