/* ============================================================
   Meer rendement — "Waar het rendement ontstaat" (.mrv)
   ------------------------------------------------------------
   Bron: Claude Design-export "Meer rendement (4).html", CSS-blok
   "Waar het rendement ontstaat (mrv)".

   AFWIJKING VAN DE BRON, BEWUST: de bron zet deze sectie op #fff.
   Op deze pagina staan hero én logobalk al wit, dus dan zouden er
   drie witte banden op een rij staan en loopt de wit/blauw-reeks
   uit de pas met /leadgeneratie/, waar de eerste sectie ná de
   hero juist blauw is. Deze sectie is daarom de blauwe band; de
   rest van de pagina wisselt daarna gewoon door. De kaarten zijn
   wit, dus ze steken beter af dan op de witte bron-band.
   ============================================================ */

.mrv { padding: var(--space-8) 0; background: #EEF1F8; }
.mrv > .container { width: 100%; max-width: var(--container, 1520px); margin: 0 auto; padding: 0 var(--gutter, 56px); }

.mrv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(28px, 4vw, 44px); }

.mrv-card {
  background: var(--c-white); border: 1px solid var(--c-border); border-radius: 18px;
  padding: clamp(22px, 3vw, 32px);
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 1px 2px rgba(20,20,100,0.04), 0 6px 18px rgba(20,20,100,0.06);
}
.mrv-card h3 {
  margin: 0; font-family: var(--font-head); font-weight: var(--fw-semibold);
  font-size: 22px; line-height: 1.25; letter-spacing: -0.015em; color: var(--c-navy);
  text-wrap: pretty;
}
.mrv-card > p {
  margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.65;
  color: var(--c-text-muted);
}

/* De proces-strip is een beeld, geen opgebouwde flow: hij plakt onderaan de
   kaart zodat beide kaarten hun strip op dezelfde lijn hebben, ook als de
   ene kaart een regel meer tekst heeft. */
.mrv-strip { display: block; width: 100%; height: auto; margin-top: auto; border-radius: 12px; }

@media (max-width: 860px) {
  .mrv-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Elementor-context + HARDENING tegen theme-resets.
   Zonder deze regels valt het gradient-accentwoord terug op zwart;
   zie de kop van mr-models.css voor de achtergrond hiervan.
   ============================================================ */
.elementor-widget-bconnect_mr_value { margin: 0 !important; }
.elementor-widget-bconnect_mr_value .accent {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	display: inline-block;
}
/* Elementor-core zet `.elementor img { border-radius: 0 }` (0,1,1); een kale
   .mrv-strip (0,1,0) verliest dat en de strip zou vierkante hoeken krijgen. */
.elementor-widget-container .mrv-strip { border-radius: 12px; }