/* Componenten uit het websiteplan die nog niet bestonden.
   Nummering verwijst naar hoofdstuk 6 van docs/website-plan-tweedeling.md.
   Wat er al was en dus hier NIET staat:
     1 hero          → .hero / .page-hero
     2 bewijsstrook  → .stats-band
     6 featureraster → .features-grid + .feat
     9 prijstabel    → .pricing-grid
    14 slot-CTA      → .cta-section
    15 tijdlijn      → .step-list + .step-item                                */

/* ── 3. PIJNBLOK ──────────────────────────────────────────────────────────
   Drie klachten in klanttaal. Bewust zonder productnaam: hier herkent de
   bezoeker zichzelf, verkopen komt daarna.                                  */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.pain{padding:32px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
/* Het openingsteken zweeft links (float), zodat de tekst er vanzelf naast
   invloeit — geen handmatige top/left-offsets nodig, en het werkt ook nog
   goed als de quote over twee regels loopt. */
.pain__quote{display:flow-root;font-size:1.15rem;line-height:1.5;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pain__quote::before{content:"„";float:left;font-size:2.4rem;line-height:1;color:var(--magenta);margin-right:5px;margin-top:-22px}
.pain__note{margin-top:14px;font-size:.9rem;color:#666;line-height:1.6}
/* Zelfde glyph als de opening, 180° gedraaid — garandeert een identieke
   grootte en gewicht. Een los "”"-teken oogt bij gelijke font-size toch
   kleiner, omdat dat glyph in de meeste lettertypes dunner en hoger
   getekend is dan „. */
/* Sluitteken hoort bij het hele citaatblok, niet bij de losse titelregel —
   daarom aan het eind van de laatste zin (de toelichting), niet na de
   vetgedrukte quote. Zelfde grootte als de opening, uitgelijnd op de
   laatste regel zodat hij niet boven de tekst uit steekt. Zelfde gewicht
   (600) als het openingsteken in .pain__quote: de toelichting is normaal
   gewicht, en een dunner sluitteken oogt ~18% kleiner bij gelijke font-size. */
.pain__note::after{content:"„";display:inline-block;font-size:2.4rem;line-height:0;color:var(--magenta);margin-left:3px;vertical-align:-1.1rem;transform:rotate(180deg);font-weight:600}

/* ── 4. VOOR/NA-CONTRAST ─────────────────────────────────────────────────
   Twee kolommen naast elkaar: hoe het nu gaat versus hoe het wordt.         */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.contrast__col{padding:36px 32px}
.contrast__col--nu{background:#F5F4F0}
.contrast__col--straks{background:var(--ink);color:#fff}
.contrast__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;display:block}
.contrast__col--nu .contrast__label{color:#8A8A8A}
.contrast__col--straks .contrast__label{color:var(--lime)}
.contrast__list{display:flex;flex-direction:column;gap:14px}
.contrast__item{display:flex;gap:12px;align-items:flex-start;font-size:.98rem;line-height:1.55}
.contrast__item::before{flex-shrink:0;font-weight:700;margin-top:1px}
.contrast__col--nu .contrast__item{color:#555}
.contrast__col--nu .contrast__item::before{content:"×";color:#B0B0B0;font-size:1.1rem;line-height:1.3}
.contrast__col--straks .contrast__item{color:rgba(255,255,255,.9)}
.contrast__col--straks .contrast__item::before{content:"→";color:var(--lime)}

/* ── 5. OPLOSSINGSBLOK ───────────────────────────────────────────────────
   Tekst naast beeld. Zet .solution--flip op elk tweede blok, dan wisselt de
   kant en ontstaat het zigzagritme uit het plan.                            */
.solution{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:64px}
.solution:first-of-type{margin-top:44px}
.solution--flip .solution__text{order:2}
.solution--flip .solution__media{order:1}
.solution__text h3{margin-bottom:16px}
.solution__text p{color:#555}
.solution__points{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.solution__media{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#F5F4F0;min-height:280px;display:flex;align-items:center;justify-content:center}
.solution__media img{width:100%;height:auto}

/* ── PRODUCTBEELD ────────────────────────────────────────────────────────
   Nagebouwd schermbeeld in plaats van een bitmap-screenshot: blijft scherp
   op elk scherm, schaalt mee op mobiel en is in het Nederlands.

   LET OP — dit blok volgt bewust de huisstijl van het SaaS-PLATFORM (blauw,
   lichte kaders), niet die van deze website. Het stelt een schermbeeld voor;
   het moet er dus uitzien zoals het product er echt uitziet. Gebruik hier
   dus geen magenta, lime of andere website-accenten.

   De cijfers zijn illustratief en bewust bescheiden gehouden — houd ze zo,
   want uitschieters lezen op een financiële site als een rendementsbelofte. */
.uidemo{width:100%;background:#fff;padding:22px;font-size:14px;text-align:left}
.uidemo__head{margin-bottom:18px}
.uidemo__title{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink)}
.uidemo__sub{font-size:.8rem;color:#7A8598;margin-top:2px}
.uidemo__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.uidemo__kpi{background:#F7F9FC;border:1px solid #E6EAF0;border-radius:10px;padding:12px 13px}
.uidemo__kpi-label{display:flex;align-items:center;gap:6px;font-size:.7rem;color:#7A8598;font-weight:500}
.uidemo__kpi-label::before{content:"";width:14px;height:14px;border-radius:50%;background:#E6EAF0;flex:0 0 auto}
.uidemo__kpi-value{font-family:var(--ff-display);font-weight:700;font-size:1.12rem;letter-spacing:-.03em;color:var(--ink);margin-top:7px;white-space:nowrap}
.uidemo__kpi-delta{font-size:.7rem;font-weight:600;color:#16A34A;margin-top:5px;white-space:nowrap}
.uidemo__kpi-note{font-size:.68rem;color:#9AA4B4;margin-top:5px}
.uidemo__panel{margin-top:12px;border:1px solid #E6EAF0;border-radius:10px;padding:14px 15px 8px}
.uidemo__panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.uidemo__pill{font-size:.66rem;font-weight:600;color:#5A6478;border:1px solid #E6EAF0;border-radius:99px;padding:3px 10px;white-space:nowrap}
.uidemo__chartwrap{position:relative;margin-top:10px}
.uidemo__chart{display:block;width:100%;height:auto}
.uidemo__axis{font-size:8.5px;fill:#9AA4B4;font-family:var(--ff-display)}
.uidemo__dot{fill:#2563EB;transition:opacity .12s}
.uidemo__cross{stroke:#C7CDD6;stroke-width:1;opacity:0;transition:opacity .12s}
.uidemo__tip{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .12s;
  background:#fff;border:1px solid #E6EAF0;border-radius:9px;box-shadow:0 8px 24px rgba(16,24,40,.14);
  padding:9px 12px;white-space:nowrap;transform:translate(-50%,-100%);z-index:2}
.uidemo__tip.is-visible{opacity:1}
.uidemo__tip-date{font-size:.72rem;font-weight:600;color:var(--ink)}
.uidemo__tip-row{font-size:.72rem;margin-top:3px;color:#2563EB}
.uidemo__tip-row--bezit{color:#16A34A}
.uidemo__tip-row--liquide{color:#D97706}
.uidemo__tip-row--schuld{color:#EF4444}
.uidemo__tip-row--netto{color:#4F46E5}

/* Scenariokaarten: rijkere KPI-kaart met onderliggende posten. */
.uidemo__kpi-grid{margin-top:11px;display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}
.uidemo__cell-label{font-size:.63rem;color:#9AA4B4}
.uidemo__cell-val{font-size:.7rem;color:#5A6478;font-weight:500;margin-top:1px;white-space:nowrap}
.uidemo__kpi-tax{margin-top:10px;padding-top:9px;border-top:1px solid #E6EAF0;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.uidemo__kpi-tax .uidemo__cell-val{margin-top:0}
.uidemo__legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.uidemo__legend span{display:flex;align-items:center;gap:5px;font-size:.66rem;color:#7A8598}
.uidemo__legend i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}

/* Assistent en AI-signalen (ai.html): zelfde platformstijl als de rest van .uidemo. */
.uichat__chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.uichat{display:flex;flex-direction:column;gap:10px}
.uichat__q{align-self:flex-end;max-width:82%;background:#2563EB;color:#fff;border-radius:12px 12px 3px 12px;padding:10px 13px;font-size:.78rem;line-height:1.45}
.uichat__a{align-self:flex-start;max-width:92%;background:#F7F9FC;border:1px solid #E6EAF0;border-radius:12px 12px 12px 3px;padding:11px 13px;font-size:.78rem;line-height:1.55;color:#3D4759}
.uichat__bron{margin-top:8px;font-size:.66rem;color:#9AA4B4}
.uichat__signaal{border:1px solid #E6EAF0;border-radius:10px;padding:13px 15px;margin-top:10px}
.uichat__signaal p{font-size:.74rem;line-height:1.5;color:#5A6478;margin:7px 0 11px}
.uichat__signaalkop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.uichat__hoog{color:#B42318;border-color:#F4C7C3;background:#FEF3F2}

/* Entiteitkaart met gezinsleden en eigendomsverhoudingen. */
.uidemo__topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.uidemo__ico{width:32px;height:32px;border-radius:9px;background:#EFF4FF;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex:0 0 auto}
.uidemo__badge{font-size:.62rem;font-weight:600;color:#2563EB;background:#EFF4FF;border-radius:99px;padding:3px 9px}
.uidemo__acties{margin-left:auto;display:flex;gap:7px}
.uidemo__btn{font-size:.66rem;font-weight:600;border:1px solid #E6EAF0;border-radius:7px;padding:6px 10px;color:#5A6478;background:#fff;white-space:nowrap}
.uidemo__btn--prim{background:#2563EB;border-color:#2563EB;color:#fff}
.uidemo__wide{border:1px solid #E6EAF0;border-radius:10px;padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.uidemo__pct{font-size:.92rem;font-weight:700;color:#16A34A;white-space:nowrap}
.uidemo__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.uidemo__metrics{display:flex;gap:14px;margin-top:13px}
.uidemo__metric{flex:1 1 auto;min-width:0}
.uidemo__metric-val{font-family:var(--ff-display);font-weight:700;font-size:.92rem;letter-spacing:-.02em;white-space:nowrap}
.uidemo__metric-label{font-size:.63rem;color:#9AA4B4;margin-top:3px}
.uidemo__table{width:100%;border-collapse:collapse;margin-top:11px;font-size:.68rem}
.uidemo__table th{text-align:left;font-weight:500;color:#9AA4B4;font-size:.62rem;padding:0 8px 7px 0;border-bottom:1px solid #E6EAF0;white-space:nowrap}
.uidemo__table td{padding:9px 8px 9px 0;border-bottom:1px solid #F2F4F7;color:#5A6478;white-space:nowrap}
.uidemo__table tr:last-child td{border-bottom:0}
.uidemo__persoon{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
/* Avatar toont initialen zolang er geen foto is. */
.uidemo__avatar{width:21px;height:21px;border-radius:50%;background:#DCE4F2;color:#3D5480;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-size:.5rem;font-weight:700;letter-spacing:-.02em}
/* Met foto: de bronbeelden zijn vierkant met het gezicht in het bovenste
   deel. Zonder inzoomen zou de hele scène in een cirkel van 21px worden
   geperst; background-size vergroot en -position legt het gezicht midden. */
.uidemo__avatar--foto{background-size:170%;background-position:50% 18%;background-repeat:no-repeat;text-indent:-999em}
@media(max-width:600px){
  .uidemo__cols{grid-template-columns:1fr}
  .uidemo__acties{margin-left:0;width:100%}
  .uidemo__metrics{gap:8px}
  /* Actiekolom valt weg op telefoonformaat; die is hier toch niet klikbaar.
     Alleen voor tabellen die zo'n kolom hebben — bij de cliënten- en
     toegangstabellen staat in de laatste kolom juist inhoud. */
  .uidemo__table--acties th:last-child,.uidemo__table--acties td:last-child{display:none}
  /* Zonder afbreken duwt de kop "Portefeuillewaarde" de tabel buiten de
     kaart, waardoor de laatste kolom wegvalt achter de overflow. */
  /* Brede tabellen (5 kolommen) passen op telefoonformaat niet binnen de
     kaart. Horizontaal scrollen binnen het paneel houdt alle kolommen in
     beeld; kolommen verbergen zou hier juist cijfers wegnemen. */
  .uidemo__panel{overflow-x:auto}
  .uidemo__table{font-size:.63rem}
  .uidemo__table th{white-space:normal;padding-right:6px;font-size:.58rem}
  .uidemo__table td{padding-right:6px}
  .uidemo__avatar{width:17px;height:17px}
  .uidemo__persoon{gap:6px}
}
@media(max-width:600px){
  .uidemo{padding:16px}
  .uidemo__kpis{grid-template-columns:1fr}
  .uidemo__kpi-value{font-size:1.05rem}
  /* De SVG schaalt uniform mee, waardoor de as-labels op telefoonformaat
     rond de 4px uitkomen. Onleesbaar klein is slechter dan weglaten: de
     grafiek werkt hier prima als sparkline. */
  .uidemo__axis{display:none}
}

/* ── 7. KOPPELINGENRASTER ────────────────────────────────────────────────
   Zoekveld plus logo's. Het aantal is hier het bewijs, dus dat staat groot. */
.sources__bar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:32px}
.sources__search{flex:1;min-width:260px;padding:14px 18px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:1rem;background:#fff}
.sources__search:focus{outline:2px solid var(--magenta);outline-offset:2px}
.sources__count{font-size:.9rem;color:#666;white-space:nowrap}
.sources{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:24px}
.source{display:flex;align-items:center;gap:10px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);font-size:.92rem}
.source[hidden]{display:none}
.source__dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex-shrink:0}
.source--handmatig .source__dot{background:var(--sand)}
.sources__empty{padding:28px;text-align:center;color:#666;font-size:.95rem}

/* ── LOGOSTROOK ──────────────────────────────────────────────────────────
   Uniforme tegels met de bekendste aangesloten instellingen. Nu als
   woordmerk in één consistente stijl; staat er later een echt logo, zet
   dan een <img> in de tegel — die schaalt vanzelf mee en vervangt de tekst.
   Let op: banknamen en -logo's zijn handelsmerken van hun eigenaren. De
   voetnoot eronder hoort te blijven staan. */
.logostrook{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px}
.logostrook__item{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:64px;padding:12px 10px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-family:var(--ff-display);font-weight:700;
  font-size:.82rem;letter-spacing:-.02em;color:#4A5260;line-height:1.25;
  transition:border-color .2s,color .2s}
.logostrook__item:hover{border-color:#C4CBD5;color:var(--ink)}
/* Vaste maximale breedte én hoogte: elk logo krijgt hetzelfde kader
   (140 × 32px) en past zich daarbinnen naar zijn eigen verhouding. Zonder
   de breedtegrens trekt een logo met een brede, platte verhouding (zoals
   DEGIRO) de volle tegelbreedte, terwijl een vierkant beeldmerk juist klein
   oogt — met deze grens vullen ze allebei hetzelfde kader zo goed mogelijk. */
.logostrook__item img{max-width:140px;max-height:32px;width:auto;height:auto;display:block}
/* Staande logo's (beeldmerk bóven het woordmerk) worden bij een maximum van
   32px onleesbaar smal. Die mogen de volle tegelhoogte gebruiken. Let op de
   selector: hij moet specifieker zijn dan de regel hierboven. */
.logostrook__item img.logostrook__staand{max-height:46px}
/* Binance levert icoon + woordmerk compact naast elkaar (bredere marge
   rond het beeld dan de andere logo's); op 32px oogt dat merkbaar kleiner
   dan bijvoorbeeld ABN AMRO. Iets meer hoogte trekt dat gelijk. */
.logostrook__item img.logostrook__breder{max-height:38px}
/* BUX levert zijn merk als vierkant beeldmerk (kleurvlak + woordmerk erin),
   niet als vrijstaand logo op transparante ondergrond zoals de andere
   instellingen. Op 32px hoogte oogt dat te klein tussen de bredere
   woordmerken; iets groter en met eigen radius sluit het beter aan. */
.logostrook__item img.logostrook__vierkant{max-height:40px;border-radius:8px}
.logostrook__noot{margin-top:18px;font-size:.82rem;color:#777;text-align:center;line-height:1.6}
@media(max-width:900px){.logostrook{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.logostrook{grid-template-columns:repeat(2,1fr);gap:10px}
  .logostrook__item{min-height:56px;font-size:.76rem}}

/* Getal dat oploopt zodra het in beeld komt. De vaste breedte voorkomt dat
   de kop verspringt terwijl het aantal cijfers verandert. */
.teller{display:inline-block;min-width:3.9ch;text-align:left;font-variant-numeric:tabular-nums}

/* ── 8. SCENARIO-BEELD ───────────────────────────────────────────────────
   In v1 een afbeelding, in v1.1 een video. Zelfde kader en zelfde plek, dus
   de vervanging is straks een bestandsruil.                                 */
.figure{margin-top:44px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff}
.figure__media{position:relative;background:#F5F4F0;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.figure__media img,.figure__media video{width:100%;height:100%;object-fit:cover;display:block}
.figure__caption{padding:20px 28px;font-size:.95rem;color:#555;line-height:1.6;border-top:1px solid var(--line)}
.figure__caption strong{color:var(--ink)}

/* ── 10. VERGELIJKINGSTABEL ──────────────────────────────────────────────
   Vestrix naast het spreadsheet en de adviseur die een percentage rekent.   */
.compare{width:100%;border-collapse:collapse;margin-top:44px;font-size:.95rem}
.compare th,.compare td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.compare thead th{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#666}
.compare tbody th{font-weight:600;color:var(--ink)}
.compare__ons{background:var(--lime-soft)}
.compare thead .compare__ons{color:var(--ink)}
.compare td[data-waarde="ja"]::before{content:"✓ ";color:var(--teal);font-weight:700}
.compare td[data-waarde="nee"]::before{content:"× ";color:#B0B0B0;font-weight:700}
.compare-wrap{overflow-x:auto}

/* ── 11. KLANTCITAAT ─────────────────────────────────────────────────────
   Plek blijft leeg tot er een échte klant is. Liever geen citaat dan een
   verzonnen citaat — zie de concurrentieanalyse over placeholder-logo's.    */
.quote-card{margin-top:44px;padding:40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.quote-card__avatar{width:72px;height:72px;border-radius:50%;background:var(--lime-soft);border:2px solid var(--lime);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem}
.quote-card__text{font-size:1.15rem;line-height:1.6;font-weight:500;letter-spacing:-.01em}
.quote-card__attr{margin-top:14px;font-size:.88rem;color:#666}

/* ── 12. BEVEILIGINGSBLOK ────────────────────────────────────────────────
   Concreet zijn is hier het hele punt: datalocatie en partijnaam verslaan
   "bank-level security".                                                    */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:44px}
/* Tussenbreedtes: twee kolommen (4 = 2 + 2), een oneven laatste gecentreerd. */
@media(max-width:1024px) and (min-width:561px){
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 10px)}
}
@media(max-width:560px){.trust{grid-template-columns:1fr}}
.trust__item{padding:26px 24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.trust__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);display:block;margin-bottom:10px}
.trust__value{font-weight:700;font-size:1.05rem;margin-bottom:6px}
.trust__note{font-size:.88rem;color:#666;line-height:1.6}

/* ── 13. FAQ-ACCORDEON ───────────────────────────────────────────────────
   Met <details>/<summary>: werkt zonder JavaScript en is toegankelijk.      */
.faq{margin-top:44px;border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{padding:22px 44px 22px 0;font-weight:600;font-size:1.05rem;cursor:pointer;list-style:none;position:relative}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--magenta);line-height:1}
.faq__item[open] summary::after{content:"–"}
.faq__item summary:hover{color:var(--magenta)}
.faq__item summary:focus-visible{outline:2px solid var(--magenta);outline-offset:4px}
.faq__answer{padding:0 44px 24px 0;color:#555;line-height:1.7;font-size:.98rem}

/* ── NOG IN TE VULLEN ────────────────────────────────────────────────────
   Markeert plekken die wachten op cijfers, prijzen of beeld. Valt bewust op:
   dit hoort nooit op de live site te staan en de preflight blokkeert erop.  */
.todo{display:block;padding:14px 18px;margin:12px 0;background:repeating-linear-gradient(45deg,#FFF8E1,#FFF8E1 10px,#FFF3CD 10px,#FFF3CD 20px);border:1px dashed #C9A227;border-radius:var(--radius-sm);font-size:.88rem;color:#7A5C00;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.todo::before{content:"NOG IN TE VULLEN — ";font-weight:700}

/* ── 10b. VERGELIJKINGSTABEL (.vgl) ──────────────────────────────────────
   Vestrix naast twee alternatieven. Zwarte Vestrix-kolom als blikvanger, grote
   contourcijfers per rij, en een statuspunt per cel (vinkje, half, leeg). Bij een
   rij licht de regel op en kleuren cijfer en rand magenta. Echte <table>: leesbaar
   voor zoekmachines en de vertaling. Op smal scherm schuift de tabel zijwaarts, met
   de eerste kolom vast.  */
.vgl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.vgl{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;font-size:.95rem;line-height:1.5}
.vgl th,.vgl td{padding:20px 24px;text-align:left;vertical-align:top;background:#fff;border-bottom:1px solid var(--line);transition:background .2s ease,box-shadow .2s ease,color .2s ease}
.vgl thead th{background:transparent;border:0;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#777;vertical-align:bottom;padding-bottom:16px}
.vgl thead th.vgl__v{background:var(--ink);color:#fff;border-radius:var(--radius) var(--radius) 0 0;font-size:.86rem;padding-top:26px}
.vgl thead th.vgl__v::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);margin-left:10px;vertical-align:1px}
.vgl tbody th{font-weight:600;color:var(--ink);width:24%;position:sticky;left:0;z-index:1}
.vgl__crit{display:flex;align-items:center;gap:14px}
.vgl__n{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.2px #C9C7BF;min-width:2ch;transition:color .25s,-webkit-text-stroke-color .25s}
.vgl td{color:#6b6b6b;width:25%}
.vgl td.vgl__v{background:var(--ink);color:#fff;font-weight:500;border-bottom-color:rgba(255,255,255,.1)}
.vgl tbody tr:first-child th{border-top:1px solid var(--line);border-top-left-radius:var(--radius)}
.vgl tbody tr:first-child td{border-top:1px solid var(--line)}
.vgl tbody tr:first-child td:last-child{border-top-right-radius:var(--radius)}
.vgl tbody tr:first-child td.vgl__v{border-top:0}
.vgl tbody tr:last-child th{border-bottom-left-radius:var(--radius)}
.vgl tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}
.vgl tbody tr:last-child td.vgl__v{border-bottom:0;border-radius:0 0 var(--radius) var(--radius)}
.vgl__s{display:inline-block;width:16px;height:16px;margin-right:10px;border-radius:50%;border:1.5px solid #B9B7AF;vertical-align:-3px}
.vgl__s--part{background:linear-gradient(90deg,#B9B7AF 50%,transparent 50%)}
.vgl__s--ja{border-color:var(--lime);background:var(--lime);color:var(--ink);font-style:normal;font-size:.62rem;font-weight:800;line-height:13px;text-align:center}
.vgl__s--ja::before{content:"\2713"}
@media(hover:hover){
  .vgl tbody tr:hover th,.vgl tbody tr:hover td:not(.vgl__v){background:#F5F6D8}
  .vgl tbody tr:hover th{box-shadow:inset 4px 0 0 var(--magenta)}
  .vgl tbody tr:hover td:not(.vgl__v){color:var(--ink)}
  .vgl tbody tr:hover td.vgl__v{background:#1d1d1d}
  .vgl tbody tr:hover .vgl__n{color:var(--magenta);-webkit-text-stroke-color:var(--magenta)}
}
.vgl .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vgl-noot{margin-top:18px;font-size:.84rem;color:#777;max-width:780px}
@media(max-width:768px){
  .vgl{font-size:.88rem}
  .vgl th,.vgl td{padding:14px}
  .vgl tbody th{width:126px;min-width:126px;font-size:.78rem;hyphens:auto;overflow-wrap:anywhere;padding-left:12px;padding-right:10px;box-shadow:1px 0 0 var(--line)}
  .vgl__crit{flex-direction:column;align-items:flex-start;gap:4px}
  .vgl__n{font-size:1.1rem}
  .vgl{min-width:0;width:660px;table-layout:fixed}
  .vgl thead th:first-child{width:126px}
  .vgl thead th.vgl__v{width:204px}
}
@media(prefers-reduced-motion:reduce){.vgl th,.vgl td,.vgl__n{transition:none}}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────*/
@media(max-width:1024px){
  .pains{grid-template-columns:1fr}
  .solution{grid-template-columns:1fr;gap:32px}
  .solution--flip .solution__text,.solution--flip .solution__media{order:initial}
}
@media(max-width:768px){
  .contrast{grid-template-columns:1fr}
  .quote-card{grid-template-columns:1fr;gap:20px;padding:28px}
  .figure__caption{padding:16px 20px}
}

/* ── BEWIJSSTROOK (autoriteit) ───────────────────────────────────────────
   Donkere strook direct onder de hero. Toont controleerbare feiten in
   plaats van cijfers: waarom u ons uw bankgegevens kunt toevertrouwen. */
.proof-band{background:var(--ink);color:#fff;padding:56px 28px}
.proof-band__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.proof__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lime);display:block;margin-bottom:10px}
.proof__value{font-weight:700;font-size:1.02rem;line-height:1.35;color:#fff}
.proof__note{font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.6;margin-top:8px}

/* ── WEGGEEFBLOK (wederkerigheid) ────────────────────────────────────────
   Drie momenten waarop we kennis weggeven. Oplopend in wat het ons kost.
   Vraag nooit een e-mailadres vóór de waarde geleverd is. */
.gift{position:relative}
.gift__cost{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta);margin-bottom:14px}
.gift__ask{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:.88rem;color:#666}
.gift__ask strong{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#999;margin-bottom:6px;font-weight:700}

/* ── MENSEN (liking) ─────────────────────────────────────────────────────*/
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;margin-top:44px}
.person{text-align:center}
.person__photo{width:120px;height:120px;border-radius:50%;margin:0 auto 18px;background:var(--offwhite);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}
.person__photo img{width:100%;height:100%;object-fit:cover}
.person__name{font-weight:700;font-size:1.05rem}
.person__role{font-size:.88rem;color:#666;margin-top:4px}

/* ── INSTROOM (schaarste) ────────────────────────────────────────────────
   De beperking komt voort uit onze eigen inspanning, niet uit onrijpheid
   van het product. Nooit formuleren als pilot, beta of proefperiode. */
.intake{background:#fff;border:1px solid var(--line);border-left:3px solid var(--magenta);border-radius:var(--radius);padding:44px}
.intake__lead{font-size:1.12rem;line-height:1.65;color:var(--ink)}
.intake__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.intake__label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--magenta);display:block;margin-bottom:8px}
.intake__value{font-weight:700;font-size:1.02rem;line-height:1.4}
.intake__note{font-size:.88rem;color:#666;line-height:1.6;margin-top:6px}

@media(max-width:1024px){
  .proof-band__inner{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media(max-width:640px){
  .proof-band__inner{grid-template-columns:1fr}
  .intake{padding:28px}
}

/* ── VRAAGROUTE (lage drempel) ───────────────────────────────────────────
   Route 2 op de contactpagina: voor wie een vraag heeft maar nog geen
   demonstratie wil. Bewust lichter dan het demoformulier ernaast — even
   zwaar maken kost u de mensen die wél klaar waren voor de demo. */
.ask{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.ask .form-group{margin-bottom:16px}

/* Stille tweede uitweg onder een primaire knop. Tekstlink, geen knop:
   vindbaar voor wie hem nodig heeft, niet afleidend voor wie dat niet is. */
.cta-alt{margin-top:18px;font-size:.9rem;color:#666}
.cta-alt a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cta-alt a:hover{color:var(--magenta)}
.cta-section .cta-alt{color:rgba(255,255,255,.65)}
.cta-section .cta-alt a{color:rgba(255,255,255,.85)}
.cta-section .cta-alt a:hover{color:#fff}

/* ── STAPPEN ─────────────────────────────────────────────────────────────
   "Wat er gebeurt nadat u verstuurt" op /demonstratie. Onzekerheid over
   het vervolg is de grootste reden dat een formulier leeg blijft. */
.steps{margin-top:20px;display:flex;flex-direction:column;gap:22px}
.step{display:flex;gap:16px;align-items:flex-start}
.step__n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--magenta);color:#fff;font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:2px}
.step__title{font-weight:700;font-size:.98rem;line-height:1.35}
.step__note{font-size:.88rem;color:#666;line-height:1.6;margin-top:4px}

/* ── VRAAGLIJST (checklist-pagina) ───────────────────────────────────────
   Bewust géén accordeon: de lijst moet volledig leesbaar en printbaar zijn.
   Dit is het cadeau — inklappen maakt er weer een tolpoort van. */
.vraaggroep{margin-top:64px}
.vraaggroep__kop{display:flex;align-items:baseline;gap:14px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.vraaggroep__nr{font-size:.82rem;font-weight:700;letter-spacing:.12em;color:var(--magenta)}
.vraaggroep__titel{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.vraag{padding:28px 0;border-bottom:1px solid var(--line)}
.vraag__tekst{font-size:1.12rem;font-weight:600;line-height:1.45;color:var(--ink)}
.vraag__waarom{font-size:.97rem;color:#555;line-height:1.7;margin-top:10px}
.vraag__signaal{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:.9rem;color:#666;line-height:1.6}
.vraag__signaal::before{content:"⚑";color:var(--magenta);flex:0 0 auto;font-size:.95rem;line-height:1.5}
.vraag__signaal strong{color:var(--ink)}

/* Slotblok waarin we onze eigen zwakke plekken benoemen. Wie vooraf zijn
   grenzen noemt, wordt geloofd over de rest. Nooit weglaten. */
.eerlijk{background:var(--ink);color:#fff;border-radius:var(--radius);padding:48px}
.eerlijk h3{color:#fff}
.eerlijk p{color:rgba(255,255,255,.75)}
.eerlijk .label{color:var(--lime)}

@media(max-width:640px){
  .eerlijk{padding:28px}
  .vraaggroep{margin-top:44px}
  .vraaggroep__titel{font-size:1.25rem}
}

/* ── OVERZICHTSSCAN ──────────────────────────────────────────────────────
   Eén vraag per scherm: elk antwoord is een kleine "ja" en de volgende
   stap voelt daardoor logischer dan een formulier met acht vragen ineens.
   De uitkomst staat volledig op het scherm — nooit afknippen achter een
   e-mailadres. Zie ook de toelichting boven in src/scripts/40-scan.js. */
.scan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:48px;min-height:440px;display:flex;flex-direction:column}
.scan__balkbak{height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.scan__balk{height:100%;width:0;background:var(--magenta);transition:width .35s ease}
.scan__meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;margin-bottom:32px}
.scan__voortgang{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#999}
.scan__terug{background:none;border:0;padding:0;font-size:.88rem;color:#666;cursor:pointer;font-family:var(--ff-body)}
.scan__terug:hover{color:var(--magenta)}
.scan__vraag{font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.2;letter-spacing:-.02em}
.scan__hulp{font-size:.94rem;color:#666;margin-top:10px}
.scan__opties{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.scan__optie{text-align:left;padding:18px 22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#FBFBF9;font-family:var(--ff-body);font-size:1rem;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.scan__optie:hover{border-color:var(--magenta);background:#fff;transform:translateX(3px)}
.scan__optie:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.scan__optie.is-gekozen{border-color:var(--magenta);background:#fff;font-weight:600;box-shadow:inset 3px 0 0 var(--magenta)}
.scan__verder{margin-top:24px;align-self:flex-start}

.scan__kop{margin-top:12px}
.scan__inleiding{margin-top:14px;font-size:.95rem;color:#666}
.scan__cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;margin-top:36px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scan__getal{font-size:clamp(1.9rem,3.4vw,2.8rem);font-weight:800;letter-spacing:-.04em;color:var(--magenta);line-height:1.05}
.scan__bijschrift{font-size:.9rem;color:#666;margin-top:8px;line-height:1.5}
.scan__subkop{margin-top:36px;font-size:1.15rem}
.scan__vlekken{margin-top:16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.scan__vlekken li{padding-left:24px;position:relative;font-size:.97rem;color:#555;line-height:1.65}
.scan__vlekken li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.scan__duiding{margin-top:20px;font-size:1rem;line-height:1.7;color:#444;border-left:3px solid var(--line);padding-left:20px}
.scan__vestrix{margin-top:40px;padding:32px;background:var(--offwhite);border-radius:var(--radius)}
.scan__vestrix h3{font-size:1.15rem}
.scan__vestrix p{font-size:.97rem;margin-top:12px}
.scan__eerlijk{color:#666;font-size:.92rem!important;font-style:italic}
.scan__acties{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* Uitkomst van de rekentest voor kantoren als beeld (42-mfo-scan.js):
   donut met legenda, de winstkaart met balken, tegels en een uitklapper. */
.scan__verdeling{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;margin-top:32px;padding:32px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.scan__donut{width:200px;height:200px;display:block}
.scan__donut circle{transition:opacity .2s}
.scan__donut:hover circle{opacity:.4}
.scan__donut circle:hover{opacity:1}
.scan__donut-getal{font-family:var(--ff-display);font-size:30px;font-weight:800;letter-spacing:-.04em;fill:var(--ink)}
.scan__donut-eenheid{font-size:12px;fill:#666}
.scan__legenda{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.scan__legenda li{display:grid;grid-template-columns:12px 1fr auto;gap:12px;align-items:center;font-size:.94rem;color:#444;line-height:1.4}
.scan__legenda strong{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.scan__stip{width:12px;height:12px;border-radius:3px}
.scan__kern{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:#666}
.scan__kern strong{color:var(--ink)}
.scan__opties--rij{flex-direction:row;flex-wrap:wrap;margin-top:18px}
.scan__opties--rij .scan__optie{flex:1 1 140px;text-align:center;padding:14px 16px}
.scan__opties--rij .scan__optie:hover{transform:translateY(-2px)}
.scan__opties--rij .scan__optie.is-gekozen{box-shadow:inset 0 -3px 0 var(--magenta)}
.scan__winst{margin-top:22px;padding:32px;background:var(--ink);border-radius:var(--radius);color:#fff}
.scan__winst-kop{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-end}
.scan__winst-getal{font-size:clamp(2.6rem,6vw,3.8rem);font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--lime)}
.scan__winst-sub{margin-top:10px;font-size:.94rem;color:rgba(255,255,255,.72);max-width:300px;line-height:1.5}
.scan__winst-zij{display:flex;gap:28px;flex-wrap:wrap}
.scan__winst-zij div{display:flex;flex-direction:column}
.scan__winst-zij strong{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:#fff}
.scan__winst-zij span{font-size:.82rem;color:rgba(255,255,255,.65);margin-top:4px}
.scan__balken{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.scan__balkrij{display:grid;grid-template-columns:96px 1fr 84px;gap:14px;align-items:center;font-size:.86rem;color:rgba(255,255,255,.72)}
.scan__balkrij strong{color:#fff;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scan__balkspoor{height:14px;background:rgba(255,255,255,.08);border-radius:0 4px 4px 0}
.scan__balkvul{height:100%;border-radius:0 4px 4px 0;transition:width .5s ease}
.scan__balkvul.is-nu{background:rgba(255,255,255,.35)}
.scan__balkvul.is-straks{background:var(--lime)}
.scan__tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:20px}
.scan__tegel{padding:22px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;display:flex;flex-direction:column}
.scan__tegel-kop{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#777}
.scan__tegel-kop svg{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--lime);fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.scan__tegel-getal{margin-top:16px;font-size:1.75rem;font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1.1}
.scan__tegel-tekst{margin-top:6px;font-size:.9rem;color:#444;line-height:1.45}
.scan__tegel-aanname{margin-top:auto;padding-top:12px;font-size:.78rem;color:#888;line-height:1.45}
.scan__uitleg{margin-top:20px;font-size:.92rem;color:#555;line-height:1.65}
.scan__uitleg summary{cursor:pointer;font-weight:600;color:var(--ink)}
.scan__uitleg summary:hover{color:var(--magenta)}
.scan__uitleg p{margin-top:10px}
.scan__vlekken--kaarten li{padding:18px 20px 18px 46px;background:var(--offwhite);border-radius:var(--radius-sm)}
.scan__vlekken--kaarten li::before{left:20px;top:1.55em}

@media(max-width:640px){
  .scan{padding:28px 22px}
  .scan__optie{padding:16px 18px}
  .scan__vestrix{padding:24px}
  .scan__verdeling{grid-template-columns:1fr;justify-items:center;gap:24px}
  .scan__verdeling>div{width:100%}
  .scan__winst{padding:24px}
  .scan__balkrij{grid-template-columns:78px 1fr 70px;gap:10px}
}

/* Vaste driedeling per punt: vraag → antwoord vandaag → wat eraan gebeurt.
   De derde kolom is verplicht. Een punt zonder tegenzet is geen eerlijkheid
   maar een zwakte, en leest ook zo. */
.eerlijk__lijst{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.eerlijk__punt{padding:24px;background:rgba(255,255,255,.05);border-radius:var(--radius-sm);border-left:2px solid var(--lime)}
.eerlijk__vraag{font-weight:700;font-size:1.02rem;line-height:1.45;color:#fff}
.eerlijk__nu{font-size:.95rem;line-height:1.65;color:rgba(255,255,255,.72);margin-top:10px}
.eerlijk__doen{font-size:.95rem;line-height:1.65;color:#fff;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
.eerlijk__doen::before{content:"Wat wij daaraan doen — ";font-weight:700;color:var(--lime)}
.eerlijk__slot{margin-top:28px;font-size:.95rem;color:rgba(255,255,255,.6)}
.eerlijk .todo{background:rgba(255,248,225,.14);border-color:rgba(201,162,39,.6);color:#F0DFA8}
.eerlijk .todo::before{color:#FFE9A3}

/* ── WOORDENWIEL ─────────────────────────────────────────────────────────
   Kop links, een verticaal meelopende woordenlijst rechts. Het woord dat
   in het midden staat licht op in kleurverloop; de rest vervaagt. Het
   scrollen van de bezoeker stuurt de lijst — geen automatische carrousel,
   want die leest als reclame en is niet te volgen in eigen tempo.

   De opaciteit staat in CSS bewust op 1: zonder JavaScript blijft de hele
   lijst gewoon leesbaar. Het script dimt pas ná het laden.                  */
.woordenwiel{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.woordenwiel__kop h2{max-width:9em}
.woordenwiel__kop p{margin-top:18px;max-width:26em}
.woordenwiel__venster{
  position:relative;height:392px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%,#000 76%,transparent 100%);
}
.woordenwiel__spoor{display:flex;flex-direction:column;gap:26px;will-change:transform}
.woordenwiel__woord{
  position:relative;font-family:var(--ff-display);
  font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.2;font-weight:700;letter-spacing:-.025em;
  color:var(--ink);transition:opacity .2s linear;
}
/* Tweede exemplaar van hetzelfde woord, exact eroverheen, met het verloop
   in de tekst gemaskeerd. Alleen zo blijft het woord selecteerbaar én kan
   het verloop los in- en uitvloeien. */
.woordenwiel__woord span{
  position:absolute;left:0;top:0;
  background:linear-gradient(92deg,var(--magenta) 0%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  opacity:0;transition:opacity .2s linear;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .woordenwiel__spoor{transform:none!important}
}
@media(max-width:900px){
  .woordenwiel{grid-template-columns:1fr;gap:28px}
  .woordenwiel__venster{height:300px}
  .woordenwiel__spoor{gap:18px}
}

/* ── KAARTSTAPEL ─────────────────────────────────────────────────────────
   Brede kaarten die tijdens het scrollen op elkaar schuiven: elke kaart
   blijft plakken en de volgende legt zich eroverheen. Eén onderwerp tegelijk
   in beeld, zonder dat de bezoeker iets hoeft aan te klikken.

   De schaduw aan de bovenkant is functioneel, niet decoratief: zonder die
   rand verdwijnt de naad tussen twee witte kaarten op een witte pagina.

   Op mobiel vervalt het plakken (sticky met een lange kaart op een klein
   scherm sluit de onderkant van de kaart af). Daar is het een gewone lijst. */
.kaartstapel{position:relative;max-width:1000px;margin:56px auto 0}
.kaartstapel__laag{position:sticky;top:96px;padding-top:22px}
.kaartstapel__laag:nth-child(2){top:114px}
.kaartstapel__laag:nth-child(3){top:132px}
.kaartstapel__laag:nth-child(4){top:150px}
.kstapel{
  display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px;
  min-height:376px;box-shadow:0 -12px 40px rgba(13,13,13,.06);
}
.kstapel h3{margin-bottom:12px}
.kstapel__tekst p{font-size:1rem;color:#555;line-height:1.65}
.kstapel__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.kstapel__tag{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;color:var(--ink);background:#F5F4F0;border-radius:99px;padding:6px 14px;white-space:nowrap}
.kstapel__tag svg{flex:0 0 auto;color:var(--magenta)}
/* Wat wij ervoor terugvragen staat op de kaart zelf. Wie dat pas na de klik
   leest, klikt niet. */
.kstapel__vraag{margin-top:18px;font-size:.88rem;color:#666;line-height:1.6}
.kstapel__vraag strong{color:var(--ink)}
.kstapel__actie{margin-top:22px}
.kstapel__beeld{background:#F7F9FC;border:1px solid #E6EAF0;border-radius:16px;padding:18px;min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:10px}

/* Kleine nagebouwde beelden in de kaart. Zelfde afspraak als bij .uidemo:
   dit stelt het product of het document voor, dus platformblauw en geen
   magenta of lime uit de website-huisstijl. */
.minipaneel{background:#fff;border:1px solid #E6EAF0;border-radius:10px;padding:14px 15px}
.minipaneel__kop{font-family:var(--ff-display);font-size:.76rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.minipaneel__sub{font-size:.64rem;color:#7A8598;margin-top:3px}
.minirij{display:flex;align-items:center;gap:9px;margin-top:11px}
.minivink{width:16px;height:16px;border-radius:50%;background:#EAF6EE;color:#16A34A;display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;flex:0 0 auto}
.minivink--leeg{background:#F1F3F7;color:#C7CDD6}
.minivink--let{background:#FEF3E7;color:#D97706}
.minibalk{height:7px;border-radius:4px;background:#EDF0F5;flex:1}
.minibalk--kort{max-width:48%}
.minibalk--half{max-width:66%}
.minirol{flex:0 0 auto;font-size:.58rem;color:#5A6478;background:#F1F3F7;border-radius:99px;padding:2px 7px;white-space:nowrap}
.ministat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px}
.ministat__label{font-size:.64rem;color:#7A8598}
.ministat__waarde{font-family:var(--ff-display);font-size:.92rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.minimeter{height:6px;border-radius:3px;background:#EDF0F5;overflow:hidden;margin-top:8px}
.minimeter i{display:block;height:100%;border-radius:3px;background:#2563EB}
/* White-label-beeld: het logovlak is bewust neutraal grijs. Daar hoort het
   merk van de klant te staan, niet dat van Vestrix — dat is juist het punt. */
.minimerk{display:flex;align-items:center;gap:9px}
.minimerk__vlak{flex:0 0 auto;width:26px;height:26px;border-radius:7px;background:#DDE3EC}
.miniveld{height:22px;border:1px solid #E6EAF0;border-radius:7px;background:#FBFCFE;margin-top:8px}
.miniknop{margin-top:10px;background:#2563EB;color:#fff;font-size:.66rem;font-weight:600;text-align:center;border-radius:7px;padding:7px 0}

@media(max-width:900px){
  .kaartstapel{margin-top:40px}
  .kaartstapel__laag,
  .kaartstapel__laag:nth-child(2),
  .kaartstapel__laag:nth-child(3),
  .kaartstapel__laag:nth-child(4){position:static;top:auto;padding-top:20px}
  .kstapel{grid-template-columns:1fr;gap:26px;padding:30px 26px;min-height:0;border-radius:20px;box-shadow:none}
  .kstapel__beeld{order:2;min-height:0}
}

/* ── MULTI-SCROLL ─────────────────────────────────────────────────────
   Drie onderdelen op één podium. Links de beelden, rechts de teksten; bij
   het scrollen schuiven de twee helften tegengesteld door elkaar heen,
   zodat onderdeel 1, 2 en 3 steeds links en rechts tegelijk in beeld komen.
   Elk onderdeel heeft een eigen achtergrondkleur; de tekst staat in een
   wit kader met afgeronde hoeken, zoals de andere kaarten op de site.

   Standaard (mobiel, korte schermen, "minder beweging", geen JavaScript):
   gewoon onder elkaar, beeld boven tekst, elk paar op zijn eigen kleur.
   De podium-weergave staat pas aan als 70-multiscroll.js de klasse
   .ms--aan zet — zo valt hij zonder JavaScript nooit half kapot. */
.ms{--ms-grijs:#ECEEF1;--ms-groen:#E9F5C8;--ms-paars:var(--violet);position:relative;padding:0}
.ms__stage{display:flex;flex-direction:column}
.ms__col{display:contents}
.ms__pane{display:flex;align-items:center;justify-content:center;padding:56px 20px}
.ms__pane--grijs{background:var(--ms-grijs)}
.ms__pane--groen{background:var(--ms-groen)}
.ms__pane--paars{background:var(--ms-paars)}
.ms__col--beeld .ms__pane{order:calc(var(--i) * 2);padding-bottom:22px}
.ms__col--tekst .ms__pane{order:calc(var(--i) * 2 + 1);padding-top:22px}
.ms__inner{width:100%;max-width:560px}
.ms__card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;box-shadow:0 18px 50px rgba(13,13,13,.10)}
.ms .solution__media{border-radius:var(--radius);border-color:transparent;box-shadow:0 18px 50px rgba(13,13,13,.14);min-height:0}
.ms__dots{display:none}

/* Podium-weergave */
.ms--aan{height:calc(100vh + (var(--n) - .6) * 110vh)}
.ms--aan .ms__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100vh;background:var(--offwhite)}
.ms--aan .ms__col{display:flex;grid-row:1;align-self:start;height:calc(var(--n) * 100vh);will-change:transform}
.ms--aan .ms__col--beeld{grid-column:1;flex-direction:column-reverse}
.ms--aan .ms__col--tekst{grid-column:2;flex-direction:column}
.ms--aan .ms__pane,
.ms--aan .ms__col--beeld .ms__pane,
.ms--aan .ms__col--tekst .ms__pane{order:0;flex:0 0 100vh;height:100vh;padding:calc(var(--header-h) + 8px) 32px 36px}
.ms--aan .ms__col--tekst .ms__inner{max-width:520px}
.ms--aan .ms__col--beeld .ms__inner{max-width:600px}
/* De helften liggen op subpixel-niveau niet altijd exact tegen elkaar; 1px overlap voorkomt een lichte naad in het midden. */
.ms--aan .ms__col--beeld{width:calc(100% + 1px)}
.ms--aan .ms__dots{position:absolute;right:20px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:14px}
.ms__dot{width:12px;height:12px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(13,13,13,.32);box-shadow:0 0 0 2px rgba(255,255,255,.75);transition:transform .25s,background .25s}
.ms__dot:hover{transform:scale(1.25)}
.ms__dot:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.ms__dot[aria-current="true"]{background:var(--magenta);transform:scale(1.3)}

/* ── WACHTLIJST ───────────────────────────────────────────────────────────
   Smalle band met links de uitnodiging en rechts één invoerveld. Bewust
   zonder kaart of achtergrondkleur: het moet een stille aanbieding blijven,
   geen tweede hoofdactie naast "Plan een demo".                            */
.wachtlijst{padding:72px 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wachtlijst__inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.wachtlijst__tekst h2{font-size:clamp(1.8rem,3vw,2.4rem);margin:10px 0 14px}
.wachtlijst__tekst p{color:#555;max-width:460px}
.wachtlijst__rij{display:flex;gap:12px;flex-wrap:wrap}
.wachtlijst__rij input[type="email"]{flex:1 1 240px;min-width:0;padding:15px 22px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--ff-body);font-size:.97rem;color:var(--ink)}
.wachtlijst__rij input[type="email"]:focus{outline:2px solid var(--magenta);outline-offset:2px;border-color:transparent}
.wachtlijst__noot{margin-top:14px;font-size:.85rem;color:#666;line-height:1.6}
.wachtlijst__noot a{text-decoration:underline}
@media(max-width:820px){
  .wachtlijst{padding:56px 24px}
  .wachtlijst__inner{grid-template-columns:1fr;gap:28px}
}

/* Blok met achtergrondvideo. Bewerkbalk: Blok, Achtergrondvideo. De video staat achter de
   inhoud; achtergrondkleur of -beeld van het blok blijft zichtbaar tot de video laadt
   (en op trage verbindingen, zie src/scripts/16-blok-video.js). */
section:has(>.blok-video),footer:has(>.blok-video){position:relative;isolation:isolate;overflow:hidden}
.blok-video{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blok-video video{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center center);transform:scale(var(--sx,1),var(--sy,1))}
.blok-video::after{content:"";position:absolute;inset:0;background:rgba(13,13,13,var(--overlay,.4))}
@media(prefers-reduced-motion:reduce){.blok-video{display:none}}

/* Gespiegeld achtergrondbeeld van een blok (data-spiegel="x", "y" of "xy"; zet je via Blok, Achtergrondbeeld).
   Het beeld uit de inline stijl van het blok wordt op een laag erachter getekend en gespiegeld, zodat de
   inhoud van het blok zelf niet meedraait. */
:where([data-spiegel]){position:relative;isolation:isolate;background-size:0 0!important}
[data-spiegel]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:inherit;background-size:cover;background-position:inherit;background-repeat:no-repeat;transform:scale(var(--isx,1),var(--isy,1))}
[data-spiegel*="x"]{--isx:-1}
[data-spiegel*="y"]{--isy:-1}