/* ============================================================
   Meer rendement — "Onze aanpak" (.mra)
   ------------------------------------------------------------
   Bron: Claude Design-export "Meer rendement (4).html", CSS-blok
   "Onze aanpak (mra)" plus de twee losse regels
   voor `.mra-ring` verderop in dat bestand.

   NIET OVERGENOMEN: de bron heeft in datzelfde blok een complete
   `.mra-canvas`-mockup staan (panelen, journey-dots, flowkaart,
   sliders, sparkline). Die markup wordt in de export niet
   gerenderd — daar staat de procescirkel als afbeelding. Die
   ~120 regels dode CSS staan hier dus bewust niet in.

   AFWIJKING VAN DE BRON, BEWUST: de bron zet de sectie op
   `--c-surface` (#FAFAFB, praktisch wit). Hier is dit de blauwe
   band van de wit/blauw-afwisseling; zie de kop van mr-value.css.
   ============================================================ */

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

.mra-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 4vw, 64px); align-items: center; }

.mra-copy .eyebrow { margin-bottom: 14px; }
.mra-copy .au-h2 { margin: 0 0 16px; text-align: left; }
.mra-copy > p {
  margin: 0 0 20px; max-width: 34em;
  font-family: var(--font-body); font-size: 16.5px; line-height: 1.7; color: var(--c-text-muted);
}
.mra-copy .checklist { margin: 0 0 26px; }
.mra-actions { display: flex; }

.mra-visual { min-width: 0; }
.mra-ring { display: block; width: 100%; height: auto; margin: 0 auto; }

@media (max-width: 1024px) {
  .mra-grid { grid-template-columns: 1fr; gap: 36px; }
  .mra-visual { max-width: 640px; margin: 0 auto; }
}

/* ============================================================
   Elementor-context + HARDENING tegen theme-resets.
   ============================================================ */
.elementor-widget-bconnect_mr_approach { margin: 0 !important; }
.elementor-widget-bconnect_mr_approach .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-widget-bconnect_mr_approach .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_mr_approach .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}
/* MAAT ÉN RADIUS VAN DE PROCESCIRKEL STAAN HIER, NIET BIJ .mra-ring HIERBOVEN.
   Elementor-core zet `.elementor img { max-width: 100%; border-radius: 0 }`
   (0,1,1) en dat verslaat een kale `.mra-ring` (0,1,0). Gemeten: de
   `max-width: 520px` uit de bron kwam daardoor nooit aan — de cirkel vulde de
   hele kolom en stond op 686px op 1440, met vierkante hoeken. Met de
   wrapper-prefix (0,2,0) wint deze regel wél.
   525px = eerst 15% kleiner dan die 686px (583px), daarna nog 10% kleiner —
   beide keren op verzoek van de gebruiker. Dat komt toevallig vrijwel uit op de
   520px die de bron bedoelde maar nooit haalde. */
.elementor-widget-container .mra-ring { max-width: 525px; border-radius: 24px; }