/* Famodo — token semantici dell'interfaccia, tema chiaro e scuro (v1.0).
   Stessi nomi del Design System Famodo su Claude: surface, ink, primary, mod-<modulo>, person-<n>...
   Uso: <html data-theme="dark"> forza lo scuro; senza attributo segue le impostazioni del telefono. */
:root, [data-theme="light"] {
  --surface: #F7F4EF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #EEE9E1;
  --line: #E0D9CE;
  --ink: #1F2A26;
  --ink-strong: #0F372D;
  --ink-muted: #45514C;
  --ink-subtle: #66726D;
  --primary: #146F57;
  --on-primary: #FFFFFF;
  --primary-soft: #DFF2EA;
  --brand-deep: #0F372D;
  --sage: #A7D7C5;
  --peach: #FD8472;
  --sun: #FFC55B;
  --success: #17795A;
  --success-soft: #E3F4EC;
  --warning: #8A5800;
  --warning-soft: #FFF2D3;
  --danger: #C2352B;
  --danger-soft: #FDEBE8;
  --info: #2F64C0;
  --info-soft: #E8F0FC;
  --focus: #146F57;
  --person-1: #FD8472;
  --person-2: #146F57;
  --person-3: #F19100;
  --person-4: #3976CE;
  --person-5: #AB509A;
  --person-6: #0A818B;
  --mod-calendario: #137E63;
  --mod-calendario-tint: #DFF7ED;
  --mod-calendario-deep: #0B5441;
  --mod-famiglia: #ED7761;
  --mod-famiglia-tint: #FEEBE7;
  --mod-famiglia-deep: #792A1D;
  --mod-scuola: #3976CE;
  --mod-scuola-tint: #E8F1FF;
  --mod-scuola-deep: #1C4683;
  --mod-finanze: #1D97A3;
  --mod-finanze-tint: #DCF6F9;
  --mod-finanze-deep: #045259;
  --mod-spesa: #57A943;
  --mod-spesa-tint: #E4F6E0;
  --mod-spesa-deep: #1C560B;
  --mod-casa: #A55C33;
  --mod-casa-tint: #FEECE3;
  --mod-casa-deep: #6B381C;
  --mod-salute: #D93F5A;
  --mod-salute-tint: #FEEBEB;
  --mod-salute-deep: #83162E;
  --mod-sport: #F19100;
  --mod-sport-tint: #FEEDDC;
  --mod-sport-deep: #683C00;
  --mod-vacanze: #50B1DC;
  --mod-vacanze-tint: #DFF4FF;
  --mod-vacanze-deep: #034F6A;
  --mod-documenti: #AB509A;
  --mod-documenti-tint: #FEE9F9;
  --mod-documenti-deep: #6B2C5F;
  --mod-paghetta: #DAB327;
  --mod-paghetta-tint: #F8F0D6;
  --mod-paghetta-deep: #574602;
  --mod-bonus: #6D52BC;
  --mod-bonus-tint: #F0EEFF;
  --mod-bonus-deep: #4B3882;
  --shadow-sm: 0 1px 2px rgba(15,55,45,0.06), 0 1px 1px rgba(15,55,45,0.04);
  --shadow-md: 0 2px 6px rgba(15,55,45,0.06), 0 8px 24px rgba(15,55,45,0.08);
  --shadow-lg: 0 4px 12px rgba(15,55,45,0.08), 0 24px 48px rgba(15,55,45,0.12);
}

[data-theme="dark"] {
  --surface: #0C231D;
  --surface-raised: #133229;
  --surface-sunken: #091C17;
  --line: #2A4A40;
  --ink: #F1EFEA;
  --ink-strong: #FFFFFF;
  --ink-muted: #BCC8C2;
  --ink-subtle: #93A69D;
  --primary: #6FC1A5;
  --on-primary: #0F372D;
  --primary-soft: #1C4A3D;
  --success: #7DD3B0;
  --success-soft: #183F33;
  --warning: #FFC55B;
  --warning-soft: #3D3010;
  --danger: #FF9C8E;
  --danger-soft: #4A211C;
  --info: #9DBDF6;
  --info-soft: #1C2E4D;
  --focus: #A7D7C5;
  --mod-calendario: #55B395;
  --mod-calendario-tint: #12352A;
  --mod-calendario-deep: #AEDDCB;
  --mod-famiglia-tint: #47211A;
  --mod-famiglia-deep: #FEC0B3;
  --mod-scuola: #609EFA;
  --mod-scuola-tint: #1A2E4C;
  --mod-scuola-deep: #B6D3FE;
  --mod-finanze: #41B0BC;
  --mod-finanze-tint: #0A3438;
  --mod-finanze-deep: #A7DCE2;
  --mod-spesa: #63B650;
  --mod-spesa-tint: #1C3517;
  --mod-spesa-deep: #B3E0A9;
  --mod-casa: #D68960;
  --mod-casa-tint: #422617;
  --mod-casa-deep: #F3C6AF;
  --mod-salute: #FD6178;
  --mod-salute-tint: #472024;
  --mod-salute-deep: #FEBEC1;
  --mod-sport-tint: #422707;
  --mod-sport-deep: #FCC58F;
  --mod-vacanze-tint: #0E3242;
  --mod-vacanze-deep: #A9D9F1;
  --mod-documenti: #D677C3;
  --mod-documenti-tint: #40213A;
  --mod-documenti-deep: #F4BDE7;
  --mod-paghetta-tint: #392C01;
  --mod-paghetta-deep: #E4D092;
  --mod-bonus: #A289F8;
  --mod-bonus-tint: #2F2849;
  --mod-bonus-deep: #D1C9FE;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0C231D;
    --surface-raised: #133229;
    --surface-sunken: #091C17;
    --line: #2A4A40;
    --ink: #F1EFEA;
    --ink-strong: #FFFFFF;
    --ink-muted: #BCC8C2;
    --ink-subtle: #93A69D;
    --primary: #6FC1A5;
    --on-primary: #0F372D;
    --primary-soft: #1C4A3D;
    --success: #7DD3B0;
    --success-soft: #183F33;
    --warning: #FFC55B;
    --warning-soft: #3D3010;
    --danger: #FF9C8E;
    --danger-soft: #4A211C;
    --info: #9DBDF6;
    --info-soft: #1C2E4D;
    --focus: #A7D7C5;
    --mod-calendario: #55B395;
    --mod-calendario-tint: #12352A;
    --mod-calendario-deep: #AEDDCB;
    --mod-famiglia-tint: #47211A;
    --mod-famiglia-deep: #FEC0B3;
    --mod-scuola: #609EFA;
    --mod-scuola-tint: #1A2E4C;
    --mod-scuola-deep: #B6D3FE;
    --mod-finanze: #41B0BC;
    --mod-finanze-tint: #0A3438;
    --mod-finanze-deep: #A7DCE2;
    --mod-spesa: #63B650;
    --mod-spesa-tint: #1C3517;
    --mod-spesa-deep: #B3E0A9;
    --mod-casa: #D68960;
    --mod-casa-tint: #422617;
    --mod-casa-deep: #F3C6AF;
    --mod-salute: #FD6178;
    --mod-salute-tint: #472024;
    --mod-salute-deep: #FEBEC1;
    --mod-sport-tint: #422707;
    --mod-sport-deep: #FCC58F;
    --mod-vacanze-tint: #0E3242;
    --mod-vacanze-deep: #A9D9F1;
    --mod-documenti: #D677C3;
    --mod-documenti-tint: #40213A;
    --mod-documenti-deep: #F4BDE7;
    --mod-paghetta-tint: #392C01;
    --mod-paghetta-deep: #E4D092;
    --mod-bonus: #A289F8;
    --mod-bonus-tint: #2F2849;
    --mod-bonus-deep: #D1C9FE;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.45);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-tile: 27%;
  --radius-pill: 999px;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Famodo, sito pubblico (in prova su anteprima.famodo.it, poi su famodo.it).
   Colori, spazi e raggi arrivano dal brand kit (13_UI_e_Token/famodo_ui_temi.css): la costruzione li mette in
   testa a questo file e in coda aggiunge le tessere dei dodici moduli. Nessuno stile in linea: la CSP del sito
   ammette solo file dello stesso dominio. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/poppins-700.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --primary-press: #0F5644;
  --tetto: #146F57;
  --casa: #0F372D;
  --banda: #0F372D;
  --banda-ink: #F1EFEA;
  --banda-muted: #BCC8C2;
  --banda-accento: #A7D7C5;
  --ombra-nota: 0 14px 28px -12px rgb(15 55 45 / 0.34), 0 2px 6px -2px rgb(15 55 45 / 0.14);
  --ombra-menu: 0 24px 40px -24px rgb(15 55 45 / 0.4);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-posa: cubic-bezier(0.3, 1.3, 0.5, 1);
  --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --largo: 1240px;
  --testata: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-press: #8ED0B8;
    --tetto: #A7D7C5;
    --casa: #FFFFFF;
    --banda: #133229;
    --ombra-nota: 0 16px 30px -12px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
    --ombra-menu: 0 24px 40px -24px rgb(0 0 0 / 0.7);
  }
}
:root[data-theme="dark"] {
  --primary-press: #8ED0B8;
  --tetto: #A7D7C5;
  --casa: #FFFFFF;
  --banda: #133229;
  --ombra-nota: 0 16px 30px -12px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
  --ombra-menu: 0 24px 40px -24px rgb(0 0 0 / 0.7);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--testata) + 8px);
  scrollbar-color: var(--line) transparent;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--primary);
}
::selection { background: var(--primary-soft); color: var(--ink-strong); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; color: var(--ink-strong); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }
[hidden]:not(.schermata) { display: none !important; }
.visivo-no {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.contenitore { width: min(var(--largo), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.salta {
  position: absolute; z-index: 100; left: var(--gutter); top: -120px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--ink-strong); color: var(--surface); font-weight: 600; text-decoration: none;
}
.salta:focus { top: 10px; }
/* Telefono: il tocco risponde subito, i comandi non selezionano il testo, i campi non fanno zoomare la pagina. */
a, button, summary, label, [role="tab"] { touch-action: manipulation; }
button, summary, .bottone, .scheda { -webkit-user-select: none; user-select: none; }
input, select, textarea { font: inherit; font-size: max(16px, 1rem); }

/* ── Marchio ───────────────────────────────────────────────────────────── */
.logotipo { display: block; width: 116px; height: auto; }
.logotipo path { fill: var(--ink-strong); }
/* Logo orizzontale ufficiale (simbolo e nome), dal brand kit: i pezzi hanno i colori del file a colori e, col tema
   scuro, quelli del file in negativo. Non si ridisegna: cambiano solo i due colori che cambia il brand kit. */
.logo { display: block; width: clamp(104px, 33vw, 128px); height: auto; overflow: visible; }
.logo path { transform-box: fill-box; transform-origin: 50% 100%; }
.logo__tetto { fill: var(--tetto); }
.logo__casa { fill: var(--casa); }
@media (min-width: 600px) { .logo { width: 156px; } }
.simbolo { display: block; width: 100%; height: auto; overflow: visible; }
.simbolo path { transform-box: fill-box; transform-origin: 50% 100%; }
.simbolo__tetto { fill: var(--tetto); }
.simbolo__casa { fill: var(--casa); }
@keyframes c-sale { from { opacity: 0; transform: translateY(26%); } }
@keyframes c-da-sinistra { from { opacity: 0; transform: translate(-24%, 12%) rotate(-18deg); } }
@keyframes c-da-destra { from { opacity: 0; transform: translate(24%, 12%) rotate(18deg); } }
@keyframes c-posa { from { opacity: 0; transform: translateY(-60%) rotate(-6deg); } }

/* ── Tasti ─────────────────────────────────────────────────────────────── */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.bottone svg { flex: none; width: 20px; height: 20px; }
.bottone:active { transform: scale(0.97); }
.bottone--secondario { background: transparent; color: var(--ink-strong); box-shadow: inset 0 0 0 1.5px var(--line); }
@media (hover: hover) and (pointer: fine) {
  .bottone:hover { background: var(--primary-press); }
  .bottone--secondario:hover { background: var(--surface-sunken); }
}

/* ── Testata ───────────────────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  transition: box-shadow 220ms ease;
}
.sentinella { height: 1px; margin-bottom: -1px; }
.testata.scorre { box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px rgb(15 55 45 / 0.35); }
.testata__riga { display: flex; align-items: center; gap: 12px; height: var(--testata); }
.marchio { display: inline-flex; align-items: center; min-height: 44px; }
.testata .marchio { margin-right: auto; }
.nav { display: none; }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-radius: 999px; color: var(--ink); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: var(--surface-sunken); color: var(--ink-strong); } }
.testata__azione { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; }
.menu > summary {
  display: grid; place-items: center; width: 44px; height: 44px; margin-right: -6px;
  border-radius: 999px; color: var(--ink-strong); list-style: none; cursor: pointer;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 24px; height: 24px; }
.menu .icona--chiudi, .menu[open] .icona--apri { display: none; }
.menu[open] .icona--chiudi { display: block; }
.menu__pannello {
  position: fixed; left: 0; right: 0; top: var(--testata);
  max-height: calc(100vh - var(--testata)); max-height: calc(100dvh - var(--testata));
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--gutter) max(24px, env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--ombra-menu);
}
.menu[open] .menu__pannello { animation: menu-apre 220ms var(--ease-out); }
@keyframes menu-apre { from { opacity: 0; transform: translateY(-8px); } }
.menu__pannello a:not(.bottone) {
  display: flex; align-items: center; min-height: 56px;
  border-bottom: 1px solid var(--line); color: var(--ink-strong);
  font-size: 1.25rem; font-weight: 600; text-decoration: none;
}
.menu__pannello .bottone { width: 100%; margin-top: 20px; }
@media (max-width: 359px) { .testata__azione { display: none; } }
@media (min-width: 1100px) {
  .nav { display: flex; gap: 2px; margin-right: 8px; }
  .menu { display: none; }
}

/* ── Sezioni ───────────────────────────────────────────────────────────── */
.sezione { padding-block: clamp(80px, 12vw, 152px); }
.titolo {
  max-width: 18ch;
  font-size: clamp(2rem, 5.4vw, 3.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.03em;
}
.intro { margin-top: 20px; max-width: 38rem; color: var(--ink-muted); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); }

/* ── Ingresso ──────────────────────────────────────────────────────────── */
.eroe { padding-block: clamp(20px, 5vw, 56px) clamp(64px, 9vw, 112px); }
.eroe__griglia { display: grid; gap: clamp(28px, 5vw, 48px); align-items: center; }
.eroe h1 { font-size: clamp(2.1rem, 10vw, 4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.eroe__giro {
  height: 1.35em; margin-top: 16px; overflow: hidden;
  color: var(--primary); font-size: clamp(1.25rem, 3.4vw, 1.75rem); font-weight: 600; line-height: 1.35;
  letter-spacing: -0.015em;
}
.giro { display: flex; flex-direction: column; }
.giro > span { display: block; height: 1.35em; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) { .giro { animation: giro 4.8s calc(var(--ritardo, 0s) + 1s) both; } }
@keyframes giro {
  0%, 18% { transform: translateY(0); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  25%, 43% { transform: translateY(-1.35em); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  50%, 68% { transform: translateY(-2.7em); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  75%, 93% { transform: translateY(-4.05em); animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100% { transform: translateY(-5.4em); }
}
.eroe__lead { margin-top: 20px; max-width: 34rem; color: var(--ink-muted); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.eroe__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.eroe__azioni .bottone { flex: 1 1 auto; }
.eroe .store { margin-top: 24px; }
@media (min-width: 600px) { .eroe__azioni .bottone { flex: 0 0 auto; } }
@media (min-width: 960px) {
  .eroe__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eroe h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); }
}

/* La scena: i foglietti della settimana (gita, pediatra, bolletta…) compaiono sparsi e poi volano dentro il
   telefono, che resta in ordine. Le posizioni sono in unità del contenitore, così la scena è la stessa su ogni
   schermo. Senza JavaScript o con il movimento ridotto si vede solo il telefono. */
.scena {
  --sy: 1.24;
  --cy: 62;
  --nota-w: 40;
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1.24;
  margin-inline: auto;
  container-type: inline-size;
}
.scena__telefono { position: absolute; left: 50%; top: 50%; width: 67cqw; transform: translate(-50%, -50%); }
.note { margin: 0; padding: 0; list-style: none; }
.nota {
  --dx: calc((50 - var(--x) - var(--nota-w) / 2) * 1cqw);
  --dy: calc((var(--cy) - var(--y) * var(--sy) - 6) * 1cqw);
  position: absolute;
  left: calc(var(--x) * 1cqw);
  top: calc(var(--y) * var(--sy) * 1cqw);
  width: calc(var(--nota-w) * 1cqw);
  display: flex; align-items: center; gap: 2.2cqw;
  padding: 1.8cqw 2.4cqw 1.8cqw 1.8cqw;
  border-radius: 3cqw;
  background: var(--surface-raised);
  box-shadow: var(--ombra-nota);
  color: var(--ink-muted);
  font-size: clamp(10.5px, 2.75cqw, 14.5px); line-height: 1.3;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.nota strong { display: block; color: var(--ink-strong); font-weight: 600; }
.nota .tessera { width: 7.5cqw; height: 7.5cqw; }
.nota:nth-child(1) { --x: 0; --y: 3; --r: -6deg; --d: 0; }
.nota:nth-child(2) { --x: 60; --y: 0; --r: 5deg; --d: 70; }
.nota:nth-child(3) { --x: 1; --y: 29; --r: 4deg; --d: 140; }
.nota:nth-child(4) { --x: 59; --y: 26; --r: -4deg; --d: 210; }
.nota:nth-child(5) { --x: 0; --y: 55; --r: -3deg; --d: 280; }
.nota:nth-child(6) { --x: 60; --y: 52; --r: 6deg; --d: 350; }
.nota:nth-child(7) { --x: 3; --y: 80; --r: 5deg; --d: 420; }
.nota:nth-child(8) { --x: 57; --y: 78; --r: -5deg; --d: 490; }
@media (prefers-reduced-motion: no-preference) {
  .scena.anima .nota { visibility: visible; animation: nota 2900ms calc(var(--ritardo, 0s) + var(--d) * 1ms) both; }
  .scena.anima .scena__telefono img { animation: riceve 560ms var(--ease-out) calc(var(--ritardo, 0s) + 2550ms) both; }
}
@keyframes nota {
  0% { opacity: 0; transform: translateY(14px) rotate(var(--r)) scale(0.92);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  16% { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(1); }
  60% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scale(1);
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  90% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(0deg) scale(0.3); }
}
@keyframes riceve { 0% { transform: scale(1); } 35% { transform: scale(1.025); } 100% { transform: scale(1); } }
@media (min-width: 960px) {
  .scena { --sy: 1; --cy: 54; aspect-ratio: 1 / 1.08; }
  .scena__telefono { width: 57cqw; }
}

/* ── Dieci posti ───────────────────────────────────────────────────────── */
.dieci__griglia { display: grid; gap: 40px; }
.posti { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.posti li {
  position: relative; padding: 8px 16px;
  border-radius: 999px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-strong); font-size: clamp(1rem, 2.2vw, 1.25rem); font-weight: 500;
  transition: color 300ms ease;
}
.posti li::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 2px; background: var(--primary);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}
/* Da dove arrivano i dieci posti prima di mettersi in fila (solo con il movimento acceso: classe «mov»). */
.posti li:nth-child(1) { --sx: -16px; --sy: 44px; --storto: -9deg; }
.posti li:nth-child(2) { --sx: 22px; --sy: 60px; --storto: 7deg; }
.posti li:nth-child(3) { --sx: -10px; --sy: 34px; --storto: -4deg; }
.posti li:nth-child(4) { --sx: 18px; --sy: 70px; --storto: 10deg; }
.posti li:nth-child(5) { --sx: -24px; --sy: 52px; --storto: -6deg; }
.posti li:nth-child(6) { --sx: 12px; --sy: 40px; --storto: 5deg; }
.posti li:nth-child(7) { --sx: -14px; --sy: 76px; --storto: -11deg; }
.posti li:nth-child(8) { --sx: 26px; --sy: 48px; --storto: 8deg; }
.posti li:nth-child(9) { --sx: -8px; --sy: 64px; --storto: -5deg; }
.posti li:nth-child(10) { --sx: 20px; --sy: 56px; --storto: 9deg; }
.mov .posti li {
  transition: opacity 500ms var(--ease-out), translate 820ms var(--ease-out), rotate 820ms var(--ease-out), color 300ms ease;
  transition-delay: calc(var(--i, 0) * 45ms);
}
.mov .posti:not(.visto) li { opacity: 0; translate: var(--sx) var(--sy); rotate: var(--storto); }
.barrato .posti li { color: var(--ink-subtle); transition-delay: calc(var(--i, 0) * 90ms); }
.barrato .posti li::after { transform: scaleX(1); transition-delay: calc(var(--i, 0) * 90ms); }
.dieci__chiusa {
  max-width: 36rem; margin-top: 32px;
  color: var(--ink-strong); font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 500; line-height: 1.45;
}
@media (min-width: 960px) {
  .dieci__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
}

/* ── Come funziona ─────────────────────────────────────────────────────── */
.funziona { background: var(--surface-raised); }
.funziona__griglia { display: grid; gap: 48px; }
.funziona__telefono { width: min(330px, 86%); margin-inline: auto; }
.passi { display: grid; margin: 36px 0 0; padding: 0; list-style: none; counter-reset: passo; }
/* Il filo dei passi passa dai numeri (sfondo delle righe); dove il browser lo sa fare si colora seguendo la
   lettura (::after, vedi «Movimento»). */
.passo {
  --filo: linear-gradient(var(--line), var(--line));
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 20px; padding: 22px 0;
  background: var(--filo) no-repeat 23px 46px / 2px 100%;
}
.passo + .passo { background: var(--filo) no-repeat 68px 0 / calc(100% - 68px) 1px, var(--filo) no-repeat 23px 0 / 2px 100%; }
.passo:last-child:not(:first-child) {
  background: var(--filo) no-repeat 68px 0 / calc(100% - 68px) 1px, var(--filo) no-repeat 23px 0 / 2px 46px;
}
.passo::before {
  counter-increment: passo; content: counter(passo);
  position: relative; z-index: 1;
  grid-row: span 2; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: var(--primary-soft); color: var(--primary);
  box-shadow: 0 0 0 6px var(--fondo-passi, var(--surface-raised));
  font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color 260ms ease, color 260ms ease;
}
.passo:not(:last-child)::after {
  content: ""; position: absolute; left: 23px; top: 46px; width: 2px; height: 100%;
  background: var(--primary); transform-origin: 50% 0; scale: 1 0;
}
.passo h3 { padding-top: 10px; font-size: 1.25rem; font-weight: 600; line-height: 1.35; transition: color 260ms ease; }
.passo p { max-width: 36rem; color: var(--ink-muted); transition: color 260ms ease; }
.segue .passo:not(.attivo) h3 { color: var(--ink-muted); }
.segue .passo:not(.attivo) p { color: var(--ink-subtle); }
.segue .passo.attivo::before { background: var(--primary); color: var(--on-primary); }
@media (min-width: 960px) {
  .funziona__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
  .funziona__telefono { position: sticky; top: calc(var(--testata) + 40px); align-self: start; width: min(330px, 100%); }
}

/* ── Una settimana con i Rossi ─────────────────────────────────────────── */
.schede {
  display: flex; gap: 8px; margin: 36px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
}
.schede::-webkit-scrollbar { display: none; }
.scheda {
  flex: none; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--surface-sunken); color: var(--ink);
  font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; scroll-snap-align: start;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.scheda:active { transform: scale(0.97); }
.scheda[aria-selected="true"] { background: var(--ink-strong); color: var(--surface); }
@media (hover: hover) and (pointer: fine) { .scheda:not([aria-selected="true"]):hover { background: var(--line); } }
.schermate { display: grid; margin-top: 32px; }
.schermata {
  grid-area: 1 / 1; display: grid; gap: 28px; align-items: center;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s linear 0s;
}
.schermata[hidden] {
  display: grid; visibility: hidden; opacity: 0; transform: translateX(24px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
/* La schermata scelta arriva dal lato della sua scheda: quelle prima escono a sinistra, quelle dopo a destra. */
.schermata[hidden][data-lato="prima"] { transform: translateX(-24px); }
/* Le schermate nascoste aspettano 24 px più in là: senza un taglio allargherebbero la pagina del telefono, e il browser
   annullerebbe il passaggio animato verso le altre pagine (vuole la stessa larghezza prima e dopo). Il taglio vale per
   tutto il contenuto: oltre il bordo dello schermo non si vede comunque niente. */
main { overflow-x: clip; }
.schermata__telefono { width: min(300px, 80%); margin-inline: auto; }
.schermata h3 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.schermata p { max-width: 34rem; margin-top: 14px; color: var(--ink-muted); font-size: 1.125rem; }
.schermate__nota { margin-top: 28px; color: var(--ink-subtle); font-size: 0.875rem; }
@media (min-width: 760px) {
  .schermata { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .schermata__telefono { width: min(300px, 100%); }
}
@media (min-width: 960px) {
  .schede { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ── Moduli ────────────────────────────────────────────────────────────── */
.tessera { display: grid; place-items: center; flex: none; border-radius: 27%; }
.tessera svg { width: 50%; height: 50%; }
.moduli__lista { display: grid; gap: 0 40px; margin: 48px 0 0; padding: 0; list-style: none; }
.modulo { border-top: 1px solid var(--line); }
.modulo > a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 18px;
  padding: 24px 0; color: inherit; text-decoration: none;
}
.modulo .tessera { grid-row: span 2; width: 56px; height: 56px; }
.modulo h3 { padding-top: 4px; font-size: 1.125rem; font-weight: 600; line-height: 1.3; transition: color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .modulo > a:hover h3 { color: var(--primary); } }
.modulo p { color: var(--ink-muted); font-size: 0.96875rem; }
.modulo p strong { color: var(--ink-strong); font-weight: 600; }
@media (min-width: 700px) { .moduli__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .moduli__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Per l'Italia ──────────────────────────────────────────────────────── */
.italia { background: var(--surface-sunken); }
.anno { display: grid; margin: 48px 0 0; padding: 0; list-style: none; }
.anno li { position: relative; padding: 22px 0 24px; }
.anno li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--ink-strong); transform-origin: 0 50%;
}
.anno h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.anno p { margin-top: 8px; color: var(--ink-muted); }
.glossario { display: grid; gap: 24px; margin-top: 72px; }
.glossario h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.glossario__testo p { margin-top: 12px; max-width: 26rem; color: var(--ink-muted); }
.voci { display: grid; margin: 0; }
.voce { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.voce dt { position: relative; justify-self: start; color: var(--ink-muted); }
/* La parola dell'ufficio resta leggibile, con un tratto sopra: accanto c'è quella di tutti i giorni. */
.voce dt::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 58%; height: 1.5px; border-radius: 2px;
  background: var(--primary); opacity: 0.7; transform-origin: 0 50%;
}
.voce dd { margin: 0; color: var(--ink-strong); font-weight: 600; }
.canali {
  max-width: 46rem; margin-top: 48px; padding: 18px 20px;
  border-radius: 14px; background: var(--surface-raised); color: var(--ink); font-size: 0.96875rem;
}
@media (min-width: 900px) {
  .anno { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
  .glossario { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; }
}

/* ── Fiducia ───────────────────────────────────────────────────────────── */
.fiducia { background: var(--banda); color: var(--banda-ink); }
.fiducia .titolo { color: #FFFFFF; }
.fiducia__griglia { display: grid; gap: 48px; }
.garanzie { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; }
.garanzia svg { width: 28px; height: 28px; color: var(--banda-accento); }
.garanzia h3 { margin-top: 14px; color: #FFFFFF; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.garanzia p { margin-top: 8px; color: var(--banda-muted); }
@media (min-width: 700px) { .garanzie { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 36px; } }
@media (min-width: 960px) { .fiducia__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }

/* ── Prezzi ────────────────────────────────────────────────────────────── */
.listino { width: 100%; margin-top: 44px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.listino th, .listino td { padding: 14px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.listino thead th { padding-top: 20px; border-bottom: 0; vertical-align: bottom; }
.listino tbody th { width: 44%; color: var(--ink); font-weight: 500; }
.listino td { color: var(--ink-strong); font-weight: 500; }
.listino td svg { width: 22px; height: 22px; color: var(--primary); }
.listino td .assente svg { color: var(--ink-subtle); }
.listino .plus { background: var(--primary-soft); }
.listino thead .plus { border-radius: 20px 20px 0 0; }
.listino tbody tr:last-child .plus { border-radius: 0 0 20px 20px; }
.listino tbody tr:last-child > * { border-bottom: 0; }
.piano { display: block; color: var(--ink-strong); font-size: 1.0625rem; font-weight: 700; }
.piano__prezzo {
  display: block; margin-top: 4px; color: var(--ink-strong);
  font-size: clamp(1.375rem, 3vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
}
.piano__dettaglio { display: block; margin-top: 6px; color: var(--ink-muted); font-size: 0.875rem; font-weight: 400; line-height: 1.45; }
.fondatori {
  display: flex; gap: 12px; align-items: baseline; max-width: 40rem; margin-top: 32px; padding: 18px 20px;
  border-radius: 16px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line);
}
.fondatori strong { color: var(--ink-strong); }
.punto { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }
.punto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sun); opacity: 0; }
.prezzi__nota { margin-top: 14px; color: var(--ink-muted); font-size: 0.875rem; }
@media (min-width: 700px) { .listino th, .listino td { padding-inline: 20px; } }
/* Sul telefono ogni riga va a capo: il nome della funzione sopra, i due piani sotto, affiancati. I ruoli ARIA nel
   codice tengono la tabella leggibile ai lettori di schermo anche con questa impaginazione. */
@media (max-width: 599px) {
  .listino, .listino thead, .listino tbody { display: block; }
  .listino tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listino thead th:first-child { display: none; }
  .listino th, .listino td { padding-inline: 12px; }
  .listino tbody th {
    grid-column: 1 / -1; width: auto; padding: 16px 12px 2px; border-bottom: 0;
    background: linear-gradient(to right, transparent 50%, var(--primary-soft) 50%);
    color: var(--ink-muted); font-size: 0.9375rem;
  }
  .listino td { padding-top: 4px; }
  .listino thead .plus { border-radius: 18px 18px 0 0; }
  .listino tbody tr:last-child .plus { border-radius: 0 0 18px 18px; }
}

/* ── Manifesto e lista d'attesa ────────────────────────────────────────── */
.chiusa { background: var(--primary-soft); }
.manifesto { display: grid; gap: 48px; }
.manifesto__testo p {
  max-width: 40rem; color: var(--ink-strong);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em;
}
.manifesto__testo p + p { margin-top: 0.8em; }
.manifesto__firma { margin-top: 28px; color: var(--primary); font-size: 1.125rem; font-weight: 700; }
.lista {
  display: grid; gap: 28px;
  margin-top: clamp(72px, 10vw, 120px); padding-top: clamp(48px, 7vw, 72px); border-top: 1px solid var(--line);
}
.lista__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lista__azioni .bottone { flex: 1 1 auto; }
.lista__nota { margin-top: 16px; color: var(--ink-muted); font-size: 0.9375rem; }
@media (min-width: 600px) { .lista__azioni .bottone { flex: 0 0 auto; } }

/* ── Piede ─────────────────────────────────────────────────────────────── */
.piede { padding-block: 56px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 0.9375rem; }
.piede__griglia { display: grid; gap: 32px; }
.piede .logo { width: 168px; }
.piede__firma { margin-top: 12px; color: var(--ink-strong); font-weight: 600; }
.piede h2 { color: var(--ink-strong); font-size: 0.9375rem; font-weight: 600; }
.piede ul { margin: 6px 0 0; padding: 0; list-style: none; }
.piede li a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .piede li a:hover { color: var(--primary); text-decoration: underline; } }
.piede__legale { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.55; }
.piede__legale a { color: var(--ink-strong); }
@media (min-width: 900px) { .piede__griglia { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); } }

/* ── Pagine legali ─────────────────────────────────────────────────────── */
.l-main { padding-block: clamp(24px, 5vw, 56px) clamp(64px, 10vw, 120px); }
.legale { max-width: 68ch; }
.legale h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.legale .l-data { margin: 0 0 32px; color: var(--ink-muted); font-size: 0.9375rem; }
.legale h2 { margin: 36px 0 8px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.legale p { margin: 0 0 14px; }
.legale ul { margin: 0 0 14px; padding-left: 1.2em; }
.legale li { margin: 0 0 6px; }
.legale li::marker { color: var(--primary); }

/* ── Pagina che non c'è ────────────────────────────────────────────────── */
.errore { padding-block: clamp(56px, 12vw, 140px); }
.errore__simbolo { width: 112px; margin: 0 0 32px; }
.errore h1 { font-size: clamp(2.25rem, 7vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.errore p { max-width: 34rem; margin-top: 16px; color: var(--ink-muted); font-size: 1.125rem; }
.errore .bottone { margin-top: 28px; }

/* ── Collegamenti dalla pagina iniziale alle pagine intere ────────────── */
.sezione__link { margin-top: 32px; }
.sezione__link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.fiducia .sezione__link a { color: var(--banda-accento); }

/* ── Badge degli store ─────────────────────────────────────────────────── */
/* I file ufficiali di Apple e Google, non modificati e alti uguali: il PNG di Google ha un margine trasparente, che
   si compensa col margine negativo. Finché l'app non è negli store sono immagini senza collegamento, con l'avviso
   «In arrivo»: le regole di Apple e Google vogliono che il badge porti alla scheda dell'app, che ancora non c'è.
   Quando c'è, la costruzione li trasforma in collegamenti. */
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.store__badge { display: block; flex: none; border-radius: 8px; }
.store__badge img { width: auto; height: 44px; }
.store__badge--google img { height: calc(44px * 250 / 192); margin-block: calc(44px * -29 / 192); }
.store__arrivo {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 14px 0 12px;
  border-radius: 999px; background: var(--primary-soft); color: var(--ink-strong); font-size: 0.875rem; font-weight: 500;
}
.chiusa .store__arrivo, .chiusa-cta .store__arrivo { background: var(--surface-raised); }

/* ── Pagine interne ────────────────────────────────────────────────────── */
.pagina-eroe { padding-block: clamp(28px, 6vw, 72px) clamp(56px, 8vw, 104px); }
.pagina-eroe__griglia { display: grid; gap: 44px; align-items: center; }
.pagina-eroe h1 {
  max-width: 17ch;
  font-size: clamp(2.25rem, 8.4vw, 4.25rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.035em;
}
.pagina-eroe__lead { margin-top: 20px; max-width: 36rem; color: var(--ink-muted); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); }
.pagina-eroe__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.pagina-eroe__media { width: min(300px, 78%); margin-inline: auto; }
.pagina-eroe--modulo { background: var(--mod-tint); }
.modulo-eroe__nome { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--ink-strong); font-size: 1.125rem; font-weight: 600; }
.modulo-eroe__nome .tessera { width: 56px; height: 56px; background: var(--surface-raised); }
@media (min-width: 960px) {
  .pagina-eroe__griglia--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
  .pagina-eroe__media { width: min(320px, 100%); }
}
.sezione--alta { background: var(--surface-raised); }
.sezione--bassa { background: var(--surface-sunken); }
.sezione--stretta { padding-block: clamp(56px, 8vw, 96px); }
.testo { max-width: 44rem; }
.testo p { color: var(--ink); }
.testo p + p, .testo p + ul, .testo ul + p { margin-top: 14px; }
.testo h3 { margin-top: 36px; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.testo h3 + p { margin-top: 8px; }
.testo ul { margin: 0; padding-left: 1.2em; }
.testo li + li { margin-top: 6px; }
.testo li::marker { color: var(--primary); }
.fonte { max-width: 46rem; margin-top: 20px; color: var(--ink-muted); font-size: 0.875rem; }
.due-colonne { display: grid; gap: 40px; }
@media (min-width: 960px) { .due-colonne { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } }

/* Punti: blocchi con un titolo e due righe. Numerati solo quando sono davvero una sequenza. */
.punti { display: grid; gap: 32px 40px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: punto; }
.punti > li { padding-top: 20px; border-top: 2px solid var(--ink-strong); }
.punti h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.punti p { margin-top: 8px; color: var(--ink-muted); }
.punti--numeri > li::before {
  counter-increment: punto; content: counter(punto); display: block; margin-bottom: 12px;
  color: var(--primary); font-size: 2.25rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
}
@media (min-width: 760px) { .punti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .punti--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Funzioni di un modulo */
.funzioni { display: grid; gap: 0 40px; margin: 40px 0 0; padding: 0; list-style: none; }
.funzione { padding: 20px 0; border-top: 1px solid var(--line); }
.funzione h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; }
.funzione p { margin-top: 6px; color: var(--ink-muted); font-size: 0.96875rem; }
.ai {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
}
.legenda { display: flex; align-items: center; gap: 10px; max-width: 40rem; margin-top: 16px; color: var(--ink-muted); font-size: 0.9375rem; }
.legenda .ai { flex: none; }
@media (min-width: 760px) { .funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prossime { columns: 2 220px; column-gap: 40px; margin: 28px 0 0; padding: 0; list-style: none; }
.prossime li { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); }

/* Carte d'esempio (moduli senza schermata): tre foglietti della famiglia Rossi */
.carte { display: grid; gap: 14px; width: 100%; max-width: 400px; margin: 0 auto; padding: 0; list-style: none; }
.carta {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px 16px 14px;
  border-radius: 20px; background: var(--surface-raised); box-shadow: var(--ombra-nota); line-height: 1.35;
}
.carta:nth-child(1) { rotate: -2deg; }
.carta:nth-child(2) { rotate: 1.5deg; margin-left: 20px; }
.carta:nth-child(3) { rotate: -1deg; margin-right: 12px; }
.carta .tessera { width: 44px; height: 44px; }
.carta strong { display: block; color: var(--ink-strong); font-weight: 600; }
.carta span span { color: var(--ink-muted); font-size: 0.9375rem; }
.esempio__nota { margin-top: 20px; color: var(--ink-subtle); font-size: 0.875rem; text-align: center; }

/* Domande e flussi: tendine native */
.domande { max-width: 52rem; margin-top: 36px; }
.domanda { border-top: 1px solid var(--line); }
.domanda:last-child { border-bottom: 1px solid var(--line); }
.domanda > summary {
  display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0;
  color: var(--ink-strong); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; list-style: none; cursor: pointer;
}
.domanda > summary::-webkit-details-marker { display: none; }
.domanda > summary > span { flex: 1; }
.domanda > summary > svg { flex: none; width: 22px; height: 22px; color: var(--primary); transition: rotate 200ms var(--ease-out); }
.domanda[open] > summary > svg { rotate: 45deg; }
.domanda > summary .tessera { width: 40px; height: 40px; }
.risposta { max-width: 44rem; padding: 0 0 22px; color: var(--ink); }
.risposta p + p { margin-top: 10px; }
.flusso { display: grid; gap: 14px; margin: 0; }
.flusso > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 4px 16px; }
.flusso dt { color: var(--primary); font-weight: 600; }
.flusso dd { margin: 0; }
@media (max-width: 479px) { .flusso > div { grid-template-columns: minmax(0, 1fr); } }

/* Tabelle di dati: sul telefono ogni riga diventa una scheda */
.tabella { width: 100%; margin-top: 36px; border-collapse: collapse; font-size: 0.96875rem; }
.tabella th, .tabella td { padding: 14px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabella thead th { color: var(--ink-muted); font-size: 0.875rem; font-weight: 600; }
.tabella tbody th { color: var(--ink-strong); font-weight: 600; }
@media (max-width: 759px) {
  .tabella, .tabella tbody, .tabella tr, .tabella th, .tabella td { display: block; }
  .tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabella tr { padding: 18px 0; border-bottom: 1px solid var(--line); }
  .tabella th, .tabella td { padding: 0; border: 0; }
  .tabella tbody th { margin-bottom: 8px; font-size: 1.0625rem; }
  .tabella td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 4px 0; }
  .tabella td::before { content: attr(data-etichetta); color: var(--ink-muted); font-size: 0.875rem; }
}

/* Materiali da scaricare */
.materiali { display: grid; gap: 12px; max-width: 44rem; margin: 28px 0 0; padding: 0; list-style: none; }
.materiali a {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 18px;
  border-radius: 16px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-strong); font-weight: 600; text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.materiali a:active { transform: scale(0.98); }
.materiali svg { flex: none; width: 22px; height: 22px; color: var(--primary); }
.materiali small { margin-left: auto; color: var(--ink-muted); font-size: 0.875rem; font-weight: 400; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .materiali a:hover { box-shadow: inset 0 0 0 1.5px var(--primary); } }

/* Chiusura comune delle pagine interne */
.chiusa-cta { background: var(--primary-soft); }
.chiusa-cta__griglia { display: grid; gap: 28px; align-items: end; }
.chiusa-cta__azioni .bottone { width: 100%; }
@media (min-width: 600px) { .chiusa-cta__azioni .bottone { width: auto; } }
@media (min-width: 960px) { .chiusa-cta__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; } }

/* ── Movimento ─────────────────────────────────────────────────────────── */
/* Ingresso delle pagine: una sola sequenza al caricamento, il titolo per primo. */
@keyframes entra { from { opacity: 0; translate: 0 var(--entra-y, 28px); } }
@keyframes entra-destra { from { opacity: 0; translate: 48px 0; } }
@keyframes entra-sinistra { from { opacity: 0; translate: -16px 0; } }
@keyframes appare { from { opacity: 0; } }
@keyframes posa { from { opacity: 0; scale: 0.55; rotate: -14deg; } }
@keyframes riga { from { scale: 0 1; } }
@keyframes tratto { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ping { from { opacity: 0.6; scale: 1; } to { opacity: 0; scale: 3.2; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.eroe__testo, .pagina-eroe__testo) > * { --entra-y: 16px; animation: entra 600ms var(--ease-out) var(--ritardo, 0s) both; }
  :is(.eroe__testo, .pagina-eroe__testo) > :nth-child(2) { animation-delay: calc(var(--ritardo, 0s) + 70ms); }
  :is(.eroe__testo, .pagina-eroe__testo) > :nth-child(3) { animation-delay: calc(var(--ritardo, 0s) + 140ms); }
  :is(.eroe__testo, .pagina-eroe__testo) > :nth-child(4) { animation-delay: calc(var(--ritardo, 0s) + 210ms); }
  :is(.eroe__testo, .pagina-eroe__testo) > :nth-child(5) { animation-delay: calc(var(--ritardo, 0s) + 280ms); }
  :is(.eroe__testo, .pagina-eroe__testo) > :nth-child(n+6) { animation-delay: calc(var(--ritardo, 0s) + 350ms); }
  .pagina-eroe__media { animation: appare 700ms var(--ease-out) calc(var(--ritardo, 0s) + 200ms) both; }
  .pagina-eroe h1 { animation: riga-sale 900ms var(--ease-out) var(--ritardo, 0s) both; }
}

/* Ingressi allo scorrimento. Il JavaScript mette «mov» sulla pagina solo se il movimento è permesso, dopo aver
   segnato con «gia» quello che è già sullo schermo: senza JavaScript, o con il movimento ridotto, tutto è visibile
   subito. Ogni pezzo entra una volta sola; --i è la sua posizione nella riga, per lo sfalsamento. I titoli delle
   sezioni non si muovono. */
.mov [data-mov] > :not(.in, .gia), .mov [data-pezzo]:not(.in, .gia) { opacity: 0; }
.mov [data-mov] > .in, .mov [data-pezzo].in { animation: entra 700ms var(--ease-out) calc(var(--i, 0) * 60ms) both; }
.mov [data-pezzo="destra"].in { animation-name: entra-destra; }
/* Moduli: la tessera si posa, il testo sale appena dopo. */
.mov [data-mov="tessere"] > .in { animation: none; }
.mov [data-mov="tessere"] > .in .tessera { animation: posa 650ms var(--ease-posa) calc(var(--i, 0) * 60ms) both; }
.mov [data-mov="tessere"] > .in :is(h3, p) { --entra-y: 12px; animation: entra 600ms var(--ease-out) calc(var(--i, 0) * 60ms + 90ms) both; }
/* L'anno: la riga si disegna da sinistra, poi il testo. */
.mov [data-mov="anno"] > .in { animation: none; }
.mov [data-mov="anno"] > .in::before { animation: riga 700ms var(--ease-in-out) calc(var(--i, 0) * 120ms) both; }
.mov [data-mov="anno"] > .in > * { --entra-y: 12px; animation: entra 600ms var(--ease-out) calc(var(--i, 0) * 120ms + 160ms) both; }
/* Glossario: la parola dell'ufficio si barra, arriva quella di tutti i giorni. */
.mov [data-mov="voci"] > .in { animation: none; }
.mov [data-mov="voci"] > .in dt::after { animation: riga 520ms var(--ease-in-out) 160ms both; }
.mov [data-mov="voci"] > .in dd { animation: entra-sinistra 600ms var(--ease-out) 380ms both; }
/* Garanzie: le icone si disegnano, una dopo l'altra. */
.mov [data-mov="tratti"] > .in { animation: none; }
.mov [data-mov="tratti"] > .in svg :is(path, rect, circle, line, polyline, ellipse) {
  stroke-dasharray: 1; animation: tratto 900ms var(--ease-in-out) calc(var(--i, 0) * 150ms) both;
}
.mov [data-mov="tratti"] > .in > :not(svg) { --entra-y: 12px; animation: entra 600ms var(--ease-out) calc(var(--i, 0) * 150ms + 200ms) both; }
/* Listino: righe che compaiono senza muoversi (sono dati da leggere), le spunte si disegnano. */
.mov [data-mov="righe"] > .in { animation: appare 500ms ease both; }
.mov [data-mov="righe"] > .in .icona--si path { stroke-dasharray: 1; animation: tratto 450ms var(--ease-out) 180ms both; }
.mov [data-pezzo="ping"].in .punto::after { animation: ping 1100ms var(--ease-out) 600ms 2; }

/* Effetti legati allo scorrimento, solo decorativi: dove il browser non li conosce la pagina resta ferma e uguale. */
@keyframes telefono-esce { to { translate: 0 10%; scale: 0.94; rotate: x 16deg; } }
@keyframes filo { to { scale: 1 1; } }
@keyframes accende { from { opacity: 0.25; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scena { view-timeline: --scena block; }
    .scena__telefono { animation: telefono-esce linear both; animation-timeline: --scena; animation-range: exit 0% exit 100%; }
    .passo { view-timeline: --passo block; view-timeline-inset: 50%; }
    .passo:not(:last-child)::after { animation: filo linear both; animation-timeline: --passo; animation-range: cover 0% cover 100%; }
    .manifesto__testo p:not(.manifesto__firma) { animation: accende linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  }
}

/* Passaggio da una pagina all'altra: breve, la testata resta ferma. */
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .testata { view-transition-name: testata; }
  ::view-transition-old(root) { animation: vt-esce 180ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-entra 320ms var(--ease-out) both; }
}

/* Movimento ridotto: niente spostamenti; restano i cambi di colore e le dissolvenze brevi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
  }
  .bottone:active, .scheda:active, .materiali a:active { transform: none; }
  .schermata, .schermata[hidden], .schermata[hidden][data-lato] { transform: none; }
  .posti li, .posti li::after { transition: none; }
}

@media print {
  .testata { position: static; box-shadow: none; }
  .menu, .salta, .sentinella, .note, [data-copia], [data-condividi], .tema-tasto, .iscrizione__domande { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mov [data-mov] > *, .mov [data-pezzo], .mov .posti li { opacity: 1 !important; translate: none !important; rotate: none !important; }
}

/* ── Pagina in cui sei, colonne del piede, esempi ──────────────────────── */
.nav a[aria-current] { color: var(--ink-strong); }
.nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary); }
.menu__pannello a[aria-current]:not(.bottone) { color: var(--primary); }
.piede__colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
@media (min-width: 900px) { .piede__griglia { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px; } }
@media (min-width: 1100px) { .piede__colonne { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pagina-eroe__media.esempio { width: min(400px, 100%); }
.chiusa-cta .store { margin-top: 16px; }

/* ── Pagine interne: ritocchi ─────────────────────────────────────────── */
.fiducia .intro { color: var(--banda-muted); }
.due-colonne > .domande { margin-top: 0; }
.due-colonne > .testo > h3:first-child { margin-top: 0; }
.punti .tessera { width: 48px; height: 48px; margin-bottom: 16px; }
.testo .lista__azioni { margin-top: 16px; }
.testo .lista__azioni + h3 { margin-top: 40px; }
.domanda > summary > span.tessera { flex: none; }
.esempio__nota { color: var(--ink-muted); }

/* ── Tema chiaro o scuro ───────────────────────────────────────────────── */
/* Il tasto compare solo col JavaScript, che salva la scelta («famodo-aspetto», la stessa voce dell'anteprima
   dell'app). Sul telefono sta nel menu, dal tablet in su nella testata. */
.tema-tasto {
  display: none; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-strong); cursor: pointer;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.tema-tasto svg { grid-area: 1 / 1; width: 22px; height: 22px; }
.tema-tasto .icona--sole, .tema-tasto[aria-pressed="true"] .icona--luna { display: none; }
.tema-tasto[aria-pressed="true"] .icona--sole { display: block; }
.tema-tasto:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) { .tema-tasto:hover { background: var(--surface-sunken); } }
.menu__tema {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px;
  padding: 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink-strong);
  font: inherit; font-size: 1.25rem; font-weight: 600; text-align: left; cursor: pointer;
}
.interruttore {
  position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px;
  background: var(--surface-sunken); box-shadow: inset 0 0 0 1.5px var(--ink-muted);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.interruttore::after {
  content: ""; position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-muted); transition: translate 220ms var(--ease-out), background-color 200ms ease;
}
.menu__tema[aria-pressed="true"] .interruttore { background: var(--primary); box-shadow: none; }
.menu__tema[aria-pressed="true"] .interruttore::after { translate: 20px 0; background: var(--on-primary); }
@media (min-width: 600px) {
  .tema-tasto { display: grid; }
  .menu__tema { display: none; }
}
/* Il cambio di tema si allarga in cerchio dal tasto premuto; la testata cambia insieme alla pagina. */
@keyframes tema-apre {
  from { clip-path: circle(0 at var(--tema-x, 50%) var(--tema-y, 0)); }
  to { clip-path: circle(150vmax at var(--tema-x, 50%) var(--tema-y, 0)); }
}
.cambio-tema .testata { view-transition-name: none; }
.cambio-tema::view-transition-old(root), .cambio-tema::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.cambio-tema::view-transition-new(root) { animation: tema-apre 480ms var(--ease-in-out) both; }

/* ── Ingresso della pagina iniziale ────────────────────────────────────── */
/* Una sola sequenza: il logo si compone, il titolo sale riga per riga da sotto il filo, poi il resto e il telefono. */
.eroe h1 .riga { display: block; }
@keyframes riga-sale {
  from { translate: 0 105%; clip-path: inset(0 -0.2em 100% -0.2em); }
  to { translate: 0 0; clip-path: inset(-0.3em -0.2em -0.35em -0.2em); }
}
@keyframes scena-entra { from { opacity: 0; translate: 0 40px; scale: 0.96; } }
@keyframes avanza { from { scale: 0 1; } to { scale: 1 1; } }
@media (prefers-reduced-motion: no-preference) {
  .home .eroe h1 { animation: none; }
  .home .eroe h1 .riga { animation: riga-sale 900ms var(--ease-out) var(--ritardo, 0s) both; }
  .home .eroe h1 .riga + .riga { animation-delay: calc(var(--ritardo, 0s) + 110ms); }
  .home .scena { animation: scena-entra 1100ms var(--ease-out) calc(var(--ritardo, 0s) + 160ms) both; }
  .home .testata .logo__casa { animation: c-sale 760ms var(--ease-out) 80ms both; }
  .home .testata .logo__sinistra { animation: c-da-sinistra 860ms var(--ease-out) 220ms both; }
  .home .testata .logo__destra { animation: c-da-destra 860ms var(--ease-out) 300ms both; }
  .home .testata .logo__tetto { animation: c-posa 720ms var(--ease-posa) 620ms both; }
}
/* Sotto la testata, un filo verde segue lo scorrimento della pagina, in tutte le pagine. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .testata::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
      background: var(--primary); transform-origin: 0 50%;
      animation: avanza linear both; animation-timeline: scroll(root block);
    }
  }
}

/* ── Spinte verso la lista d'attesa ────────────────────────────────────── */
.spinta { background: var(--primary-soft); }
.spinta__riga { display: grid; gap: 16px; padding-block: 28px; }
.spinta p { max-width: 38rem; color: var(--ink-strong); font-size: 1.0625rem; line-height: 1.5; }
.spinta .bottone, .prezzi__azione .bottone { width: 100%; }
.prezzi__azione { margin-top: 24px; }
@media (min-width: 600px) { .prezzi__azione .bottone { width: auto; } }
@media (min-width: 760px) {
  .spinta__riga { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding-block: 32px; }
  .spinta .bottone { width: auto; }
}

/* ── Modulo della lista d'attesa ───────────────────────────────────────── */
/* Senza JavaScript il modulo funziona lo stesso: il server risponde con un indirizzo come /#iscritto o
   /#errore-email, e :target mostra il blocco giusto. Col JavaScript gli stessi blocchi si accendono con le classi. */
.iscrizione { max-width: 34rem; margin-top: 28px; }
.iscrizione__modulo { display: grid; gap: 18px; }
.campo { display: grid; gap: 8px; }
.campo__etichetta { color: var(--ink-strong); font-size: 0.9375rem; font-weight: 600; }
.campo__input {
  width: 100%; min-height: 56px; padding: 0 18px;
  border: 0; border-radius: 16px; background: var(--surface-raised); color: var(--ink-strong);
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow 160ms ease;
}
.campo__input::placeholder { color: var(--ink-subtle); opacity: 1; }
.campo__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); }
.campo__input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.campo__errore { color: var(--danger); font-size: 0.875rem; font-weight: 500; }
.campo__errore:empty, .iscrizione__esito:empty { display: none; }
.spunta { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.spunta input {
  appearance: none; -webkit-appearance: none; display: grid; place-content: center;
  flex: none; width: 24px; height: 24px; margin: 0; border-radius: 7px;
  background: var(--surface-raised); box-shadow: inset 0 0 0 1.5px var(--ink-muted); cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.spunta input::before {
  content: ""; width: 12px; height: 7px; margin-top: -3px;
  border-left: 2.5px solid var(--on-primary); border-bottom: 2.5px solid var(--on-primary);
  rotate: -45deg; scale: 0; transition: scale 180ms var(--ease-out);
}
.spunta input:checked { background: var(--primary); box-shadow: none; }
.spunta input:checked::before { scale: 1; }
.spunta input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.iscrizione__invia { width: 100%; }
.iscrizione__invia[disabled] { opacity: 0.72; cursor: progress; }
.iscrizione__nota { color: var(--ink-muted); font-size: 0.875rem; line-height: 1.5; }
.iscrizione__esito { color: var(--danger); font-size: 0.9375rem; font-weight: 500; }
.avviso { display: none; padding: 12px 16px; border-radius: 14px; background: var(--danger-soft); color: var(--ink-strong); font-size: 0.9375rem; }
.avviso:target { display: block; }
.iscrizione__fatto {
  display: none; align-items: flex-start; gap: 16px; padding: 20px;
  border-radius: 20px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line);
}
.iscrizione__fatto:target, .iscrizione.fatto .iscrizione__fatto { display: flex; }
.iscrizione:has(#iscritto:target) .iscrizione__modulo, .iscrizione.fatto .iscrizione__modulo { display: none; }
.iscrizione__spunta {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px;
  border-radius: 50%; background: var(--primary); color: var(--on-primary);
}
.iscrizione__spunta svg { width: 24px; height: 24px; }
.iscrizione__titolo { color: var(--ink-strong); font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.iscrizione__fatto p + p { margin-top: 4px; color: var(--ink-muted); }
.iscrizione__domande {
  display: grid; gap: 20px; margin-top: 16px; padding: 20px;
  border-radius: 20px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line);
}
.iscrizione__chiedi { color: var(--ink); }
.scelte { min-width: 0; margin: 0; padding: 0; border: 0; }
.scelte legend { padding: 0; color: var(--ink-strong); font-size: 1rem; font-weight: 600; }
.scelte legend span { display: block; color: var(--ink-muted); font-size: 0.875rem; font-weight: 400; }
.scelte__voci { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.scelta { position: relative; display: inline-flex; }
.scelta input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scelta span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--surface); color: var(--ink-strong); box-shadow: inset 0 0 0 1.5px var(--line);
  font-size: 0.9375rem; font-weight: 500; line-height: 1.3;
  transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 120ms var(--ease-out);
}
.scelta input:checked + span { background: var(--primary); color: var(--on-primary); box-shadow: none; }
.scelta input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.scelta:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .scelta:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1.5px var(--primary); } }
.iscrizione__domande .bottone { width: 100%; }
.iscrizione__grazie {
  display: none; margin-top: 16px; padding: 16px 20px; border-radius: 16px;
  background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-strong); font-weight: 500;
}
.iscrizione__grazie:target, .iscrizione.grazie .iscrizione__grazie { display: block; }
@media (min-width: 600px) {
  .iscrizione__invia, .iscrizione__domande .bottone { width: auto; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .iscrizione.fatto .iscrizione__fatto, .iscrizione.grazie .iscrizione__grazie { --entra-y: 12px; animation: entra 520ms var(--ease-out) both; }
  .iscrizione.fatto .iscrizione__spunta { animation: posa 600ms var(--ease-posa) 120ms both; }
  .iscrizione.fatto .iscrizione__domande { --entra-y: 12px; animation: entra 520ms var(--ease-out) 160ms both; }
}

/* ── La casetta che si compone ─────────────────────────────────────────── */
/* Il simbolo ufficiale accanto al modulo: col JavaScript i pezzi aspettano in trasparenza e si posano uno alla
   volta (email giusta, consenso, invio). Senza JavaScript resta intero. */
.casetta { display: flex; align-items: center; gap: 16px; margin: 0; }
.casetta .simbolo { flex: none; width: 60px; }
.casetta figcaption { max-width: 16rem; color: var(--ink-muted); font-size: 0.9375rem; line-height: 1.45; }
.casetta .simbolo path { transition: opacity 360ms ease, transform 640ms var(--ease-posa); }
.casetta.attiva:not(.ha-sinistra) .simbolo__sinistra,
.casetta.attiva:not(.ha-destra) .simbolo__destra,
.casetta.attiva:not(.ha-tetto) .simbolo__tetto { opacity: 0.16; }
@keyframes casa-fatta { 40% { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) {
  .casetta.attiva:not(.ha-sinistra) .simbolo__sinistra { transform: translate(-16%, 10%) rotate(-12deg); }
  .casetta.attiva:not(.ha-destra) .simbolo__destra { transform: translate(16%, 10%) rotate(12deg); }
  .casetta.attiva:not(.ha-tetto) .simbolo__tetto { transform: translateY(-36%) rotate(-4deg); }
  .casetta.fatta .simbolo { transform-origin: 50% 100%; animation: casa-fatta 560ms var(--ease-out) 420ms both; }
}
.lista .casetta, .pagina-eroe .casetta { order: -1; }
@media (min-width: 960px) {
  .lista { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
  .lista .casetta, .pagina-eroe .casetta { order: 0; flex-direction: column; justify-content: center; gap: 24px; text-align: center; }
  .casetta .simbolo { width: min(240px, 70%); }
  .casetta--grande .simbolo { width: min(300px, 80%); }
}

/* ── Ingresso nel sito ─────────────────────────────────────────────────── */
/* A ogni pagina (tema.js mette «ingresso-attivo» prima che la pagina si disegni) il logo ufficiale si compone in
   grande a tutto schermo, pezzo per pezzo, poi vola al suo posto nella testata mentre il velo si scopre; la pagina
   comincia il suo ingresso con --ritardo. Alla prima pagina della visita dura 2,4 secondi, cambiando pagina 1,3
   («ingresso-breve»: stessi pezzi, tempi scalati da --i-k). Un tocco o un tasto lo saltano (sito.js). */
.ingresso { display: none; }
.ingresso-attivo { --ritardo: 1.8s; --i-k: 1; --i-vola: 1.75s; --i-via: 650ms; }
.ingresso-breve { --ritardo: 0.9s; --i-k: 0.55; --i-vola: 0.88s; --i-via: 420ms; }
.ingresso-attivo .ingresso {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  animation: ingresso-fine 1ms linear calc(var(--i-vola) + var(--i-via)) forwards;
}
.ingresso-attivo.ingresso-finito .ingresso { display: none; }
.ingresso::before { content: ""; position: absolute; inset: 0; background: var(--surface); }
.ingresso-attivo .ingresso::before { animation: velo-via var(--i-via) var(--ease-in-out) var(--i-vola) forwards; }
.ingresso .logo { position: relative; width: min(84vw, 600px); }
.ingresso-attivo .ingresso .logo { animation: ingresso-vola var(--i-via) var(--ease-in-out) var(--i-vola) forwards; }
.ingresso-attivo .ingresso .logo__casa { animation: i-sale calc(var(--i-k) * 760ms) var(--ease-out) calc(var(--i-k) * 80ms) both; }
.ingresso-attivo .ingresso .logo__sinistra { animation: i-da-sinistra calc(var(--i-k) * 860ms) var(--ease-out) calc(var(--i-k) * 240ms) both; }
.ingresso-attivo .ingresso .logo__destra { animation: i-da-destra calc(var(--i-k) * 860ms) var(--ease-out) calc(var(--i-k) * 320ms) both; }
.ingresso-attivo .ingresso .logo__tetto { animation: i-posa calc(var(--i-k) * 720ms) var(--ease-posa) calc(var(--i-k) * 700ms) both; }
.ingresso-attivo .testata .logo { animation: logo-arriva 1ms linear calc(var(--i-vola) + var(--i-via) - 40ms) backwards; }
.ingresso-attivo .testata .logo path { animation: none; }
@keyframes i-sale { from { opacity: 0; transform: translateY(60%) scale(0.7); } }
@keyframes i-da-sinistra { from { opacity: 0; transform: translate(-110%, 35%) rotate(-30deg); } }
@keyframes i-da-destra { from { opacity: 0; transform: translate(110%, 35%) rotate(30deg); } }
@keyframes i-posa { from { opacity: 0; transform: translateY(-200%) rotate(-10deg); } }
@keyframes ingresso-fine { from, to { visibility: hidden; } }
@keyframes velo-via { to { opacity: 0; } }
@keyframes ingresso-vola { to { translate: var(--vola-x, 0) var(--vola-y, -42vh); scale: var(--vola-s, 0.4); } }
@keyframes logo-arriva { from, to { opacity: 0; } }

/* ── Scorrimento in 3D, in tutte le pagine ─────────────────────────────── */
/* Legato allo scorrimento e solo decorativo: i telefoni e la casetta ruotano verso di te mentre entrano, gli elenchi
   salgono in piano (in 3D il telefono ridipingerebbe l'elenco intero mentre i riquadri compaiono, ed è lì che lo
   scorrimento scattava), le fasce colorate crescono fino a tutta pagina, il telefono in apertura si inclina
   all'indietro quando esce. Solo trasformazioni e trasparenza: il telefono le muove con la scheda grafica, senza
   ridisegnare la pagina a ogni fotogramma (niente ritagli animati). Dove il browser non lo conosce la pagina resta
   ferma e completa. */
@keyframes gira-dentro { from { transform: perspective(1200px) rotateY(-26deg) rotateX(12deg) translateY(64px) scale(0.9); } to { transform: none; } }
@keyframes sale-dal-basso { from { translate: 0 64px; } to { translate: 0 0; } }
@keyframes pannello-apre { from { scale: 0.93; translate: 0 40px; } to { scale: 1; translate: 0 0; } }
@keyframes testo-va { to { translate: 0 -56px; } }
.scena { perspective: 1400px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.funziona__telefono, .schermata__telefono, .casetta .simbolo) {
      animation: gira-dentro linear both; animation-timeline: view(); animation-range: entry 0% cover 38%;
    }
    :is(.punti, .domande, [data-mov="tessere"]) {
      animation: sale-dal-basso linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    :is(.chiusa, .chiusa-cta, .fiducia) {
      animation: pannello-apre linear both; animation-timeline: view(); animation-range: entry 0% cover 30%;
    }
    :is(.eroe__testo, .pagina-eroe__testo) { animation: testo-va linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}

/* Tessere dei moduli: colori del brand kit, in chiaro e in scuro */
.tessera--calendario { background: var(--mod-calendario-tint); color: var(--mod-calendario); }
.tema--calendario { --mod-tint: var(--mod-calendario-tint); }
.tessera--famiglia { background: var(--mod-famiglia-tint); color: var(--mod-famiglia); }
.tema--famiglia { --mod-tint: var(--mod-famiglia-tint); }
.tessera--scuola { background: var(--mod-scuola-tint); color: var(--mod-scuola); }
.tema--scuola { --mod-tint: var(--mod-scuola-tint); }
.tessera--finanze { background: var(--mod-finanze-tint); color: var(--mod-finanze); }
.tema--finanze { --mod-tint: var(--mod-finanze-tint); }
.tessera--spesa { background: var(--mod-spesa-tint); color: var(--mod-spesa); }
.tema--spesa { --mod-tint: var(--mod-spesa-tint); }
.tessera--casa { background: var(--mod-casa-tint); color: var(--mod-casa); }
.tema--casa { --mod-tint: var(--mod-casa-tint); }
.tessera--salute { background: var(--mod-salute-tint); color: var(--mod-salute); }
.tema--salute { --mod-tint: var(--mod-salute-tint); }
.tessera--sport { background: var(--mod-sport-tint); color: var(--mod-sport); }
.tema--sport { --mod-tint: var(--mod-sport-tint); }
.tessera--vacanze { background: var(--mod-vacanze-tint); color: var(--mod-vacanze); }
.tema--vacanze { --mod-tint: var(--mod-vacanze-tint); }
.tessera--documenti { background: var(--mod-documenti-tint); color: var(--mod-documenti); }
.tema--documenti { --mod-tint: var(--mod-documenti-tint); }
.tessera--paghetta { background: var(--mod-paghetta-tint); color: var(--mod-paghetta); }
.tema--paghetta { --mod-tint: var(--mod-paghetta-tint); }
.tessera--bonus { background: var(--mod-bonus-tint); color: var(--mod-bonus); }
.tema--bonus { --mod-tint: var(--mod-bonus-tint); }