/* /pricing en /pricing/it (prijsopzet v3, 27 oktober 2026). Bouwt op dag.css: zelfde lijnen, tinten en knoppen. */

/* De keuzehulp: alleen met JavaScript (prijzen.js haalt hidden weg). Vragen links,
   de uitkomst rechts en meeschuivend, zodat hij na een klik in beeld blijft. */
.pz-vragen{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:28px 40px;border-top:1px solid var(--dag-lijn);padding-top:28px;align-items:start}
.pz-links{display:grid;gap:24px}
.pz-vraag>p{margin:0 0 12px;font-weight:600;font-size:.95rem;display:flex;gap:10px;align-items:baseline}
.pz-nr{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--dag-lijn-sterk);font:600 .74rem/1 var(--mono)}
.pz-chips{display:flex;flex-wrap:wrap;gap:8px}
.pz-chips button{min-height:44px;padding:9px 16px;border:1px solid var(--dag-lijn-sterk);border-radius:999px;background:transparent;color:var(--dag-ink);font:500 .9rem/1.3 var(--tekst);cursor:pointer;text-align:left}
.pz-chips button:hover{border-color:var(--dag-ink)}
.pz-chips button[aria-pressed="true"]{background:var(--dag-ink);color:var(--dag);border-color:var(--dag-ink)}
.pz-chips button[aria-pressed="true"]::before{content:"";display:inline-block;width:8px;height:4px;margin:0 8px 3px 0;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
.pz-advies{position:sticky;top:88px;padding:clamp(20px,2.2vw,28px);background:var(--wit);border:1px solid var(--dag-lijn)}
.pz-advies.pz-gekozen{border-color:var(--dag-ink)}
.pz-advies p{margin:0}
.pz-advies .pz-advies-plan{font:560 1.5rem/1.2 var(--display);letter-spacing:-.025em;margin-bottom:8px}
.pz-advies p+p{margin-top:8px;color:var(--dag-mist);font-size:.95rem}
.pz-advies .pz-advies-totaal{color:var(--dag-ink)}
.pz-naar{display:inline-flex;gap:8px;margin-top:14px;font-weight:600;font-size:.92rem;color:var(--dag-ink);text-underline-offset:3px}
@keyframes pz-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
.pz-advies.pz-nieuw{animation:pz-in .32s var(--gemak)}
@media (prefers-reduced-motion:reduce){.pz-advies.pz-nieuw{animation:none}}
/* Smal: de uitkomst plakt onderaan in beeld zodra er een keuze is. */
@media (max-width:900px){
  .pz-vragen{grid-template-columns:1fr}
  .pz-advies{position:static}
  .pz-advies.pz-gekozen{position:sticky;top:auto;bottom:12px;z-index:5;box-shadow:0 8px 28px rgba(21,25,29,.14)}
}
/* Telefoon: de meeschuivende uitkomst compact, zodat hij de keuzes niet afdekt. */
@media (max-width:600px){
  .pz-advies.pz-gekozen{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:12px 16px}
  .pz-advies.pz-gekozen .pz-advies-plan{font-size:1.1rem;margin:0}
  .pz-advies.pz-gekozen #pz-advies-wat,.pz-advies.pz-gekozen .pz-advies-noot{display:none}
  .pz-advies.pz-gekozen .pz-advies-totaal{margin:0;font-size:.86rem;flex-basis:100%;order:3}
  .pz-advies.pz-gekozen .pz-naar{margin:0 0 0 auto;font-size:.88rem}
}

/* Zes plannen: drie naast elkaar, dan twee, dan een. */
.pz-plannen{grid-template-columns:repeat(3,minmax(0,1fr))}
.pz-plannen .plan{scroll-margin-top:96px}
.pz-plannen .plan .pz-past{margin:0;align-self:flex-start;padding:4px 10px;border-radius:999px;background:var(--dag-ink);color:var(--dag);font:600 .72rem/1.2 var(--tekst);letter-spacing:.02em}
.pz-plannen .plan.pz-fits{outline:2px solid var(--dag-ink);outline-offset:-2px}
.pz-plannen .plan .wie{margin:0;font:500 .74rem/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--dag-mist)}
.pz-plannen .plan h3{margin:0}
.pz-plannen .plan .wat{margin:0;font-size:.98rem}
.pz-plannen .plan .vervangt{margin:0;color:var(--dag-mist);font-size:.9rem}
.pz-plannen .plan .gebruik{margin:0;padding-top:14px;border-top:1px solid var(--dag-lijn);font-size:.92rem}
.pz-plannen .plan .gebruik strong{font-weight:650}
.pz-plannen .plan .pz-samen{margin:-6px 0 0;font-size:.84rem;color:var(--dag-mist)}
.pz-plannen .plan details{font-size:.88rem;color:var(--dag-mist)}
.pz-plannen .plan summary{cursor:pointer;width:max-content;max-width:100%;padding:4px 0;text-underline-offset:3px}
.pz-plannen .plan summary:hover{color:var(--dag-ink);text-decoration:underline}
.pz-plannen .plan details ul{margin-top:8px}
.pz-plannen .plan details li{font-size:.86rem}
@media (max-width:1100px){.pz-plannen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pz-plannen{grid-template-columns:1fr}}

/* Gebruik en betalen naast elkaar. */
.pz-twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(48px,6vw,88px)}
.pz-blok h2{font:540 clamp(1.5rem,1.2rem + 1vw,2.1rem)/1.15 var(--display);letter-spacing:-.025em;margin:0 0 14px}
.pz-blok>p{color:var(--dag-mist);max-width:52ch;margin:0 0 16px}
.pz-lijst{list-style:none;margin:0;padding:0;border-top:1px solid var(--dag-lijn)}
.pz-lijst li{padding:12px 0 12px 22px;border-bottom:1px solid var(--dag-lijn);position:relative;font-size:.96rem}
.pz-lijst li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:5px;border-left:1.4px solid var(--dag-ink);border-bottom:1.4px solid var(--dag-ink);transform:rotate(-45deg)}
.pz-lijst a{color:var(--dag-ink);text-underline-offset:3px}
@media (max-width:800px){.pz-twee{grid-template-columns:1fr}}

/* De verwijzing naar de pagina voor IT. */
.pz-it-balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding:clamp(24px,3vw,36px) 0}
.pz-it-balk p{margin:0;max-width:58ch;color:var(--dag-mist)}

/* /pricing/it: de brede tabel met grenzen per plan schuift binnen zijn kader. */
.pz-breed .pz-grenzen{min-width:820px}
.pz-grenzen thead th{font:600 .82rem/1.3 var(--tekst);padding:12px 12px 12px 0;border-bottom:1px solid var(--dag-lijn-sterk);white-space:nowrap}
.pz-grenzen td{padding:12px 12px 12px 0;font-size:.9rem;font-variant-numeric:tabular-nums}
.pz-grenzen tbody th{font-size:.9rem;white-space:normal;min-width:180px}
.pz-geen{color:var(--dag-mist)}