/* Tipty — stile condiviso del sito.
   Nessun font esterno, nessuna libreria: il sito non chiama nessun altro
   dominio, esattamente come l'app non chiama nessun server. Le due cose sono
   la stessa promessa, e una pagina che carica quattro CDN la smentirebbe. */

:root{
  --bg:#faf7f2; --surface:#ffffff; --ink:#201c17; --muted:#6f665a;
  --border:#e7e0d5; --accent:#e07b00; --good:#1f9d5b;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#16130e; --surface:#201c16; --ink:#f0ebe2; --muted:#a99f90;
         --border:#322c22; --accent:#f59422; --good:#3fca8b; }
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:760px;margin:0 auto;padding:34px 22px 80px}

/* ── Testata ─────────────────────────────────────────────────────────────── */
header{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border)}
.brand{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:0}
.brand a{color:inherit;text-decoration:none;display:inline-block}
/* Il logo porta gia' la scritta: sostituisce il marchio testuale, che resta
   solo come testo alternativo se l'immagine non arriva. */
.brand img{height:34px;width:auto;display:block}
.testa-destra{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav{display:flex;gap:16px;font-size:14px}
nav a{color:var(--muted);text-decoration:none;font-weight:600}
nav a:hover{color:var(--accent)}
nav a[aria-current="page"]{color:var(--ink)}
.lang{display:flex;gap:6px}
.lang button{font:inherit;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}

/* ── Testo ───────────────────────────────────────────────────────────────── */
h1{font-size:clamp(26px,5vw,34px);margin:28px 0 6px;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:19px;margin:34px 0 8px;text-wrap:balance}
.updated{color:var(--muted);font-size:14px;margin:0 0 28px}
p,li{color:var(--ink)}
.lede{font-size:17px}
a{color:var(--accent)}
code{background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:1px 5px;font-size:13px}

.box{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:12px;padding:18px 20px;margin:22px 0}
.box p{margin:0 0 10px} .box p:last-child{margin:0}

table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{font-weight:700;width:34%}

/* ── Vetrina (home) ──────────────────────────────────────────────────────── */
.hero{padding:52px 0 8px}
.hero h1{font-size:clamp(32px,6.4vw,48px);line-height:1.12;margin:0 0 18px}
.hero .lede{font-size:clamp(17px,2.4vw,20px);color:var(--muted);max-width:34em;margin:0}
.occhiello{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}

.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin:22px 0}
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px}
.card h3{margin:0 0 8px;font-size:16.5px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:15px}

.punti{list-style:none;padding:0;margin:16px 0}
.punti li{position:relative;padding:0 0 0 26px;margin:0 0 11px}
.punti li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}

.sezione{margin-top:56px}
.sezione > h2{font-size:23px;letter-spacing:-.015em;margin-bottom:12px}
.quota{display:inline-block;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:1px 11px;font-size:14px;font-weight:600;color:var(--accent);
  /* riga contenuta: se il badge alza la riga, il pallino dell'elenco si stacca */
  line-height:1.45;vertical-align:baseline}

footer{margin-top:56px;padding-top:18px;border-top:1px solid var(--border);
  color:var(--muted);font-size:14px}
footer p{margin:0 0 8px;color:var(--muted)}
[hidden]{display:none!important}

@media (prefers-reduced-motion:no-preference){
  a,nav a{transition:color .15s ease}
}

/* Lingua scelta prima che la pagina venga disegnata (vedi lo script nel <head>
   delle pagine): senza questo, chi apre un indirizzo ?lang=en vedrebbe un lampo
   di italiano prima che il JS commuti. Serve !important perche' il blocco
   inglese porta l'attributo hidden nel documento — che e' la scelta giusta per
   chi ha il JavaScript spento: senza script resta l'italiano, non il vuoto. */
html[data-lang="en"] #it{display:none!important}
html[data-lang="en"] #en{display:block!important}