@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&display=swap");

/* Zeni — stile condiviso delle pagine legali (Privacy + Termini).
 *
 * I COLORI arrivano da `tokens.css` (unica fonte, gli stessi dell'app e della
 * home): questa foglia chiede il RUOLO (`var(--accento)`), mai un hex.
 * Font: DM Sans, come tutto il sito.
 *
 * Le due pagine (`privacy-policy/` e `terms/`) linkano tokens.css + questa:
 * un solo posto per lo stile, nessuna copia locale (C2).
 *
 * Nota su `--ombra`: in tokens.css è un COLORE (rgba), non un box-shadow intero
 * → si usa `box-shadow: … var(--ombra)`, mai `box-shadow: var(--ombra)`.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-optical-sizing: auto;
  background: var(--pagina);
  color: var(--testo);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Barra superiore ── */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(16px, 5vw, 40px);
  background: color-mix(in srgb, var(--pagina) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divisore);
}
.brand {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
  color: var(--testo); text-decoration: none;
}
.brand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--logo); flex: none; }
.topnav { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topnav a {
  font-size: .9rem; font-weight: 500; color: var(--muto); text-decoration: none;
  padding: 6px 12px; border-radius: 999px;
}
.topnav a:hover { color: var(--testo); background: var(--accento-tinta); }

/* Il toggle lingua IT/EN (stile + regola "una lingua alla volta") è condiviso:
   vive in stylesheets/lang.css, linkato da questa pagina e dalla home. */

/* ── Impaginato ── */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 clamp(16px, 5vw, 40px) 100px; }

.back { display: inline-block; margin: 32px 0 0; font-size: .9rem; }
.back a {
  color: var(--accento); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accento) 40%, transparent);
}
.back a:hover { border-bottom-color: var(--accento); }

/* ── Testata del documento ── */
.doc-head { border-top: 2px solid var(--testo); padding-top: 20px; margin: 40px 0 4px; }
.doc-kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muto);
}
.doc-title {
  font-weight: 700; font-size: clamp(1.8rem, 5vw, 2.4rem);
  letter-spacing: -.02em; margin: 8px 0 6px; text-wrap: balance;
}
.doc-date { color: var(--muto); font-size: .95rem; }

/* ── Corpo del documento ── */
.doc { margin-top: 4px; }
.doc h3 {
  font-weight: 700; font-size: 1.22rem; letter-spacing: -.01em;
  margin: 38px 0 10px; text-wrap: balance;
}
.doc h3 .num { color: var(--accento); font-variant-numeric: tabular-nums; margin-right: .5ch; }
.doc p { margin: 0 0 14px; }
.doc p.intro { font-size: 1.06rem; color: var(--muto); }
.doc ul.body { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.doc ul.body li { padding-left: 24px; position: relative; }
.doc ul.body li::before {
  content: ""; position: absolute; left: 4px; top: .72em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accento);
}
.doc b, .doc strong { font-weight: 600; color: var(--testo); }
.doc i { color: var(--muto); }
.doc a {
  color: var(--accento); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accento) 40%, transparent);
}
.doc a:hover { border-bottom-color: var(--accento); }

/* ── "In breve" evidenziato ── */
.inbreve { background: var(--accento-tinta); border-radius: 14px; padding: 20px 22px; margin: 18px 0 8px; }
.inbreve .lab {
  /* Etichetta piccola: `--testo` per stare ad AA su `--accento-tinta` in ENTRAMBI
     i temi (accento su tinta scende a 4.38 in dark, sotto 4.5). L'identità del
     riquadro la danno lo sfondo tinto + i pallini col bordo accento. */
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--testo); margin-bottom: 10px;
}
.inbreve ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.inbreve li { padding-left: 24px; position: relative; }
.inbreve li::before {
  content: ""; position: absolute; left: 2px; top: .6em; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid var(--accento);
}

/* ── Nota informativa (es. "Beta gratuita") ── */
.callout {
  border-left: 3px solid var(--accento); background: var(--accento-tinta);
  padding: 14px 18px; border-radius: 0 12px 12px 0; margin: 16px 0; font-size: .97rem;
}

footer {
  max-width: 720px; margin: 60px auto 0; padding: 26px clamp(16px, 5vw, 40px);
  border-top: 1px solid var(--divisore); color: var(--muto); font-size: .85rem;
}