/* Homepage — redesign 2026. Secties volgen de wireframe-annotaties.
   Leest alleen tokens; geen losse kleurcodes. */

/* --- gedeeld ------------------------------------------------------------- */

.sec-head { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
/* Lopende tekst en intro's in --c-ink (#2C4351) op 16px/18px, zoals het wireframe (.horizon p / .lead).
   --c-ink-muted is voor bijschriften en meta, niet voor lopende tekst. */
.sec-head p { color: var(--c-ink); }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--center p { text-align: center; }

/* Beeldplaatshouder — zolang de screenshots er niet zijn, benoemt hij wat er komt. */
.shot {
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: var(--space-5);
  background: var(--c-surface-2);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-lg);
  color: var(--c-ink-faint);
  font-size: var(--text-sm);
  text-align: center;
}
.shot--tall { min-height: 320px; }
/* Voorlopig onzichtbaar (Jacq, 03-10-2026): de plaatshouders houden hun plek (visibility, geen display:none),
   zodat de layout blijft staan, en de tekst met de beeldaanwijzing blijft in de HTML. Weghalen zodra de beelden er zijn. */
.shot { visibility: hidden; }

/* Openstaande waarde uit de wireframe: zichtbaar, niet verzonnen. */
.todo {
  background: repeating-linear-gradient(-45deg, var(--c-surface-2), var(--c-surface-2) 6px, transparent 6px, transparent 12px);
  border-bottom: 1px dashed var(--c-warning);
  color: var(--c-warning);
  padding-inline: .25em;
  font-size: .9em;
}

/* --- 1. hero -------------------------------------------------------------- */

.hero { padding-block: var(--space-8) var(--space-7); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm); color: var(--c-ink-muted); margin-bottom: var(--space-4);
}
.hero__stats li:not(:last-child)::after { content: "·"; margin-left: var(--space-3); color: var(--c-ink-faint); }
.hero h1 { margin-bottom: var(--space-4); }
.hero__intro { font-size: var(--text-md); color: var(--c-ink); margin-bottom: var(--space-5); }
.hero__ticks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); color: var(--c-ink-muted); }
.hero__ticks li::before { content: "✔"; color: var(--c-success); margin-right: .45em; }

@media (max-width: 860px) { .hero__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* --- 2. logobalk ---------------------------------------------------------- */

/* Doorlopende logobalk. De annotatie in de wireframes: "doorlopende carrousel
   met graded logo's, de rand vervaagt via een gradient-mask". Het spoor bevat
   twee identieke helften en schuift precies één helft op; daardoor is de sprong
   terug onzichtbaar. */

.logos {
  padding-block: var(--space-6);
  background: var(--c-surface-2);
  border-block: 1px solid var(--c-line-soft);
  overflow: hidden;
}
.logos__title {
  text-align: center;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0 auto var(--space-5);   /* auto: p heeft max-width 68ch (base.css), anders staat de titel links */
}

.logos__viewport {
  /* Vervagende randen; de dubbele opgave dekt browsers zonder unprefixed mask. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logos__track {
  display: flex;
  width: max-content;
  gap: var(--space-5);
  animation: logos-scroll 45s linear infinite;
}
.logos:hover .logos__track { animation-play-state: paused; }

/* Logo's als bij skedda.com: los op de band, grijs en wat teruggenomen; volle kleur bij
   hover of focus. De maat per logo rekent _sections.php uit (zelfde oppervlak, niet
   dezelfde hoogte); hier alleen het vak eromheen, zodat de rij één hoogte houdt. */
.logos__track { gap: var(--space-7); align-items: center; }
.logos__track li {
  flex: none;
  display: grid;
  place-items: center;
  height: 56px;
}
.logos__track a { display: grid; place-items: center; height: 100%; padding-inline: var(--space-2); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.logos__track img {
  display: block;
  max-height: 48px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.logos__track a:is(:hover, :focus-visible) img { filter: none; opacity: 1; }
.logos__name {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  color: var(--c-ink-muted);
  white-space: nowrap;
}

@keyframes logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* precies de helft: de tweede kopie staat dan waar de eerste begon */
  to   { transform: translate3d(calc(-50% - var(--space-7) / 2), 0, 0); }   /* halve gap: zie .logos__track */
}

/* Wie beweging heeft uitgezet, krijgt een gewone, volledig leesbare rij. */
@media (prefers-reduced-motion: reduce) {
  .logos__viewport { -webkit-mask-image: none; mask-image: none; }
  .logos__track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .logos__track li[aria-hidden="true"] { display: none; }
}

/* --- 3. belofte + principes ---------------------------------------------- */

.principes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-6); }
.principe h3 { margin-bottom: var(--space-2); }
.principe p { color: var(--c-ink); font-size: var(--text-base); }

/* --- quotes --------------------------------------------------------------- */

.quote {
  border-left: 3px solid var(--c-accent);
  padding-left: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.quote blockquote { margin: 0; font-size: var(--text-md); color: var(--c-ink-strong); max-width: 62ch; }
.quote figcaption { font-size: var(--text-sm); color: var(--c-ink-muted); }
.quote figcaption b { color: var(--c-ink-strong); font-weight: var(--fw-medium); }
/* Oneliner op een sectorpagina zonder passende klantquote: groot en zonder aanhalingstekens of naam, zodat het
   niet als citaat leest (Jacq, 03-10-2026). Zelfde accentlijn als de quote. */
.quote-oneliner {
  margin: 0; border-left: 3px solid var(--c-accent); padding-left: var(--space-5);
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-semi);
  line-height: var(--lh-snug); color: var(--c-ink-strong); max-width: 22ch;
}

/* --- 5. stappen (slider) --------------------------------------------------
   Naar Skedda: per dia links het beeld, rechts stap/kop/tekst; eronder twee ronde pijlknoppen
   rond een voortgangsbalk in het i-Reserve-verloop (merkgroen → merkblauw), met de
   staplabels eronder. js/redesign/steps-slider.js zet .is-slider; zonder JS staan de stappen
   onder elkaar (de oude weergave). */

.steps__track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.step {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: center;
  max-width: none;                   /* base.css begrenst elk li tot 68ch; een dia is volle breedte */
}
.step__visual { min-height: 320px; }
/* Screenshot bij een stap (rd_meta2 = beeldpad): zelfde rand en hoeken als de andere screenshots. */
.step__visual:has(.step__img) { min-height: 0; }
.step__img { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-md); }   /* subtiele schaduw (Jacq, 29-09-2026) */
.step__n {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semi);
  color: var(--c-accent); letter-spacing: var(--tracking-label); margin-bottom: var(--space-2);
}
.step h3 { margin-bottom: var(--space-2); }
.step p { color: var(--c-ink); }

/* slider-modus */
.steps.is-slider:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 6px; border-radius: var(--radius-lg); }
.steps.is-slider .steps__viewport { overflow: hidden; }
.steps.is-slider .steps__track { flex-direction: row; gap: 0; transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.steps.is-slider .step { flex: 0 0 100%; padding-inline: 2px; }

.steps__nav { display: flex; align-items: flex-start; gap: var(--space-5); margin-top: var(--space-7); }
.steps__nav[hidden] { display: none; }
.steps__arrow {
  flex: 0 0 auto; width: 48px; height: 48px; margin-top: -22px;   /* hart van de knop op de balk */
  display: grid; place-items: center; cursor: pointer;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 50%;
  color: var(--c-accent); transition: background .2s, border-color .2s, opacity .2s;
}
.steps__arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.steps__arrow:hover:not(:disabled) { border-color: var(--c-accent); background: var(--c-accent-soft); }
.steps__arrow:disabled { opacity: .35; cursor: default; }

.steps__progress { flex: 1 1 auto; min-width: 0; }
.steps__bar {
  position: relative; height: 5px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand-green) 22%, white), color-mix(in srgb, var(--brand-blue) 18%, white));   /* lichte versie van het verloop */
}
.steps__fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-blue));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}
.steps__labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: var(--space-3); }
.steps__label {
  background: none; border: 0; padding: var(--space-1) 0; cursor: pointer;
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--fw-semi);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-faint);
  transition: color .2s;
}
.steps__label:hover { color: var(--c-ink-muted); }
.steps__label.is-active { color: var(--brand-blue); }

@media (prefers-reduced-motion: reduce) {
  .steps.is-slider .steps__track, .steps__fill { transition: none; }
}
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; gap: var(--space-5); }
  .step__visual { min-height: 220px; }
  .steps__nav { gap: var(--space-3); }
  .steps__arrow { width: 40px; height: 40px; margin-top: -18px; }
  .steps__label { font-size: 10px; letter-spacing: .04em; }
}

/* --- 6. featureblokken ---------------------------------------------------- */

.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: center;
}
.feature + .feature { margin-top: var(--section-gap); }
.feature--flip .feature__visual { order: -1; }
.feature h2 { margin-bottom: var(--space-3); }
/* Klantcases op /klanten/ zijn h3 (onder de sectiekop): kleiner dan de sectiekop h2 (Jacq, 29-09-2026). */
.customer .feature h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); line-height: var(--lh-tight); font-weight: var(--fw-semi); letter-spacing: var(--tracking-tight); }
/* Kop als citaat (blocks met rd_options `quote`, /klanten/): kleiner dan een h2, met één groot
   lichtgrijs aanhalingsteken vóór de titel (links van de eerste regel), geen afsluitend teken (Jacq, 29-09-2026). */
.feature h2.feature__quote { position: relative; font-size: var(--text-xl); padding-left: 1.75em; }
.feature h2.feature__quote::before {
  content: "\201C"; position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-size: 3.6em; line-height: .9;
  color: var(--c-quote-mark);   /* maat en ruimte: waarden van Jacq (DevTools, 29-09-2026) */
  pointer-events: none;
}
.feature__text { color: var(--c-ink); margin-bottom: var(--space-5); }
/* Recht beeld op /updates/: afgeronde hoeken, dunne rand en lichte schaduw (Jacq, 01-10-2026). */
.feature__img--framed { display: block; width: 100%; height: auto; border: 1px solid var(--c-line); border-radius: var(--radius-lg); background: var(--c-surface); box-shadow: var(--shadow-md); }
/* Ondertitel onder de kop (/updates/, Jacq 01-10-2026). */
.feature__text.feature__sub { font-size: var(--text-lg); color: var(--c-ink-strong); font-weight: var(--fw-medium); margin-bottom: var(--space-3); }
/* Klantcases op /klanten/: tekst en reviewlink dichter op elkaar (Jacq, 29-09-2026). */
.customer .feature__text { margin-bottom: var(--space-2); }
.customer .feature__note { margin-top: var(--space-2); }
/* Bewuste uitzondering op de huisstijl (links blauw), alleen hier: de reviewlink is een bronvermelding, dus grijs
   (--c-ink-muted haalt WCAG AA op wit en grijs, 5,45 / 4,84:1). Bij hover de gewone linkhover met onderstreping (Jacq, 29-09-2026). */
.customer .feature__note a { color: var(--c-ink-muted); text-decoration: none; }
.customer .feature__note a:hover { color: var(--c-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.feature__points { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.feature__points li { font-size: var(--text-base); color: var(--c-ink); }
.feature__points b { color: var(--c-ink-strong); font-weight: var(--fw-medium); }

/* Gelaagd featurebeeld, nagebouwd naar moneybird.nl (feature-content__img--bare--skew).
   Een vierkant kader snijdt een binnenlaag van 200% breed af; die is gekanteld vanuit
   linksboven, zodat de screenshot schuin het kader in loopt en rechts en onder buiten
   beeld verdwijnt. Het mask fadet die twee randen zacht weg. Achter de screenshot ligt
   het app-frame (volle breedte), de screenshot zelf staat 12% naar binnen op 75%. */
.feature-media {
  width: 100%; max-width: 32rem;   /* = Moneybird's max-w-lg: onder de tekst niet breder dan 512px */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%), linear-gradient(#000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, #000 82%, transparent 100%), linear-gradient(#000 82%, transparent 100%);
          mask-composite: intersect;
}
.feature-media__inner {
  position: relative;
  width: 200%; aspect-ratio: 1 / 1;
  margin: 10% 0 0 5%;
  padding: 12% 0 0 12%;
  transform-origin: left top;
  transform: skew(10deg);
  rotate: -5deg;
}
.feature-media__back {
  position: absolute; inset: 0;
  background: no-repeat top left / 100% auto;
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.1);
}
.feature-media__front { position: relative; display: block; width: 75%; max-width: none; height: auto; }
/* Eén beeld, geen app-frame erachter (Moneybird: --none): het beeld vult de laag en
   draagt zelf de rand en schaduw. Kanteling en fade blijven gelijk. */
.feature-media--single .feature-media__inner { padding: 3% 0 0 3%; }
.feature-media--single .feature-media__front {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: 1rem;
  box-shadow: 0 2px 16px rgb(0 0 0 / 0.1);
}

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .feature--flip .feature__visual { order: 0; }
  .feature-media { margin-inline: auto; }
}

/* --- 7. sectoren ---------------------------------------------------------- */

.sector-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.sector-card .shot { border: 0; border-radius: 0; min-height: 150px; }
.sector-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }
.sector-card p { font-size: var(--text-sm); color: var(--c-ink-muted); }

/* --- 8. voor / na --------------------------------------------------------- */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
/* Onder 625px: één kolom tegelijk, gewisseld met de knoppen (cmp-picker.js; de knopstijl is die van
   .cmp-pick in pages.css). Zonder script staan ze onder elkaar. De mobiele intro vervangt dan
   "links/rechts", en de kolomkop staat al op de knop. */
.compare__lead-mob { display: none; }
@media (min-width: 625px) { .cmp-pick--compare { display: none !important; } }
@media (max-width: 624px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
  [data-compare-js] .compare__lead { display: none; }
  [data-compare-js] .compare__lead-mob { display: block; }
  .compare[data-show="before"] .compare--after,
  .compare[data-show="after"] .compare--before { display: none; }
  .compare[data-show] .compare__col h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.compare__col {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.compare__col h3 { margin-bottom: var(--space-4); }
.compare__col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.compare__col li { display: grid; grid-template-columns: 1.4em 1fr; gap: var(--space-2); font-size: var(--text-sm); }
.compare__col li::before { font-weight: var(--fw-bold); }
.compare--before li::before { content: "✕"; color: var(--c-danger); }
.compare--after  li::before { content: "✓"; color: var(--c-success); }
.compare--after { border-color: var(--c-accent); }

/* --- 9. prijzen ----------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-5); }
/* Vier pakketten (/prijzen/) nooit als 3 + 1 (Jacq, 04-10-2026): vanaf 1100px alle vier naast elkaar,
   daaronder twee naast elkaar in een gecentreerd blok (niet over de volle breedte), smal onder elkaar.
   Het Managed-blok eronder krijgt dan dezelfde breedte (pages.css). Drie kaarten (homepage) blijven auto-fit. */
.plans:has(> .plan:nth-child(4):last-child) { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .plans:has(> .plan:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); max-width: var(--plans-2-max); margin-inline: auto; }
}
@media (min-width: 1100px) {
  .plans:has(> .plan:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); max-width: none; }
}
.plan {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.plan--hi { border: 2px solid var(--c-accent); }
.plan__name { font-family: var(--font-display); font-weight: var(--fw-semi); color: var(--c-ink-strong); }
.plan__price { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-semi); color: var(--c-ink-strong); }
.plan__price span { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--c-ink-muted); }
.plan p { font-size: var(--text-sm); color: var(--c-ink-muted); }
.plans-note { font-size: var(--text-sm); color: var(--c-ink-muted); margin-top: var(--space-5); }
/* Onder een gecentreerde kop ook gecentreerd (wireframe: modules op /prijzen/); auto omdat p max 68ch is. */
.sec-head--center ~ .plans-note { text-align: center; margin-inline: auto; }

/* --- 10. testimonials ----------------------------------------------------- */

.tms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--space-5); }
.tm {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.tm blockquote { margin: 0; font-size: var(--text-sm); color: var(--c-ink); }
.tm figcaption { font-size: var(--text-xs); color: var(--c-ink-muted); margin-top: auto; }
.tm figcaption b { display: block; color: var(--c-ink-strong); font-weight: var(--fw-medium); font-size: var(--text-sm); }
.trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); }
.trust-row__score { font-weight: var(--fw-medium); color: var(--c-ink-strong); }
.trust-row--center { justify-content: center; }
.trust-row__link { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust-row__link .ico { width: 18px; height: 18px; flex: none; }

/* --- 11. changelog -------------------------------------------------------- */

.changelog { display: flex; flex-direction: column; }
.changelog-more { margin-top: var(--space-4); }   /* "Bekijk alle updates" onder de lijst */
.changelog li {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--space-4);
  padding-block: var(--space-4); border-top: 1px solid var(--c-line-soft);
  font-size: var(--text-sm);
}
.changelog li:last-child { border-bottom: 1px solid var(--c-line-soft); }
/* Zonder datum (updates, Jacq 01-10-2026): één kolom, titel met ondertitel eronder. */
.changelog li.changelog__item--nowhen { grid-template-columns: 1fr; }
.changelog__title { display: block; color: var(--c-ink-strong); font-weight: var(--fw-medium); }
.changelog__sub { display: block; color: var(--c-ink-muted); }
.changelog__when { color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .changelog li { grid-template-columns: 1fr; gap: var(--space-1); } }

/* Variant split (homepage, wireframe sectie 10): links kop + intro + knop, rechts kaartjes. */
.changelog-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.changelog-split .sec-head { margin-bottom: var(--space-5); }
.changelog-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.changelog-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
}
.changelog-card__when { font-size: var(--text-sm); color: var(--c-ink-muted); font-variant-numeric: tabular-nums; }
.changelog-card__title { color: var(--c-ink-strong); font-weight: var(--fw-medium); }
.changelog-card__sub { font-size: var(--text-sm); color: var(--c-ink-muted); }
@media (max-width: 860px) { .changelog-split { grid-template-columns: 1fr; gap: var(--space-6); } }

/* --- 12. afsluitende CTA -------------------------------------------------- */

/* `.horizon .darkband` in de huisstijl. */
.cta-band {
  background: var(--c-dark);
  color: var(--c-ink-invert-strong);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
}
.cta-band h2 { color: var(--c-ink-invert-strong); max-width: 22ch; }
.cta-band p { color: var(--c-ink-invert); max-width: 56ch; }   /* huisstijl --ir-on-dark-text */
.cta-band .cluster { justify-content: center; }
.cta-band__phone { font-size: var(--text-sm); color: var(--c-ink-invert); }

/* Functiepagina: Wat het doet / Voor wie / Wat je instelt als drie kaarten met rand over de volle breedte, zoals de
   wireframe (.grid.c3 .card: 20px tussenruimte, rand, radius 12px, 22px binnenmarge), met het blauwe verloop van de
   artikelkaarten (blauw 100 → wit, .link-card__img--illu) (Jacq, 03-10-2026).
   Hier en niet in longtail.css: ook /demo/ gebruikt hem (04-10-2026). */
.grid--kaart { gap: 20px; }
@media (min-width: 900px) { .grid--kaart { grid-template-columns: repeat(3, 1fr); } }
.grid--kaart .principe { background: linear-gradient(to bottom, #d9ebfa, #ffffff); border: 1px solid var(--c-line); border-radius: 12px; padding: 22px; }
/* Link "Handleiding →" in de kaart lijnt uit met de tekst erboven (Jacq, 03-10-2026). */
.grid--kaart .principe .btn--quiet { padding-left: 0; padding-right: 0; }