/* Prijzen, rustig ritme: navy (hero met het prijspad: glas, rail met glimlach-knopen)
   → licht ("Tarieven": de prijstabel als witte kaart, naam → prijs zonder iconen)
   → wit (vragen, sluit er direct op aan) → blauwe CTA. */

/* ---- hero: prijspad (echte bedragen; aria-hidden omdat de tabel ze herhaalt) ---- */
.pagina-prijzen .prijspad{max-width:470px;margin-inline:auto;}
.pagina-prijzen .prijspad__rail{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.pagina-prijzen .prijspad__rail::before{content:"";position:absolute;left:15px;top:30px;bottom:30px;border-left:2px dashed rgba(255,255,255,.42);}
.pagina-prijzen .prijspad__stap{position:relative;display:flex;align-items:center;gap:14px;animation:plop .45s var(--ease) both;animation-delay:calc(700ms + var(--k,0) * 140ms);}
.pagina-prijzen .prijspad__knoop{flex:none;width:32px;height:32px;border-radius:50%;background:var(--glimlach-blauw) center/16px 12px no-repeat,var(--wit);box-shadow:0 0 0 5px rgba(255,255,255,.12);}
.pagina-prijzen .prijspad__kaart{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:14px;background:var(--wit);color:var(--tekst);box-shadow:var(--schaduw-toast);}
.pagina-prijzen .prijspad__kaart p{display:flex;flex-direction:column;gap:3px;min-width:0;}
.pagina-prijzen .prijspad__kaart b{font:700 16.5px/1.2 var(--f-display);letter-spacing:-.01em;color:var(--navy);}
.pagina-prijzen .prijspad__kaart p small{font-size:13px;line-height:1.3;color:var(--tekst-zacht);}
.pagina-prijzen .prijspad__prijs{flex:none;text-align:right;font:800 21px/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--navy);}
.pagina-prijzen .prijspad__prijs small{display:block;margin-bottom:4px;font:500 12px/1 var(--f-tekst);letter-spacing:0;color:var(--tekst-zacht);}
.pagina-prijzen .prijspad__prijs.is-gratis{color:var(--blauw);}
/* het doel: blauwe knoop met witte glimlach, kaart met blauwe rand (zoals stap 3 op home) */
.pagina-prijzen .is-doel .prijspad__knoop{background:var(--glimlach-wit) center/16px 12px no-repeat,var(--blauw);box-shadow:0 0 0 5px rgba(37,99,235,.28);}
.pagina-prijzen .is-doel .prijspad__kaart{box-shadow:0 0 0 2px var(--blauw),var(--schaduw-toast);}
@media (max-width:900px){.pagina-prijzen .hero__beeld{margin-top:8px;}}
@media (max-width:480px){
  .pagina-prijzen .prijspad{padding:16px;}
  .pagina-prijzen .prijspad .glas__kop{padding-bottom:14px;margin-bottom:16px;}
  .pagina-prijzen .prijspad .glas__kop b{font-size:19px;}
  .pagina-prijzen .prijspad .glas__kop small{display:none;}
  .pagina-prijzen .prijspad__rail{gap:10px;}
  .pagina-prijzen .prijspad__stap{gap:10px;}
  .pagina-prijzen .prijspad__kaart{padding:12px 14px;}
  .pagina-prijzen .prijspad__kaart b{font-size:15.5px;}
  .pagina-prijzen .prijspad__prijs{font-size:19px;}}

/* ---- tarieven: witte tabelkaart op licht ---- */
.pagina-prijzen .tabelkaart{padding:10px 32px;box-shadow:var(--schaduw-kaart);}
.pagina-prijzen .tabelkaart th:first-child{width:32%;}
.pagina-prijzen .tabelkaart td{vertical-align:middle;}
.pagina-prijzen .tabelkaart td[data-label="Duur"]{white-space:nowrap;}
.pagina-prijzen .prijzen-dienst{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
.pagina-prijzen .prijzen-dienst strong{font:700 17px/1.2 var(--f-display);letter-spacing:-.01em;}
.pagina-prijzen tr.is-start .pil{margin-left:0;}
.pagina-prijzen .tabelkaart td.num small{font:500 14px/1 var(--f-tekst);color:var(--tekst-zacht);}
/* link in de tabel: zelfde glimlach-hover als tekstlinks */
.pagina-prijzen .tabelkaart td a{position:relative;display:inline-block;white-space:nowrap;color:var(--blauw);font-weight:600;text-decoration:underline 1px;text-underline-offset:.28em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color var(--t-snel);}
.pagina-prijzen .tabelkaart td a::after{content:"";position:absolute;left:0;right:0;bottom:-.34em;height:.36em;background:currentColor;mask:var(--glimlach-link) 0 0/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease);}
.pagina-prijzen .tabelkaart td a:is(:hover,:focus-visible){text-decoration-color:transparent;}
.pagina-prijzen .tabelkaart td a:is(:hover,:focus-visible)::after{clip-path:inset(0);}
/* mobiel: elke dienst een kaart; naam en uitleg boven, duur en prijs als voet (zoals .kaart__voet) */
@media (max-width:640px){
  .pagina-prijzen .tabelkaart{padding:0;box-shadow:none;}
  .pagina-prijzen .tabelkaart th:first-child{width:auto;}
  .pagina-prijzen .tabelkaart tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;box-shadow:var(--schaduw-kaart);}
  .pagina-prijzen .tabelkaart tr.is-start{box-shadow:0 0 0 2px var(--blauw),var(--schaduw-kaart);background:var(--wit);}
  .pagina-prijzen .tabelkaart td{width:auto;}
  .pagina-prijzen .tabelkaart td:is([data-label="Dienst"],[data-label="Wat je krijgt"]){grid-column:1 / -1;}
  .pagina-prijzen .tabelkaart td:is([data-label="Dienst"],[data-label="Wat je krijgt"])::before{display:none;}
  .pagina-prijzen .tabelkaart td[data-label="Dienst"]{padding-bottom:8px;}
  .pagina-prijzen .tabelkaart td[data-label="Wat je krijgt"]{padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--grijs);}
  .pagina-prijzen .tabelkaart td:is([data-label="Duur"],.num){align-self:start;white-space:normal;}
  .pagina-prijzen .tabelkaart td.num{text-align:right;white-space:nowrap;}}
/* smalle telefoon: 'per dag' / 'per maand' onder het bedrag, zodat de duur niet over drie regels rafelt */
@media (max-width:360px){
  .pagina-prijzen .tabelkaart td.num small.na{display:block;margin-top:5px;}}
/* tablet en telefoon liggend (641–1023px): tabel past in de kaart, geen horizontale scroll */
@media (min-width:641px) and (max-width:1023px){
  .pagina-prijzen .tabelkaart{padding:8px 18px;}
  .pagina-prijzen .tabelkaart :is(th,td){padding-inline:10px;}
  .pagina-prijzen .tabelkaart th:first-child{width:auto;}
  .pagina-prijzen .tabelkaart td[data-label="Duur"]{white-space:normal;}
  .pagina-prijzen .tabelkaart td.num small{display:block;margin-top:4px;}
  .pagina-prijzen .tabelkaart td.num small:first-child{margin:0 0 4px;}}

/* 'per dag' onder het bedrag in plaats van erboven */
.pagina-prijzen .prijspad__prijs small.na{margin:5px 0 0;}