/* =========================================================================
   Sito di Fraud Fighters. La carta e l'inchiostro sono quelli dell'app: chi arriva qui
   e poi apre Fraud Fighters non deve sentire il salto.

   Il sito pero' ha un colore suo, deciso da Sula il 03-09-2026: un verde
   petrolio profondo per il bottone, per le fasce dietro i telefoni e per pochi
   dettagli. Non e' mai un verdetto: nell'app il verde non esiste, e qui non
   dice "sicuro", dice "questa e' la pagina di Fraud Fighters". Il rosso compare in una
   schermata sola, ed e' una schermata vera in cui qualcuno sta per essere
   truffato.
   ========================================================================= */

/* Atkinson Hyperlegible, disegnato dal Braille Institute per chi ci vede poco.
   Copiato dentro il sito e non chiamato da Google: la pagina dichiara di non
   contattare nessuno, e deve essere vero anche per il carattere. */
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/Atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('assets/fonts/Atkinson-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/Atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('assets/fonts/Atkinson-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ground:#f1eee7; --surface:#fffdf8; --fascia:#d6e4e0;
  --ink:#0b1a1c; --ink-soft:#4c5b5d; --line:#c9c3b6;
  /* Petrolio su carta: 9,6:1. Inchiostro su fascia: 13:1. Inchiostro attenuato su fascia: 5,7:1. */
  --accento:#0f4c4a; --accento-scuro:#0a3634; --accento-ink:#fffdf8;
  --raggio:14px; --raggio-piccolo:8px;
  /* L'unica curva del movimento: parte veloce e si posa piano. Una sola, come l'ombra
     e il raggio: due curve quasi uguali sono due, e si sentono. */
  --curva:cubic-bezier(.2, .7, .2, 1);
  /* L'unica ombra del sito, sull'unica cosa che si tocca. Tinta del petrolio, non nera. */
  --ombra:0 12px 28px -10px rgba(15, 76, 74, .55);
  --misura:min(100% - 2.5rem, 68rem);
  /* L'altezza della testa: la usa lo scorrimento per non nasconderla sotto. */
  --testa:68px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  /* 19px come nell'app: il pubblico e' lo stesso, e non ci vede benissimo. */
  font-size:19px; line-height:1.55; overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }

.dentro { width:var(--misura); margin-inline:auto; }

/* ---------- testa ----------
   Vetro, non una barra piena: la pagina scorre sotto e si vede attraverso.
   Il filo sotto non c'e' finche' non si scorre (effetto bordo di scorrimento):
   quando non c'e' niente da separare, non separa niente. */
.testa {
  position:sticky; top:0; z-index:10;
  /* .92 e non .72: sotto la testa passano il palco scuro dell'apertura e i due
     blocchi petrolio, e piu' il fondo e' scuro piu' il vetro schiarisce le parole
     scritte sopra. A .72 "English" scendeva a 3,7:1 e a .85 a 4,4:1, sotto il minimo
     AA; a .92 sta a 6:1 dappertutto. Si vede ancora attraverso. */
  background:rgba(241, 238, 231, .92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1.5px solid var(--line);
}
/* Dentro "nessuna preferenza" come tutto il resto del movimento: chi chiede la
   pagina ferma tiene il filo fisso, che e' lo stato completo. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes filo-testa { from { border-bottom-color:transparent; } }
    .testa { animation:filo-testa linear both; animation-timeline:scroll(); animation-range:0 72px; }
  }
}
/* Chi ha chiesto meno trasparenza, o piu' contrasto, la vede piena e col filo. */
@media (prefers-reduced-transparency: reduce) {
  .testa { background:var(--ground); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media (prefers-contrast: more) {
  .testa {
    background:var(--ground); backdrop-filter:none; -webkit-backdrop-filter:none;
    animation:none; border-bottom-color:var(--ink);
  }
}
.testa .dentro { display:flex; align-items:center; gap:1rem; min-height:var(--testa); }
.marchio { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
.marchio svg { width:26px; height:26px; flex:none; }
.testa nav { margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.testa nav a {
  text-decoration:none; padding:.6rem .85rem; border-radius:var(--raggio-piccolo);
  font-size:.92rem; color:var(--ink-soft); white-space:nowrap;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
@media (hover: hover) { .testa nav a:hover { color:var(--ink); background:var(--fascia); } }
.testa nav a:active { color:var(--ink); background:var(--fascia); transform:scale(.96); transition:none; }
.testa nav a[aria-current] { color:var(--accento); font-weight:700; }

/* ---------- bottoni ---------- */
.bottone {
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:60px; padding:1rem 2.2rem; border-radius:var(--raggio-piccolo);
  background:var(--accento); color:var(--accento-ink); border:2px solid var(--accento);
  font-family:inherit; font-size:1.12rem; font-weight:700; text-decoration:none;
  box-shadow:var(--ombra);
  transition:background .18s ease, transform .16s ease-out, box-shadow .18s ease;
}
@media (hover: hover) { .bottone:hover { background:var(--accento-scuro); border-color:var(--accento-scuro); } }
/* Il bottone porta fuori, in una scheda nuova: la freccetta lo dice prima del clic. */
.bottone[target]::after { content:"\2197"; margin-left:.5rem; font-size:.9em; }
/* Nessuna transizione in entrata: il bottone si schiaccia nell'istante del tocco,
   non 100 millisecondi dopo. Uscendo torna su con calma. */
.bottone:active { transform:scale(.97); box-shadow:none; transition:none; }
@media (prefers-reduced-motion: reduce) {
  .bottone:active, .testa nav a:active { transform:none; }
  details.rimisura summary::after { transition:none; }
}
:focus-visible { outline:3px solid var(--accento); outline-offset:3px; }

/* ---------- ritmo delle sezioni ----------
   Deciso da Sula il 06-09-2026. Prima le sezioni si alternavano fra carta e una
   fascia verde chiaro a tutta larghezza: e' esattamente il modo in cui e' fatto un
   depliant di ambulatorio, e infatti la pagina sembrava un ambulatorio. Adesso la
   carta corre da cima a fondo e due sole sezioni sono petrolio pieno: quella sulla
   riservatezza (il buio dice da solo che li' dentro resta tutto) e la chiusura.
   Carta -> buio -> carta: due stacchi forti valgono piu' di cinque deboli.
   Dove il colore non separa piu', separa l'aria: il respiro fra le sezioni cresce. */
section { padding-block:clamp(4.5rem, 11vw, 9rem); }

/* Il blocco scuro. Non e' un tema: e' la stessa pagina su carta nera, quindi
   ridipinge i suoi colori (inchiostro, filo, accento, ombra) e tutto il resto del
   foglio di stile continua a funzionare senza sapere di essere sul buio.
   Contrasti misurati su #0a3634: testo 13:1, testo attenuato 7,1:1, accento 8,1:1. */
.buio {
  background:var(--accento-scuro); color:var(--surface);
  --ink:#fffdf8; --ink-soft:#a9c4c2; --line:rgba(255, 253, 248, .22);
  --accento:#8fd6cf;
  /* Stessa ombra di sempre, tinta del fondo su cui cade: una tinta petrolio sul
     petrolio non si vedrebbe, e l'ombra qui e' l'unica cosa che dice "si tocca". */
  --ombra:0 12px 28px -10px rgba(0, 0, 0, .6);
}
/* Sul buio il bottone si inverte: carta piena con la scritta petrolio. Un bottone
   petrolio su fondo petrolio sarebbe un rettangolo appena piu' scuro. */
.buio .bottone { background:var(--surface); color:var(--accento-scuro); border-color:var(--surface); }
@media (hover: hover) { .buio .bottone:hover { background:#e9e4da; border-color:#e9e4da; } }
/* Crenatura e interlinea cambiano con la taglia: piu' un titolo cresce, piu' le
   lettere vanno strette e le righe vicine. Un valore solo per tutti e tre sarebbe
   giusto per il titolone e sbagliato per il sottotitolo. */
h1, h2, h3 { margin:0; text-wrap:balance; }
h1 { font-size:clamp(2.5rem, 7.5vw, 4.6rem); line-height:1.04; letter-spacing:-.035em; }
h2 { font-size:clamp(2rem, 5.2vw, 3.1rem); line-height:1.08; letter-spacing:-.025em; }
h3 { font-size:1.3rem; line-height:1.25; letter-spacing:-.005em; }
p { margin:0; max-width:60ch; text-wrap:pretty; }
.occhiello { font-size:.85rem; font-weight:700; color:var(--accento); letter-spacing:.06em; text-transform:uppercase; }
.soffio { color:var(--ink-soft); }
/* Titolo e frase d'apertura di una sezione, centrati, con aria sotto. */
.capo { display:grid; justify-items:center; text-align:center; gap:1rem; margin-bottom:clamp(2.5rem, 6vw, 4rem); }
.capo p { font-size:1.2rem; max-width:44ch; }

/* ---------- il telefono: un iPhone 17 Pro modellato in Blender (04-09-2026), reso
     con lo sfondo trasparente e lo schermo bucato. La cornice e' un'immagine sopra,
     la schermata sta sotto, nel buco: cosi' una schermata sola serve a tutte le lingue
     e la home puo' scorrere dentro. Ci sono tre cornici: di fronte e girata di 24 gradi
     verso destra o verso sinistra. Lo schermo sotto prende la stessa prospettiva della
     camera di Blender: i numeri vengono dal modello (schermo 67,8 x 146,8 mm, camera
     a 400 mm con focale 85, quindi 10 pixel per millimetro nell'immagine da 810 x 1695),
     e la variabile --giro e' la rotazione del telefono nel render. La schermata sborda
     dell'1,2% sotto la cornice, cosi' non resta un filo di carta tra le due.
     Lo schermo ha la proporzione della schermata (390 x 844): quella piu' alta scorre.
     Niente riflesso sul vetro: rendeva poco leggibile il testo. ---------- */
.telefono {
  position:relative; width:min(100%, 320px); margin-inline:auto;
  aspect-ratio:810 / 1695; container-type:inline-size;
}
.telefono .cornice { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.schermo {
  position:absolute; left:7.63%; top:6.16%; width:84.73%; height:87.68%;
  overflow:hidden; border-radius:12cqw; background:var(--ground); container-type:size;
  transform:perspective(494cqw) rotateY(var(--giro, 0deg)) translateZ(5.44cqw);
}
.schermo img { width:100%; display:block; }
/* La barra di stato (ora, rete, batteria) sta ferma in cima, sopra la home che scorre. */
.schermo .stato { position:absolute; top:0; left:0; }
/* 86% e non 100%: inclinandosi il telefono sporge del 6,5% della sua larghezza per lato,
   e sui telefoni stretti quel poco bastava a far scorrere la pagina di lato. */
.controlla .telefono, .privacy .telefono { width:min(86%, 320px); }
.controlla .telefono { --giro:-24deg; }
.privacy .telefono { --giro:24deg; }
/* L'inclinazione: 24 fotogrammi dello stesso telefono, da 15 gradi verso destra a 15
   verso sinistra, resi in Blender. Li mostra sito.js al posto della cornice, scegliendo
   il fotogramma dallo scorrimento. Il telefono resta frontale: non gira mai la schiena. */
.telefono .giro { position:absolute; inset:0; width:100%; height:100%; }
/* Il palco dell'apertura: il telefono esce dal basso, tagliato, come in una
   pagina prodotto. Quello che manca lo si vede aprendo Fraud Fighters.
   Buio come i due blocchi scuri piu' sotto: era l'ultimo pezzo di verdino chiaro
   rimasto, e per giunta nel punto piu' visibile della pagina. Sul buio la schermata
   rossa dell'allarme si stacca invece di sciogliersi nel fondo. */
.palco {
  background:var(--accento-scuro); border-radius:var(--raggio);
  padding:clamp(2rem, 5vw, 3.5rem) 1.25rem 0; overflow:hidden;
  display:flex; justify-content:center; align-items:flex-start; max-height:600px;
}
/* align-items: senza, il telefono verrebbe stirato all'altezza del palco (che e' tagliato
   a 600 punti) e lo schermo dentro, in percentuale, ne uscirebbe schiacciato. */
.palco .telefono { margin-bottom:-2rem; }

/* ---------- apertura ---------- */
.apertura { padding-top:clamp(3rem, 7vw, 5.5rem); }
.apertura .dentro { display:grid; justify-items:center; text-align:center; gap:1.5rem; }
.apertura h1 { max-width:15ch; }
.apertura p { font-size:1.25rem; max-width:40ch; }
.apertura .bottone { margin-top:.5rem; }
.apertura .palco { width:100%; margin-top:clamp(2rem, 5vw, 3.5rem); }
/* Il telefono nel render occupa il 90% della larghezza dell'immagine: 466 punti di
   immagine sono 420 di telefono. */
.apertura .telefono { width:min(100%, 466px); }
/* Quando sito.js ha i fotogrammi pronti, l'apertura si allunga e il palco resta fermo
   mentre il telefono si inclina da un lato all'altro, poi la pagina riparte. Il telefono
   e' intero, non tagliato: sta in 38vh di larghezza, cioe' 80vh di altezza, con aria
   sopra e sotto. 180vh e non 200: l'inclinazione e' un gesto breve, e farla durare due
   schermate intere la fa sembrare lenta invece che curata. */
.apertura.gira .dentro { min-height:180vh; align-content:start; }
.apertura.gira .palco { position:sticky; top:calc(var(--testa) + 2vh); max-height:none; padding-bottom:clamp(2rem, 5vw, 3.5rem); }
.apertura.gira .telefono { width:min(100%, 466px, 38vh); margin-bottom:0; }
.apertura.gira .schermo, .apertura.gira .cornice { visibility:hidden; }

/* ---------- che cosa controlla: tre righe con un'icona e il telefono ---------- */
.controlla .corpo { display:grid; gap:clamp(2.5rem, 5vw, 4rem); align-items:center; }
/* 364 e non 320: il telefono e' largo 320 e si inclina scorrendo, e un'inclinazione
   sporge di una ventina di punti per lato. La colonna gli lascia quel margine, cosi'
   il movimento non spinge fuori la pagina di lato. */
@media (min-width: 900px) { .controlla .corpo { grid-template-columns:1fr 364px; gap:clamp(3rem, 7vw, 6rem); } }
.riga { display:grid; grid-template-columns:36px 1fr; gap:1.1rem; padding-block:1.6rem; border-top:1.5px solid var(--line); }
.riga:last-child { border-bottom:1.5px solid var(--line); }
/* L'icona ferma l'occhio prima della parola: e' la stessa cosa che fa la home dell'app. */
.riga svg { width:34px; height:34px; color:var(--accento); margin-top:.15rem; }
.riga h3 { margin-bottom:.4rem; }
.riga p { color:var(--ink-soft); max-width:52ch; }

/* ---------- i numeri ---------- */
.griglia-numeri { display:grid; gap:1.25rem; margin-bottom:2.5rem; }
@media (min-width: 620px) { .griglia-numeri { grid-template-columns:1fr 1fr; } }
.numero {
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--raggio); padding:1.75rem;
}
.numero b { display:block; font-size:clamp(2.8rem, 8vw, 4rem); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
/* La barra sotto il numero: il dato letto a colpo d'occhio, anche da chi non legge le cifre.
   E' petrolio perche' e' il colore del sito, non un verdetto: il rosso qui non entra. */
.barra { display:block; height:6px; border-radius:99px; background:var(--fascia); margin-top:.9rem; overflow:hidden; }
.barra::after { content:""; display:block; height:100%; width:var(--p); background:var(--accento); border-radius:inherit; }
.numero .cosa { display:block; font-weight:700; font-size:1.05rem; margin-block:.6rem .5rem; }
.numero p { color:var(--ink-soft); font-size:.94rem; }
.onesta {
  font-size:1.2rem; font-weight:700; max-width:52ch;
  border-left:4px solid var(--accento); padding-left:1.15rem; margin-bottom:2.5rem;
}
/* Una card che si apre. Bordo e carta come le card dei numeri, nessuna ombra:
   l'ombra nel sito dice "questo si tocca" e ce l'ha solo il bottone. Qui lo dice
   la freccetta, che si gira quando la card e' aperta. */
details.rimisura { background:var(--surface); border:1.5px solid var(--line); border-radius:var(--raggio); }
details.rimisura summary {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:700; cursor:pointer; padding:1.25rem 1.5rem; border-radius:var(--raggio);
  list-style:none; transition:background .15s ease;
}
details.rimisura summary::-webkit-details-marker { display:none; }
/* La freccetta: due lati di un quadrato girati di 45 gradi. Punta in giu' da chiusa,
   in su da aperta, e nel mezzo ci va ruotando. */
details.rimisura summary::after {
  content:""; flex:none; width:.62rem; height:.62rem; margin-right:.2rem;
  border-right:2.5px solid var(--accento); border-bottom:2.5px solid var(--accento);
  rotate:45deg; translate:0 -.18em; transition:rotate .2s var(--curva), translate .2s var(--curva);
}
details.rimisura[open] summary::after { rotate:225deg; translate:0 .18em; }
@media (hover: hover) { details.rimisura summary:hover { background:var(--fascia); } }
/* Come il bottone: la card si accende nell'istante del tocco, non un decimo dopo. */
details.rimisura summary:active { background:var(--fascia); transition:none; }
details.rimisura > *:not(summary) { margin:1rem 1.5rem 0; }
details.rimisura > *:last-child { margin-bottom:1.5rem; }
/* Ogni comando e' una riga con sotto cosa misura. Una griglia allineata sui
   telefoni stretti scorreva di lato senza dirlo.
   Righe, non riquadri: stanno gia' dentro la card che si apre, e una card dentro
   una card e' un bordo che non separa niente. */
.comandi { list-style:none; margin:0; padding:0; }
.comandi li { padding:.9rem 0; border-top:1.5px solid var(--line); }
.comandi code {
  display:block; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92rem; font-weight:700; overflow-wrap:anywhere;
}
.comandi span { display:block; color:var(--ink-soft); font-size:.9rem; margin-top:.2rem; }

/* ---------- privacy ---------- */
.privacy .dentro { display:grid; gap:clamp(2.5rem, 5vw, 4rem); align-items:center; }
@media (min-width: 900px) { .privacy .dentro { grid-template-columns:364px 1fr; gap:clamp(3rem, 7vw, 6rem); } }
.privacy h2 { margin-bottom:1.25rem; }
.privacy .capofila { font-size:1.2rem; margin-bottom:1.75rem; }
.punti { list-style:none; margin:0 0 1.75rem; padding:0; display:grid; gap:1rem; }
.punti li { padding-left:1.6rem; position:relative; color:var(--ink-soft); max-width:60ch; }
.punti li::before {
  content:""; position:absolute; left:0; top:.62em; width:.7rem; height:2px; background:var(--accento);
}
.nota { font-size:.94rem; color:var(--ink-soft); border-top:1.5px solid var(--line); padding-top:1.25rem; }

/* ---------- quello che non e' provato: colonna stretta, voce piu' bassa ---------- */
.aperto .dentro { max-width:44rem; margin-inline:auto; }
.aperto h2 { margin-bottom:1.5rem; }
.aperto p + p { margin-top:1.25rem; }

/* ---------- installare ---------- */
/* Due strade separate, non un elenco unico: chi ha un iPhone non deve leggere i passi
   di Android per capire che non sono i suoi. Una card ciascuna lo dice prima delle parole. */
.due { display:grid; gap:1.25rem; max-width:52rem; margin-inline:auto; }
@media (min-width: 700px) { .due { grid-template-columns:1fr 1fr; gap:1.5rem; } }
.due > div {
  background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--raggio); padding:1.75rem;
}
.due h3 { padding-bottom:.85rem; border-bottom:1.5px solid var(--line); margin-bottom:1.25rem; }
.due ol { margin:0; padding-left:1.4rem; display:grid; gap:.85rem; }
.due li { padding-left:.3rem; }

/* ---------- chiusura ---------- */
.chiusura { text-align:center; }
.chiusura .dentro { display:flex; flex-direction:column; align-items:center; gap:1.75rem; }
.chiusura p { max-width:36ch; font-size:1.2rem; }

/* ---------- piede ---------- */
/* Niente filo in cima: sopra c'e' la chiusura scura, che separa da sola. */
.piede { padding-block:3rem; font-size:.9rem; color:var(--ink-soft); }
.piede .dentro { display:grid; gap:1.5rem; }
@media (min-width: 700px) { .piede .dentro { grid-template-columns:1fr auto; align-items:start; } }
.piede p { max-width:56ch; }
.piede .societa { display:grid; gap:.2rem; }
.piede .diritti { margin-top:.8rem; }
.piede a { text-underline-offset:3px; }

/* ---------- la prova: «Apri Fraud Fighters» apre l'app dentro il telefono (T28) ----------
   Solo sul computer, e la apre sito.js. E' lo stesso telefono delle sezioni, alto quanto
   lo schermo, con l'app vera nel buco al posto della schermata. Accanto, chiudi e
   l'uscita a tutta pagina. Il fondo e' il petrolio dei blocchi scuri, quasi pieno:
   mentre si prova non c'e' altro da guardare. */
.prova { border:0; padding:1.5rem; background:transparent; max-width:none; max-height:none; overflow:visible; }
.prova[open] { display:flex; align-items:center; justify-content:center; gap:2.5rem; }
/* Quasi pieno: a .9 il titolone della pagina sotto si leggeva ancora attraverso. */
.prova::backdrop { background:rgba(10, 54, 52, .97); }
html:has(.prova[open]) { overflow:hidden; }
.prova .telefono { height:calc(100dvh - 3rem); width:auto; margin:0; }
/* Niente prospettiva qui: il telefono e' di fronte, e con la trasformazione 3D Chrome
   dipingeva la pagina viva sopra la cornice, angoli dritti compresi. Lo scale tiene
   l'1% di sbordo sotto la cornice che la prospettiva dava alle schermate. */
.prova .schermo { transform:scale(1.011); }
.prova .cornice { z-index:1; }
/* L'app gira alla larghezza del buco. Sotto i 320 punti (lo schermo piu' stretto su cui
   e' misurata) si impagina a 320 e si rimpicciolisce appena: lo fa sito.js. */
.prova iframe { display:block; width:100%; height:100%; border:0; border-radius:inherit; transform-origin:0 0; background:var(--ground); }
.prova .azioni { display:grid; gap:1.25rem; justify-items:start; color:var(--surface); }
.prova .bottone { background:var(--surface); color:var(--accento-scuro); border-color:var(--surface); cursor:pointer; }
@media (hover: hover) { .prova .bottone:hover { background:#e9e4da; border-color:#e9e4da; } }
.prova .azioni a { color:var(--surface); text-underline-offset:3px; }

/* ---------- l'informativa privacy: una colonna da leggere, niente altro ---------- */
a.marchio { text-decoration:none; }
/* Meno aria in cima delle sezioni del sito: qui non c'e' niente da presentare, si legge. */
.informativa { padding-block:clamp(2.5rem, 6vw, 4.5rem); }
.informativa .dentro { max-width:44rem; }
.informativa h1 { font-size:clamp(2.2rem, 6vw, 3.4rem); margin-bottom:1.75rem; }
.informativa h2 { font-size:clamp(1.6rem, 4vw, 2.1rem); margin:3.25rem 0 1rem; }
.informativa h3 { margin:2rem 0 .75rem; }
.informativa p, .informativa ul, .informativa ol { margin:0 0 1rem; }
.informativa li { margin-bottom:.55rem; max-width:60ch; }
/* Quello che il legale o Sula devono ancora chiudere: si vede solo in anteprima, perche'
   con un punto aperto la pagina non viene pubblicata. */
.informativa mark { background:#ffe28a; color:var(--ink); padding:0 .2em; border-radius:4px; }
.informativa .anteprima { border:2px solid #b3261e; color:#b3261e; font-weight:700; padding:.8rem 1rem; border-radius:var(--raggio-piccolo); margin-bottom:2rem; max-width:none; }
.informativa table { width:100%; border-collapse:collapse; margin:0 0 1.5rem; font-size:.94rem; }
.informativa th, .informativa td { text-align:left; vertical-align:top; padding:.75rem .6rem; border-bottom:1.5px solid var(--line); }
.informativa th { font-size:.85rem; color:var(--ink-soft); }
/* Sul telefono tre colonne non ci stanno: ogni riga diventa una scheda, e ogni valore
   si porta dietro il nome della colonna. Una tabella che scorre di lato non si legge. */
@media (max-width: 620px) {
  .informativa thead { display:none; }
  .informativa table, .informativa tbody, .informativa tr, .informativa td { display:block; }
  .informativa tr { border:1.5px solid var(--line); border-radius:var(--raggio-piccolo); padding:.5rem .9rem; margin-bottom:.9rem; background:var(--surface); }
  .informativa td { border:0; padding:.35rem 0; }
  .informativa td::before { content:attr(data-etichetta); display:block; font-size:.8rem; color:var(--ink-soft); font-weight:700; }
}

/* =========================================================================
   Il movimento. Deciso da Sula il 04-09-2026: pagina prodotto alla Apple.
   Tre regole che non si toccano:
   1. tutto e' CSS nativo, nessuna libreria; l'unico JavaScript conta i numeri e
      sceglie il fotogramma del giro del telefono dallo scorrimento;
   2. chi ha "riduci movimento" attivo vede la pagina ferma: niente entra qui;
   3. su un browser che non conosce le animazioni legate allo scorrimento
      (prima del 2025) la pagina e' ferma ma completa. Lo stato "invisibile"
      esiste solo dentro @supports, quindi non puo' restare nascosto niente.
   Gli spostamenti sono solo verticali, le rotazioni stanno dentro la scatola:
   niente puo' far scorrere la pagina di lato.
   ========================================================================= */
main > section { overflow-x:clip; }

@media (prefers-reduced-motion: no-preference) {
  /* Le sezioni si agganciano allo scorrimento, ma senza trattenere: chi scorre
     deciso passa oltre. "proximity", mai "mandatory". */
  html { scroll-snap-type:y proximity; }
  /* Senza il margine, la prima sezione si agganciava al bordo alto gia' al
     caricamento e si portava via la testa: marchio e lingue non si vedevano mai. */
  main > section { scroll-snap-align:start; scroll-margin-top:var(--testa); }

  /* L'apertura entra al caricamento, un pezzo dopo l'altro. Animazioni normali,
     capite da qualsiasi browser.
     "affiora" e' "entra" piu' una sfocatura che si mette a fuoco arrivando: la scritta
     si forma invece di comparire gia' nitida. Sta solo sul testo e sulle card, mai sulle
     immagini grandi del telefono: sfocare quelle a ogni fotogramma costa caro e si vede. */
  @keyframes entra { from { opacity:0; translate:0 28px; } }
  @keyframes affiora { from { opacity:0; translate:0 30px; filter:blur(8px); } }
  .apertura h1, .apertura .dentro > p, .apertura .bottone {
    animation:affiora .9s var(--curva) both;
  }
  .apertura .palco { animation:entra .9s var(--curva) both; }
  .apertura .dentro > p { animation-delay:.12s; }
  .apertura .bottone { animation-delay:.24s; }
  .apertura .palco { animation-delay:.4s; }

  @supports (animation-timeline: view()) {
    /* Titoli, righe e card affiorano entrando nello schermo: salgono, schiariscono e
       si mettono a fuoco.
       La corsa e' misurata su "cover", non su "entry". Con "entry" la comparsa durava
       quanto meta' dell'altezza dell'elemento: per una riga di testo sono venti punti di
       scorrimento, spesi sul bordo basso dello schermo dove nessuno guarda. Arrivava in
       posizione di lettura gia' finita, e infatti sembrava che fosse li' da prima e la
       stessero solo tirando su. Con "cover" la corsa si misura sullo schermo: la scritta
       comincia a formarsi quando spunta e finisce quando e' salita a due terzi di pagina,
       cioe' proprio mentre la stai guardando. */
    .capo, .riga, .numero, .onesta, .rimisura, .privacy h2, .privacy .capofila, .punti li, .nota,
    .aperto h2, .aperto p, .due > div, .chiusura h2, .chiusura p, .chiusura .bottone {
      animation:affiora linear both; animation-timeline:view(); animation-range:cover 6% cover 34%;
    }

    /* I due telefoni delle sezioni non stanno fermi: attraversano la loro sezione salendo
       piano e inclinandosi appena, come tenuti in mano. E' meta' del gesto dell'apertura,
       non un secondo giro: qui il telefono accompagna il testo, non e' il protagonista.
       I due si inclinano in verso opposto, come le due cornici che gia' guardano da lati
       diversi: uguali sarebbero la stessa immagine incollata due volte. */
    @keyframes veleggia-a {
      0% { opacity:0; translate:0 52px; rotate:3.5deg; }
      22% { opacity:1; }
      100% { opacity:1; translate:0 -40px; rotate:-2deg; }
    }
    @keyframes veleggia-b {
      0% { opacity:0; translate:0 52px; rotate:-3.5deg; }
      22% { opacity:1; }
      100% { opacity:1; translate:0 -40px; rotate:2deg; }
    }
    .controlla .telefono { animation:veleggia-a linear both; animation-timeline:--controlla; }
    .privacy .telefono { animation:veleggia-b linear both; animation-timeline:--privacy; }

    /* La home scorre dentro il telefono insieme alla sezione. Se la schermata
       e' alta esattamente quanto lo schermo, il calcolo da' zero e non si muove. */
    .controlla { view-timeline:--controlla block; }
    .privacy { view-timeline:--privacy block; }
    @keyframes scorri { to { translate:0 calc(100cqh - 100%); } }
    .controlla .schermo img:first-child { animation:scorri linear both; animation-timeline:--controlla; animation-range:cover 15% cover 85%; }

    /* Il contenuto della card scende da sotto il titolo che l'ha aperta, invece di
       apparire di colpo: viene da dove l'hai chiesto. L'altezza no, quella scatta:
       animarla vuol dire animare il calcolo della pagina, e si vede a scatti. */
    @keyframes apri { from { opacity:0; translate:0 -10px; } }
    details.rimisura[open] > *:not(summary) { animation:apri .3s var(--curva) both; }

    /* La barra si riempie quando il riquadro e' entrato. */
    @keyframes riempi { from { scale:0 1; } }
    .barra::after { transform-origin:left; animation:riempi linear both; animation-timeline:view(); animation-range:entry 40% entry 100%; }
  }
}