/* ==========================================================================
   DomusFlow — approved design system
   Navy #2C3E50 · blue #3498DB · light #ECF0F1
   ========================================================================== */

:root {
  --navy-900: #1b2836;
  --navy-800: #22303f;
  --navy-700: #2c3e50;
  --navy-600: #3a5064;
  --navy-500: #4d6379;
  --blue-700: #1f6da4;
  --blue-600: #2a86c4;
  --blue-500: #3498db;
  --blue-400: #5dade2;
  --blue-200: #b7dbf3;
  --blue-050: #eaf4fc;
  --ink-900: #1b2836;
  --ink-700: #33475b;
  --ink-500: #5a6b7c;
  --ink-400: #7d8b98;
  --line: #e2e8ee;
  --line-strong: #cdd8e2;
  --surface: #ffffff;
  --surface-2: #f6f9fb;
  --on-dark: #ecf0f1;
  --on-dark-muted: #b3c2cf;
  --on-dark-faint: #8296a7;
  --hairline-dark: rgba(255, 255, 255, .1);
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .9375rem;
  --t-md: 1rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.25rem;
  --t-h3: 1.0625rem;
  --t-h2: clamp(1.5rem, 1.15rem + 1.35vw, 2.125rem);
  --t-h1: clamp(2.15rem, 1.35rem + 3.4vw, 3.75rem);
  --t-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --section-y: clamp(64px, 7vw, 104px);
  --shell: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 64ch;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --sh-1: 0 1px 2px rgba(27, 40, 54, .05);
  --sh-2: 0 4px 12px -4px rgba(27, 40, 54, .1), 0 2px 4px -2px rgba(27, 40, 54, .06);
  --sh-3: 0 18px 34px -18px rgba(27, 40, 54, .3), 0 6px 12px -8px rgba(27, 40, 54, .14);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 74px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-lg);
  line-height: 1.62;
  color: var(--ink-500);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  margin: 0;
  color: var(--ink-900);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.017em;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue-600); }
img, svg { display: block; max-width: 100%; }
svg { flex: none; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.brand { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.brand-logo { width: auto; height: 46px; transition: opacity .16s var(--ease); }
.brand:hover .brand-logo { opacity: .88; }
.footer-logo { width: auto; height: 78px; }

/* Buttons */
.btn {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 0; padding: 9px 16px; border-radius: var(--r-sm); }
.btn-primary { --btn-bg: var(--blue-500); --btn-bd: var(--blue-500); box-shadow: 0 1px 2px rgba(27, 40, 54, .18); }
.btn-primary:hover { --btn-bg: var(--blue-600); --btn-bd: var(--blue-600); color: #fff; }
.btn-light { --btn-bg: #fff; --btn-bd: #fff; --btn-fg: var(--navy-700); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .45); }
.btn-light:hover { --btn-bg: var(--on-dark); --btn-bd: var(--on-dark); color: var(--navy-800); }
.btn-ghost { --btn-bd: rgba(255, 255, 255, .38); --btn-fg: #fff; backdrop-filter: blur(2px); }
.btn-ghost:hover { --btn-bg: rgba(255, 255, 255, .12); --btn-bd: rgba(255, 255, 255, .7); color: #fff; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(27, 40, 54, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--hairline-dark);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.site-header.is-stuck { background: rgba(27, 40, 54, .97); box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); min-height: var(--header-h); }
.primary-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-link {
  position: relative;
  display: block;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--on-dark-muted);
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: .003em;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-link.is-current { color: #fff; font-weight: 600; }
.nav-link.is-current::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-500);
}
.nav-split { margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--hairline-dark); }
.nav-login { margin-left: 8px; }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}
.nav-toggle-bars { display: grid; gap: 4px; justify-items: center; }
.nav-toggle-bars i { display: block; width: 18px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .22s var(--ease), opacity .16s var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }

/* Hero */
.hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(1100px 640px at 84% 8%, rgba(52, 152, 219, .55), transparent 62%),
    radial-gradient(760px 620px at 6% 96%, rgba(52, 152, 219, .20), transparent 60%),
    linear-gradient(158deg, var(--navy-900) 0%, var(--navy-700) 46%, #1f5f8d 100%);
}
.hero-inner { padding-block: clamp(72px, 8.5vw, 128px); }
.hero-copy { max-width: 800px; }
.hero-eyebrow { margin-bottom: var(--s-4); color: rgba(236, 240, 241, .74); font-size: var(--t-sm); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hero-title { margin-bottom: var(--s-5); color: #fff; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
.hero-lead { max-width: 64ch; margin-bottom: var(--s-8); color: rgba(236, 240, 241, .84); font-size: var(--t-lead); line-height: 1.65; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-note { max-width: 60ch; margin-top: var(--s-5); color: var(--on-dark-muted); font-size: var(--t-base); }

/* Content bands */
.band { padding-block: var(--section-y); }
.band-compact { padding-block: clamp(48px, 5.5vw, 76px); }
.band-muted { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: grid; justify-items: center; gap: var(--s-5); max-width: 820px; margin: 0 auto clamp(36px, 4.4vw, 56px); text-align: center; }
.section-head h2 { font-size: var(--t-h2); letter-spacing: -.022em; text-wrap: balance; }
.section-head p { max-width: var(--measure); text-wrap: pretty; }
.section-head--solo { margin-bottom: 0; }
.head-rule { width: 52px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-500), var(--blue-200)); }
.content-flow { max-width: var(--measure); }
.content-flow > * + * { margin-top: var(--s-5); }
.content-flow h2 { margin-bottom: var(--s-6); font-size: var(--t-h2); letter-spacing: -.022em; }
.content-flow h3 { margin-top: var(--s-8); font-size: var(--t-h3); }
.content-flow p { text-wrap: pretty; }
.center-copy { margin-inline: auto; text-align: center; }
.space-top { margin-top: var(--s-8); }
.text-left { text-align: left; }
.feature-grid, .card-grid, .step-grid, .split-grid { display: grid; gap: var(--s-6); }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--two, .split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.feature, .info-card, .step-card, .split-card, .faq-item, .form-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.feature, .info-card, .step-card, .split-card { padding: var(--s-8) var(--s-6); }
.feature { display: flex; flex-direction: column; gap: var(--s-3); transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.feature:hover { transform: translateY(-3px); border-color: var(--blue-200); box-shadow: var(--sh-2); }
.feature-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-2); border: 1px solid var(--blue-200); border-radius: var(--r-md); background: var(--blue-050); color: var(--blue-600); transition: background-color .2s var(--ease), color .2s var(--ease); }
.feature-icon svg { width: 24px; height: 24px; }
.feature:hover .feature-icon { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.feature h3, .info-card h3, .step-card h3, .split-card h3 { font-size: var(--t-h3); line-height: 1.32; text-wrap: balance; }
.feature p, .info-card p, .step-card p, .split-card p { margin-top: var(--s-3); font-size: var(--t-base); line-height: 1.65; text-wrap: pretty; }
.info-card { border-top: 3px solid var(--blue-500); }
.step-number { display: block; margin-bottom: var(--s-4); color: var(--blue-600); font-size: var(--t-xl); font-weight: 700; }
.text-link { display: inline-flex; align-items: center; margin-top: var(--s-8); font-size: var(--t-base); font-weight: 650; }
.text-link::after { content: "→"; margin-left: 8px; transition: transform .16s var(--ease); }
.text-link:hover::after { transform: translateX(3px); }
.editorial-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.editorial-title h2 { max-width: 13ch; font-size: var(--t-h2); letter-spacing: -.022em; text-wrap: balance; }
.editorial-title .head-rule { margin-top: var(--s-5); }
.editorial-copy { max-width: var(--measure); }
.editorial-copy > * + * { margin-top: var(--s-5); }
.list-checks, .list-plain { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.list-checks li, .list-plain li { position: relative; padding-left: 24px; color: var(--ink-700); }
.list-checks li::before, .list-plain li::before { content: ""; position: absolute; top: .72em; left: 2px; width: 7px; height: 7px; background: var(--blue-500); transform: rotate(45deg); }
.support-panel { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--blue-200); border-radius: var(--r-xl); background: var(--blue-050); }
.support-panel h2 { margin-bottom: var(--s-5); font-size: var(--t-h2); }
.support-panel p + p { margin-top: var(--s-4); }
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding: clamp(32px, 5vw, 60px); border-radius: var(--r-xl); color: var(--on-dark-muted); background: linear-gradient(145deg, var(--navy-900), var(--navy-700)); box-shadow: var(--sh-3); }
.cta-copy { max-width: 680px; }
.cta-copy h2 { margin-bottom: var(--s-4); color: #fff; font-size: var(--t-h2); }
.cta-copy p { text-wrap: pretty; }
.cta-copy a { color: var(--blue-200); }
.cta-copy a:hover { color: #fff; }
.cta-actions { display: flex; flex: none; flex-wrap: wrap; gap: var(--s-3); }

/* FAQ */
.faq-layout { display: grid; gap: clamp(48px, 6vw, 80px); }
.faq-group { display: grid; gap: var(--s-5); }
.faq-group > h2 { padding-bottom: var(--s-4); border-bottom: 3px solid var(--blue-500); font-size: var(--t-h2); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.faq-item { padding: var(--s-6); }
.faq-item h3 { margin-bottom: var(--s-3); font-size: var(--t-h3); }
.faq-item p { font-size: var(--t-base); line-height: 1.65; }

/* Display-only partner form */
.form-card { max-width: 940px; margin-inline: auto; padding: clamp(24px, 4vw, 48px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.form-field { display: grid; gap: 8px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label, .form-legend { color: var(--ink-700); font-size: var(--t-base); font-weight: 650; }
.form-field input, .form-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-900); transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(52, 152, 219, .16); }
.choice-group { margin: 0; padding: 0; border: 0; }
.choice-row { display: flex; gap: var(--s-6); margin-top: var(--s-3); }
.choice-row label, .consent-label { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-700); }
.choice-row input, .consent-label input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue-500); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-8); }
.form-actions p { font-size: var(--t-base); }

/* --------------------------------------------------------------------------
   Footer — kolommen op één as.
   Links: merk + lidmaatschap. Rechts: twee kolommen die met hun kop op
   dezelfde bovenlijn beginnen; de laatste kolom sluit aan op de rechterrand
   van de shell. Onderaan, achter een haarlijn, de wettelijke vermelding.
   Drie duidelijke niveaus: kop (helder, klein, gesperd) — link (gedempt) —
   wettelijke regel (vaag, kleiner). Geen scheidingstekens in lijsten, dus
   geen regel kan met een punt beginnen.
   -------------------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(52px, 6vw, 80px) clamp(28px, 3.5vw, 40px);
  background: var(--navy-900);
  color: var(--on-dark-muted);
  font-size: var(--t-base);
}
.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(min-content, auto));
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(32px, 5vw, 72px);
  row-gap: var(--s-10);
}
/* Het merkblok spant de volle rijhoogte: logo bovenaan, lidmaatschap onderaan,
   zodat links en rechts op dezelfde onderlijn eindigen. */
.footer-brand { display: grid; align-self: stretch; align-content: space-between; justify-items: start; gap: var(--s-6); }
.footer-note { color: var(--on-dark-faint); font-size: var(--t-sm); }
.footer-heading {
  margin-bottom: var(--s-5);
  color: var(--on-dark);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1;
  text-transform: uppercase;
}
.footer-links { display: grid; gap: var(--s-3); }
.footer-links li { line-height: 1.4; overflow-wrap: anywhere; }
.site-footer a { color: var(--on-dark-muted); transition: color .16s var(--ease); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-6);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--s-6);
  border-top: 1px solid var(--hairline-dark);
  color: var(--on-dark-faint);
  font-size: var(--t-sm);
}
.footer-bottom a { color: var(--on-dark-faint); }

@media (max-width: 1040px) {
  .nav-link { padding-inline: 8px; }
  .nav-split { margin-left: 5px; padding-left: 7px; }
}
@media (max-width: 900px) {
  .nav-toggle { display: grid; place-items: center; }
  .primary-nav { position: absolute; left: 0; right: 0; top: 100%; display: block; max-height: 0; margin-left: 0; overflow: hidden; background: var(--navy-900); border-bottom: 1px solid var(--hairline-dark); box-shadow: 0 24px 40px -28px rgba(0, 0, 0, .9); transition: max-height .26s var(--ease); }
  .site-header.nav-open .primary-nav { max-height: 520px; }
  .nav-list { display: grid; gap: 2px; padding: 12px var(--gutter) 20px; }
  .nav-link { padding: 12px 10px; font-size: var(--t-md); }
  .nav-link.is-current::after { left: 10px; right: auto; bottom: 6px; width: 22px; }
  .nav-split { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hairline-dark); border-left: 0; }
  .nav-login { margin: 8px 0 0; }
  .nav-login .btn { width: 100%; padding-block: 12px; }
  .feature-grid, .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .editorial-title h2 { max-width: 22ch; }
  .cta-panel { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 680px) {
  body { font-size: var(--t-md); }
  .brand-logo { height: 38px; }
  .hero-actions .btn { width: 100%; }
  .feature-grid, .card-grid--three, .card-grid--two, .step-grid, .split-grid, .faq-list, .form-grid { grid-template-columns: 1fr; }
  .form-field--wide { grid-column: auto; }
  .feature, .info-card, .step-card, .split-card { padding: var(--s-6); }
  .cta-actions { width: 100%; }
  .cta-actions .btn { width: 100%; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); row-gap: var(--s-10); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-links { gap: var(--s-4); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   Bespaarcheck — één kaart, één as.
   De pagina is één ding: de check. Kop, inleiding en de tool staan in dezelfde
   kaart, zodat er niets naast of onder de tool zweeft.

   Maatvoering. De tool is in de iframe een kolom van 680px met 24px eigen
   binnenmarge. De kaart is daarom 744px breed met 32px binnenmarge
   (744 − 2×32 = 680): de tool vult de kaart altijd exact, op elk scherm, dus
   lege ruimte naast de tool kan niet ontstaan. De tekst in de kop begint op
   32 + 24 = 56px, precies de linkerrand van de vragen in de tool.
   Alles hieronder hoort bij deze pagina; de klassen worden nergens anders
   gebruikt.
   -------------------------------------------------------------------------- */
.check {
  /* De kaart is smal zolang de tool vragen stelt en verbreedt naar de volle
     contentbreedte op het resultaat, waar "Uw gegevens" naast de cijfers past. */
  --card-w: 824px;
  --card-pad: 32px;     /* kaartrand → iframe */
  --tool-inset: 24px;   /* eigen binnenmarge ván de tool, in de iframe */
  padding-block: clamp(14px, 1.6vw, 22px) clamp(48px, 6vw, 88px);
  /* Het veld vult minstens het scherm: bij een korte tool (vraag 1) mag de
     footer niet meteen onder de kaart opduiken. */
  min-height: calc(100vh - var(--header-h));
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.check-card {
  overflow: hidden;
  max-width: var(--card-w);
  margin-inline: auto;
  transition: max-width .3s ease;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: 0 26px 50px -30px rgba(27, 40, 54, .30), 0 2px 6px -3px rgba(27, 40, 54, .08);
}
.check-card.is-wide { --card-w: var(--shell); }
@media (prefers-reduced-motion: reduce) { .check-card { transition: none; } }
.check-card-head { padding: clamp(22px, 2.6vw, 30px) calc(var(--card-pad) + var(--tool-inset)) clamp(12px, 1.4vw, 16px); }
.check-eyebrow {
  margin-bottom: var(--s-3);
  color: var(--blue-700);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.check-title {
  margin-bottom: var(--s-4);
  color: var(--ink-900);
  font-size: clamp(1.6rem, 1.12rem + 1.55vw, 2.25rem);
  line-height: 1.11;
  letter-spacing: -.026em;
  text-wrap: balance;
}
.check-lead { color: var(--ink-500); font-size: var(--t-lg); line-height: 1.6; text-wrap: pretty; }

/* De tool. Geen eigen achtergrond of rand: de kaart ís de omlijsting.
   De hoogte komt via postMessage, dus hier nergens een vaste hoogte. */
.check-card-tool { padding: var(--s-5) var(--card-pad) var(--s-2); }
.check-frame { display: block; width: 100%; border: 0; }


@media (max-width: 680px) {
  /* Smal scherm: de iframe loopt tot de kaartrand, de eigen marge van de tool
     (24px) wordt de marge van de kaart. Tekst en vragen blijven op één as. */
  .check { --card-pad: 0px; padding-block: 18px 36px; }
  .check-card { border-radius: var(--r-lg); box-shadow: 0 12px 26px -20px rgba(27, 40, 54, .28); }
  .check-lead { font-size: var(--t-md); }
}

/* --------------------------------------------------------------------------
   Terugkoppeling van het partnerformulier
   -------------------------------------------------------------------------- */
.form-msg { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.form-msg:empty { display: none; }
.form-msg.is-ok { color: var(--green-700, #1B5E4A); font-weight: 500; }
.form-msg.is-err { color: #B00020; }