/* Why Vidim — 18:624 · 1512 x 901
   Flusso verticale del Container interno:
   80 + 170 (Text) + 80 + 368 (Cards) + 80 + 43 (Pulsanti) + 80 = 901 */

/* --- Container esterno 18:624 — fill Neutrals/50, padding 0/40 -------------- */
.why {
  width: var(--page-width);
  padding: 0 var(--page-gutter);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Container interno 18:639 — 1432 x 901, Neutrals/100, radius 16 -------- */
.why__container {
  width: var(--container-width);
  padding: var(--space-6);            /* 80 su tutti e 4 i lati */
  background: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);                /* 80 */
}

/* --- Text 18:643 — 1272 x 170, column, gap 16, testo centrato ------------- */
.why__text {
  width: 1272px;                      /* 1432 - 80 - 80 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                /* 16 */
}

/* H2 18:634 — box 1272 x 116 */
.why__h2 {
  width: 1272px;
  color: var(--text-on-light);
  text-align: center;
}

/* Paragrafo 18:637 — box 1272 x 38 */
.why__lead {
  width: 1272px;
  color: var(--text-on-light-muted);
  text-align: center;
}

/* --- Cards 18:644 — 1272 x 368, row, gap 16 ------------------------------- */
.why__cards {
  width: 1272px;
  height: 368px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--grid-gap);               /* 16 — passo 306 + 16 = 322 */
}

/* --- Componente Why Card — master 41:1913 (Stato = FallBack) ---------------
   Istanze 18:805 / 18:813 / 18:821 / 18:829 — tutte 306 x 368.
   Il bordo inferiore del blocco testo cade sempre a y = 328 (368 - 40):
   colonna con space-between + gap minimo 16.
--------------------------------------------------------------------------- */
.why-card {
  width: 306px;
  height: 368px;                      /* altezza della riga Cards */
  padding: var(--space-5);            /* 40 su tutti e 4 i lati */
  background: var(--gradient-card-why); /* 137.896deg, #29384d -> #00122b */
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);                /* gap minimo 16 quando il contenuto riempie */
}

/* Icona I<istanza>;41:1914 — 40 x 40, ancorata in alto a sinistra */
.why-card__icon {
  width: 40px;
  height: 40px;
  flex: none;
}

/* Text I<istanza>;41:1990 — 226 x hug, column, gap 16 */
.why-card__text {
  width: 226px;                       /* 306 - 40 - 40 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                /* 16 */
}

/* Titolo I<istanza>;41:1915 — 28/34, Neutrals/50 */
.why-card__title {
  width: 226px;
  color: var(--text-on-dark);
  text-align: left;
  word-break: break-word;
}

/* Body I<istanza>;41:1919 — 16/19, Neutrals/300 */
.why-card__body {
  width: 226px;
  color: var(--text-on-dark-muted);
  text-align: left;
  word-break: break-word;
}

/* --- Pulsanti 24:989 — 347 x 43 (195 + 16 + 136) -------------------------- */
.why__actions {
  align-items: center;
  justify-content: center;
}