/* ============================================================
   BALOZA — Pagine legali (privacy, termini)
   Statiche apposta: devono aprirsi senza JavaScript, senza
   sessione e senza l'app, perche' le leggono anche i motori di
   ricerca e la verifica del consent screen di Google.

   E senza chiedere niente a nessun altro. Fino alla 3.31.1 queste
   quattro pagine caricavano i font da fonts.googleapis.com: erano
   l'unico punto di tutto il progetto che usciva verso l'esterno, e
   mandavano l'indirizzo IP del lettore a Google proprio mentre
   leggeva l'informativa che elenca i destinatari dei suoi dati.
   Adesso usano i caratteri di sistema. Un'informativa che
   si apre senza contattare nessuno e' anche la sua stessa prova.
   ============================================================ */

/* Le due pile di caratteri. Le famiglie con il nome proprio restano
   davanti: dalla 3.38.1 i file sono ospitati in public/font/, e per
   usarli anche qui basta aggiungere le @font-face di src/index.css,
   senza toccare il resto del foglio. */
:root{
  --testo:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --titoli:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box}
body{
  margin:0;padding:0;
  background:#080714;color:rgba(255,255,255,.74);
  font-family:var(--testo);
  font-size:15px;line-height:1.7;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 72px}

/* ---------- testata ---------- */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 0 20px;margin-bottom:34px;
  border-bottom:1px solid rgba(181,151,255,.2);
}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.brand img{width:38px;height:38px;border-radius:11px}
.brand b{font-family:var(--titoli);font-size:20px;font-weight:800;letter-spacing:-.02em}
.lang{
  padding:7px 13px;border:1px solid rgba(181,151,255,.28);border-radius:999px;
  color:rgba(255,255,255,.6);font-size:11px;font-weight:800;letter-spacing:.06em;
  text-decoration:none;text-transform:uppercase;white-space:nowrap;
}
.lang:hover{border-color:#c7ff4a;color:#c7ff4a}

/* ---------- testo ---------- */
h1{
  margin:0 0 8px;color:#fff;
  font-family:var(--titoli);font-size:clamp(30px,6vw,42px);
  font-weight:800;letter-spacing:-.04em;line-height:1.05;
}
.data{margin:0 0 40px;color:rgba(255,255,255,.38);font-size:12px}
h2{
  margin:44px 0 14px;color:#fff;
  font-family:var(--titoli);font-size:21px;font-weight:800;
  letter-spacing:-.025em;line-height:1.25;
}
h3{margin:28px 0 10px;color:rgba(255,255,255,.9);font-size:15px;font-weight:700}
p{margin:0 0 15px}
ul{margin:0 0 15px;padding-left:20px}
li{margin-bottom:9px}
li::marker{color:#c7ff4a}
strong,b{color:rgba(255,255,255,.94);font-weight:700}
a{color:#c7ff4a}
a:hover{color:#fff}
code{
  padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.06);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
}

/* Riquadro per i punti che vanno letti davvero, non scorsi. */
.nota{
  margin:0 0 15px;padding:15px 17px;
  border:1px solid rgba(199,255,74,.26);border-left-width:3px;border-radius:13px;
  background:rgba(199,255,74,.06);
}
.nota p:last-child{margin-bottom:0}

/* ---------- tabella ---------- */
.tab{margin:0 0 15px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
th,td{padding:11px 13px;border-bottom:1px solid rgba(181,151,255,.16);text-align:left;vertical-align:top}
th{
  color:rgba(255,255,255,.5);font-size:10px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
td:first-child{color:rgba(255,255,255,.92);font-weight:600}

/* ---------- chiusura ---------- */
.fondo{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  margin-top:56px;padding-top:22px;
  border-top:1px solid rgba(181,151,255,.2);
  color:rgba(255,255,255,.3);font-size:12px;
}
.fondo a{color:rgba(255,255,255,.55);text-decoration:none}
.fondo a:hover{color:#c7ff4a}

@media(max-width:520px){
  body{font-size:14.5px}
  .wrap{padding-bottom:52px}
  h2{margin-top:36px;font-size:19px}
}