/* Offerteknop, productsite.
   Kleuren en typografie overgenomen uit de CSS van handsfree-digital.nl, zodat
   dit als product van Handsfree Digital leest. Mobiel eerst: de basisregels zijn
   voor smalle schermen, de media queries bouwen omhoog. */

:root {
  /* palet, letterlijk uit css/style.css van handsfree-digital.nl */
  --petrol: #0F2D31;
  --petrol-2: #143C41;
  --ink: #14383C;
  --paper: #EDF0EE;
  --licht: #DCE6E2;
  --nevel: #9DB4AE;
  --accent: #BD4128;
  --accent-hover: #A93A24;
  --accent-licht: #FF7A5C;
  --knop-tekst: #FFF6F2;
  --white: #FFFFFF;
  --ok: #4FE3A1;

  --font-display: "Bricolage Grotesque", "Bricolage Grotesque Fallback", sans-serif;
  --font-body: "Instrument Sans", "Instrument Sans Fallback", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --container: 1320px;
  --regelbreedte: 68ch;
  --sectie: 32px;
  --pad: 20px;
  --radius-hero: 22px;
  --radius: 14px;
  --lijn: rgba(20, 56, 60, .12);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0 0 .4em;
  font-weight: 700;
}
h1 { font-size: clamp(1.9rem, 6vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 3.6vw, 1.9rem); letter-spacing: -.01em; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 .7em; max-width: var(--regelbreedte); }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.sectie { padding: var(--sectie) 0; }
.sectie--petrol { background: var(--petrol); color: var(--paper); }
.sectie--petrol h2, .sectie--petrol h3 { color: var(--white); }
.sectie--licht { background: var(--licht); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .75em;
}
.sectie--petrol .eyebrow { color: var(--accent-licht); }

.overslaan {
  position: absolute;
  left: -9999px;
}
.overslaan:focus {
  left: var(--pad);
  top: 8px;
  z-index: 100;
  background: var(--white);
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 8px;
}

/* knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.knop--accent { background: var(--accent); color: var(--knop-tekst); }
.knop--accent:hover { background: var(--accent-hover); }
.knop--rand { background: transparent; color: var(--ink); border-color: var(--lijn); }
.sectie--petrol .knop--rand, .hero .knop--rand { color: var(--paper); border-color: rgba(255,255,255,.3); }
.knop--rand:hover { border-color: var(--accent); }
.knop--wit { background: var(--white); color: var(--ink); }

:focus-visible { outline: 3px solid var(--accent-licht); outline-offset: 2px; }

/* header */
.kop {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--petrol);
  color: var(--paper);
}
.kop__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
/* Het merkteken van Handsfree Digital staat voor de productnaam, zoals het op
   handsfree-digital.nl zelf ook voor de bedrijfsnaam staat. Zo leest de header als
   een lockup en blijft Offerteknop de naam die vooropstaat. */
.merk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -.02em;
  text-decoration: none;
  color: var(--white);
}
.merk__mark {
  height: 19px;
  width: auto;
  flex: 0 0 auto;
  color: var(--accent-licht);
}
.merk:hover .merk__mark { color: var(--white); }
.kop__nav { display: none; }
.kop__nav a {
  text-decoration: none;
  font-size: .95rem;
  padding: 8px 2px;
}
.kop__nav a:hover { color: var(--accent-licht); }
.kop__knop { display: none; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
}
.mobielmenu {
  display: none;
  padding: 8px 0 20px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.mobielmenu[data-open="ja"] { display: block; }
.mobielmenu a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mobielmenu .knop { margin-top: 16px; width: 100%; }

@media (min-width: 900px) {
  .kop__nav { display: flex; gap: 22px; }
  .kop__knop { display: inline-flex; }
  .burger { display: none; }
  .mobielmenu { display: none !important; }
}

/* hero */
.hero {
  background: var(--petrol);
  color: var(--paper);
  padding: 32px 0 38px;
}
.hero h1 { color: var(--white); }
.hero .dun { font-weight: 500; color: var(--nevel); display: block; }
.hero__sub { font-size: 1.0625rem; color: var(--licht); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hero__cta .knop { flex: 1 1 auto; }
.hero__beeld {
  margin-top: 24px;
  background: var(--petrol-2);
  border-radius: var(--radius-hero);
  padding: 14px;
}
.hero__beeld svg { width: 100%; height: auto; color: var(--licht); }

@media (min-width: 980px) {
  .hero { padding: 52px 0 58px; }
  .hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
  }
  .hero__beeld { margin-top: 0; padding: 20px; }
  .hero__cta .knop { flex: 0 0 auto; }
}

/* stappen */
.stappen {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.stap {
  background: var(--white);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 16px;
}
.sectie--petrol .stap {
  background: var(--petrol-2);
  border-color: rgba(255,255,255,.12);
}
.stap__nr {
  display: block;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.sectie--petrol .stap__nr { color: var(--accent-licht); }
.stap p { margin-bottom: 0; }
@media (min-width: 760px) {
  .stappen { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* infographic-omlijsting */
.figuur { margin: 20px 0 0; }
.figuur svg { display: block; width: 100%; height: auto; }
.figuur__kader {
  background: var(--white);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 12px;
  color: var(--ink);
}
.sectie--petrol .figuur__kader {
  background: var(--petrol-2);
  border-color: rgba(255,255,255,.12);
  color: var(--licht);
}
.figuur figcaption {
  font-size: .9rem;
  color: #4b6b6b;
  margin-top: 8px;
  max-width: var(--regelbreedte);
}
.sectie--petrol .figuur figcaption { color: var(--nevel); }

/* kenmerken met icoon */
.kenmerken { display: grid; gap: 14px; margin-top: 22px; padding: 0; list-style: none; }
.kenmerk { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.kenmerk svg { width: 26px; height: 26px; color: var(--accent); }
.sectie--petrol .kenmerk svg { color: var(--accent-licht); }
.kenmerk p { margin: 2px 0 0; font-size: .95rem; }
@media (min-width: 760px) { .kenmerken { grid-template-columns: repeat(2, 1fr); gap: 18px 36px; } }

/* vakken */
.vakken { display: grid; gap: 12px; margin-top: 22px; padding: 0; list-style: none; }
.vak {
  background: var(--white);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 16px;
}
.vak__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.vak p { margin-bottom: 0; font-size: .975rem; }
@media (min-width: 760px) { .vakken { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .vakken { grid-template-columns: repeat(4, 1fr); } }

/* prijskaarten: drie termijnen naast elkaar. Mobiel onder elkaar, met de
   uitgelichte kaart als eerste zodat die niet onderaan wegvalt. */
.prijskaarten {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.prijskaart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-hero);
  padding: 22px 20px;
}
.prijskaart--uitgelicht {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.prijskaart__vlag {
  position: absolute;
  top: -11px;
  left: 20px;
  margin: 0;
  background: var(--accent);
  color: var(--knop-tekst);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.prijskaart__naam {
  font-size: 1.2rem;
  margin-bottom: .5em;
}
.prijskaart__termijn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 0 0 16px;
  font-size: .9rem;
  color: #4b6b6b;
}
.prijskaart__termijn dt { font-weight: 600; }
.prijskaart__termijn dd { margin: 0; }
.prijskaart__bedrag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  margin: 0 0 6px;
}
.prijskaart__euro { font-size: 1.4rem; font-weight: 500; }
.prijskaart__per {
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  color: #4b6b6b;
}
.prijskaart__totaal { margin: 0 0 2px; font-size: .95rem; color: #4b6b6b; }
.prijskaart__inrichting { margin: 0 0 18px; font-size: .95rem; }
.prijskaart .knop { margin-top: auto; width: 100%; }
.prijzen__voet { margin-top: 16px; font-size: .95rem; color: #4b6b6b; }

@media (min-width: 880px) {
  .prijskaarten { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
}

/* faq */
.faq { margin-top: 20px; max-width: 760px; }
.faq details {
  background: var(--white);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 0 16px;
  margin-bottom: 8px;
}
.faq summary {
  cursor: pointer;
  padding: 13px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  float: right;
  font-family: var(--font-mono);
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding-bottom: 4px; }

/* afsluiter */
.afsluiter { text-align: left; }
.afsluiter .knop { margin-top: 8px; }
.afsluiter__contact { margin-top: 20px; font-size: 1rem; }
.afsluiter__contact a { text-decoration: underline; }

/* voet */
.voet {
  background: var(--petrol);
  color: var(--nevel);
  padding: 28px 0;
  font-size: .925rem;
}
.voet a { color: var(--licht); }
.voet p { max-width: none; }
.voet__merk { color: var(--white); font-family: var(--font-display); font-weight: 700; }
.voet__gegevens { margin-top: 10px; }

/* 404 */
.leeg { padding: 48px 0; }

/* Infographic A heeft twee varianten: staand op mobiel, liggend op bredere
   schermen. Zo blijven de labels leesbaar; in de liggende versie zouden ze op een
   telefoon naar ongeveer zes pixels krimpen. display:none haalt de ongebruikte
   variant ook uit de voorleesboom, dus er is geen dubbele tekst. */
/* Let op bij verplaatsen: deze twee selectors moeten even specifiek zijn als de
   regel die de maat van de svg zet, anders wint die en staan beide varianten er.
   Daarom svg.schema--..., gescoped op het kader waar het schema nu in staat. */
.schema__kader svg.schema--liggend { display: none; }
.schema__kader svg.schema--staand { display: block; margin: 0 auto; }
@media (min-width: 760px) {
  .schema__kader svg.schema--staand { display: none; }
  .schema__kader svg.schema--liggend { display: block; }
}

/* Extra ruimte na een opsomming of raster, in plaats van een inline style. */
.na-blok { margin-top: 18px; }
.na-blok--ruim { margin-top: 22px; }

/* Voordelenlijst in de hero: korte regels met een vinkje, scanbaar op een telefoon. */
.voordelen {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.voordelen li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding: 5px 0;
  color: var(--licht);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.voordelen svg {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--accent-licht);
}

/* Voordelen als blokken, met ruimte voor uitleg per punt. */
.voordeelblokken {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.voordeelblok {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--white);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 16px;
}
.voordeelblok > svg {
  width: 26px;
  height: 26px;
  color: var(--accent);
}
.voordeelblok h3 { margin-bottom: .35em; }
.voordeelblok p { margin: 0; font-size: .975rem; }

@media (min-width: 860px) {
  .voordeelblokken { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
}

/* ---------------------------------------------------------------------------
   Animaties.

   Opzet: alles staat standaard in de eindtoestand. Pas als JS de klasse
   .an-aan op een blok zet, begint de beweging. Zo ziet iemand zonder JS of met
   een fout in het script gewoon de complete tekening, nooit een halve.

   De beweging is bedoeld om de volgorde uit te leggen (eerst de foto, dan de
   beoordeling, dan de offerte), niet om op te vallen. Daarom kort, een keer, en
   zonder herhaling.

   Wie bewegende beelden liever niet ziet, krijgt ze niet: zie de media query
   prefers-reduced-motion onderaan.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

  /* Zodra het blok geladen is maar nog niet in beeld kwam: verbergen wat straks
     beweegt. Alleen binnen .an-klaar, dus JS heeft dit bevestigd. */
  .an-klaar .an-stap,
  .an-klaar .an-pijl,
  .an-klaar .an-vink,
  .an-klaar .an-houtrot,
  .an-klaar .an-labels text,
  .an-klaar .an-stops text,
  .an-klaar .an-curvepunt { opacity: 0; }

  .an-klaar .an-curve {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
  }

  /* De drie stappen komen na elkaar op, met de pijl ertussen. */
  .an-aan .an-stap {
    animation: an-opkomen .5s cubic-bezier(.2, .7, .3, 1) forwards;
  }
  .an-aan .an-s1 { animation-delay: .05s; }
  .an-aan .an-s2 { animation-delay: .45s; }
  .an-aan .an-s3 { animation-delay: .85s; }

  .an-aan .an-pijl { animation: an-vervagen-in .35s linear forwards; }
  .an-aan .an-p1 { animation-delay: .32s; }
  .an-aan .an-p2 { animation-delay: .72s; }

  /* Het vinkje in stap twee is het moment waarop de software klaar is. */
  .an-aan .an-vink {
    animation: an-vink-zetten .45s cubic-bezier(.2, .8, .3, 1) .72s forwards;
  }

  /* Infographic B: een scanlijn loopt een keer over de gevel, daarna komen de
     labels op volgorde op, de houtrot als laatste. */
  .an-aan .an-scanlijn {
    animation: an-scannen 1.5s cubic-bezier(.4, 0, .6, 1) .15s forwards;
  }
  .an-aan .an-labels text { animation: an-vervagen-in .4s ease-out forwards; }
  .an-aan .an-labels text:nth-of-type(1) { animation-delay: .75s; }
  .an-aan .an-labels text:nth-of-type(2) { animation-delay: .95s; }
  .an-aan .an-labels text:nth-of-type(3) { animation-delay: 1.15s; }
  .an-aan .an-labels text:nth-of-type(4) { animation-delay: 1.35s; }
  .an-aan .an-labels text:nth-of-type(5) { animation-delay: 1.65s; }
  .an-aan .an-houtrot { animation: an-vervagen-in .4s ease-out 1.6s forwards; }

  /* Infographic C: de lijn tekent zichzelf, dan de pijlpunt, dan de stops. */
  .an-aan .an-curve { animation: an-tekenen 1.3s ease-out .1s forwards; }
  .an-aan .an-curvepunt { animation: an-vervagen-in .3s ease-out 1.3s forwards; }
  .an-aan .an-stops text { animation: an-vervagen-in .35s ease-out forwards; }
  .an-aan .an-stops text:nth-of-type(1) { animation-delay: .25s; }
  .an-aan .an-stops text:nth-of-type(2) { animation-delay: .55s; }
  .an-aan .an-stops text:nth-of-type(3) { animation-delay: .85s; }
  .an-aan .an-stops text:nth-of-type(4) { animation-delay: 1.15s; }

  /* De voordelen in de hero komen regel voor regel op. */
  .an-klaar .voordelen li { opacity: 0; }
  /* Let op: .an-aan komt op de lijst zelf te staan, niet op een ouder. De
     selector moet dus .voordelen.an-aan zijn en niet .an-aan .voordelen. */
  .voordelen.an-aan li { animation: an-opschuiven .45s ease-out forwards; }
  .voordelen.an-aan li:nth-child(1) { animation-delay: .1s; }
  .voordelen.an-aan li:nth-child(2) { animation-delay: .2s; }
  .voordelen.an-aan li:nth-child(3) { animation-delay: .3s; }
  .voordelen.an-aan li:nth-child(4) { animation-delay: .4s; }

  /* De voordeelblokken schuiven licht op bij binnenkomst. */
  .an-klaar .voordeelblok { opacity: 0; }
  .voordeelblokken.an-aan .voordeelblok { animation: an-opschuiven .5s ease-out forwards; }
  .voordeelblokken.an-aan .voordeelblok:nth-child(2) { animation-delay: .1s; }
  .voordeelblokken.an-aan .voordeelblok:nth-child(3) { animation-delay: .2s; }
  .voordeelblokken.an-aan .voordeelblok:nth-child(4) { animation-delay: .3s; }
}

@keyframes an-opkomen {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes an-vervagen-in {
  to { opacity: 1; }
}
@keyframes an-opschuiven {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes an-vink-zetten {
  from { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.15); }
  to   { opacity: 1; transform: none; }
}
@keyframes an-tekenen {
  to { stroke-dashoffset: 0; }
}
@keyframes an-scannen {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: .9; }
  90%  { opacity: .9; }
  100% { opacity: 0; transform: translateY(228px); }
}

/* De SVG-onderdelen schalen vanuit hun eigen midden in plaats van vanuit de
   linkerbovenhoek van de tekening. */
.an-stap, .an-vink { transform-box: fill-box; transform-origin: center; }

/* Wie minder beweging wil, krijgt de volledige tekening meteen en stil. */
@media (prefers-reduced-motion: reduce) {
  .an-klaar .an-stap,
  .an-klaar .an-pijl,
  .an-klaar .an-vink,
  .an-klaar .an-houtrot,
  .an-klaar .an-labels text,
  .an-klaar .an-stops text,
  .an-klaar .an-curvepunt,
  .an-klaar .voordelen li,
  .an-klaar .voordeelblok { opacity: 1 !important; animation: none !important; }
  .an-klaar .an-curve { stroke-dashoffset: 0 !important; animation: none !important; }
  .an-scanlijn { display: none; }
}


/* Op een breed scherm mag er iets meer lucht tussen de secties, maar lang niet
   zoveel als eerst. Mobiel blijft het strakst, want daar telt elke pixel scrollen. */
@media (min-width: 860px) {
  :root { --sectie: 54px; --pad: 24px; }
}


/* De infographics hoeven niet de volle containerbreedte te vullen. Een tekening
   die 1200 pixels breed wordt, wordt ook navenant hoog en kost onnodig veel
   scrollen. Een bovengrens houdt ze leesbaar en de pagina kort. */
.figuur__kader { max-width: 760px; margin-left: auto; margin-right: auto; }
.figuur figcaption { margin-left: auto; margin-right: auto; max-width: 760px; }

/* Secties met een tekening: op een breed scherm staan tekst en tekening naast
   elkaar in plaats van onder elkaar. Dat scheelt flink in paginahoogte zonder dat
   er iets uit hoeft. Op mobiel blijft het gestapeld, want daar is geen ruimte. */
@media (min-width: 900px) {
  .sectie--naast .wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: center;
  }
  .sectie--naast .naast__tekst p:last-child { margin-bottom: 0; }
  .sectie--naast .figuur { margin-top: 0; }
  .sectie--naast .figuur__kader { max-width: none; }
}

/* Op mobiel kost de kaartopmaak van de vakken meer ruimte dan ze oplevert: vier
   randen onder elkaar met veel binnenruimte. Daar wordt het een strakke lijst met
   scheidingslijnen; vanaf tablet komen de kaarten terug. */
@media (max-width: 759px) {
  .vakken { gap: 0; }
  .vak {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--lijn);
    border-radius: 0;
    padding: 12px 0;
  }
  .vak:last-child { border-bottom: 0; }
}

/* Het merkteken van Handsfree Digital in de voet. Dit is de doorlopende lijn uit
   assets/brand/logo-mark.svg van handsfree-digital.nl, ongewijzigd overgenomen.
   Het staat op currentColor, dus het neemt de kleur van de link over en blijft
   leesbaar op het donkere vlak. */
.voet__product { display: block; }
/* Bewust inline en geen inline-flex: met flex valt de punt achter de naam los
   van de zin. Zo loopt de tekst gewoon door en hangt het teken aan de regel. */
.voet__hfd {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.voet__hfd:hover { color: var(--accent-licht); }
.voet__hfd:hover .hfd-mark { color: var(--accent-licht); }
.hfd-mark {
  height: 18px;
  width: auto;
  vertical-align: -.28em;
  margin-right: 7px;
  color: var(--accent-licht);
}

/* De procesketen: aanvraag tot betaald. Op mobiel een verticale lijst met een
   doorlopende lijn ernaast, op breder scherm een horizontale rij. Dit is de
   sectie die in een oogopslag moet vertellen wat het product is, dus de stappen
   staan gelijkwaardig naast elkaar zonder een ervan uit te lichten. */
.keten {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.keten__stap {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}
/* verbindingslijn tussen de bollen, verticaal op mobiel */
.keten__stap::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--lijn);
}
.keten__stap:first-child::before { top: 50%; }
.keten__stap:last-child::before { bottom: 50%; }
.keten__bol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--lijn);
  color: var(--accent);
}
.keten__label { font-weight: 600; font-size: 1rem; }

@media (min-width: 780px) {
  .keten {
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    margin-top: 28px;
  }
  .keten__stap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 9px;
    padding: 0;
  }
  /* lijn nu horizontaal, achter de bollen langs */
  .keten__stap::before {
    left: 0;
    right: 0;
    top: 21px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .keten__stap:first-child::before { left: 50%; top: 21px; }
  .keten__stap:last-child::before { right: 50%; left: 0; }
  .keten__label { font-size: .9rem; }
}

/* Wat er na het versturen gebeurt. Bewust geen tweede keten: die staat al boven
   aan de pagina, en twee ketens achter elkaar lezen als herhaling. Hier dus een
   genummerde lijst met uitleg per stap. */
.daarna {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: daarna;
}
.daarna__stap {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.daarna__stap:last-child { border-bottom: 0; padding-bottom: 0; }
.daarna__stap > svg { width: 24px; height: 24px; color: var(--accent-licht); margin-top: 2px; }
.daarna__stap h3 { margin-bottom: .2em; }
.daarna__stap p { margin: 0; font-size: .95rem; color: var(--licht); }

@media (min-width: 860px) {
  .daarna { grid-template-columns: repeat(2, 1fr); gap: 16px 36px; }
}

/* De hero draagt nu de positionering in tekst: kop, belofte, vier punten en de
   knop. Geen beeld ernaast, want het enige schema dat we hadden ging over de
   fototelling en dat is juist niet meer waar de hero over gaat. Daarom een
   kolom over de volle breedte in plaats van de tweedeling. */
@media (min-width: 980px) {
  .hero__inner { display: block; }
  .hero__sub, .hero .voordelen { max-width: 62ch; }
}

/* Het stappenschema staat nu in een figuur op lichte ondergrond. */
.schema__kader { max-width: 620px; }
.schema__kader svg { color: var(--ink); }
.schema__kader svg rect[fill="var(--petrol)"] { fill: var(--white); }