/*
 * "Una distanza, non un voto": il riquadro dell'esempio (la scena `distanza` della dashboard vera, che lo riempie)
 * e sotto le tre caselle affiancate.
 *
 * Lo Shadow DOM non eredita i default del browser: la radice rifà box-sizing e il reset dei paragrafi.
 */
.zPN2ihtlRBcYOwKMNhl6 {
  box-sizing: border-box;
  font-family: var(--hu-font-body);
  color: var(--hu-color-foreground);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.zPN2ihtlRBcYOwKMNhl6 *,
.zPN2ihtlRBcYOwKMNhl6 *::before,
.zPN2ihtlRBcYOwKMNhl6 *::after { box-sizing: border-box; }
:where(.zPN2ihtlRBcYOwKMNhl6) :where(p) { margin: 0; padding: 0; }

/* ─────────── il riquadro dell'esempio ─────────── */
/* solo la cornice: dentro c'è la scena, che porta il suo fondo (il foglio a quadretti) e segue il tema del sito */
.jC9csjd5hhDiSoKb85lL {
  border: 1px solid var(--hu-color-border-default);
  border-radius: var(--hu-radius-16);
  background: var(--hu-color-secondary);
  overflow: hidden;
  transition: background-color 280ms ease, border-color 280ms ease;
}

/* ─────────── le tre caselle ─────────── */
/* il gap di 1px sul fondo colorato disegna i divisori senza bordi doppi */
.nQoJlHh3w8VcxvBkGE_a {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--hu-color-border-input);
  border: 1px solid var(--hu-color-border-input);
  border-radius: var(--hu-radius-16); overflow: hidden;
  margin-top: clamp(30px, 3.4vw, 48px);
}
.lwHDtk_gbNE9KwXDRO0J { background: var(--hu-color-white); padding: 26px 24px; display: flex; flex-direction: column; gap: 9px; }
.Xoa4j6wHkRbNYb2642bJ {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em;
}
.Xoa4j6wHkRbNYb2642bJ i { width: 10px; height: 10px; border-radius: 50%; display: block; flex: 0 0 auto; }
/* i colori della scena: viola dentro la fascia, arancio fuori */
.Lf_N6Ruf3qvlBdtoZVn2 { background: var(--hv-accent, var(--hu-color-primary)); }
.vpB8rhsgeKjoLVwIboaE { background: var(--hv-chart-warn, var(--hu-product-area-adattamento)); }
.lwHDtk_gbNE9KwXDRO0J p { font-size: 14px; line-height: 130%; letter-spacing: -0.03em; color: var(--hu-color-text-muted); }

/* ─────────── movimento ───────────
   Le tre caselle salgono in cascata, una volta, quando entrano in vista. `data-scene="pre"` le tiene ferme al primo
   fotogramma (quindi nascoste) finché sono sotto la piega; con "riduci il movimento" l'attributo non viene mai
   messo e tutto resta visibile e fermo. */
@media (prefers-reduced-motion: no-preference) {
  .nQoJlHh3w8VcxvBkGE_a[data-scene] > * { animation: bMZ2fQHlU5TiWZ4Rgbyt 700ms var(--hu-ease-out-expo) both; }
  .nQoJlHh3w8VcxvBkGE_a[data-scene] > *:nth-child(2) { animation-delay: 60ms; }
  .nQoJlHh3w8VcxvBkGE_a[data-scene] > *:nth-child(3) { animation-delay: 120ms; }
  [data-scene="pre"], [data-scene="pre"] * { animation-play-state: paused !important; }
}
@keyframes bMZ2fQHlU5TiWZ4Rgbyt { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }