/*  BA — hero e dimostrazione della homepage (28/09/2026)
 *
 *  Caricato SOLO da index.html. Ogni regola vive dentro .v2 e i token stanno
 *  su .v2 invece che su :root: le altre dieci pagine e ba.css non vedono
 *  niente di tutto questo.
 *
 *  Nove classi sono state rinominate (hero, demo, btn, wrap, cellgrid, arw,
 *  eur, is-on, hero__in -> v*) perche' esistono gia' in ba.css con un altro
 *  significato: annidare non basta, le proprieta' che l'altro foglio dichiara
 *  e questo no continuerebbero ad applicarsi.
 *
 *  GENERATO da anteprima/hero-v4/ + anteprima/storytelling/. Non si modifica
 *  qui: si cambia la sorgente e si rigenera, altrimenti le copie divergono.
 */
/* ==========================================================================
   HERO V4 — anteprima isolata (28/09/2026)

   Applica i token di DESIGN_SYSTEM_V2 (scala tipografica a 9 passi, movimento
   a 4 durate, breakpoint nominati) piu' la direzione data da Tommy il 28/09:
   graphite freddi al posto del nero uniforme, linee poco contrastate, giallo
   raro e solo funzionale, Dela Gothic One su un solo elemento.

   Costo misurato: CSS 23,9 KB non compressi / 7,7 KB gzip. Tutta la hero
   (html+css+js) sta in 12,7 KB gzip. Una sola immagine — il badge del marchio,
   8 KB webp, gia' in produzione — zero richieste esterne, zero font nuovi:
   usa i cinque tagli gia' presenti nel sito.

   Primo viewport misurato a 390 x 700 UTILI (non 844): titolo 87, valore 209,
   porte 337→512 con entrambi i prezzi, prodotto dai 537 — 163 px dentro la
   prima schermata. Su 390 x 640 restano 103 px: l'obiettivo tiene anche sul
   telefono piu' stretto.

   Contrasti misurati: testo 15,52:1 · secondario 6,40:1 · terziario 4,88:1
   su fondo · bordo interattivo 4,36:1 (WCAG 1.4.11 chiede 3:1).
   ========================================================================== */

/* ---- 1. TOKEN ---------------------------------------------------------- */
.v2{
  color-scheme: dark;

  /* fondo e superfici: tre graphite a un passo l'uno dall'altro, freddi */
  --void:#111111;          /* il piano di lavoro (colore di marca, invariato) */
  --g1:#16171A;            /* pannello  */
  --g2:#1B1D21;            /* cella, dato, campo */
  --g3:#23262B;            /* attivo, selezionato */

  /* linee: bianco a bassa opacita', mai grigio pieno.
     Una linea piena a #2A2A2A su fondo scuro legge come un bordo di tabella;
     il bianco all'8% legge come una piega della luce. E' tutta qui la
     differenza fra "riquadro" e "superficie". */
  --hair:rgba(206,214,226,.075);
  --hair-2:rgba(206,214,226,.135);

  /* testo */
  --white:#FFFFFF;         /* gerarchia primaria */
  --paper:#E7E9EC;         /* testo corrente */
  --muted:#9AA0A8;         /* secondario */
  --dim:#7C828B;           /* note, etichette, bordi interattivi */
  /* un solo gradino fra dim e muted, e serve a un solo lavoro: la riga tecnica
     dentro le porte. E' quella che spiega perche' uno costa 39 e l'altro 169,
     quindi non puo' essere la piu' debole della scheda — ma portarla a --muted
     (+47%) la pareggerebbe alla qualifica e appiattirebbe la gerarchia.
     Misurato: 5,29:1 sul pannello, +14% rispetto a --dim. */
  --dim-2:#868C95;

  /* l'unico accento. Compare solo dove c'e' azione, decisione, stato attivo
     o un dato che decide. Mai come decorazione. */
  --amber:#FFC107;
  --amber-hi:#FFD34D;
  --amber-lo:#E0A800;
  --amber-soft:rgba(255,193,7,.10);
  --amber-line:rgba(255,193,7,.38);
  --on-amber:#111111;

  /* tipografia */
  --display:"Dela Gothic One","Arial Black",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Consolas","Liberation Mono",Menlo,monospace;

  --t-display:clamp(2.05rem, 1.15rem + 3.5vw, 3.35rem);
  --t-lead:clamp(1rem, .96rem + .35vw, 1.125rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-label:.6875rem;
  --t-micro:.625rem;

  /* spazio: passo 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --wrap:1280px;
  --gut:clamp(20px, 4vw, 48px);
  --r:3px;                 /* raggio da cella di foglio di calcolo */

  /* movimento: quattro durate, tre curve */
  --m-istante:90ms; --m-rapido:160ms; --m-normale:240ms; --m-ampio:420ms;
  --e-standard:cubic-bezier(.2,0,0,1);
  --e-entrata:cubic-bezier(0,0,0,1);
}


/* ---- 2. BASE ----------------------------------------------------------- */.v2 .vwrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}


/* cifre allineate: i numeri di questo sito sono dati, non parole */
.v2 .porta__p,.v2 .vol__v,.v2 .ader b,.v2 .app__meta,.v2 .anno__leg{font-variant-numeric:tabular-nums}


/* il simbolo € non e' mai in Dela Gothic One: quel glifo e' cosi' pesante che
   le barrette spariscono e "39 €" si legge "39 C". */
.v2 .veur,.v2 .pct{font-family:var(--body);font-weight:500}


/* ---- 3. MARCHIO --------------------------------------------------------
   Il protagonista della hero e' il prodotto, non il nome del marchio: qui la
   barra fa un passo indietro. Il cerchio disegnato in CSS era un segnaposto
   da startup tech — al suo posto c'e' il badge vero, e il nome scende di
   corpo e di contrasto. Si legge, non si annuncia. */

/* ---- 4. HERO: impianto ------------------------------------------------- */
.v2 .vhero{position:relative;padding-block:var(--s7) var(--s8);overflow:hidden}


/* il reticolo di celle: la texture del prodotto, non una decorazione astratta.
   Resta sotto la soglia della coscienza (bianco al 2,5%). */
.v2 .vcellgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(206,214,226,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(206,214,226,.025) 1px, transparent 1px);
  background-size:72px 40px;
  mask-image:radial-gradient(120% 75% at 70% 0%, #000 0%, transparent 72%);
}

/* Su telefono la hero e' UNA colonna sola e l'ordine non coincide con quello
   del documento: la rassicurazione deve stare sotto il prodotto, non prima.
   `display:contents` su .voce scioglie il contenitore e lascia che occhiello,
   titolo, sottotitolo, porte, prodotto e nota si ordinino tutti allo stesso
   livello. Nessuna duplicazione nel markup, nessun ordine di lettura rotto. */
.v2 .vhero__in{position:relative;display:flex;flex-direction:column}


/* ---- 5. LA VOCE -------------------------------------------------------- */
.v2 .occhiello{
  display:flex;align-items:center;gap:var(--s2);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin-bottom:var(--s5);
}
.v2 .occhiello__p{width:5px;height:5px;background:var(--amber);border-radius:50%;flex:none}


/* L'UNICO display della pagina. Due frasi: la prima constata, la seconda
   e' il pagamento. Il salto e' di BIANCO, non di colore. */
.v2 .titolo{
  font-family:var(--display);font-weight:400;
  font-size:var(--t-display);line-height:1.08;letter-spacing:-.018em;
  color:var(--paper);margin-bottom:var(--s5);text-wrap:balance;
}
.v2 .titolo b{font-weight:400;color:var(--white)}
.v2 .sub{
  font-size:var(--t-lead);line-height:1.6;color:var(--muted);
  max-width:46ch;margin-bottom:var(--s6);
}


/* L'ancora di valore: una riga sola, subito sotto il sottotitolo e subito
   sopra la scelta. E' il punto in cui il prezzo smette di essere un numero e
   diventa un confronto, quindi ha un trattamento suo — peso 500, bianco pieno
   contro il grigio del sottotitolo, interlinea piu' stretta, barra ambra.
   Frase-manifesto: niente virgolette, niente firma.

   ⭐ L'UNICO CORSIVO DEL SITO, e deve restare l'unico: un corsivo che compare
   una volta sola e' un segnale, ripetuto e' decorazione. E' corsivo VERO —
   il 28/09 e' entrato in fonts.css un sesto taglio self-hosted (Inter Italic
   500 latin, 25 KB). Senza quel taglio `font-style:italic` avrebbe fatto
   inclinare il tondo dal browser: l'obliqua sintetica, cioe' esattamente la
   cosa da non fare su una frase che deve sembrare editoriale.
   Il taglio e' precaricato nell'head: e' sopra la piega, e con `swap` senza
   preload la frase comparirebbe dritta per un attimo prima di raddrizzarsi. */
.v2 .ancora{
  margin-top:var(--s4);margin-bottom:var(--s5);
  font-size:var(--t-lead);font-weight:500;font-style:italic;line-height:1.38;
  letter-spacing:-.003em;color:var(--white);
  max-width:42ch;padding-left:13px;border-left:2px solid var(--amber-line);
}
.v2 .nota{
  margin-top:var(--s4);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);
}


/* ---- 6. LE DUE PORTE ---------------------------------------------------
   Non due bottoni: due pannelli alti, cliccabili per intero, che si aprono
   quando ti avvicini. A riposo sono identici: nessuno dei due e' "quello
   giusto". Su telefono rompono il margine e diventano due meta' dello
   schermo divise da una sola hairline. */
/* la riga che annuncia la scelta: piccola, centrata, e serve solo a far
   capire che quello che segue non e' altra descrizione ma un bivio */
.v2 .scegli{
  margin-bottom:10px;text-align:center;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);
}


/* ⛔ DUE OGGETTI, NON DUE COLONNE. Prima erano due meta' dello schermo divise
   da una hairline: il perimetro condiviso le faceva leggere come le celle di
   una tabella, cioe' come informazione. Adesso hanno uno stacco fra loro e un
   bordo proprio tutto intorno: due card, e una card con un bordo ambra dice
   "toccami" senza doverlo scrivere.
   Il bordo a riposo sta al 38%: un ambra pieno su entrambe, sempre, sarebbe
   da interfaccia di gioco e perderebbe l'eleganza che abbiamo costruito. Il
   pieno arriva solo su quella che stai scegliendo. */
.v2 .porte{display:flex;gap:9px}
.v2 .porta{
  flex:1 1 0;min-width:0;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:var(--s5);
  background:var(--g1);
  border:1px solid var(--amber-line);border-radius:var(--r);
  transition:background var(--m-rapido) var(--e-standard),
             border-color var(--m-rapido) var(--e-standard),
             opacity var(--m-rapido) var(--e-standard);
}

/* superfici appena diverse: basta un gradino impercettibile perche' smettano
   di leggersi come due celle della stessa tabella */
.v2 .porta:last-child{background:#191B1F}


/* la linea che si allunga: l'affordance piu' discreta che esista — a riposo
   non c'e', al tocco percorre la base della card */
.v2 .porta::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--m-normale) var(--e-standard);
}


/* la riga di classificazione: due parole che collocano il lettore prima
   ancora che legga il titolo della meta' */
.v2 .porta__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
/* Sul pannello della porta (#191B1F) --dim misura 4,45:1 a 9px: manca lo
   0,05 per l'AA. --dim-2 porta la qualifica a 4,93:1 senza toccare la
   gerarchia (resta sotto al titolo e alla riga tecnica). */
.v2 .porta__cat{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim-2);
}
.v2 .porta__ic{
  width:18px;height:18px;flex:none;
  stroke:var(--dim);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke var(--m-rapido) var(--e-standard);
}


/* ⛔ IL TITOLO DELLA META', e la cosa piu' grande della hero dopo la headline.
   Prima era un'etichetta da 10px sopra il nome del prodotto: il lettore
   doveva leggere "BA PRO" e dedurre se era per lui. Chi arriva da Instagram
   non deve capire una navigazione — deve RICONOSCERSI. Per questo qui si
   spende il corpo, il bianco pieno e la freccia sempre visibile. */
.v2 .porta__k{
  display:block;margin-top:var(--s4);
  font-size:clamp(1.5rem, 6.4vw, 1.75rem);font-weight:700;line-height:1.1;
  letter-spacing:-.012em;color:var(--white);text-wrap:balance;
}

/* ⛔ La freccia NON e' un elemento flex a se': se lo fosse potrebbe andare a
   capo da sola. Misurato: "Sono un / coach / →" su tre righe, con la freccia
   orfana. Uno spazio insecabile la tiene attaccata all'ultima parola. */
.v2 .porta__k .varw{font-style:normal;color:var(--amber);font-size:.72em}

/* il nome del prodotto risponde alla SECONDA domanda: scende di un gradino */
.v2 .porta__n{
  font-family:var(--mono);font-size:var(--t-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* la qualifica: e' la riga che spiega in due parole perche' uno costa 39 e
   l'altro 169, prima ancora che si legga il prezzo */
/* LA RIGA DELLA SCALA. Prima diceva "Sistema personale", cioe' ripeteva la
   categoria gia' scritta due righe sopra. Adesso dice quanto lavoro copre il
   prezzo — "1 atleta · 52 settimane" contro "fino a 40 atleti · 52 settimane
   ciascuno" — e il confronto fra 39 e 169 lo fa il lettore in un secondo.
   I due numeri non sono copy: sono la capienza registrata il 26/09 in
   ops/log-decisioni.md. Se il prodotto cambia, questa riga cambia con lui. */
.v2 .porta__t{
  margin-top:3px;font-family:var(--mono);font-size:var(--t-micro);
  line-height:1.45;letter-spacing:.03em;color:var(--dim-2);
}

/* i tre elementi concreti. Monospace perche' sono contenuto del prodotto,
   non prosa di vendita. */
.v2 .porta__f{
  margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-micro);line-height:1.6;
  letter-spacing:.04em;color:var(--dim-2);
}
.v2 .porta__giu{
  margin-top:auto;padding-top:var(--s5);
  display:flex;flex-direction:column;gap:3px;
}
.v2 .porta__p{
  margin-top:6px;
  font-family:var(--display);font-size:1.5rem;line-height:1.1;color:var(--white);
  letter-spacing:-.01em;
}

/* "una volta sola" / "una volta. Non per atleta": la riga che disinnesca la
   domanda che il prezzo fa nascere. Su COACH vale doppio — 169 € per uno
   strumento che si usa su TUTTA la clientela e' un altro numero rispetto a
   199 € per un file. */
.v2 .porta__u{
  font-family:var(--mono);font-size:var(--t-micro);line-height:1.35;
  letter-spacing:.04em;color:var(--dim-2);
}
.v2 .varw{font-style:normal;transition:transform var(--m-rapido) var(--e-standard)}


/* Stato attivo SENZA spostare niente. L'espansione (flex-grow) era bella al
   dito ma muoveva il layout sotto il pollice mentre si sceglie: su una
   decisione binaria e' il momento peggiore per far muovere qualcosa.
   Resta il bordo ambra, il fondo che si alza di un gradino, la freccia che
   scorre — e la meta' NON scelta che arretra appena. */
.v2 .porta.is-viva{
  background:var(--g2);border-color:var(--amber);
  /* il glow sta DENTRO, ed e' appena percettibile: fuori diventerebbe un
     effetto, dentro resta una superficie che si accende */
  box-shadow:inset 0 0 26px rgba(255,193,7,.07);
}
.v2 .porta.is-viva .porta__cat{color:var(--muted)}
.v2 .porta.is-viva .porta__ic{stroke:var(--amber)}
.v2 .porta.is-viva .varw{transform:translateX(5px)}
.v2 .porta.is-viva::before{transform:scaleX(1)}

/* l'altra meta' arretra di contrasto: la scelta si legge anche con la coda
   dell'occhio. Senza :has() non succede niente di male, solo niente. */
.v2 .porte:has(.porta.is-viva) .porta:not(.is-viva),.v2 .porte:has(.porta:hover) .porta:not(:hover){opacity:.7}
.v2 .porta__ic,.v2 .varw{transition:stroke var(--m-rapido) var(--e-standard),transform var(--m-rapido) var(--e-standard)}
.v2 .porta{transition:flex-grow var(--m-normale) var(--e-standard),
                  background var(--m-rapido) var(--e-standard),
                  opacity var(--m-rapido) var(--e-standard)}


/* ---- 7. IL PRODOTTO -----------------------------------------------------
   La luce sta DIETRO al prodotto, mai dietro ai testi: e' quello che deve
   sembrare acceso. Ambra al 7 %, cioe' sotto la soglia della coscienza —
   se la noti come "glow" e' gia' troppa. */
.v2 .prodotto{min-width:0;position:relative}
.v2 .prodotto::before{
  content:"";position:absolute;inset:-14% -10% -6%;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 62% 26%, rgba(255,193,7,.07), transparent 72%);
  opacity:0;
}
.js .v2 [data-in="1"] .prodotto::before{opacity:1;transition:opacity 900ms var(--e-entrata) 420ms}
.v2 .app{position:relative;z-index:1;
  background:var(--g1);border:1px solid var(--hair-2);border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.v2 .app__bar{
  display:flex;align-items:center;gap:7px;
  padding:9px var(--s3);border-bottom:1px solid var(--hair);background:var(--void);
}
.v2 .app__pt{width:7px;height:7px;border-radius:50%;background:var(--g3);flex:none}
.v2 .app__file{
  margin-left:var(--s2);font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.06em;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.v2 .app__meta{margin-left:auto;font-family:var(--mono);font-size:var(--t-micro);color:var(--dim);white-space:nowrap}
.v2 .app__tabs{display:flex;gap:1px;background:var(--hair);border-bottom:1px solid var(--hair)}
.v2 .app__tab{
  flex:1 1 0;min-width:0;padding:8px 6px;background:var(--void);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.04em;
  color:var(--dim);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.v2 .app__tab.vis-on{background:var(--g1);color:var(--paper);box-shadow:inset 0 -2px 0 var(--amber-lo)}
.v2 .app__fx{
  display:flex;align-items:center;gap:var(--s2);
  padding:8px var(--s3);border-bottom:1px solid var(--hair);background:var(--g2);
}

/* Il glifo "fx" era obliquo: obliqua SINTETICA su un mono di sistema. Esce.
   Da oggi il corsivo in questa pagina e uno solo, ed e la frase-manifesto. */
/* La sigla fx sta sulla barra della formula (#1B1D21): stesso caso,
   4,36:1 con --dim contro i 4,84:1 di --dim-2. */
.v2 .app__fxk{font-family:var(--mono);font-size:var(--t-micro);color:var(--dim-2);flex:none}
.v2 .app__fx code{
  font-family:var(--mono);font-size:var(--t-micro);color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.v2 .app__corpo{padding:var(--s4) var(--s4) var(--s5)}
.v2 .passo + .passo{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--hair)}
.v2 .passo__k{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}
.v2 .passo__n{
  display:grid;place-items:center;width:16px;height:16px;flex:none;
  border:1px solid var(--hair-2);border-radius:2px;
  font-style:normal;font-size:.5625rem;color:var(--dim);
  transition:color var(--m-rapido) var(--e-standard),border-color var(--m-rapido) var(--e-standard);
}
.v2 .passo[data-attivo] .passo__k{color:var(--muted)}
.v2 .passo[data-attivo] .passo__n{color:var(--amber);border-color:var(--amber-line)}


/* le celle: gialle perche' le compila l'utente. E' la regola del file. */
.v2 .celle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.v2 .cella{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:7px 8px;border-radius:2px;
  background:var(--amber-soft);border:1px solid var(--amber-line);
}
.v2 .cella__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--dim)}
.v2 .cella__v{
  font-family:var(--mono);font-size:.75rem;color:var(--amber);letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}


/* la roadmap: otto mesocicli che si costruiscono da sinistra */
.v2 .anno{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}

/* Gli otto mesocicli non sono otto rettangoli uguali: il carico SALE, e si
   vede. La scala e' bianco a opacita' crescente sopra il graphite — nessun
   colore nuovo, solo valore. Un blocco tutto uguale non direbbe niente, ed
   e' esattamente il difetto che aveva la prima versione. */
.v2 .anno__b{
  height:26px;border-radius:2px;
  background:linear-gradient(rgba(231,233,236,var(--q,0)),rgba(231,233,236,var(--q,0))), var(--g2);
  transform-origin:left center;
}
.v2 .anno__b:nth-child(1){--q:.03}
.v2 .anno__b:nth-child(2){--q:.05}
.v2 .anno__b:nth-child(3){--q:.07}
.v2 .anno__b:nth-child(4){--q:.10}
.v2 .anno__b:nth-child(5){--q:.13}
.v2 .anno__b:nth-child(6){--q:.17}
.v2 .anno__b:nth-child(7){--q:.22}
.v2 .anno__b:nth-child(8){--q:.28}

/* i tre mesocicli di picco si distinguono per valore, non per colore:
   sono un DATO, non una decisione, e il giallo qui sarebbe decorazione */
.v2 .anno__b:nth-child(n+6){box-shadow:inset 0 -3px 0 var(--muted)}
.v2 .anno__leg{
  display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--mono);font-size:var(--t-micro);color:var(--dim);
}


/* il check-in: volume contro target */
.v2 .vol{display:grid;gap:7px}
.v2 .vol__r{display:grid;grid-template-columns:52px minmax(0,1fr) 44px;align-items:center;gap:var(--s2)}
.v2 .vol__n{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted)}
.v2 .vol__t{height:6px;border-radius:2px;background:var(--g3);overflow:hidden}
.v2 .vol__f{display:block;height:100%;width:var(--w);background:var(--dim);border-radius:2px}
.v2 .vol__f--pieno{background:var(--muted)}
.v2 .vol__v{font-family:var(--mono);font-size:var(--t-micro);color:var(--muted);text-align:right}
.v2 .ader{
  display:flex;align-items:baseline;gap:var(--s2);margin-top:var(--s3);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
.v2 .ader b{font-family:var(--body);font-size:1rem;font-weight:600;color:var(--paper);letter-spacing:0;text-transform:none}


/* la decisione: il secondo e ultimo posto in cui il giallo diventa superficie */
.v2 .passo--dec{border-top-color:var(--hair-2)}
.v2 .dec{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:11px var(--s3);border-radius:var(--r);
  background:var(--amber-soft);border:1px solid var(--amber-line);
  /* la decisione e' il punto d'arrivo della sequenza: si accende appena */
  box-shadow:0 0 26px rgba(255,193,7,.09);
}
.v2 .dec__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.v2 .dec__v{font-size:.9375rem;font-weight:700;letter-spacing:.06em;color:var(--amber)}
.v2 .dec__n{margin-left:auto;font-size:var(--t-small);color:var(--muted)}
.v2 .prodotto__nota{
  margin-top:var(--s3);font-size:var(--t-label);line-height:1.5;color:var(--dim);
}


/* ---- 8. MANIFESTO ------------------------------------------------------- */
.v2 .manifesto{
  border-top:1px solid var(--hair);
  padding:var(--s6) var(--gut);text-align:center;
  font-size:var(--t-lead);color:var(--muted);text-wrap:balance;
}


/* ==========================================================================
   9. MOVIMENTO
   Entrata: la scaletta decisa da Tommy (0 / 100 / 180 / 250 / 350 ms).
   Il prodotto entra da destra e si posa.
   ========================================================================== */
.js .v2 .e{opacity:0;transform:translateY(14px)}
.js .v2 .p-e{opacity:0;transform:translate(24px,10px) scale(.985)}
.js .v2 [data-in="1"] .e,.js .v2 [data-in="1"] .p-e{
  opacity:1;transform:none;
  transition:opacity var(--m-normale) var(--e-entrata),
             transform var(--m-ampio) var(--e-entrata);
}
.v2 [data-in="1"] .e[data-e="0"]{transition-delay:0ms}
.v2 [data-in="1"] .e[data-e="1"]{transition-delay:100ms}
.v2 [data-in="1"] .e[data-e="2"]{transition-delay:180ms}
.v2 [data-in="1"] .e[data-e="3"]{transition-delay:250ms}
.v2 [data-in="1"] .p-e{transition-delay:350ms}


/* LA SEQUENZA DEL PRODOTTO
   Regola che vale piu' dell'effetto: lo stato di RIPOSO e' quello COMPLETO.
   Il pannello si svuota solo dentro [data-seq="1"], cioe' nell'istante in cui
   la sequenza sta per partire davvero — e torna completo quando finisce.
   Cosi' chi arriva senza JavaScript, chi tiene la scheda in secondo piano e
   chi non scorre mai fin qui vedono comunque il prodotto che dice la sua cosa,
   invece di una finestra con le celle vuote. */
.v2 [data-seq="1"] .passo:not([data-attivo]) .cella__v{opacity:0;transform:translateY(5px)}
.js .v2 .cella__v{transition:opacity var(--m-normale) var(--e-entrata),transform var(--m-normale) var(--e-entrata)}
.v2 [data-seq="1"] .passo[data-attivo] .cella:nth-child(1) .cella__v{transition-delay:0ms}
.v2 [data-seq="1"] .passo[data-attivo] .cella:nth-child(2) .cella__v{transition-delay:90ms}
.v2 [data-seq="1"] .passo[data-attivo] .cella:nth-child(3) .cella__v{transition-delay:180ms}
.v2 [data-seq="1"] .passo[data-attivo] .cella:nth-child(4) .cella__v{transition-delay:270ms}
.v2 [data-seq="1"] .passo:not([data-attivo]) .anno__b{transform:scaleX(0)}
.js .v2 .anno__b{transition:transform var(--m-normale) var(--e-standard)}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(1){transition-delay:0ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(2){transition-delay:55ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(3){transition-delay:110ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(4){transition-delay:165ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(5){transition-delay:220ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(6){transition-delay:275ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(7){transition-delay:330ms}
.v2 [data-seq="1"] .passo[data-attivo] .anno__b:nth-child(8){transition-delay:385ms}
.v2 [data-seq="1"] .passo:not([data-attivo]) .vol__f{width:0}
.js .v2 .vol__f{transition:width var(--m-ampio) var(--e-standard)}
.v2 [data-seq="1"] .passo:not([data-attivo]) .ader b{opacity:0}
.js .v2 .ader b{transition:opacity var(--m-normale) var(--e-entrata) 320ms}
.v2 [data-seq="1"] .passo--dec:not([data-attivo]) .dec{opacity:0;transform:translateY(8px)}
.js .v2 .dec{transition:opacity var(--m-normale) var(--e-entrata),transform var(--m-normale) var(--e-entrata)}


/* hover solo su puntatore fine: su telefono lo stato hover resta incollato
   dopo il tocco, ed e' il difetto che fa sembrare rotto un sito che non lo e' */@media (hover:hover) and (pointer:fine){
  /* su desktop lo stato attivo e' tutto in CSS: non dipende dal JavaScript.
     Il dito e la tastiera passano invece da .is-viva (hero-v4.js). */
.v2 .porta:hover{background:var(--g2);border-color:var(--amber);box-shadow:inset 0 0 26px rgba(255,193,7,.07)}
.v2 .porta:hover::before{transform:scaleX(1)}
.v2 .porta:hover .porta__ic{stroke:var(--amber)}
.v2 .porta:hover .porta__cat{color:var(--muted)}
.v2 .porta:hover .varw{transform:translateX(4px)}

}


/* percorso di pari dignita', non un ripiego: stessa informazione, zero moto */@media (prefers-reduced-motion:reduce){.js .v2 .e,.js .v2 .p-e{opacity:1;transform:none}

  /* il prodotto non ha bisogno di eccezioni: senza [data-seq] e' gia' completo,
     e con questa preferenza [data-seq] non viene mai acceso */
}


/* ==========================================================================
   10. BREAKPOINT — due soli, nominati (--bp-sm 560, --bp-lg 960)
   Il fluido fa il resto: sotto non si rimpicciolisce, si RICOSTRUISCE.
   ========================================================================== */

/* fino a 560: le porte sono due meta' dello schermo, compatte */@media (max-width:559.98px){
  /* ⛔ IL VIEWPORT DI PROGETTO E' 390 x 700, NON 390 x 844.
     Su un telefono vero Chrome e il browser interno di Instagram si prendono
     fra 140 e 190 px in barra dell'indirizzo e barra di sistema. Misurare su
     844 px CSS e dichiarare "il prodotto affaccia" e' esattamente il tipo di
     verifica che sembra una prova e non lo e': la V3 rispettava il numero e
     sbagliava la schermata.

     Dentro 700 px devono stare, tutti insieme: headline, valore, le due
     scelte con i due prezzi, e l'inizio riconoscibile del prodotto.
     Ogni valore qui sotto e' stato stretto per quello. */
.v2 .vhero{padding-block:var(--s4) var(--s7)}


  /* una sola micro-etichetta sul percorso telefono: il descrittore sotto il
     marchio dice gia' "sistemi di programmazione", e due righe che dicono la
     stessa cosa costano 34 px di spazio premium */
.v2 .occhiello{display:none}


  /* su tre righe strette il bilanciamento automatico produceva "Un anno /
     di bodybuilding.", con la preposizione orfana a inizio riga. Qui la riga
     si riempie: "Un anno di / bodybuilding." */
.v2 .titolo{margin-bottom:var(--s4);letter-spacing:-.012em;text-wrap:wrap}
.v2 .sub{margin-bottom:0;line-height:1.55}
.v2 .ancora{margin-top:var(--s3);margin-bottom:var(--s4);font-size:.9375rem;line-height:1.34;padding-left:11px}
.v2 .porte{gap:8px}
.v2 .porta{padding:13px 12px 15px;min-height:0}

  /* il titolo e' la decisione: qui si spende il corpo, non si risparmia */
.v2 .porta__k{margin-top:8px}
.v2 .porta__ic{width:16px;height:16px}
.v2 .porta__cat{font-size:.5625rem;letter-spacing:.14em}
.v2 .porta__n{font-size:.5625rem;letter-spacing:.12em}
.v2 .porta__t{font-size:.5625rem;letter-spacing:.02em}
.v2 .porta__giu{gap:2px;padding-top:var(--s3)}
.v2 .porta__p{font-size:1.1875rem;margin-top:5px}
.v2 .porta__u{font-size:.5625rem;display:block;margin-top:2px}
.v2 .nota{letter-spacing:.06em}
.v2 .celle{grid-template-columns:repeat(2,minmax(0,1fr))}
.v2 .app__tab:nth-child(2),.v2 .app__tab:nth-child(3){display:none}
.v2 .app__fx code{font-size:9px}
.v2 .dec__n{display:none}

}


/* da 960: due colonne, il prodotto a destra */@media (min-width:960px){.v2 .vhero{padding-block:var(--s8) var(--s9)}
.v2 .voce{display:block}
.v2 .vhero__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:center}
.v2 .porte{gap:12px}
.v2 .porta{padding:var(--s5);min-height:214px}
.v2 .celle{grid-template-columns:repeat(4,minmax(0,1fr))}

}


/* ---- 11. IL PRODOTTO AFFACCIA ------------------------------------------
   Su telefono la colonna del prodotto non e' la sezione dopo: e' il seguito
   della stessa scena. Lo spazio fra le porte e la finestra e' corto di
   proposito, cosi' il bordo superiore entra nel primo schermo e si capisce
   che sotto c'e' un sistema vero. Non si mostra tutto: si fa venire voglia. */@media (max-width:959.98px){.v2 .voce{display:contents}
.v2 .occhiello{order:1}
.v2 .titolo{order:2}
.v2 .sub{order:3}
.v2 .ancora{order:4}
.v2 .scegli{order:5}

          /* senza un posto esplicito finiva PRIMA del titolo */
.v2 .porte{order:6}
.v2 .prodotto{order:7;margin-top:var(--s5)}
.v2 .nota{order:8;margin-top:var(--s5)}
     /* la rassicurazione, dopo la prova */
.v2 .prodotto__nota{margin-top:var(--s3)}

}
.v2{
  /* il verde funzionale entra qui e SOLO qui: dentro la rappresentazione del
     prodotto. Nel marketing non si usa mai — e' la regola che lo tiene
     credibile quando compare. */
  --ok:#22C55E;
}


/* ==========================================================================
   12. LA DEMO — una finestra, quattro stati
   ==========================================================================
   ⛔ La regola che ha imposto questa forma: NON si mostra prima il prodotto
   intero e poi lo stesso prodotto smontato in quattro schede. Chi arriva da
   Instagram lo legge come "adesso me lo rispiega", e la dispersione appena
   tolta rientra dalla finestra.

   Qui c'e' UN SOLO oggetto: la stessa finestra BA_SCIENCE-BASED.xlsx che
   cambia stato mentre scorri. Cambia anche la linguetta del foglio attivo —
   01_CLIENTE, 05_ROADMAP_52W, 03_CHECKIN — ed e' quel dettaglio a dimostrare
   che e' un sistema solo e non quattro mockup.

   `position:sticky` normale: la pagina scorre alla sua velocita', nessun
   hijacking, nessun legame fra scroll e animazione. La finestra resta ferma
   mentre le quattro didascalie le passano accanto, e si libera da sola alla
   fine della sezione.
   ========================================================================== */
/* ba.css ha una sua `.vdemo` (il riquadro video delle pagine prodotto:
   max-width 420px, 390px da 960 in su). Lo stesso nome di classe qui dentro
   e' la sezione "Il sistema in funzione", che e' larga quanto il wrap: senza
   questa riga la sezione intera si schiaccia a 390px contro il bordo
   sinistro. Specificita' .v2 .vdemo (0,2,0) > .vdemo (0,1,0), anche dentro
   la sua media query. Non tocca le pagine prodotto: ba-home.css lo carica
   solo index.html. */
.v2 .vdemo{max-width:none;margin-top:0}
.v2 .vdemo{border-top:1px solid var(--hair);padding-block:clamp(44px,8vw,80px)}
.v2 .vdemo__head{margin-bottom:var(--s5)}
.v2 .vdemo__k{
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}

/* l'unico Dela di questa schermata */
.v2 .vdemo__t{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);line-height:1.12;
  letter-spacing:-.015em;color:var(--white);text-wrap:balance;
}


/* --- la finestra --------------------------------------------------------- */
.v2 .finestra{
  position:sticky;top:var(--s4);z-index:2;
  background:var(--g1);border:1px solid var(--hair-2);border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,.5);
  transition:box-shadow var(--m-ampio) var(--e-entrata);
}
.v2 .fin__bar{
  display:flex;align-items:center;gap:7px;
  padding:9px var(--s3);border-bottom:1px solid var(--hair);background:var(--void);
}
.v2 .fin__tabs{display:flex;gap:1px;background:var(--hair);border-bottom:1px solid var(--hair)}
.v2 .fin__tabs .app__tab{
  flex:1 1 0;min-width:0;padding:8px 6px;background:var(--void);
  transition:color var(--m-rapido) var(--e-standard),
             background var(--m-rapido) var(--e-standard),
             box-shadow var(--m-rapido) var(--e-standard);
}

/* la linguetta segue lo stato: e' la prova che e' lo stesso file */
.v2 .finestra[data-stato="1"] .app__tab[data-per~="1"],.v2 .finestra[data-stato="2"] .app__tab[data-per~="2"],.v2 .finestra[data-stato="3"] .app__tab[data-per~="3"],.v2 .finestra[data-stato="4"] .app__tab[data-per~="4"]{
  background:var(--g1);color:var(--paper);box-shadow:inset 0 -2px 0 var(--amber-lo);
}


/* tutti gli stati nella stessa cella: la finestra non salta mai di altezza */
.v2 .fin__corpo{display:grid;padding:var(--s4) var(--s3);min-height:150px;align-items:center}
.v2 .stato{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--m-normale) var(--e-entrata)}
.v2 .finestra[data-stato="1"] .stato[data-stato="1"],.v2 .finestra[data-stato="2"] .stato[data-stato="2"],.v2 .finestra[data-stato="3"] .stato[data-stato="3"],.v2 .finestra[data-stato="4"] .stato[data-stato="4"]{opacity:1;visibility:visible}


/* 1. i campi: gialli, perche' li compili tu */
.v2 .campi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.v2 .campo{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:9px 10px;border-radius:2px;
  background:var(--amber-soft);border:1px solid var(--amber-line);
}
.v2 .campo__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--dim)}
.v2 .campo__v{font-family:var(--mono);font-size:.8125rem;color:var(--amber)}


/* 2. l'anno */
.v2 .anno--grande{margin-top:var(--s2)}
.v2 .anno--grande .anno__b{height:52px}
.v2 .anno--grande + .anno__leg{margin-top:8px}


/* 3. gli esiti: i colori funzionali vivono solo qui */
.v2 .esiti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.v2 .esito{
  display:flex;flex-direction:column;gap:3px;min-width:0;
  padding:9px 10px;border-radius:2px;background:var(--g2);
}
/* Le tre etichette del verdetto stanno sul pannello rialzato (#1B1D21),
   non sul fondo: li' --dim misura 4,36:1, sotto il minimo AA di 4,5
   per un testo da 10px. --dim-2 esiste gia' per questo e da' 4,84:1. */
.v2 .esito__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.06em;color:var(--dim-2)}
.v2 .esito__v{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;color:var(--paper)}
.v2 .esito__v--num{gap:0;font-family:var(--body);font-weight:600;font-variant-numeric:tabular-nums}
.v2 .pt{width:6px;height:6px;border-radius:50%;flex:none;background:var(--muted)}
.v2 .pt--ok{background:var(--ok)}


/* 4. il verdetto: qui la demo culmina, e prende piu' spazio delle altre */
.v2 .verdetto{display:grid;gap:5px;margin:0;justify-items:center;text-align:center}
.v2 .verdetto__k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.v2 .verdetto__v{font-size:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);font-weight:700;letter-spacing:.03em;color:var(--amber);line-height:1.05}
.v2 .verdetto__n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;color:var(--dim-2)}

/* l'unico momento in cui la finestra si accende, ed e' il punto d'arrivo */
.v2 .finestra[data-stato="4"]{box-shadow:0 20px 48px rgba(0,0,0,.5), 0 0 34px rgba(255,193,7,.10)}


/* --- le didascalie ------------------------------------------------------- */
.v2 .passi{list-style:none;margin:0;padding:0}
.v2 .pp{
  position:relative;padding-block:var(--s5);padding-left:14px;
  /* al 42% sembravano disattivati. A 58% restano chiaramente secondari ma si
     leggono come "i prossimi passaggi", non come testo morto. */
  opacity:.58;transition:opacity var(--m-normale) var(--e-standard);
}
.v2 .pp.is-ora{opacity:1}
.v2 .pp + .pp{border-top:1px solid var(--hair)}


/* Il segnale dello stato attivo: una hairline ambra sul fianco piu' il numero
   che si accende. Nessuna card nuova, nessun fondo, nessun bordo intero — solo
   i due segni che il sistema visivo usa gia' per dire "attivo". Il padding
   sinistro sta su TUTTE le tappe, cosi' l'accensione non sposta niente. */
.v2 .pp.is-ora::before{
  content:"";position:absolute;left:0;top:var(--s5);bottom:var(--s5);
  width:2px;background:var(--amber);border-radius:1px;
}
.v2 .pp__k{
  display:flex;align-items:center;gap:var(--s2);margin:0 0 6px;
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper);
}
.v2 .pp__k i{font-style:normal;color:var(--dim-2);transition:color var(--m-rapido) var(--e-standard)}
.v2 .pp.is-ora .pp__k i{color:var(--amber)}

/* i valori chiave non sono una nota a pie' di pagina: sono il dato */
.v2 .pp__v{margin:0;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em;color:var(--dim-2)}
.v2 .pp.is-ora .pp__v{color:var(--paper)}
.v2 .pp__d{margin:6px 0 0;font-size:var(--t-small);line-height:1.5;color:var(--muted)}


/* La nota della hero sulla ricostruzione dell'interfaccia: resta — e' vera e
   va detta — ma scende al rango di disclaimer. Dove stiamo vendendo, una nota
   tecnica a corpo pieno abbassa il valore percepito e fa sembrare il prodotto
   un prototipo. Unica regola di questo foglio che tocca un elemento della
   hero, ed e' per richiesta esplicita: i file di hero-v4/ restano intatti. */
.v2 .prodotto__nota{
  font-size:var(--t-micro);line-height:1.45;letter-spacing:.01em;
  max-width:44ch;margin-top:var(--s2);
}


/* --- la cassa: prodotto, prezzo, azione. Tre cose separate. -------------- */
.v2 .cassa{margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--hair);text-align:center}
.v2 .cassa__t{margin:0 0 var(--s5);font-size:var(--t-lead);color:var(--paper)}
.v2 .offerta{
  max-width:380px;margin-inline:auto;
  padding:var(--s5) var(--s5) var(--s6);
  background:var(--g1);border:1px solid var(--hair-2);border-radius:var(--r);
}
.v2 .offerta__n{margin:0;font-size:1.125rem;font-weight:600;color:var(--white);letter-spacing:-.005em}
.v2 .offerta__d{margin:4px 0 0;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--dim-2)}
.v2 .offerta__p{
  margin:var(--s4) 0 var(--s5);
  font-family:var(--display);font-size:2.25rem;line-height:1;color:var(--white);
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}


/* IL BOTTONE — una sola azione, una sola riga, niente prezzo dentro.
   La freccia sta in posizione assoluta a destra: cosi' l'etichetta resta
   otticamente CENTRATA invece di essere spinta a sinistra dal peso della
   freccia. E' il difetto per cui il bottone precedente sembrava storto
   anche quando tecnicamente era centrato. */
.v2 .vbtn{
  position:relative;display:block;width:100%;
  min-height:56px;padding:17px 46px 17px 26px;
  background:var(--amber);color:var(--on-amber);border-radius:var(--r);
  font-weight:700;font-size:.9375rem;letter-spacing:.01em;
  text-align:center;white-space:nowrap;
  transition:background var(--m-rapido) var(--e-standard);
}
.v2 .vbtn__t{display:inline-block}
.v2 .vbtn .varw{
  position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-style:normal;
  transition:transform var(--m-rapido) var(--e-standard);
}
.v2 .vbtn:active{background:var(--amber-lo)}
.v2 .vbtn:active .varw{transform:translate(3px,-50%)}
.v2 .cassa__alt{margin:var(--s5) 0 0;font-size:var(--t-small)}
.v2 .cassa__alt a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted);border-bottom:1px solid var(--hair-2);padding-bottom:3px;
  transition:color var(--m-rapido) var(--e-standard),border-color var(--m-rapido) var(--e-standard);
}
.v2 .cassa__alt .varw{font-style:normal}
@media (hover:hover) and (pointer:fine){.v2 .vbtn:hover{background:var(--amber-hi)}
.v2 .vbtn:hover .varw{transform:translate(3px,-50%)}
.v2 .cassa__alt a:hover{color:var(--paper);border-bottom-color:var(--dim)}

}


/* --- comparsa: una volta, e resta ---------------------------------------- */
.js .v2 .r{opacity:0;transform:translateY(10px)}
.js .v2 .r.is-qui{
  opacity:1;transform:none;
  transition:opacity var(--m-normale) var(--e-entrata),
             transform var(--m-normale) var(--e-entrata);
}

/* l'anno si costruisce da sinistra: unico movimento della sezione */
.js .v2 .anno--grande .anno__b{transform:scaleX(0);transition:transform var(--m-normale) var(--e-standard)}
.js .v2 .finestra[data-stato="2"] .anno--grande .anno__b{transform:none}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(1){transition-delay:40ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(2){transition-delay:95ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(3){transition-delay:150ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(4){transition-delay:205ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(5){transition-delay:260ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(6){transition-delay:315ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(7){transition-delay:370ms}
.js .v2 .finestra[data-stato="2"] .anno__b:nth-child(8){transition-delay:425ms}
@media (prefers-reduced-motion:reduce){.js .v2 .r{opacity:1;transform:none}
.js .v2 .anno--grande .anno__b{transform:none}
.v2 .pp{opacity:1}

}


/* --- desktop: la finestra a destra, dove l'occhio l'ha lasciata ---------- */@media (min-width:960px){.v2 .vdemo__head{margin-bottom:var(--s7)}
.v2 .vdemo__in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s8);align-items:start}
.v2 .passi{order:1}
.v2 .finestra{order:2;top:var(--s8)}
.v2 .fin__corpo{min-height:208px;padding:var(--s5) var(--s4)}
.v2 .pp{padding-block:var(--s6)}
.v2 .pp:first-child{padding-top:0}
.v2 .cassa{margin-top:var(--s8);padding-top:var(--s7)}
.v2 .vbtn{width:auto;min-width:264px;margin-inline:auto}

}


/* --- telefono ------------------------------------------------------------ */@media (max-width:559.98px){.v2 .vdemo__head{margin-bottom:var(--s3)}
.v2 .vdemo{padding-block:34px 44px}
.v2 .fin__corpo{min-height:124px;padding:var(--s3) 10px}
.v2 .anno--grande .anno__b{height:42px}

  /* La regola mobile della hero nasconde la 2a e la 3a linguetta del suo
     pannello: li' e' giusto (non c'e' spazio), qui no — sono proprio le tre
     linguette a dimostrare che il foglio attivo cambia con lo stato. Qui si
     riscoprono, con una specificita' piu' alta e senza toccare la hero. */
.v2 .fin__tabs .app__tab{font-size:9px;letter-spacing:0}
.v2 .fin__tabs .app__tab:nth-child(2),.v2 .fin__tabs .app__tab:nth-child(3){display:block}
.v2 .pp{padding-block:36px}
                /* ogni stato si prende il suo pezzo di scroll */
  /* dopo CONTINUA si arriva subito al prezzo: il climax non deve avere il
     tempo di sciogliersi prima della cassa */
.v2 .pp--fine{padding-bottom:var(--s3)}
.v2 .pp.is-ora::before{top:28px;bottom:28px}
.v2 .cassa{margin-top:var(--s3);padding-top:var(--s4)}
.v2 .cassa__t{margin-bottom:var(--s4)}
.v2 .cassa__alt{margin-top:var(--s4)}
.v2 .offerta{padding:var(--s4)}
.v2 .offerta__p{font-size:2rem;margin:10px 0 var(--s4)}
.v2 .vbtn{font-size:.875rem;padding:17px 42px 17px 22px}

}


/* Sotto i 960px .voce diventa display:contents e i figli della hero sono
   ordinati a mano: un elemento nuovo senza order finisce a 0, cioe' prima
   del titolo. Il conto va dopo la frase-manifesto (order 4) e prima del
   bivio (order 5) — stesso order di .ancora, l'ordine del sorgente decide. */
@media (max-width:959.98px){ .v2 .conto{order:4;margin-block:var(--s4)} }


/* ---- 13. IL PULSANTE NEL PRIMO SCHERMO (10/10/2026) ---------------------
   Prima qui c'era il bivio Mi alleno / Sono un coach: due porte verso una
   pagina da leggere. Ora il primo schermo chiude con un'azione (la cassa del
   Science-Based) e il bivio vive nel chooser subito sotto la hero. */
.v2 .hcta{margin-top:var(--s5);max-width:440px}
.v2 .hcta .vbtn{width:100%}
.v2 .hcta__fid{margin:12px 0 0;font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;line-height:1.5;color:var(--muted)}
.v2 .hcta__fid b{color:var(--amber);font-weight:600}
.v2 .hcta__alt{margin:10px 0 0;display:flex;gap:18px;flex-wrap:wrap;font-size:var(--t-small)}
.v2 .hcta__alt a{
  display:inline-flex;align-items:center;min-height:36px;color:var(--muted);
  border-bottom:1px solid var(--hair-2);padding-bottom:1px;
}
@media (hover:hover) and (pointer:fine){ .v2 .hcta__alt a:hover{color:var(--paper);border-bottom-color:var(--dim)} }
/* sotto i 960 px i figli della hero sono ordinati a mano (vedi sopra):
   il pulsante va dopo il conto (4) e prima del prodotto (7) */
@media (max-width:959.98px){ .v2 .hcta{order:5;max-width:none} }

/* su telefono il pulsante viene PRIMA del conto: cosi' sta nel primo schermo
   anche con il banner dei cookie aperto (misurato: pulsante a ~470 px,
   banner da 545 px in giu') */
@media (max-width:959.98px){ .v2 .hcta{order:5} .v2 .conto{order:6} }