/* ============================================================
   TIPO E TOKEN DI MARCA — condivisi dalle quattro pagine legali
   (privacy, cookie, termini, legal-loading). Prima ognuna delle
   quattro portava lo stesso <style> inline, byte per byte: una
   modifica ne dimenticava sempre una. Unica fonte, da qui in giu'.
   ============================================================ */
/* IL 300 SERVE, ANCHE SE NESSUN DOCUMENTO LEGALE LO USA (2026-09-09).
   La riga che chiude la 404 e' la gemella di quella della landing, e la' il
   corpo del documento e' 300. Qui i pesi erano quattro, dal 400 in su: il 300
   dichiarato non trovava una faccia, il browser ripiegava sul 400, e le due
   frasi affiancate mostravano due pesi diversi. Misurato: la stessa riga
   larga 436,73 px sulla landing e 439,64 sulla 404.
   Stesso sottoinsieme latino e stessa provenienza degli altri quattro. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/poppins-300.woff2') format('woff2')}
@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{
  --bg:#F1EEE7;--disp:'Poppins',sans-serif;--ink:#1D1D1D;--dim:#6E6960;
  --violet:#8A1FBE;--magenta:#D9399B;--orange:#EB7458;--yellow:#E8B23A;
  --line:rgba(29,29,29,.12);--corpo:#232019;
  --gutter:clamp(20px,5vw,64px);
  --grad:linear-gradient(115deg,var(--violet) 0%,var(--magenta) 42%,var(--orange) 72%,var(--yellow) 100%);
}
/* nessuna cornice di sistema attorno a niente, su tutto il sito. Il fuoco
   da tastiera resta leggibile perche ogni superficie premibile cambia da
   sola: rilievo, scavo, roll delle lettere. */
:focus,:focus-visible{outline:none}

/* ── i due tondi (notte/lingua) sulla testata di privacy/cookie/termini ──
   legal-loading.html non li usa: le regole restano innocue li', nessuna
   corrisponde a niente su quella pagina. */
.lg-tondi{display:flex;align-items:center;gap:8px;margin-left:auto}
.legal-nav .legal-back{margin-left:14px}
.lg-tondo{
  /* 50px, la statura del bottone "Torna al sito" qui accanto: gli stessi
     numeri della barra del sito (.nav-tondo in index.html), dove i comandi
     hanno tutti la stessa altezza e in fila si leggono come una cosa sola.
     Da qui in giu' e' una copia fedele di .nav-tondo: stesso vetro, stessa
     calamita, stessa pressione. Se cambia li', cambia anche qui. */
  position:relative;width:50px;height:50px;border-radius:50%;border:0;padding:0;
  background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  color:var(--ink);isolation:isolate;
}
/* Niente piu' vetro (2026-08-13), come .nav-tondo in index.html: era liquid
   glass accanto a "Torna al sito", che invece e' una superficie crema in
   rilievo, e a confronto il tondo si leggeva piatto. Ora e' la stessa materia,
   con la ricetta condivisa piu' in basso (.lg-tondo::after nel gruppo del
   rilievo): stessi token, stesso hover, stessa pressione, e di notte cambia da
   solo. Il ::before con la sfocatura e' sparito: sopra c'e' un fondo opaco. */
.lg-tondo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  transition:box-shadow .4s ease,background .4s ease;
}
/* LA CLASSE CHE LA CALAMITA APPICCICA DA SOLA (2026-09-03).
   magnetico() scrive --mx/--my invece del transform, cosi' non cancella
   l'alzata dell'hover ne' la stretta della pressione, che vivono nello stesso
   transform. Chi non ne ha uno suo prende questo.
   ══════════ E STA PRIMA, NON DOPO (2026-09-04) ══════════
   Stava sotto a .lg-tondo, con la nota che "avendo un solo nome di classe non
   scavalca i transform gia' scritti". Sbagliato: anche .lg-tondo ha un solo
   nome di classe, e fra due regole di pari peso vince l'ULTIMA. Cosi' la
   classe del ripiego scavalcava il transform del tondo, che e' l'unico posto
   dove vivono --su e --sc. MISURATO col cursore sopra al tondo: --su valeva
   -1.5px e --sc 0.92 col tasto premuto, e il transform calcolato restava
   matrix(1,0,0,1,-0.06,0) — nessuna alzata, nessuna stretta. I due tondi
   della barra si erano spenti.
   Un ripiego sta PRIMA di tutti: chi ha un transform suo lo scrive dopo e
   vince, chi non ce l'ha si tiene questo. */
.lg-magnetico{transform:translate(var(--mx,0px),var(--my,0px))}
/* ══════════ CHI SI MUOVE STA SUL SUO LIVELLO ══════════
   Il pannello galleggia sopra un velo con backdrop-filter: blur(10px). Un
   elemento che si sposta sopra una sfocatura, se non e' promosso a livello
   suo, obbliga il browser a rifare la sfocatura del fondo a ogni fotogramma
   — e la calamita sposta questi bottoni sessanta volte al secondo. Nel DOM i
   numeri restano giusti (misurati: stessa corsa e stesso assestamento degli
   altri bottoni del sito), ma a schermo il movimento si spezza.
   I bottoni della landing (.btn) e "Torna al sito" (.legal-back) il
   will-change ce l'hanno da sempre: era l'ultima differenza rimasta fra
   questi e quelli. */
.mailpick .mp-opt,.mailpick .mp-copy,.mailpick .mp-app,.mailpick .mp-x,.lg-tondo{
  will-change:transform;
}

/* il transform e' composto da quattro variabili e non scritto a mano in ogni
   stato: --mx e --my sono la calamita (le muove legal-ui.js), --su l'alzata
   del passaggio, --sc la stretta della pressione. Scrivendolo per intero in
   ogni stato, calamita e pressione si cancellerebbero a vicenda. */
/* ══════════ LA CALAMITA DEL TONDO STA NEL TRANSFORM, COME PER TUTTI ══════════
   (2026-09-04) Il tondo era l'unico bottone del sito a ricevere la spinta
   dentro due variabili CSS invece che nel transform, perche' nello stesso
   transform vivono anche l'alzata del passaggio e la stretta della pressione.
   Si pagava due volte:
     · una proprieta' personalizzata non registrata non e' interpolabile,
       quindi la transizione di .32s dichiarata su `transform` non poteva
       lisciare niente e serviva solo a rallentare la lettura del valore;
     · MISURATO sulla landing, spostamento a ogni fotogramma con il cursore a
       venti pixel dal centro: 0,92 · 0,92 · 1,87 · 1,87 · 2,67 · 2,67 —
       il tondo avanzava un fotogramma si' e uno no, a passi doppi, mentre
       "Acquista" accanto faceva 0,58 · 1,14 · 1,62 · 2,09, uno per
       fotogramma. Il gesto si leggeva a scatti.
   Adesso la calamita scrive `transform` come su ogni altro bottone (x/y di
   GSAP), e l'alzata e la stretta prendono le due proprieta' CSS che esistono
   apposta — `translate` e `scale` — che si compongono col transform invece di
   litigarci. La transizione morbida resta su quelle due, dove serve: il
   passaggio del cursore si liscia, la calamita no. */
/* ALZATA E STRETTA SI SPOSTANO SULLA MATERIA, NON SUL BOTTONE (2026-09-04).
   Provate prima sulle proprieta' CSS `translate` e `scale`, che esistono
   apposta per convivere col transform: non sopravvivono, perche' GSAP —
   quando anima x/y — scrive `translate:none;rotate:none;scale:none` per non
   farsi scavalcare, e le azzera tutte e due. Verificato: col cursore sopra,
   computed translate = none.
   Il transform del BOTTONE resta quindi tutto della calamita, e il gesto va
   dove non da' fastidio a nessuno: sulla superficie (::after, che e' il
   vetro con la sua ombra) e sull'icona. Insieme sono tutto quello che si
   vede del tondo, quindi l'occhio legge esattamente lo stesso movimento di
   prima. */
.lg-tondo::after,.lg-tondo > svg{
  transform:translateY(var(--su,0px)) scale(var(--sc,1));
  transition:transform .32s cubic-bezier(.2,.8,.24,1);
}
/* hover e pressione li porta la ricetta condivisa: qui resta solo il gesto,
   il tondo che si alza e si stringe */
.lg-tondo:hover{--su:-1.5px}
.lg-tondo:active{--su:1px;--sc:.92}
/* la pressione deve ARRIVARE: un clic dura un decimo di secondo, e con la
   transizione da passeggio si faceva in tempo a rilasciare prima che
   l'incavo fosse arrivato */
.lg-tondo:active,.lg-tondo:active::after,.lg-tondo:active > svg{transition-duration:.08s}
.lg-tondo:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}
.lg-tondo svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;position:absolute}
.lg-tondo .occ-su,.lg-tondo .occ-giu,.lg-tondo .occ-iride,.lg-tondo .occ-pupilla{
  transform-box:view-box;transform-origin:12px 12px;
  transition:transform .55s cubic-bezier(.3,.8,.24,1),opacity .4s ease;
}
.lg-tondo .occ-iride{stroke-width:1.7}
.lg-tondo .occ-pupilla{fill:currentColor;stroke:none}
/* ══════════ L'OCCHIO SI CHIUDE SU UN ARCO SOLO ══════════
   (2026-09-04) Qui era rimasta la ricetta vecchia: i due semicerchi
   scendevano CIASCUNO verso il centro e si fermavano a 2,2 px da lui,
   schiacciati a un quinto — restava un vuoto di due unita' fra i due e
   l'occhio si chiudeva come una fessura. Sulla barra del sito quella ricetta
   e' stata sostituita il 2026-08-14 e qui non era mai arrivata: due occhi
   uguali che si chiudevano in due modi diversi.
   Essendo occ-su e occ-giu lo STESSO disegno specchiato su y=12 (i due path
   lo confermano punto per punto, e sono identici anche in queste pagine),
   basta specchiare occ-su invece di traslarlo: il segno negativo lo ribalta
   esattamente sopra occ-giu, stessa misura e stesso centro, e le due curve
   coincidono invece di fermarsi vicine. Resta un arco solo.
   E 0,38 e non 0,2: a un quinto l'arco chiuso e' quasi un trattino; cosi' il
   centro sta 2,3 unita' sopra gli estremi su 18,8 di larghezza e si legge
   come un occhio che sorride chiudendosi. Stessi numeri di index.html. */
html.notte .lg-tondo .occ-su{transform:scaleY(-.38)}
html.notte .lg-tondo .occ-giu{transform:scaleY(.38)}
html.notte .lg-tondo .occ-iride{transform:scaleY(.1);opacity:.45}
html.notte .lg-tondo .occ-pupilla{opacity:0;transform:scale(.3)}
/* la lingua non e' piu' un tondo con una sigla che si scambia: sono due
   voci, e si vede subito quale delle due stai leggendo senza doverci passare
   sopra. Stessi numeri di .nav-lingue sulla barra del sito. */
.lg-lingue{display:flex;align-items:center;gap:6px;margin-left:12px}
.lg-voce-lingua{
  border:0;background:none;padding:9px 2px;cursor:pointer;
  font-family:'Poppins',sans-serif;font-size:16px;font-weight:400;letter-spacing:.02em;
  text-transform:uppercase;color:var(--dim);
  transition:color .3s ease,opacity .3s ease;
}
.lg-voce-lingua:hover{color:var(--ink)}
.lg-voce-lingua.voce-viva{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;cursor:default;
}
/* il filo fra le due: sottile come una lettera, non una barra piena */
.lg-lingue-filo{width:1px;height:13px;background:currentColor;opacity:.22;color:var(--ink)}
.lg-voce-lingua:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:4px}

/* la notte: stessa palette del sito */
html.notte{
  --bg:#0C0614;--panel:#1A1024;--ink:#F1EEE7;--dim:#9C96A8;
  --line:rgba(241,238,231,.14);--dark:#24182F;--dark-ink:#F4F1EC;
  /* il corpo del documento: di giorno un nero caldo, di notte un crema
     leggermente spento, cosi' un testo lungo non abbaglia */
  --corpo:#DDD8D0;
}
html.notte .legal-doc,html.notte .legal-block{background:transparent}
html.notte .legal-testata,html.notte .legal-doc h2,html.notte .legal-doc h3{color:var(--ink)}
html.notte .legal-doc b,html.notte .legal-doc strong{color:var(--ink)}
html.notte body{background:var(--bg);color:var(--ink)}
/* ══════════ GIORNO E NOTTE SI DISSOLVONO, NON SCATTANO (2026-09-12) ══════════
   La stessa cura della landing, e prima della 404 (dove stava in linea:
   spostata qui perche' vale per tutte e cinque le pagine di servizio).
   Il tema e' una classe sulla radice che riscrive una ventina di variabili,
   e una variabile non registrata NON e' interpolabile: cambia di colpo, e
   ogni elemento che la legge cambia di colpo con lei — il fondo, il testo,
   il vetro dei bottoni, tutto nello stesso fotogramma. Registrandole come
   <color> il browser sa cosa sono e le puo' far scivolare: basta UNA
   transizione sulla radice, dove la classe le riscrive, e ogni discendente
   che le eredita vede il colore di mezzo. Sei decimi, la durata di tutto il
   resto del sito. */
@property --bg{syntax:'<color>';inherits:true;initial-value:#F1EEE7}
@property --panel{syntax:'<color>';inherits:true;initial-value:#F1EEE7}
@property --ink{syntax:'<color>';inherits:true;initial-value:#1D1D1D}
@property --dim{syntax:'<color>';inherits:true;initial-value:#6E6960}
@property --line{syntax:'<color>';inherits:true;initial-value:rgba(29,29,29,.12)}
@property --dark{syntax:'<color>';inherits:true;initial-value:#1D1D1D}
@property --dark-ink{syntax:'<color>';inherits:true;initial-value:#F1EEE7}
@property --corpo{syntax:'<color>';inherits:true;initial-value:#232019}
@property --sh1{syntax:'<color>';inherits:true;initial-value:rgba(93,86,74,.13)}
@property --sh2{syntax:'<color>';inherits:true;initial-value:rgba(93,86,74,.095)}
@property --sh3{syntax:'<color>';inherits:true;initial-value:rgba(93,86,74,.06)}
@property --hl{syntax:'<color>';inherits:true;initial-value:#FFFFFF}
@property --rim-hi{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,1)}
@property --rim-lo{syntax:'<color>';inherits:true;initial-value:rgba(93,86,74,.11)}
@property --face-hi{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.72)}
@property --face-lo{syntax:'<color>';inherits:true;initial-value:transparent}
@property --contact{syntax:'<color>';inherits:true;initial-value:rgba(93,86,74,.16)}
@property --spec{syntax:'<color>';inherits:true;initial-value:rgba(255,255,255,.55)}
html{
  transition:
    --bg .6s ease,--panel .6s ease,--ink .6s ease,--dim .6s ease,--line .6s ease,
    --dark .6s ease,--dark-ink .6s ease,--corpo .6s ease,
    --sh1 .6s ease,--sh2 .6s ease,--sh3 .6s ease,--hl .6s ease,
    --rim-hi .6s ease,--rim-lo .6s ease,--face-hi .6s ease,--face-lo .6s ease,
    --contact .6s ease,--spec .6s ease;
}
@media (prefers-reduced-motion:reduce){html{transition:none}}

/* ══════════ IL CAMBIO DI LINGUA SI DISSOLVE (2026-09-12) ══════════
   Il copione ribalta i testi sul posto — innerHTML nuovo su ogni nodo con
   data-en — e da fuori si vedeva la pagina cambiare parola in un fotogramma,
   uno stacco secco esattamente come lo era il tema prima della cura sui
   token. Qui la stessa cura: due classi sulla radice che il copione accende
   attorno al ribaltamento (cerca traduciSfumando). Con `traduce` i testi
   scendono a zero in 220ms; a zero il copione li riscrive; poi `traduce`
   se ne va e `tradotto` resta ancora un attimo a portare la risalita.
   Fuori dalla finestra le due classi non ci sono, quindi non c'e' nessuna
   transizione sull'opacita' che possa intralciare chi la anima per conto suo
   (sulla landing le comparse allo scorrimento scrivono l'opacita' in linea
   a ogni fotogramma: una transizione fissa le farebbe inseguire).
   `!important` per la stessa ragione: un valore in linea vincerebbe, e i
   testi con la comparsa non si spegnerebbero.
   `:not([data-en] *)` esclude i nodi annidati (un <b> tradotto dentro un <p>
   tradotto): sfumando tutti e due l'interno arrivava a un quarto. */
html.traduce [data-en]:not([data-en] *),html.tradotto [data-en]:not([data-en] *){transition:opacity .22s ease}
html.tradotto [data-en]:not([data-en] *){transition-duration:.34s}
html.traduce [data-en]:not([data-en] *){opacity:0 !important}
@media (prefers-reduced-motion:reduce){html.traduce [data-en],html.tradotto [data-en]{transition:none}}

/* le tre regole notturne del vetro non servono piu': il buio lo fanno i token
   (html.notte ridefinisce --sh1..--rim-lo piu' in basso), come per il bottone
   "Torna al sito" qui accanto e per ogni superficie del sito */
body{transition:background-color .5s ease,color .5s ease}
@media (prefers-reduced-motion:reduce){
  body,.lg-tondo,.lg-tondo svg *,.lg-voce-lingua{transition:none}
}
/* sotto i 620 scendono a 44, ed e' lo stesso numero a cui scende il
   bottone accanto: la parita' vale a ogni misura */
@media (max-width:620px){.lg-tondo{width:44px;height:44px}}

*{margin:0;padding:0;box-sizing:border-box}
::selection{background:var(--magenta);color:#fff}
/* posto della barra sempre riservato: quando il pannello dei provider blocca
   lo scroll la barra sparisce, e senza questo la pagina scatterebbe di lato di
   15px proprio mentre il pannello si apre */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
/* Poppins e' il carattere di tutto il sito, non piu' i soli titoli */
body{background:var(--bg);color:var(--ink);font-family:'Poppins',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .7s ease}
body.page-ready{opacity:1}
a{color:inherit;text-decoration:none}

/* ============================================================
   MATERIA — stessa del sito (vedi il blocco in index.html).
   Una luce sola: --ux/--uy e' la direzione dell'OMBRA, --ang
   l'angolo del gradiente di faccia. Dieci strati per superficie:
   contatto a blur 0, tre ombre, rimbalzo, smusso in tre passaggi,
   fresnel su tutto il perimetro, piu' speculare e occlusione nel
   background. Nello scavato il rim si inverte e compare la fessura
   all'imbocco.
   --e e' la scala del rilievo: EREDITA, quindi ogni regola che la
   usa deve dichiararla.
   Nomi diversi dal :root di marca in testa al file (--ux/--dx/--sh1
   contro --bg/--ink/--corpo): nessuna delle due proprieta' si tocca,
   coesistono nello stesso selettore senza vincere l'una sull'altra.
   ============================================================ */
:root{
  --ux:.707; --uy:.707; --ang:135;
  --dx:calc(var(--ux) * 1px);
  --dy:calc(var(--uy) * 1px);
  --e:1;
  --sh1:rgba(93,86,74,.13);
  --sh2:rgba(93,86,74,.095);
  --sh3:rgba(93,86,74,.06);
  --hl:#FFFFFF;
  --rim-hi:rgba(255,255,255,1);
  --rim-lo:rgba(93,86,74,.11);
  --face-hi:rgba(255,255,255,.72);
  --face-lo:transparent;
  --contact:rgba(93,86,74,.16);
  --spec:rgba(255,255,255,.55);
}
/* la notte: stessi nomi, altri valori */
html.notte{
  --sh1:rgba(0,0,0,.40);
  --sh2:rgba(0,0,0,.28);
  --sh3:rgba(0,0,0,.18);
  --hl:rgba(255,255,255,.055);
  --rim-hi:rgba(255,255,255,.13);
  --rim-lo:rgba(0,0,0,.42);
  --face-hi:rgba(255,255,255,.055);
  --face-lo:transparent;
  --contact:rgba(0,0,0,.52);
  --spec:rgba(255,255,255,.08);
}

/* Sopra: la riga si appoggia sulla stessa quota della nav della landing. Li
   la catena e: .nav ha 22px sopra, dentro c'e' la barra di vetro con 10px
   suoi. Qui la barra di vetro non c'e', quindi quei valori li assorbe il
   contenitore, 22+10, e la parola cade alla stessa altezza.

   Ai lati invece la riga segue il documento e non piu' la landing. Prima
   usava la clamp della landing, che cresce in modo diverso da quella del
   pannello: il bottone sporgeva di 26px a destra a finestra larga e il logo
   di 30 a sinistra a finestra stretta. Ora tutti e due usano --gutter, lo
   stesso del pannello. A destra il bordo del bottone cade sul bordo del
   pannello; a sinistra si tolgono i 16px di rientro che il logo ha suoi,
   cosi' a cadere sul bordo e' la lettera e non la sua scatola. */
.legal-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:32px var(--gutter) 22px calc(var(--gutter) - 16px);
}
/* stesso logo della nav della landing, proprieta per proprieta: stesso corpo,
   stessa spaziatura, stesso maiuscolo, stesso colore, stessa scatola
   inline-flex con lo stesso padding, e TECH riempito dal gradiente.
   Resta uno <span> e non un link: qui il ritorno al sito ce l'ha gia il
   bottone accanto, due vie per lo stesso posto erano una di troppo. */
.legal-logo{
  font-family:var(--disp,'Poppins',sans-serif);font-size:16px;letter-spacing:.02em;
  color:var(--ink);text-transform:uppercase;
  display:inline-flex;align-items:center;justify-self:start;padding:12px 16px;
}
.legal-logo em{
  font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* stessa taglia del bottone "Acquista" nella nav del sito: 16px/500,
   padding 12px 24px, raggio 6px */
.legal-back{font-size:16px;font-weight:500;line-height:1.65;letter-spacing:.02em;color:var(--ink);border:none;border-radius:999px;
  /* altezza dichiarata invece che dedotta dal rientro: 50px tondi, gli stessi
     dei due comandi accanto. Con padding 12px + interlinea 1.65 veniva 50.4,
     e mezzo pixel di scarto su tre superfici in fila si vede. */
  height:50px;padding:0 24px;background-color:var(--bg);
  --e:1;
  background-image:
    radial-gradient(58% 78% at calc(50% - var(--ux) * 34%) calc(50% - var(--uy) * 42%),
      var(--spec), transparent 62%),
    linear-gradient(calc(var(--ang) * 1deg), var(--face-hi), transparent 46%, var(--face-lo));
  box-shadow:    calc(var(--dx) * 1  * var(--e)) calc(var(--dy) * 1  * var(--e)) calc(1px  * var(--e)) var(--contact),
    calc(var(--dx) * 4  * var(--e)) calc(var(--dy) * 4  * var(--e)) calc(8px  * var(--e)) var(--sh1),
    calc(var(--dx) * 11 * var(--e)) calc(var(--dy) * 11 * var(--e)) calc(22px * var(--e)) var(--sh2),
    calc(var(--dx) * 22 * var(--e)) calc(var(--dy) * 22 * var(--e)) calc(44px * var(--e)) var(--sh3),
    calc(var(--dx) * -7 * var(--e)) calc(var(--dy) * -7 * var(--e)) calc(20px * var(--e)) var(--hl),
    inset calc(var(--dx) *  1)   calc(var(--dy) *  1)     0   var(--rim-hi),
    inset calc(var(--dx) * -1)   calc(var(--dy) * -1)     0   var(--rim-lo);
  /* inline-flex mangia lo spazio fra la freccia e il testo: lo stacco lo
     rimette il gap, lo stesso dei bottoni del sito */
  transition:box-shadow .3s ease;display:inline-flex;align-items:center;gap:12px;will-change:transform}
.legal-back:hover{ --e:1.22 }
/* premuto si scava, come ogni altra superficie premibile del sito */
.legal-back:active{
  --e:1;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
  transition-duration:.08s}
/* su schermo stretto scende a 44px di altezza, che e' la misura a cui
   scendono anche i due tondi accanto (vedi .lg-tondo nelle pagine legali):
   i tre comandi restano della stessa statura a qualunque larghezza */
@media (max-width:620px){.legal-back{font-size:14px;height:44px;padding:0 18px}}

/* le frecce: Poppins nel sottoinsieme latino non le ha, e il browser se le
   prendeva da un carattere di sistema, diverso da macchina a macchina. Quella
   forma piace, quindi qui e' dichiarata invece che subita. Solo il segno: il
   testo accanto resta in Poppins, per questo la freccia sta in un elemento suo. */
.fre,.mp-fre{font-family:Arial,'Helvetica Neue',Helvetica,'Liberation Sans',sans-serif}
/* documento come un unico blocco raised — stessa superficie cream+ombra
   di tutto il resto del sito, non un semplice testo a corpo pagina */
/* scavata invece che raised: contiene i blocchi in rilievo dei paragrafi,
   stessa coppia rilievo-dentro-scavato del cookie banner */
.legal-doc{max-width:none;margin:20px var(--gutter) 48px;
  padding:56px clamp(24px,5vw,64px) 60px;
  border-radius:32px;background-color:var(--bg);
  --e:3;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl)}
/* stesso trattamento del titolo del banner cookie sul sito: Inter, maiuscolo,
   spaziatura stretta, testo riempito dal gradiente della copertina. inline-block
   e non block: il box deve stringersi sulla parola, altrimenti il gradiente si
   spalma su tutta la colonna e sulla scritta arriva una sola tinta. */
.legal-kick{display:inline-block;font-size:15px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:18px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.legal-doc h1{font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-.01em;margin-bottom:16px}
.legal-updated{font-size:13px;color:var(--dim);margin-bottom:56px}
/* sillabazione attiva: e' quello che permette al testo giustificato di
   chiudere le righe senza aprire vuoti fra le parole, ed e' esattamente
   quello che fa il riferimento tipografico scelto. Senza, su righe lunghe e
   con parole italiane lunghe il browser puo' solo allargare gli spazi.
   Il lang="it" della pagina serve al browser per sapere dove spezzare. */
/* spaziatura fra le parole tenuta stretta. Il testo e' giustificato e la
   sillabazione, dichiarata qui sotto, sul browser di Francesco non entra mai
   in funzione perche' Chrome non ha il dizionario italiano installato:
   provato con una colonna da 90px, stessa altezza con e senza. Senza poter
   spezzare le parole al browser resta un solo modo di chiudere le righe,
   allargare gli spazi, e su una riga si arrivava a 21.75px, cinque volte lo
   spazio naturale. Togliendo un decimo di em fra le parole e dodici
   millesimi fra le lettere entra piu' testo per riga e ne resta meno da
   distribuire: lo spazio medio scende a 4.08px e la riga peggiore a 8.10.
   Misurato riga per riga su tutti i paragrafi e gli elenchi delle tre pagine,
   escluse le ultime righe che giustificate non sono. I valori sono tarati sul
   carattere: passando a Poppins il 2026-08-01 quelli di prima, -.06 e -.008,
   lasciavano una riga a 17.86px e sono stati rifatti. */
.legal-doc p{font-size:15.5px;line-height:1.75;color:var(--corpo,#232019);margin-bottom:16px;text-align:justify;
  word-spacing:-.10em;letter-spacing:-.012em;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;overflow-wrap:normal;word-break:normal}
.legal-doc p:last-child{margin-bottom:0}
.legal-doc ul{margin:0 0 16px 22px}
.legal-doc ul:last-child{margin-bottom:0}
.legal-doc li{font-size:15.5px;line-height:1.75;color:var(--corpo,#232019);margin-bottom:8px;text-align:justify;
  word-spacing:-.10em;letter-spacing:-.012em;
  hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;overflow-wrap:normal;word-break:normal}
/* ogni sezione (titolo + contenuto che gli appartiene) è un blocco a sé in
   rilievo dentro la superficie scavata del documento; un titolo seguito
   subito da un sottotitolo (niente contenuto diretto) resta fuori, semplice
   divisore tra i blocchi delle sue sottosezioni */
/* link in arcobaleno. La sottolineatura non puo' ereditare currentColor, che
   qui e' trasparente perche il colore lo fa il gradiente clippato sul testo:
   il suo colore va dichiarato a parte, altrimenti la riga sparisce. */
.legal-doc a.inline{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-decoration:underline;text-decoration-color:var(--magenta);text-underline-offset:2px}
.legal-doc a.inline:hover{text-decoration-color:var(--violet)}
/* ══ SVILUPPATORE (2026-09-12) — l'ultimo blocco, la nota che dice chi ha
   fatto il sito. Numerato e impaginato come gli altri; cambia solo la
   firma: in arcobaleno come ogni link del documento, ma con il peso di un
   nome (600) e una freccia che dice "si esce" — al passaggio la
   sottolineatura vira al viola e la freccia si sposta di un soffio verso
   l'alto a destra, cioe' verso dove porta. */
.legal-doc a.firma{font-weight:600;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-decoration:underline;text-decoration-color:var(--magenta);text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:text-decoration-color .3s ease}
.legal-doc a.firma:hover{text-decoration-color:var(--violet)}
.legal-doc a.firma .fre{display:inline-block;margin-left:.18em;font-weight:500;text-decoration:none;
  transition:transform .35s cubic-bezier(.2,.8,.24,1)}
.legal-doc a.firma:hover .fre{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){.legal-doc a.firma .fre{transition:none}}
.legal-foot{max-width:none;margin:0 var(--gutter) 60px;
  padding:16px clamp(22px,4vw,30px);border-radius:20px;background-color:var(--bg);
  --e:1.5;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;justify-content:center;font-size:13px;color:var(--dim)}
/* stesso roll a lettere della nav del sito: due copie impilate per lettera,
   l'hover sposta la colonna su di un'altezza-lettera rivelando la fucsia */
.legal-foot a{position:relative;color:var(--dim);
  display:inline-flex;align-items:flex-start;overflow:hidden;height:18px}
.legal-foot a .l{display:inline-flex;flex-direction:column;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.legal-foot a .l span{display:block;height:18px;line-height:18px}
.legal-foot a .l2{color:var(--magenta)}
.legal-foot a:hover .l{transform:translateY(-18px)}
.legal-c{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.legal-foot .sep{opacity:.4}
@media (max-width:640px){.legal-doc p,.legal-doc li{text-align:left}}
/* il paragrafo d'apertura vive in mezza colonna, e dentro c'e' l'indirizzo di
   posta: centocinquanta pixel che non si spezzano mai. Quando la colonna
   scende sotto i quattrocentocinquanta, quel blocco non ci sta piu' in coda
   alla riga e se ne va a capo intero: la riga che lascia dietro va allargata a
   forza e i vuoti fra le parole arrivano a 36 pixel, dodici volte lo spazio
   normale. Li' il giustificato ha finito il suo lavoro e si toglie: margine
   destro irregolare, spazi tutti uguali. Sopra i 1280 la colonna torna larga
   abbastanza e il giustificato resta, com'e' stato disegnato. */
/* tre classi e non una: piu' in basso .legal-doc p torna a dichiarare il
   giustificato, e a parita' di peso vince chi sta scritto dopo */
@media (max-width:1279px){.legal-testata .legal-intro p{text-align:left}}

/* ══════════ impaginazione del documento ══════════ */

/* la colonna del testo non e' limitata: il testo corre per tutta la
   larghezza del pannello scavato. Scelta di Francesco: il documento legale
   deve leggersi come un foglio unico, non come una colonna stretta dentro
   una pagina larga. Il contenitore resta perche' e' lui a tenere il rientro
   sotto il numero della sezione. */
.legal-col{max-width:none}

/* 2 · riga di stato sotto il titolo. La data e' il campo che un documento
   legale deve portare per poter essere citato: prima non c'era. */
.legal-stato{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  margin:0 0 52px;font-size:13px;color:var(--dim);
}
.legal-stato .data{color:var(--ink);font-weight:500}

/* 6 · ritmo verticale. Prima fra due sezioni c'erano 22px e fra due paragrafi
   16: quasi lo stesso salto, quindi le sezioni le distingueva solo la linea.
   Ora il rapporto e' quasi cinque a uno e si contano a colpo d'occhio. */
.legal-block{padding-bottom:34px;margin-bottom:34px;
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 0 rgba(29,29,29,.15)}
.legal-block:last-child{box-shadow:none;margin-bottom:0;padding-bottom:0}
.legal-block + .legal-block h2{margin-top:20px}

/* numero fuori dalla colonna del titolo: cosi' i titoli si allineano fra loro
   invece di partire da dove finisce il numero, che e' lungo da I a VIII */
.legal-doc h2{
  display:grid;grid-template-columns:var(--num,52px) 1fr;align-items:baseline;
  margin:0 0 20px;font-size:clamp(21px,2.5vw,27px);line-height:1.25;
  letter-spacing:-.012em;font-weight:600;
}
/* il numero non usa il gradiente del sito cosi come e: quello corre a 115°,
   cioe quasi orizzontale, e un glifo stretto e alto come "I" ne attraversa
   una fetta sottile, quindi si tingeva quasi solo di viola. Qui l'asse e
   ruotato a 160°, quasi verticale: anche il numero piu stretto percorre tutta
   la scala dal viola al giallo. Le fermate sono le stesse della copertina. */
.legal-doc h2 .n{
  /* la scatola si stringe sul segno: da figlia di una griglia si allargava a
     tutti i 52px della colonna ed era alta quanto la riga, quindi il gradiente
     si spalmava su una superficie enorme e sul glifo, stretto e centrato,
     arrivava solo la prima fetta, cioe il viola. */
  justify-self:start;line-height:1;
  font-weight:600;letter-spacing:.01em;
  background:linear-gradient(158deg,var(--violet) 2%,var(--magenta) 30%,var(--orange) 56%,var(--yellow) 82%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.legal-doc h2 + .legal-col{margin-left:var(--num,52px)}
/* un blocco con sottotitolo appartiene alla sezione che lo precede: la sua
   colonna prende lo stesso rientro del titolo di sezione, e il sottotitolo
   non ne prende un secondo. Cosi' sottotitolo e testo cadono sulla stessa
   verticale: prima il titoletto stava 52px piu' a destra del suo testo. */
.legal-block:has(h3) .legal-col{margin-left:var(--num,52px)}
.legal-doc h3{font-size:16.5px;font-weight:600;margin:26px 0 10px}
.legal-doc h3:first-of-type{margin-top:0}
/* testo giustificato, come il riferimento tipografico scelto da Francesco.
   Senza sillabazione i vuoti fra le parole si allargano: text-justify resta
   inter-word, cioe' il browser distribuisce solo gli spazi e non deforma mai
   le lettere. L'ultima riga di ogni paragrafo resta allineata a sinistra. */
.legal-doc p{margin-bottom:14px;text-align:justify;text-justify:inter-word}
.legal-doc li{text-align:justify;text-justify:inter-word}
.legal-doc p.attacco{font-size:17.5px;line-height:1.65;color:var(--ink)}
/* il nome tecnico di quello che il sito salva sul dispositivo: e' una stringa
   esatta, va letta a monospazio come si scrive */
.legal-doc code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:13.5px;color:var(--ink);letter-spacing:normal;word-spacing:normal}


@media (max-width:640px){
  /* su telefono la riga scendeva a 35 caratteri: il rientro del numero sparisce
     e il documento stringe il proprio padding per recuperarne una ventina */
  :root{--num:0px}
  .legal-doc{padding-left:18px;padding-right:18px}
  .legal-doc h2{grid-template-columns:1fr;gap:2px}
  .legal-block:has(h3) .legal-col{margin-left:0}
  .legal-doc h2 .n{font-size:13px}
  .legal-stato{margin-bottom:38px}
}

/* Scheda dei provider di posta e cursore delle pagine legali.
   Un file solo, condiviso dalle quattro pagine: prima viveva in tre copie
   identiche incollate dentro ogni file, e ogni ritocco erano tre modifiche
   con il rischio di dimenticarne una. Le variabili di colore restano nel
   :root di ciascuna pagina, qui si usano e basta. */

/* scelta del provider di posta. Un href="mailto:" passa la palla al programma
   di posta del sistema, che su Windows e' quasi sempre un Outlook mai
   configurato: chi legge la posta dal browser non arriva mai a scrivere. Qui
   al clic si apre questa card e l'utente sceglie DOVE scrivere, ogni volta:
   la scelta non viene mai ricordata, cosi' non si salva nulla sul dispositivo
   e la cookie policy resta vera. Il mailto: resta nell'href come riserva, per
   chi ha JavaScript spento e per il tasto destro.
   Card al centro della finestra con il velo dietro, come il banner cookie del
   sito: mentre e' aperta la pagina non scorre e non si clicca. Due colonne,
   58 e 42: a sinistra chi e' e come lo raggiungi, a destra cosa puoi fare.
   Una sola ombra sulla card, corta e verso il basso — mai la coppia
   scura+bianca del rilievo, che a quella misura si legge come un alone. */
/* dietro alla card la pagina si sfoca invece di scurirsi: il documento resta
   riconoscibile ma illeggibile, e la card non deve combattere con una lastra
   nera per farsi vedere. Il velo di crema serve solo a togliere il contrasto
   residuo del testo, non a oscurare. */
.mailpick-scrim{
  position:fixed;inset:0;z-index:59;
  background:rgba(241,238,231,.24);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .32s ease;
}
.mailpick-scrim.on{opacity:1}
.mailpick{
  position:fixed;left:50%;top:50%;z-index:60;
  width:min(840px,94vw);min-height:min(604px,88vh);
  display:grid;grid-template-columns:1.38fr 1fr;
  border-radius:18px;text-align:justify;
  /* ══════════ LA SCHEDA NON RITAGLIA PIU' I SUOI BOTTONI ══════════
     C'era overflow:hidden, e serviva solo ad arrotondare gli angoli delle due
     colonne. Da quando i bottoni del pannello hanno la calamita del sito —
     spinta proporzionale alla distanza dal centro, nessun tetto, come sulla
     landing — una capsula larga quanto la colonna arriva a 39px di corsa, e
     MISURATO col cursore sul suo bordo destro sforava di 24px oltre la
     scheda: il ritaglio le tagliava di netto la testa tonda.
     Gli angoli se li arrotondano le due colonne, che sono quelle che
     dipingono i bordi; la scheda smette di essere una forbice. */
  overflow:visible;
  box-shadow:0 2px 6px rgba(29,29,29,.10),0 30px 56px -28px rgba(29,29,29,.6);
  /* entra salendo, non ingrandendosi. Con scale la card cresce dal centro,
     quindi il bordo sinistro e la fotografia dentro di esso scivolano verso
     sinistra mentre si apre, e a fine corsa Chrome ridisegna la texture: si
     legge come uno scatto laterale. Muovendo solo in verticale nulla si
     sposta di lato e la larghezza non cambia mai. */
  opacity:0;transform:translate(-50%,calc(-50% + 14px));
  pointer-events:none;transition:opacity .26s ease,transform .34s cubic-bezier(.16,1,.3,1);
}
/* --snap-x/--snap-y sono la frazione di pixel che il centraggio al 50% lascia
   quando la pagina e' larga un numero dispari: la misura e la scrive lo
   script all'apertura (vedi "la card sui pixel interi"). A riposo valgono
   zero, quindi senza script la card sta comunque dove stava. */
.mailpick.on{opacity:1;pointer-events:auto;
  transform:translate(calc(-50% + var(--snap-x,0px)),calc(-50% + var(--snap-y,0px)))}

/* ——— colonna scura ——— */
.mp-left{
  position:relative;isolation:isolate;overflow:hidden;border-radius:18px 0 0 18px;
  background:var(--ink);color:#EDE9E1;display:flex;
}
/* il padding sta sul contenuto, non sul pannello. Un elemento in posizione
   assoluta si misura sul box di PADDING del genitore: tenendo il padding qui
   sopra, la fotografia e il velo restavano larghi 338 invece di 406 e le
   fasce ai quattro bordi restavano nere. */
.mp-left-in{
  position:relative;z-index:4;flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;padding:42px 40px 30px;
}
/* fotografia di fondo. Se il file manca l'immagine si toglie da sola (vedi
   onerror nello script) e resta il nero pieno con la sola luce: la card non
   si rompe mai per un'immagine che non c'e'. */
/* il ritaglio e' misurato, non a occhio: la foto e' 1086x724 e il pannello
   406x452, quindi cover la scala sull'altezza e taglia 272px in larghezza.
   Il volto sta al 42% della foto, e il 30% e' la posizione che lo porta al
   centro del pannello. Il 24% verticale serve solo su schermo stretto, dove
   le colonne si impilano e il taglio diventa orizzontale. */
.mp-photo{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:30% 24%}
/* niente pannello nero sopra la fotografia: si vede la foto e basta. Il velo
   resta solo dove serve a leggere, cioe' in basso sui recapiti, e in cima e'
   quasi nulla. La leggibilita' del titolo la regge l'ombra del testo, non una
   lastra scura che coprirebbe il volto. */
.mp-left::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(29,29,29,.10) 0%,rgba(29,29,29,.16) 34%,
                                    rgba(29,29,29,.52) 72%,rgba(29,29,29,.88) 100%);
}
.mp-title,.mp-sign{text-shadow:0 1px 14px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.5)}
/* nome e firma stanno in fondo, sopra il bordo basso: il margine automatico
   spinge giu tutto il blocco e lascia il volto libero in alto */
.mp-title{
  margin:auto 0 10px;font-size:clamp(28px,4.4vw,42px);line-height:.96;letter-spacing:-.032em;
  font-weight:700;color:#EDE9E1;
}
.mp-sign{
  padding-top:0;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#A69E95;
}

/* ——— chiusura: sta sull'angolo della card, non dentro una colonna, cosi'
   resta al suo posto anche quando in schermo stretto le colonne si impilano.
   Il segno e' un disegno e non il carattere ×, che ha il suo bianco interno
   sbilanciato e non si centra mai davvero dentro un cerchio. ——— */
.mailpick .mp-x{
  /* 34 e non 28: il cerchio si allinea al centro dei glifi del titolo, non
     all'angolo. Col titolo a 26px il suo centro cade a 52px dal bordo del
     pannello, e il cerchio e' alto 36, quindi parte da 34. Erano sei pixel
     piu' in alto e si vedeva. */
  position:absolute;top:34px;right:14px;z-index:2;
  width:36px;height:36px;padding:0;border-radius:50%;background-color:var(--bg);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  --e:1;
  background-image:
    radial-gradient(58% 78% at calc(50% - var(--ux) * 34%) calc(50% - var(--uy) * 42%),
      var(--spec), transparent 62%),
    linear-gradient(calc(var(--ang) * 1deg), var(--face-hi), transparent 46%, var(--face-lo));
  box-shadow:    calc(var(--dx) * 1  * var(--e)) calc(var(--dy) * 1  * var(--e)) calc(1px  * var(--e)) var(--contact),
    calc(var(--dx) * 4  * var(--e)) calc(var(--dy) * 4  * var(--e)) calc(8px  * var(--e)) var(--sh1),
    calc(var(--dx) * 11 * var(--e)) calc(var(--dy) * 11 * var(--e)) calc(22px * var(--e)) var(--sh2),
    calc(var(--dx) * 22 * var(--e)) calc(var(--dy) * 22 * var(--e)) calc(44px * var(--e)) var(--sh3),
    calc(var(--dx) * -7 * var(--e)) calc(var(--dy) * -7 * var(--e)) calc(20px * var(--e)) var(--hl),
    inset calc(var(--dx) *  1)   calc(var(--dy) *  1)     0   var(--rim-hi),
    inset calc(var(--dx) * -1)   calc(var(--dy) * -1)     0   var(--rim-lo);
  /* ══════════ NIENTE TRANSIZIONE SUL TRANSFORM ══════════
     Il metro e' "Torna al sito" (.legal-back qui sopra) e sono i bottoni
     della landing (.btn in index.html): tutti e due dichiarano box-shadow e
     colori, e il transform NO. La rampa della calamita sta tutta nel JS —
     400ms power2.out in entrata, 900ms elastic.out in uscita — e una
     transizione CSS sulla stessa proprieta' e' un secondo filtro che quei
     bottoni non hanno. Serviva quando il transform lo scriveva il mousemove
     di colpo: allora ERA la rampa. */
  transition:box-shadow .35s ease;
}
.mailpick .mp-x svg{display:block}
.mailpick .mp-x:hover,.mailpick .mp-x:focus-visible{ --e:1.22 }
.mailpick .mp-x:active{
  --e:1;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
  transition-duration:.08s}

/* ——— colonna delle scelte ——— */
/* padding alto 22.5 e non 38: e la quota che porta il centro di "Scrivi con"
   esattamente sul centro del cerchio della X, misurato */
/* ══════════ IL MARGINE CHE SERVE ALLA CALAMITA ══════════
   (2026-09-04) Era 14px per lato. La calamita del sito spinge di un quarto
   della distanza dal centro, quindi una capsula larga quanto la colonna
   arriva a un ottavo della propria larghezza — 39px su 311 — e con soli 14px
   di margine usciva dalla scheda.
   Il conto e' esatto e non a occhio: se `w` e' la larghezza del bottone e `g`
   il margine, non esce finche' g >= w/8, e con w + 2g uguale alla colonna
   (353px) il pareggio cade a w = 282, g = 35. Quaranta lascia un filo di
   aria: il bottone si ferma sei pixel prima del bordo, sempre.
   Il margine sta sulla COLONNA e non sui bottoni, cosi' titolo, elenco, nota
   e capsule restano incolonnati come prima — si stringono tutti insieme. */
.mp-right{background:var(--bg);padding:36.5px 40px 28px;display:flex;flex-direction:column;
  border-radius:0 18px 18px 0}
/* stesso trattamento del titoletto delle pagine legali: 15px, peso 500,
   spaziatura .08em, riempito dal gradiente. inline-block e non block: il box
   deve stringersi sulla parola, altrimenti il gradiente si spalma su tutta la
   colonna e sulla scritta arriva una tinta sola.
   Il margine sinistro e' quello del padding delle voci, cosi' la S di
   "Scrivi con" e la G di "Gmail" partono dalla stessa colonna. */
/* width:fit-content e non display:inline-block: .mp-right e' un contenitore
   flex, e un figlio inline-block viene riportato a block, quindi il box
   tornava largo quanto la colonna e sulla scritta arrivava una tinta sola */
.mp-kick{
  width:fit-content;align-self:flex-start;
  font-size:26px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  margin:0 0 22px 14px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.mailpick ul{margin:0;padding:0;list-style:none}
.mailpick button{
  display:block;width:100%;text-align:justify;border:none;background:none;cursor:pointer;
  font-family:inherit;font-weight:400;color:var(--ink);
}
/* righe senza contorno fisso: si accendono al passaggio scavandosi nella
   superficie, lo stesso rilievo del resto delle pagine legali */
.mailpick .mp-opt{
  /* 999px e non 9px: lo scavo dell'hover ha lo stesso raggio dei due bottoni
     in fondo alla scheda. Con un raggio suo la riga accesa si leggeva come un
     elemento di un'altra famiglia. Il rientro resta 14px, che e' quello che
     tiene la G di "Gmail" incolonnata con "Scrivi con". */
  font-size:18px;line-height:1.4;padding:12px 14px;border-radius:999px;
  /* riga a due capi: il nome resta dov'e', la freccia si appoggia al fondo */
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  transition:box-shadow .22s ease,background .22s ease;
}
/* la freccia entra da sinistra mentre si accende: il movimento e' lo stesso
   verso in cui porta, e resta un segno, non un contenuto, quindi sta fuori
   dal nome che legge lo screen reader */
.mailpick .mp-fre{
  /* la misura della sua riga, non una sua: e' un segno dentro un testo da
     18px, e un corpo a parte era un gradino di scala in piu' per niente */
  flex:0 0 auto;font-size:18px;line-height:1;color:var(--dim);
  opacity:0;transform:translateX(-6px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.16,1,.3,1);
}
.mailpick .mp-opt:hover .mp-fre,
.mailpick .mp-opt:focus-visible .mp-fre{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .mailpick .mp-fre{transition:opacity .22s ease;transform:none}
}
.mailpick .mp-opt:hover,.mailpick .mp-opt:focus-visible{
  --e:1;
  background-color:rgba(255,255,255,.34);
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
}
.mailpick .mp-opt:active{ --e:1.9; transition-duration:.08s }

/* ringraziamento: riempie il vuoto fra l'elenco e i bottoni. Ha margine
   automatico come il piede, quindi lo spazio libero si divide fra i due e il
   paragrafo resta a mezz'aria invece di appoggiarsi all'elenco. Rientro pari
   a quello delle voci, cosi' parte dalla stessa colonna. */
/* la riga fra la scelta e il resto: stessa incisione che divide le sezioni
   nelle pagine legali, un filo di luce e sotto uno d'ombra. Il margine
   automatico sopra le fa prendere la sua parte di spazio libero, che con
   quelli del ringraziamento e del piede si divide in tre parti uguali: la
   riga cade a meta' fra l'elenco e il testo invece di appoggiarsi a uno dei
   due. Parte dalla colonna delle voci e arriva dove arrivano i bottoni. */
.mp-riga{
  margin:auto 0 0 14px;height:1px;background:rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(29,29,29,.15);
}
.mp-thanks{
  /* stessa colonna dei bottoni qui sotto: rientro a sinistra come le voci,
     e a destra niente, perche' il piede arriva fino al bordo del pannello.
     Con 14px anche a destra il testo finiva prima dei bottoni. */
  margin:auto 0 0;padding:0 0 0 14px;
  /* 13 e non 14.5: fra 18, 16, 14.5 e 13 ogni salto era dell'undici per
     cento circa, quattro corpi schiacciati in cinque pixel che non leggevano
     come gerarchia. Cosi' la colonna ha tre misure, 26, 18 e 13, con due
     salti quasi uguali. In questa scheda il testo e' una cortesia, non un
     contenuto, e sta bene alla misura dei bottoni. */
  font-size:13px;line-height:1.62;color:var(--dim);
  /* allineato a sinistra e non giustificato: la colonna e' larga una trentina
     di caratteri, e su una misura cosi' stretta giustificare vuol dire aprire
     gli spazi fra le parole fino a farli leggere come colonne bianche. Qui
     conta che il testo si legga, non che il margine destro sia dritto. */
  text-align:left;
}

/* ——— bottoni con lo stesso linguaggio del resto del sito, struttura ed
   effetti: inline-flex, maiuscolo, spaziatura .08em, raggio 10px, l'ombra che
   cresce al passaggio e la superficie che si scava alla pressione. Superficie
   in rilievo per l'azione principale, come .btn-grad e il bottone del banner
   cookie; superficie scavata con testo a gradiente per la secondaria, come
   .btn-ghost. Stessa coppia dei due bottoni dell'hero. ——— */
/* i bottoni vanno dalla S di "Scrivi con" al bordo destro del cerchio della
   X: il rientro sinistro e quello delle voci, e la colonna arriva gia a
   destra fin dove arriva il cerchio */
/* il rientro di 14px non serve piu': lo porta la colonna (vedi .mp-right),
   e sommarli avrebbe spostato le capsule a destra rispetto all'elenco */
.mp-foot{position:relative;display:flex;flex-direction:column;gap:10px;margin:auto 0 0;padding-top:22px}
.mailpick .mp-copy,.mailpick .mp-app{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  width:100%;padding:12px 24px;border-radius:999px;background:var(--bg);
  font-size:16px;font-weight:500;letter-spacing:.02em;text-transform:uppercase;
  /* i <button> non ereditano la line-height del corpo: senza, restano 1px
     piu' bassi del bottone della nav da cui prendono la misura */
  line-height:1.65;
  transition:box-shadow .35s ease,background .35s ease,color .35s ease;
}
.mailpick .mp-copy{
  --e:1;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
}
/* il gradiente sta sulla parola e non sul bottone: ritagliato sul bottone si
   spalma su 311px e sulla scritta, che ne occupa 110, arriva una sola tinta.
   Stessa ragione del width:fit-content su "Scrivi con". */
.mailpick .mp-copy .mp-lab{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* SCAVATA, QUINDI 1.3 E 2.1 (2026-09-04).
   Il sito ha due leggi e non una: le superfici in RILIEVO si alzano a 1.22 e
   da premute si rovesciano; quelle SCAVATE, che non possono risalire,
   affondano — 1.3 col cursore e 2.1 premute (.btn-ghost sulla landing,
   .q4-btn.ghost sulla pagina 404). Questa e' scavata: ha solo ombre inset e
   la scritta nel degrade, come .btn-ghost. Portandola a 1.22/2 col resto dei
   bottoni in rilievo le avevo dato la legge dell'altra famiglia. */
.mailpick .mp-copy:hover,.mailpick .mp-copy:focus-visible{ --e:1.3 }
.mailpick .mp-copy:active{ --e:2.1; transition-duration:.08s }
.mailpick .mp-app{
  color:var(--ink);
  --e:1;
  background-image:
    radial-gradient(58% 78% at calc(50% - var(--ux) * 34%) calc(50% - var(--uy) * 42%),
      var(--spec), transparent 62%),
    linear-gradient(calc(var(--ang) * 1deg), var(--face-hi), transparent 46%, var(--face-lo));
  box-shadow:    calc(var(--dx) * 1  * var(--e)) calc(var(--dy) * 1  * var(--e)) calc(1px  * var(--e)) var(--contact),
    calc(var(--dx) * 4  * var(--e)) calc(var(--dy) * 4  * var(--e)) calc(8px  * var(--e)) var(--sh1),
    calc(var(--dx) * 11 * var(--e)) calc(var(--dy) * 11 * var(--e)) calc(22px * var(--e)) var(--sh2),
    calc(var(--dx) * 22 * var(--e)) calc(var(--dy) * 22 * var(--e)) calc(44px * var(--e)) var(--sh3),
    calc(var(--dx) * -7 * var(--e)) calc(var(--dy) * -7 * var(--e)) calc(20px * var(--e)) var(--hl),
    inset calc(var(--dx) *  1)   calc(var(--dy) *  1)     0   var(--rim-hi),
    inset calc(var(--dx) * -1)   calc(var(--dy) * -1)     0   var(--rim-lo);
}
.mailpick .mp-app:hover,.mailpick .mp-app:focus-visible{ --e:1.22 }
.mailpick .mp-app:active{
  --e:1;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1   * var(--e)) calc(var(--dy) *  1   * var(--e))  0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
  transition-duration:.08s}

/* ——— conferma della copia: un cartellino che sale sopra i bottoni, con la
   spunta che si disegna da sola, come tirata a penna ——— */
.mp-toast{
  position:absolute;left:50%;bottom:calc(100% + 4px);z-index:3;
  display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:9px 15px 9px 12px;border-radius:10px;background:var(--bg);
  font-size:12.5px;font-weight:500;letter-spacing:.02em;color:var(--ink);
  --e:.9;
  box-shadow:    calc(var(--dx) * 1  * var(--e)) calc(var(--dy) * 1  * var(--e)) calc(1px  * var(--e)) var(--contact),
    calc(var(--dx) * 4  * var(--e)) calc(var(--dy) * 4  * var(--e)) calc(8px  * var(--e)) var(--sh1),
    calc(var(--dx) * 11 * var(--e)) calc(var(--dy) * 11 * var(--e)) calc(22px * var(--e)) var(--sh2),
    calc(var(--dx) * 22 * var(--e)) calc(var(--dy) * 22 * var(--e)) calc(44px * var(--e)) var(--sh3),
    calc(var(--dx) * -7 * var(--e)) calc(var(--dy) * -7 * var(--e)) calc(20px * var(--e)) var(--hl),
    inset calc(var(--dx) *  1)   calc(var(--dy) *  1)     0   var(--rim-hi),
    inset calc(var(--dx) * -1)   calc(var(--dy) * -1)     0   var(--rim-lo);
  opacity:0;transform:translate(-50%,7px) scale(.94);pointer-events:none;
  transition:opacity .28s ease,transform .42s cubic-bezier(.16,1,.3,1);
}
.mp-toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.mp-toast svg{display:block;overflow:visible}
/* il tratto e' lungo 26 unita': nascosto tutto, poi scoperto da un capo
   all'altro. La partenza ritardata lascia arrivare prima il cartellino, cosi'
   la penna scrive su qualcosa che c'e' gia'. */
.mp-toast .mp-stroke{
  stroke-dasharray:26;stroke-dashoffset:26;
  transition:stroke-dashoffset .52s cubic-bezier(.5,0,.2,1) .14s;
}
.mp-toast.on .mp-stroke{stroke-dashoffset:0}

/* quando c'e', la nota e' l'ultima riga della scheda e i due angoli di sotto
   sono suoi: senza il ritaglio della scheda se li deve arrotondare lei */
.mailpick .mp-note{grid-column:1/-1;background:var(--bg);border-radius:0 0 18px 18px;
  font-size:12.5px;color:var(--dim);padding:0 26px 18px;margin:-6px 0 0}
/* mai un riquadro di contorno, ne sui bottoni ne sulla card. Il fuoco si
   vede perche' la superficie reagisce come al passaggio del puntatore (vedi
   le regole :focus-visible accanto a :hover), non perche' compare una cornice
   sopra il disegno. Sulla card serve in particolare: prende il fuoco
   all'apertura per la tastiera, e il browser le disegnava intorno la sua
   cornice nera di sistema. */
.mailpick,.mailpick *,.mailpick-scrim{outline:none}

@media (prefers-reduced-motion:reduce){
  .mailpick,.mailpick-scrim,.mailpick *{transition:none}
  .mp-toast .mp-stroke{stroke-dashoffset:0}
}
@media (max-width:680px){
  .mailpick{grid-template-columns:1fr;max-height:88vh;overflow:auto}
  .mp-left-in{padding:26px 22px 20px}
  /* su telefono il pannello ha quasi lo stesso rapporto della foto, quindi
     cover non taglierebbe nulla: qui la slide esce con un ingrandimento
     centrato sul volto */
  .mp-photo{object-position:50% 50%;transform:scale(1.62);transform-origin:80% 8%}
  .mp-title{margin-bottom:18px}
  .mp-sign{padding-top:18px}
  .mp-right{padding:22px 18px 20px}
  .mailpick .mp-note{padding:0 18px 16px}
  /* qui la colonna e' alta quanto il suo contenuto, quindi i margini
     automatici valgono zero e i pezzi si toccherebbero: la riga in rilievo
     finirebbe incollata sia a iCloud sia al testo sotto. Distanze fisse. */
  .mp-riga{margin:26px 0 0 14px}
  .mp-thanks{margin-top:24px}
  .mp-foot{margin-top:26px}
}
/* cursore del sito anche qui: pallino magenta e anello che si allarga su
   tutto cio che si puo premere. Senza GSAP, che queste pagine non caricano. */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:300;pointer-events:none;border-radius:50%}
/* pallino centrale: il gradiente della copertina, lo stesso di tutto il
   sito. Il conico girava i colori attorno al centro e chiudeva il cerchio con
   una cucitura netta fra giallo e viola, che a 9px si vedeva tutta. */
.cursor-dot{width:10px;height:10px;background:var(--grad)}
.cursor-ring{/* anello a pallini veri, come le particelle della newsletter: un cerchio
     disegnato con un tratto tutto trattini di lunghezza zero e capo tondo, che
     e' il modo di ottenere dischetti perfettamente rotondi lungo una
     circonferenza. Il tratto e' colorato dal gradiente, non da una tinta. */
  width:36px;height:36px;border:none;
  transition:width .3s ease,height .3s ease,border-color .3s ease,background .3s ease,opacity .25s ease}
/* i dischetti girano piano in senso orario: la rotazione sta sull'SVG e non
   sul contenitore, perche a quello lo script riscrive la transform a ogni
   fotogramma per farlo seguire il puntatore, e le due si annullerebbero */
.cursor-ring svg{width:100%;height:100%;display:block;opacity:.42;
  transform-origin:50% 50%;animation:curSpin 14s linear infinite}
@keyframes curSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cursor-ring svg{animation:none}}
.cursor-ring.is-hover{width:74px;height:74px}
@media (hover:none){.cursor-dot,.cursor-ring{display:none}}

/* ══════════ testata: blocco in rilievo e paragrafo affiancato ══════════
   Titoletto, titolo e riga di stato entrano in un blocco che sporge dalla
   superficie scavata del documento, e il paragrafo di apertura, che stava
   sotto, gli si affianca. Cosi' la pagina ha un punto d'ingresso invece di
   cominciare col testo, e si recuperano un centinaio di pixel prima della
   prima sezione. Il blocco sta a sinistra, dove l'occhio comincia: a destra
   il titolo del documento arriverebbe dopo il testo che lo introduce.

   Il blocco non sta fermo: parte coprendo il paragrafo e si trascina verso
   sinistra fino alla sua colonna, e il testo passa da appena accennato a
   pieno mentre scorre. La posizione di partenza sta qui e non nello script:
   100cqw e' la larghezza della testata e 100% e' la larghezza del blocco,
   quindi la differenza e' esattamente la corsa. Se la mettesse lo script si
   vedrebbe il blocco nella sua colonna e poi saltare a destra.

   Il verso e' rovesciato rispetto alla prima versione: il paragrafo sta a
   sinistra, il blocco ha casa a destra e parte coprendolo, e si tira verso
   destra. Nel foglio l'unica cosa che cambia sono le colonne assegnate e il
   segno delle traslazioni.

   Le due colonne sono uguali perche' il blocco deve coprire il paragrafo
   tutto: a riposo il suo bordo sinistro sta sul bordo sinistro della testata,
   quindi il destro cade su (larghezza - distacco) / 2, che e' esattamente
   dove finisce la colonna del testo. Con colonne diverse un pezzo di
   paragrafo restava fuori. */
.legal-testata{
  container-type:inline-size;position:relative;
  display:grid;grid-template-columns:minmax(280px,1fr) 1fr;
  /* il distacco fra le due colonne serve anche all'invito per sapere da dove
     nascere, quindi ha un nome invece di essere un numero scritto due volte */
  --gp:clamp(20px,3vw,40px);
  gap:var(--gp);align-items:center;margin-bottom:44px;
  /* stessa altezza sulle tre pagine, presa dalla piu' alta. I tre paragrafi
     d'apertura sono lunghi diversi e guadagnano una riga a larghezze diverse,
     quindi da soli davano tre blocchi di tre altezze. Questa e' la retta che
     sta sopra a tutte e tre da 761px in su, misurata pagina per pagina ogni
     29px: sotto i 761 non serve, il gesto sparisce e le due parti si
     impilano. Rimisurata il 2026-08-01 col passaggio a Poppins, che alza il
     piano da 242 a 246 e cambia la pendenza. Se i testi d'apertura o il
     carattere cambiano, va rimisurata di nuovo. */
  min-height:clamp(246px,711px - 35.1vw,434px);
}
.legal-rilievo{
  background:var(--bg);border-radius:18px;padding:30px 32px 28px;
  /* rilievo direzionale come ogni altra superficie: stacca dal paragrafo
     sotto piu' di quanto staccasse la vecchia coppia simmetrica, perche'
     ha il contatto a blur 0 sotto al bordo, non solo una sfocatura */
  --e:1.6;
  background-image:
    radial-gradient(58% 78% at calc(50% - var(--ux) * 34%) calc(50% - var(--uy) * 42%),
      var(--spec), transparent 62%),
    linear-gradient(calc(var(--ang) * 1deg), var(--face-hi), transparent 46%, var(--face-lo));
  box-shadow:
    calc(var(--dx) * 1  * var(--e)) calc(var(--dy) * 1  * var(--e)) calc(1px  * var(--e)) var(--contact),
    calc(var(--dx) * 4  * var(--e)) calc(var(--dy) * 4  * var(--e)) calc(8px  * var(--e)) var(--sh1),
    calc(var(--dx) * 11 * var(--e)) calc(var(--dy) * 11 * var(--e)) calc(22px * var(--e)) var(--sh2),
    calc(var(--dx) * 22 * var(--e)) calc(var(--dy) * 22 * var(--e)) calc(44px * var(--e)) var(--sh3),
    calc(var(--dx) * -7 * var(--e)) calc(var(--dy) * -7 * var(--e)) calc(20px * var(--e)) var(--hl),
    inset calc(var(--dx) *  1)   calc(var(--dy) *  1)     0   var(--rim-hi),
    inset calc(var(--dx) * -1)   calc(var(--dy) * -1)     0   var(--rim-lo);
  /* sopra al paragrafo e alto quanto la riga, cosi' lo copre davvero;
     pan-y perche' su un tablet il dito deve poter ancora scorrere la pagina
     partendo da qui, e a farlo suo e' solo il movimento orizzontale */
  position:relative;z-index:2;align-self:stretch;grid-column:2;grid-row:1;
  display:flex;flex-direction:column;justify-content:center;
  --casa:calc(100% - 100cqw);
  transform:translateX(var(--casa));
  cursor:grab;user-select:none;-webkit-user-select:none;
  touch-action:pan-y;will-change:transform;
  /* il blocco si muove insieme alla scritta, non dopo: stessa partenza,
     stessa curva, stesso arrivo al 48, stessa sosta fino al 70. Cosi' i due
     pezzi sono un gesto solo, qualcosa che viene tirato fuori, invece di due
     avvisi separati. Vale finche' non lo si tocca: dopo il primo gesto il
     suggerimento ha gia' fatto il suo, e la posizione la scrive lo script. */
  animation:legRimbalzo 3.6s infinite;
  animation-play-state:paused;
}
.legal-rilievo.mosso{animation:none}
@keyframes legRimbalzo{
  0%  {transform:translateX(var(--casa));animation-timing-function:cubic-bezier(.14,.74,.26,1)}
  /* il 48 e' il momento in cui la scritta arriva: li' il blocco ha finito la
     sua parte e rientra subito, non aspetta che la scritta sparisca. Il
     rientro tiene il resto della sosta, cosi' e' un ritorno e non uno scatto */
  48% {transform:translateX(calc(var(--casa) + 40px));animation-timing-function:cubic-bezier(.4,0,.3,1)}
  70%,100%{transform:translateX(var(--casa))}
}
.legal-rilievo.preso{cursor:grabbing; --e:2.3}
/* il ritorno alla posizione piu' vicina quando si lascia a meta' */
.legal-rilievo.molla{transition:transform .52s cubic-bezier(.2,.9,.24,1)}

/* ——— il rilievo di notte ———
   Prima qui c'era un secondo sistema di ombre, scritto a mano, perche' di
   giorno il blocco usava una coppia simmetrica scura su quattro lati e di
   notte quella stessa coppia spariva su fondo scuro. Ora le ombre arrivano
   dai token, che si ribaltano da soli: resta solo il tono del piano, che si
   alza di un gradino sul fondo (--panel invece di --bg). */
html.notte .legal-rilievo{ background-color:var(--panel) }
/* anche i cinque pallini della presa erano neri su nero */
html.notte .legal-presa circle{fill:rgba(241,238,231,.42)}
/* align-self obbligatorio: dentro una colonna flessibile il titoletto viene
   trasformato in blocco e si allarga a tutta la scatola, quindi il gradiente
   si spalma su 420px e sulla parola, lunga la meta', arriva solo la prima
   fetta, cioe' viola e fucsia. Cosi' la scatola torna a stringersi sul testo
   e l'arcobaleno ci passa tutto. */
.legal-rilievo .legal-kick{margin-bottom:16px;align-self:flex-start}
/* il peso 700 e' voluto, deciso da Francesco: qui il titolo del documento e'
   piu' grasso del resto della gerarchia, che sta a 600. Non e' il grassetto
   di default rimasto per distrazione, non riportarlo a 600. */
.legal-rilievo h1{font-size:clamp(29px,3.6vw,42px);line-height:1.04;letter-spacing:-.015em;margin-bottom:14px;font-weight:700}
/* dentro al blocco la riga di stato va in colonna: in fila sfonderebbe */
/* le tre righe di stato erano scure quanto il testo dei paragrafi: il colore
   grigio che la loro regola dichiara non arrivava mai, perche' .legal-doc p
   e' piu' specifica e vinceva. Qui il colore lo si dice con abbastanza forza
   da tenere, e cosi' cade anche la trasparenza che serviva a smorzarle: era
   un cerotto su una regola che non funzionava. Inter dichiarato per esteso,
   anche se in queste pagine e' gia' il carattere di tutto. */
.legal-rilievo .legal-stato{
  display:flex;flex-direction:column;gap:5px;margin:0;
  font-family:'Poppins',sans-serif;color:var(--dim);
}
/* le tre righe sono uguali fra loro: stesso corpo, stesso peso, stesso
   colore. La data non si distingue piu' ne' col nero ne' col peso, e' una
   riga di servizio come le altre due. La regola generale la vorrebbe in
   nero e a 500, quindi qui va detto per esteso. */
.legal-rilievo .legal-stato .data{color:var(--dim);font-weight:400}
.legal-intro{opacity:.14;transition:opacity .18s linear;grid-column:1;grid-row:1}
.legal-intro p{margin:0}

/* il segno che si puo' prendere, sul fianco verso cui si tira.
   Un disegno solo e non cinque scatole: da elementi separati ognuno cadeva
   su un mezzo pixel diverso e il browser li ammorbidiva in modo diverso,
   quindi i pallini uscivano di grandezze e forme leggermente diverse. Qui
   le cinque circonferenze stanno nello stesso disegno, a coordinate intere,
   e ricevono tutte lo stesso trattamento: identiche e tonde. */
.legal-presa{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:4px;height:32px;line-height:0}
.legal-presa svg{display:block;width:4px;height:32px}
.legal-presa circle{fill:rgba(29,29,29,.28)}

/* l'invito sta nella cella del blocco, cioe' esattamente dove il blocco
   andra' a fermarsi: dice dove tirare e si spegne man mano che il blocco gli
   arriva sopra. Posizionato sulla sua area di griglia, non su un calcolo:
   cosi' resta incollato alla colonna a qualsiasi larghezza. */
.legal-invito{
  /* le due linee vanno dette tutte e due: con il solo inizio, la fine resta
     "auto" e per un elemento assoluto auto e' il bordo del contenitore, non
     la fine della colonna, e l'invito si allargava su tutta la testata */
  position:absolute;grid-column:2/3;grid-row:1/2;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;transition:opacity .18s linear;
}
/* il gesto mimato. Due accorgimenti, entrambi contro gli scatti.
   Primo: chi si muove non e' la parola colorata. Un testo con il gradiente
   ritagliato sopra va ridisegnato a ogni fotogramma se si sposta. Qui il
   guscio .moto porta transform e opacita' e sale su un livello suo, la
   parola dentro viene disegnata una volta sola.
   Secondo: la corsa e la dissolvenza sono DUE animazioni separate. Con una
   sola, i fotogrammi dell'opacita' spezzavano anche la corsa in tre tratti,
   ognuno con la sua andatura, e la velocita' cambiava di colpo a ogni
   passaggio. Cosi' lo spostamento e' un intervallo unico da 0 a 70 con una
   sola curva, e la dissolvenza corre a parte in modo lineare.

   La scritta non compare dal niente: nasce da sotto il blocco in rilievo,
   sbuca da dietro il suo fianco destro e si ferma al centro della colonna
   vuota. Il punto di partenza e' calcolato e non a occhio: dal centro della
   colonna bisogna tornare indietro di meta' scritta, piu' meta' colonna,
   piu' il distacco, e 24px di margine perche' nemmeno il bordo sfumato
   spunti da dietro il blocco. Meta' scritta e' 50%, che in una traslazione
   e' meta' della larghezza della scritta stessa; meta' colonna e' un quarto
   di quello che resta della testata tolto il distacco.

   La curva parte veloce e si spegne lunga verso la fine: e' il gesto di
   qualcosa che viene tirato fuori e poi lasciato andare. */
.legal-invito .moto{
  display:inline-flex;
  will-change:transform,opacity;backface-visibility:hidden;
  --nasce:calc(-50% - var(--gp) - (100cqw - var(--gp)) / 4 - 16px);
  animation:legScorri 3.6s cubic-bezier(.14,.74,.26,1) infinite,
            legAppari 3.6s linear infinite;
  /* ferme finche' i caratteri non sono arrivati. La scritta e' grande quasi
     cinquecento pixel: se parte mentre Inter sta ancora arrivando, quando
     arriva il testo va ridisegnato in corsa e il primo giro si vede a scatti.
     Lo sblocco lo mette lo script su <html> quando document.fonts e' pronto,
     con una scadenza di sicurezza. Vale anche per la spinta del blocco. */
  animation-play-state:paused;
}
html.caratteri-pronti .legal-invito .moto,
html.caratteri-pronti .legal-rilievo{animation-play-state:running}
/* dopo il primo gesto la scritta smette di correre e resta al suo posto: e'
   lo script a spegnerla mentre il blocco le arriva sopra, e una scritta che
   nel frattempo continuasse a tornare sotto passerebbe sopra al paragrafo
   appena scoperto */
.legal-rilievo.mosso ~ .legal-invito .moto{animation:none;transform:none}
/* solo la parola, senza segno: la direzione la dice gia' il movimento, che
   nasce da sotto il blocco e corre verso destra, e a questo corpo una freccia
   accanto era un secondo modo di dire la stessa cosa.
   Peso 400 e non 600: a questo corpo il 600 chiude i contrografismi e la
   parola pesa piu' del titolo del documento, che e' il vero contenuto. */
.legal-invito .parola{
  display:inline-block;line-height:.98;white-space:nowrap;
  /* il coefficiente per vw non e' libero: a inizio giro la scritta deve
     starci tutta dietro al blocco, e il blocco e' largo quanto la colonna,
     quindi la scritta deve essere piu' stretta della colonna di almeno il
     margine di sicurezza. Con 6.6vw sotto i 1200px non lo era piu' e a 761
     un pezzo di lettera spuntava fuori dal foglio a sinistra. Con 6.3 la
     condizione e' verificata a tutte le larghezze, e i 92px si raggiungono
     comunque da 1460px in su. */
  font-size:clamp(46px,6.3vw,92px);font-weight:400;letter-spacing:.03em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* la corsa finisce al 48 e non al 70: con la frenata cosi' lunga gli ultimi
   pixel duravano quasi un secondo e la scritta sembrava gia' ferma. Cosi'
   invece arriva, e i due decimi che restano sono una sosta vera, in cui la
   parola sta ferma e si legge. */
@keyframes legScorri{
  /* si ferma al centro esatto della colonna e non 18px oltre: con la scritta
     piccola quei 18px non si vedevano, a questo corpo la portavano fuori
     dalla colonna sotto i 1280px */
  0%      {transform:translate3d(var(--nasce),0,0)}
  48%     {transform:translate3d(0,0,0)}
  70%     {transform:translate3d(0,0,0)}
  70.01%  {transform:translate3d(var(--nasce),0,0)}
  100%    {transform:translate3d(var(--nasce),0,0)}
}
/* niente dissolvenza in entrata: a nasconderla all'inizio ci pensa il blocco,
   che le sta davanti. La dissolvenza serve solo per andarsene, prima che la
   scritta torni di scatto al suo punto di partenza. */
@keyframes legAppari{
  0%   {opacity:1}
  13%  {opacity:1}
  62%  {opacity:1}
  70%  {opacity:0}
  100% {opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .legal-invito .moto{animation:none;transform:none}
  .legal-invito .moto{opacity:.9}
  .legal-rilievo{animation:none}
  .legal-rilievo.molla{transition:none}
}

/* sotto i 760px il gesto sparisce e le due parti si impilano: il paragrafo
   torna leggibile e il blocco torna nel flusso, sopra come prima */
@media (max-width:760px){
  .legal-testata{grid-template-columns:1fr;gap:22px;margin-bottom:34px;min-height:0}
  /* colonna e riga vanno rimesse ad auto: con grid-column:2 su una griglia a
     una colonna il blocco se ne inventerebbe una seconda */
  .legal-rilievo{padding:24px 22px 22px;transform:none!important;animation:none;
    cursor:default;align-self:auto;touch-action:auto;grid-column:auto;grid-row:auto}
  .legal-intro{opacity:1!important;grid-column:auto;grid-row:auto}
  .legal-invito,.legal-presa{display:none}
}

/* ---------- grana: solo sulle pillole ----------
   Su un pannello grande un velo al 26% non si legge e costa un layer
   in piu' da comporre; sulle capsule e' cio' che toglie l'aspetto di
   plastica renderizzata. */
/* La grana e' stata tolta: un velo di rumore in overlay racconta il
   materiale su una superficie scura, ma su crema chiara e' letteralmente
   sporcizia — era la causa principale dell'aria unta sui bottoni.
   Resta solo `position:relative` su chi ne aveva bisogno per altri motivi. */
.legal-back,.mailpick .mp-app{
  position:relative;
}

/* ═══════════ i bordi dei bottoni in rilievo: scuri su TUTTI e quattro ═══
   Gemella della regola in index.html (cerca "tutti i bordi scuri"), stessa
   richiesta di Francesco del 2026-08-10: niente luce in alto a sinistra sui
   bottoni, solo ombra, come sul lato destro e in basso.
   Si cambiano i token e non le ricette, cosi' vale anche di notte. */
.legal-back,.mailpick .mp-x,.mailpick .mp-app,.lg-tondo::after{
  --hl:var(--sh2);
  --rim-hi:var(--rim-lo);
}

/* ═══════════ il tondo dell'occhio: stessa materia di "Torna al sito" ═══
   La faccia e' ::after (inset:0, raggio ereditato), non l'elemento: e' lui a
   portare il transform della calamita, e scrivere la superficie li' avrebbe
   voluto dire spostarla insieme al gesto. Ricetta identica a .legal-back, che
   e' la gemella di .btn-grad/.nav-cta sul sito. */
.lg-tondo::after{
  background-color:var(--bg);
  --e:1;
  background-image:
    radial-gradient(58% 78% at calc(50% - var(--ux) * 34%) calc(50% - var(--uy) * 42%),
      var(--spec), transparent 62%),
    linear-gradient(calc(var(--ang) * 1deg), var(--face-hi), transparent 46%, var(--face-lo));
  box-shadow:
    calc(var(--dx) * 1  * var(--e)) calc(var(--dy) * 1  * var(--e)) calc(1px  * var(--e)) var(--contact),
    calc(var(--dx) * 4  * var(--e)) calc(var(--dy) * 4  * var(--e)) calc(8px  * var(--e)) var(--sh1),
    calc(var(--dx) * 11 * var(--e)) calc(var(--dy) * 11 * var(--e)) calc(22px * var(--e)) var(--sh2),
    calc(var(--dx) * 22 * var(--e)) calc(var(--dy) * 22 * var(--e)) calc(44px * var(--e)) var(--sh3),
    calc(var(--dx) * -7 * var(--e)) calc(var(--dy) * -7 * var(--e)) calc(20px * var(--e)) var(--hl),
    inset calc(var(--dx) *  1)   calc(var(--dy) *  1)     0   var(--rim-hi),
    inset calc(var(--dx) * -1)   calc(var(--dy) * -1)     0   var(--rim-lo);
}
.lg-tondo:hover::after{ --e:1.22 }
/* premuto si rovescia: le ombre passano da fuori a dentro */
.lg-tondo:active::after{
  --e:1;
  background-image:
    linear-gradient(calc(var(--ang) * 1deg + 180deg), var(--face-hi), transparent 50%, var(--face-lo));
  box-shadow:
    inset calc(var(--dx) *  1)              calc(var(--dy) *  1)               0                    var(--rim-lo),
    inset calc(var(--dx) *  3   * var(--e)) calc(var(--dy) *  3   * var(--e)) calc(5px  * var(--e)) var(--sh1),
    inset calc(var(--dx) *  9   * var(--e)) calc(var(--dy) *  9   * var(--e)) calc(17px * var(--e)) var(--sh2),
    inset calc(var(--dx) * 18   * var(--e)) calc(var(--dy) * 18   * var(--e)) calc(32px * var(--e)) var(--sh3),
    inset calc(var(--dx) * -1)              calc(var(--dy) * -1)               0                    var(--rim-hi),
    inset calc(var(--dx) * -5   * var(--e)) calc(var(--dy) * -5   * var(--e)) calc(14px * var(--e)) var(--hl);
  transition-duration:.08s}

/* ═══════════ gli scavati chiari: meno nero ═══════════
   "Sembrano sporchi": su una superficie crema un incavo troppo carico si
   legge come sporco secco nell'angolo, non come profondita'. Le tinte
   scendono al 62%, la luce sulla parete opposta resta dov'e'. */
.legal-testata,.mailpick .mp-opt,.mailpick .mp-copy{
  --sh1:color-mix(in srgb,rgba(93,86,74,.13) 62%,transparent);
  --sh2:color-mix(in srgb,rgba(93,86,74,.095) 62%,transparent);
  --sh3:color-mix(in srgb,rgba(93,86,74,.06) 62%,transparent);
  --contact:color-mix(in srgb,rgba(93,86,74,.16) 62%,transparent);
  --rim-lo:color-mix(in srgb,rgba(93,86,74,.11) 62%,transparent);
}
html.notte .legal-testata,html.notte .mailpick .mp-opt,html.notte .mailpick .mp-copy{
  --sh1:color-mix(in srgb,rgba(0,0,0,.40) 62%,transparent);
  --sh2:color-mix(in srgb,rgba(0,0,0,.28) 62%,transparent);
  --sh3:color-mix(in srgb,rgba(0,0,0,.18) 62%,transparent);
  --contact:color-mix(in srgb,rgba(0,0,0,.52) 62%,transparent);
  --rim-lo:color-mix(in srgb,rgba(0,0,0,.42) 62%,transparent);
}