/* Performance Universe — landing 2026
   Token e classi della bozza. I valori scuri compaiono solo dentro ai mockup del prodotto. */

:root{
      --bg:#FFFFFF; --bg2:#F2F2F2; --panel:#FFFFFF; --panel2:#F7F8FB;
      --line:#DDE1EC; --line2:#C8CFDE;
      --ink:#1D1D1D; --ink2:#5A6070; --ink3:#656C7D;
      --volt:#0B2B8C; --volt2:#021859; --blue:#7192F4; --red:#D92D1C;
      /* I tre blu di hover erano tre letterali sparsi. Restano tre valori
         diversi — un link su bianco, un bottone pieno e un bollino su un
         fotogramma scuro non si scuriscono allo stesso modo — ma adesso
         hanno un nome. `--blue2` era un doppione esatto di `--volt` e non
         lo usava nessuno: tolto. */
      --volt-hover:#082270; --blue-hover:#1F3A9E;
      --gut:40px;
      --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
    }
*{box-sizing:border-box}
body{margin:0;background:#FFFFFF}
a{color:var(--volt);text-decoration:none}
a:hover{color:var(--volt2)}
/* overflow-x:clip e non overflow:hidden. Taglia lo sbordo laterale dei
   mockup allo stesso modo, ma NON crea un contenitore di scorrimento:
   hidden lo crea, e cosi' facendo spegne position:sticky in tutta la
   pagina. Serve alla sezione del flusso, che sta agganciata mentre scorri.
   Nota storica: quando c'erano i salti avevo sospettato questa riga e l'avevo
   rimessa a hidden, ma la causa vera era pinType:'transform'. Qui lo sticky
   e' nativo, la posizione la calcola il browser e non puo' restare indietro. */
/* --- dichiarazioni di base ---
   `color-scheme: only light` anche qui, non solo nel <meta>: senza, i temi
   scuri forzati di Samsung Internet e Chrome Android ribaltano i colori, e
   i mockup — che sono gia' scuri — diventano illeggibili.
   `text-size-adjust`: su iOS in orizzontale Safari ingrandisce il testo dei
   blocchi larghi per conto suo, e qui le misure sono tarate al pixel. */
html{color-scheme:only light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Si legge solo con un lettore di schermo. Serve alle didascalie dei mockup:
   i mockup sono `aria-hidden`, perche' letti riga per riga erano 183
   frammenti di interfaccia finta («60 kg», «Stacco rumeno 3 x 10») in mezzo
   al discorso. Al loro posto va una frase che dice cosa mostrano. */
.solo-lettori{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root{color-scheme:only light}

/* Safari iOS < 16 non ha le container query: `--fit` resta 1, la hero non
   scala e il telefono sborda dalla colonna. Qui una scala a gradini per
   larghezza di viewport, che e' la stessa cosa a meno dei margini.
   E senza `overflow-x:clip` (stesso Safari) serve `hidden` sul body, se no
   quello che sborda si porta dietro lo scorrimento laterale. */
@supports not (width:1cqw){
  /* I gradini non sono a occhio: sono la scala misurata sul browser vero
     nel punto PIU' STRETTO di ogni fascia, arrotondata in giu'. Cosi' non
     sborda mai; in cambio, all'estremo largo della fascia, il mockup e' un
     po' piu' piccolo del necessario. Su un browser con le container query
     questo blocco non esiste. */
  .fitbox>.fitin{--fit:1}
  @media (max-width:760px){ .hero-dev>.fitin{--fit:.88} }
  @media (max-width:640px){ .hero-dev>.fitin{--fit:.72} }
  @media (max-width:520px){ .hero-dev>.fitin{--fit:.58} .app-dev>.fitin{--fit:.85} }
  @media (max-width:430px){ .hero-dev>.fitin{--fit:.54} .app-dev>.fitin{--fit:.79} }
  @media (max-width:400px){ .hero-dev>.fitin{--fit:.45} .app-dev>.fitin{--fit:.66} }
  @media (max-width:340px){ .hero-dev>.fitin{--fit:.36} .app-dev>.fitin{--fit:.52} }
}
@supports not (overflow-x:clip){ body{overflow-x:hidden} }

.pg{width:100%;background:var(--bg);color:var(--ink);font-family:'Barlow','Helvetica Neue',Arial,sans-serif;font-size:clamp(.9688rem, .9rem + .1875vw,1.0625rem);line-height:1.55;position:relative;overflow-x:clip}
.pg::after{content:'';position:absolute;inset:0;background-image:var(--grain);background-size:160px 160px;opacity:.03;pointer-events:none;z-index:60;mix-blend-mode:multiply}
.wrap{width:min(1180px, 100% - var(--gut)*2);margin:0 auto;position:relative;z-index:2}
.sec{padding:clamp(56px, .3rem + 7.2vw, 104px) 0;position:relative}
.d{font-family:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;font-variation-settings:'wdth' 84;font-weight:800;text-transform:uppercase;letter-spacing:-.005em;line-height:.94;margin:0;overflow-wrap:break-word}
/* Il tetto scende da 66 a 56 perche' e' cambiato il titolo: adesso il primo
   titolo dice cos'e' la piattaforma e per chi, ed e' una riga lunga. A 66
   andava a sei righe con «PERSONAL / TRAINER» spezzato; a 56 sta in cinque
   e il blocco torna alto quanto prima. */
.h1{font-size:clamp(2rem, .3rem + 4.25vw,3.5rem)}
.h2{font-size:clamp(1.75rem, .45rem + 3.25vw,3.375rem)}
.h3{font-size:clamp(1.3125rem, .97rem + .875vw,1.75rem);line-height:1.05}
.h4{font-size:clamp(1.0625rem, .92rem + .375vw,1.25rem);letter-spacing:.01em}
.volt{color:var(--volt)}
.eyebrow{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:14px;color:var(--volt);margin:0 0 18px}
.lead{color:var(--ink2);font-size:clamp(1.0312rem, .91rem + .3125vw,1.1875rem);line-height:1.6;margin:0;text-wrap:pretty}
.mut{color:var(--ink3);font-size:15px;margin:0}
/* --- Le superfici che disegna il browser ---
   Selezione, barra di scorrimento e anello di fuoco arrivano coi colori di
   default del sistema, che non appartengono a nessun progetto. Qui prendono
   quelli del marchio: e' la differenza fra una pagina costruita e una
   assemblata, e non la nota nessuno finche' non manca. */
::selection{background:var(--volt);color:#FFFFFF}
/* sui fondi scuri e blu la selezione si inverte, se no il testo bianco
   sparisce dentro una selezione blu */
.cta ::selection,.ft ::selection,.numsbar ::selection{background:#FFFFFF;color:var(--volt)}
.scr ::selection,.prev ::selection{background:#7192F4;color:#010326}
html{scrollbar-color:#AEB7CC #F2F2F2}

/* L'anello di fuoco: `:where()` non pesa niente in specificita', quindi le
   sette regole per componente che stanno piu' sotto continuano a vincere
   dove hanno un colore o uno scostamento loro. Senza questa, sei CTA su
   sei — cioe' il bersaglio principale della pagina — non davano nessun
   segno alla tastiera. */
:where(a,button,summary,label,[tabindex]):focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.cta :where(a,button):focus-visible,.ft :where(a,button):focus-visible{outline-color:#FFFFFF}
/* la casella del toggle e' fuori schermo: l'anello va sull'interruttore */
.pu-bill:focus-visible ~ .bswitch{outline:2px solid var(--volt);outline-offset:3px}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:10px 30px;text-align:center;border-radius:3px;background:var(--volt);color:#FFFFFF;font-family:'Archivo','Arial Narrow',sans-serif;font-variation-settings:'wdth' 88;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:15px;border:none;cursor:pointer}
/* `line-height:normal` e' quello che un <button> ha di suo. Dal 14/9 le CTA
   sono <a> (portano ai piani e al carrello) e un link eredita l'1,55 della
   pagina: dove il testo va a capo, a 1000px nei piani, il bottone cresceva
   da 58 a 69px. Cosi' resta identico a prima. */
.btn{transition:background .14s ease;line-height:normal}
.btn:hover{background:var(--volt-hover);color:#FFFFFF}
.btn-g{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn-g{transition:background .14s ease, border-color .14s ease}
.btn-g:hover{background:#EDEFF5;color:var(--ink)}
/* min-height e non height ovunque: un'etichetta che va a capo deve far
   crescere il bottone, non uscirgli dal fondo. */
.btn-s{min-height:44px;padding:6px 20px;font-size:13px}
/* La CTA della fascia finale: bianca su blu. Era 12 dichiarazioni in linea
   che ripetevano `.btn` cambiandone due. */
.btn-w{background:#FFFFFF;color:var(--volt);min-height:64px;width:100%;font-size:16px}
.btn-w:hover{background:#EDEFF5;color:var(--volt)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px rgba(1,3,38,.04),0 10px 28px rgba(1,3,38,.05)}
.chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border:1px solid var(--line2);border-radius:2px;font-family:'Barlow Condensed',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--ink2)}
.rule{height:1px;background:var(--line);border:0;margin:0}
.ico{display:block;flex:0 0 auto}
.kicker{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--ink3)}
.num{font-family:'Archivo','Arial Narrow',sans-serif;font-variation-settings:'wdth' 76;font-weight:900;line-height:.9;font-variant-numeric:tabular-nums}
/* --- toggle prezzi: solo CSS, nessuno script --- */
/* Nascosti con la tecnica del ritaglio di 1px e non a 0x0: una casella a
   misura zero alcuni lettori di schermo la saltano. Niente `top`/`left`,
   cosi' l'assoluto resta nella posizione statica e il fuoco non manda la
   pagina da un'altra parte. */
.pu-bill{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* `--bw` esiste perche' la larghezza dell'opzione era scritta tre volte:
   sull'opzione, sul cursore e dentro la translate che lo sposta. A 320 la
   levetta misurava 328 in un contenitore da 284 e «Annuale −16%» finiva
   tagliata fuori — ma stringerla voleva dire ricordarsi di cambiare tre
   numeri all'unisono. Ora e' uno. Il meccanismo non cambia di una riga:
   resta la casella di spunta, restano le due etichette. */
.bswitch{--bw:158px;display:inline-flex;position:relative;padding:5px;border:1px solid var(--line2);border-radius:3px;background:var(--panel)}
.bopt{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;height:42px;width:var(--bw);font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--ink3);cursor:pointer;-webkit-user-select:none;user-select:none}
.bknob{position:absolute;top:5px;left:5px;height:42px;width:var(--bw);background:var(--volt);border-radius:2px;z-index:1;transition:transform .2s ease}
.bopt-m{color:#FFFFFF}
#pu-billing:checked ~ .bswitch .bknob{transform:translateX(var(--bw))}
#pu-billing:checked ~ .bswitch .bopt-m{color:var(--ink3)}
#pu-billing:checked ~ .bswitch .bopt-a{color:#FFFFFF}
.a-only{display:none}
#pu-billing:checked ~ .plans .a-only{display:revert}
#pu-billing:checked ~ .plans .m-only{display:none}
#pu-billing:checked ~ .plans .save-tag{display:flex}
/* Il riquadro del risparmio: stava in linea, identico tre volte a meno
   dell'opacita' del fondo. `display:none` di base, lo accende il radio
   annuale (vedi sopra). */
.save-tag{display:none;align-items:center;gap:7px;margin-top:4px;min-height:30px;padding:3px 12px;width:fit-content;border-radius:2px;background:rgba(11,43,140,.10);border:1px solid rgba(11,43,140,.35)}
.plan-hi .save-tag{background:rgba(11,43,140,.14);border-color:rgba(11,43,140,.45)}
.save-tag .kicker{color:var(--volt);font-size:13px}
/* --- profondita' e movimento --- */
    @keyframes floatTilt{0%,100%{transform:rotateY(-13deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(-13deg) rotateX(4deg) translateY(-14px)}}
@keyframes floatTiltR{0%,100%{transform:rotateY(11deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(11deg) rotateX(3deg) translateY(-12px)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sheen{0%{background-position:-35% 0}100%{background-position:135% 0}}
/* `*` NON seleziona gli pseudo-elementi: senza `::before, ::after` qui
   dentro, gli anelli pulsanti della mappa (`.mm-n::after`) continuavano a
   pulsare anche a «riduci animazioni» — l'unica animazione su pseudo-
   elemento del foglio, e quindi l'unica che sfuggiva. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}

/* --- la scena dell'hero: lo schermo del coach va a fuoco ---
   Stato di partenza scritto qui e acceso dalla classe .mo, che mette lo
   script in testa: cosi' non c'e' il lampo della schermata gia' pronta.
   Senza .mo — cioe' con meno animazioni richieste, o se GSAP non arriva —
   questo blocco non esiste e l'hero e' quello finito. */

.mo .hero-dev-in{opacity:0}
.mo .hero-scr{filter:blur(5px)}
.mo .hero-comp{transform:scaleX(0);transform-origin:left center}
.mo .hero-punti,.mo .hero-area{opacity:0}
.mo .hero-dev-in .fl-tilt{opacity:0}
.stage{position:absolute;border-radius:30px;background:linear-gradient(142deg,#2B57D6 0%,var(--volt) 46%,var(--volt2) 100%)}
.tilt{transform:rotateY(-13deg) rotateX(4deg)}
.tilt-r{transform:rotateY(11deg) rotateX(3deg)}
.fl-tilt{animation:floatTilt 7.5s ease-in-out infinite}
.fl-tilt-r{animation:floatTiltR 8.5s ease-in-out infinite}
.fl{animation:floatY 8s ease-in-out infinite}
.lift{box-shadow:0 2px 4px rgba(1,3,38,.05),0 26px 60px -18px rgba(1,3,38,.24)}
.lift-b{box-shadow:0 2px 6px rgba(11,43,140,.10),0 42px 84px -24px rgba(11,43,140,.44)}
/* La mappa. Gli stili stanno qui e non in linea nel markup perche' in
   linea vincerebbero sul position:sticky. Sticky: mentre scorri la scheda
   la mappa resta ferma e le note le passano sotto — su telefono e' il
   pezzo che serve, perche' li' la mappa e' alta 136px e le note 338. */
/* Dove c'e' il mouse il bottone compare al passaggio: l'angolo in alto a
   destra dell'immagine ha una scritta sotto, e a schermo largo la mappa si
   legge gia' — il cursore zoom-in basta come indizio. Su touch invece resta
   sempre visibile, perche' li' e' l'unico modo di sapere che si apre. */
@media (hover:hover){
}

/* La mappa resta ferma mentre i quattro numeri si accendono. Le note
   compatte stanno DENTRO al blocco fermo, cosi' restano leggibili tutto il
   tempo, e a dare il tempo sono quattro spaziatori vuoti sotto: qui l'unica
   cosa che si anima sono i bollini, quindi non c'e' niente che scorra di
   fianco.
   piu' in basso nel file e vincerebbe per ordine. */
@media (max-width:900px){
  /* display:contents scioglie il contenitore e lascia mappa e note figlie
     dirette della colonna: cosi' su telefono e' la mappa a restare ferma
     mentre le note le passano sotto, che e' l'unica parte che serve li'.
     Gli spaziatori spariscono: senza fumetti non avrebbero niente da
     mostrare e sarebbero mille pixel di scheda bianca. */
}

/* A tutto schermo. Sotto i 900 l'immagine prende l'altezza dello schermo e
   sfora in larghezza apposta: si scorre di lato ed e' l'unico modo di
   leggere una dashboard larga 1240px su un telefono da 390. */
@media (max-width:900px){
}

/* ============================================================
   RESPONSIVE — breakpoint 1200 / 900 / 640
   La pagina resta identica a 1440: ogni clamp() tocca il suo
   massimo esattamente a quella larghezza.
   ============================================================ */

/* --- mockup a dimensione fissa che scalano nella loro colonna ---
   ponytail: un solo scaler per monitor e telefoni, invece di una misura
   riscritta per ogni breakpoint. tan(atan2(a,b)) e' come si dividono due
   lunghezze in CSS: scale() vuole un numero puro e 100cqw/--dw lo produce.
   Il margin-bottom negativo ridà al flusso l'altezza scalata, altrimenti
   sotto al mockup resta il vuoto della sua misura piena.
   Dentro non si tocca niente: sono immagini di un'interfaccia. */
/* ⚠️ L'angolo sta in una proprieta' REGISTRATA, e non e' pignoleria.
   Su Safari iOS `tan(atan2(100cqw, <px>))` scritto tutto in una volta da un
   numero sbagliato — misurato il 22/9 su iPhone: 0,636 invece di 0,364, e
   sulla pagina vera -1,77 sul white label e -0,37 sull'hero. Una scala
   NEGATIVA capovolge e specchia il mockup: e' il difetto che il cliente ha
   fotografato. Con `atan2` in una proprieta' `<angle>` registrata il valore
   e' corretto (19,42deg = 356/1010) e la tangente pure. Lo stesso conto con
   due lunghezze in px non sbagliava mai: e' la combinazione con l'unita' di
   contenitore. Non riunire le due righe. */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ang-h{syntax:'<angle>';inherits:false;initial-value:90deg}
@property --ang-v{syntax:'<angle>';inherits:false;initial-value:90deg}
.fitbox{container-type:inline-size}
.fitbox>.fitin{
  --ang:atan2(100cqw, var(--dw));
  /* il max() e' la rete: su un Safari 16.0-16.3, che ha le unita' di
     contenitore ma non @property, la riga sopra torna a valere per
     sostituzione e potrebbe ridare un numero storto. Positivo il mockup
     esce di misura, negativo si capovolge: il secondo e' molto peggio. */
  --fit:min(1, max(.05, tan(var(--ang))));
  width:var(--dw);height:var(--dh);
  margin-inline:auto;
  transform-origin:top left;
  transform:scale(var(--fit));
  margin-bottom:calc((var(--fit) - 1) * var(--dh));
}

/* larghezza dei margini laterali, per breakpoint */
@media (max-width:1200px){ :root{--gut:32px} }
@media (max-width:900px){  :root{--gut:26px} }
@media (max-width:640px){
  /* Il grafico del macrociclo scala tutto insieme col riquadro: a 296px di
     larghezza le tacche uscirebbero a 6,5px, illeggibili. Sotto i 640 restano
     griglia, serie e riferimento — si legge l'andamento, che a quella misura
     e' l'unica cosa leggibile comunque; i nomi delle serie li da' la legenda
     sotto, che e' HTML e non scala. Chart.js fa la stessa cosa da solo: a
     larghezze piccole le tacche le salta. */
  .an-grafico text{display:none}  :root{--gut:18px} }

/* --- 1. testata --- */
/* --- La barra che segue, e perche' NON e' la testata --- 
   Fra la CTA della hero e quella dei prezzi c'erano 12.730px su desktop e
   15.456px su telefono con un solo elemento premibile in mezzo: la pagina
   convinceva alla mappa muscolare (schermata 3,5) e lasciava agire alla 15.
   La soluzione ovvia sarebbe stata rendere appiccicosa `.nav`. Non si puo':
   cinque elementi di questa pagina sono gia' agganciati fra `top:0` e
   `top:14px` — le tre finestre del flusso, la mappa e la lista delle
   testimonianze — e una testata fissa ci finirebbe sopra, coprendo proprio
   i mockup che sono l'argomento. Una barra in basso non compete con
   nessuno di loro.
   Compare quando la hero e' uscita e sparisce quando i prezzi o la fascia
   finale sono sullo schermo: offrire "vai ai prezzi" mentre li stai
   guardando e' rumore. Senza JavaScript non compare affatto, e la pagina
   resta esattamente quella di prima. */
.cta-flot{position:fixed;z-index:40;right:var(--gut);bottom:22px;display:flex;align-items:center;gap:16px;padding:10px 12px 10px 20px;border-radius:4px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border:1px solid var(--line2);box-shadow:0 2px 6px rgba(1,3,38,.06),0 18px 40px -14px rgba(1,3,38,.28);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.3,1),visibility 0s linear .3s}
.cta-flot.vede{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cta-flot a:not(.btn){color:var(--ink2);font-size:15px;white-space:nowrap;transition:color .16s ease}
.cta-flot a:not(.btn):hover{color:var(--volt)}
.cta-flot .btn{min-height:46px;padding:6px 20px;font-size:13px}
@media (max-width:900px){
  /* su telefono e' anche l'unica navigazione: `.nav-links` li' e' display:none */
  .cta-flot{left:var(--gut);right:var(--gut);bottom:max(14px, env(safe-area-inset-bottom));justify-content:space-between;padding:9px 9px 9px 16px}
  /* «Prezzi» era alto 23px: un bersaglio da mouse in fondo a uno schermo
     che si tocca col pollice. Il testo resta identico, cresce solo l'area
     sensibile fino ai 44px di regola. */
  .cta-flot a{display:flex;align-items:center;min-height:44px;padding-inline:4px}
  .cta-flot .btn{flex:1;justify-content:center;max-width:230px}
}
@media (prefers-reduced-motion:reduce){.cta-flot{transition:opacity .01s,visibility 0s}}

/* Il secondo bottone della hero non e' piu' un bottone morto: e' l'ancora
   verso le sezioni che la piattaforma la fanno vedere davvero. L'icona e'
   una freccia in giu' e non un "play", se no promette un filmato che non
   esiste. */
.btn-ghost{display:inline-flex;align-items:center;gap:12px;height:58px;color:var(--ink);font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:14px}
.btn-ghost-ico{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--volt);flex:0 0 auto;transition:border-color .18s ease,background-color .18s ease}
.btn-ghost:hover .btn-ghost-ico{border-color:var(--volt);background:rgba(11,43,140,.06)}

/* La CTA al picco di convinzione, in fondo alla sezione del differenziatore */
.tech-cta{display:flex;flex-direction:column;align-items:center;gap:13px;margin-top:46px;text-align:center}
.tech-cta-nota{color:var(--ink2)}
.nav{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;position:relative;z-index:5}
.nav-in{display:flex;align-items:center;gap:40px}
/* 44 e non 34: a 34 la parola «PERFORMANCE UNIVERSE» era alta 6px e non si
   leggeva, quindi in testata restava di fatto solo un bollino. La barra e'
   alta 82, quindi 44 lascia ancora 19px sopra e sotto. */
.nav-logo{height:44px;width:auto;display:block;flex:0 0 auto}

/* --- il solo simbolo, senza un secondo file ---
   Il logo e' un blocco unico: simbolo da x=10 a 272 del viewBox, uno stacco
   vuoto fino a 372, poi la parola fino a 995. Un `object-fit:cover` in una
   casella quadrata mostra i primi 293 punti su 1000 e taglia via la parola,
   e il simbolo ci finisce centrato per costruzione (il suo centro cade a
   16,4px su 17 di casella). Quindi niente asset ritagliato da tenere
   allineato al logo vero: quando cambia il logo, cambia anche questo. */
.marchio{object-fit:cover;object-position:left center;display:block;flex:0 0 auto}

.nav-links{display:flex;gap:34px;margin-left:22px;font-size:15px;color:var(--ink2)}
.nav-links a{color:inherit;transition:color .16s ease}
.nav-links a:hover{color:var(--volt)}
/* la testata e' alta 82px e resta sopra: senza questo margine l'ancora
   porta il titolo della sezione esattamente sotto di lei. Vale per tutte le
   sezioni con un indirizzo (dal 14/9 lo hanno tutte). */
main section[id]{scroll-margin-top:96px}
.nav-act{margin-left:auto;display:flex;align-items:center;gap:24px}

@media (max-width:900px){
  .nav-in{gap:24px}
  .nav-links{gap:24px;margin-left:0}
}
@media (max-width:640px){
  .nav{height:64px}
  .nav-logo{height:32px}
  .nav-in,.nav-act{gap:16px}
  /* Sotto i 640 le voci stanno nel menu a panino, e la testata segue lo
     scorrimento (16/9, richiesta del marketing). Qui sticky non tocca niente:
     sotto i 900 nessun elemento della pagina e' agganciato in alto (misurato),
     il problema descritto sopra `.cta-flot` vale solo sul desktop.
     Si nasconde scorrendo giu' e ricompare risalendo: la classe `via` la
     mette lo script. Col menu aperto le voci scendono sotto la barra. */
  .nav{position:sticky;top:0;z-index:30;background:#FFFFFF;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
  .nav.via{transform:translateY(-100%)}
  .nav-act{gap:8px}
  /* .wrap e' relative: senza questo il pannello si misura sul contenitore
     e resta rientrato di 18px per lato invece di andare da bordo a bordo */
  .nav-in{position:static}
  .nav-links{display:none}
  .nav.aperto .nav-links{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;margin:0;padding:6px var(--gut) 14px;background:#FFFFFF;border-block:1px solid var(--line);box-shadow:0 18px 30px -18px rgba(1,3,38,.22);font-size:17px;color:var(--ink)}
  .nav.aperto .nav-links a{display:flex;align-items:center;min-height:48px;border-top:1px solid var(--line)}
  .nav.aperto .nav-links a:first-child{border-top:0}
  .nav-menu{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:4px}
  .nav-menu:focus-visible{outline:2px solid var(--volt);outline-offset:-2px}
  .nav-menu .i-chiudi,.nav.aperto .nav-menu .i-apri{display:none}
  .nav.aperto .nav-menu .i-chiudi{display:inline}
}
@media (min-width:641px){ .nav-menu{display:none} }
.nav-menu[hidden]{display:none}
@media (max-width:640px) and (prefers-reduced-motion:reduce){ .nav{transition:none} }

/* --- 2. hero --- */
.hero{position:relative;padding:clamp(48px, .3rem + 6.1vw, 88px) 0 clamp(52px, .3rem + 6.4vw, 92px);overflow:hidden}
/* 600fr/520fr tiene il rapporto approvato, minmax(0,..) impedisce
   che il contenuto lungo allarghi la colonna */
.hero-grid{display:grid;grid-template-columns:minmax(0,600fr) minmax(0,520fr);gap:clamp(32px, .3rem + 3.87vw, 60px);align-items:center}
.hero-cta{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
/* riquadro di disegno dello stack: dentro resta tutto in pixel assoluti */
/* misura di disegno dello stack: in CSS e non inline, altrimenti
   i breakpoint non possono cambiarla */
/* 510 = il fondo del telefono, misurato. Erano 566 perche' i 56px in
   fondo li occupava la riga di chip, che ora sta fuori dal riquadro. */
.hero-dev{--dw:520px;--dh:510px}
.hero-dev-in{position:relative;width:520px;height:510px;perspective:1900px}
.hero-chip{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}

@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  /* in colonna singola non ci sono piu' i margini di pagina ad assorbire
     la lastra blu e il telefono che sporgono: la misura di disegno passa
     da 520 (la colonna) a 668 (-42 a sinistra, +106 a destra) e lo stack
     si sposta di 42 per riallinearsi. Cosi' non viene tagliato niente. */
  .hero-dev{--dw:668px}
  .hero-dev-in{left:42px}
}

/* --- 3. barra numeri --- */
/* --- La mappa muscolare, disegnata e non fotografata ---
   Era uno screenshot compresso con quattro bollini appoggiati sopra: il
   terzo non si leggeva, il quarto non si vedeva, e la coreografia che li
   accendeva teneva ferma la pagina per farsi guardare. Ora e' la stessa
   illustrazione anatomica del prodotto — `components/bodyPaths.ts`, resa da
   `components/ChartMuscleMap.vue` — coi suoi tracciati, la sua scala
   0→20+ set e i nomi e i numeri veri di quella schermata.
   Il pannello e' scuro perche' e' un pezzo di prodotto, come i monitor e i
   telefoni: qui vale la stessa regola dell'elenco `.scr, .prev`, cioe' ogni
   testo che ci va sopra dichiara il suo colore.
   Il file `assets/mappa-muscolare.webp` e' stato cancellato (era rimasto
   in cartella e finiva online). */
.mm{position:relative;display:grid;grid-template-columns:minmax(0,430fr) minmax(0,620fr);gap:clamp(20px, 2.4vw, 40px);align-items:center;margin-top:26px;padding:26px 28px;border:1px solid #2D3A70;border-radius:8px;background:#0C122E;box-shadow:0 30px 70px -26px rgba(1,3,38,.55)}
/* La testata del pannello e il cursore delle settimane ci sono perche' ci
   sono nella schermata vera — e perche' la nota 2 parla di scorrere le
   settimane: senza, indicava una cosa che in pagina non esisteva. */
.mm-testa{grid-column:1 / -1;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #1E2A56}
.mm-titolo{font-family:'Archivo','Arial Narrow',sans-serif;font-weight:800;font-size:16px;color:#FFFFFF}
.mm-sub{font-size:12px;color:#8B94B2;margin-top:3px}
.mm-sett{display:flex;align-items:center;gap:12px;margin-top:14px}
.mm-sett-lab{font-family:'Archivo','Arial Narrow',sans-serif;font-weight:800;font-size:13px;color:#DCE5FF;white-space:nowrap}
.mm-barra{position:relative;flex:1;height:4px;border-radius:2px;background:#1E2A56;min-width:60px}
.mm-barra > i{position:absolute;left:0;top:-4px;width:12px;height:12px;border-radius:50%;background:#DCE5FF;box-shadow:0 0 0 3px rgba(220,229,255,.16)}
.mm-sett-val{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8B94B2;white-space:nowrap}

/* I numeri che rimandano alle quattro note. Non stanno piu' sopra a
   un'immagine con coordinate in percentuale — che era il modo in cui il
   terzo finiva su un fondo scuro e il quarto usciva dal riquadro — ma
   DENTRO la cosa che spiegano: il gruppo delle figure, la riga delle
   settimane, la testata dell'elenco, la scala. Cosi' restano al loro posto
   a qualunque larghezza, senza una sola coordinata da ritarare. */
.mm-n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--volt);border:2px solid #7192F4;display:inline-flex;align-items:center;justify-content:center;font-family:'Archivo','Arial Narrow',sans-serif;font-weight:900;font-size:14px;line-height:1;color:#FFFFFF;margin-right:10px;vertical-align:middle;box-shadow:0 2px 10px rgba(11,43,140,.6)}
.mm-scala .mm-n,.mm-sett .mm-n{margin-right:0}
.mm-n-corpi{position:absolute;top:0;left:0;margin:0}
/* Il fumetto del numero. Fondo pieno e chiaro: sotto ci passa un pannello
   scuro fitto di forme, e un fumetto semitrasparente li' non si legge. */
.mm-n{position:relative;cursor:help}
/* I numeri pulsano per farsi trovare: senza, un fumetto che si apre solo al
   passaggio del mouse e' informazione che nessuno sa di poter chiedere.
   L'anello e' uno pseudo-elemento a parte e si anima su `transform` e
   `opacity`, cioe' due proprieta' che il compositore muove da solo: animare
   il `box-shadow` del bollino avrebbe voluto dire ridipingerlo a ogni
   fotogramma, per quattro elementi, per sempre.
   Partono sfalsati nell'ordine 1-2-3-4: quattro anelli che pulsano insieme
   sembrano un errore, in fila sembrano un percorso da seguire.
   E si fermano: al passaggio su uno qualsiasi il JS mette `visto` sul
   pannello e smettono tutti. Un richiamo che continua dopo che l'hai
   raccolto e' solo insistenza.
   Con «riduci animazioni» non partono: li spegne la regola globale
   `*,*::before,*::after{animation:none}` piu' in alto in questo file. Il
   `*` da solo NON basta, perche' non seleziona gli pseudo-elementi: per un
   po' questo commento ha detto il contrario di quello che succedeva. */
@keyframes mmPulsa{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(2.15);opacity:0}
  100%{transform:scale(2.15);opacity:0}
}
.mm-n::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid #7192F4;pointer-events:none;opacity:0;animation:mmPulsa 2.6s cubic-bezier(.25,.6,.3,1) infinite}
.mm-n[data-n="2"]::after{animation-delay:.3s}
.mm-n[data-n="3"]::after{animation-delay:.6s}
.mm-n[data-n="4"]::after{animation-delay:.9s}
.mm-n:hover::after,.mm.visto .mm-n::after{animation:none;opacity:0}
.mm-tip{position:absolute;z-index:6;top:calc(100% + 9px);left:-4px;width:max-content;max-width:min(250px, 60vw);padding:9px 11px;border-radius:5px;background:#FFFFFF;border:1px solid rgba(11,43,140,.28);box-shadow:0 14px 34px rgba(1,3,38,.5);font-family:'Barlow',sans-serif;font-weight:400;font-size:13px;line-height:1.42;letter-spacing:normal;text-transform:none;text-align:left;color:var(--ink);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.mm-tip.su{top:auto;bottom:calc(100% + 9px)}
.mm-n:hover .mm-tip{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* il quarto sta a destra nella riga della scala: il fumetto va ancorato
   a sinistra, se no esce dal pannello */
.mm-scala .mm-tip{left:auto;right:-4px}
@media (hover:none){.mm-tip{display:none}}
.mm-corpi{position:relative}
.mm-corpi{display:flex;justify-content:center;gap:clamp(6px, 1.4vw, 18px)}
.mm-fig{margin:0;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:0}
.mm-svg{width:100%;max-width:210px;height:auto;display:block}
.mm-fig figcaption{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8B94B2}
.mm-cap{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8B94B2;margin-bottom:10px}
/* ventuno voci in una colonna sarebbero piu' alte della figura che
   spiegano: due colonne, come nella schermata vera */
.mm-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px}
/* 14/9, richieste del cliente: su telefono la lista era troppo lunga (21
   gruppi, 932px su iPhone); tagliata a 8 con i puntini non bastava, li vuole
   scorrere tutti. Sotto i 900px la lista diventa una fascia orizzontale a
   colonne da 7 righe (21 = 3 colonne): alta come 7 voci, e la colonna dopo
   si affaccia dal bordo destro per dire che si scorre. Esce dal padding
   del riquadro, cosi' scorre da bordo a bordo, con lo scatto allineato al
   testo. Colonne al massimo da 340px: su iPad se ne vedono due.
   `.mm .mm-lista` e non `.mm-lista`: la regola a una colonna dei 560px viene
   dopo nel file e a pari peso vincerebbe.
   Sul desktop la lista resta completa, a due colonne, come prima. */
@media (max-width:900px){
  .mm .mm-lista{
    grid-template-columns:none;grid-auto-flow:column;grid-template-rows:repeat(7, auto);
    grid-auto-columns:min(calc(100% - 30px), 340px);gap:0 18px;
    margin-inline:-18px;padding-inline:18px;scroll-padding-inline:18px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .mm .mm-lista::-webkit-scrollbar{display:none}
  .mm .mm-lista > .mm-voce:nth-child(7n+1){scroll-snap-align:start}
  /* sul fondo scuro della mappa i colori dei pallini vanno rovesciati: il
     blu --volt acceso spariva nel #0C122E. Spenti #646F99 (3,75:1 sul
     fondo, sopra il 3:1 dei comandi), acceso quasi bianco. */
  .mm-punti{margin-top:12px}
  .mm-punti button::before{background:#646F99}
  .mm-punti button[aria-current="true"]::before{background:#DCE5FF}
  .mm-punti button:focus-visible{outline-color:#7192F4}
}
.mm-voce{display:grid;grid-template-columns:9px minmax(0,1fr) auto auto;gap:3px 9px;align-items:center;padding:5px 0 7px;border-bottom:1px solid #1E2A56}
/* La barra sotto ogni riga: e' quella della schermata vera, ed e' l'unica
   cosa che fa vedere il rapporto fra i gruppi senza far leggere ventuno
   numeri. Larghezza in percentuale del gruppo piu' alto (Spalle, 22,4) e
   stesso colore del pallino, cioe' quello della scala. */
.mm-bar{grid-column:1 / -1;height:3px;border-radius:2px;background:#161F44;overflow:hidden}
.mm-bar > i{display:block;height:100%;border-radius:2px}
.mm-pun{width:9px;height:9px;border-radius:2px}
.mm-nome{font-size:13px;color:#C2CADF;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mm-fr{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;color:#7192F4;background:rgba(113,146,244,.14);border-radius:3px;padding:1px 5px}
.mm-set{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:14px;letter-spacing:.04em;color:#FFFFFF;min-width:34px;text-align:right}
.mm-scala{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8B94B2}
.mm-ramp{flex:1;height:7px;border-radius:4px}
@media (max-width:900px){
  .mm{grid-template-columns:minmax(0,1fr);gap:24px;padding:22px 18px}
  .mm-svg{max-width:160px}
}
@media (max-width:700px){
  /* la riga delle settimane non ci sta su una riga sola: il valore scende
     sotto invece di essere tagliato a meta' parola */
  .mm-sett{flex-wrap:wrap;gap:10px 12px}
  .mm-barra{order:3;flex:1 1 100%;min-width:0}
  .mm-sett-val{white-space:normal}
}
@media (max-width:560px){
  /* a 390 due colonne darebbero celle da 150px e «Isometrico prevalente»
     verrebbe tagliato a meta' */
  .mm-lista{grid-template-columns:minmax(0,1fr)}
}

/* --- la fascia delle prove ---
   Prima erano due cose: tre rassicurazioni sotto al bottone della hero e
   quattro numeri in una fascia `--bg2`. Il grigio della fascia sta a un
   passo dal bianco della hero, quindi la sezione che doveva dare le prove
   era anche l'unica senza un fondo suo. Ora e' una sola fascia sul blu del
   marchio: e' il primo taglio netto della pagina, e i numeri ci stanno
   sopra in bianco pieno invece che in blu su grigio.
   Le righe che dividono passano da `--line` a un bianco al 22%: su fondo
   blu una linea grigio chiaro sparisce o, peggio, vira al viola. */
.numsbar{background:var(--volt);color:#FFFFFF}
.numsbar-in{padding:clamp(28px, 2.8vw, 40px) 0 clamp(30px, 3vw, 44px)}
.nums-gar{display:flex;flex-wrap:wrap;gap:14px 36px;padding-bottom:clamp(22px, 2.2vw, 30px);margin-bottom:clamp(24px, 2.4vw, 34px);border-bottom:1px solid rgba(255,255,255,.24)}
.nums-gar > span{display:flex;align-items:center;gap:11px;font-size:16px;font-weight:600;color:#FFFFFF}
.nums-gar svg{flex:0 0 auto}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.nums > div{padding:0 26px;border-right:1px solid rgba(255,255,255,.24)}
.nums > div:first-child{padding-left:0}
.nums > div:last-child{padding-right:0;border-right:0}
.nums .num{font-size:clamp(1.875rem, 1.075rem + 2vw,2.875rem);color:#FFFFFF}
.nums-lab{margin-top:9px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.82)}

@media (max-width:900px){
  /* due per riga: tre numeri in fila diventano illeggibili prima di sparire.
     Il terzo resta da solo nella seconda riga e non ha il filo a destra,
     perche' se lo toglie la regola su `:last-child` piu' in alto. */
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums > div{padding:22px}
  .nums > div:nth-child(odd){padding-left:0}
  .nums > div:nth-child(even){padding-right:0;border-right:0}
  .nums > div:nth-child(-n+2){padding-top:0}
  .nums > div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.24)}
  /* il terzo prende tutta la riga: da solo in mezza colonna il filo sopra
     si fermava a meta' pagina, e sembrava un errore piu' che una divisione */
  .nums > div:nth-child(3){grid-column:1 / -1}
}
@media (max-width:640px){
  .nums-gar{gap:12px 24px}
  .nums > div{padding:20px 16px}
  .nums-lab{font-size:14px}
}

/* --- intestazioni di sezione (condivisa) ---
   --mb e' il margine sotto approvato a 1440, si imposta inline dove diverso */
.sec-head{margin-bottom:clamp(34px, 3.9vw, var(--mb, 56px))}

/* --- 4. all-in-one --- */
/* 300/170/710 = 1180: in frazioni risolve agli stessi pixel a 1440 */
.allin{display:grid;grid-template-columns:minmax(0,300fr) minmax(0,170fr) minmax(0,710fr);gap:0;align-items:center}
.allin-old{display:flex;flex-direction:column;gap:9px}
/* La casella si solleva al passaggio del mouse; il colore del bordo e la
   cometa che parte li mette il JS, che e' l'unico a sapere quale linea
   appartiene a quale strumento. Solo `transform`, cosi' non tocca il
   layout mentre le sei caselle sono inclinate ognuna per conto suo. */
.allin-old > div:not(.kicker){transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease}
.allin-old > div:not(.kicker):hover{box-shadow:0 12px 26px -12px rgba(1,3,38,.3)}
.allin-link{width:100%;height:auto}
.allin-link-v{display:none}
/* minmax(0,..) e non 1fr: "Programmazione" e' piu' larga del min-content
   di meta' riga e senza il minimo a 0 sbilancia le due colonne */
/* Una lista sola appesa a un filo continuo, non sei riquadri: il filo e'
   l'impianto unico di cui parla la sezione, e le sei voci ci stanno sopra
   come rami. Sei schede dentro una scheda erano la stessa frammentazione
   della colonna di sinistra, solo piu' ordinata — cioe' l'opposto di quello
   che il testo promette. */
/* Il blocco di PU. La scheda respira di piu' delle altre perche' e' la
   risposta della sezione: a sinistra sei cose sparse, qui una sola. */
/* Il blu e' tornato a essere la TESTATA e non il campo. Tutto blu il
   riquadro era il colore giusto nel posto sbagliato: il marchio si leggeva
   bene, ma le cinque funzioni — che sono la cosa che questa sezione deve
   far vedere — stavano in bianco su blu, cioe' nel modo meno leggibile
   della pagina. Ora il marchio tiene la sua fascia (e resta bianco, senza
   cambiare file), e l'elenco torna scuro su chiaro come tutto il resto.
   Il blu resta dov'e' utile: la fascia, la spina, i nomi delle funzioni.
   Regola che non cambia: NON tornare a mettere cinque riquadri qui dentro.
   Sei scatole in una scatola erano la stessa frammentazione della colonna
   di sinistra, solo piu' ordinata — l'opposto di quello che il testo dice. */
.allin-pu{padding:0 36px 30px;background:var(--panel);border-color:#C3CBE0;overflow:hidden}
.allin-testata{text-align:center;margin:0 -36px 28px;padding:30px 36px 30px;background:linear-gradient(150deg,var(--volt),var(--volt2))}
.allin-marchio{display:block;height:58px;width:auto;margin:0 auto}
/* Le cinque funzioni sono card, ma su UNA griglia continua: celle divise
   da un filo di 1px, non tessere che galleggiano ognuna per conto suo.
   La differenza non e' estetica. La primissima versione erano sei riquadri
   staccati dentro un riquadro, e il difetto era che a destra si vedevano
   pezzi separati esattamente come nella colonna di sinistra — cioe'
   l'opposto di quello che il testo dice. Le tessere di sinistra sono
   inclinate, tratteggiate, ognuna di un colore: il pannello unico diviso in
   scomparti e' la loro immagine speculare, ed e' questo che fa l'argomento.
   Se un giorno le stacchi con un gap vero, torna il problema.
   Il filo e' il fondo della griglia che si vede attraverso i gap da 1px:
   cosi' non ci sono sei bordi che si sommano a due a due. */
.allin-lista{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:5px;overflow:hidden}
.allin-lista > div{background:var(--panel);padding:19px 20px 20px;transition:background-color .2s ease}
/* Le celle non sono cliccabili, quindi il passaggio del mouse le accende
   appena — una velatura del blu di marchio e l'icona che sale di un pelo.
   Niente ombra, niente cursore a mano: sarebbe una promessa che la cella
   non mantiene. */
.allin-lista > div:hover{background:#F6F8FD}
.allin-lista .ico{transition:transform .2s ease}
.allin-lista > div:hover .ico{transform:translateY(-2px)}
@media (hover:none){.allin-lista > div:hover{background:var(--panel)}
  .allin-lista > div:hover .ico{transform:none}}
.allin-lista dt{display:block;font-family:'Archivo','Arial Narrow',sans-serif;font-variation-settings:'wdth' 88;font-weight:800;font-size:19px;line-height:1.1;color:var(--volt)}
.allin-lista dt .ico{color:var(--volt);margin-bottom:11px}
.allin-lista dd{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--ink2)}
.allin-chiusa{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--ink2);max-width:62ch}

@media (max-width:560px){
  /* a colonna stretta il descrittore va sotto al nome, se no restano due
     colonne da 90px e si spezzano le parole */
  /* sotto i 560 due colonne farebbero celle da 130px: i nomi andrebbero
     a capo in mezzo alla parola */
  .allin-lista{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:900px){
  .allin{grid-template-columns:minmax(0,1fr);gap:0}
  /* In colonna il raccordo orizzontale non descrive piu' niente: al suo
     posto quello in piedi, che scende dagli strumenti sulla testata blu.
     Fino al 14/9 qui c'era solo un vuoto di 36px, e su telefono il
     passaggio dei dati — che e' l'argomento della sezione — non si vedeva.
     `overflow:visible` perche' l'onda del nodo, allargandosi, esce dal
     disegno e tocca la testata: e' il dato che entra. */
  .allin-link{display:none}
  .allin-link-v{display:block;width:100%;max-width:460px;height:auto;margin:12px auto 2px;overflow:visible}
  /* Il contenitore resta un riquadro (bordo, angoli, margini di pagina);
     sono le voci dentro che non rientrano: con 36px di margine per lato
     erano celle strette in una seconda scatola bordata. Ora le righe vanno
     da bordo a bordo del riquadro e pendono dalla testata. Il 14/9 le avevo
     portate da bordo a bordo dello schermo: il cliente vuole il riquadro. */
  .allin-pu{padding:0 0 22px}
  .allin-testata{margin:0}
  .allin-lista{border:0;border-radius:0}
  .allin-chiusa{margin:0;padding:20px 20px 0}
}
/* --- misure display fluide, condivise ---
   Il nome dice il valore approvato a 1440: la a raggiunge esattamente,
   e scende al minimo a 640. NON si usano dentro ai mockup dei dispositivi,
   che restano in pixel fissi e scalano con transform. */
.fs64{font-size:clamp(1.875rem, .175rem + 4.25vw,4rem)}
.fs46{font-size:clamp(1.875rem, 1.075rem + 2vw,2.875rem)}
.fs52{font-size:clamp(1.6875rem, .4375rem + 3.125vw,3.25rem)}
.fs44{font-size:clamp(1.625rem, .725rem + 2.25vw,2.75rem)}
.fs34{font-size:clamp(1.5rem, 1rem + 1.25vw,2.125rem)}
.fs26{font-size:clamp(1.3125rem, 1.0625rem + .625vw,1.625rem)}
.fs24{font-size:clamp(1.25rem, 1.05rem + .5vw,1.5rem)}
.fs20{font-size:clamp(1.0625rem, .92rem + .375vw,1.25rem)}
.fs22{font-size:clamp(1.1875rem, 1.0375rem + .375vw,1.375rem)}

/* --- 5. tecnologia (il differenziatore) --- */
/* min(900px,100%): a 1440 resta 900 come nel mockup, sotto smette di
   sbordare dai due lati */
.tech-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,100%);height:400px;background:radial-gradient(ellipse,rgba(11,43,140,.13) 0%,rgba(255,255,255,0) 72%)}
.tech-head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px 40px;align-items:end;margin-bottom:24px}
/* il titolo su tutta la larghezza, il paragrafo e i numeri sulla riga sotto */
.tech-titolo{grid-column:1 / -1}
.tech-stats{display:flex;flex-direction:column;gap:14px}
.tech-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:22px}
.tech-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.tech-phases{display:flex;gap:5px;margin-top:18px}
.tech-legend{display:flex;gap:22px;margin-top:10px;flex-wrap:wrap;align-items:center}
/* la campanella della scheda alert: badge in alto a destra col puntino,
   che e' la forma in cui una notifica si riconosce senza doverla leggere */
.av-campana{position:absolute;top:22px;right:26px;width:34px;height:34px;border-radius:50%;background:rgba(11,43,140,.07);border:1px solid rgba(11,43,140,.22);color:var(--volt);display:flex;align-items:center;justify-content:center}
.av-campana > i{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--red);border:1.5px solid #FFFFFF}
/* bollini sulla mappa: la foto scala con la colonna, loro no. A 390 un
   bollino da 30px coprirebbe un decimo della larghezza dell'immagine. */
/* Il bollino di cui si sta parlando prende un anello. Non l'opacita',
   che la usa gia' l'entrata in scena di GSAP e se la scriverebbe sopra;
   non uno scale, che si trasmetterebbe al fumetto dentro ingrandendogli il
   testo del 24%; e non la larghezza, che e' quello che faceva prima ma
   costa un ricalcolo di layout a ogni frame. L'anello e' solo pittura, e
   in piu' non sposta il centro del bollino rispetto al punto che indica. */
@media (min-width:901px){
  /* L'anello era blu su una schermata blu scura: c'era, ma non diceva
     "guarda qui". Bianco si vede da qualunque punto dell'immagine, e i
     bollini spenti si tirano indietro invece di restare tutti uguali —
     e' il modo piu' economico di far capire dove guardare quando la
     sezione ti trattiene per leggere. */
}
/* Il fumetto: il testo dentro lo scrive il JS pescandolo dalle note sotto
   l'immagine, cosi' non esiste in due copie da tenere allineate. --tx
   serve per centrarlo senza consumare il transform, che qui fa l'entrata. */

@media (max-width:1200px){
  .tech-head{grid-template-columns:minmax(0,1fr) 240px;gap:28px}
}
@media (max-width:900px){
  .tech-head{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
  /* i due dati affiancati al posto che incolonnati: da soli su una riga
     larga sprecherebbero mezza sezione */
  .tech-stats{flex-direction:row;gap:22px}
  .tech-stats > div{flex:1}
  .tech-notes{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .tech-duo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .tech-notes{grid-template-columns:minmax(0,1fr);gap:14px}
  .tech-phases{gap:4px}
  .tech-legend{gap:12px}
  /* a 390 l'immagine e' alta 164px: un fumetto ne coprirebbe un terzo, e
     le note stanno gia' subito sotto in colonna singola */
}

/* --- intestazione a due blocchi (condivisa: passaggi, ecosistema, testimonianze) ---
   a 1440 il ramo centrale vale 53,3px, quindi vince sempre --mb: il margine
   approvato di ciascuna sezione resta quello */
.split-head{display:flex;align-items:flex-end;gap:clamp(24px, .3rem + 3.87vw, 60px);margin-bottom:clamp(30px, 3.7vw, var(--mb, 52px));flex-wrap:wrap}

/* --- 6. operativo in tre passaggi --- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
/* lo sfalsamento delle schede, in classe e non inline: impilate
   diventerebbe spaziatura irregolare invece che ritmo */
.step-up{transform:translateY(-28px)}
.step-down{transform:translateY(14px)}

@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step-up,.step-down{transform:none}
}
@media (max-width:640px){
  .steps{grid-template-columns:minmax(0,1fr)}
}

/* --- 7. rubrica esercizi --- */
/* 400 + 56 + 724 = 1180: in frazioni risolve agli stessi pixel a 1440 */
.rub{display:grid;grid-template-columns:minmax(0,400fr) minmax(0,724fr);gap:clamp(28px, .3rem + 3.6vw, 56px);align-items:center}
.rub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

@media (max-width:900px){
  .rub{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* a quattro colonne su 390 un riquadro sta a 79px: il nome dell'esercizio
     non ci sta. Due colonne e restano schede leggibili. */
  .rub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Ma dentro la finestra agganciata otto riquadri su due colonne fanno una
     finestra alta 784px: su 844 di schermo non resta niente per il testo.
     Ne restano quattro, e sono i due che reagiscono (il primo e il
     caricamento) piu' due di contorno. */
  .flow-rub .rub-grid > div:nth-child(n+4):not(:last-child){display:none}
  /* stessa ragione per i filtri: sette chip a 390 vanno a capo tre volte e
     si mangiano 136px di finestra */
  .flow-rub .flow-vista > div:first-child > span:nth-child(n+5){display:none}
}

/* --- 8. app atleta --- */
/* 660 + 60 + 460 = 1180 */
.app{display:grid;grid-template-columns:minmax(0,660fr) minmax(0,460fr);gap:clamp(30px, .3rem + 3.87vw, 60px);align-items:center}
.app-feats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:30px}
.app-store{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
/* il telefono e la lastra stanno dentro 460x572 e non sporgono:
   basta lo scaler, senza spostamenti.
   `align-items:flex-start` non e' un dettaglio: la cornice e' l'unico figlio
   in flusso di un flex alto quanto la scatola, quindi si allungava fino a
   610 mentre lo schermo dentro ne misura 554 — 38px di telefono vuoto sotto
   l'ultima riga. E' la stessa causa del taglio di prima, vista dall'altro
   lato: quando la scatola era piu' corta dello schermo la cornice si
   accorciava e, con `overflow:hidden`, tagliava. Ora la cornice misura il
   suo contenuto e la scatola la segue. */
.app-dev{--dw:460px;--dh:572px}
.app-dev-in{display:flex;align-items:flex-start;justify-content:center;position:relative;perspective:2000px;width:460px;height:572px}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
}

/* --- 9. white label --- */
/* 230 + 26 + 262 + 26 + 230 = 774 di impaginazione. Le rotazioni fanno
   sporgere ~17px per lato e ~35px sotto: restano fuori dal riquadro come
   gia' oggi, se li includessi cambierebbe la spaziatura verso i bollini. */
/* La composizione riempie la colonna (1180px) invece di fermarsi a 774, e
   soprattutto gli schermi hanno il rapporto di un telefono vero: 1:2,10.
   Prima erano 1:1,39, cioe' quasi quadrati — ed e' quello, piu' della
   dimensione, che li faceva sembrare finti. */
.wl{--dw:1010px;--dh:716px}
.wl-in{display:flex;justify-content:center;align-items:flex-end;gap:28px;perspective:2600px;width:1010px;height:716px}
/* White label su telefono — storia, perche' e' cambiato quattro volte:
   impilati costavano 2.021px; dall'11/9 fascia che scorre con i pallini;
   il 14/9 mattina solo Palette 03, piu' piccolo; il 14/9 pomeriggio il
   cliente li ha rivoluti tutti e tre insieme, piccoli, per vedere i tre
   colori senza allungare la pagina.
   Quindi qui non c'e' piu' niente da riscrivere: vale lo scaler di .fitbox,
   che rimpicciolisce la composizione del desktop (inclinazioni comprese)
   alla larghezza della colonna — su iPhone 15 circa al 35%. Le scritte
   dentro i telefoni diventano illeggibili, ed e' accettato: qui contano i
   colori. Si nascondono solo le didascalie «Palette 0x», che a 4px non
   sarebbero testo ma rumore. */
@media (max-width:900px){
  .wl-in > div > div:last-child{display:none}
  /* Lo scaler da solo riempie la larghezza: su iPad e col telefono in
     orizzontale la composizione arrivava a 507-560px e la sezione si
     allungava (misurato). Qui ha anche un tetto in altezza: 405px o il 60%
     della finestra. Se il tetto scatta la composizione e' piu' stretta
     della colonna, e con transform-origin a sinistra andrebbe centrata a
     mano: il margine sinistro e' meta' dello spazio che avanza. */
  .fitbox.wl > .fitin{
    --ang:atan2(100cqw, var(--dw));
    --ang-h:atan2(405px, var(--dh));
    --ang-v:atan2(60svh, var(--dh));
    --fit:min(1, max(.05, tan(var(--ang))), tan(var(--ang-h)), tan(var(--ang-v)));
    margin-inline:0;margin-left:calc((100cqw - var(--dw) * var(--fit)) / 2);
  }
  /* i pallini sotto le fasce dei passi */
  .flow-punti{display:flex;justify-content:center;gap:10px;margin-top:18px}
  .flow-punti button{width:34px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .flow-punti button::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--line2);transition:background .2s ease,transform .2s ease}
  .flow-punti button[aria-current="true"]::before{background:var(--volt);transform:scale(1.25)}
  .flow-punti button:focus-visible{outline:2px solid var(--volt);outline-offset:2px;border-radius:3px}
}

/* --- 10. prima / dopo --- */
/* Le due testate devono restare alla stessa altezza: a sinistra c'e' un
   bollino da 9px, a destra il marchio (40px dal 14/9), e senza un minimo
   comune le voci della colonna «dopo» partirebbero piu' in basso di «oggi». */
.ba-cap{display:flex;align-items:center;gap:12px;min-height:40px;margin-bottom:22px}
.ba{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
.ba-note{display:flex;gap:24px;align-items:center}

@media (max-width:640px){
  .ba{grid-template-columns:minmax(0,1fr)}
  /* l'icona non si stringe: sotto i 640 va sopra al testo invece di
     rubargli meta' riga */
  .ba-note{flex-direction:column;align-items:flex-start;gap:14px}
}

/* --- 11. prezzi --- */
/* .plans resta fratello di #pu-billing: il toggle e' in sola CSS e usa
   il selettore ~, incapsularlo lo romperebbe. Qui cambio solo la griglia. */
/* La gerarchia della scheda segue quello che il lead dice gia': "Scegli
   solo in base al numero dei tuoi atleti". Il tetto e' l'unica differenza
   fra i tre piani — tutte le funzioni sono incluse ovunque — e stava in
   11px grigio sotto un nome da 24px. Ora e' il contrario. */
.piano-nome{color:var(--ink3)}
.piano-tetto{letter-spacing:.02em;margin-top:6px}

/* La rassicurazione, accanto alla decisione invece che sette schermate
   dopo. La riga sulla carta e' la risposta delle FAQ accorciata, non una
   promessa nuova: i dati servono, l'addebito no. */
.garanzie{margin-top:34px}
.garanzie-carta{display:flex;align-items:flex-start;gap:11px;max-width:660px;margin:0 auto;padding:16px 20px;border:1px solid rgba(11,43,140,.28);border-radius:5px;background:rgba(11,43,140,.045);font-size:15px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.garanzie-carta .ico{margin-top:2px}
.garanzie-carta strong{color:var(--ink);font-weight:600}
.garanzie-riga{display:flex;justify-content:center;gap:14px 30px;flex-wrap:wrap;margin-top:20px}
.garanzie-riga span{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink2)}
@media (max-width:640px){
  .garanzie-riga{flex-direction:column;align-items:flex-start;gap:11px;max-width:660px;margin-inline:auto;padding-inline:2px}
}

.prezzi-marchio{width:46px;height:46px;margin:0 auto 18px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.plan-hi{transform:translateY(-16px) scale(1.035)}

/* Il listino passa a una colonna a 900 come TUTTE le altre griglie della
   pagina, non a 640. Il taglio a 640 lasciava tre schede da ~220px su un
   iPad mini: «INIZIA I 15 GIORNI GRATIS» andava su tre righe dentro un
   bottone alto 58 fissi e «GRATIS» veniva tagliato, «RISPARMI 29,80€
   L'ANNO» sbordava dal suo riquadro e il badge «IL PIU' SCELTO» era
   tagliato in alto (audit dell'11/9). Qui, che e' il punto in cui si
   decide, non ci possono essere testi tagliati.
   520 di larghezza massima perche' a tutta pagina sarebbero sproporzionate. */
@media (max-width:900px){
  .plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}
  /* lo scale del piano in evidenza sborderebbe: impilato non serve piu' */
  .plan-hi{transform:none}
}

/* --- 12. ecosistema --- */
/* griglia a 6 con schede che occupano 2 e 3 colonne: due righe, tre schede
   sopra e due sotto */
/* Un unico ecosistema: un pannello solo, cinque bande.
   Erano cinque schede staccate, e la sezione si intitola "un unico
   ecosistema" — diceva l'opposto di se stessa. C'era anche un difetto
   pratico: le voci per gruppo sono 5, 3, 4, 4, 4, e in una griglia di
   schede la 02 veniva stirata all'altezza della 01 lasciando un buco
   bianco di un centinaio di pixel. In bande l'altezza disuguale e' la
   norma e non si vede.
   La spina che scende lungo i cinque numeri e' la stessa figura del
   raccordo all-in-one: e' quella che fa vedere che sono un impianto solo.
   I numeri hanno il fondo pieno perche' la spina ci passa dietro. */
/* Il marchio in cima alla spina, e la spina che parte da li'. La sezione
   si chiama «un unico ecosistema»: la linea che tiene insieme le cinque
   bande e' il sistema, e il sistema ha un nome. Non serve una coordinata
   sua: la spina sta sempre a 18px dentro il bordo del pannello (52 con
   padding 34, 40 con padding 22), quindi un quadrato da 36 messo all'inizio
   del contenuto ci cade centrato a ogni larghezza. */
.eco{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:24px 34px 0}
.eco-marchio{width:36px;height:36px}
.eco-spina{position:absolute;left:52px;top:60px;bottom:26px;width:1px;transform-origin:top center;background:linear-gradient(180deg,rgba(11,43,140,0),rgba(11,43,140,.28) 7%,rgba(11,43,140,.28) 93%,rgba(11,43,140,0))}
.eco-riga{display:grid;grid-template-columns:minmax(0,330fr) minmax(0,750fr);gap:34px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.eco-riga:last-child{border-bottom:0}
.eco-capo{display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start}
.eco-num{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(11,43,140,.38);background:var(--panel);display:flex;align-items:center;justify-content:center;font-family:'Archivo','Arial Narrow',sans-serif;font-variation-settings:'wdth' 88;font-weight:900;font-size:13px;letter-spacing:.02em;color:var(--volt)}
.eco-segno,
.eco-capo .d{grid-column:2}
.eco-capo .d{font-size:clamp(1.1875rem, .88rem + .55vw,1.4375rem);line-height:1.06}
.eco-segno{display:block;margin:4px 0 11px}
.eco-voci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 30px;padding-top:3px}
/* --ink2 e non --ink3: il grigio delle etichette sta a 4,2:1 su bianco,
   sotto il minimo. Qui il testo e' nuovo di layout, quindi si parte bene
   invece di ereditare il difetto. */
.eco-et{color:var(--volt);font-weight:600}
.eco-de{font-size:15px;color:var(--ink2)}

@media (max-width:900px){
  /* In colonna la banda tiene comunque la sua corsia: il numero a sinistra,
     titolo e voci nella colonna accanto. Mandare le voci a tutta larghezza
     sembrava piu' arioso ma le faceva passare SOTTO alla spina, che sta
     all'altezza dei numeri e quindi le attraversava riga per riga.
     `display:contents` scioglie la testata cosi' numero, icona e titolo
     diventano celle della banda e si incolonnano da soli. */
  .eco-riga{grid-template-columns:36px minmax(0,1fr);gap:6px 14px}
  .eco-capo{display:contents}
  .eco-voci{grid-column:2;padding-top:12px}
}
@media (max-width:640px){
  .eco{padding:24px 22px 0}
  .eco-spina{left:40px}
  .eco-voci{grid-template-columns:minmax(0,1fr)}
}

/* --- 13. testimonianze (sezione unica) ---
   Stato di riposo: sei righe tutte aperte, una sotto l'altra. E' quello che
   si vede senza GSAP, sotto i 900 e con "riduci animazioni". */
.tst{display:flex;flex-direction:column;gap:10px}
/* I due senza video: schede sempre aperte, sopra la lista coreografata.
   Non hanno un video da aprire, quindi tenerli nella lista significava far
   spendere all'utente due passaggi di scorrimento per due citazioni che si
   leggono in un colpo d'occhio. */
.tst-fissi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.tst-fissi .tst-rowhead{cursor:default}
@media (max-width:760px){ .tst-fissi{grid-template-columns:minmax(0,1fr)} }
/* col chip "Partner" accanto restano 127px per il nome e "Riccardo Grandi"
   va a capo: sotto i 520 il chip scende sotto invece di stringere il nome */
@media (max-width:520px){ .tst-fissi .tst-rowhead{flex-wrap:wrap;row-gap:8px} .tst-fissi .tst-chi{min-width:170px} }
.tst-row{border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:0 1px 2px rgba(1,3,38,.04),0 10px 28px rgba(1,3,38,.05);overflow:hidden;display:flex;flex-direction:column}
.tst-rowhead{display:flex;align-items:center;gap:16px;width:100%;padding:12px 18px;text-align:left;flex:0 0 auto}
/* Le quattro col video sono <button>: azzerano l'aspetto del bottone e
   prendono la mano, perche' aprono e chiudono. Le due senza video restano
   <div> — non hanno niente da aprire. */
button.tst-rowhead{border:0;background:none;font:inherit;color:inherit;cursor:pointer;transition:background .18s ease}
button.tst-rowhead:hover{background:#F4F6FB}
.tst-chev{flex:0 0 auto;display:flex;color:var(--ink3);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tst-row.aperta .tst-chev{transform:rotate(180deg)}
.tst-rowhead:focus-visible{outline:2px solid var(--volt);outline-offset:-3px}
.tst-foto{width:72px;height:72px;border-radius:5px;object-fit:cover;flex:0 0 auto;border:1px solid var(--line2)}
.tst-chi{min-width:0;flex:1}
.tst-chi .h4,.tst-chi .kicker{display:block}
.tst-chi .kicker{margin-top:3px}
.tst-tag{flex:0 0 auto;height:22px;font-size:11px}
.tst-vico{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--volt);color:#FFFFFF;display:flex;align-items:center;justify-content:center}
.tst-rowbody{flex:1 1 auto;min-height:0;overflow:hidden}
.tst-rowin{padding:0 18px 18px}
.tst-q{margin:0;font-size:16px;line-height:1.52;color:var(--ink);text-wrap:pretty}
.tst-vbox{position:relative;margin-top:16px;width:100%;max-width:min(760px, calc(56svh * var(--arn, 1.7778)));margin-inline:auto;aspect-ratio:var(--arn, 1.7778);border-radius:5px;background:linear-gradient(150deg,#161F44,#0D1430);border:1px solid #2D3A70;overflow:hidden}
.tst-vslot{position:absolute;inset:0}
/* L'anteprima del video (14/9): il fotogramma che Vimeo usa come copertina,
   salvato in assets/ a 600px. Un'immagine nostra e non quella di Vimeo:
   prima del clic non parte nessuna richiesta verso Vimeo, come prima.
   Sopra un velo del blu notte, piu' fitto in basso: tasto play e «Video»
   restano leggibili anche sul muro bianco dietro Chiara. */
.tst-vslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tst-vslot::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(1,3,38,.78),rgba(1,3,38,.28) 55%,rgba(1,3,38,.12))}
.tst-play:hover .tst-play-ico{transform:scale(1.06)}
.tst-play-ico{transition:transform .2s ease,background-color .2s ease}
/* l'anteprima e' muta e non interattiva: il click deve arrivare al bottone
   sopra, che apre il player vero con audio e comandi */
.tst-vif{width:100%;height:100%;border:0;display:block;pointer-events:none}
.tst-play{position:absolute;inset:0;width:100%;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;color:#FFFFFF}
.tst-play-ico{width:54px;height:54px;border-radius:50%;background:var(--volt);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(1,3,38,.5)}
.tst-play:hover .tst-play-ico{background:var(--blue-hover)}
.tst-play-t{color:#FFFFFF;text-shadow:0 1px 10px rgba(1,3,38,.8)}
.tst-play:focus-visible{outline:2px solid #7192F4;outline-offset:-4px}
/* Finche' manca l'ID Vimeo il video non esiste, quindi non si vede: niente
   riquadro scuro con il play, niente icona in testata, e niente etichetta
   «Quattro di loro hanno registrato anche una testimonianza video», che
   promette una cosa che non c'e'. Prima il riquadro si apriva su «manca
   ancora l'ID Vimeo», cioe' una nota da sviluppatore davanti al visitatore,
   proprio nella prova sociale (audit mobile dell'11/9).
   Lo decide il CSS con :has, non il JS: vale anche senza JavaScript, e
   quando l'ID arriva nel data-vimeo ricompare tutto senza toccare altro. */
.tst-eti{display:flex;align-items:center;gap:10px;margin:30px 0 14px}
/* ^ stava nello style="" dell'etichetta, e il display:flex in linea batteva
   il display:none qui sotto: l'etichetta restava visibile. */
.tst-row:has(.tst-play[data-vimeo=""]) .tst-vbox,
.tst-row:has(.tst-play[data-vimeo=""]) .tst-vico{display:none}
.sec:not(:has(.tst-play:not([data-vimeo=""]))) .tst-eti{display:none}
/* quando sotto scorre l'anteprima il bottone si fa da parte: resta il
   bollino piu' piccolo e una velatura in basso per l'etichetta */

/* --- Le testimonianze scorrono, non trattengono ---
   Qui c'era il blocco della lista agganciata: altezza calcolata, righe a
   base fissa, spaziatori da 70svh l'uno. Tolto. Il cliente ha detto la cosa
   giusta — "si e' obbligati a scorrere ogni singolo video" — e per un
   utente che vuole guardarne uno solo la coreografia era un pedaggio.
   Quello che resta e' lo stato di riposo di prima, che era gia' il layout
   giusto: quattro righe aperte una sotto l'altra, ognuna col suo video,
   la pagina che scorre normale e il click che apre il player.
   `.tst-pin` resta perche' e' solo `position:relative` e non aggancia
   niente: e' il contenitore della sezione. */
.tst-pin{position:relative}

/* --- Le righe si aprono scorrendo, ma la pagina non si ferma ---
   Il pin e' stato tolto per una ragione che vale ancora: nessuno deve
   essere obbligato a passare per quattro video per arrivare in fondo. Qui
   torna solo l'apertura, staccata dallo scorrimento: la riga si apre da
   sola quando arriva, e chi scorre dritto scorre dritto.
   `0fr -> 1fr` invece di `max-height`: la riga si apre esattamente quanto
   il suo contenuto, senza un tetto inventato che tronca la citazione piu'
   lunga o lascia un buco sotto la piu' corta. Vuole `min-height:0` sul
   figlio, altrimenti la traccia da 0fr non lo comprime.
   Anche il `padding-bottom` va aperto insieme alla traccia: `min-height:0`
   azzera il contributo del CONTENUTO, non quello dei margini interni, e con
   i 18px di fondo la riga chiusa restava alta 18px invece di zero.
   Nessun `visibility:hidden` sulla riga chiusa: il bottone «Video» resta
   raggiungibile col tab, ed e' voluto — lo script apre la riga sul
   `focusin`, quindi chi ci arriva da tastiera la vede aprirsi sotto il
   fuoco invece di trovarla chiusa e vietata.
   Lo stato di riposo resta quello senza JS: tutte aperte. La classe `.js`
   la mette lo script, quindi senza JS non si chiude niente. */
.tst.js .tst-rowbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.2,1)}
.tst.js .tst-row.aperta .tst-rowbody{grid-template-rows:1fr}
.tst.js .tst-rowin{min-height:0;padding-bottom:0;opacity:0;transform:translateY(12px);transition:opacity .5s ease .1s,transform .5s ease .1s,padding-bottom .6s cubic-bezier(.2,.7,.2,1)}
.tst.js .tst-row.aperta .tst-rowin{opacity:1;transform:none;padding-bottom:18px}
@media (prefers-reduced-motion:reduce){.tst.js .tst-rowbody,.tst.js .tst-rowin,.tst-chev{transition-duration:.01s}}

/* --- 14. faq --- */
/* 340 + 64 + 776 = 1180 */
.faq{display:grid;grid-template-columns:minmax(0,340fr) minmax(0,776fr);gap:clamp(28px, .3rem + 4.13vw, 64px)}
@media (max-width:900px){ .faq{grid-template-columns:minmax(0,1fr)} }

/* apertura con <details>/<summary>: la fisarmonica ce l'ha gia' il browser.
   Niente script, e in cambio arrivano da sole la navigazione da tastiera,
   il ruolo per gli screen reader e la ricerca nel testo chiuso (Ctrl+F). */
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;gap:16px;padding:22px 0;cursor:pointer;list-style:none}
.faq-q::-webkit-details-marker{display:none}   /* via il triangolo di serie */
.faq-q h3{flex:1;color:var(--ink2)}
.faq-ico{color:var(--ink3)}
.faq-q:hover h3{color:var(--ink)}
.faq-q:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
/* aperta: il titolo torna nero, l'icona diventa blu e il piu' perde
   l'asta verticale, cioe' diventa un meno. Stesse due icone del mockup. */
.faq-item[open] .faq-q{padding-bottom:0}
.faq-item[open] .faq-q h3{color:var(--ink)}
.faq-item[open] .faq-ico{color:var(--volt)}
.faq-item[open] .faq-v{display:none}
.faq-a{margin:12px 0 0;padding-bottom:22px;font-size:16px;line-height:1.55;max-width:700px;color:var(--ink2)}

/* --- 15. cta finale --- */
.cta{position:relative;padding:clamp(56px, .3rem + 6.65vw, 96px) 0 clamp(60px, .3rem + 6.93vw, 100px);background:var(--volt);overflow:hidden}
.cta-marchio{height:54px;width:auto;display:block;margin-bottom:28px}
@media (max-width:640px){ .cta-marchio{height:40px;margin-bottom:22px} }
/* 720 + 60 + 400 = 1180 */
.cta-grid{display:grid;grid-template-columns:minmax(0,720fr) minmax(0,400fr);gap:clamp(30px, .3rem + 3.87vw, 60px);align-items:center}
@media (max-width:900px){ .cta-grid{grid-template-columns:minmax(0,1fr)} }

/* --- 16. footer --- */
.ft{padding:clamp(36px, 3.6vw, 52px) 0 clamp(32px, 3.2vw, 46px);background:#010326}
/* La firma in fondo era alta 28px e per meta' trasparente: il posto piu'
   naturale per il marchio era quello dove si vedeva meno. Piena e a 44. */
.ft-marchio{height:44px;width:auto;display:block;flex:0 0 auto}
@media (max-width:640px){ .ft-marchio{height:36px} }
.ft-in{display:flex;align-items:center;gap:clamp(16px, .3rem + 2.6vw, 40px);flex-wrap:wrap}
.ft-copy{margin-left:auto}
.ft-link{color:#C2CADF;transition:color .16s ease}
.ft-link:hover{color:#FFFFFF}
@media (max-width:640px){
  /* in riga servirebbero ~460px fra logo, copyright e i due link */
  .ft-in{flex-direction:column;align-items:flex-start;gap:14px}
  .ft-copy{margin-left:0;order:3}
}

/* --- player video testimonianze --- */
/* il bollino era uno <span>: non cliccabile e non raggiungibile da tastiera.
   Stesso aspetto del mockup, ma come <button>. */
.tst-video{position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;border:none;border-radius:2px;background:var(--volt);font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:#FFFFFF;cursor:pointer;white-space:nowrap}
.tst-video:hover{background:var(--volt2)}
.tst-video:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* Con la finestra aperta la pagina sotto non scorre: `<dialog>` blocca il
   fuoco e i click, ma non la rotella ne' il dito. `overscroll-behavior` sul
   dialogo evita che lo slancio, finito il suo scorrimento, passi alla
   pagina dietro (e' il "rimbalzo" tipico su iOS).
   Con `:has()` e senza script: dove `:has()` non c'e', la pagina scorre
   come prima e non si rompe niente. */
html:has(dialog[open]){overflow:hidden}
.vplayer{border:none;background:none;padding:0;max-width:none;max-height:none;overflow:visible;overscroll-behavior:contain}
.vplayer::backdrop{background:rgba(1,3,38,.82)}
/* --arn e' larghezza/altezza del video (16:9 = 1,7778 · 9:16 = 0,5625).
   La larghezza e' la piu' piccola fra 92vw, 1080px e quella che tiene il
   video dentro l'altezza dello schermo: cosi' la stessa regola vale per gli
   orizzontali di Rosadi e Fogarolo e per il verticale di Fedele, senza che
   siamo noi ad aggiungere bande nere. */
.vplayer-box{--arn:1.7778;position:relative;width:min(92vw, 1080px, 84vh * var(--arn));aspect-ratio:var(--arn);background:#010326;border-radius:6px;box-shadow:0 40px 90px -22px rgba(1,3,38,.7)}
.vplayer-if{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:6px;display:block}
/* z-index: l'iframe di Vimeo viene aggiunto DOPO il bottone, e senza questo
   gli passava sopra nell'angolo dove si sovrappongono (visto dal cliente) */
.vplayer-x{position:absolute;z-index:2;top:-15px;right:-15px;width:36px;height:36px;border:none;border-radius:50%;background:#FFFFFF;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 20px rgba(1,3,38,.45)}
.vplayer-x:hover{background:#EDEFF5}
.vplayer-x:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
@media (max-width:640px){ .vplayer-x{top:-14px;right:-8px;width:32px;height:32px} }

/* --- dettagli dei dispositivi ---
   Quello che fa leggere uno schermo come uno schermo invece che come un
   rettangolo scuro: barra di stato, indicatore home, riflesso sul vetro.
   Restano illustrazioni concettuali, non finte schermate: nessun dato qui
   dentro pretende di essere vero.
   Vivono dentro ai mockup, quindi in pixel fissi: scalano con il
   dispositivo tramite il transform di .fitin, non per conto loro. */
/* Dentro allo schermo il testo eredita chiaro. Senza questa riga qualsiasi
   testo che non dichiara un colore prende --ink (#1D1D1D) dalla pagina e
   finisce scuro su fondo scuro: e' com'era, "Marco B. - Mesociclo 3" stava
   a contrasto 1,09. Vale anche per quello che si aggiungera' domani. */
.scr{color:#E8EEFF}
/* .kicker e' una classe di pagina: dentro allo schermo il suo grigio
   (#656C7D) sta a 2,47. Qui usa il grigio tenue dei mockup.
   .prev sta nell'elenco per lo stesso motivo e non per estetica: i
   pannelli dell'anteprima nella finestra del flusso sono scuri (#11162A)
   ma non passano da .scr, quindi cinque .kicker li' dentro erano rimaste
   col grigio della pagina, a 3,4. Con questo grigio stanno a 6,0.
   Regola generale: ogni fondo scuro nuovo va aggiunto qui, se no il testo
   che non dichiara un colore ci finisce sopra col tema chiaro. */
.scr .kicker,
.prev .kicker{color:#8B94B2}
/* La barra di stato non e' alta 15px: e' alta quanto l'isola piu' il suo
   incasso, come su un telefono vero, e sotto ci vuole aria prima che
   cominci l'app. Il fondo e' in percentuale — che per il padding si
   calcola sulla LARGHEZZA del contenitore, non sull'altezza — perche'
   l'isola e' anch'essa una percentuale della larghezza: cosi' i due si
   muovono insieme su tutti e cinque i telefoni, che vanno da 168 a 306px
   di schermo, invece di andare a numeri fissi telefono per telefono. */
.ph-sb{display:flex;align-items:center;justify-content:space-between;height:15px;padding-bottom:7.5%;box-sizing:content-box;flex:0 0 auto;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:10px;letter-spacing:.06em;color:#FFFFFF}
/* Il telefono della hero ha lo schermo largo 168px, meno della meta' degli
   altri, ma la barra di stato era disegnata alle stesse misure assolute:
   le tre icone si prendevano il 30% della larghezza e finivano sotto
   l'isola. Qui scendono in proporzione al telefono. */
.ph-sb-mini{font-size:9px}
.ph-sb-mini .ph-sb-ico{gap:3px}
.ph-sb-mini .ph-sb-ico svg{height:7px;width:auto}
.ph-sb-ico{display:flex;align-items:center;gap:4px;color:rgba(255,255,255,.8)}
.ph-sb svg{display:block}
/* la barretta in fondo: sta sopra al contenuto, non ne occupa lo spazio */
/* --- i telefoni devono sembrare iPhone ---
   Due segni bastano, e sono quelli che l'occhio usa davvero per riconoscere
   un telefono: l'isola dinamica in cima e il filo di luce sul bordo della
   scocca. L'isola e' in percentuale (31% della larghezza dello schermo, nel
   rapporto vero 125:37) perche' i cinque telefoni della pagina hanno
   larghezze diverse e un valore fisso avrebbe funzionato solo su uno.
   Sta sopra la testata colorata e all'altezza dell'ora, com'e' sul vero. */
/* La vista di compilazione dell'esercizio, sul telefono dell'atleta.
   Prima ogni serie era una riga di testo unica ("60 kg - RPE 7,5"): si
   capiva, ma non somigliava a un campo da compilare. Ora e' una tabellina
   con le sue intestazioni — carico, ripetizioni, RPE — e le colonne della
   testata e delle celle sono le stesse due griglie, quindi restano
   incolonnate a qualunque larghezza il telefono venga scalato.
   I nomi dei parametri sono quelli del prodotto: BUF, RPE, RM, CAR, % CAR,
   MAV (TrainingCardDetailController::PARAM_TYPES). Non inventarne altri. */
.an-cap{display:grid;grid-template-columns:16px minmax(0,1fr);gap:7px;margin-bottom:1px}
.an-cap-in{display:grid;grid-template-columns:minmax(0,1fr) 24px 38px;gap:6px;padding:0 10px}
.an-cap span{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#8B94B2}
.an-riga{display:grid;grid-template-columns:16px minmax(0,1fr);gap:7px;align-items:center}
.an-cella{height:36px;border-radius:4px;display:grid;grid-template-columns:minmax(0,1fr) 24px 38px;gap:6px;align-items:center;padding:0 10px;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:14px;letter-spacing:.06em}
.an-cella-ok{background:rgba(113,146,244,.13);border:1px solid rgba(113,146,244,.45);color:#7192F4}
.an-cella-no{background:#161F44;border:1px solid #2D3A70;color:#8B94B2}
/* La seconda riga del riquadro-serie nel telefono della hero: il riquadro
   e' largo 31px, quindi "RPE 8,0" ci sta solo a 8px. Il telefono
   dell'atleta porta la versione leggibile, questo e' il colpo d'occhio. */
.ph-rpe{font-size:8px;letter-spacing:.04em;opacity:.72;white-space:nowrap}
.ph-isola{position:absolute;z-index:3;left:50%;top:0;margin-top:2.6%;transform:translateX(-50%);width:31%;aspect-ratio:125/37;border-radius:99px;background:#000000;pointer-events:none}
/* outline e non box-shadow: l'ombra dei telefoni e' scritta in linea nel
   markup e vincerebbe sul foglio di stile. L'outline in linea non c'e',
   quindi passa — e segue il raggio degli angoli come serve qui. */
.ph-frame{outline:1px solid rgba(255,255,255,.17);outline-offset:0}
.ph-home{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:32%;height:4px;border-radius:2px;background:rgba(255,255,255,.34);pointer-events:none}
/* Riflesso del vetro. Parte dall'angolo in alto a DESTRA (212deg) e non da
   sinistra: le testate degli schermi hanno il testo in alto a sinistra, e
   di la' il riflesso lo sbiancava. Tenuto basso apposta: deve leggersi come
   vetro, non togliere contrasto a quello che c'e' sotto. */
.ph-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(212deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.022) 18%, rgba(255,255,255,0) 42%)}
/* barra laterale e barra del browser del monitor: icone vere al posto dei
   quadrati vuoti, e' quello che piu' tradiva il mockup */
.mn-nav{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#5F6B94;flex:0 0 auto}
.mn-nav svg{display:block}
.mn-on{background:#7192F4;color:#0B1020}
.mn-chev{display:flex;align-items:center;justify-content:center;color:#8B94B2;flex:0 0 auto}
.mn-chev svg{display:block}
.mn-url{margin-left:6px;flex:1;height:17px;display:flex;align-items:center;padding:0 9px;border-radius:9px;background:#0C122E;border:1px solid #2B3352;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:11px;letter-spacing:.08em;color:#8B94B2;text-transform:uppercase}

/* --- fermo-immagine dei video nella rubrica esercizi ---
   Le immagini vere non ci sono ancora (CLAUDE.md, contenuti mancanti): qui
   il riquadro smette di essere un rettangolo grigio e prende la grammatica
   di un'anteprima video — velatura in basso, bollino play, durata. Resta
   dichiaratamente un segnaposto, non finge una foto. */
.ex-thumb{position:relative;height:88px;display:flex;align-items:center;justify-content:center}
/* velatura: e' quello che sulle anteprime vere rende leggibile la durata */
.ex-thumb::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top, rgba(1,3,38,.55), rgba(1,3,38,0) 46%)}
.ex-play{position:relative;z-index:1;width:26px;height:26px;border-radius:50%;background:rgba(113,146,244,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(113,146,244,.18)}
.ex-dur{position:absolute;z-index:1;right:7px;bottom:6px;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:10px;letter-spacing:.06em;color:#DCE5FF}

/* --- le tre anteprime di "Operativo in tre passaggi" ---
   Sono ritagli di schermate: il taglio a 252px deve leggersi come "la vista
   continua sotto", non come contenuto tranciato. Da qui la sfumatura in
   fondo. Il filo chiaro in alto e' il bordo dello schermo. */
.prev{position:relative;height:252px;overflow:hidden;background:#11162A;border-bottom:1px solid #2D3A70;padding:18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.055)}
/* Niente sfumatura in fondo: l'avevo messa per far leggere il taglio come
   "la vista continua", ma su due pannelli su tre non c'era nessun taglio e
   sbiadiva contenuto vero (i bollini Feedback/Export del terzo). Meglio far
   rientrare il contenuto: ora nessuno dei tre viene tranciato. */

/* --- contenuto dei tre telefoni white label ---
   Erano rettangoli colorati vuoti: era la parte che piu' faceva "mockup".
   Stessa struttura del telefono grande (esercizio in corso, righe della
   scheda, bottone del recupero), con l'accento del brand di turno. I nomi
   degli esercizi sono quelli gia' presenti altrove in pagina. */
.wl-card{border-radius:6px;padding:9px 12px;display:flex;flex-direction:column;justify-content:center;flex:0 0 auto}
.wl-card-t{font-size:13px;font-weight:600;color:#F2F6FF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-card-s{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:12px;letter-spacing:.07em;margin-top:4px}
.wl-row{border-radius:5px;border:1px solid #2D3A70;background:#1E2540;padding:0 12px;height:36px;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.wl-row-t{font-size:12px;color:#C2CADF;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-row-s{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:12px;letter-spacing:.07em;color:#8B94B2;flex:0 0 auto}
.wl-btn{height:44px;border-radius:5px;margin-top:auto;display:flex;align-items:center;justify-content:center;font-family:'Archivo','Arial Narrow',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto;font-size:12px}

/* le barre del grafico crescono dalla base: senza fill-box il transform di
   un rect SVG parte dall'origine della viewBox e la barra scivola via */
.an-barre rect{transform-box:fill-box;transform-origin:50% 100%}

/* Quanto stanno larghi i passi: l'altezza della scatola e' anche il budget
   di scorrimento del passo. Troppo alta e i passi si leggono uno per volta
   con mezzo schermo vuoto in mezzo; troppo bassa e la sezione passa in un
   colpo di rotella. 39/32/34svh lasciano ~260px d'aria fra un testo e
   l'altro: se ne vedono due per schermata e si leggono come una lista.

   --- 6. il flusso: uno schermo che resta agganciato e cambia stato ---
   Lo sticky e' nativo: la posizione la calcola il browser, quindi non puo'
   restare indietro di un frame come faceva il pin via JS. GSAP anima solo
   il cambio di stato, e i tre stati sono sovrapposti in assoluto: cambiarli
   non tocca il layout e la pagina non si sposta.
   Stato di riposo (senza JS): i tre schermi stanno uno sotto l'altro e si
   leggono tutti. Le regole sotto .flow.js valgono solo a coreografia
   accesa. */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px, .3rem + 4.1vw, 64px)}
.flow-passo{min-height:39svh;display:flex;flex-direction:column;justify-content:center}
/* La testata del passo: numero e titolo sulla stessa linea di base, poi la
   descrizione. Sta in tre classi e non negli attributi `style` perche' i
   passi sono undici su tre sezioni diverse — e perche' «uguale a come
   funziona» deve restare vero anche fra sei mesi, il che con lo stile
   copiato undici volte non succede. */
.flow-cap{display:flex;align-items:baseline;gap:12px}
/* Acceso o spento e' un cambio di colore, non di opacita'. A 0,42 di
   opacita' il titolo inattivo faceva 2,61:1 su bianco e la descrizione
   1,90:1: sotto la soglia AA, e su telefono i passi non attivi sono spesso
   gli unici che si vedono — in palestra, in piena luce, sparivano.
   --ink3 fa 5,26:1 su bianco e 4,70:1 su --bg2 anche da spento. Il numero
   era #8792AE, cioe' 2,78:1 su --bg2 anche da ACCESO: passa a --ink3 e ci
   resta, acceso o spento. */
.flow-num{color:var(--ink3)}
.flow.js .flow-cap h3,
.flow.js .flow-testo{transition:color .5s ease}
.flow.js:not(.a-passi) .flow-passo:not(.attivo) .flow-cap h3,
.flow.js:not(.a-passi) .flow-passo:not(.attivo) .flow-testo{color:var(--ink3)}
@media (max-width:900px){ .flow.js .flow-cap h3,.flow.js .flow-testo{transition-duration:.34s} }
.flow-testo{margin-top:12px;font-size:17px;line-height:1.5;color:var(--ink2)}
.flow-schermo{position:relative}
.flow-dev{position:sticky;top:calc(50svh - 185px);border-radius:10px;overflow:hidden;background:#0D1430;border:1px solid #2D3A70;box-shadow:0 2px 6px rgba(1,3,38,.10),0 40px 84px -28px rgba(11,43,140,.42)}
.flow-chrome{height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#0C122E;border-bottom:1px solid #2B3352}
.flow-chrome > span{width:8px;height:8px;border-radius:50%;background:#414B72;flex:0 0 auto}
.flow-chrome > .flow-url{width:auto;height:18px;flex:1;margin-left:8px;display:flex;align-items:center;padding:0 9px;border-radius:9px;background:#151B33;border:1px solid #2B3352;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:10px;letter-spacing:.08em;color:#8B94B2;text-transform:uppercase}
.flow-stati{position:relative}

/* a coreografia accesa: gli stati si sovrappongono, quindi il cambio non
   sposta nulla. L'altezza e' quella di un pannello solo. */
/* La finestra e' la protagonista della sezione, quindi va ingrandita.
   Lo faccio con transform e non ridisegnando i pannelli: scala anche il
   testo del mockup (che passa da ~10 a ~13px, piu' leggibile) e soprattutto
   non tocca il layout. La scala sta su .prev e non su .flow-stato, che e'
   l'elemento che anima GSAP: se no si sovrascriverebbero il transform. */
.flow.js .flow-stati{height:calc(252px * 1.34)}
.flow.js .flow-stato{position:absolute;inset:0}
.flow.js .prev{transform:scale(1.34);transform-origin:top left;width:calc(100% / 1.34)}
/* Senza coreografia niente resta agganciato. Lo stato di riposo promesso
   qui sopra — i tre schermi uno sotto l'altro, tutti leggibili — non reggeva
   sui telefoni: lo sticky di .flow-schermo sotto i 900px valeva sempre,
   mentre la sovrapposizione degli stati vale solo con .js. Con «riduci
   animazioni», con JavaScript spento o con cdnjs bloccato da un ad-blocker
   il controllore non aggiunge .js, i tre stati si impilano e restava uno
   schermo agganciato alto 820px su 915: fascia libera 29px, il testo dei
   passi scorreva tutto sotto (misurato, audit dell'11/9). Stessa cosa sopra
   i 900 con .flow-dev e .flow-tel, piu' alti dello schermo.
   Una regola sola e con JS acceso non cambia niente: :not(.js) pesa quanto
   una classe, quindi batte le regole sticky di base e quella dentro la media
   query senza bisogno di riordinarle. E vale anche quando il controllore va
   in errore, perche' ctx.revert() toglie .js. */
.flow:not(.js) .flow-schermo,
.flow:not(.js) .flow-dev,
.flow:not(.js) .flow-tel{position:static}

/* --- Su telefono: ogni passo con la sua schermata ---
   Niente due colonne e niente aggancio. Fino al 13/9 la schermata restava
   agganciata in alto e il testo dei passi le scorreva sotto: provandolo, il
   cliente ha detto che la parte bassa non si leggeva bene, ed era cosi'
   anche con la linea calcolata — la fascia libera e' la meta' bassa dello
   schermo, dove l'occhio non legge e dove sta il pollice.
   Ora ogni passo e' un blocco: numero, titolo, testo, e sotto la schermata
   gia' nello stato di quel passo. Le copie della schermata le fa il
   controllore (`aPassi` in index.html) e le mette in una `.flow-busta`
   dentro il passo; la classe `.a-passi` sul blocco dice che e' fatto.
   Senza JavaScript resta la schermata sola sopra l'elenco dei passi, con
   gli stati uno sotto l'altro: si legge tutto lo stesso. */
@media (max-width:900px){
  .flow{display:flex;flex-direction:column;gap:0}
  .flow-schermo{order:-1;width:100%;margin-bottom:26px}
  .flow-dev{position:static}
  /* tre classi e non una: le altezze da desktop di rubrica e app
     (`.flow-rub .flow-passo`, 32 e 34svh) vengono dopo nel file e a pari
     peso vincerebbero anche qui */
  .flow .flow-testi > .flow-passo{min-height:0;display:block;padding-bottom:clamp(48px, 13vw, 72px)}
  .flow.a-passi .flow-tel{position:static}
  /* Dal 14/9 i passi sono una fascia che scorre di lato, come i tre telefoni
     del white label: impilati, le tre sezioni costavano 2.000-2.850px l'una.
     Ogni slide e' schermata sopra e testo sotto, cosi' le schermate restano
     alla stessa altezza anche quando i testi sono lunghi diversi.
     La fascia esce dai margini di pagina e la slide lascia 30px: da fermi
     si affaccia quella dopo, e si capisce che scorre. Allineamento a
     sinistra con `scroll-padding` pari al margine: la prima slide parte
     dove parte il testo della pagina. 520px di tetto perche' su iPad una
     schermata larga quanto la colonna non starebbe nella finestra. */
  .flow.a-passi .flow-testi{
    display:flex;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) 4px;
    scroll-padding-inline:var(--gut);scrollbar-width:none;
  }
  .flow.a-passi .flow-testi::-webkit-scrollbar{display:none}
  .flow.a-passi .flow-testi > .flow-passo{flex:0 0 min(100% - 30px, 520px);display:flex;flex-direction:column;justify-content:flex-start;padding:0;scroll-snap-align:start}
  .flow.a-passi .flow-busta{order:-1}
  .flow.a-passi .flow-schermo{margin:0 0 20px}
  .flow.a-passi .flow-coda{padding-top:18px}
  /* Il telefono dell'app e' inclinato e fluttua di 12px verso l'alto: la
     fascia, che scorre, taglia tutto quello che esce dal suo bordo, e il
     telefono restava mozzato in cima, appiccicato al sottotitolo. 28px di
     aria sopra lo tengono intero anche in cima al galleggiamento. */
  .flow-app.a-passi .flow-testi{padding-top:28px}
}

/* --- 7. rubrica: stessa sezione agganciata, ma in modalita' reattiva ---
   Qui la finestra e' una sola e reagisce a data-passo. Niente tre copie
   della griglia: e' la stessa UI che risponde, che e' anche piu' vicina a
   quello che fa il prodotto vero. */
.flow-rub .flow-passo{min-height:32svh}
.flow-rub .flow-dev{top:calc(50svh - 205px)}
.flow-rub .flow-vista{padding:16px 18px 18px;position:relative;overflow:hidden}
/* Il foglio della nota: sale dal basso al passo 3, come i fogli del telefono
   nell'app atleta. Stessa lingua, stesso meccanismo. */
.rub-nota{position:absolute;left:0;right:0;bottom:0;padding:14px 18px 16px;background:#101A38;border-top:1px solid #2D3A70;box-shadow:0 -18px 40px -14px rgba(1,3,38,.8);transform:translateY(104%);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.flow-rub[data-passo="3"] .rub-nota{transform:none}
.flow-rub[data-passo="3"] .rub-grid > div:not(:first-child){opacity:.22}
.flow-rub[data-passo="3"] .rub-grid > div:first-child{position:relative;z-index:2;box-shadow:0 0 0 2px rgba(113,146,244,.5)}
/* dentro la finestra siamo nell'app, e l'app e' scura: i riquadri perdono
   la veste chiara che avevano quando stavano sulla pagina */
/* I colori dei riquadri stanno QUI e non in linea nel markup apposta:
   in linea vincevano sul foglio di stile, e la griglia restava bianca
   dentro una finestra scura. Il riquadro di caricamento per giunta aveva
   il tratteggio blu scuro su fondo scuro, cioe' invisibile: era quello che
   faceva sembrare che al passo "Carichi i tuoi video" non succedesse
   niente. Dentro la finestra siamo nell'app, e l'app e' scura. */
.flow-rub .rub-grid > div{background:#161F44;border:1px solid #2D3A70;transition:opacity .45s ease, transform .45s ease, box-shadow .45s ease}
.flow-rub .rub-grid > div > div:last-child > div:first-child{color:#DCE5FF}
.flow-rub .rub-grid .kicker{color:#8B94B2}
.flow-rub .rub-grid > div:last-child{background:rgba(113,146,244,.10);border:1px dashed rgba(113,146,244,.55)}
.flow-rub .rub-grid > div:last-child .kicker{color:#7192F4}
.flow-rub .rub-grid > div:last-child svg path{stroke:#7192F4}
/* le reazioni: solo opacity e transform, niente che tocchi il layout */
/* I filtri stanno dentro la finestra scura: col chip chiaro davano
   contrasto 1.50 e 2.89 su #0D1430, cioe' la riga di cui parla il primo
   passo era quasi invisibile. */
.flow-rub .flow-vista .chip{background:transparent;border-color:#2D3A70;color:#8B94B2;transition:background .4s ease, border-color .4s ease, color .4s ease}
.flow-rub .flow-vista .chip:first-child{background:rgba(113,146,244,.10);border-color:rgba(113,146,244,.5);color:#7192F4}
.flow-rub .ex-play{transition:transform .45s ease}

/* Ogni passo accende quello di cui parla, non un elemento a caso:
   0 = i filtri, 1 = il caricamento, 2 = il video che l'atleta guarda. */
.flow-rub[data-passo="0"] .rub-grid > div{opacity:.4}
.flow-rub[data-passo="0"] .flow-vista .chip{border-color:rgba(113,146,244,.45);color:#B9C6F0}
.flow-rub[data-passo="0"] .flow-vista .chip:first-child{background:rgba(113,146,244,.22);border-color:rgba(113,146,244,.75);color:#FFFFFF}
.flow-rub[data-passo="1"] .rub-grid > div:not(:last-child){opacity:.26}
.flow-rub[data-passo="1"] .rub-grid > div:last-child{position:relative;z-index:2;transform:scale(1.08);background:rgba(113,146,244,.18);box-shadow:0 0 0 2px rgba(113,146,244,.55),0 18px 40px -12px rgba(1,3,38,.7)}
.flow-rub[data-passo="2"] .rub-grid > div:not(:first-child){opacity:.26}
.flow-rub[data-passo="2"] .rub-grid > div:first-child{position:relative;z-index:2;transform:scale(1.08);box-shadow:0 0 0 2px rgba(113,146,244,.55),0 18px 40px -12px rgba(1,3,38,.7)}
/* il tasto play che si ingrossa e' quello che dice "sta guardando
   l'esecuzione", che e' il passo di cui si parla; l'anello da solo diceva
   soltanto "selezionato" */
.flow-rub[data-passo="2"] .rub-grid > div:first-child .ex-play{transform:scale(1.85)}

/* --- 8. app atleta: il telefono resta agganciato e reagisce ---
   Un telefono solo, quattro reazioni. Le funzioni non sono quattro
   schermate diverse: sono cose che succedono sulla stessa schermata, che e'
   anche come funziona davvero l'app. */
.flow-app .flow-passo{min-height:34svh}
.flow-app .flow-coda{padding-top:8px}
.flow-tel{position:sticky;top:calc(50svh - 286px)}

/* bollino offline: compare quando si parla di salvataggio offline */
.tel-badge{position:absolute;top:42px;right:14px;z-index:3;height:20px;padding:0 9px;border-radius:10px;background:rgba(113,146,244,.16);border:1px solid rgba(113,146,244,.5);color:#A9BEFB;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;opacity:0;transform:translateY(-6px);transition:opacity .4s ease, transform .4s ease}
.flow-app[data-passo="1"] .tel-badge{opacity:1;transform:none}
/* Il passo dell'offline era solo una pastiglia in alto a destra: c'era ma
   non si vedeva, e quel passo e' proprio quello che deve rassicurare —
   "in sala pesi senza campo l'allenamento non si perde". Ora al centro
   dello schermo compare la conferma, con l'app che si vela dietro, e la
   pastiglia resta sopra al velo cosi' si legge ancora: e' il segnale
   persistente che un'app offline mostra davvero.
   Le parole sono quelle del passo, non una versione nuova. */
.tel-offline{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:0 22px;background:rgba(1,3,38,.74);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);opacity:0;visibility:hidden;transition:opacity .42s ease,visibility 0s linear .42s}
.flow-app[data-passo="1"] .tel-offline{opacity:1;visibility:visible;transition-delay:0s}
.tel-offline-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:20px 18px 22px;border-radius:12px;background:#18224A;border:1px solid #3A477E;box-shadow:0 22px 46px -14px rgba(0,0,0,.75);transform:scale(.94);transition:transform .42s cubic-bezier(.2,.8,.3,1)}
.flow-app[data-passo="1"] .tel-offline-card{transform:none}
.tel-offline-ico{width:46px;height:46px;border-radius:50%;background:rgba(113,146,244,.16);border:1px solid rgba(113,146,244,.5);color:#7192F4;display:flex;align-items:center;justify-content:center}
.tel-offline-t{font-family:'Archivo','Arial Narrow',sans-serif;font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:#FFFFFF}
.tel-offline-p{margin:0;font-size:12px;line-height:1.42;color:#C2CADF;max-width:20ch}
/* la pastiglia sta sopra al velo: dimmata sarebbe sparita due volte */
.tel-badge{z-index:6}

/* i due pannelli salgono dal basso: transform, quindi non toccano il layout */
.tel-sheet{position:absolute;left:8px;right:8px;bottom:10px;z-index:4;background:#151B33;border-top:1px solid #2D3A70;border-radius:14px;padding:13px 15px 15px;transform:translateY(calc(100% + 18px));transition:transform .55s cubic-bezier(.2,.7,.2,1);box-shadow:0 -18px 40px -14px rgba(1,3,38,.75)}
.tel-sheet-t{font-family:'Archivo','Arial Narrow',sans-serif;font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#EAF0FF;margin-bottom:10px}
.tel-riga{display:flex;align-items:center;gap:9px;height:26px;font-size:11px;color:#C2CADF}
.tel-riga > span:first-child{flex:0 0 82px}
.tel-bar{flex:1;height:5px;border-radius:3px;background:#242C4A;overflow:hidden}
.tel-bar > i{display:block;height:100%;border-radius:3px;background:#7192F4}
.tel-file{gap:8px;color:#C2CADF}
.tel-file svg{color:#8B94B2;flex:0 0 auto}
.flow-app[data-passo="2"] .tel-check{transform:none}
.flow-app[data-passo="3"] .tel-doc{transform:none}

/* al primo passo si parla di timer: il tasto del recupero si accende */
.an-tasto{transition:box-shadow .4s ease}
.flow-app[data-passo="0"] .an-tasto{box-shadow:0 0 0 3px rgba(113,146,244,.35)}

/* Il badge del piano in evidenza: era tutto in stile in linea, e a 12px
   maiuscolo condensato nel punto in cui si sceglie il piano. */
.badge-top{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:12px;color:#FFFFFF}

/* --- etichette: 13px e' il pavimento su telefono ---
   Le maiuscolette condensate della pagina stavano a 11-12px: su un telefono
   in mano, con la luce di una palestra, un condensato maiuscolo di 11px e'
   testo che si indovina, non che si legge. Dentro i mockup restano dove
   sono (li' sono immagine di un'interfaccia, non testo), e cosi' i valori
   dipinti sul corpo della mappa, che a 13px si sovrapporrebbero.
   `!important` solo dove la misura e' scritta in linea nel markup: quelle
   righe passano in classe al giro di /impeccable polish, e allora cade. */
@media (max-width:640px){
  .chip{font-size:13px}
  .tst-tag{font-size:13px}
  .mm-sub,.mm-cap,.mm-sett-val,.mm-fig figcaption{font-size:13px}
  .kicker[style*="font-size:11px"]{font-size:13px!important}
  .badge-top{font-size:13px}
}

/* --- ritocchi per gli schermi stretti ---
   Raccolti qui e non sparsi nelle sezioni perche' rispondono tutti alla
   stessa domanda: cosa si rompe quando la colonna scende sotto i 340px. */
@media (max-width:520px){
  /* La foto da 72 lasciava 137px al nome, e «Ilario Fogarolo» e «Coach e
     preparatore» andavano a capo in mezzo. A 56 ne restano 153 e stanno
     su una riga. Vale anche per le due senza video, cosi' le sei
     testimonianze hanno la stessa faccia. */
  .tst-foto{width:56px;height:56px}
  .tst .tst-rowhead{gap:12px}
}
@media (max-width:380px){
  /* I due dati affiancati stanno in 100px l'uno: «169,7 set a settimana,
     media del blocco» non ci entra e sbordava di 7px. In colonna ci sta. */
  .tech-stats{flex-direction:column;gap:14px}
  /* e la levetta dei prezzi si stringe (vedi --bw sopra). Il testo non si
     tocca: «Annuale −16%» misura 90px, quindi in un'opzione da 132 ci sta
     con 21px di aria per lato. */
  .bswitch{--bw:132px}
}

/* --- Banner dei cookie di iubenda, con i colori e il marchio del sito ---
   Il banner lo disegna lo script di iubenda, e il piano del cliente non
   accetta colori e logo passati dalla pagina (`_iub.csConfiguration`):
   provato il 14/9, prendeva solo lo sfondo e lasciava il testo bianco su
   bianco. Quindi si veste da qui. `html body` davanti e `!important` perche'
   le regole di iubenda sono `#iubenda-cs-banner ...` con `!important`, e
   arrivano dopo questo foglio.
   Lo stesso disegno del pannello «Tutto in un'unica piattaforma»: testata
   blu con il marchio bianco, corpo bianco, bottoni del sito. «Accetta» e
   «Rifiuta» restano identici: per il Garante le due scelte devono pesare
   uguale. «Created with iubenda» non si tocca.
   Se un giorno iubenda rinomina le sue classi, queste regole smettono di
   valere e torna il banner standard: brutto, ma funzionante. */
/* Il nero di fondo e il bianco del testo iubenda li scrive IN LINEA su
   .iubenda-cs-content, con !important: da un foglio non si scavalcano.
   Il bianco va quindi sul figlio .iubenda-cs-rationale, che copre tutto
   il riquadro sotto la testata; qui restano bordo, angoli e ombra. */
html body #iubenda-cs-banner .iubenda-cs-content{
  border:1px solid var(--line2)!important;border-radius:6px!important;
  box-shadow:0 2px 6px rgba(1,3,38,.08),0 24px 56px -18px rgba(1,3,38,.38)!important;
}
html body #iubenda-cs-banner .iubenda-cs-content::before{
  content:'';display:block;flex:0 0 auto;height:58px;
  background:url(assets/logo-pu-white.svg) no-repeat 16px center / auto 30px,linear-gradient(150deg,var(--volt),var(--volt2));
}
html body #iubenda-cs-banner .iubenda-cs-rationale{background:var(--panel)!important}
/* la famiglia per esteso e non `inherit`: i contenitori sopra hanno quella
   di iubenda, sempre in !important */
html body #iubenda-cs-banner #iubenda-cs-paragraph,
html body #iubenda-cs-banner #iubenda-cs-paragraph .iub-p,
html body #iubenda-cs-banner #iubenda-cs-paragraph strong{color:var(--ink2)!important;font-family:'Barlow','Helvetica Neue',Arial,sans-serif!important}
html body #iubenda-cs-banner #iubenda-cs-paragraph strong{color:var(--ink)!important}
html body #iubenda-cs-banner #iubenda-cs-paragraph a{color:var(--volt)!important}
html body #iubenda-cs-banner .iubenda-cs-opt-group button{
  font-family:'Archivo','Arial Narrow',sans-serif!important;font-variation-settings:'wdth' 88;
  font-weight:800!important;text-transform:uppercase!important;letter-spacing:.03em!important;
  border-radius:3px!important;transition:background-color .14s ease,border-color .14s ease!important;
}
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn{background-color:var(--volt)!important;color:#FFFFFF!important;border:1px solid var(--volt)!important}
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn:hover,
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn:hover{background-color:var(--volt-hover)!important}
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn{background-color:transparent!important;color:var(--ink)!important;border:1px solid var(--line2)!important}
html body #iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn:hover{background-color:#EDEFF5!important}
html body #iubenda-cs-banner .iubenda-cs-opt-group button:focus-visible{outline:2px solid var(--volt)!important;outline-offset:2px!important}

/* --- Il pannello delle preferenze di iubenda («Scopri di più e personalizza») ---
   Stessa veste del banner. Qui iubenda scrive in linea il bianco di fondo
   dell'intestazione (`background-color`, `!important`): non lo tocca
   nessuno, ma l'immagine di sfondo non e' coperta da quella regola, e la
   testata blu col marchio si dipinge sopra come `background-image`.
   Gerarchia dei bottoni: «Rifiuta tutto» e «Accetta tutto» uguali e
   secondari (come nel pannello di iubenda), «Salva e continua» e' l'unico
   pieno. Gli interruttori accesi prendono il blu del sito; quelli spenti
   restano scuri (--ink3, 5,3:1 sul bianco) perche' un grigio chiaro non si
   distinguerebbe dal fondo (serve 3:1). */
html body #iubenda-iframe{background-color:rgba(1,3,38,.72)!important}
html body #iubenda-iframe #iubenda-iframe-popup,
html body #iubenda-iframe #iubenda-iframe-content{border-radius:6px!important}
html body #iubenda-iframe #iubenda-iframe-content,
html body #iubenda-iframe #iubenda-iframe-content :where(p,div,span,button,a,label,li,h2,h3,h4){font-family:'Barlow','Helvetica Neue',Arial,sans-serif!important}
html body #iubenda-iframe #purposes-container{
  background-image:url(assets/logo-pu-white.svg),linear-gradient(150deg,var(--volt),var(--volt2))!important;
  background-repeat:no-repeat,no-repeat!important;background-position:center,0 0!important;background-size:auto 30px,100% 100%!important;
}
/* Solo `color`: la freccia e' un tratto `stroke="currentColor"` con
   `fill="none"`. Il 14/9 le avevo dato anche `fill`, e la «<» si chiudeva in
   un triangolo pieno, che sembrava un tasto «play». */
html body #iubenda-iframe #purposes-container .iub-btn-back{color:#FFFFFF!important;border-color:rgba(255,255,255,.45)!important;background:transparent!important}
html body #iubenda-iframe #purposes-container .iub-iframe-brand-button{background-color:rgba(255,255,255,.92)!important}
html body #iubenda-iframe #iubenda-iframe-content .purposes-header-title,
html body #iubenda-iframe #iubenda-iframe-content .purposes-section-header-title{
  font-family:'Archivo','Arial Narrow',sans-serif!important;font-variation-settings:'wdth' 84;font-weight:800!important;
  text-transform:uppercase!important;letter-spacing:-.005em!important;color:var(--ink)!important;
}
html body #iubenda-iframe #iubenda-iframe-content .purposes-header-title{font-size:clamp(24px, 1rem + 1.4vw, 34px)!important;line-height:1!important}
html body #iubenda-iframe #iubenda-iframe-content .purposes-section-header-title{font-size:20px!important;line-height:1.1!important}
html body #iubenda-iframe #iubenda-iframe-content :where(.purposes-header-text,.purposes-section-header-text,.purposes-item-body){color:var(--ink2)!important}
html body #iubenda-iframe #iubenda-iframe-content .purposes-item-title > div{color:var(--ink)!important;font-weight:600!important}
html body #iubenda-iframe #iubenda-iframe-content .purposes-item-title-btn{color:var(--volt)!important}
html body #iubenda-iframe #iubenda-iframe-content .purposes-btn-accept,
html body #iubenda-iframe #iubenda-iframe-content .purposes-btn-reject{
  background-color:transparent!important;color:var(--ink)!important;border:1px solid var(--line2)!important;border-radius:3px!important;
  font-family:'Archivo','Arial Narrow',sans-serif!important;font-variation-settings:'wdth' 88;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.03em!important;
}
html body #iubenda-iframe #iubenda-iframe-content .purposes-btn-accept:hover,
html body #iubenda-iframe #iubenda-iframe-content .purposes-btn-reject:hover{background-color:#EDEFF5!important}
html body #iubenda-iframe #iubenda-iframe-content .iub-toggle-checkbox input:checked{background-color:var(--volt)!important;border-color:var(--volt)!important}
html body #iubenda-iframe #iubenda-iframe-content .iub-toggle-checkbox input:not(:checked){background-color:var(--ink3)!important;border-color:var(--ink3)!important}
html body #iubenda-iframe #iubFooterBtn{
  background-color:var(--volt)!important;color:#FFFFFF!important;border-radius:3px!important;
  font-family:'Archivo','Arial Narrow',sans-serif!important;font-variation-settings:'wdth' 88;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.03em!important;
}
html body #iubenda-iframe #iubFooterBtn:hover{background-color:var(--volt-hover)!important}
html body #iubenda-iframe :is(button,a,input):focus-visible{outline:2px solid var(--volt)!important;outline-offset:2px!important}
/* sulla testata blu il contorno blu sparirebbe */
html body #iubenda-iframe #purposes-container :is(button,a):focus-visible{outline-color:#FFFFFF!important}

/* --- Il bottoncino delle preferenze iubenda e la barra CTA ---
   Dopo una scelta iubenda lascia un bottone fisso in basso a destra, a 16px
   dall'angolo: e' esattamente dove sta la barra CTA, e ci finiva sopra
   (su telefono sul bottone «Inizia i 15 giorni gratis», sul desktop sul suo
   angolo — misurato). Finche' la barra e' visibile il bottone sale sopra di
   lei, allineato al suo bordo destro, con 10px d'aria; quando la barra sparisce torna nell'angolo.
   Le misure sono quelle della barra: 22px dal fondo e 68 d'altezza sul
   desktop, max(14px, safe-area) e 66 sotto i 900. Se cambia la barra,
   cambiano qui. Senza :has (Safari prima della 15.4) resta com'era. */
html:has(#cta-flot.vede) body .iubenda-tp-btn[data-tp-float]{
  margin:0!important;right:var(--gut)!important;bottom:calc(22px + 68px + 10px)!important;
}
html body .iubenda-tp-btn[data-tp-float]{transition:bottom .3s cubic-bezier(.2,.7,.3,1),right .3s cubic-bezier(.2,.7,.3,1)!important}
@media (max-width:900px){
  html:has(#cta-flot.vede) body .iubenda-tp-btn[data-tp-float]{bottom:calc(max(14px, env(safe-area-inset-bottom)) + 66px + 10px)!important}
}