/* ==========================================================================
   Blocco condiviso — LA SCALETTA
   Monitoring & Reporting `How Works` 113:1889 · 1512 x 1281

   Verifica altezza: 160 + 93 (intro) + 80 + 788 (scaletta) + 160 = 1281 ✔
     scaletta = 155 + 8 + 155 + 8 + 155 + 8 + 136 + 8 + 155 = 788 ✔
     card a due righe di corpo = 40 + 29 + 8 + 38 + 40 = 155 ✔
     card a una riga  (la 4a)  = 40 + 29 + 8 + 19 + 40 = 136 ✔

   ⚠️ L'altezza della quarta card NON va fissata: e piu bassa solo perche la
   sua descrizione sta su una riga.

   ⚠️ Lo scarto orizzontale sembra 160 / 160 / 160 / 152. Non e una
   imprecisione di disegno: la quinta card e ancorata a DESTRA del contenitore
   (1432 - 800 = 632, e 632 - 4 x 160 = -8 -> di qui i 152 apparenti). Scritta
   con `margin-left: auto` il valore torna da solo a qualsiasi larghezza.

   ⚠️ Le tinte sono PIATTE, non gradienti: tre colori per cinque card.
   Nessun linear-gradient da nessuna parte in questa sezione.

   ⚠️ Nessuna animazione dichiarata nel mockup (a differenza di `Benefits`,
   dove lo sticky e scritto nel design context). Il contenitore `Cards` ha un
   `overflow-y: auto` residuo che non produce alcun effetto visibile. Sezione
   statica finche il designer non dice altro.
   ========================================================================== */

.scaletta {
  background: var(--color-white);
}

/* --- Intro 113:1890 — 1432 x 93 ------------------------------------------
   ⚠️ A bandiera a sinistra: insieme a `Le domande` e l'unica intestazione
   non centrata della pagina.
-------------------------------------------------------------------------- */
.scaletta__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                   /* 16 */
  width: 100%;
}

.scaletta__titolo {
  width: 100%;
  color: var(--text-on-light);
  text-align: left;
}

.scaletta__lead {
  width: 100%;
  color: var(--text-on-light-muted);
  text-align: left;
}

/* --- Le cinque card 113:1893 --------------------------------------------- */
.scaletta__passi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);                   /* 8 — il passo verticale del mockup */
  width: 100%;
  margin-top: var(--space-6);            /* 80 — il gap di sezione */
  counter-reset: passo;
}

.scaletta-passo {
  counter-increment: passo;
  width: 800px;
  max-width: 100%;
  /* La diagonale: 160 per ogni gradino sceso. */
  margin-left: calc(var(--i) * 160px);
  padding: var(--space-5);               /* 40 */
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                   /* 8 */
  background: var(--color-tertiary-300); /* #525e6f — card 1 e 2 */
  color: var(--text-on-dark);
}

/* Card 3 e 4 */
.scaletta-passo:nth-child(n+3) { background: var(--color-tertiary-400); }  /* #29384d */
/* Card 5 */
.scaletta-passo:nth-child(n+5) { background: var(--color-tertiary); }      /* #00122b */

/* L'ultima e ancorata a destra, non a un rientro calcolato: vedi la nota in
   testa. `margin-left: auto` sopravvive anche se un giorno le card diventano
   quattro o sei. */
.scaletta-passo:last-child {
  margin-left: auto;
}

/* Il numero e il marcatore della lista, con il rientro di 36 del mockup.
   Riguarda il solo titolo: il corpo, sotto, occupa i 720 pieni. */
.scaletta-passo__titolo {
  position: relative;
  width: 100%;
  padding-left: 36px;
}

.scaletta-passo__titolo::before {
  content: counter(passo) ".";
  position: absolute;
  left: 0;
  top: 0;
}

.scaletta-passo__corpo {
  width: 100%;
  color: var(--text-on-dark-muted);
}