/* ==========================================================================
   Maintenance — `Before After` 63:715 · 1512 x 2312

   ⚠️ Omonima della `Before After` di Compliance, che pero e una TABELLA.
   Qui sono cinque card a scaletta che scendono in diagonale, e sotto un
   blocco "Proactive by Design" con immagine, testo e pulsanti.

   Verifica altezza:
     160 + 112 (testo) + 80 + 807 (scaletta) + 80 + 913 (proactive) + 160 = 2312 ✔
     scaletta = 5 x 155 + 4 x 8 = 775 + 32 = 807 ✔
     proactive = 645 (img) + 40 + 145 (testo) + 40 + 43 (pulsanti) = 913 ✔

   ---------------------------------------------------------------------------
   LA SCALETTA — perche non e posizionamento assoluto

   In Figma le cinque card sono assolute (left 0/160/320/480 e l'ultima
   ancorata a destra). Ma le altezze dicono un'altra cosa: 155 di card e 163
   di passo verticale, cioe 8px di spazio — NON si sovrappongono mai.
   Quindi qui e un normale flusso in colonna con gap 8 e uno scostamento
   orizzontale crescente. Il risultato a 1512 e identico al pixel, ma sotto i
   1512 la scaletta si comporta da sola invece di richiedere di ricalcolare
   cinque `top` a ogni breakpoint.

   ⚠️ L'ultima card e ancorata a DESTRA, non spostata di altri 160: a 1432 di
   contenitore, 1432 − 800 = 632, e infatti il mockup dice 632 e non 640. Non
   e una sbavatura del designer: e `right: 0`.
   ========================================================================== */

.mnt-ba__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;      /* ⚠️ a sinistra, non centrato come Benefits */
  gap: var(--space-3);
  width: 100%;
}

.mnt-ba__titolo { color: var(--text-on-light); }
.mnt-ba__lead   { color: var(--color-tertiary-300); }

/* --- La scaletta ---------------------------------------------------------- */
.mnt-ba__scala {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);          /* 8 */
  width: 100%;
  margin-top: var(--space-6);   /* 80 */
  list-style: none;
  counter-reset: gradino;
  margin-block-end: 0;
  padding: 0;
}

.mnt-ba-card {
  counter-increment: gradino;
  width: 800px;
  max-width: 100%;
  padding: var(--space-5);      /* 40 */
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);          /* 8 */
}

/* Lo scostamento crescente: 160 per gradino, l'ultimo a filo destro. */
.mnt-ba-card:nth-child(2) { margin-left: 160px; }
.mnt-ba-card:nth-child(3) { margin-left: 320px; }
.mnt-ba-card:nth-child(4) { margin-left: 480px; }
.mnt-ba-card:last-child   { margin-left: auto; }

/* Il fondo si scurisce salendo di maturita: e la sostanza della sezione,
   non decorazione. Due card chiare (reattivo e programmato), due medie
   (preventivo e su condizione), una scura (predittivo). */
.mnt-ba-card:nth-child(1),
.mnt-ba-card:nth-child(2) { background: var(--color-tertiary-300); }
.mnt-ba-card:nth-child(3),
.mnt-ba-card:nth-child(4) { background: var(--color-tertiary-400); }
.mnt-ba-card:nth-child(5) { background: var(--color-tertiary); }

.mnt-ba-card__titolo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
}

.mnt-ba-card__titolo::before {
  content: counter(gradino) ".";
  flex: 0 0 auto;
  min-width: 24px;
  font-variant-numeric: tabular-nums;
}

.mnt-ba-card__corpo { color: var(--text-on-dark-muted); }

/* --- Proactive by Design -------------------------------------------------- */
.mnt-proactive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);          /* 40 */
  width: 100%;
  margin-top: var(--space-6);   /* 80 */
}

.mnt-proactive__media {
  width: 100%;
  height: 645px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* `contain` come le altre immagini larghe del progetto: non viene ritagliata. */
.mnt-proactive__media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.mnt-proactive__testo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  text-align: center;
}

.mnt-proactive__titolo { color: var(--text-on-light); }
.mnt-proactive__corpo  { color: var(--color-tertiary-300); }