/* Samengevoegd uit app-4 tot en met app-8, in die volgorde, zodat de
   cascade gelijk blijft. Alleen voor-zorg en voor-bewindvoering laden
   dit bestand; de zeven oude pagina's op de server gebruiken app-1 en
   app-2 en raken het niet. */

/* ===== app-4.css ===== */

/* ---------- Subpagina's ---------- */
.subhero { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 68px) clamp(48px, 6vw, 88px); }
.subhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 420px at 14% -12%, rgba(162,128,255,.26), transparent 60%),
    radial-gradient(680px 380px at 88% 8%, rgba(84,61,125,.10), transparent 62%),
    linear-gradient(180deg, #fbfaff 0%, var(--white) 74%);
}
.subhero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--line);
}
.subhero .wrap { max-width: 860px; }
.kruimel { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: .85rem; color: var(--ink-60); margin-bottom: 26px; }
.lp-hero .kruimel { justify-content: center; margin-bottom: 30px; }
.kruimel a { color: var(--ink-60); text-decoration: none; }
.kruimel a:hover { color: var(--purple); }
.kruimel span[aria-hidden] { opacity: .5; }
.subhero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; margin: 0 0 14px; }
.subhero .lead { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--ink-60); line-height: 1.55; margin: 0 0 22px; max-width: 66ch; }

.prose {
  max-width: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 52px);
  box-shadow: 0 22px 50px -44px rgba(84, 61, 125, .5);
}
.prose > * { max-width: 68ch; }
.prose > .figuur, .prose > .feit, .prose > .inhoud, .prose > .uitgelicht, .prose > .kaartrij, .prose > table { max-width: none; }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); letter-spacing: -.02em; margin: 0 0 12px; overflow-wrap: break-word; hyphens: auto; }
.prose h3, .prose p, .prose li { overflow-wrap: break-word; }
.subhero h1 { overflow-wrap: break-word; }
.prose h3 { font-size: 1.12rem; font-weight: 560; margin: 26px 0 7px; }
.prose p { margin: 0 0 15px; line-height: 1.65; color: var(--ink-60); }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 1.25em; line-height: 1.65; color: var(--ink-60); }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); font-weight: 560; }
.prose a { color: var(--purple); }

.feit {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 3px solid var(--lilac);
  padding: 24px 26px; margin: 26px 0;
  box-shadow: 0 18px 40px -38px rgba(84, 61, 125, .5);
}
.feit__cijfer { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 620; color: var(--purple); line-height: 1; letter-spacing: -.02em; }
.feit__tekst { font-size: .95rem; line-height: 1.55; color: var(--ink-60); margin: 0; min-width: 0; overflow-wrap: break-word; }
@media (max-width: 480px) {
  .feit { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 16px; }
  .feit__tekst .bron { word-break: break-all; overflow-wrap: anywhere; }
  .prose { padding-left: 16px; padding-right: 16px; }
  .prose .bron { word-break: break-all; }
}
.feit__tekst .bron { display: block; margin-top: 5px; font-size: .8rem; overflow-wrap: anywhere; min-width: 0; }
.feit__tekst { min-width: 0; }

.stappen { display: grid; gap: 12px; margin: 20px 0 26px; counter-reset: stap; }
.stappen li {
  position: relative; list-style: none; padding: 16px 18px 16px 54px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  line-height: 1.55;
}
.stappen li::before {
  counter-increment: stap; content: counter(stap);
  position: absolute; left: 18px; top: 16px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lilac-soft); color: var(--purple);
  display: grid; place-items: center; font-size: .82rem; font-weight: 620;
}
.stappen strong { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 560; }
.stappen span { color: var(--ink-60); font-size: .95rem; }

.kaartrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 22px 0; }
.kaartrij--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 900px) { .kaartrij--drie { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
/* Vier kaarten passen niet in de drie kolommen van .kaartrij: de vierde valt
   als wees op een eigen regel. Twee brede kolommen geeft 2x2, zoals
   .feature-grid--groot op de homepage met vier items doet. */
.kaartrij--breed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .kaartrij--breed { grid-template-columns: 1fr; } }
/* Zelfde ruimte als het probleemblok op index: 34/32/28 in plaats van 20/22. */
.infokaart { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 32px 28px; }
/* Op een kaart van 335 breed kost 32px zijpadding een kwart van de regel. */
@media (max-width: 560px) { .infokaart { padding: 28px 24px 24px; } }
.infokaart h3 { margin: 0; font-size: 1.02rem; font-weight: 560; line-height: 1.35; overflow-wrap: break-word; }
.infokaart p { margin: 12px 0 0; font-size: .93rem; line-height: 1.62; color: var(--ink-60); }

.prose table.vergelijk { width: 100%; min-width: 0; border-collapse: collapse; margin: 22px 0; font-size: .94rem; }
.vergelijk th, .vergelijk td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.vergelijk thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-40); font-weight: 620; }
.vergelijk tbody th { font-weight: 560; color: var(--ink); width: 34%; }
/* Logo naast de naam van de partij. Vaste hoogte in plaats van vaste breedte,
   want de woordmerken verschillen sterk in verhouding. */
.partij { display: flex; align-items: center; justify-content: flex-start; gap: 9px; height: 100%; }
.vergelijk tbody th { vertical-align: middle; }
.partij__logo { height: 16px; width: auto; max-width: 92px; object-fit: contain; flex: none; }
/* Microsoft en Telnyx zetten hun woordmerk lager in het vlak dan Meta, dus op
   gelijke hoogte lezen ze kleiner. */
.partij__logo--groot { height: 19px; max-width: 108px; }
@media (max-width: 720px) { .partij__logo { height: 15px; } .partij__logo--groot { height: 18px; } }
.vergelijk td { color: var(--ink-60); }
.vergelijk .ja { color: #1E6B2C; font-weight: 560; }
.vergelijk .nee { color: var(--ink-40); }
@media (max-width: 620px) {
  .prose table.vergelijk { display: block; width: 100%; min-width: 0; max-width: 100%; }
  .vergelijk tbody, .vergelijk tr, .vergelijk th, .vergelijk td { display: block; width: auto; max-width: 100%; box-sizing: border-box; }
  .vergelijk thead { display: none; }
  .vergelijk tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
  .vergelijk th, .vergelijk td { border: 0; padding: 4px 0; }
  .vergelijk tbody th { width: auto; }
  .vergelijk td::before { content: attr(data-label) ": "; font-weight: 560; color: var(--ink); }
}

.subcta {
  background: var(--purple-deep); color: var(--white);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  text-align: center; margin-top: clamp(28px, 4vw, 44px);
}
.subcta h2 { margin: 0 0 8px; color: var(--white); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.subcta p { margin: 0 auto 20px; color: var(--white-70); max-width: 52ch; line-height: 1.55; }
.subcta .hero__actions { justify-content: center; }

.verder { border-top: 1px solid var(--line); margin-top: clamp(30px, 4vw, 48px); padding-top: 24px; }
.verder h2 { font-size: 1.05rem; font-weight: 560; margin: 0 0 14px; }
.verder ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
/* De li's zijn rasteritems en rekken al mee met de hoogste rij; de link
   binnenin deed dat niet, dus stonden de kaders ongelijk zodra een titel over
   twee regels liep. Gemeten: 55 tot 100px binnen een rij. */
.verder li { display: flex; }
.verder a {
  display: flex; flex-direction: column; flex: 1; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: var(--ink); font-size: .94rem; font-weight: 560;
  transition: border-color .18s ease, transform .18s ease;
}
.verder a:hover { border-color: var(--lilac); transform: translateY(-2px); }

/* ---------- Subhero met visual ---------- */
.subhero .wrap { max-width: var(--max); }
.subhero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .subhero__grid { grid-template-columns: minmax(0, 1fr); } .subhero__beeld { order: -1; max-width: 460px; } }
.subhero__tekst { max-width: 62ch; }
.subhero__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; }

.subhero__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .92rem; color: var(--ink-60); font-weight: 500;
}
.subhero__chip svg { width: 16px; height: 16px; color: var(--purple); flex: none; }
.subhero__acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.subhero__beeld {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--lilac-soft), #f6f3ff);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  box-shadow: 0 34px 70px -46px rgba(84, 61, 125, .68);
}
.subhero__beeld::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.subhero__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.plaatshouder {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--purple); opacity: .55; text-align: center; padding: 20px;
}
.plaatshouder svg { width: 34px; height: 34px; }
.plaatshouder span { font-size: .78rem; font-weight: 560; letter-spacing: .04em; text-transform: uppercase; }
.plaatshouder small { font-size: .74rem; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .8; }

/* ---------- Inhoudsopgave ---------- */
.inhoud {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 30px);
  margin: 0 0 clamp(26px, 3vw, 36px);
}
.inhoud h2 {
  font-size: .78rem !important; text-transform: uppercase; letter-spacing: .09em;
  color: var(--purple); margin: 0 0 16px !important; font-weight: 620;
  display: flex; align-items: center; gap: 9px;
}
.inhoud h2::before {
  content: ""; width: 16px; height: 2px; background: var(--lilac); border-radius: 2px; flex: none;
}
.inhoud ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 2px; }
.inhoud li { counter-increment: toc; min-width: 0; }
.inhoud a {
  display: flex; gap: 14px; align-items: baseline; text-decoration: none;
  overflow-wrap: anywhere; min-width: 0;
  color: var(--ink); font-size: 1rem; line-height: 1.5;
  padding: 9px 12px; margin: 0 -12px; border-radius: 9px;
  transition: background .16s ease, color .16s ease;
}
.inhoud a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--purple); font-weight: 620; font-size: .82rem;
  font-variant-numeric: tabular-nums; flex: none; opacity: .65;
}
.inhoud a:hover { background: var(--white); color: var(--purple); }
.inhoud a:hover::before { opacity: 1; }

/* ---------- Layout met zijkolom ---------- */
.artikelvlak { background: var(--mist); padding-block: clamp(40px, 5vw, 72px); }
.artikel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(30px, 3.5vw, 56px); align-items: start; }
@media (max-width: 1040px) { .artikel { grid-template-columns: minmax(0, 1fr); } .zijkolom { display: none; } }
.zijkolom { position: sticky; top: 96px; }
.zijkolom__blok {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 22px; margin-bottom: 16px;
  box-shadow: 0 18px 40px -38px rgba(84, 61, 125, .5);
}
.zijkolom__blok--accent {
  background: linear-gradient(160deg, var(--purple-deep), var(--purple));
  border-color: transparent; color: var(--white);
}
.zijkolom__blok--accent h3 { color: var(--white); }
.zijkolom__blok--accent p { color: var(--white-70); }
.zijkolom__blok h3 { margin: 0 0 8px; font-size: 1rem; font-weight: 560; line-height: 1.35; }
.zijkolom__blok p { margin: 0 0 16px; font-size: .89rem; line-height: 1.55; color: var(--ink-60); }
.zijkolom__blok .btn { width: 100%; justify-content: center; font-size: .9rem; }
.zijkolom__nav { list-style: none; margin: 0; padding: 0; }
.zijkolom__nav li { margin-bottom: 7px; }
.zijkolom__nav a {
  font-size: .89rem; color: var(--ink-60); text-decoration: none; line-height: 1.4;
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.zijkolom__nav li:last-child a { border-bottom: 0; padding-bottom: 0; }
.zijkolom__nav a::after { content: "92"; margin-left: auto; color: var(--purple); opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.zijkolom__nav a:hover::after { opacity: 1; transform: translateX(2px); }
.zijkolom__nav a:hover { color: var(--purple); }

/* ---------- Citaat in de tekst ---------- */
.citaat {
  border-left: 3px solid var(--lilac);
  padding: 4px 0 4px 20px; margin: 24px 0;
  font-size: 1.08rem; line-height: 1.55; color: var(--ink);
}
.citaat cite { display: block; margin-top: 8px; font-size: .85rem; font-style: normal; color: var(--ink-60); }

/* ---------- Illustratie in de tekst ---------- */
.figuur { margin: 26px 0; }
.figuur__vlak {
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, var(--lilac-soft), #f7f5ff);
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9; display: grid; place-items: center;
}
.figuur__vlak img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Een illustratie met eigen witruimte hoeft geen vaste beeldverhouding en
   moet niet worden bijgesneden; die krijgt lucht in plaats van object-fit. */
.figuur__vlak--vrij { aspect-ratio: auto; padding: clamp(22px, 4vw, 44px); }
.figuur__vlak--vrij img { width: 100%; height: auto; object-fit: contain; }
.figuur figcaption { margin-top: 9px; font-size: .85rem; color: var(--ink-60); line-height: 1.5; }

/* ---------- Uitgelicht blok ---------- */
.uitgelicht {
  background: var(--purple-deep); color: var(--white);
  border-radius: var(--radius); padding: 24px 26px; margin: 26px 0;
}
.uitgelicht h3 { margin: 0 0 8px; color: var(--white); font-size: 1.05rem; font-weight: 560; }
.uitgelicht p { margin: 0 0 10px; color: var(--white-70); line-height: 1.55; font-size: .95rem; }
.uitgelicht p:last-child { margin-bottom: 0; }
.uitgelicht a { color: var(--lilac); }
.uitgelicht ul { margin: 0; padding-left: 1.2em; color: var(--white-70); line-height: 1.6; font-size: .95rem; }

/* ---------- Checklist ---------- */
.check { list-style: none; margin: 18px 0 24px; padding: 0; }
.check li { position: relative; padding-left: 30px; margin-bottom: 10px; line-height: 1.55; color: var(--ink-60); }
.check li::before {
  content: ""; position: absolute; left: 4px; top: 6px;
  width: 6px; height: 11px; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: rotate(45deg);
}
.check strong { color: var(--ink); }

/* ---------- Bronvermelding onderaan ---------- */
.bronnen { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.bronnen h2 { font-size: .82rem !important; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-40); margin: 0 0 10px !important; font-weight: 620; }
.bronnen ol { margin: 0; padding-left: 1.3em; }
.bronnen li { font-size: .85rem; line-height: 1.5; color: var(--ink-60); margin-bottom: 6px; }
.bronnen a { color: var(--purple); }

/* ---------- Sectieritme op subpagina's ---------- */
.blok { padding-block: clamp(44px, 5.5vw, 84px); }
.blok--tint { background: var(--mist); }
/* Het blok direct onder een lp-hero. Grijs tegen het lichtpaarse verloop van
   de hero gaf een harde streep; dit blok begint in de eindkleur van dat
   verloop en zakt naar wit, zodat er boven noch onder een rand staat. */
.blok--verlengd { background: linear-gradient(180deg, #F4F1FB 0%, var(--white) 100%); }
.blok--dark { background: var(--purple-deep); color: var(--white); }
.blok--dark h2, .blok--dark h3 { color: var(--white); }
.blok--dark p, .blok--dark li { color: var(--white-70); }
.blok--dark .infokaart { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11); }
.blok--dark .infokaart h3 { color: var(--white); }
.blok--dark .infokaart p { color: var(--white-70); }
/* Op een donker blok krijgt het pictogram een lila cirkel boven de titel, in
   dezelfde toon als .stapreeks__nr hieronder. Op wit blijft het een kale
   markering naast de titel; daar draagt de kop het al. */
.blok--dark .infokaart__kop { display: block; }
.blok--dark .pIcoon {
  width: 44px; height: 44px; margin: 0 0 14px;
  border-radius: 50%; background: rgba(162,128,255,.18);
  display: grid; place-items: center;
}
.blok--dark .pIcoon svg { width: 22px; height: 22px; color: var(--lilac); }

/* Dezelfde opzet als op een donker blok, maar dan op een licht vlak: het
   pictogram groot in een cirkel boven de titel in plaats van klein ernaast.
   Voor rijen waar de kaarten het verhaal dragen en niet alleen toelichten. */
.kaartrij--groot .infokaart__kop { display: block; }
.kaartrij--groot .pIcoon {
  width: 44px; height: 44px; margin: 0 0 15px;
  border-radius: 50%; background: var(--lilac-soft);
  display: grid; place-items: center;
}
.kaartrij--groot .pIcoon svg { width: 22px; height: 22px; color: var(--purple); }
.kaartrij--groot .infokaart h3 { font-size: 1.06rem; }
.blok--dark .eyebrow { color: var(--lilac); }
.blok--dark a:not(.btn) { color: var(--lilac); }
.blok--dark .btn--primary { color: var(--ink); }
.blok--dark .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.34); }
.blok--dark .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--lilac); }

.blok__kop { max-width: 720px; margin: 0 0 clamp(20px, 3vw, 32px); }
.blok__kop--center { margin-inline: auto; text-align: center; }
.blok__kop h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); letter-spacing: -.025em; margin: 0 0 10px; overflow-wrap: break-word; hyphens: auto; }
.blok__kop p { margin: 0; color: var(--ink-60); line-height: 1.6; font-size: 1.02rem; }
.blok--dark .blok__kop p { color: var(--white-70); }

/* Cijferbalk over de volle breedte van de wrap */
.cijferbalk {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(18px, 3vw, 40px);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(26px, 3.5vw, 40px) clamp(24px, 4vw, 44px);
  box-shadow: 0 24px 54px -44px rgba(84, 61, 125, .5);
}
.cijferbalk__item strong {
  display: block; font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 620;
  color: var(--purple); line-height: 1; letter-spacing: -.02em; margin-bottom: 6px;
}
.cijferbalk__item span { font-size: .92rem; color: var(--ink-60); line-height: 1.5; }
.cijferbalk__item .bron { display: block; margin-top: 4px; font-size: .8rem; }

/* Stappenrij horizontaal */
.stapreeks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; counter-reset: sr; }
.stapreeks__item {
  position: relative; background: var(--white);
  border: 1px solid rgba(162, 128, 255, .38);
  border-radius: var(--radius-lg); padding: 30px 26px 26px;
}
.blok--dark .stapreeks__item { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11); }
.stapreeks__nr {
  counter-increment: sr;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--lilac-soft); color: var(--purple); border: 0;
  font-size: 1.14rem; font-weight: 620; font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}
.blok--dark .stapreeks__nr { background: rgba(162,128,255,.18); color: var(--lilac); }

/* Een donker paneel om de stappen heen, met dezelfde kaders als het donkere
   blok op whatsapp-in-teams. Waarom een paneel en niet de hele sectie donker:
   op bellen-in-teams en probleem-privetelefoons grenst het stappenblok aan de
   donkere afsluiter, en dan zouden twee donkere vlakken tegen elkaar aan
   komen te liggen. */
.stapreeks--paneel {
  background: var(--purple-deep);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 44px);
  margin: 26px 0 0;
}
.stapreeks--paneel .stapreeks__item {
  background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11);
}
.stapreeks--paneel .stapreeks__nr {
  background: rgba(162,128,255,.18); color: var(--lilac);
  border-color: rgba(255,255,255,.14);
}
.stapreeks--paneel .stapreeks__item h3 { color: var(--white); }
.stapreeks--paneel .stapreeks__item p { color: var(--white-70); }
.stapreeks--paneel .stapreeks__item a:not(.btn) { color: var(--lilac); }
.stapreeks__item h3 { margin: 0 0 7px; font-size: 1.06rem; font-weight: 560; overflow-wrap: break-word; }
.stapreeks__item p { margin: 0; font-size: .94rem; line-height: 1.58; color: var(--ink-60); }
.blok--dark .stapreeks__item h3 { color: var(--white); }
.blok--dark .stapreeks__item p { color: var(--white-70); }

/* Split: tekst naast beeld */
.split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (max-width: 860px) { .split2 { grid-template-columns: minmax(0, 1fr); } }
.split2__beeld {
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--lilac-soft), #f6f3ff);
  border: 1px solid var(--line); aspect-ratio: 4 / 3; display: grid; place-items: center;
}
.blok--dark .split2__beeld { background: linear-gradient(150deg, rgba(162,128,255,.18), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.12); }
.split2__beeld img { width: 100%; height: 100%; object-fit: cover; }
.split2__tekst h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; margin: 0 0 12px; overflow-wrap: break-word; }
.split2__tekst p { color: var(--ink-60); line-height: 1.65; margin: 0 0 14px; }
.blok--dark .split2__tekst p { color: var(--white-70); }

/* ---------- Landingspagina ---------- */
/* Het doek waar de hero en het blok eronder samen op staan. Het verloop en de
   ringen zaten op de hero zelf en werden op de sectiegrens afgekapt; op het doek
   lopen ze door tot onder aan het tweede blok.

   De twee ringen zijn hier met een radial-gradient getekend in plaats van met
   een border op een pseudo-element. Zo passen het verloop en beide ringen in
   dezelfde laag en hoeft er geen tweede pseudo-element aan te pas te komen. */
.opening { position: relative; overflow: hidden; }
.opening::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle 334px at calc(100% + 70px) 150px,
      rgba(0,0,0,0) 0 331px, rgba(162,128,255,.30) 331px 332.5px, rgba(0,0,0,0) 332.5px),
    radial-gradient(circle 172px at -42px calc(100% - 78px),
      rgba(0,0,0,0) 0 169px, rgba(162,128,255,.22) 169px 170px, rgba(0,0,0,0) 170px),
    radial-gradient(760px 520px at 14% 0%, rgba(162,128,255,.26), transparent 62%),
    radial-gradient(700px 460px at 92% 10%, rgba(84,61,125,.14), transparent 64%),
    linear-gradient(180deg, #FBFAFE 0%, #F5F2FB 58%, var(--white) 100%);
}
/* Binnen het doek draagt de hero zelf geen achtergrond meer. */
.opening > .lp-hero { overflow: visible; }
.opening > .lp-hero::before,
.opening > .lp-hero::after,
.opening > .lp-hero > .wrap::before { content: none; }
.opening > .blok--verlengd { background: none; }

.lp-hero { position: relative; overflow: hidden; padding-block: clamp(104px, 11vw, 168px) 0; }
/* Variant zonder mockup eronder: de hero eindigt dan zelf, dus hij heeft de
   onderpadding van een gewoon blok nodig in plaats van 0. */
.lp-hero--kaal { padding-bottom: clamp(44px, 5.5vw, 84px); }
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(760px 520px at 14% 0%, rgba(162,128,255,.26), transparent 62%),
    radial-gradient(700px 460px at 92% 10%, rgba(84,61,125,.14), transparent 64%),
    linear-gradient(180deg, #FBFAFE 0%, #F4F1FB 100%);
}
/* Dezelfde ringen als in de hero van de homepage: een echo van de cirkel in
   het beeldmerk, zodat een hero zonder mockup eronder niet leeg oogt. */
.lp-hero::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  width: clamp(420px, 46vw, 760px); height: clamp(420px, 46vw, 760px);
  border: 1.5px solid rgba(162, 128, 255, .30); border-radius: 50%;
  top: -16%; right: -9%;
}
.lp-hero > .wrap::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  width: 300px; height: 300px;
  border: 1px solid rgba(162, 128, 255, .18); border-radius: 50%;
  bottom: -140px; left: -110px;
}
.lp-hero > .wrap { position: relative; }
.lp-hero__mock .mock { max-width: none; margin: 0; }
/* Logostrip die over de hero heen valt, zoals op de homepage */
.clients-strip {
  position: relative; z-index: 2;
  background: var(--mist);
  margin-top: -30px;
  padding: 30px 0 26px;
  box-shadow: 0 -24px 48px -36px rgba(84, 61, 125, .35);
  overflow: hidden;
}
/* de meegekopieerde logobalk heeft eigen marges van de homepage: neutraliseren */
.clients-strip .clients { margin-top: 0; padding: 0; background: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .clients-strip .clients__track { animation: none !important; }
  .kanaalring .kanaal { animation: none !important; }
}
/* de sectie ná de logostrip valt ook over de mockup heen */

.clients-strip__kop {
  text-align: center; margin: 0 0 30px;
  font-size: .88rem; color: var(--ink-60);
}

/* De ster uit de prijspakketten, waar hij de AI-regels markeert. Naast de
   titel doet hij hetzelfde: dit gaat over AI. */
.h1__ster { color: var(--lilac); font-size: .52em; vertical-align: .42em; margin-left: .16em; }
.lp-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); max-width: 20ch; line-height: 1.1; letter-spacing: -.03em; margin: 0 auto 14px; overflow-wrap: break-word; }
.lp-hero__tekst { max-width: 760px; margin: 0 auto; text-align: center; }
.lp-hero__tekst .lead { max-width: 60ch; margin-inline: auto; }
.lp-hero__tekst .subhero__meta { justify-content: center; }
.lp-hero__tekst .subhero__acties { justify-content: center; }
.lp-hero .lead { font-size: clamp(1.02rem, 1.5vw, 1.16rem); color: var(--ink-60); line-height: 1.6; margin: 0 0 20px; }

/* Sectie met beeld naast tekst */
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4.5vw, 68px); align-items: center; }
@media (max-width: 880px) { .lp-split { grid-template-columns: minmax(0, 1fr); } .lp-split--om .lp-split__beeld { order: -1; } }
.lp-split--om .lp-split__tekst { order: 2; }
.lp-split__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
  color: var(--purple); margin-bottom: 12px;
}
.lp-split__label::before { content: ""; width: 18px; height: 2px; background: var(--lilac); border-radius: 2px; }
.blok--dark .lp-split__label { color: var(--lilac); }
.lp-split__tekst h2 { font-size: clamp(1.45rem, 2.6vw, 2rem); letter-spacing: -.025em; margin: 0 0 14px; overflow-wrap: break-word; }
.lp-split__tekst p { color: var(--ink-60); line-height: 1.65; margin: 0 0 14px; }
.blok--dark .lp-split__tekst p { color: var(--white-70); }
.lp-split__tekst .check { margin: 16px 0 20px; }
.blok--dark .check li { color: var(--white-70); }
.blok--dark .check strong { color: var(--white); }
.blok--dark .check li::before { border-color: var(--lilac); }
.lp-split__beeld {
  border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(150deg, var(--lilac-soft), #f7f4ff);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  box-shadow: 0 28px 60px -50px rgba(84, 61, 125, .7);
}
.blok--dark .lp-split__beeld { background: linear-gradient(150deg, rgba(162,128,255,.16), rgba(255,255,255,.04)); border-color: rgba(255,255,255,.12); }
.lp-split__beeld img { width: 100%; height: 100%; object-fit: cover; }
.lp-split__beeld--vrij { aspect-ratio: auto; padding: clamp(20px, 3vw, 32px); background: var(--white); }
.lp-split__beeld--open {
  aspect-ratio: auto; background: none; border: 0; box-shadow: none; padding: 0;
  display: grid; place-items: center; min-height: 280px;
}
.lp-split__beeld--open .mediarow { transform: none; }
.lp-split__beeld--open .animsvg { width: 100%; max-width: 420px; }
.lp-split__beeld--open > .kanaalring { width: 300px; }
@media (max-width: 560px) { .lp-split__beeld--open > .kanaalring { width: 240px; height: 240px; } }
/* Groter door de elementen zelf te vergroten, niet door te schalen: blijft scherp */
.lp-split__beeld--open .mediarow .mediarow__p > img { width: 100px !important; height: 100px !important; }
.lp-split__beeld--open .mediarow .mediarow__badge { width: 40px !important; height: 40px !important; }
.lp-split__beeld--open .mediarow .mediarow__badge > img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.lp-split__beeld--open .mediarow { gap: 6px; }
@media (max-width: 880px) {
  .lp-split__beeld--open { min-height: 200px; }
  .lp-split__beeld--open .mediarow img { width: 76px !important; height: 76px !important; }
}
@media (max-width: 480px) {
  .lp-split__beeld--open .mediarow img { width: 60px !important; height: 60px !important; }
}
.blok--dark .lp-split__beeld--vrij { background: rgba(255,255,255,.05); }
/* Kaarten met eigen lichte styling behouden hun eigen kleuren op donkere secties */
.blok--dark .aicard, .blok--dark .aicard p, .blok--dark .aicard li,
.blok--dark .aicard strong, .blok--dark .aicard span { color: var(--ink); }
.blok--dark .aicard .aicard__label { color: var(--purple); }
.blok--dark .aicard .aicard__ai { color: var(--white); }
.blok--dark .aicard .aicard__who span { color: var(--ink-60); }
.blok--dark .aicard p, .blok--dark .aicard li { color: var(--ink-60); }
.lp-split__beeld--vrij > * { width: 100%; }
.lp-split__beeld--vrij > .kanaalring { width: 300px; }
@media (max-width: 560px) { .lp-split__beeld--vrij > .kanaalring { width: 240px; height: 240px; } }
.kanaalrij .kanaal,
.kanaalring .kanaal { width: 60px !important; height: 60px !important; }
@media (max-width: 560px) { .kanaalrij .kanaal, .kanaalring .kanaal { width: 52px !important; height: 52px !important; } }
.lp-split__beeld--vrij .aicard__head img { width: 34px !important; height: 34px !important; flex: none; }

/* Quote als volle sectie */
.lp-quote { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (max-width: 820px) { .lp-quote { grid-template-columns: minmax(0, 1fr); } }
.lp-quote__foto { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; background: var(--lilac-soft); display: grid; place-items: center; }
.lp-quote__foto img { width: 100%; height: 100%; object-fit: cover; }
.lp-quote blockquote {
  margin: 0 0 18px; font-size: clamp(1.18rem, 2vw, 1.5rem); line-height: 1.5;
  font-weight: 450; letter-spacing: -.012em; color: var(--white);
}
.lp-quote__bron strong { display: block; font-weight: 560; color: var(--white); }
.lp-quote__bron span { font-size: .9rem; color: var(--white-70); }
.lp-quote__resultaat {
  display: inline-block; margin-bottom: 14px;
  background: rgba(162,128,255,.18); color: var(--lilac);
  border-radius: 40px; padding: 5px 14px; font-size: .84rem; font-weight: 560;
}

/* FAQ */
.lp-faq { max-width: 780px; margin: 0 auto; }
.lp-faq details {
  border-bottom: 1px solid var(--line); padding: 4px 0;
}
.lp-faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 560; font-size: 1.05rem; line-height: 1.45;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.lp-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.lp-faq .faq-antwoord { padding: 0 40px 20px 0; color: var(--ink-60); line-height: 1.65; }
.lp-faq .faq-antwoord p { margin: 0 0 10px; }
.lp-faq .faq-antwoord p:last-child { margin-bottom: 0; }
.cta__mensen { justify-content: center; margin-bottom: 18px !important; }
.cta__mensen img { border: 2px solid var(--purple-deep); }

.verder a span { display: block; font-weight: 400; font-size: .87rem; color: var(--ink-60); margin-top: 2px; }

/* ===== app-5.css ===== */
.verhaal blockquote { font-size: clamp(1.02rem, 1.35vw, 1.16rem); line-height: 1.62; font-weight: 400; }
/* De rest van wat een blockquote hier nodig heeft. Stond alleen in de
   paginablokken van de sectorpagina's; zonder deze regels houdt een
   blockquote de browserstandaard margin: 1em 40px en wordt hij 80px
   smaller dan de kolom. Lettergrootte bewust niet meegenomen: die staat
   hierboven al en is kleiner dan wat er in die blokken stond. */
.verhaal blockquote { margin: 0 0 22px; letter-spacing: -.012em; color: var(--white); position: relative; }

/* ===== app-6.css ===== */
.mock .mock__call { bottom: 50px; right: 22px; }

/* ===== app-7.css ===== */
.mock__appbar .mock__search { margin-right: 46px; }

/* ===== app-8.css ===== */

/* ---------- Fotobericht in de mock ---------- */
.mock__msg--foto { padding: 5px 5px 7px; max-width: 46%; }
.mock__foto { display: block; border-radius: 8px; overflow: hidden; }
.mock__foto svg { display: block; width: 100%; height: auto; max-height: 96px; object-fit: cover; }
.mock__fotoTekst { display: block; font-size: .68rem; color: var(--ink-60); padding: 5px 4px 0; }
.mock__msg--foto time { padding-left: 4px; }

/* ---------- Geanimeerde probleem-iconen ---------- */
/* Pictogram naast de titel zonder gevuld vlak, zoals op index. flex-start plus
   1px zodat het op de eerste regel blijft staan als de titel wikkelt. */
.infokaart__kop { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 0; }
.infokaart__kop h3 { margin: 0; }
.pIcoon {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  border-radius: 0; background: none;
  display: block; padding: 0;
}
.pIcoon svg { width: 20px; height: 20px; display: block; overflow: visible; color: var(--purple); }
.pIcoon .pi-lijn { stroke: var(--purple); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pIcoon .pi-vul { fill: var(--lilac-soft); }
.pIcoon .pi-accent { fill: var(--lilac); }

/* Cijfer in de kop van een probleemkaart */
.infokaart__stat { color: var(--purple); font-weight: 700; letter-spacing: -.02em; }

/* Mockup onder de hero-tekst */
.lp-hero__mock { margin-top: clamp(30px, 4vw, 52px); }
.lp-hero__tekst { max-width: 720px; }
.lp-hero__tekst .lead { max-width: 62ch; }

    /* Chat blijft scrollbaar, maar scrollt zichzelf niet */
    .mock__msgs {
      flex: 0 0 400px;              /* vaste hoogte: het venster groeit niet mee */
      height: 400px; max-height: 400px; overflow-y: auto;
      padding-bottom: 52px;
      justify-content: flex-start;  /* eerste bericht bovenaan, zoals in elk chatvenster */
    }
    /* Verborgen berichten nemen geen ruimte in, zodat het eerste bericht bovenaan begint */
    .mock__msgs > .nog-niet { display: none; }
    /* De logostrip bedekt de onderste 80px van de mockup: die ruimte laten we leeg */
    .lp-hero__mock .mock__window { padding-bottom: 0; }
    .lp-hero__mock .mock { padding-bottom: 0; }
    @media (max-width: 700px) { .mock__msgs { max-height: 340px; } }
    /* Kanaalrij: de iconen van de homepage, overlappend */
    .kanaalring { position: relative; width: 300px; height: 300px; margin: 0 auto; }
    .kanaalring__pad { position: absolute; inset: 0; width: 100%; height: 100%; animation: ringDraai 26s linear infinite; }
    @keyframes ringDraai { to { transform: rotate(360deg); } }
    .kanaalring__kern {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
      width: 64px !important; height: 64px !important;
    }
    .kanaalring .kanaal { position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -30px; }
    .kanaalring .kanaal--1 { transform: translate(0, -112px); }
    .kanaalring .kanaal--2 { transform: translate(112px, 0); }
    .kanaalring .kanaal--3 { transform: translate(0, 112px); }
    .kanaalring .kanaal--4 { transform: translate(-112px, 0); }
    @media (max-width: 560px) {
      .kanaalring { width: 240px; height: 240px; }
      .kanaalring__kern { width: 52px !important; height: 52px !important; }
      .kanaalring .kanaal { margin: -26px 0 0 -26px; }
      .kanaalring .kanaal--1 { transform: translate(0, -90px); }
      .kanaalring .kanaal--2 { transform: translate(90px, 0); }
      .kanaalring .kanaal--3 { transform: translate(0, 90px); }
      .kanaalring .kanaal--4 { transform: translate(-90px, 0); }
    }
    .kanaalrij { display: flex; align-items: center; justify-content: center; gap: 0; padding: 24px 0; }
    .kanaal { width: 60px; height: 60px; border-radius: 16px; display: block; flex: none;
              box-shadow: 0 12px 26px -16px rgba(27,20,48,.5); background: #fff; }
    .kanaal svg { width: 100%; height: 100%; display: block; border-radius: 16px; }
    .kanaalring .kanaal { animation: kanaalFade .5s ease both; }
    @keyframes kanaalFade { from { opacity: 0; } to { opacity: 1; } }
    .kanaal--2 { animation-delay: .18s; } .kanaal--3 { animation-delay: .36s; } .kanaal--4 { animation-delay: .54s; }
    @keyframes kanaalOp { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
    /* Stippellijn die tussen de kanalen doorloopt */
    .kanaalstreep { flex: none; width: 15px; height: 2px; position: relative; overflow: hidden; }
    .kanaalstreep::before {
      content: ""; position: absolute; inset: 0;
      background-image: linear-gradient(90deg, var(--lilac) 0 5px, transparent 5px 10px);
      background-size: 10px 2px;
      animation: kanaalStroom 1.4s linear infinite;
    }
    @keyframes kanaalStroom { to { background-position-x: 10px; } }
    @media (max-width: 560px) { .kanaal { width: 52px; height: 52px; } .kanaalstreep { width: 12px; } }
    @media (prefers-reduced-motion: reduce) { .kanaal, .kanaalstreep::before, .kanaalring__pad { animation: none; } }



    .mock__msgs > * { flex: none; }

    /* JS bepaalt wanneer een bericht verschijnt; de animatie start op dat moment */
    .mock.is-playing .mock__msgs > * { animation: none !important; opacity: 0; }
    .mock.is-playing .mock__msgs > *:not(.nog-niet) { animation: msg-in .45s ease forwards !important; }

    /* Twee dagen later belt dezelfde cliënt: zelfde dossier, ander kanaal */
    .mock.is-playing .mock__call { animation: msg-in .5s ease 13.5s forwards; }
    .mock.is-playing .mock__callAvatar { animation: call-pulse 1.8s ease-out 14.1s infinite; }
    

/* ---------- Klantverhaal, verhuisd uit het blok van voor-zorg ---------- */
.verhalen { display: grid; grid-template-columns: 46% 1fr; background: var(--purple-deep); border-radius: var(--radius-lg); overflow: hidden; max-width: none; margin: 0; min-height: 440px; }
@media (max-width: 820px) { .verhalen { grid-template-columns: 1fr; } }
.verhalen__beeld { position: relative; min-height: 320px; background: var(--purple-night); }
.verhalen__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s ease; }
.verhalen__foto.is-actief { opacity: 1; }
.verhalen__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 55%, rgba(46,33,72,.75) 100%); pointer-events: none; }
@media (max-width: 820px) { .verhalen__beeld { min-height: 260px; } }
@media (max-width: 820px) { .verhalen__beeld::after { background: linear-gradient(180deg, transparent 55%, rgba(46,33,72,.85) 100%); } }
.verhalen__logo { position: absolute; left: 20px; bottom: 18px; z-index: 2; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--white); padding: 6px 13px; border-radius: 40px; background: rgba(27,20,48,.5); backdrop-filter: blur(8px); }
.verhaal__resultaat { font-size: .95rem; font-weight: 600; color: var(--lilac); margin-bottom: 12px; letter-spacing: -.005em; }
.verhalen__tekst { padding: clamp(30px, 4vw, 52px); display: flex; flex-direction: column; color: var(--white); }
.verhaal { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; animation: verhaalIn .45s ease both; }
@media (prefers-reduced-motion: reduce) { .verhaal { animation: none; } }
.verhaal figcaption strong { display: block; font-weight: 560; font-size: 1rem; }
.verhaal figcaption span { font-size: .9rem; color: var(--white-70); }
@media (min-width: 1100px) { .verhalen__tekst { padding: clamp(40px, 4.5vw, 64px); } }
/* ---------- Lopende tekst in een sectie ---------- */
/* .lp-tekst is het blok waar de artikeltekst van de overgezette pagina's in
   staat. Het had geen enkele regel, waardoor die secties kale lopende tekst
   waren. Zelfde leesbreedte als .lp-faq, zodat een pagina een maat houdt. */
.lp-tekst { max-width: 780px; margin: 0 auto; }
.lp-tekst > *:first-child { margin-top: 0; }
.lp-tekst > *:last-child { margin-bottom: 0; }
.lp-tekst p {
  margin: 0 0 18px;
  font-size: 1.02rem; line-height: 1.72; color: var(--ink-60);
}
.lp-tekst p strong { color: var(--ink); font-weight: 560; }
/* Alleen tussenkoppen in de lopende tekst zelf. Zonder de > raakt deze regel
   ook de h3 in een infokaart, uitgelicht of stapreeks die binnen een lp-tekst
   staat: die kregen 32px bovenmarge terwijl het pictogram ernaast bleef staan,
   en dan lijkt het icoon 33px te hoog. Gemeten op veiligheid-en-privacy. */
.lp-tekst > h3 {
  margin: 32px 0 10px;
  font-size: 1.14rem; line-height: 1.35; letter-spacing: -.01em;
}
/* De inleiding onder de hero mag zwaarder wegen dan de rest. */
.lp-tekst--intro p { font-size: 1.12rem; line-height: 1.68; color: var(--ink); }
.lp-tekst--intro p + p { color: var(--ink-60); }

/* Opsommingen: geen kale bolletjes maar een lila streep, in dezelfde toon als
   .check maar neutraal, want deze lijsten zijn niet altijd bevestigend. */
.lp-tekst ul:not(.check) { list-style: none; margin: 0 0 22px; padding: 0; }
.lp-tekst ul:not(.check) li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 1.02rem; line-height: 1.65; color: var(--ink-60);
}
.lp-tekst ul:not(.check) li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 10px; height: 2px; border-radius: 2px; background: var(--lilac);
}
.lp-tekst ul:not(.check) li strong { color: var(--ink); font-weight: 560; }

/* Genummerde reeksen houden hun cijfer, in lila en met tabulaire cijfers zodat
   ze onder elkaar uitlijnen. */
.lp-tekst ol { list-style: none; margin: 0 0 22px; padding: 0; counter-reset: lp; }
.lp-tekst ol li {
  position: relative; padding-left: 34px; margin-bottom: 12px;
  font-size: 1.02rem; line-height: 1.65; color: var(--ink-60);
  counter-increment: lp;
}
.lp-tekst ol li::before {
  content: counter(lp); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lilac-soft); color: var(--purple);
  font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.lp-tekst a:not(.btn) { color: var(--purple); text-underline-offset: 3px; }

/* Een .uitgelicht binnen de lopende tekst houdt zijn eigen lichte kleuren. De
   regels hierboven hebben dezelfde specificiteit maar staan later in dit
   bestand, dus zonder deze blokken wordt donkergrijze tekst op donkerpaars
   gezet. Gemeten op probleem-overzicht: rgba(33,33,33,.72) op rgb(46,33,72). */
.lp-tekst .uitgelicht h3 { color: var(--white); }
.lp-tekst .uitgelicht p { color: var(--white-70); }
.lp-tekst .uitgelicht ul:not(.check) li { color: var(--white-70); }
.lp-tekst .uitgelicht ul:not(.check) li strong { color: var(--white); }
.lp-tekst .uitgelicht p strong { color: var(--white); }

/* Lichte variant: hetzelfde lichtpaarse verloop als de stappen en .figuur__vlak,
   met een lila streep links. Voor een opmerking die opvalt zonder de pagina in
   tweeën te hakken, wat een donker blok midden in de tekst wel doet. */
.uitgelicht--licht {
  position: relative;
  background: none; border: 0; border-radius: 0;
  padding: 4px 0 4px clamp(22px, 2.4vw, 28px);
  margin: 28px 0;
}
.uitgelicht--licht { color: var(--ink); }
.uitgelicht--licht::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--lilac);
}
.uitgelicht--licht h3 { margin: 0 0 9px; font-size: 1.06rem; font-weight: 560; }
.uitgelicht--licht p { margin: 0 0 12px; font-size: .97rem; line-height: 1.62; }
.uitgelicht--licht p:last-child { margin-bottom: 0; }
.uitgelicht--licht h3 { color: var(--ink); }
.uitgelicht--licht p { color: var(--ink-60); }
.uitgelicht--licht p strong { color: var(--ink); }
.uitgelicht--licht a:not(.btn) { color: var(--purple); }
.lp-tekst .uitgelicht--licht h3 { color: var(--ink); }
.lp-tekst .uitgelicht--licht p { color: var(--ink-60); }
.lp-tekst .uitgelicht--licht p strong { color: var(--ink); }
.lp-tekst .uitgelicht--licht a:not(.btn) { color: var(--purple); }
/* Zonder deze regel wint .lp-tekst p strong met var(--ink): donkergrijs op
   donkerpaars, wat als een vlek leest. Gemeten rgb(33,33,33) op rgb(46,33,72). */
.lp-tekst .uitgelicht a:not(.btn) { color: var(--lilac); }

/* Een wit tekstkader in een donkere sectie. .blok--dark p en .blok--dark
   .lp-tekst p staan allebei eerder in dit bestand, dus zonder deze regels
   wordt de tekst wit op wit. Moet na het .lp-tekst-blok blijven staan. */
.blok--dark .prose { background: var(--white); border-color: var(--line); }
.blok--dark .prose p,
.blok--dark .prose li,
.blok--dark .lp-tekst .prose p,
.blok--dark .lp-tekst .prose ul:not(.check) li { color: var(--ink-60); }
.blok--dark .prose h2,
.blok--dark .prose h3,
.blok--dark .prose strong,
.blok--dark .lp-tekst .prose p strong { color: var(--ink); }
.blok--dark .prose a:not(.btn),
.blok--dark .lp-tekst .prose a:not(.btn) { color: var(--purple); }

/* Op een donker blok neemt de tekst de lichte kleuren over. */
.blok--dark .lp-tekst p,
.blok--dark .lp-tekst ul li,
.blok--dark .lp-tekst ol li { color: var(--white-70); }
.blok--dark .lp-tekst p strong,
.blok--dark .lp-tekst ul li strong { color: var(--white); }
.blok--dark .lp-tekst ol li::before { background: rgba(162,128,255,.18); color: var(--lilac); }


/* ---------- Partnerlogo's in een sectie ---------- */
/* De footer heeft zijn eigen variant: die staat op donker en filtert de logo's
   naar wit. Hier staan ze op een lichte achtergrond, dus grijs met een lage
   dekking, en bij hover iets sterker. De maten zijn gelijk aan de footer,
   inclusief de bredere WhatsApp-mark. */
.partners { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 28px; }
.partners__label {
  font-size: .74rem; font-weight: 560; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-40);
}
.partners__logos { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 18px; }
.partners__logo { display: inline-flex; align-items: center; }
/* Woordmerken verschillen sterk in verhouding, dus staat de breedte per logo
   in partners.json en komt hij hier binnen als --logo-breed. Zonder dat werd
   het Teams-logo 90x17 waar de rest 90x24 is. */
.partners__logo img {
  width: var(--logo-breed, 90px); height: auto; max-height: 26px;
  object-fit: contain; display: block;
  filter: grayscale(1); opacity: .5; transition: opacity .18s ease, filter .18s ease;
}
a.partners__logo:hover img { opacity: .95; filter: grayscale(0); }
/* Een vierkant beeldmerk naast liggende woordmerken: even hoog houden, niet
   even breed, anders wordt het een postzegel tussen de rest. */
.partners__logo--vierkant img { width: auto; height: 26px; max-height: 26px; }
.partners__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-40); opacity: .45; }
@media (max-width: 560px) {
  .partners { gap: 10px 14px; }
  .partners__logos { gap: 14px; }
  .partners__logo img { width: calc(var(--logo-breed, 90px) * .82); }
  .partners__dot { display: none; }
}

/* ---------- Facebook-knop voor de aanmelding bij Meta ---------- */
/* De kleur en de maten zijn die van Meta zelf; die mogen niet naar de huisstijl
   toe getrokken worden, want gebruikers herkennen de knop eraan. */
.btn--facebook {
  background: #1877f2; border: 0; border-radius: 4px; color: #fff;
  font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 700;
  height: 40px; padding: 0 24px; min-width: 300px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .18s ease;
}
.btn--facebook:hover { background: #166fe0; }
.btn--facebook svg { width: 18px; height: 18px; flex: none; }
@media (max-width: 420px) { .btn--facebook { min-width: 0; width: 100%; } }

/* De knop staat in een eigen regel met een korte toelichting eronder, zodat
   duidelijk is waar je heen gaat voordat je klikt. */
.stap__actie { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 22px 0 24px; }
.stap__actieNoot { font-size: .86rem; line-height: 1.5; color: var(--ink-60); }

/* Tussenkop binnen een sectie, voor een tweede blok onder het eerste. Kleiner
   dan een h2 en met lucht erboven, zodat het als onderverdeling leest en niet
   als nieuwe sectie. */
.blok__subkop {
  margin: 46px 0 18px; text-align: center;
  font-size: 1.06rem; font-weight: 560; letter-spacing: -.01em; color: var(--ink);
}
.blok--dark .blok__subkop { color: var(--white); }



/* ---------- Prijsvergelijking ---------- */
/* Een vergelijkingstabel buiten .prose, dus over de volle blokbreedte, met
   drie smalle kolommen voor de pakketten en een brede voor de functie. */
.tabelrol { margin: 30px 0 0; overflow-x: auto; }
.vergelijk--prijs { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .95rem; }
.vergelijk--prijs thead th { padding-bottom: 16px; vertical-align: bottom; }
.vergelijk--prijs tbody th { width: auto; font-weight: 400; color: var(--ink-60); }
.vergelijk--prijs td { width: 15%; text-align: center; font-size: 1.06rem; }
.vergelijk__plan { text-align: center !important; width: 15%; }
.vergelijk__planNaam { display: block; font-size: .92rem; font-weight: 560; color: var(--ink); text-transform: none; letter-spacing: 0; }
.vergelijk__planPrijs { display: block; margin-top: 2px; font-size: .8rem; color: var(--ink-40); font-weight: 400; letter-spacing: 0; }
.vergelijk__plan--uit .vergelijk__planNaam { color: var(--purple); }
/* De kolom van het meest gekozen pakket krijgt een eigen vlak, zodat je hem
   in een lange tabel niet kwijtraakt. */
.vergelijk--prijs tr > *:nth-child(3) { background: rgba(84, 61, 125, .05); }
.vergelijk__groep th {
  padding-top: 26px; border-bottom: 0;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-40);
}
.vergelijk__groepKop { display: inline-flex; align-items: center; gap: 9px; }
.vergelijk__groepKop svg { width: 17px; height: 17px; color: var(--purple); }
.vergelijk--prijs .ja { color: #1E6B2C; }
.vergelijk--prijs .nee { color: rgba(33, 33, 33, .3); }
@media (max-width: 620px) { .vergelijk--prijs { font-size: .9rem; } }

/* ---------- Toewijzen-visual ---------- */
.assign { display: flex; align-items: center; gap: 14px; opacity: 1; max-width: 100%; }
@media (max-width: 400px) {
  .assign { gap: 10px; }
  .assign__card { min-width: 0 !important; width: auto !important; flex: 1 1 auto; }
}

/* ---------- Apparaten: hetzelfde klantbeeld op laptop en telefoon ---------- */
.devices-svg { width: 100%; height: auto; max-height: 100%; display: block; }
.dev-bubbel { opacity: 0; }
.devices-svg.is-anim .dev-bubbel { animation: devLus 6.4s cubic-bezier(.33,0,.2,1) infinite; }
.devices-svg.is-anim .dev-bubbel--2 { animation-delay: .6s; }
.devices-svg.is-anim .dev-bubbel--3 { animation-delay: 1.25s; }
.devices-svg.is-anim .dev-bubbel--4 { animation-delay: 1.85s; }
@keyframes devLus {
  0%   { opacity: 0; transform: translateY(5px); }
  8%   { opacity: 1; transform: none; }
  74%  { opacity: 1; transform: none; }
  86%, 100% { opacity: 0; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .dev-bubbel { opacity: 1; } .devices-svg.is-anim .dev-bubbel { animation: none; } }

/* ---------- Sentiment over meerdere gesprekken ---------- */
/* De momenten staan naast elkaar met een verbindingslijn ertussen, zodat je
   ziet dat het om dezelfde klant over langere tijd gaat. Het totaal staat
   apart en niet als extra moment, want het is een conclusie en geen gesprek. */
.sentiment { margin: 26px 0 0; }
.sentiment__reeks {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
}
.sentiment__moment {
  position: relative;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 20px 20px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
/* de lijn tussen twee momenten; de laatste krijgt er geen */
.sentiment__moment::after {
  content: ""; position: absolute; right: -18px; top: 50%;
  width: 18px; height: 2px; background: var(--lilac); opacity: .5;
}
.sentiment__moment:last-child::after { display: none; }
@media (max-width: 700px) { .sentiment__moment::after { display: none; } }

/* Het gezicht met het kanaal als badge erop, zoals bij een contact in de app:
   je ziet meteen dat het steeds dezelfde klant is en via welk kanaal. */
.sentiment__wie2 { position: relative; display: inline-block; margin-bottom: 12px; }
.sentiment__gezicht {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block;
  background: var(--mist);
}
.sentiment__kanaal {
  position: absolute; right: -8px; top: -8px;
  width: 24px; height: 24px; border-radius: 7px; overflow: hidden;
  background: var(--white); box-shadow: 0 0 0 2px var(--white);
  display: grid; place-items: center;
}
.sentiment__kanaal img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sentiment__wie { font-size: 1rem; font-weight: 560; color: var(--ink); }
.sentiment__wanneer { font-size: .82rem; color: var(--ink-40); }
.sentiment__waarover { font-size: .92rem; line-height: 1.5; color: var(--ink-60); margin: 6px 0 12px; }

.sentiment__pil {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 560; letter-spacing: .01em;
}
.sentiment__pil::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sentiment__pil--positief { background: rgba(30, 107, 44, .10); color: #1E6B2C; }
.sentiment__pil--neutraal { background: rgba(33, 33, 33, .07); color: var(--ink-60); }
.sentiment__pil--negatief { background: rgba(168, 74, 20, .10); color: #A84A14; }

/* Het totaal draagt de conclusie in tekst links en hetzelfde verloop als
   lijn rechts: de tekst zegt wat het patroon is, de lijn laat het zien. */
/* De conclusie onder de reeks: wat die losse gesprekken bij elkaar zeggen.
   Geen paneel met een tweede grafiek erin, maar een tekstblok met de uitkomst
   in de kop. */
.samenvatblok { margin-top: 22px; padding: 26px 28px; background: var(--mist); border-radius: var(--radius-lg); }
.samenvatblok__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.samenvatblok__kop h3 { margin: 0; font-size: 1.08rem; font-weight: 560; color: var(--ink); }
.samenvatblok p { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--ink-60); max-width: 76ch; }
.samenvatblok__na { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid var(--line); font-size: .92rem !important; }
.blok--tint .sentiment__moment { background: var(--white); }


/* ---------- Tweeluik: het probleem naast wat je eraan kunt doen ---------- */
/* Twee blokken naast elkaar, met kleur als het verschil: grijs voor de kant
   die vastloopt, amber voor de kant waar je zelf aan zet bent. Zonder die
   kleur leest het als twee gelijke lijstjes en gaat het onderscheid verloren. */
.tweeluik { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 26px 0 0; }
.tweeluik__blok { border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); }
.tweeluik__kop { display: flex; align-items: center; gap: 11px; margin: 0 0 16px; }
.tweeluik__kop h3 { margin: 0; font-size: 1.06rem; font-weight: 560; }
.tweeluik__merk { width: 30px; height: 30px; flex: none; border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.tweeluik__merk img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tweeluik__blok p { margin: 0 0 12px; font-size: .95rem; line-height: 1.6; color: var(--ink-60); }
.tweeluik__blok ul { list-style: none; margin: 0; padding: 0; }
.tweeluik__blok li { position: relative; padding-left: 24px; margin-bottom: 9px; font-size: .95rem; line-height: 1.55; color: var(--ink-60); }
.tweeluik__blok li:last-child { margin-bottom: 0; }
.tweeluik__blok li strong { color: var(--ink); font-weight: 560; }
.tweeluik__blok a { color: var(--purple); }

.tweeluik__blok--vast { background: var(--mist); }
.tweeluik__blok--vast li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 11px; height: 2px; border-radius: 2px; background: var(--ink-40);
}
.tweeluik__blok--doen { background: rgba(196, 112, 40, .09); }
.tweeluik__blok--doen a { color: #8A4A12; }
.tweeluik__blok--doen li::before {
  content: ""; position: absolute; left: 3px; top: .28em;
  width: 6px; height: 11px; border: solid #A85E1E; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* De donkere tegenhanger van --vast. Lichtpaars naast lichtgrijs gaf te
   weinig verschil; het gaat hier juist om de tegenstelling. */
.tweeluik__blok--sterk { background: var(--purple-deep); }
.tweeluik__blok--sterk .tweeluik__kop h3 { color: var(--white); }
.tweeluik__blok--sterk p { color: var(--white-70); }
.tweeluik__blok--sterk li { color: var(--white-70); }
.tweeluik__blok--sterk li strong { color: var(--white); }
.tweeluik__blok--sterk a { color: var(--lilac); }
.tweeluik__blok--sterk li::before {
  content: ""; position: absolute; left: 3px; top: .28em;
  width: 6px; height: 11px; border: solid var(--lilac); border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* Het merkvakje draagt hier een pictogram in plaats van een logo. Eigen
   klasse, want probleem-privetelefoons heeft er een van 22px in staan. */
.tweeluik__merk--icoon svg { width: 20px; height: 20px; display: block; }
.tweeluik__blok--vast .tweeluik__merk--icoon svg { color: var(--ink-40); }
.tweeluik__blok--sterk .tweeluik__merk--icoon svg { color: var(--lilac); }

.tweeluik__na { margin: 18px 0 0; font-size: .95rem; line-height: 1.6; color: var(--ink-60); text-align: center; }


/* Een uitgelicht dat direct in de wrap staat in plaats van in een lp-tekst:
   even breed als het blok erboven waar hij bij hoort. Zonder dit sprong hij
   142px naar binnen ten opzichte van de sentimentreeks. */
.uitgelicht--breed { max-width: none; margin-left: 0; margin-right: 0; }

/* ---------- Tijdlijn ---------- */
/* Een rij momenten met een doorlopende lijn erachter, zodat je in een oogopslag
   ziet dat het om een ontwikkeling gaat en niet om losse feiten. */
.tijdlijn { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin: 30px 0 0; }
.tijdlijn__item { position: relative; padding-top: 30px; }
.tijdlijn__item::before {
  content: ""; position: absolute; top: 8px; left: 0; right: -22px; height: 2px;
  background: var(--line);
}
.tijdlijn__item:last-child::before { right: 0; }
.tijdlijn__punt {
  position: absolute; top: 3px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lilac); box-shadow: 0 0 0 4px var(--white);
}
.tijdlijn__jaar { display: block; font-size: .84rem; font-weight: 620; letter-spacing: .04em; color: var(--purple); margin-bottom: 5px; }
.tijdlijn__item h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 560; }
.tijdlijn__item p { margin: 0; font-size: .94rem; line-height: 1.58; color: var(--ink-60); }
.blok--tint .tijdlijn__punt { box-shadow: 0 0 0 4px var(--mist); }

/* Een illustratie hoeft niet de volle breedte; deze blijft op zijn eigen maat. */
.figuur--klein { max-width: 560px; margin-left: auto; margin-right: auto; }
/* Zonder vlak eromheen: de illustratie heeft eigen witruimte, en het bijschrift
   lijnt links uit met de illustratie in plaats van gecentreerd te zweven. */
.figuur--kaal { max-width: 336px; margin: 30px auto 0; }
.figuur--kaal img { width: 100%; height: auto; display: block; }
.figuur--kaal figcaption { margin-top: 14px; text-align: left; }
/* Het merkteken staat vrij in het beeldvlak, met lucht eromheen; het is een
   vorm om naar te kijken en niet een plaatje dat het vlak moet vullen. */
/* Een merkteken hoeft geen vlak eromheen; het is zelf de vorm. */
.lp-split__beeld--leeg {
  background: none; border: 0; box-shadow: none;
  aspect-ratio: auto; padding: clamp(20px, 3vw, 40px) 0;
}
.lp-split__beeld .merkuitleg__beeld {
  width: auto; height: auto; max-height: 210px; max-width: 60%;
  object-fit: contain; display: block;
}


/* ---------- Korte melding ---------- */
/* Een terzijde dat opvalt zonder een heel vlak op te eisen: pictogram links,
   tekst rechts, op een regel of twee. Voor iets wat je moet weten maar wat de
   pagina niet hoeft te onderbreken. */
.melding {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; margin: 26px 0 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.melding__icoon {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--lilac-soft); display: grid; place-items: center;
}
.melding__icoon svg { width: 20px; height: 20px; color: var(--purple); display: block; }
.melding__tekst { min-width: 0; }
.melding h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 560; color: var(--ink); }
.melding p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-60); }
.melding a { color: var(--purple); }
@media (max-width: 520px) { .melding { flex-direction: column; gap: 12px; } }