/* ============================================================
   CONSTELL — PRIJZEN  (prefix: pz-)
   Gedeeld door /prijzen, /prijzen-starter en /prijzen-agentic.

   Het idee: prijzen zijn hier geen dichtgetimmerde tabel maar een
   rustige, ruimtelijke lijst. Dunne lijnen in plaats van kaders,
   één visual per onderwerp, en achter elke regel een link naar de
   pagina die erover gaat. Het doel van alle drie de pagina's is
   één ding: een demo-aanvraag.

   Banden-ritme
     /prijzen           zachtwit-strip → nevel → steen → nevel →
                        inkt → zachtwit → inkt (footer)
     /prijzen-starter   zachtwit-strip → nevel → zachtwit → steen →
                        nevel → inkt → zachtwit → inkt (footer)
     /prijzen-agentic   zachtwit-strip → nevel → inkt → zachtwit →
                        steen → inkt → nevel → zachtwit → inkt (footer)

   Volgorde van de secties hieronder = volgorde in de HTML.
   ============================================================ */


/* ==== 1. Hero (alle drie) ==================================
   Gecentreerde kop met veel lucht eromheen. De gloed hangt op
   bandniveau achter de kop. */
.pz-hero { text-align: center; }
.pz-hero .container { position: relative; }
.pz-hero h1 { margin-bottom: var(--sp-5); }
.pz-hero .lead {
  max-width: 40rem;
  margin-inline: auto;
  color: var(--c-ink-soft);
}
.pz-hero-acties {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--sp-7);
}


/* ==== 2. De twee keuzes (pricing-grid, /prijzen) ============
   Het systeem-patroon .pricing-grid + .price-card, met één
   afwijking: onderin staan twee knoppen naast elkaar in plaats
   van één. Daardoor mag het raster iets breder. */
/* De kaarten staan ín de gecentreerde hero-band, maar lezen zelf links. */
.pz-keuze { max-width: 62rem; margin-top: var(--sp-8); text-align: left; }
.pz-keuze .price-card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.pz-keuze .price-card h3 { margin-bottom: var(--sp-2); }

.pz-keuze-acties {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
/* Beide knoppen even breed, en op smalle kaarten onder elkaar. */
.pz-keuze-acties .btn {
  flex: 1 1 9.5rem;
  justify-content: center;
  padding-inline: var(--sp-5);
}

/* De prijsregel: serif-cijfer met een kleine aanloop erboven. */
.pz-prijsregel .small { margin-bottom: var(--sp-1); }
.pz-prijsregel .price { margin: 0; }


/* ==== 3. Demo-voordelen (drie kaarten, /prijzen) ============
   Behouden opzet uit de oude prijzenpagina: illustratie links,
   kop + onderschrift rechts. Alleen de typografie is nu die van
   het designsysteem (kaartkop + .small). */
.pz-voordelen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .pz-voordelen { grid-template-columns: 1fr; } }

.pz-voordeel {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-tile);
  padding: var(--sp-5) var(--sp-6);
}
/* De drie illustraties zijn ongelijk hoog (45x51, 49x75, 49x76). Normaliseer
   op BREEDTE, net als in het origineel — op hoogte normaliseren maakt het
   ronde eerste icoon onevenredig groot. */
.pz-voordeel-ic { flex: 0 0 3rem; width: 3rem; }
.pz-voordeel-ic svg { width: 100%; height: auto; }
/* Iets onder de kaartkop-maat: anders past "Demo is vrijblijvend" niet op
   één regel in een kaart van een derde van de container. */
.pz-voordeel h3 { font-size: clamp(1.375rem, 1.9vw, 1.625rem); margin: 0 0 var(--sp-1); }
.pz-voordeel p { margin: 0; }


/* ==== 4. Functie-overzicht (/prijzen) ======================
   Het rij-ontwerp van het ORIGINEEL (v2/pricing_table): elke functie is een
   afgeronde witte balk, label links, en per kolom een rond vinkje — oranje
   voor Starter, lavendel voor Volledig agentic (de originele SVG's uit
   /v1/img/ems/). Nieuw t.o.v. het origineel zijn alleen de categoriekoppen
   tussen de groepen en de doorverwijzing per regel: elke regel is een link
   zodra er een pagina over bestaat, en regels zonder pagina krijgen dezelfde
   hover maar geen pijl en geen tabstop (geen valse belofte). */
.pz-tabel { --pz-kol: 13rem; }

.pz-tabel-head,
.pz-rij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pz-kol) var(--pz-kol);
  gap: var(--sp-4);
  align-items: center;
}

/* De kolomkoppen blijven staan terwijl je de 33 regels doorloopt; zonder
   dat weet je halverwege niet meer welke kolom Starter is. --pz-sticky-top
   wordt gemeten op de inline-navbalk (zie het script onderaan /prijzen),
   net als --em-nav-h bij de card-stack van /event-management. */
.pz-tabel-head {
  position: sticky;
  top: var(--pz-sticky-top, 4.5rem);
  z-index: 2;
  background: var(--c-bg);
  padding: var(--sp-4) var(--sp-6);
}
.pz-tabel-head span {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: center;
}
.pz-tabel-head .pz-th-kort { display: none; }

/* Categoriekop tussen de regels: fluister-kicker met lucht erboven. */
.pz-cat {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: var(--sp-7) 0 var(--sp-2);
}
.pz-groep:first-of-type .pz-cat { margin-top: var(--sp-6); }

/* Het rij-ontwerp is dat van het origineel: een afgeronde witte balk per
   functie, met wit ertussen — geen doorlopende tabel met haarlijnen. */
.pz-groep { display: grid; gap: var(--sp-3); }
.pz-rij {
  background: var(--c-surface);
  border-radius: var(--r-card);
  padding: var(--sp-5) var(--sp-6);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pz-rij:hover { box-shadow: var(--shadow-tile); }
a.pz-rij:hover { transform: translateY(-1px); }

.pz-naam {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  font-weight: 500;
  min-width: 0;
}
.pz-naam .pz-pijl {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0;
  color: var(--c-ink-soft);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
a.pz-rij:hover .pz-pijl,
a.pz-rij:focus-visible .pz-pijl { opacity: 1; transform: translateX(3px); }

.pz-cel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  font-size: var(--fs-small);
}
/* Het ronde vinkje uit het origineel: 29px, oranje voor Starter en lavendel
   voor Volledig agentic. Kleur zit in de SVG zelf, niet in deze CSS. */
.pz-vink { width: 29px; height: 29px; flex: 0 0 auto; }
/* Niet inbegrepen: een haarstreepje, geen kruis — dit is geen afrekening.
   Wél op --c-ink-soft en niet op --c-ink-40: het streepje betekent iets
   (deze regel zit niet in Starter) en haalt op .40 maar 2,4:1. */
.pz-leeg { color: var(--c-ink-soft); }
.pz-cel--tekst { color: var(--c-ink-soft); }
/* Losse links binnen een regel (de Koppelingen-rij, die zelf géén link is
   omdat een link in een link niet mag). min-height houdt het raakvlak op
   44px zonder de regelhoogte te veranderen. */
.pz-rij a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pz-rij a:hover { color: var(--c-orange-deep); }
.pz-cel--tekst a { color: var(--c-ink); }

/* De premium-regel sluit de lijst af en telt als één brede cel. */
.pz-rij--premium { padding-block: var(--sp-5); }
.pz-rij--premium .pz-naam svg.pz-ster { width: 14px; height: 24px; color: var(--c-ink); }
.pz-premiumcel {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  text-align: center;
}
.pz-premiumprijs {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}
.pz-premiumnoot { font-size: var(--fs-small); color: var(--c-ink-soft); }

.pz-tabel-actie { display: flex; justify-content: center; margin-top: var(--sp-8); }

/* Onder 860px past de derde kolom niet meer naast een leesbare naam:
   de koppen worden kort en de kolommen smal. */
@media (max-width: 860px) {
  .pz-tabel { --pz-kol: 5rem; }
  .pz-tabel-head .pz-th-lang { display: none; }
  .pz-tabel-head .pz-th-kort { display: block; }
  .pz-tabel-head,
  .pz-rij { gap: var(--sp-2); }
  .pz-tabel-head { padding-inline: var(--sp-4); }
  .pz-rij { padding: var(--sp-4); }
  .pz-vink { width: 24px; height: 24px; }
  .pz-naam { font-size: var(--fs-small); }
  .pz-cel--tekst { font-size: 0.75rem; line-height: 1.3; }
  /* De premium-regel past niet in twee smalle kolommen: op mobiel valt de
     aanduiding onder de naam, over de volle breedte. */
  .pz-rij--premium { grid-template-columns: 1fr; gap: var(--sp-3); }
  .pz-premiumcel { grid-column: 1 / -1; justify-content: flex-start; gap: var(--sp-2); }
  .pz-premiumprijs { font-size: 1.25rem; }
}


/* ==== 5. Licentie (/prijzen-agentic) =======================
   Eén visual naast de prijs. De visual is een donkere kaart, dus
   hij heeft geen kader nodig — hij ís het kader. */
.pz-licentie { align-items: center; }
.pz-licentie-beeld { display: grid; place-items: center; }
.pz-licentie-beeld img {
  width: 100%;
  max-width: 24rem;
  height: auto;
  border-radius: var(--r-media);
  box-shadow: var(--shadow-pop);
}
.pz-vanaf {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block: var(--sp-6);
}
.pz-vanaf .pz-bedrag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
}
.pz-vanaf .pz-per { font-size: var(--fs-lead); color: var(--c-ink-soft); }


/* ==== 6. "Altijd een volledige licentie" (/prijzen-agentic) ==
   Overgenomen van de bestaande prijzenpagina's: links de kop met
   de knop, rechts drie vinkjes. Nu als volwaardige inkt-band. */
.pz-volledig {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
@media (max-width: 860px) { .pz-volledig { grid-template-columns: 1fr; } }
.pz-volledig h2 { margin-bottom: var(--sp-4); }
.pz-volledig .lead { margin-bottom: var(--sp-6); }

.pz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.pz-checks li { display: flex; align-items: center; gap: var(--sp-4); font-weight: 500; }
.pz-checks svg {
  flex: 0 0 auto;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0.4rem;
  border-radius: 50%;
  background: var(--c-on-dark);
  color: var(--c-ink);
}


/* ==== 7. Service-keuzes (drie kaarten, /prijzen-agentic) ====
   Drie gelijkwaardige pakketten; de prijs staat onderaan zodat de
   drie kaarten op dezelfde regel eindigen. */
.pz-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}
@media (max-width: 940px) { .pz-services { grid-template-columns: 1fr; } }

.pz-service {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  /* Ruim: dit zijn de kaarten waar de bezoeker het langst naar kijkt. */
  padding: clamp(2rem, 3.5vw, 3rem);
}
/* De slogan-pill hangt rechtsboven in de kaart, zoals in het origineel.
   Achtergrondkleur komt uit het origineel, tekst is inkt: de originele
   tekstkleuren haalden maar 2,8:1 respectievelijk 3,3:1. */
.pz-servicepill {
  position: absolute;
  top: var(--sp-5);
  right: var(--sp-5);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 500;
  white-space: nowrap;
  padding: 0.4rem 0.9rem;
  border-radius: var(--r-pill);
  color: var(--c-ink);
}
.pz-servicepill--autonoom { background: var(--c-lavender); }
.pz-servicepill--ontzorgt { background: var(--c-mint); }
.pz-servicepill--persoonlijk { background: var(--c-butter); }

/* De naam staat onder de pill, met genoeg lucht erboven zodat hij ook op
   smalle kaarten nooit onder de pill door loopt. */
.pz-service h3 { font-size: var(--fs-kaartkop); margin: var(--sp-7) 0 var(--sp-1); }
.pz-service-sub { margin: 0 0 var(--sp-5); color: var(--c-ink-soft); }

/* De implementatiezin staat apart, in mint: het is een cadeau, geen feature. */
.pz-service-impl {
  margin: 0 0 var(--sp-5);
  font-weight: 500;
  color: var(--c-mint-deep);
}

/* Het lijstje houdt zijn eigen ritme. Alleen de prijs wordt naar beneden
   geduwd; zou de lijst zelf rekken (flex: 1), dan kreeg de kaart met twee
   regels enorme gaten tussen die regels. De ondermarge staat daarom op de
   lijst en niet als margin-top op de prijs: die laatste moet auto blijven
   om de prijs naar de onderrand te duwen. */
.pz-service .list-check { margin: 0 0 var(--sp-7); gap: var(--sp-4); }
.pz-service .list-check li { font-size: var(--fs-body); }
.pz-service-label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 var(--sp-4);
}
/* margin-top:auto duwt alléén de prijs naar de onderrand, zodat de drie
   kaarten toch op dezelfde regel eindigen zonder het lijstje te rekken. */
.pz-service-prijs {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-5);
}
.pz-service-prijs b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
}
.pz-service-prijs span { font-size: var(--fs-small); color: var(--c-ink-soft); }


/* ==== 8. Service-rijen (GEO, implementatie, koppelingen) =====
   Eén onderwerp per rij: naam, uitleg en prijs links, één visual rechts.
   De hele rij is een link naar de pagina die erover gaat. */
.pz-rijen { display: grid; gap: 0; }
.pz-srij {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: var(--sp-7) var(--sp-5);
  margin-inline: calc(-1 * var(--sp-5));
  border-radius: var(--r-card);
  border-bottom: 1px solid var(--c-line-strong);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease);
}
/* Alleen rijen die écht ergens heen gaan lichten op. De implementatie-rij is
   geen link én bevat zelf witte kaartjes — een witte hover zou die opslokken. */
a.pz-srij:hover { background: var(--c-surface); }
.pz-srij:last-child { border-bottom: 0; }
/* De drie implementatie-keuzes lopen onder tekst én visual door. */
.pz-srij .pz-keuzes { grid-column: 1 / -1; }
@media (max-width: 720px) { .pz-srij { grid-template-columns: 1fr; } }

/* De visual naast de rij: één beeld, rustig, met een kader zodat een
   schermafdruk niet als losse rechthoek op de steen-band zweeft. */
.pz-srij-beeld { display: grid; place-items: center; }
.pz-srij-beeld img {
  width: 100%;
  height: auto;
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-tile);
  background: var(--c-surface);
}

/* Koppelingen: een klein raster met de logo's van de partners. Elk logo op
   een wit vlakje, zodat merken met een lichte rand ook leesbaar blijven. */
.pz-koppellogos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  width: 100%;
}
@media (max-width: 720px) { .pz-koppellogos { grid-template-columns: repeat(3, 1fr); } }
.pz-koppellogos li {
  display: grid;
  place-items: center;
  background: var(--c-surface);
  border-radius: var(--r-tile);
  padding: var(--sp-3);
  min-height: 3.25rem;
}
.pz-koppellogos img {
  width: auto;
  max-width: 100%;
  max-height: 1.75rem;
  object-fit: contain;
}

.pz-srij h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-kaartkop);
  margin: 0 0 var(--sp-2);
}
.pz-srij h3 .pz-pijl {
  width: 18px; height: 18px; flex: 0 0 auto; opacity: 0; color: var(--c-ink-soft);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
a.pz-srij:hover .pz-pijl,
a.pz-srij:focus-visible .pz-pijl { opacity: 1; transform: translateX(3px); }
.pz-srij p { margin: 0; color: var(--c-ink-soft); max-width: 46rem; }

/* De prijs staat onder de uitleg, niet in een eigen kolom: die kolom is nu
   het beeld. Serif en fors, zodat hij nog steeds als eerste opvalt. */
.pz-srij .pz-srij-prijs {
  margin-top: var(--sp-5);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.1;
}
.pz-srij-prijs small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--c-ink-soft);
}

/* De drie implementatie-keuzes staan ín de rij, als één subraster. */
.pz-keuzes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
@media (max-width: 720px) { .pz-keuzes { grid-template-columns: 1fr; } }
.pz-keuzevak {
  background: var(--c-surface);
  border-radius: var(--r-tile);
  padding: var(--sp-5);
}
.pz-keuzevak h4 { margin: 0 0 var(--sp-2); }
.pz-keuzevak .pz-keuzeprijs {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.pz-keuzevak p { margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); }
.pz-keuzevak .pz-gratis {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-orange-deep);
}


/* ==== 9. Scrollworld-premium (/prijzen-agentic) =============
   Het animatievoorbeeld draagt het blok; de tekst blijft kort. */
.pz-scrollworld { align-items: center; }
/* Zelfde pill als op de EMS-feature-pagina's, maar dit stylesheet staat los
   van ems-feature.css — daarom hier een eigen, identieke regel. */
.pz-premiumbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-on-dark);
  border: 1px solid rgba(244, 244, 245, 0.28);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.95rem;
  margin-bottom: var(--sp-6);
}
/* Ster wit, niet oranje: op de zwarte band draagt de diamant het merk. */
.pz-premiumbadge svg { width: 11px; height: 19px; flex: 0 0 auto; color: #fff; }
/* De film speelt één keer af en blijft dan op het kostenoverzicht staan; het
   kader draagt daarom ook de knop om hem opnieuw te starten. */
.pz-sw-scherm { position: relative; line-height: 0; }
.pz-sw-video {
  width: 100%;
  height: auto;
  border-radius: var(--r-media);
  box-shadow: var(--shadow-pop);
  outline-offset: -4px;
}
.pz-sw-scherm.is-af::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-media);
  background: rgba(23, 23, 29, 0.55);
}
.pz-sw-opnieuw {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* .btn zet display:inline-flex en wint van het UA-[hidden]; zonder deze regel
   staat de knop al vanaf het laden over de film. */
.pz-sw-opnieuw[hidden] { display: none; }
.pz-sw-opnieuw:hover { transform: translate(-50%, calc(-50% - 1px)); }
.pz-sw-opnieuw:active { transform: translate(-50%, -50%); }
.pz-sw-opnieuw svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pz-sw-prijs {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-block: var(--sp-6) var(--sp-5);
}
.pz-sw-prijs b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  line-height: 1;
}
.pz-sw-prijs span { color: var(--c-on-dark); opacity: 0.72; }


/* ==== 10. Constell Experts (/prijzen-agentic) ===============
   Drie diensten met een uurtarief; dezelfde rij-opzet als de
   services, maar zonder link — dit zijn geen pagina's. */
/* De teamfoto draagt de band: één echte foto van de mensen zelf, groot en
   rustig, boven de drie diensten. */
.pz-expertteam {
  max-width: 44rem;
  margin: 0 auto var(--sp-8);
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.pz-expertteam img { width: 100%; height: auto; }

.pz-experts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 940px) { .pz-experts { grid-template-columns: 1fr; } }
.pz-expert {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--c-surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  padding: 0 clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
}
/* De actiefoto loopt rand-tot-rand over de bovenkant van de kaart. */
.pz-expert-beeld {
  margin: 0 clamp(-2rem, -3vw, -1.5rem) var(--sp-2);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-bg-shade);
}
.pz-expert-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pz-expert h3 { font-size: var(--fs-kaartkop); margin: 0; }
.pz-expert p { margin: 0; color: var(--c-ink-soft); }
.pz-expert .pz-expertprijs {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
}
.pz-expert .pz-expertprijs small {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--c-ink-soft);
}


/* ==== 11. Demoformulier (/prijzen-agentic) ==================
   Het bestaande demo-formulier (#contact-form → de n8n-webhook),
   maar in designsysteem-vorm: witte kaart, inkt-randen, geen
   lavendel vlak. */
.pz-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .pz-form-grid { grid-template-columns: 1fr; } }

.pz-form {
  background: var(--c-surface);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-card);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  display: grid;
  gap: var(--sp-4);
}
.pz-form-rij { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 560px) { .pz-form-rij { grid-template-columns: 1fr; } }

.pz-veld {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-btn);
  padding: 0.875rem 1rem;
  transition: border-color var(--t-fast) var(--ease);
}
.pz-veld::placeholder { color: var(--c-ink-soft); }
.pz-veld:focus { border-color: var(--c-ink); outline-offset: 1px; }
textarea.pz-veld { resize: vertical; min-height: 7rem; }
select.pz-veld { cursor: pointer; }
.pz-form .btn { justify-content: center; margin-top: var(--sp-2); }

.pz-form-uitleg .lead { color: var(--c-ink-soft); }
.pz-form-uitleg .pz-voordelen { grid-template-columns: 1fr; margin-top: var(--sp-6); }


/* ==== 12. Starter-showcase (/prijzen-starter) ===============
   Apple-achtig: één boodschap per band, grote maat, veel lucht.
   De tekst staat gecentreerd bóven het beeld en is bewust kort. */
.pz-showcase { text-align: center; }
.pz-showcase .eyebrow { margin-bottom: var(--sp-4); }
/* De Starter-pill staat bovenaan de pagina, boven de H1. */
.pz-pilrij { margin: 0 0 var(--sp-5); }
.pz-showcase h2 { margin-bottom: var(--sp-5); }
.pz-showcase .lead {
  max-width: 36rem;
  margin-inline: auto;
  color: var(--c-ink-soft);
}
.pz-showcase-beeld {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--r-media);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: var(--c-surface);
}
.pz-showcase-beeld img { width: 100%; height: auto; }
/* Het herobeeld is 962px breed; over de volle container zou het opgeblazen
   en dus zacht renderen. */
.pz-hero .pz-showcase-beeld { max-width: 60rem; margin-inline: auto; }
/* Een vrijstaande illustratie hoort niet in een kader te zweven. */
.pz-showcase-beeld--vrij {
  box-shadow: none;
  background: none;
  border-radius: 0;
}
.pz-showcase-actie { margin-top: var(--sp-7); }

/* ---- Genummerde licentie-onderdelen (01 t/m 04) ----
   Wat er in de Starter-licentie zit, letterlijk afgeteld: vier banden
   met hetzelfde nummer groot boven de kop. Het cijfer-idioom komt van de
   card-stack op /event-management (.em-stack-num): lichte cijferletter,
   groot gezet. Verschil: daar staat het cijfer decoratief in het
   beeldvlak, hier is het de teller van de pagina en dus in Avondzon-diep
   (4,85:1 op nevel, 5,47:1 op zachtwit) in plaats van 40% inkt. Op steen
   haalt die kleur maar 3,88:1, dus daar staat nooit een nummer. */
.pz-nr {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-orange-deep);
  margin: 0 0 var(--sp-4);
}

/* De hero van /prijzen-starter draagt geen beeld (onderdeel 01 toont de
   branded offerte al) maar wel de prijs. Iets extra lucht onder de tekst
   houdt de band ruim en laat de eerste teller met een schone lei beginnen;
   ruimer dan dit en het bedrag komt los te staan van de pagina. */
.pz-hero--tekst { padding-bottom: clamp(3.5rem, 7vw, 6rem); }

/* ---- De prijs in de hero (/prijzen-starter) ----
   Het bedrag is het zwaartepunt van de band. Geen kader eromheen — deze
   pagina scheidt met dunne lijnen, dus alleen een hairline erboven en
   lucht eromheen. De typografie van het bedrag zelf staat verderop bij
   .pz-groot--prijs, want die moet ná .pz-groot staan om te winnen. */
.pz-hero-prijs {
  max-width: 26rem;
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--c-line);
}
.pz-hero-prijs .eyebrow { margin-bottom: var(--sp-3); }
.pz-hero-prijs-noot {
  margin: 0;
  color: var(--c-ink-soft);
}

/* Het grote cijfer van "binnen 4 minuten verstuurd". */
.pz-groot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 16vw, 11rem);
  line-height: 0.9;
  margin: 0 0 var(--sp-4);
  font-variant-numeric: tabular-nums;
}
.pz-groot small { font-size: 0.28em; font-weight: 700; margin-left: 0.1em; }

/* De prijs in de hero leent hetzelfde cijfer-idioom, maar een maat kleiner:
   "4 min" verderop houdt zo zijn eigen moment. Deze twee regels staan bewust
   ná .pz-groot — gelijke specificiteit, dus de volgorde beslist. */
/* Cormorant Infant zet cijfers als mediëvale cijfers (de 1 op x-hoogte, de 4
   en 9 onder de lijn) en de Google-subset draagt geen lining-alternatief —
   gemeten: lnum/onum geven exact dezelfde breedte. Dat is dus de huisstijl,
   en het is ook wat de prijskaart op /prijzen al toont; hier blijft het
   gelijk. Wat wel moest: de woordspatie op 112px is te breed tussen het
   euroteken en het getal, dus die trekken we aan — maar niet in "per maand",
   dat is gewone tekst. */
.pz-groot--prijs {
  font-size: clamp(3.75rem, 10vw, 7rem);
  word-spacing: -0.18em;
  /* de 9 duikt onder de lijn; de terugverdien-regel eronder heeft dus iets
     meer ruimte nodig dan de standaardmarge van .pz-groot */
  margin-bottom: var(--sp-5);
}
.pz-groot--prijs small { word-spacing: normal; }
/* "per maand" hoort bij de prijsregel, niet bij het cijfer: grotesk en licht,
   zoals de prijsregel op /prijzen. */
.pz-groot--prijs small {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: 300;
  margin-left: var(--sp-2);
  color: var(--c-ink-soft);
}


/* ==== 13. Resultaten-band (/prijzen-starter) ================
   Drie tellende stat-ringen op inkt — het systeem-patroon, alleen
   iets ruimer omdat er maar drie cijfers staan. */
.pz-resultaten { max-width: 60rem; margin-inline: auto; }
.pz-resultaten .stat-ring { margin-inline: auto; }