:root { --bg:#0a0f1c; --surface:rgba(255,255,255,.04); --border:rgba(255,255,255,.1); --text:#f2f3f8; --muted:#9a9cb5; --primary:#2f6bff; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; }
.container { max-width:760px; margin:0 auto; padding:36px 20px 64px; }
a { color:var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
.logo { font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:30px; display:inline-block; color:var(--text); }
.logo span { background:linear-gradient(135deg,#2f6bff,#21c1e6); -webkit-background-clip:text; background-clip:text; color:transparent; }
h1 { font-size:clamp(24px,4.5vw,32px); font-weight:800; letter-spacing:-.025em; margin-bottom:6px; }
h2 { font-size:18px; font-weight:700; margin:28px 0 8px; }
p, li { font-size:15px; margin-bottom:10px; }
ul { padding-left:22px; margin-bottom:10px; }
.updated { color:var(--muted); font-size:13px; margin-bottom:24px; }
.notice { background:rgba(255,200,87,.1); border:1px solid rgba(255,200,87,.35); color:#ffd98a; border-radius:12px; padding:14px 16px; font-size:14px; margin-bottom:24px; }
table { width:100%; border-collapse:collapse; font-size:14px; margin-bottom:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:600; background:rgba(255,255,255,.05); }
tr:last-child td { border-bottom:none; }
code { background:rgba(255,255,255,.08); padding:1px 7px; border-radius:6px; font-size:13px; }
footer { margin-top:44px; padding-top:18px; border-top:1px solid var(--border); color:var(--muted); font-size:13.5px; }
footer a { color:var(--muted); min-height:24px; display:inline-flex; align-items:center; }

/* ===== Mobile ===== */
/* Le tabelle qui hanno 3-4 colonne di testo: la loro larghezza minima è di
   403px e 515px, contro i ~367px di un telefono. Prima sfondavano, ed era
   l'unica pagina del sito che scorreva in orizzontale.
   Non si può far andare a capo il testo (colonne da 90px, illeggibili), quindi
   la tabella diventa un blocco che scorre per conto suo: la pagina resta ferma.
   Verificato: contenuto 515px dentro una scatola da 325px, colonne allineate. */
@media (max-width:600px) {
  table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ===== Bersagli tattili nel piè di pagina =====
   "← Torna a QuantoRisparmio" e "Cookie Policy" sono figli diretti di <footer>
   e misuravano 18px: sono link di navigazione autonomi, non collegamenti dentro
   una frase, quindi l'eccezione "Inline" di WCAG 2.5.8 non li copre e restavano
   sotto il minimo di 24x24 richiesto in AA.
   Il link al Garante, che invece sta dentro un paragrafo, resta com'è: lì
   l'esenzione vale e ingrandirlo spezzerebbe la riga di testo.
   Solo su puntatore grossolano: col mouse la precisione non serve. */
@media (pointer:coarse), (max-width:768px) {
  footer > a { min-height:44px; display:inline-flex; align-items:center; }
}

/* ===== Scrollbar coerenti col resto del sito =====
   Stessi valori dell'app: senza questo blocco le pagine di contenuto
   mostrerebbero la barra di sistema (23px) contro i 10px dell'app.
   ATTENZIONE: scrollbar-width e ::-webkit-scrollbar non vanno mescolate —
   se la proprietà standard è impostata, Chrome ignora le regole webkit. */
@media (pointer:fine) {
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
  }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb {
    background:rgba(255,255,255,.16); border-radius:999px;
    border:2px solid transparent; background-clip:padding-box;
    min-height:44px; min-width:44px;
  }
  ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.30); background-clip:padding-box; }
  ::-webkit-scrollbar-corner { background:transparent; }
}

/* Premium legal layer */
body { min-height:100vh; background:radial-gradient(820px 380px at 16% -10%,rgba(47,107,255,.18),transparent 62%),radial-gradient(720px 340px at 90% 4%,rgba(33,193,230,.08),transparent 65%),var(--bg); }
.container { margin-top:28px; margin-bottom:28px; padding:34px clamp(18px,5vw,48px) 50px; border:1px solid var(--border); border-radius:24px; background:rgba(13,20,35,.78); box-shadow:0 28px 80px rgba(0,0,0,.18); backdrop-filter:blur(12px); }
.logo { display:inline-flex; min-height:44px; align-items:center; margin-bottom:28px; }
h1 { font-size:clamp(30px,5vw,42px); line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
h2 { margin-top:34px; letter-spacing:-.015em; }
.notice { border-radius:15px; box-shadow:0 12px 36px rgba(0,0,0,.12); }
table { border-radius:15px; }
a:focus-visible { outline:3px solid rgba(79,139,255,.65); outline-offset:3px; border-radius:5px; }
@media (max-width:600px) { .container { margin:0; border:0; border-radius:0; padding-top:24px; } h1{font-size:31px;} }