/* ═══════════════════════════════════════════════════════════════════════════
   Pagine legali — privacy.html e termini.html.

   Sono HTML statico in public/, fuori da React: si leggono senza JavaScript e
   sono gli indirizzi che Stripe mostra nel checkout e nel portale clienti.
   La CSP non ammette stili in linea, per questo il foglio è un file a parte.
   Colori e caratteri sono quelli di tokens.css, ridotti a ciò che serve.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light dark;
  --sfondo: #ffffff;
  --scheda: #f6f8fa;
  --bordo: #d8dee4;
  --txt: #1f2328;
  --txt2: #59636e;
  --accento: #0a66c2;
  --avviso: #9a6700;
  --avviso-tenue: rgba(154, 103, 0, 0.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #0d1117;
    --scheda: #151b23;
    --bordo: #3d444d;
    --txt: #f0f6fc;
    --txt2: #9198a1;
    --accento: #4493f8;
    --avviso: #d29922;
    --avviso-tenue: rgba(210, 153, 34, 0.12);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--txt);
  font: 16px/1.65 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--accento); }

.testata, main, .piede {
  width: min(760px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}
.testata {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 24px; padding-bottom: 24px;
  border-bottom: 1px solid var(--bordo);
}
.marchio { display: flex; align-items: center; gap: 8px; color: var(--txt); text-decoration: none; font-size: 18px; font-weight: 600; }
.marchio rect { fill: var(--accento); }
.testata nav { display: flex; gap: 16px; font-size: 14px; }
.testata nav a[aria-current="page"] { color: var(--txt); text-decoration: none; font-weight: 600; }

main { padding-top: 32px; padding-bottom: 48px; }
h1 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 20px; line-height: 1.3; margin: 40px 0 8px; }
h3 { font-size: 16px; margin: 24px 0 4px; }
p, ul { margin: 0 0 12px; }
li { margin-bottom: 6px; }
.data { color: var(--txt2); font-size: 14px; margin-bottom: 24px; }
.nota {
  background: var(--avviso-tenue); border-left: 3px solid var(--avviso);
  padding: 12px 16px; border-radius: 6px; font-size: 14px;
}

.tabella { overflow-x: auto; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--bordo); }
th { color: var(--txt2); font-weight: 500; }
code { font-size: 13px; background: var(--scheda); padding: 1px 5px; border-radius: 4px; }

.piede {
  padding-top: 24px; padding-bottom: 32px;
  border-top: 1px solid var(--bordo);
  color: var(--txt2); font-size: 14px;
}