/* ==========================================================================
   Sectie-CSS die alleen bij de marketingsite hoort.
   Het systeem zelf staat in au-tokens.css (waarden) en au-components.css
   (herbruikbare onderdelen). Hier staat uitsluitend wat paginagebonden is.

   De hero is bewust statisch: geen carousel, geen stockfoto, maar de belofte
   met daaronder een echt scherm over de volle vensterbreedte.
   ========================================================================== */

.sect-hero {
  position: relative;
  overflow: hidden;
  background: var(--au-navy);
  color: var(--au-text-op-deep);
  padding: var(--au-space-7) 0 0;
}

/* Alle echte inhoud boven de achtergrondlagen. */
.sect-hero > * { position: relative; z-index: 2; }

/* Twee zachte lichtvlakken in de merkkleuren. Puur CSS, dus geen bestand en
   geen laadtijd. Geeft diepte zonder ergens een bewering te doen. */
.sect-hero::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -20%;
  height: 150%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 46% at 24% 16%, rgba(208, 74, 2, 0.18), transparent 62%),
    radial-gradient(46% 40% at 86% 6%,  rgba(60, 80, 220, 0.14), transparent 68%);
  filter: blur(6px);
}

/* Fijn puntenraster dat naar onderen wegvaagt: het vocabulaire van
   engineering, subtiel genoeg om niet met de tekst te concurreren. */
.sect-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(230, 241, 255, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 65%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 65%);
}

/* Het verbindingsnetwerk. Begint pas ruim voorbij de tekstkolom, en vaagt aan
   de linkerkant uit, zodat er geen enkele lijn achter de lopende tekst
   doorloopt. Dat was de kanttekening bij de eerste proef. */
.hero-net {
  position: absolute;
  top: 4.5rem;
  left: 68%;
  right: 3%;
  /* Hoogte uit de verhouding van de viewBox, niet uit een percentage van de
     hero. De hero is ruim 1500px hoog (het productbeeld hoort erbij), en een
     percentage daarvan maakte de doos zo hoog dat het SVG op de hoogte ging
     schalen: de tekening werd bijna drie keer te groot en liep het beeld uit. */
  height: auto;
  aspect-ratio: 420 / 300;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%);
}

.hero-net-lijn path {
  stroke: var(--au-text-op-deep);
  stroke-opacity: 0.22;
  stroke-width: 1;
}
.hero-net-lijn--vaag path { stroke-opacity: 0.12; }
.hero-net-knoop circle { fill: var(--au-text-op-deep); fill-opacity: 0.5; }
.hero-net-kern  circle { fill: var(--au-orange); }

/* Pas tonen als er echt lege ruimte naast de tekstkolom is. Onder 1200px
   loopt het netwerk tegen de laatste woorden aan en is het geen accent meer
   maar rommel; gemeten op de echte glyph-randen, niet op de blokbreedte. */
@media (max-width: 75rem) {
  .hero-net { display: none; }
}

/* Het levende netwerk (js/main.js). De stilstaande tekening hierboven blijft
   staan als er geen JavaScript is en verdwijnt zodra het canvas er is: twee
   netwerken over elkaar is ruis. De laag ligt op dezelfde hoogte als het SVG,
   dus onder de tekst en boven gloed en raster.
   Anders dan het SVG blijft het canvas ook op smalle schermen staan: het vult
   het hele vlak in plaats van de ruimte naast de tekst, en het aantal knopen
   schaalt met de oppervlakte. Op een telefoon zijn dat er dus vanzelf minder. */
.hero-net-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-net-aan .hero-net { display: none; }

/* Breder dan de mockup, en de kop een trede kleiner. De belofte is een hele
   zin van negen woorden; op 72px liep die over vijf regels en duwde het
   productbeeld onder de vouw. Precies het beeld dat wél gezien moet worden. */
.hero-top { max-width: 48rem; }

.sect-hero .hero-eyebrow {
  color: var(--au-orange-hot);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--au-tracking-wide);
  margin: 0 0 var(--au-space-2);
}

.sect-hero h1 {
  color: var(--au-text-op-deep);
  font-size: var(--au-text-5xl);
  font-weight: var(--au-weight-bold);
  line-height: var(--au-leading-tight);
  letter-spacing: var(--au-tracking-tight);
  margin: 0 0 var(--au-space-3);
}

@media (min-width: 64rem) {
  .sect-hero h1 { font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.06; }
}

.sect-hero .hero-lead {
  color: color-mix(in srgb, var(--au-text-op-deep) 72%, transparent);
  font-size: var(--au-text-lg);
  line-height: var(--au-leading-base);
  max-width: 36rem;
  margin: 0 0 var(--au-space-4);
}

/* justify-content expliciet: style.css centreert .hero-actions nog voor de
   oude hero, en zonder deze regel erft de nieuwe hero die centrering. */
.sect-hero .hero-actions {
  display: flex;
  gap: var(--au-space-3);
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
}

.sect-hero .hero-help-link {
  color: color-mix(in srgb, var(--au-text-op-deep) 72%, transparent);
  text-decoration-color: color-mix(in srgb, var(--au-text-op-deep) 35%, transparent);
}

.sect-hero .hero-help-link:hover { color: var(--au-text-op-deep); }

/* Het productbeeld loopt tot de vensterrand door. height:auto is niet
   optioneel: zonder die regel rekt de browser het beeld uit zodra de
   breedte begrensd wordt. */
/* Schermbreed was te veel van het goede: het beeld schreeuwde harder dan de
   belofte erboven. Het lijnt nu uit met de tekstkolom, zodat kop, lead en
   product één kolom vormen in plaats van een band die de pagina overneemt. */
.container-wide.hero-bleed { max-width: 60rem; }

.hero-bleed { padding: var(--au-space-4) 0 var(--au-space-5); }

.hero-bleed img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--au-radius-lg);
  border: 1px solid var(--au-border-deep);
  /* Op ware breedte werd dit beeld bijna een heel scherm hoog (867px bij een
     venster van 900), waardoor de hero anderhalf tot twee schermen besloeg en
     alles eronder buiten beeld viel. Daarom een plafond, met de uitsnede
     bovenaan: bij een productscherm zit de betekenis in de kop en de eerste
     rij kaarten, niet in de grafieken onderaan. */
  max-height: min(48vh, 480px);
  object-fit: cover;
  object-position: top center;
}

/* ==========================================================================
   Padenkiezer. Drie ingangen die het scherm en de tekst verwisselen.
   ========================================================================== */

.sect-paden {
  background: var(--au-surface-2);
  padding: var(--au-section-y) 0;
  border-bottom: 1px solid var(--au-border);
}

.paden-kop { max-width: 44rem; margin: 0 0 var(--au-space-4); }
.paden-kop .eyebrow {
  color: var(--au-orange);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--au-tracking-wide);
  margin: 0 0 var(--au-space-1);
}
.paden-kop h2 {
  font-size: var(--au-text-4xl);
  font-weight: var(--au-weight-bold);
  line-height: var(--au-leading-snug);
  margin: 0 0 var(--au-space-2);
}
.paden-lead { color: var(--au-text-dim); font-size: var(--au-text-lg); margin: 0; }

/* Tabs. Geen pillen die als knoppen ogen: een onderlijn maakt duidelijker dat
   het om een keuze binnen dezelfde sectie gaat en niet om navigatie. */
.paden-tabs {
  display: flex;
  gap: var(--au-space-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--au-border);
  margin: 0 0 var(--au-space-5);
}
.paden-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--au-text-dim);
  font: inherit;
  font-weight: var(--au-weight-semi);
  font-size: var(--au-text-base);
  padding: var(--au-space-2) 0;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--au-dur-base) var(--au-ease),
              border-color var(--au-dur-base) var(--au-ease);
}
.paden-tab:hover { color: var(--au-text-heading); }
.paden-tab.is-actief { color: var(--au-orange); border-bottom-color: var(--au-orange); }
.paden-tab:focus-visible { outline: 2px solid var(--au-orange); outline-offset: 3px; border-radius: 2px; }

.paden-paneel {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--au-space-4);
  align-items: start;
}
@media (min-width: 60rem) {
  .paden-paneel { grid-template-columns: 22rem 1fr; gap: var(--au-space-6); }
}
@media (min-width: 75rem) {
  .paden-paneel { grid-template-columns: 24rem 1fr; }
}
.paden-paneel[hidden] { display: none; }

.paden-tekst h3 {
  font-size: var(--au-text-3xl);
  font-weight: var(--au-weight-bold);
  line-height: var(--au-leading-snug);
  margin: 0 0 var(--au-space-2);
}
.paden-uitleg { color: var(--au-text-dim); margin: 0 0 var(--au-space-3); }
.paden-punten { list-style: none; margin: 0 0 var(--au-space-4); padding: 0; }
.paden-punten li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--au-space-2);
  font-size: var(--au-text-sm);
  line-height: var(--au-leading-base);
}
/* Streepje in plaats van een bolletje: rustiger, en het leest als een opsomming
   van feiten en niet als een verkooplijstje met vinkjes. */
.paden-punten li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 2px;
  background: var(--au-orange);
  border-radius: 1px;
}

.paden-beeld { display: grid; gap: var(--au-space-3); }
@media (min-width: 75rem) {
  /* Duidelijke rangorde: het hoofdscherm moet je kunnen lezen, het tweede is
     een hint naar de breedte. Bij gelijke maten leek het twee hoofdbeelden. */
  .paden-beeld { grid-template-columns: 2.1fr 1fr; align-items: start; }
}
.paden-beeld figure { margin: 0; }
.paden-beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--au-radius-md);
  border: 1px solid var(--au-border);
  box-shadow: var(--au-shadow-md);
  background: var(--au-surface);
}
.paden-beeld figcaption {
  font-size: var(--au-text-xs);
  color: var(--au-text-dim);
  margin-top: var(--au-space-1);
}
/* De tweede afbeelding is een hint naar de breedte, geen tweede hoofdbeeld.
   Op smalle schermen valt hij weg: dan zijn twee schermen onder elkaar te veel
   van hetzelfde en wordt geen van beide nog leesbaar. */
@media (max-width: 48rem) {
  .paden-thumb { display: none; }
}

/* De uitvagende rechterrand hoorde bij een uitsnede uit een bredere tabel: die
   snijdt een kolom door, en dan is uitvagen eerlijker dan een harde snee.
   Sinds de kiezer de telefoonuitsnede aan de hero koppelt, is het mobiele beeld
   een echte telefoonopname van hetzelfde scherm; daar valt rechts niets buiten
   beeld en zou het uitvagen iets suggereren dat er niet is. Weghalen dus.
   Komt er ooit weer een handmatige uitsnede in dit slot, dan hoort deze regel
   terug (en dan alleen voor dat beeld). */

.hero-bleed figcaption {
  color: color-mix(in srgb, var(--au-text-op-deep) 68%, transparent);
  font-size: var(--au-text-xs);
  margin: var(--au-space-2) 0 0;
  padding-left: 0.25rem;
}

/* ==========================================================================
   ANDERS DAN EEN GRC-SUITE
   Tegenoverstelling per thema. De linkerkolom (de gangbare praktijk) is
   bewust gedempt: dezelfde tekstgrootte, maar dimmere kleur en een grijze
   achtergrond, zodat het oog vanzelf naar rechts trekt zonder dat we de
   linkerkant belachelijk maken met doorstrepingen of kruisjes.

   Drie kolommen op desktop (thema | gangbaar | hier), gestapeld onder 62rem.
   Elke rij herhaalt dan zijn eigen kolomlabel, want zonder kolomkop weet je
   na de tweede rij niet meer welke kant welke is.
   ========================================================================== */

.sect-anders { background: var(--au-surface); padding: var(--au-space-7) 0; }

.anders-kop { max-width: 46rem; margin: 0 0 var(--au-space-5); }
.anders-kop .eyebrow {
  color: var(--au-orange);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-semi);
  letter-spacing: var(--au-tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--au-space-1);
}
.anders-kop h2 {
  font-size: var(--au-text-4xl);
  line-height: var(--au-leading-snug);
  letter-spacing: var(--au-tracking-tight);
  color: var(--au-text-heading);
  margin: 0 0 var(--au-space-2);
}
.anders-lead { color: var(--au-text-dim); font-size: var(--au-text-lg); margin: 0; }

.anders-grid { display: flex; flex-direction: column; }

.anders-koprij,
.anders-rij {
  display: grid;
  grid-template-columns: 12rem 1fr 1fr;
  gap: var(--au-space-2);
  align-items: stretch;
}

.anders-koprij { padding-bottom: var(--au-space-1); }
.anders-hoofd {
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-semi);
  letter-spacing: var(--au-tracking-wide);
  text-transform: uppercase;
  padding: 0 var(--au-space-3);
}
.anders-hoofd--zwaar { color: var(--au-text-dim); }
.anders-hoofd--licht { color: var(--au-orange); }

.anders-rij { padding: var(--au-space-2) 0; border-top: 1px solid var(--au-border); }
.anders-rij:first-of-type { border-top: 0; }

.anders-thema {
  font-size: var(--au-text-base);
  font-weight: var(--au-weight-semi);
  color: var(--au-text-heading);
  margin: 0;
  padding-top: var(--au-space-3);
  align-self: start;
}

.anders-kant {
  border-radius: var(--radius-lg, 20px);
  padding: var(--au-space-3);
}
.anders-kant p { margin: 0; font-size: var(--au-text-base); line-height: var(--au-leading-base); }

.anders-kant--zwaar { background: var(--au-surface-2); }
.anders-kant--zwaar p { color: var(--au-text-dim); }

/* De eigen kant krijgt de accentrand die op de tarievenkaart ook "dit is het
   voorstel" betekent, één visuele taal voor beide blokken. */
.anders-kant--licht {
  background: var(--au-orange-soft);
  border: 1px solid color-mix(in srgb, var(--au-orange) 30%, transparent);
}
.anders-kant--licht p { color: var(--au-text); }

/* Per-rij kolomlabel: alleen zichtbaar zodra de kolommen stapelen. */
.anders-kantlabel { display: none; }

.anders-slot {
  margin: var(--au-space-4) 0 0;
  color: var(--au-text-dim);
  font-size: var(--au-text-sm);
}

@media (max-width: 62rem) {
  .anders-koprij { display: none; }
  .anders-rij {
    grid-template-columns: 1fr;
    gap: var(--au-space-2);
    padding: var(--au-space-3) 0;
  }
  .anders-thema { padding-top: 0; }
  .anders-kantlabel {
    display: block;
    font-size: var(--au-text-2xs);
    font-weight: var(--au-weight-semi);
    letter-spacing: var(--au-tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--au-space-1);
  }
  .anders-kant--zwaar .anders-kantlabel { color: var(--au-text-dim); }
  .anders-kant--licht .anders-kantlabel { color: var(--au-orange); }
}

/* ==========================================================================
   TARIEVEN
   Eén blok CSS voor twee plekken: de compacte sectie op de homepage en de
   volledige pagina /tarieven. Dezelfde kaart, alleen met meer regels erin.

   Bewuste keuze: geen vergelijkingstabel met vinkjes. Drie tiers passen naast
   elkaar en een tabel dwingt de bezoeker om te lezen wat er NIET in zit, dat
   is precies het gesprek dat een prijs van 195 euro niet moet oproepen.
   ========================================================================== */

.sect-prijs { background: var(--au-surface-2); padding: var(--au-space-7) 0; }

.prijs-kop { max-width: 44rem; margin: 0 0 var(--au-space-5); }
.prijs-kop .eyebrow {
  color: var(--au-orange);
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-semi);
  letter-spacing: var(--au-tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--au-space-1);
}
.prijs-kop h2 {
  font-size: var(--au-text-4xl);
  line-height: var(--au-leading-snug);
  letter-spacing: var(--au-tracking-tight);
  color: var(--au-text-heading);
  margin: 0 0 var(--au-space-2);
}
.prijs-lead { color: var(--au-text-dim); font-size: var(--au-text-lg); margin: 0; }

/* Gelijke kolommen, gelijke hoogte. auto-fit zou bij twee kaarten een gat
   laten vallen; drie is hier het vaste aantal en dat mag de code weten. */
.prijs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--au-space-3);
  align-items: stretch;
}
@media (max-width: 62rem) { .prijs-grid { grid-template-columns: 1fr; } }

.prijs-kaart {
  display: flex;
  flex-direction: column;
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  border-radius: var(--radius-lg, 20px);
  padding: var(--au-space-4);
  position: relative;
}

/* Het middelste voorstel krijgt gewicht via een rand en een lichte lift, niet
   via een afwijkende achtergrondkleur: die leest als "uitverkocht" of "niet
   beschikbaar" zodra de kaart grijs wordt. */
.prijs-kaart--uitgelicht {
  border-color: var(--au-orange);
  box-shadow: 0 18px 40px -28px rgba(10, 14, 39, 0.45);
}
.prijs-badge {
  position: absolute;
  top: calc(-1 * var(--au-space-1) - 6px);
  left: var(--au-space-4);
  background: var(--au-orange);
  color: #fff;
  font-size: var(--au-text-2xs);
  font-weight: var(--au-weight-semi);
  letter-spacing: var(--au-tracking-wide);
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.prijs-naam {
  font-size: var(--au-text-xl);
  font-weight: var(--au-weight-semi);
  color: var(--au-text-heading);
  margin: 0 0 var(--au-space-2);
}
/* baseline-uitlijning: het bedrag en de periode horen op één lijn te staan,
   anders zweeft "per maand" halverwege de cijfers. */
.prijs-bedrag-rij {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--au-space-2);
}
.prijs-bedrag {
  font-size: var(--au-text-3xl);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-tight);
  color: var(--au-text-heading);
}
.prijs-periode { font-size: var(--au-text-sm); color: var(--au-text-dim); }
.prijs-regel { color: var(--au-text); font-size: var(--au-text-base); line-height: var(--au-leading-base); margin: 0; }
.prijs-voor {
  color: var(--au-text-dim);
  font-size: var(--au-text-sm);
  margin: 0 0 var(--au-space-3);
  padding-bottom: var(--au-space-3);
  border-bottom: 1px solid var(--au-border);
}

.prijs-punten { list-style: none; margin: 0 0 var(--au-space-4); padding: 0; }
.prijs-punten li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: var(--au-space-1);
  color: var(--au-text);
  line-height: var(--au-leading-base);
}
.prijs-punten li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.55em;
  width: 0.5rem;
  height: 0.28rem;
  border-left: 2px solid var(--au-orange);
  border-bottom: 2px solid var(--au-orange);
  transform: rotate(-45deg);
}

/* De knop zakt naar de onderkant, zodat drie kaarten met ongelijke tekst toch
   drie knoppen op één lijn hebben. */
.prijs-kaart .prijs-actie { margin-top: auto; padding-top: var(--au-space-3); }

.prijs-voetnoot {
  margin: var(--au-space-4) 0 0;
  color: var(--au-text-dim);
  font-size: var(--au-text-sm);
  max-width: 52rem;
}
.prijs-meer {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--au-space-2);
  color: var(--au-orange);
  font-weight: var(--au-weight-semi);
  text-decoration: none;
}
.prijs-meer:hover { text-decoration: underline; }

/* ── Pagina /tarieven ───────────────────────────────────────────────────── */

.tarief-hero {
  background: var(--au-navy);
  color: var(--au-text-op-deep);
  padding: var(--au-space-7) 0 var(--au-space-6);
}
.tarief-hero h1 {
  font-size: var(--au-text-5xl);
  line-height: var(--au-leading-tight);
  letter-spacing: var(--au-tracking-tight);
  margin: 0 0 var(--au-space-2);
}
.tarief-hero .tarief-lead {
  max-width: 46rem;
  font-size: var(--au-text-lg);
  line-height: var(--au-leading-base);
  color: color-mix(in srgb, var(--au-text-op-deep) 80%, transparent);
  margin: 0;
}

/* Melding over het beta-programma. Staat bovenaan omdat het het antwoord is op
   de eerste vraag die een bezoeker bij deze bedragen stelt: geldt dit nu al? */
.tarief-melding {
  display: flex;
  gap: var(--au-space-2);
  align-items: flex-start;
  max-width: 46rem;
  margin: var(--au-space-4) 0 0;
  padding: var(--au-space-2) var(--au-space-3);
  border: 1px solid var(--au-border-deep);
  border-left: 3px solid var(--au-orange);
  border-radius: var(--radius-lg, 20px);
  background: rgba(255, 255, 255, 0.04);
}
.tarief-melding i { color: var(--au-orange); margin-top: 0.25rem; }
.tarief-melding strong { display: block; margin-bottom: 0.15rem; }
.tarief-melding p {
  margin: 0;
  font-size: var(--au-text-sm);
  line-height: var(--au-leading-base);
  color: color-mix(in srgb, var(--au-text-op-deep) 78%, transparent);
}

.sect-tarieven { padding: var(--au-space-6) 0; background: var(--au-surface); }
.sect-tarieven-los { padding: var(--au-space-6) 0; background: var(--au-surface-2); }

.los-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--au-space-3);
  margin-top: var(--au-space-4);
}
@media (max-width: 48rem) { .los-grid { grid-template-columns: 1fr; } }

.los-kaart {
  background: var(--au-surface);
  border: 1px solid var(--au-border);
  border-radius: var(--radius-lg, 20px);
  padding: var(--au-space-3) var(--au-space-4);
}
.los-kaart h3 {
  font-size: var(--au-text-xl);
  color: var(--au-text-heading);
  margin: 0 0 0.25rem;
}
.los-bedrag {
  display: block;
  font-weight: var(--au-weight-semi);
  color: var(--au-orange);
  margin-bottom: var(--au-space-2);
}
.los-kaart p { margin: 0; color: var(--au-text); line-height: var(--au-leading-base); }

.tarief-diensten {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--au-space-2);
  max-width: 46rem;
}
.tarief-diensten p { color: var(--au-text); line-height: var(--au-leading-base); margin: 0; }

/* Twee correcties na de eerste visuele controle, allebei erfenissen uit de
   volgorde waarin de stylesheets laden (au-components komt ná style.css):

   1. `h1` krijgt daar de donkere kopkleur mee. Op een navy hero levert dat
      navy-op-navy op: de kop staat er wel, maar is onzichtbaar.
   2. `.btn-outline` is in au-components geschreven voor een donker vlak
      (lichte letter, doorschijnende rand). In een witte prijskaart is die
      knop feitelijk onleesbaar. Binnen een kaart hoort hij donker te zijn. */
.tarief-hero h1 { color: var(--au-text-op-deep); }

.prijs-kaart .btn-outline {
  color: var(--au-text-heading);
  border: 2px solid var(--au-border);
  background: transparent;
}
.prijs-kaart .btn-outline:hover {
  color: var(--au-orange);
  border-color: var(--au-orange);
}

/* De drie knoppen horen op één lijn te eindigen, ook als de ene kaart een
   regel meer tekst heeft. width:100% maakt ze bovendien even breed, wat de
   kaarten als set laat lezen in plaats van als drie losse blokken. */
.prijs-kaart .prijs-actie .btn { width: 100%; justify-content: center; }

/* Een kopblok zonder inleidende zin heeft die 48px lucht eronder niet nodig:
   de kop hoort dan dicht op zijn eigen alinea te staan. */
.prijs-kop:has(> h2:only-child) { margin-bottom: var(--au-space-3); }

/* ════════════════════════════════════════════════════════════════════════════
   SUBPAGINA-HERO
   De onderliggende pagina's openden elk met een eigen effectenpakket: een
   stockfoto met overlay, plus per pagina een canvas met sterren, scanlines,
   een aurora of zwevende deeltjes. Vier verschillende beloftes van hetzelfde
   merk, en op /tools bovendien in een blauw dat nergens anders voorkomt.
   Ze delen nu de hero van de homepage: dezelfde navy, hetzelfde puntenraster,
   hetzelfde verbindingsnetwerk. Alleen korter, want een subpagina hoeft niet
   nog eens de hele belofte te doen; de inhoud begint eronder.
   ════════════════════════════════════════════════════════════════════════ */

.sect-hero--sub { padding: var(--au-space-6) 0 var(--au-space-6); }

/* Het netwerk staat op de homepage naast een kop van drie regels. Een
   subpagina-kop is korter, dus schuift het mee omhoog; anders hangt het
   onder de tekst in plaats van ernaast. */
.sect-hero--sub .hero-net { top: 2.5rem; }

.sect-hero--sub .hero-lead { max-width: 40rem; margin-bottom: var(--au-space-4); }

/* Kengetallen onder de hero. Stonden voorheen óver de stockfoto, waar het
   oranje op de lichte plekken van het beeld wegviel: op /diensten was
   "Pijlers" en "Jaar ervaring" niet te lezen. Nu op de eigen achtergrond,
   met een scheidingslijn erboven in plaats van eromheen. */
.sub-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--au-space-5);
  align-items: baseline;
  margin-top: var(--au-space-5);
  padding-top: var(--au-space-4);
  border-top: 1px solid color-mix(in srgb, var(--au-text-op-deep) 14%, transparent);
}

.sub-stat { display: flex; align-items: baseline; gap: var(--au-space-2); }

.sub-stat-num {
  color: var(--au-orange-hot);
  font-size: var(--au-text-2xl);
  font-weight: var(--au-weight-bold);
  letter-spacing: var(--au-tracking-tight);
  line-height: 1;
}

.sub-stat-label {
  color: color-mix(in srgb, var(--au-text-op-deep) 66%, transparent);
  font-size: var(--au-text-sm);
}

/* Een kengetal zonder getal (bijvoorbeeld "geïntegreerde toolsuite") is een
   uitspraak, geen cijfer: geen oranje, zodat het niet als getal leest. */
.sub-stat--tekst .sub-stat-label { color: var(--au-text-op-deep); font-weight: var(--au-weight-medium); }

/* Het logo in de sitevoet draagt height="24" als attribuut. Dat is een
   presentatie-hint met de laagste prioriteit, en `img, svg { max-width: 100% }`
   uit au-components.css zet er geen hoogte tegenover: de SVG viel daardoor
   terug op zijn eigen 498 bij 119 pixels. Expliciet dus, in beide richtingen. */
.footer-logo { height: 24px; width: auto; }