/* Florijn v5 page system (BEG-1282). Loaded only by v5 pages (404, privacy,
   terms today; the 21 content pages from V5-2..V5-8 next). Deliberately
   separate from ../page.css and ../site.js, which the four live v4 pages load
   and which must stay byte-identical while v4 and v5 coexist in one deploy. */

:root {
  --f5-ink: #101B2D;
  --f5-body: #566072;
  --f5-muted: #716D64;
  --f5-blue: #2563EB;
  --f5-blue-hover: #1D4FD8;
  --f5-blue-light: #DBEAFE;
  --f5-blue-light-2: #F4F8FF;
  --f5-blue-light-3: #EAF1FF;
  --f5-blue-on-navy: #9DC0FF;
  --f5-body-on-navy: #C9D1DE;
  --f5-body-on-navy-2: #B7C0D0;
  --f5-sand: #F6F4EE;
  --f5-sand-2: #F4F3EF;
  --f5-sand-3: #ECEAE1;
  --f5-border: #E7E6DF;
  --f5-border-2: #F0EFEA;
  --f5-border-3: #F3F2EE;
  --f5-border-4: #DAD8CF;
  --f5-border-5: #D9D7CE;
  --f5-white: #FFFFFF;

  --f5-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f5-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- reset / base ---------- */
.f5-page * { box-sizing: border-box; }
.f5-page {
  margin: 0;
  font-family: var(--f5-font-body);
  color: var(--f5-body);
  background: var(--f5-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `.f5-page` is the whole-page wrapper (set on <body>). `clip`, not
     `hidden`, so position: sticky on the header keeps working (BEG-1303):
     clip on one axis alone doesn't force the other into a new scroll
     container the way hidden/auto/scroll do. Without a body margin reset,
     the UA default 8px body margin was the right-edge "white strip" (BEG-1303):
     every section background and the nav's border stopped 8px short because
     the whole page was inset, not because of a 100vw/100% mismatch. */
  overflow-x: clip;
}
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
.f5-page a { text-decoration: none; }
/* The default link colour is set at ZERO specificity, on purpose (BEG-1298).
   Written as `.f5-page a` it scores 0,1,1 and so beats every 0,1,0 component
   rule that colours an anchor (.f5-btn-primary, .f5-action-link, .f5-nav-link,
   .f5-oplossingen-item and the rest), which painted white button labels blue
   on a blue pill. `:where()` contributes nothing to specificity, so any
   component rule below wins on its own merits and a new component never has
   to fight this rule. */
:where(.f5-page a) { color: var(--f5-blue); }
:where(.f5-page a:hover) { color: var(--f5-blue-hover); }
.f5-page img { max-width: 100%; display: block; }
.f5-page h1, .f5-page h2, .f5-page h3 { font-family: var(--f5-font-head); }
/* The vertical-margin reset is ALSO zero-specificity, same reason and same
   pattern as the link-colour rule above (BEG-1303). Written as `.f5-page h1`
   etc. it scored 0,1,1 and beat every 0,1,0 component rule that sets its own
   margin-top (.f5-hero__h1, .f5-section-lead, .f5-oplossingen-item__desc and
   the rest), flattening the vertical rhythm on every v5 page. */
:where(.f5-page h1, .f5-page h2, .f5-page h3, .f5-page p) { margin: 0; }
.f5-page :focus-visible { outline: 2px solid var(--f5-blue); outline-offset: 2px; border-radius: 4px; }

.f5-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* breakpoint helpers, namespace shared with the design handoff */
.f5-burger { display: none; }
@media (max-width: 1040px) {
  .f5-d { display: none !important; }
  .f5-burger { display: inline-flex !important; }
}
@media (min-width: 1041px) {
  .f5-mob { display: none !important; }
}

/* ---------- header / nav ---------- */
.f5-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--f5-white);
  border-bottom: 1px solid var(--f5-sand-3);
  font-family: var(--f5-font-body);
  transition: box-shadow 0.25s ease;
}
.f5-header.is-scrolled { box-shadow: 0 8px 26px -14px rgba(16, 27, 45, 0.22); }

.f5-header__bar {
  max-width: 1180px;
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.f5-logo { display: inline-flex; align-items: center; gap: 8px; }
.f5-logo__mark { height: 26px; width: auto; }
.f5-logo__word {
  font-family: var(--f5-font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--f5-ink);
}

.f5-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
.f5-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--f5-ink);
  background: transparent;
  border: none;
  padding: 10px 12px;
  border-radius: 9px;
  cursor: pointer;
}
.f5-nav-trigger.is-open { color: var(--f5-blue); }
.f5-nav-chevron { display: inline-flex; transition: transform 0.2s ease; }
.f5-nav-trigger.is-open .f5-nav-chevron,
.f5-mobile-accordion-btn.is-open .f5-nav-chevron { transform: rotate(180deg); }
.f5-nav-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--f5-ink);
  padding: 10px 12px;
  border-radius: 9px;
}
.f5-nav-link:hover { color: var(--f5-blue); }
.f5-nav-divider {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--f5-border-4);
  margin: 0 10px 0 8px;
}
.f5-pill-ondernemer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--f5-muted);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--f5-sand-2);
}
.f5-pill-ondernemer:hover { color: var(--f5-ink); background: var(--f5-sand-3); }

.f5-actions { display: flex; align-items: center; gap: 18px; }
.f5-action-link { font-size: 14.5px; font-weight: 600; color: var(--f5-body); }
.f5-action-link:hover { color: var(--f5-ink); }

.f5-burger-spacer { flex: 1; }
.f5-burger-btn {
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  border: 1px solid #E0DFD8;
  background: var(--f5-white);
  cursor: pointer;
  padding: 0;
  color: var(--f5-ink);
}
.f5-burger-icon-close { display: none; }
.f5-burger-btn.is-open .f5-burger-icon-open { display: none; }
.f5-burger-btn.is-open .f5-burger-icon-close { display: block; }

/* ---------- megamenus ---------- */
.f5-megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--f5-white);
  border-bottom: 1px solid var(--f5-sand-3);
  box-shadow: 0 30px 50px -30px rgba(16, 27, 45, 0.35);
}
.f5-megamenu[hidden] { display: none; }
.f5-megamenu__inner { max-width: 1180px; margin: 0 auto; padding: 18px 24px 26px; }
.f5-megamenu__grid { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 20px; }
.f5-megamenu__label {
  margin: 6px 14px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--f5-muted);
}
.f5-megamenu__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.f5-megamenu--oplossingen .f5-megamenu__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f5-megamenu__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  color: var(--f5-body);
}
.f5-megamenu__item:hover { background: #F4F6FB; color: var(--f5-body); }
.f5-megamenu__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--f5-blue-light);
  color: var(--f5-blue);
}
.f5-megamenu__title {
  display: block;
  font-family: var(--f5-font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--f5-ink);
}
.f5-megamenu__desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--f5-body); }
.f5-megamenu__promo {
  padding: 24px;
  background: var(--f5-ink);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}
.f5-megamenu__promo-title {
  margin: 0;
  font-family: var(--f5-font-head);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: var(--f5-white);
}
.f5-megamenu__promo-body { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--f5-body-on-navy); }
.f5-megamenu__promo-link { margin-top: auto; padding-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--f5-blue-on-navy); }
.f5-megamenu__promo-link:hover { color: var(--f5-white); }

/* ---------- mobile panel ---------- */
.f5-mobile {
  border-top: 1px solid var(--f5-sand-3);
  background: var(--f5-white);
  padding: 4px 24px 22px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
}
.f5-mobile[hidden] { display: none; }
.f5-mobile-accordion-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: var(--f5-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid #EAE9E3;
  padding: 15px 4px;
  cursor: pointer;
}
.f5-mobile-accordion-panel { display: flex; flex-direction: column; padding: 6px 0 10px; }
.f5-mobile-accordion-panel[hidden] { display: none; }
.f5-mobile-accordion-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 4px;
  color: var(--f5-body);
}
.f5-mobile-accordion-item__icon { color: var(--f5-blue); margin-top: 2px; }
.f5-mobile-accordion-item__title { display: block; font-size: 15px; font-weight: 600; color: var(--f5-ink); }
.f5-mobile-accordion-item__desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--f5-body); }
.f5-mobile-link {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--f5-ink);
  padding: 15px 4px;
  border-bottom: 1px solid #EAE9E3;
}
/* Restores the hover this link had before the base rule moved into :where().
   Mobile-only surface, so a pointer rarely meets it, but losing it silently
   would be an accident rather than a decision. */
.f5-mobile-link:hover { color: var(--f5-blue-hover); }
.f5-mobile-card-ondernemer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--f5-sand-2);
  color: inherit;
}
.f5-mobile-card-ondernemer__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--f5-muted);
}
.f5-mobile-card-ondernemer__title { display: block; margin-top: 3px; font-size: 16px; font-weight: 700; color: var(--f5-ink); }
.f5-mobile-card-ondernemer__arrow { color: var(--f5-muted); }
.f5-mobile-actions { display: flex; gap: 10px; margin-top: 18px; }
.f5-mobile-actions .f5-btn-secondary,
.f5-mobile-actions .f5-btn-primary { flex: 1; text-align: center; }
.f5-mobile-actions .f5-btn-primary { flex: 1.4; }

/* ---------- buttons ---------- */
.f5-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f5-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--f5-white);
  background: var(--f5-blue);
  padding: 14px 24px;
  border-radius: 11px;
  box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.6);
  border: none;
}
.f5-btn-primary:hover { background: var(--f5-blue-hover); color: var(--f5-white); }
.f5-btn-primary--nav { font-size: 15px; padding: 11px 18px; box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.5); }
.f5-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f5-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--f5-ink);
  background: var(--f5-white);
  padding: 14px 22px;
  border-radius: 11px;
  border: 1px solid var(--f5-border-4);
}
.f5-btn-secondary:hover { border-color: var(--f5-ink); color: var(--f5-ink); }

/* ---------- footer ---------- */
.f5-footer { background: var(--f5-ink); font-family: var(--f5-font-body); padding: 64px 0 36px; }
.f5-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; }
.f5-footer__logo { display: inline-flex; align-items: center; gap: 8px; }
.f5-footer__logo-mark { height: 24px; width: auto; }
.f5-footer__logo-word { font-family: var(--f5-font-head); font-weight: 800; font-size: 20px; line-height: 1; color: var(--f5-white); }
.f5-footer__tagline { margin: 16px 0 0; font-family: var(--f5-font-head); font-weight: 700; font-size: 17px; line-height: 1.4; color: var(--f5-white); max-width: 260px; }
.f5-footer__address { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--f5-body-on-navy-2); }
.f5-footer__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--f5-blue-on-navy); }
.f5-footer__links { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.f5-footer__links a { font-size: 14.5px; color: var(--f5-body-on-navy); }
.f5-footer__links a:hover { color: var(--f5-white); }
.f5-footer__bottom {
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--f5-body-on-navy-2);
}
.f5-footer__legal { display: flex; gap: 20px; }
.f5-footer__legal a { color: var(--f5-body-on-navy-2); }
.f5-footer__legal a:hover { color: var(--f5-white); }

/* ---------- page system: section rhythm ---------- */
.f5-section { padding: 96px 0; border-top: 1px solid var(--f5-sand-3); border-bottom: 1px solid var(--f5-sand-3); }
.f5-section + .f5-section { border-top: none; }
.f5-section--white { background: var(--f5-white); }
.f5-section--sand { background: var(--f5-sand); }
.f5-section--navy { background: var(--f5-ink); color: var(--f5-body-on-navy); }
.f5-section--cta { padding: 80px 0; }

/* ---------- page system: block pattern ---------- */
.f5-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--f5-blue);
}
.f5-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.f5-block--rev { direction: rtl; }
.f5-block--rev > * { direction: ltr; }
.f5-block__heading {
  margin: 14px 0 0;
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--f5-ink);
  text-wrap: balance;
}
.f5-block__heading-blue { color: var(--f5-blue); }
.f5-block__body { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--f5-body); text-wrap: pretty; }

/* ---------- page system: mock card ---------- */
.f5-mock {
  background: var(--f5-white);
  border: 1px solid var(--f5-border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(16, 27, 45, 0.05), 0 30px 60px -36px rgba(16, 27, 45, 0.4);
  overflow: hidden;
}
.f5-mock__header { padding: 16px 20px; border-bottom: 1px solid var(--f5-border-2); }

/* ---------- page system: hero plate ---------- */
.f5-hero-plate {
  position: relative;
}
.f5-hero-plate::before {
  content: '';
  position: absolute;
  inset: -24px 0 0 64px;
  background: var(--f5-blue-light);
  border-radius: 26px;
  z-index: 0;
}
.f5-hero-plate > * { position: relative; z-index: 1; }

/* ---------- page system: closing CTA ---------- */
.f5-cta-card {
  background: var(--f5-ink);
  border-radius: 26px;
  padding: 56px 52px;
  text-align: center;
}
.f5-cta-card__heading { font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; color: var(--f5-white); text-wrap: balance; }
.f5-cta-card__body { margin: 14px auto 0; font-size: 16.5px; line-height: 1.6; color: var(--f5-body-on-navy); max-width: 520px; }
.f5-cta-card__actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.f5-cta-card__secondary { font-size: 15px; font-weight: 600; color: var(--f5-blue-on-navy); align-self: center; }
.f5-cta-card__secondary:hover { color: var(--f5-white); }

/* ---------- status labels (fixed site-wide) ---------- */
.f5-status {
  display: inline-flex;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 9px;
}
.f5-status--auto { color: #166534; background: #DCFCE7; }
.f5-status--voorstel { color: #1E40AF; background: #DBEAFE; }
.f5-status--vraag { color: #854D0E; background: #FEF3C7; }
.f5-status--uitzondering { color: #9F1239; background: #FFE4E6; }
.f5-status--handmatig { color: var(--f5-ink); background: var(--f5-white); border: 1px solid #E0DED5; }

/* ---------- legal pages (privacy / terms) ---------- */
.f5-legal { max-width: 760px; margin: 0 auto; padding: 72px 24px 110px; }
.f5-legal__eyebrow { display: block; }
.f5-legal__h1 {
  margin: 14px 0 0;
  font-weight: 800;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--f5-ink);
}
.f5-legal__meta { margin: 12px 0 0; font-size: 14px; color: var(--f5-muted); }
.f5-legal__lead { margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: var(--f5-body); max-width: 620px; }
.f5-legal__section { margin-top: 44px; }
.f5-legal__section:first-of-type { margin-top: 36px; }
.f5-legal__section h2 {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.3;
  color: var(--f5-ink);
}
.f5-legal__section h3 { font-family: var(--f5-font-head); font-weight: 700; font-size: 16.5px; color: var(--f5-ink); margin: 22px 0 0; }
.f5-legal__section p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.75; color: var(--f5-body); }
.f5-legal__section ul { margin: 14px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16.5px; line-height: 1.7; color: var(--f5-body); }
.f5-legal__section a { color: var(--f5-blue); }
.f5-legal__section a:hover { color: var(--f5-blue-hover); }

/* ---------- 404 ---------- */
.f5-404 { padding: 120px 0 140px; }
.f5-404__inner { max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; }
.f5-404__eyebrow { display: block; }
.f5-404__h1 {
  margin: 16px 0 0;
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--f5-ink);
  text-wrap: balance;
}
.f5-404__h1 span { color: var(--f5-blue); }
.f5-404__lead { margin: 18px auto 0; font-size: 18px; line-height: 1.65; color: var(--f5-body); max-width: 520px; }
.f5-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .f5-megamenu__grid { grid-template-columns: minmax(0, 1fr); }
  .f5-megamenu__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .f5-block { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .f5-block--rev { direction: ltr; }
  .f5-block--rev .f5-block__mock { order: -1; }
  .f5-cta-card { padding: 34px 24px; }
  .f5-legal { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 560px) {
  .f5-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .f5-cta-card__actions { flex-direction: column; }
}

/* ---------- home page (BEG-1283): net-new components the shared page
   system (above) doesn't define yet. Additive only — nothing above this
   line is changed. Reusable by later v5 pages, not specific to Home. ---------- */

/* section-rhythm modifiers: a bordered/flush pair is needed because
   ".f5-section + .f5-section" (above) always drops the top border of the
   second of two adjacent sections, but Home's rhythm needs a sand section
   to show its own border even when it follows a flush white/navy one. */
.f5-section.f5-section--bordered { border-top: 1px solid var(--f5-sand-3); border-bottom: 1px solid var(--f5-sand-3); }
.f5-section.f5-section--flush { border-top: none; border-bottom: none; }
.f5-section--tight { padding: 88px 0; }

.f5-eyebrow--on-navy { color: var(--f5-blue-on-navy); }
.f5-block__heading--on-navy { color: var(--f5-white); }
.f5-block__heading-blue--on-navy { color: var(--f5-blue-on-navy); }
.f5-section-lead { margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: var(--f5-body); max-width: 720px; text-wrap: pretty; }
.f5-section-lead--narrow { max-width: 440px; }
.f5-section-lead--on-navy { color: var(--f5-body-on-navy); }

/* hero */
.f5-hero { padding: 64px 0 104px; background: var(--f5-white); }
.f5-hero__h1 { font-weight: 800; font-size: clamp(26px, 3.9vw, 50px); line-height: 1.06; letter-spacing: -0.03em; color: var(--f5-ink); margin: 18px 0 0; }
.f5-hero__h1 span { display: block; }
/* `white-space: nowrap` belongs to the homepage hero H1 only (owner
   instruction, BEG-1303): `.f5-hero__h1` is shared by every two-column hero
   page (tarieven.html and five oplossingen/*.html pages), and a shared nowrap
   there made the H1 overrun its column and slide under the right-hand card.
   Scoped to this modifier so it can never become a base rule again. */
.f5-hero__h1--home span { white-space: nowrap; }
.f5-hero__lead { margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: var(--f5-body); max-width: 540px; text-wrap: pretty; }
.f5-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.f5-hero__media { position: relative; }
.f5-hero__photo { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 600px; object-fit: cover; object-position: 50% 20%; border-radius: 26px; }
.f5-hero__card {
  position: absolute; z-index: 2; left: -48px; bottom: 56px; width: max-content;
  display: flex; align-items: center; gap: 14px;
  background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 16px;
  box-shadow: 0 24px 48px -22px rgba(16, 27, 45, 0.45); padding: 16px 20px 16px 16px;
}
.f5-hero__card-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #DCFCE7; color: #166534; }
.f5-hero__card-title { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 15.5px; color: var(--f5-ink); }
.f5-hero__card-sub { margin: 3px 0 0; font-size: 13.5px; color: var(--f5-body); }

/* three-up bordered panel grid ("wie doet wat") */
.f5-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--f5-border); border: 1px solid var(--f5-border); border-radius: 20px; overflow: hidden; margin-top: 44px; }
.f5-trio__cell { background: var(--f5-white); padding: 28px 26px 30px; }
.f5-trio__head { display: flex; align-items: center; gap: 12px; }
.f5-trio__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-trio__title { font-weight: 800; font-size: 17px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-trio__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.f5-trio__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--f5-body); }
.f5-trio__list li svg { flex: none; margin-top: 2px; color: var(--f5-blue); }

/* three-up cards ("werkwijze" and "routes") */
.f5-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.f5-workflow-card { display: flex; flex-direction: column; background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 20px; overflow: hidden; }
.f5-workflow-card__mock { padding: 20px 20px 18px; background: #FBFAF6; border-bottom: 1px solid var(--f5-border-2); }
.f5-workflow-card__body { padding: 22px 24px 26px; }
.f5-workflow-card__body p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

.f5-callout { display: flex; align-items: flex-start; gap: 16px; margin-top: 18px; padding: 22px 24px; background: var(--f5-blue-light-2); border: 1px solid #DCE5F8; border-radius: 16px; }
.f5-callout__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-callout p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--f5-ink); }

/* product link cards ("wat zit er in florijn") */
.f5-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.f5-product-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--f5-border); border-radius: 18px; background: var(--f5-white); color: var(--f5-body); }
.f5-product-card:hover { border-color: var(--f5-blue); box-shadow: 0 18px 40px -28px rgba(37, 99, 235, 0.55); color: var(--f5-body); }
.f5-product-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.f5-product-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-product-card__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-muted); }
.f5-product-card__title { font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-product-card__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }
.f5-product-card__link { margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--f5-blue); }

/* navy solutions split ("wat je kantoor ermee bereikt") */
.f5-oplossingen-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; }
.f5-oplossingen-list { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.f5-oplossingen-item { display: flex; align-items: center; gap: 18px; padding: 22px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: var(--f5-white); }
.f5-oplossingen-item:hover { background: rgba(255, 255, 255, 0.04); color: var(--f5-white); }
.f5-oplossingen-item__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(157, 192, 255, 0.14); color: var(--f5-blue-on-navy); }
.f5-oplossingen-item__title { font-weight: 800; font-size: 19px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-white); text-wrap: balance; }
.f5-oplossingen-item__desc { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--f5-body-on-navy-2); }
.f5-oplossingen-item__arrow { flex: none; color: var(--f5-blue-on-navy); }

/* plain route cards */
.f5-routes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.f5-route-card { padding: 28px; border-radius: 20px; background: var(--f5-sand); }
.f5-route-card__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-route-card__title { margin-top: 18px; font-weight: 800; font-size: 19px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-route-card__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }
.f5-route-card__link { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 600; }

/* two-column CTA card variant (text + actions column, left-aligned) */
.f5-cta-card--split { text-align: left; }
.f5-cta-card--split .f5-cta-card__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.f5-cta-card--split .f5-block__heading { margin: 14px 0 0; max-width: 640px; }
.f5-cta-card__actions-col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

@media (max-width: 880px) {
  .f5-trio,
  .f5-cards3,
  .f5-products-grid,
  .f5-routes-grid,
  .f5-oplossingen-grid,
  .f5-cta-card--split .f5-cta-card__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .f5-hero__card { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: 14px; }
}

/* ---------- interior product pages (BEG-1284): net-new components the
   shared page system doesn't define yet. Additive only — nothing above
   this line is changed. Reusable by later Producten/Oplossingen pages,
   not specific to this ticket's four pages. ---------- */

/* breadcrumb, used by every Producten/Oplossingen page's hero */
.f5-breadcrumb { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--f5-muted); }
.f5-breadcrumb a { color: var(--f5-muted); }
.f5-breadcrumb a:hover { color: var(--f5-ink); }
.f5-breadcrumb__current { color: var(--f5-blue); }

/* white interior hero: breadcrumb + big headline, no photo */
.f5-page-hero { background: var(--f5-white); padding: 64px 0 88px; }
.f5-page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.f5-page-hero__grid--wide-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.f5-page-hero__h1 { margin: 18px 0 0; font-weight: 800; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.03em; color: var(--f5-ink); text-wrap: balance; }
.f5-page-hero__subhead { margin: 18px 0 0; font-size: 20px; line-height: 1.55; color: var(--f5-ink); font-weight: 500; max-width: 560px; text-wrap: pretty; }
.f5-page-hero__lead { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--f5-body); max-width: 560px; text-wrap: pretty; }
.f5-page-hero__lead--solo { margin-top: 18px; font-size: 18px; max-width: 540px; }
.f5-page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* feature list: icon tile + title + description, stacked */
.f5-feature-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.f5-feature-list__item { display: flex; gap: 14px; align-items: flex-start; }
.f5-feature-list__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-feature-list__title { margin: 0; font-weight: 800; font-size: 16.5px; color: var(--f5-ink); }
.f5-feature-list__desc { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--f5-body); text-wrap: pretty; }

/* status-pill list: a fixed status pill beside one line of body text */
.f5-status-list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.f5-status-list__item { display: flex; gap: 14px; align-items: flex-start; }
.f5-status-list__item .f5-status { flex: none; margin-top: 2px; }
.f5-status-list__item p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--f5-body); }

/* generic mock list rows, reused across every product mock */
.f5-mock__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--f5-border-3); }
.f5-mock__row:last-child { border-bottom: none; }
.f5-mock__row--tint-red { background: #FFF8F8; }
.f5-mock__row--tint-yellow { background: #FFFBEB; }
.f5-mock__row--tint-blue { background: var(--f5-blue-light-2); }
.f5-mock__row-main { min-width: 0; }
.f5-mock__title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--f5-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f5-mock__subtitle { margin: 1px 0 0; font-size: 12px; color: var(--f5-muted); }
.f5-mock__meta { font-size: 12.5px; font-weight: 600; color: var(--f5-muted); }
.f5-mock__avatar { flex: none; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; }
.f5-mock__avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.f5-mock__avatar--md { width: 34px; height: 34px; font-size: 12px; }
.f5-mock__note { display: flex; align-items: center; gap: 10px; padding: 13px 20px; font-size: 13px; font-weight: 600; color: var(--f5-ink); }
.f5-mock__note--top-border { border-top: 1px solid var(--f5-border-2); }
.f5-mock__note-icon { display: flex; flex: none; }
.f5-mock__badge-text--ok { font-size: 11.5px; font-weight: 600; color: #166534; }
.f5-mock__badge-text--warn { font-size: 11.5px; font-weight: 600; color: #9F1239; }

/* timestamped activity-feed row (3-col: time / title+sub / optional status) */
.f5-mock__feed-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 12px 20px; border-bottom: 1px solid var(--f5-border-3); }
.f5-mock__feed-row:last-child { border-bottom: none; }
.f5-mock__feed-time { grid-row: span 2; font-size: 12px; font-weight: 600; color: var(--f5-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.f5-mock__feed-status { grid-row: span 2; align-self: center; }

/* simple line-item table inside a mock (header row + data rows) */
.f5-mock__table-head { display: grid; gap: 0 14px; padding: 10px 20px; border-bottom: 1px solid var(--f5-border-3); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f5-muted); }
.f5-mock__table-row { display: grid; gap: 0 14px; align-items: center; padding: 11px 20px; border-bottom: 1px solid var(--f5-border-3); }
.f5-mock__table-row:last-child { border-bottom: none; }
.f5-mock__amount { font-size: 13.5px; color: var(--f5-ink); font-variant-numeric: tabular-nums; text-align: right; }

/* 2-column stat footer inside a mock */
.f5-mock__stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--f5-border-2); border-top: 1px solid var(--f5-border-2); }
.f5-mock__stat-cell { padding: 12px 20px; background: var(--f5-blue-light-2); }
.f5-mock__stat-label { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--f5-muted); }
.f5-mock__stat-value { margin: 2px 0 0; font-size: 13.5px; font-weight: 700; color: var(--f5-ink); }

/* free-standing check card (a mini bordered card, not inside a mock) */
.f5-check-list { display: flex; flex-direction: column; gap: 10px; }
.f5-check-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 20px; background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 16px; box-shadow: 0 20px 40px -32px rgba(16, 27, 45, 0.4); }
.f5-check-card__note { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--f5-sand); border-radius: 16px; font-size: 13.5px; color: var(--f5-body); }

/* mail body inside a mock: paragraph stack + a highlighted list block */
.f5-mock__body-text { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--f5-ink); }
.f5-mock__body-text p { margin: 0; }
.f5-mock__highlight-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--f5-sand); font-size: 13.5px; }
.f5-mock__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--f5-border-2); }
.f5-mock__btn { font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 9px; }
.f5-mock__btn--ghost { color: var(--f5-ink); border: 1px solid var(--f5-border-4); }
.f5-mock__btn--solid { color: var(--f5-white); background: var(--f5-blue); }

/* email field grid ("Van / Aan / Onderwerp") */
.f5-mock__fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 16px 20px; border-bottom: 1px solid var(--f5-border-2); font-size: 13px; }
.f5-mock__fields span:nth-child(odd) { color: var(--f5-muted); }
.f5-mock__fields span:nth-child(even) { color: var(--f5-ink); font-weight: 600; }

/* chat bubble pair (client/office conversation on a booking) */
.f5-bubble-row { display: flex; gap: 10px; align-items: flex-start; max-width: 88%; }
.f5-bubble-row--out { align-self: flex-end; flex-direction: row-reverse; text-align: right; }
.f5-bubble { padding: 11px 14px; border-radius: 4px 14px 14px 14px; font-size: 14px; line-height: 1.5; }
.f5-bubble--in { background: var(--f5-white); border: 1px solid var(--f5-border); color: var(--f5-ink); }
.f5-bubble--out { background: var(--f5-blue); border-radius: 14px 4px 14px 14px; color: var(--f5-white); text-align: left; }
.f5-bubble-meta { margin: 5px 0 0; font-size: 11.5px; color: var(--f5-muted); }

/* segmented control (e.g. "Iedereen / Mijn werk", "Voorstel / Automatisch geboekt") */
.f5-segmented { display: flex; gap: 4px; padding: 3px; background: var(--f5-border-3); border-radius: 9px; }
.f5-segmented__option { font-size: 12px; font-weight: 600; color: var(--f5-muted); padding: 4px 10px; border-radius: 7px; }
.f5-segmented__option--active { color: var(--f5-ink); background: var(--f5-white); box-shadow: 0 1px 2px rgba(16, 27, 45, 0.1); }

/* settings row inside a mock (label + segmented control, or label + chip button) */
.f5-mock__setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 16px; }
.f5-chip-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; padding: 9px 14px; border-radius: 10px; }
.f5-chip-btn--solid { color: var(--f5-white); background: var(--f5-blue); }
.f5-chip-btn--outline { color: var(--f5-blue); background: var(--f5-white); border: 1px solid #DCE5F8; }

/* compare cards: 2 or 3 up, light or dark, kicker + title + rows/list */
.f5-compare-grid { display: grid; gap: 18px; margin-top: 40px; }
.f5-compare-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f5-compare-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f5-compare-card { padding: 28px; border-radius: 20px; background: var(--f5-white); border: 1px solid var(--f5-border); display: flex; flex-direction: column; gap: 18px; }
.f5-compare-card--dark { background: var(--f5-ink); border: none; }
.f5-compare-card--blue { background: var(--f5-blue); border: none; }
.f5-compare-card__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-muted); }
.f5-compare-card--dark .f5-compare-card__kicker { color: var(--f5-blue-on-navy); }
.f5-compare-card--blue .f5-compare-card__kicker { color: var(--f5-blue-light); }
.f5-compare-card__title { margin: 8px 0 0; font-weight: 800; font-size: 19px; line-height: 1.28; color: var(--f5-ink); text-wrap: balance; }
.f5-compare-card--dark .f5-compare-card__title,
.f5-compare-card--blue .f5-compare-card__title { color: var(--f5-white); }
.f5-compare-card__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--f5-blue-light-2); }
.f5-compare-card--dark .f5-compare-card__row { background: rgba(255, 255, 255, 0.07); }
.f5-compare-card__row-label { font-size: 13.5px; font-weight: 600; color: var(--f5-ink); }
.f5-compare-card--dark .f5-compare-card__row-label { color: var(--f5-white); }
.f5-compare-card__row-value { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--f5-ink); font-variant-numeric: tabular-nums; }
.f5-compare-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.f5-compare-card__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--f5-body); }
.f5-compare-card--dark .f5-compare-card__list li,
.f5-compare-card--blue .f5-compare-card__list li { color: var(--f5-body-on-navy); }
.f5-compare-card__list-mark--x { flex: none; color: #9F1239; }
.f5-compare-card__list-mark--check { flex: none; color: var(--f5-blue-on-navy); }
.f5-compare-card__link { margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--f5-blue-on-navy); }
.f5-compare-card--top-rule { border-top: 1px solid #E0DED5; padding-top: 22px; background: transparent; border-radius: 0; }

/* small decorative name-pill grid (e.g. "twelve private inboxes") */
.f5-name-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.f5-name-pill { padding: 10px; border-radius: 10px; background: var(--f5-white); border: 1px solid var(--f5-border); font-size: 12.5px; font-weight: 600; color: var(--f5-body); text-align: center; }

@media (max-width: 1040px) {
  .f5-name-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .f5-page-hero__grid,
  .f5-page-hero__grid--wide-media {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .f5-compare-grid--2,
  .f5-compare-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 560px) {
  .f5-mock__feed-row,
  .f5-mock__table-row,
  .f5-mock__table-head {
    font-size: 12.5px;
  }
}

/* ---------- product pages (BEG-1285): net-new components shared across
   Boekhouding, Bank & betalingen, Btw & aangiftes and Koppelingen. Additive
   only — nothing above this line is changed. Reusable by later v5 pages,
   not specific to any one product. ---------- */

/* product hero: breadcrumb + heading + lead on one side, a mock card on a
   colour plate on the other. Distinct from .f5-hero (home), which frames a
   photo instead of a mock. */
.f5-product-hero { padding: 64px 0 88px; background: var(--f5-white); }
.f5-mock-plate { position: relative; padding: 20px 0 20px 20px; }
.f5-mock-plate::before { content: ''; position: absolute; top: 0; right: -24px; bottom: 0; left: 64px; background: var(--f5-blue-light); border-radius: 26px; }
.f5-mock-plate--bank::before { background: #E3ECFF; }
.f5-mock-plate > * { position: relative; }
.f5-product-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.f5-product-hero__grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* numbered step cards ("zo werkt het") */
.f5-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.f5-steps--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f5-step-card { background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 18px; padding: 24px 24px 26px; }
.f5-step-card__top { display: flex; align-items: center; gap: 12px; }
.f5-step-card__num { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--f5-blue); color: var(--f5-white); display: flex; align-items: center; justify-content: center; font-family: var(--f5-font-head); font-weight: 800; font-size: 14px; }
.f5-step-card__line { flex: 1; height: 1px; background: var(--f5-border); }
.f5-step-card__body { margin-top: 18px; }
.f5-step-card__title { font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-step-card__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

/* icon-tile benefit list ("wat je eraan hebt") */
.f5-benefits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; }
.f5-benefit { border-top: 1px solid var(--f5-border); padding-top: 22px; }
.f5-benefit__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-benefit__body { margin-top: 16px; }
.f5-benefit__title { font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-benefit__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

/* plain icon list ("wat je erover moet weten") */
.f5-icon-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.f5-icon-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--f5-body); }
.f5-icon-list li svg { flex: none; margin-top: 2px; color: var(--f5-blue); }

/* plain responsive tile grids (2- and 4-up), for content that isn't a step
   card or a benefit — e.g. Koppelingen's comparison cards and status tiles */
.f5-tiles { display: grid; gap: 14px; }
.f5-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f5-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1040px) {
  .f5-steps--four,
  .f5-tiles--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 880px) {
  .f5-steps,
  .f5-steps--four,
  .f5-benefits-grid,
  .f5-product-hero__grid,
  .f5-tiles--2,
  .f5-tiles--4 {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .f5-mock-plate { padding: 0; }
  .f5-mock-plate::before { display: none; }
}

/* ---------- oplossingen pages (BEG-1286): net-new components the shared
   page system (above) doesn't define yet. Additive only — nothing above
   this line is changed. Reusable by later v5 pages, not specific to any
   one Oplossingen page. ---------- */

/* navy hero with breadcrumb, used by every Oplossingen page */
.f5-hero--navy { padding: 72px 0 92px; background: var(--f5-ink); }
/* .f5-breadcrumb is defined once, on the white interior hero (BEG-1284). On
   navy only its three colours change, scoped to the navy hero so the Producten
   pages keep theirs. */
.f5-hero--navy .f5-breadcrumb { color: var(--f5-body-on-navy-2); }
.f5-hero--navy .f5-breadcrumb a { color: var(--f5-body-on-navy-2); }
.f5-hero--navy .f5-breadcrumb a:hover { color: var(--f5-white); }
.f5-hero--navy .f5-breadcrumb__current { color: var(--f5-blue-on-navy); }
.f5-hero--navy .f5-hero__h1 { margin: 18px 0 0; font-size: clamp(36px, 4.8vw, 60px); color: var(--f5-white); }
.f5-hero--navy .f5-hero__h1 span { color: var(--f5-blue-on-navy); }
.f5-hero--navy .f5-hero__lead { color: var(--f5-body-on-navy); }
.f5-btn-secondary--on-navy { background: transparent; color: var(--f5-white); border-color: rgba(255, 255, 255, 0.3); }
.f5-btn-secondary--on-navy:hover { border-color: var(--f5-white); color: var(--f5-white); }
/* the navy hero's two-column grid is the shared .f5-block, just with a
   tighter 56px gap than .f5-block's own 64px (BEG-1304). Scoped to
   .f5-hero--navy so every other .f5-block usage keeps its 64px gap, and to
   min-width so it can never outrank .f5-block's own ≤880px collapse (a
   compound selector like ".f5-hero--navy .f5-block" outranks the shared
   media-query rule on specificity alone, so it has to lose that fight by
   never being in scope at that width, not by hoping source order saves it). */
@media (min-width: 881px) {
  .f5-hero--navy .f5-block { gap: 56px; }
}

/* "Hierbij helpen" product chips under an Oplossingen hero lead */
.f5-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 30px; }
.f5-chips__label { font-size: 13px; font-weight: 600; color: var(--f5-body-on-navy-2); margin-right: 4px; }
.f5-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--f5-white); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); padding: 6px 11px; border-radius: 999px; }
.f5-chip:hover { background: rgba(255, 255, 255, 0.16); color: var(--f5-white); }
.f5-chip svg { color: var(--f5-blue-on-navy); flex: none; }

/* .f5-trio's own 2-up variant (Bied je clienten meer "Jij / Florijn"), kept
   out of the shared .f5-trio/.f5-trio--two cascade order entirely: scoped to
   min-width so it can never outrank .f5-trio's ≤880px collapse to 1 column
   (BEG-1304 -- the page previously set this inline, which blocked that
   collapse and overflowed at 390px). */
@media (min-width: 881px) {
  .f5-trio--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* photo with floating stat card (hero media, e.g. Bied je clienten meer) */
.f5-hero-photo { position: relative; padding-bottom: 36px; }
.f5-hero-photo img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 60px -32px rgba(16, 27, 45, 0.4); object-fit: cover; }
.f5-hero-photo__card { position: absolute; z-index: 2; left: -18px; bottom: 0; width: 290px; background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 16px; box-shadow: 0 24px 48px -22px rgba(16, 27, 45, 0.45); padding: 15px 16px; }
.f5-hero-photo__card-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f5-muted); }
.f5-hero-photo__card-title { margin: 6px 0 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 17px; color: var(--f5-ink); }
.f5-hero-photo__bars { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 12px; }
.f5-hero-photo__bars span { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--f5-blue-light); }
.f5-hero-photo__bars span.is-peak { background: var(--f5-blue); }

/* rounded photo frame used in 2-col blocks (Groei, Overstappen) */
.f5-photo-frame { border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(16, 27, 45, 0.4); }
.f5-photo-frame img { display: block; width: 100%; height: auto; object-fit: cover; }

/* generic mock card body pieces, alongside the shared .f5-mock / .f5-mock__header */
.f5-mock__row--wrap { flex-wrap: wrap; }
.f5-mock__row-label { font-size: 13.5px; font-weight: 600; color: var(--f5-ink); }
.f5-mock__footnote { padding: 12px 20px 16px; font-size: 12.5px; color: var(--f5-muted); }
.f5-mock__segmented { display: inline-flex; padding: 3px; background: #F1F0EA; border-radius: 9px; gap: 2px; }
.f5-mock__segment { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 7px; color: var(--f5-muted); }
.f5-mock__segment.is-active-auto { background: var(--f5-white); color: #166534; box-shadow: 0 1px 3px rgba(16, 27, 45, 0.15); }
.f5-mock__segment.is-active-voorstel { background: var(--f5-white); color: #1E40AF; box-shadow: 0 1px 3px rgba(16, 27, 45, 0.15); }
.f5-mock__segment.is-active-zelf { background: var(--f5-white); color: var(--f5-ink); box-shadow: 0 1px 3px rgba(16, 27, 45, 0.15); }
.f5-mock__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 20px; }
.f5-mock__stat { padding: 12px; border: 1px solid var(--f5-border); border-radius: 12px; }
.f5-mock__stat .f5-mock__stat-value { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 24px; }
.f5-mock__stat .f5-mock__stat-label { margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: var(--f5-muted); }
.f5-mock__txn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--f5-border-3); }
.f5-mock__txn-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--f5-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f5-mock__txn-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--f5-muted); }
.f5-mock__txn-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.f5-mock__txn-amount-value { font-size: 14px; font-weight: 600; color: var(--f5-ink); font-variant-numeric: tabular-nums; }

/* 3- or 4-up feature list, border-top icon+title+desc (Bied je clienten meer, Samenwerken) */
.f5-features { display: grid; gap: 40px 32px; margin-top: 48px; }
.f5-features--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f5-features--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f5-feature { border-top: 1px solid var(--f5-border); padding-top: 22px; }
.f5-feature__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-feature__body { margin-top: 16px; }
.f5-feature__title { font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-feature__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

/* two boxed panels with a checklist (Samenwerken, Groei) */
.f5-split-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.f5-split-panel { padding: 28px; border-radius: 20px; background: var(--f5-sand); }
.f5-split-panel--accent { background: var(--f5-blue-light-2); border: 1px solid #DCE5F8; }
.f5-split-panel__title { font-weight: 800; font-size: 19px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-checklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.f5-checklist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--f5-body); }
.f5-checklist svg { flex: none; margin-top: 2px; color: var(--f5-blue); }

/* two-card comparison, each a mini mock (Werk op jouw manier "Twee cliënten") */
.f5-client-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.f5-client-card { background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 20px; overflow: hidden; }
.f5-client-card__head { padding: 22px 24px 4px; }
.f5-client-card__head h3 { font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-client-card__head p { margin: 4px 0 0; font-size: 14px; color: var(--f5-muted); }
.f5-client-card__rows { padding: 10px 0; }
.f5-client-card__foot { padding: 0 24px 22px; }
.f5-client-card__foot p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

/* client-flow card in the Samenwerken hero (steps -> arrow -> result) */
.f5-hero-flow { display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 26px; background: rgba(157, 192, 255, 0.1); border: 1px solid rgba(157, 192, 255, 0.22); }
.f5-hero-flow__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-blue-on-navy); }
.f5-hero-flow__step { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--f5-white); border-radius: 14px; box-shadow: 0 12px 30px -20px rgba(16, 27, 45, 0.5); }
.f5-hero-flow__step-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-hero-flow__step-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--f5-ink); }
.f5-hero-flow__step-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--f5-muted); }
.f5-hero-flow__arrow { display: flex; justify-content: center; color: var(--f5-blue-on-navy); padding: 4px 0; }
.f5-hero-flow__result { padding: 16px; background: var(--f5-blue); border-radius: 14px; color: var(--f5-white); }
.f5-hero-flow__result-title { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 15.5px; }
.f5-hero-flow__result-sub { margin: 3px 0 0; font-size: 13px; color: var(--f5-blue-light); }

/* time-shift bar panel in the Groei hero */
.f5-hero-shift { padding: 28px; border-radius: 26px; background: rgba(157, 192, 255, 0.1); border: 1px solid rgba(157, 192, 255, 0.22); display: flex; flex-direction: column; gap: 22px; }
.f5-hero-shift__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-blue-on-navy); }
.f5-hero-shift__title { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--f5-white); }
.f5-hero-shift__bar { display: flex; height: 40px; border-radius: 10px; overflow: hidden; gap: 2px; }
.f5-hero-shift__seg { color: var(--f5-white); display: flex; align-items: center; padding: 0 10px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.f5-hero-shift__note { margin: 0; font-size: 12.5px; color: var(--f5-body-on-navy-2); }

/* numbered vertical step list (Overstappen hero) */
.f5-step-timeline { display: flex; flex-direction: column; padding: 28px; border-radius: 26px; background: var(--f5-white); }
.f5-step-timeline__item { display: flex; gap: 16px; }
.f5-step-timeline__marker { display: flex; flex-direction: column; align-items: center; }
.f5-step-timeline__num { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--f5-blue-light); color: var(--f5-blue); display: flex; align-items: center; justify-content: center; font-family: var(--f5-font-head); font-weight: 800; font-size: 13px; }
.f5-step-timeline__num.is-current { background: var(--f5-blue); color: var(--f5-white); }
.f5-step-timeline__line { flex: 1; width: 2px; background: var(--f5-blue-light); margin: 4px 0; }
.f5-step-timeline__body { padding-bottom: 22px; }
.f5-step-timeline__item:last-child .f5-step-timeline__body { padding-bottom: 0; }
.f5-step-timeline__title { margin: 4px 0 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 16px; color: var(--f5-ink); }
.f5-step-timeline__desc { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--f5-body); }

/* per-step cards ("Per stap duidelijk wie wat doet", Overstappen) */
.f5-step-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.f5-step-panel { padding: 26px; border: 1px solid var(--f5-border); border-radius: 20px; }
.f5-step-panel__eyebrow { font-size: 13px; font-weight: 700; color: var(--f5-blue); }
.f5-step-panel__title { margin-top: 6px; font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-step-panel__rows { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.f5-step-panel__rows p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--f5-body); }
.f5-step-panel__rows strong { color: var(--f5-ink); }

/* FAQ accordion (Overstappen) */
.f5-faq { margin-top: 36px; border-top: 1px solid var(--f5-border); }
.f5-faq__item { border-bottom: 1px solid var(--f5-border); padding: 20px 0; }
.f5-faq__item summary { cursor: pointer; list-style: none; }
.f5-faq__item summary::-webkit-details-marker { display: none; }
.f5-faq__q { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--f5-font-head); font-weight: 700; font-size: 18px; color: var(--f5-ink); }
.f5-faq__icon { flex: none; display: inline-block; font-size: 24px; line-height: 1; color: var(--f5-blue); transition: transform 0.2s ease; }
.f5-faq__item[open] .f5-faq__icon { transform: rotate(45deg); }
.f5-faq__a { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--f5-body); max-width: 760px; text-wrap: pretty; }

@media (max-width: 1040px) {
  .f5-features--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .f5-features--cols-3,
  .f5-split-panels,
  .f5-client-cards,
  .f5-step-panels {
    grid-template-columns: minmax(0, 1fr);
  }
  .f5-hero-photo__card { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin-top: 14px; }
}
@media (max-width: 560px) {
  .f5-features--cols-4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tarieven page (BEG-1287): net-new components the shared page
   system (above) doesn't define yet. Additive only — nothing above this
   line is changed. Reusable by later v5 pages, not specific to Tarieven. ---------- */

input[type="range"] { accent-color: var(--f5-blue); }

/* Tarieven's hero shares .f5-hero/.f5-block with Home (BEG-1283), but wants
   its own asymmetric split and a tighter gap so the invoice mock doesn't
   crowd the headline column (BEG-1304). Scoped to this modifier, applied
   only on the Tarieven hero section, so Home's hero grid is untouched; also
   scoped to min-width so this compound selector can't outrank .f5-block's
   own ≤880px collapse to one column (see the matching .f5-hero--navy note
   above for why specificity alone can't be trusted to lose that fight). */
@media (min-width: 881px) {
  .f5-hero--split .f5-block { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; }
}

/* plain (non-blue, non-uppercase) hero kicker, for a hero that doesn't want the loud eyebrow treatment */
.f5-hero__kicker { margin: 0; font-size: 14px; font-weight: 600; color: var(--f5-muted); }

/* hero invoice mock */
.f5-invoice-mock__header { padding: 16px 20px; }
.f5-invoice-mock__title { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 15.5px; color: var(--f5-ink); }
.f5-invoice-mock__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--f5-muted); }
.f5-invoice-mock__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; padding: 13px 20px; border-bottom: 1px solid var(--f5-border-3); font-size: 13.5px; font-weight: 600; color: var(--f5-ink); font-variant-numeric: tabular-nums; }
.f5-invoice-mock__row--muted { font-weight: 400; color: var(--f5-muted); }
.f5-invoice-mock__value--positive { color: #166534; }
.f5-invoice-mock__total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; padding: 16px 20px; background: var(--f5-blue-light-2); font-family: var(--f5-font-head); font-size: 15px; font-weight: 800; color: var(--f5-ink); font-variant-numeric: tabular-nums; }

/* chip row ("herkenbaar?") */
.f5-cost-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.f5-cost-chip { font-size: 14.5px; font-weight: 600; color: var(--f5-ink); background: var(--f5-white); border: 1px solid var(--f5-border); padding: 11px 16px; border-radius: 12px; }
.f5-cost-chip--warn { color: #9F1239; }
.f5-cost-chip--total { font-weight: 700; color: var(--f5-white); background: var(--f5-ink); border: none; }

/* comparison table + worked example ("reken het na") */
.f5-compare-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; margin-top: 44px; align-items: start; }
.f5-compare-table__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--f5-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-muted); }
.f5-compare-table__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--f5-sand-3); }
.f5-compare-table__unit { font-family: var(--f5-font-head); font-weight: 800; font-size: 17px; color: var(--f5-ink); }
.f5-compare-table__who { font-size: 14.5px; color: var(--f5-body); }
.f5-compare-table__price { font-size: 14.5px; font-weight: 600; color: #9F1239; font-variant-numeric: tabular-nums; }
.f5-compare-table__row--florijn { padding: 18px 16px; margin-top: 10px; border-radius: 14px; background: var(--f5-ink); border-bottom: none; }
.f5-compare-table__row--florijn .f5-compare-table__unit { color: var(--f5-white); }
.f5-compare-table__row--florijn .f5-compare-table__who { color: var(--f5-body-on-navy); }
.f5-compare-table__row--florijn .f5-compare-table__price { font-weight: 700; color: var(--f5-blue-on-navy); }
.f5-compare-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--f5-muted); }

.f5-example-card { padding: 26px; border-radius: 20px; background: var(--f5-sand); }
.f5-example-card__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-muted); }
.f5-example-card__title { margin: 10px 0 0; font-weight: 800; font-size: 20px; line-height: 1.28; color: var(--f5-ink); text-wrap: balance; }
.f5-example-card__list { display: flex; flex-direction: column; margin-top: 18px; }
.f5-example-card__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--f5-border-4); font-size: 14px; }
.f5-example-card__row:last-child { border-bottom: none; }
.f5-example-card__row span:first-child { color: var(--f5-ink); font-weight: 600; }
.f5-example-card__row span:last-child { color: var(--f5-body); font-variant-numeric: tabular-nums; }
.f5-example-card__punch { margin: 16px 0 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 17px; color: #9F1239; }
.f5-example-card__note { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--f5-body); }

/* calculator card ("de rekensom") */
.f5-calc-card { background: var(--f5-white); border-radius: 20px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); }
.f5-calc-card__price { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 17px; color: var(--f5-ink); }
.f5-calc-card__row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 22px; }
.f5-calc-card__row label { font-size: 15px; font-weight: 600; color: var(--f5-ink); }
.f5-calc-card__n { font-family: var(--f5-font-head); font-size: 22px; font-weight: 800; color: var(--f5-ink); font-variant-numeric: tabular-nums; }
.f5-calc-card__slider { width: 100%; margin-top: 12px; }
.f5-calc-card__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--f5-muted); margin-top: 4px; }
.f5-calc-card__breakdown { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--f5-border-2); display: flex; flex-direction: column; gap: 8px; }
.f5-calc-card__breakdown-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--f5-body); }
.f5-calc-card__breakdown-row span { font-variant-numeric: tabular-nums; }
.f5-calc-card__breakdown-row--free span:last-child { color: #166534; }
.f5-calc-card__total { margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: var(--f5-blue-light-2); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.f5-calc-card__total-label { font-size: 15px; font-weight: 600; color: var(--f5-ink); }
.f5-calc-card__total-value { font-family: var(--f5-font-head); font-size: 30px; font-weight: 800; color: var(--f5-blue); font-variant-numeric: tabular-nums; }
.f5-calc-card__note { margin: 12px 0 0; font-size: 13px; color: var(--f5-muted); }

/* subscription card ("het abonnement") */
.f5-plan-card { padding: 32px; border-radius: 22px; background: var(--f5-ink); box-shadow: 0 30px 60px -30px rgba(16, 27, 45, 0.5); }
.f5-plan-card__price { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.f5-plan-card__price-value { font-family: var(--f5-font-head); font-weight: 800; font-size: 52px; color: var(--f5-white); letter-spacing: -0.02em; }
.f5-plan-card__price-unit { font-size: 15px; color: var(--f5-body-on-navy-2); }
.f5-plan-card__meta { margin: 6px 0 0; font-size: 14px; color: var(--f5-body-on-navy-2); }
.f5-plan-card__features { list-style: none; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; }
.f5-plan-card__features li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; color: var(--f5-white); }
.f5-plan-card__features li svg { flex: none; color: var(--f5-blue-on-navy); }
.f5-plan-card__cta { display: block; margin-top: 26px; text-align: center; }

/* "wat je nooit bij ons vindt" grid */
.f5-never-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.f5-never-item { border-top: 2px solid var(--f5-ink); padding-top: 20px; }
.f5-never-item p { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--f5-ink); }

@media (max-width: 1040px) {
  .f5-never-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .f5-compare-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .f5-never-grid { grid-template-columns: minmax(0, 1fr); }
  .f5-compare-table__head { display: none; }
  .f5-compare-table__row,
  .f5-compare-table__row--florijn { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .f5-plan-card__features { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- lead forms: /demo and /contact (BEG-1288). Net-new, additive
   only, distinct class names from anything else in this file so a sibling
   v5 page ticket's own CSS additions can land without collision. ---------- */

/* shared field styling, used by the demo form, the contact form and (once
   BEG-1289 lands) the voor-ondernemers form. */
.f5-field { display: flex; flex-direction: column; gap: 6px; }
.f5-field span { font-size: 13px; font-weight: 600; color: var(--f5-ink); }
.f5-field span em { font-weight: 500; font-style: normal; color: var(--f5-muted); }
.f5-field input, .f5-field select, .f5-field textarea { font-family: inherit; font-size: 15px; color: var(--f5-ink); padding: 13px 14px; border: 1px solid var(--f5-border-5); border-radius: 11px; outline: none; background: var(--f5-white); width: 100%; }
.f5-field input:focus, .f5-field select:focus, .f5-field textarea:focus { border-color: var(--f5-blue); }
.f5-field textarea { resize: vertical; }
.f5-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* confirmation state (a submitted form swaps for this), shared shape with a
   colour modifier: green check on Contact, blue circle on Demo/ondernemers. */
.f5-confirm { padding: 24px 0; text-align: left; }
.f5-confirm--centered { text-align: center; padding: 28px 8px; }
.f5-confirm__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-confirm--centered .f5-confirm__icon { width: 60px; height: 60px; margin: 0 auto; }
.f5-confirm--check .f5-confirm__icon { background: #DCFCE7; color: #166534; }
.f5-confirm__title { margin: 20px 0 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 24px; color: var(--f5-ink); }
.f5-confirm__body { margin: 10px 0 0; font-size: 16px; line-height: 1.65; color: var(--f5-body); max-width: 400px; }

/* /demo: text column + form panel */
.f5-lead-hero { padding: 64px 0 104px; background: var(--f5-white); }
.f5-lead-hero__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.f5-lead-hero__h1 { font-weight: 800; font-size: clamp(36px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.03em; color: var(--f5-ink); margin: 18px 0 0; text-wrap: balance; }
/* smaller variant, used by the Contact hero (its H1 is a shorter, one-line
   sentence, not the 4-line demo headline) */
.f5-lead-hero__h1--sm { font-size: clamp(34px, 4.4vw, 54px); }
.f5-lead-hero__lead { margin: 18px 0 0; font-size: 18px; line-height: 1.65; color: var(--f5-body); max-width: 500px; text-wrap: pretty; }
.f5-lead-hero__sublabel { margin: 32px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--f5-muted); }
.f5-lead-hero__list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.f5-lead-hero__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--f5-body); }
.f5-lead-hero__list li svg { flex: none; margin-top: 2px; color: var(--f5-blue); }
.f5-lead-hero__note { margin-top: 36px; padding: 20px 22px; background: var(--f5-sand); border-radius: 16px; font-size: 15px; line-height: 1.6; color: var(--f5-body); }
.f5-lead-hero__note strong { color: var(--f5-ink); }
.f5-lead-panel { padding: 40px; background: #FBFAF6; border: 1px solid var(--f5-border); border-radius: 24px; }
.f5-lead-form { display: flex; flex-direction: column; gap: 15px; }
.f5-lead-form__submit { margin-top: 6px; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--f5-white); background: var(--f5-blue); border: none; padding: 15px; border-radius: 12px; cursor: pointer; box-shadow: 0 12px 26px -10px rgba(37, 99, 235, 0.6); }
.f5-lead-form__submit:hover { background: var(--f5-blue-hover); }
.f5-lead-form__submit:disabled { opacity: 0.65; cursor: default; }
.f5-lead-form__note { font-size: 12.5px; color: var(--f5-muted); text-align: center; margin: 4px 0 0; }
.f5-lead-form__error { margin: 4px 0 0; font-size: 14px; color: #9F1239; }

/* /contact: form + info panel */
.f5-contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); border: 1px solid var(--f5-border); border-radius: 24px; overflow: hidden; box-shadow: 0 1px 2px rgba(16, 27, 45, 0.04), 0 26px 50px -34px rgba(16, 27, 45, 0.4); }
.f5-contact-grid__form { padding: 44px; }
.f5-contact-grid__info { padding: 44px; background: var(--f5-sand); border-left: 1px solid var(--f5-sand-3); display: flex; flex-direction: column; gap: 24px; }
.f5-contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 4px; }
.f5-contact-form__submit { font-family: inherit; font-size: 16px; font-weight: 600; color: var(--f5-white); background: var(--f5-blue); border: none; padding: 14px 26px; border-radius: 11px; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(37, 99, 235, 0.6); }
.f5-contact-form__submit:hover { background: var(--f5-blue-hover); }
.f5-contact-form__submit:disabled { opacity: 0.65; cursor: default; }
.f5-contact-form__hint { font-size: 13px; color: var(--f5-muted); }
.f5-contact-form__error { margin: 4px 0 0; font-size: 14px; color: #9F1239; }
.f5-info-row { display: flex; gap: 14px; align-items: flex-start; }
.f5-info-row__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-info-row__title { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 15.5px; color: var(--f5-ink); }
.f5-info-row__body { margin: 5px 0 0; font-size: 15px; line-height: 1.6; color: var(--f5-body); }
.f5-info-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 45%; border-radius: 16px; }

/* "Ik ben" segmented control: native radios, so the choice survives with
   JavaScript disabled. The visual active state is CSS-only (:checked + the
   adjacent label), so it works the same with or without the enhancement
   script that swaps the organisation-field label text (v5/forms.js). */
.f5-radio-group { border: 0; padding: 0; margin: 0; }
.f5-radio-group legend { font-size: 13px; font-weight: 600; color: var(--f5-ink); padding: 0; margin: 0 0 8px; }
.f5-radio-group__options { display: flex; flex-wrap: wrap; gap: 8px; }
.f5-radio-group__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.f5-radio-group__label { font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--f5-border-5); background: var(--f5-white); color: var(--f5-body); }
.f5-radio-group__input:checked + .f5-radio-group__label { border-color: var(--f5-blue); background: var(--f5-blue-light-3); color: #1E40AF; }
.f5-radio-group__input:focus-visible + .f5-radio-group__label { outline: 2px solid var(--f5-blue); outline-offset: 2px; }

/* "Andere routes" cross-links (Contact -> Demo / voor-ondernemers) */
.f5-cross-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.f5-cross-link { display: flex; flex-direction: column; gap: 10px; padding: 28px; border-radius: 20px; }
.f5-cross-link--navy { background: var(--f5-ink); color: var(--f5-body-on-navy); }
.f5-cross-link--navy:hover { background: #16233A; color: var(--f5-body-on-navy); }
.f5-cross-link--white { background: var(--f5-white); border: 1px solid var(--f5-border); color: var(--f5-body); }
.f5-cross-link--white:hover { border-color: var(--f5-blue); color: var(--f5-body); }
.f5-cross-link__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.f5-cross-link--navy .f5-cross-link__kicker { color: var(--f5-blue-on-navy); }
.f5-cross-link--white .f5-cross-link__kicker { color: var(--f5-muted); }
.f5-cross-link__title { font-family: var(--f5-font-head); margin: 0; font-weight: 800; font-size: 22px; line-height: 1.25; }
.f5-cross-link--navy .f5-cross-link__title { color: var(--f5-white); }
.f5-cross-link--white .f5-cross-link__title { color: var(--f5-ink); }
.f5-cross-link__desc { margin: 0; font-size: 15.5px; line-height: 1.6; }
.f5-cross-link__arrow { margin-top: 6px; font-size: 15px; font-weight: 600; }
.f5-cross-link--navy .f5-cross-link__arrow { color: var(--f5-blue-on-navy); }
.f5-cross-link--white .f5-cross-link__arrow { color: var(--f5-blue); }

@media (max-width: 880px) {
  .f5-lead-hero__grid,
  .f5-contact-grid,
  .f5-cross-links {
    grid-template-columns: minmax(0, 1fr);
  }
  .f5-contact-grid__info { border-left: none; border-top: 1px solid var(--f5-sand-3); }
}

@media (max-width: 560px) {
  .f5-field-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- content pages (BEG-1289): net-new components the shared page
   system (above) doesn't define yet. Additive only — nothing above this
   line is changed. Reusable by later v5 pages, not specific to these two. ---------- */

/* generic content-page hero: text column + media column, on the shared
   .f5-block grid. Deliberately distinct from Home's .f5-hero, whose
   .f5-hero__h1 span forces a two-line nowrap heading that would overflow a
   longer, unbroken H1 sentence. */
/* .f5-page-hero, __h1, __lead and __actions are defined once, on development
   (BEG-1284). Only the roomier bottom padding is new here; the lead this page
   wants is development's existing __lead--solo, and the H1 size comes from the
   per-page clamp in the markup. */
.f5-page-hero--roomy { padding-bottom: 96px; }
.f5-page-hero__media { position: relative; }
.f5-page-hero__photo { display: block; width: 100%; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -32px rgba(16, 27, 45, 0.4); }

/* floating note card on a hero photo (e.g. a question chip). A right-side
   sibling of Home's left-anchored .f5-hero__card. */
.f5-hero-note { position: absolute; z-index: 2; background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 16px; box-shadow: 0 24px 48px -22px rgba(16, 27, 45, 0.45); padding: 15px 16px; width: 290px; }
.f5-hero-note--br { right: -14px; bottom: 0; }
.f5-hero-note__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--f5-muted); }
.f5-hero-note__title { margin: 8px 0 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: var(--f5-ink); }
.f5-hero-note__pills { display: flex; gap: 8px; margin-top: 12px; }
.f5-hero-note__pill { font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 8px; }
.f5-hero-note__pill--active { color: var(--f5-white); background: var(--f5-blue); border: 1px solid var(--f5-blue); }
.f5-hero-note__pill--inactive { color: var(--f5-ink); background: var(--f5-white); border: 1px solid var(--f5-border-5); }
.f5-hero-note__foot { margin: 10px 0 0; font-size: 12px; color: var(--f5-muted); }

/* numbered steps ("stap voor stap") */
.f5-step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.f5-step { background: var(--f5-white); border: 1px solid var(--f5-border); border-radius: 18px; padding: 24px 24px 26px; }
.f5-step__head { display: flex; align-items: center; gap: 12px; }
.f5-step__num { flex: none; width: 32px; height: 32px; border-radius: 999px; background: var(--f5-blue); color: var(--f5-white); display: flex; align-items: center; justify-content: center; font-family: var(--f5-font-head); font-weight: 800; font-size: 14px; }
.f5-step__rule { flex: 1; height: 1px; background: var(--f5-border); }
.f5-step__title { margin-top: 18px; font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-step__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

/* bordered feature grid, icon optional ("wat je eraan hebt" / "hoe we werken") */
.f5-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; }
.f5-feature-grid--tight { margin-top: 40px; }
.f5-feature-tile { border-top: 1px solid var(--f5-border); padding-top: 22px; }
.f5-feature-tile__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-feature-tile__title { margin-top: 16px; font-weight: 800; font-size: 18px; line-height: 1.28; letter-spacing: -0.012em; color: var(--f5-ink); text-wrap: balance; }
.f5-feature-tile__title--tight { margin-top: 0; }
.f5-feature-tile__desc { margin: 8px 0 0; font-size: 15.5px; line-height: 1.62; color: var(--f5-body); text-wrap: pretty; }

/* two-column signup panel ("laat het ons weten") */
.f5-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--f5-border); border-radius: 24px; overflow: hidden; }
.f5-signup__copy { padding: 48px 44px; }
.f5-signup__panel { padding: 44px; background: #FBFAF6; border-left: 1px solid var(--f5-border-2); }
.f5-signup__note { margin: 22px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--f5-body); }
.f5-signup__form { display: flex; flex-direction: column; gap: 15px; }
.f5-signup__field { display: flex; flex-direction: column; gap: 6px; }
.f5-signup__field span { font-size: 13px; font-weight: 600; color: var(--f5-ink); }
.f5-signup__field span em { font-weight: 500; font-style: normal; color: var(--f5-muted); }
.f5-signup__field input { font-family: inherit; font-size: 15px; color: var(--f5-ink); padding: 13px 14px; border: 1px solid var(--f5-border-5); border-radius: 11px; outline: none; background: var(--f5-white); }
.f5-signup__field input:focus { border-color: var(--f5-blue); }
.f5-signup__submit { margin-top: 6px; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 16px; font-weight: 600; color: var(--f5-white); background: var(--f5-blue); border: none; padding: 15px; border-radius: 12px; cursor: pointer; }
.f5-signup__submit:hover { background: var(--f5-blue-hover); }

/* FAQ accordion */
.f5-faq-list { margin-top: 36px; border-top: 1px solid var(--f5-border); }
.f5-faq-list__item { border-bottom: 1px solid var(--f5-border); padding: 20px 0; }
.f5-faq-list__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--f5-font-head); font-weight: 700; font-size: 18px; color: var(--f5-ink); }
.f5-faq-list__item summary::-webkit-details-marker { display: none; }
.f5-faq-list__item summary::after { content: '+'; flex: none; font-size: 24px; line-height: 1; color: var(--f5-blue); }
.f5-faq-list__item[open] summary::after { content: '\2212'; }
.f5-faq-list__item p { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--f5-body); max-width: 760px; text-wrap: pretty; }

/* stacked icon cards ("onze missie") */
.f5-icon-cards { display: flex; flex-direction: column; gap: 14px; }
.f5-icon-card { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 18px; background: var(--f5-white); border: 1px solid var(--f5-border); }
.f5-icon-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--f5-blue-light); color: var(--f5-blue); }
.f5-icon-card__title { margin: 0; font-weight: 800; font-size: 17px; color: var(--f5-ink); }
.f5-icon-card__desc { margin: 5px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--f5-body); }

/* technology tile grid, on navy ("eigen software, eigen ai") */
.f5-tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.f5-tech-tile { padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); }
.f5-tech-tile__title { margin: 0; font-family: var(--f5-font-head); font-weight: 800; font-size: 16.5px; color: var(--f5-white); }
.f5-tech-tile__desc { margin: 4px 0 0; font-size: 14px; color: var(--f5-body-on-navy); }

@media (max-width: 880px) {
  .f5-step-grid,
  .f5-feature-grid,
  .f5-signup,
  .f5-tech-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .f5-signup__panel { border-left: none; padding: 34px 24px; }
  .f5-hero-note--br { position: relative; right: auto; bottom: auto; width: auto; margin-top: 14px; }
}