/*
 * Il confronto completo fra i piani.
 *
 * Anatomia del mock (.cmp / .cmplist): su schermo largo una tabella vera, con
 * l'intestazione agganciata in alto mentre si scorre e la colonna consigliata
 * tinta per tutta l'altezza; i gruppi sono titoli, non fasce colorate.
 *
 * Sotto i 900 px cinque colonne non ci stanno: gli stessi dati diventano un
 * elenco — gruppo, voce, e sotto un piano per riga — dove ogni voce si apre e
 * si chiude. Nessun riquadro, solo filetti: il ritmo verticale fa il lavoro.
 *
 * Lo Shadow DOM non eredita i default del browser: la radice rifà box-sizing e
 * il reset di tabelle, bottoni e liste di definizione.
 */
.i5tAyCqiu_aFKk4CSseg {
  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;
}
.i5tAyCqiu_aFKk4CSseg *,
.i5tAyCqiu_aFKk4CSseg *::before,
.i5tAyCqiu_aFKk4CSseg *::after { box-sizing: border-box; }
.i5tAyCqiu_aFKk4CSseg :where(p, dl, dd, dt) { margin: 0; padding: 0; }
.i5tAyCqiu_aFKk4CSseg :where(button) { font: inherit; cursor: pointer; background: none; border: none; padding: 0; margin: 0; color: inherit; text-align: left; }
.i5tAyCqiu_aFKk4CSseg :focus-visible { outline: 2px solid var(--hu-color-primary); outline-offset: 3px; border-radius: 3px; }
.qcltig__4JuoGWvdcSV4 { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ─────────── la tabella ─────────── */
.BYkLVvcXbMkTLgvfZCIG { display: block; }
.sWVzffZglmg3ncrweh1g { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 14px; letter-spacing: -0.03em; }
.sWVzffZglmg3ncrweh1g th, .sWVzffZglmg3ncrweh1g td { padding: 14px; text-align: center; overflow-wrap: break-word; }

/* L'intestazione resta agganciata sotto la navbar mentre si scorrono le righe.
   La navbar però sparisce quando si scorre in giù: se la testata restasse a
   80 px dall'alto, in quella striscia vuota si vedrebbero scorrere le righe
   sopra la testata. `--hu-nav-offset` lo scrive il componente sulla propria
   radice leggendo lo stato della navbar: 0 quando è nascosta, altrimenti
   niente e vale l'altezza della barra. */
.sWVzffZglmg3ncrweh1g thead th {
  position: sticky; top: calc(var(--hu-nav-offset, var(--hu-nav-height, 80px)) - 1px); z-index: 3;
  background: var(--hu-color-white); vertical-align: bottom; padding: 20px 14px 18px;
  box-shadow: inset 0 -1px 0 var(--hu-color-border-default);
}
.sWVzffZglmg3ncrweh1g thead th:first-child { text-align: left; padding-left: 0; }
.GkzsZtjKrQXVkgiZtbNf { font-size: 11px; line-height: 140%; letter-spacing: 0.135em; text-transform: uppercase; font-weight: 500; color: var(--hu-color-text-muted); }
.dT49NQNYWB0Q5kR1Ef9N { display: block; font-size: 20px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em; color: var(--hu-color-foreground); }
.UBiFySTposqEsDK6vJPD { display: block; font-size: 14px; line-height: 130%; letter-spacing: -0.03em; color: var(--hu-color-text-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.DNjavFw6drebF1NipLJg {
  display: inline-block; font-size: 10px; line-height: 140%; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 500;
  color: var(--hu-color-primary); background: var(--hu-color-accent-faint);
  border-radius: var(--hu-radius-6); padding: 2px 6px; margin-left: 7px; vertical-align: 2px;
}

/* i gruppi sono titoli, non fasce colorate */
.iLIOI1H_hdlem5wAkw7Q th {
  text-align: left; font-size: clamp(20px, 1.9vw, 24px); line-height: 28px; font-weight: 500; letter-spacing: -0.03em;
  color: var(--hu-color-foreground); background: none;
  padding: clamp(38px, 4vw, 54px) 0 14px; border-bottom: 1px solid var(--hu-color-border-default);
}
.sWVzffZglmg3ncrweh1g tbody tr:not(.iLIOI1H_hdlem5wAkw7Q) th { text-align: left; font-weight: 400; color: var(--hu-color-foreground); width: 28%; padding-left: 0; }
.sWVzffZglmg3ncrweh1g tbody tr:not(.iLIOI1H_hdlem5wAkw7Q) th,
.sWVzffZglmg3ncrweh1g tbody tr:not(.iLIOI1H_hdlem5wAkw7Q) td { border-bottom: 1px solid var(--hu-color-border-input); }
.sWVzffZglmg3ncrweh1g td { color: var(--hu-color-text-muted); font-variant-numeric: tabular-nums; }
/* la colonna consigliata è tinta per tutta l'altezza */
.sWVzffZglmg3ncrweh1g thead th:nth-child(3),
.sWVzffZglmg3ncrweh1g tbody tr:not(.iLIOI1H_hdlem5wAkw7Q) td:nth-child(3) { background: var(--hu-color-secondary); }
.sWVzffZglmg3ncrweh1g tbody tr:not(.iLIOI1H_hdlem5wAkw7Q):hover th,
.sWVzffZglmg3ncrweh1g tbody tr:not(.iLIOI1H_hdlem5wAkw7Q):hover td { background: var(--hu-color-accent-faint); }

.peSFrzAT9YWzPLeaWrzT { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--hu-product-fit-mid); color: var(--hu-color-white); font-size: 11px; line-height: 1; }
.JyEqdFI4Knz5SsW9VIPz .peSFrzAT9YWzPLeaWrzT { background: none; color: var(--hu-color-text-muted); font-size: 16px; width: auto; height: auto; }

/* ─────────── l'elenco, sotto i 900 px ─────────── */
.r5oYyKFswgK48b9HSCbQ { display: none; }
.yxfEbbZ7bDjTTxKvsKRG { font-size: clamp(20px, 5.4vw, 24px); line-height: 28px; font-weight: 500; letter-spacing: -0.03em; margin: clamp(38px, 8vw, 52px) 0 2px; }
.yxfEbbZ7bDjTTxKvsKRG:first-child { margin-top: 0; }
.duCsXz2OgxvgOlalqZWZ { border-top: 1px solid var(--hu-color-border-input); }
.duCsXz2OgxvgOlalqZWZ:last-child { border-bottom: 1px solid var(--hu-color-border-input); }
.kQvFvdK2z7SoBDLnQpQl {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 0; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.03em; color: var(--hu-color-foreground);
}
.fKTA3BIS8rfsYEnUTgtC { width: 13px; height: 13px; flex: 0 0 auto; color: var(--hu-color-text-muted); transition: transform var(--hu-duration-state) var(--hu-ease-out-expo); }
/* in basso da chiusa, ruota verso l'alto da aperta: come le domande e le voci */
.kQvFvdK2z7SoBDLnQpQl[aria-expanded="true"] .fKTA3BIS8rfsYEnUTgtC { transform: rotate(180deg); }
.sReUnsuwWd4TRjOYzKvN { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--hu-duration-state) var(--hu-ease-out-expo); }
.kQvFvdK2z7SoBDLnQpQl[aria-expanded="false"] + .sReUnsuwWd4TRjOYzKvN { grid-template-rows: 0fr; }
.sReUnsuwWd4TRjOYzKvN > div { overflow: hidden; min-height: 0; }
._wzSj9h_atwnX2QXXVUC { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--hu-color-border-input); }
._wzSj9h_atwnX2QXXVUC:last-child { padding-bottom: 18px; }
._wzSj9h_atwnX2QXXVUC dt { font-size: 14px; line-height: 130%; letter-spacing: -0.03em; color: var(--hu-color-text-muted); }
._wzSj9h_atwnX2QXXVUC dd { font-size: 14px; line-height: 130%; letter-spacing: -0.03em; color: var(--hu-color-foreground); text-align: right; font-variant-numeric: tabular-nums; }
.GBH0bFYtKG6C2pqP5_89 dt { color: var(--hu-color-primary); }
.bQyi_juiMxj_69KhPnbO { color: var(--hu-product-fit-mid-fg); }
.D_3jNbTW9rxVcL7PGkBQ { color: var(--hu-color-text-muted); }

@media (max-width: 899px) {
  .BYkLVvcXbMkTLgvfZCIG { display: none; }
  .r5oYyKFswgK48b9HSCbQ { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .sReUnsuwWd4TRjOYzKvN, .fKTA3BIS8rfsYEnUTgtC { transition: none; }
}