/* Pagine pubbliche di FlipTok: statiche, senza dipendenze esterne, cosi'
   funzionano su qualsiasi hosting (GitHub Pages, Netlify, Cloudflare Pages). */
:root {
    --sfondo: #0d061b;
    --carta: #17102a;
    --testo: #f2f0f7;
    --tenue: #a9a3bd;
    --accento: #b07cff;
    --bordo: #2a2141;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    padding: 0 20px 80px;
    background: var(--sfondo);
    color: var(--testo);
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main { max-width: 720px; margin: 0 auto; }
header {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 0 24px;
    border-bottom: 1px solid var(--bordo);
}
.logo { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.logo span { color: var(--accento); }
nav { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 18px; }
nav a { color: var(--tenue); text-decoration: none; font-size: 15px; }
nav a:hover, nav a[aria-current] { color: var(--accento); }
h1 { font-size: 30px; line-height: 1.2; margin: 40px 0 6px; letter-spacing: -0.02em; }
h2 { font-size: 19px; margin: 34px 0 8px; }
p, li { color: var(--tenue); }
li { margin-bottom: 6px; }
strong { color: var(--testo); }
a { color: var(--accento); }
.aggiornato { font-size: 14px; color: var(--tenue); margin-top: 0; }
.riquadro {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    padding: 20px 22px;
    margin: 26px 0;
}
.riquadro h2 { margin-top: 0; }
.passi { padding-left: 22px; }
.passi li { margin-bottom: 10px; }
footer {
    max-width: 720px;
    margin: 60px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--bordo);
    font-size: 14px;
    color: var(--tenue);
}
@media (max-width: 480px) {
    h1 { font-size: 25px; }
    body { padding: 0 16px 60px; }
}

/* Selettore di lingua: le altre sette versioni della stessa pagina. */
nav.lingue {
    margin-top: 10px;
    font-size: 14px;
}
nav.lingue a {
    color: var(--tenue);
    margin-right: 14px;
}
nav.lingue a[aria-current] {
    color: var(--accento);
    font-weight: 600;
}
[dir="rtl"] nav.lingue a { margin-right: 0; margin-left: 14px; }
[dir="rtl"] body { text-align: right; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 22px; padding-left: 0; }