/* Landing ciaoelio.com - design system Elio v5 "prima dell'alba".
   Palette = quella dell'app (bianco, Blu Notte, azzurri — niente toni caldi);
   hero navy pre-alba, resto pagina chiaro. Serif editoriale Fraunces per i
   titoli, Inter per tutto il resto; sigle = tinte dei fogli. Solo light.
   Licenze calde (tokens --oro-*): la luce del welfare in #benessere (v8);
   nell'hero il marchio-sole, l'accento «luce» dell'H1 e il segno d'oro
   sotto il payoff del lead (14 ago). */

/* ---------- Font ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces variabile (SIL OFL, @fontsource-variable/fraunces 5.3.0, subset
   latin, assi wght 100-900 + opsz 9-144): la voce editoriale della landing.
   L'asse ottico e' la firma del font: ai corpi grandi alza il contrasto e
   stringe le aperture da solo (font-optical-sizing e' auto di default).
   Regola: SOLO .display e .h2, piu' i NUMERALI isolati che fanno da perno
   visivo (.pf-contatore b, .pilastro-num, .muro-sigillo b, .stat strong).
   Mai su titoli minori o su testo corrente: e' il contrasto con Inter a
   farla funzionare, e si consuma in fretta. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/fraunces-latin-opsz-wght.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  color-scheme: only light;
  --navy: #2D5075;
  --navy-2: #1F3A57;
  --navy-soft: #E7EDF4;
  --carta: #EDF0F7;      /* freddo: solo inset piccoli (sfondi screenshot) */
  --card: #FFFFFF;
  --inchiostro: #222B44;
  --muted: #5A6478;
  --linea: #DCE2EF;
  --ombra: 0 10px 28px rgba(31, 42, 82, .10);
  --ombra-lg: 0 24px 60px -12px rgba(31, 42, 82, .18), 0 4px 14px rgba(31, 42, 82, .08);
  --r-xs: 10px;
  --r-sm: 12px;
  --r-md: 14px;   /* pillole medie: sigla grande dello scambio */
  --r-lg: 20px;
  --w-wide: 1160px;
  --w-testo: 62ch;
  /* Ritmo verticale delle sezioni: due passi soli, il pieno e il corto
     (l'hero fa storia a sé, in vh). */
  --pad-sezione: clamp(4.5rem, 6vw + 2rem, 7.5rem);
  --pad-sezione-corta: clamp(3rem, 4.5vw + 1rem, 4.5rem);
  /* Altezza della nav sticky: la leggono .nav-in e il palco del #processo, che
     deve riservarsi lo spazio (nav z-index 40 sopra uno stage a top:0). */
  --nav-h: 68px;
  --fs-display: clamp(2.35rem, 1.2rem + 4.6vw, 4.05rem);
  --fs-h2: clamp(1.7rem, 1.15rem + 2.2vw, 2.55rem);
  --fs-h3: clamp(1.22rem, 1.05rem + .7vw, 1.45rem);
  --fs-lead: clamp(1.08rem, 1rem + .35vw, 1.22rem);
  --fs-stat: clamp(2.5rem, 1.6rem + 3.8vw, 4.1rem);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  /* Palette app (app-richieste): bianco su blu, senza accenti caldi. La sola
     "luce" e' il canvas alba (bianco-azzurro) e vive sopra i fondi navy. */
  --fondo: #F6F9FC;      /* base pagina: quasi-bianco freddo (le bande --card staccano) */
  --cielo: #DFEBF7;      /* pannelli/vetrine azzurro tenue (ex vetrine calde) */
  --cielo-2: #EAF2F9;    /* banda alternativa (#risultato, #tour) */
  --azzurro: #BADEFA;    /* accento DENTRO le bande navy + luce del canvas: mai testo su chiaro */
  --notte: #14243A;      /* cima del cielo pre-alba dell'hero */
  --linea-forte: #C3CFE2;
  --chiarore: #DEE7F1;   /* testo tenue sulle bande navy (lead, didascalie) */
  --salvia: #E9F5E9;     /* vetrina verde tenue */
  --ok: #2E7D32;         /* check verdi decorativi (chip regole, indice equità) */
  --errore: #C4443A;     /* stati di errore: form, violazioni di prova */
  /* Toni caldi del welfare (v8): eccezione alla palette fredda. Vivono in
     #benessere piu' una licenza dichiarata (14 ago): il marchio-sole oro
     dell'hero (.sole-hero), l'accento «luce» dell'H1 (.parola-forte) e il
     segno d'oro sotto il payoff del lead (.segno-oro, tratto corsivo).
     --oro-testo regge il contrasto AA su cielo-2. */
  --oro-sole: #F2B95C;   /* disco del sole decorativo */
  --oro-velo: rgba(242, 185, 92, .20);  /* wash radiale sulla banda */
  --oro-fondo: #FCF7EC;  /* base calda della banda (dal 14 ago: prima cielo-2) */
  --oro-soft: #FBEED3;   /* tondo delle icone .tutela-icona */
  --oro-testo: #8A5F17;  /* eyebrow e icone: ambra scura leggibile */
  --ombra-sm: 0 1px 2px rgba(31, 42, 82, .05), 0 8px 20px -6px rgba(31, 42, 82, .08);
  --ombra-hover: 0 18px 40px -10px rgba(31, 42, 82, .16), 0 4px 10px rgba(31, 42, 82, .06);
  --anello: var(--navy);
  interpolate-size: allow-keywords;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--fondo);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--navy); }
/* Anello di focus unificato: cambia colore via cascata di variabile.
   Azzurro nelle bande navy (hero compreso); di nuovo navy dentro le card
   bianche annidate nelle bande (azzurro su bianco non passa il contrasto). */
:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; border-radius: 8px; }
.hero, .contatto { --anello: var(--azzurro); }
.contatto-card { --anello: var(--navy); }
::selection { background: var(--navy); color: #fff; }

/* Skip-link: invisibile finche' non riceve il focus da tastiera. */
.salta {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  padding: .65rem 1.1rem;
  border-radius: var(--r-xs);
  text-decoration: none;
  translate: 0 -300%;
}
.salta:focus { translate: 0 0; }

.wrap {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
}
/* Variante stretta per le pagine di servizio (privacy, 404). */
.wrap--stretto { max-width: 46rem; }

section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
/* Anche gli approfondimenti con id (la coda di #calcolo linka #motore) e la
   sotto-sezione riparazione (la scheda Trova sostituto del tour la linka):
   senza, l'ancora atterrerebbe nascosta sotto la barra sticky. */
.approfondisci[id], .calcolo-ripara[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.sezione { padding-block: var(--pad-sezione); }

/* ---------- Tipografia ---------- */
.display, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Il display ancora l'asse ottico a 64 e sale a peso 680, SOLO qui (scelta
   dal provino del 14 ago: a opsz 100 i filetti a questi corpi risultavano
   esili); .h2 resta al 600 della regola sopra. L'ancoraggio serve anche
   alla geometria: con opsz auto ai corpi 40-50px Fraunces torna al taglio
   testo, ancora più largo, e la riga lunga dell'hero sfora il margine di
   SplitText; con l'asse fisso la larghezza in em è costante a ogni corpo
   (a 64 i glifi sono ~+18% rispetto al vecchio opsz 100, misurato: la riga
   più lunga dell'hero resta sotto metà del contenitore). Gli .h2 e i
   numerali restano in auto. */
.display { font-variation-settings: 'opsz' 64; font-weight: 680; }
.display {
  font-size: var(--fs-display);
  line-height: 1.1;
  text-wrap: balance;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.18;
  text-wrap: balance;
}
.h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; }
.lead { font-size: var(--fs-lead); color: var(--muted); }
/* Promosso a etichetta di sezione leggibile (12 ago): gli h2 sono aforismi,
   e chi scorre si orienta con QUESTO. Corpo su dal .78: deve reggere la
   scansione, non solo decorare. */
.eyebrow {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .9rem;
}
.testo { max-width: var(--w-testo); }
.nota { font-size: .9rem; color: var(--muted); }
/* Elenco puntato di contenuto (13 ago: #motore e #equita, dal copy a
   elenchi del testo istituzionale). Punto pieno navy sul modello dei
   .conf-voci del lato calcolato; il colore del testo resta quello del
   contesto. La variante --semaforo non disegna il marcatore: il pallino
   e' l'emoji scritta nel testo (🔴🟢⚪). */
.lista-punti { list-style: none; margin: .9rem 0 0; padding: 0; }
.lista-punti li {
  position: relative;
  padding-block: .34rem;
  padding-left: 1.35rem;
  line-height: 1.55;
}
.lista-punti li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .95em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy);
}
.lista-punti--semaforo li { padding-left: 0; }
.lista-punti--semaforo li::before { content: none; }
.intro-sezione { margin-top: 1.1rem; }

/* ---------- Sole (marchio, mask della grafica originale) ---------- */
.sole {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('/assets/brand/sole-elio.png') center / contain no-repeat;
  mask: url('/assets/brand/sole-elio.png') center / contain no-repeat;
  flex: none;
}
.wordmark {
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--navy);
  font-size: 1.02rem;
}

/* ---------- Bottoni e link ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}
.btn:hover { background: var(--navy-2); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
/* .btn nasce per gli <a>: sul <button> di invio del modulo il font di
   sistema e il cursore del browser non si ereditano da soli. */
button.btn { font-family: inherit; cursor: pointer; }

.btn--nav { padding: .55rem 1.05rem; font-size: .93rem; border-radius: var(--r-xs); min-height: 44px; }
.btn--fantasma {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--linea-forte);
  padding: calc(.85rem - 1.5px) calc(1.5rem - 1.5px);
}
.btn--fantasma:hover { background: rgba(45, 80, 117, .06); border-color: var(--navy); transform: translateY(-1px); }
.btn--grande {
  padding: 1rem 1.7rem;
  font-size: 1.06rem;
  width: 100%;
  justify-content: center;
  margin-top: 1.6rem;
}
.btn--wa svg { flex: none; }

.link-fuori {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  padding-block: .5rem; /* target touch ~44px senza spostare il layout percepito */
}
.link-fuori svg { flex: none; }
.link-fuori:hover { text-decoration: underline; }

/* ---------- Nav ----------
   Due stati: in cima e' vetro scuro sul cielo navy dell'hero; superata la
   sentinella (classe .scrolled da main.js) diventa bianca su fondo chiaro.
   Il default scuro e' anche il fallback no-JS: leggibile su qualsiasi banda. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  --anello: var(--azzurro);
  background: rgba(20, 36, 58, .42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.scrolled {
  --anello: var(--navy);
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 -1px 0 var(--linea);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  padding-block: .55rem;   /* target touch: la nav e' a riga singola, */
  margin-block: -.55rem;   /* il margine negativo non sposta nulla */
  transition: color .25s ease;
}
.nav.scrolled .brand { color: var(--navy); }
.brand .wordmark { color: inherit; }
.brand .sole { width: 24px; height: 24px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  font-weight: 600;
  font-size: .98rem;
  padding: .5rem .1rem;
  white-space: nowrap;
  transition: color .25s ease;
}
.nav-links a:hover { color: #fff; }
.nav.scrolled .nav-links a { color: var(--inchiostro); }
.nav.scrolled .nav-links a:hover { color: var(--navy); }
/* CTA di nav: bianca sul vetro scuro, torna navy sulla barra bianca. */
.btn--nav { background: #fff; color: var(--navy); }
.btn--nav:hover { background: var(--cielo); }
.nav.scrolled .btn--nav { background: var(--navy); color: #fff; }
.nav.scrolled .btn--nav:hover { background: var(--navy-2); }

/* ---------- Menu sezioni mobile (details nativo, visibile solo ≤720) ----------
   Senza JS apre e chiude col summary; main.js aggiunge solo la chiusura
   assistita (tap su un'ancora, Escape, ritorno sopra il breakpoint).
   Il pannello è assoluto rispetto alla .nav sticky (l'antenato posizionato
   più vicino), quindi copre tutta la larghezza sotto la barra. */
.nav-menu { display: none; }
.nav-menu > summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px; /* il glifo ha aria interna: così arriva a filo del wrap */
  border-radius: var(--r-xs);
  cursor: pointer;
  list-style: none;
  color: #fff;
  transition: color .25s ease;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav.scrolled .nav-menu > summary { color: var(--navy); }
.nav-menu-pannello {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: grid;
  padding: .4rem 0 .8rem;
  background: rgba(20, 36, 58, .96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 34px rgba(3, 10, 22, .25);
}
.nav.scrolled .nav-menu-pannello {
  background: rgba(255, 255, 255, .98);
  box-shadow: inset 0 1px 0 var(--linea), 0 18px 34px rgba(31, 42, 82, .12);
}
.nav-menu-pannello a {
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
  padding: .85rem clamp(1.1rem, 4vw, 2rem); /* righe piene, target ≥44px */
}
.nav.scrolled .nav-menu-pannello a { color: var(--inchiostro); }

/* ---------- Hero ---------- */
.hero {
  min-height: calc(100dvh - 68px);
  display: flex;
  align-items: center;
  padding-block: clamp(2.5rem, 5vh, 4rem) clamp(3rem, 6vh, 4.5rem);
  position: relative;
  overflow: clip;
  color: #fff;
  /* Cielo pre-alba: notte in cima, Blu Notte del brand in basso; un sospetto
     di chiarore azzurro dove sorgera' la luce (il canvas fa il resto) e due
     pozze tenui sotto l'impronta della lastra .hero-vetro: il suo blur ha
     cosi' della luce da piegare ANCHE da fermo (no-JS / ?ridotto /
     reduced-motion, dove il canvas con le bolle non esiste) e il vetro non
     degrada a rettangolo piatto. */
  background:
    radial-gradient(30% 26% at 22% 36%, rgba(186, 222, 250, .09), rgba(186, 222, 250, 0) 70%),
    radial-gradient(26% 22% at 35% 64%, rgba(186, 222, 250, .07), rgba(186, 222, 250, 0) 70%),
    radial-gradient(110% 85% at 78% 108%, rgba(186, 222, 250, .14) 0%, rgba(186, 222, 250, 0) 58%),
    linear-gradient(180deg, var(--notte) 0%, var(--navy-2) 55%, var(--navy) 100%);
}
/* La parola-manifesto del titolo: ORO come il marchio-sole che sorge
   (fissaggio del 14 ago, via la barra-sottolineatura che sapeva di link).
   L'accento e' puro colore, quindi statico e animato coincidono senza
   variabili di contratto; SplitText tiene lo span intero via
   ignore: '.parola-forte'. Contrasto su navy-2 ~6.5:1, AA anche da testo
   normale. */
.parola-forte {
  color: var(--oro-sole);
  white-space: nowrap;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.hero-copy { container-type: inline-size; }
.hero-copy > * + * { margin-top: 1.4rem; }
.hero-copy .eyebrow { margin-bottom: 0; color: var(--azzurro); }
/* Ogni riga del titolo deve stare su UNA riga: il font si dimensiona sulla
   larghezza reale della colonna (cqi), non del viewport. Il clamp resta
   tarato sul vecchio titolo a righe da 18 caratteri; col payoff attuale la
   riga più lunga ne ha 9 ("alla luce"), margine abbondante. Il margine serve
   comunque, perché SplitText congela le righe al primo calcolo e una riga
   troppo piena si spezzerebbe se il layout si assesta un attimo dopo. Non
   superare ~11.2cqi. */
/* text-wrap: wrap (non balance): balance interferisce con lo split in righe
   di SplitText; qui gli a-capo sono comunque espliciti col <br>. */
.hero-copy .display { font-size: clamp(2.25rem, 10.8cqi, 3.75rem); text-wrap: wrap; }
.hero-copy .lead { max-width: 36ch; color: rgba(255, 255, 255, .84); }
/* Il lead e' in piu' paragrafi (tre dal 14 ago): tra loro respiro ridotto
   rispetto al ritmo 1.4rem di .hero-copy, sono lo stesso discorso. */
.hero-copy .lead + .lead { margin-top: .8rem; }
/* Il payoff-tesi chiude il lead in grassetto bianco (la convenzione dei <b>
   di scena) col SEGNO D'ORO: un tratto ondulato "a mano" al posto del
   text-decoration dritto del primo giro (14 ago sera, su feedback «poco
   leggibile» + «sottolineatura stile corsivo, meno precisa»). Terza voce
   della licenza oro dell'hero (sole, «luce», segno). */
.hero-copy .lead-payoff {
  font-weight: 700;
  color: #fff;
}
/* Il tratto vive su uno span inline con box-decoration-break: clone: ogni
   riga avvolta dipinge il SUO tratto, stirato alla larghezza del proprio
   frammento (preserveAspectRatio='none': l'onda cambia passo per riga, la
   mano non e' mai uguale). La larghezza del tratto passa dalla variabile
   --segno-oro, fallback 100% = segno GIA' tracciato: e' il contratto
   statico (no-JS / ?ridotto / reduced-motion); l'animazione che lo disegna
   da 0% vive SOLO in motion.js (set guardato + tween nell'intro) e anima
   LA VARIABILE, mai il background-size composto: GSAP lo leggerebbe dal
   computed col secondo valore gia' in px, l'unita' non combacia piu' con
   l'em del target e il tween salta al 100% di colpo senza disegnare
   (misurato dal vivo il 14 ago). */
.hero-copy .lead-payoff .segno-oro {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8C28 4.5 52 9.5 82 7C110 4.8 132 9.8 163 7.4C192 5.2 214 9.2 243 6.4C250 5.8 254 6.6 257 6.2' fill='none' stroke='%23F2B95C' stroke-width='2.6' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: var(--segno-oro, 100%) .5em;
  padding-bottom: .34em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* ---- La lastra di vetro (14 ago): liquid glass tradotto in CSS ----
   Racchiude eyebrow + H1 + lead; le CTA restano fuori, sul navy pieno
   (scelta utente). Stessa idea del vetro scuro della nav, spinta a
   pannello: fondo bianco quasi nullo in gradiente, blur+saturate sul
   fondale (mentre l'alba sorge il suo bagliore diffonde DENTRO la lastra),
   filo speculare in alto, anello-lente sul perimetro. Valutata e scartata
   la libreria WebGL ybouane/liquidglass (rifrazione vera via shader):
   romperebbe il contratto statico (senza JS niente vetro), vuole i
   pannelli figli diretti del root, e ricattura la scena a ogni frame di
   canvas animato; su un fondale a gradiente quasi piatto la rifrazione
   non avrebbe comunque nulla da piegare. Dell'originale Apple restano le
   regole: variante unica, niente vetro su vetro, niente tinta (l'oro vive
   nel contenuto), raggio --r-lg come la scheda .frame. */
.hero-vetro {
  position: relative;
  padding: clamp(1.3rem, 1rem + 1vw, 1.6rem) clamp(1.2rem, .9rem + 1vw, 1.5rem);
  /* La lastra sconfina di 2rem nel gap della griglia verso la scheda: il
     padding orizzontale stringerebbe la misura dei lead e li farebbe
     riavvolgere (misurato: -58px di colonna = +4 righe = piega da 929 a
     1056px). Cosi' la misura interna resta ~436px e la piega rientra.
     Il gap a 1280 e' ~58px: ne restano ~26 d'aria prima dell'aureola
     morbida della scheda. Su mobile (colonna unica) si azzera. */
  margin-right: -2rem;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .03) 40%, rgba(255, 255, 255, .015) 68%, rgba(255, 255, 255, .05));
  /* 16, non 20: a 20 le chiazze delle bolle si spalmavano fin quasi a
     sparire e il vetro leggeva da pannello («la trasparenza si vede solo
     su mobile», che sta a 14 senza maschera canvas). */
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(255, 255, 255, .05),
    0 18px 40px rgba(3, 10, 22, .30);
}
/* Gli pseudo stanno a z-index:-1: nello stacking context della lastra (lo
   crea il backdrop-filter) restano sopra il suo fondo ma SOTTO il testo.
   Se un browser vecchio ignorasse mask-composite, l'anello degrada cosi'
   a velo dietro il testo, mai sopra. */
.hero-vetro::before { /* riflesso morbido in alto a sinistra */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 16% 0%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
/* L'anello-lente, la firma del liquid glass: ring di 1.5px ritagliato col
   trucco dei due strati di mask (content-box XOR padding-box). Il
   gradiente obliquo simula la luce piegata dal bordo del vetro: chiara in
   alto a sinistra, un'eco in basso a destra. */
.hero-vetro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .26) 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* Il ritmo verticale di .hero-copy e' un child combinator e non attraversa
   il wrapper: dentro la lastra si ristabilisce un filo piu' denso (1.25 vs
   1.4rem): dentro una scheda il testo sta bene piu' raccolto, e la piega
   ringrazia. */
.hero-vetro > * + * { margin-top: 1.25rem; }
/* Senza backdrop-filter (browser d'annata): vetro pieno come la nav. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-vetro { background: rgba(20, 36, 58, .72); }
}
.hero-cta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
/* CTA sul navy: la primaria si inverte (bianca), la fantasma diventa chiara. */
.hero .btn { background: #fff; color: var(--navy); }
.hero .btn:hover { background: var(--cielo); }
.hero .btn--fantasma { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.hero .btn--fantasma:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
/* La riga micro-prova .hero-prova (triade Luce/Calore/Puntualita' sotto le CTA)
   e' stata rimossa il 13 ago con le sue regole: le prove restano argomentate
   nelle sezioni e l'hero si chiude sulle CTA. */
.hero-copy .lead b { color: #fff; font-weight: 700; }
/* La prospettiva serve al rilievo 3D della scheda (tilt statico nella media
   query poco sotto; il micro-tilt che segue il mouse lo somma motion.js). */
.hero-visual { position: relative; perspective: 1200px; }
/* Il marchio-sole ORO: e' il sole dell'hero, statico e animato (il disco del
   canvas e' uscito il 14 ago). Default = SORTO, centro sul bordo alto della
   scheda: senza JS, con ?ridotto e con reduced-motion questo E' lo stato
   finale; motion.js lo fa solo sorgere da dietro la scheda (tlAlba).
   Ancorato al visual, non alla sezione: la scheda e' l'orizzonte. left
   tarato sull'asse della luce del canvas (x=76% dell'hero) al layout
   attuale; a larghezze intermedie deriva di ~40px dentro la corona soffusa
   del bloom, invisibile. Il centering usa MARGINI negativi (meta' del
   diametro --sole-d), NON translate/transform: GSAP ripiega le proprieta'
   transform individuali dentro la sua matrice e il tween y:0 della salita
   perderebbe il -50% verticale (misurato dal vivo il 14 ago).
   z-index -1 = dietro la scheda, sopra il canvas (il wrap sta a z1).
   Cap 240px: la sorgente mask e' 512px, a 2x restiamo sotto il nativo. */
.hero-visual .sole-hero {
  --sole-d: clamp(150px, 18vw, 240px);
  position: absolute;
  left: 64%;
  top: 0;
  width: var(--sole-d);
  height: var(--sole-d);
  margin-left: calc(var(--sole-d) / -2);
  margin-top: calc(var(--sole-d) / -2);
  color: var(--oro-sole);
  filter: drop-shadow(0 4px 22px rgba(242, 185, 92, .35));
  z-index: -1;
  pointer-events: none;
}
/* In colonna singola la scheda prende tutta la larghezza: il sole scivola
   verso destra e cala di corpo, sempre a cavallo del bordo alto. */
@media (max-width: 900px) {
  .hero-visual .sole-hero {
    left: 78%;
    --sole-d: clamp(110px, 30vw, 140px);
  }
}
/* Sul cielo scuro la card del mese "galleggia": ombra piu' profonda. */
.hero .frame {
  box-shadow:
    0 34px 90px -20px rgba(3, 10, 22, .6),
    0 8px 24px rgba(3, 10, 22, .35);
}
/* Aureola dietro la scheda: si accende a "Mese pronto" (motion.js anima
   --frame-luce; il default 1 e' il contratto statico: senza JS, ?ridotto e
   reduced-motion il quadro finito ha gia' la sua luce). Pseudo sul
   CONTENITORE e non sul frame (overflow:hidden lo clipperebbe); a muoversi
   e' la sola opacity: niente box-shadow animata, che ridipinge a ogni frame. */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -30px -26px;
  z-index: -1;
  border-radius: var(--r-lg);
  background: radial-gradient(58% 54% at 62% 40%, rgba(186, 222, 250, .32), rgba(186, 222, 250, 0) 72%);
  opacity: var(--frame-luce, 1);
  pointer-events: none;
}
/* Rilievo 3D della scheda, solo desktop: sotto i 3 gradi il testo delle
   celle resta nitido. E' CSS statico (vale anche senza JS); motion.js legge
   questa base con getProperty e ci muove attorno il micro-tilt del mouse. */
@media (min-width: 900.02px) {
  .hero-visual > .frame { transform: rotateX(1.2deg) rotateY(-2.6deg); }
}

.frame {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-lg);
  overflow: hidden;
}
.frame-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 34px;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .02em;
}
.frame-dots {
  position: absolute;
  left: 14px;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  gap: 5px;
}
.frame-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D6DCE8;
}
/* Contatore delle strade nel frame-bar dell'hero: statico dice gia' il totale,
   il JS lo fa correre durante il calcolo. */
.fb-conta {
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.fb-conta b { font-weight: 700; color: var(--navy); }
.fb-conta sup { font-size: .68em; }

/* ---------- Griglia hero: la bozza che si compone ----------
   Markup statico completo (senza JS resta piena); l'animazione a ondate vive
   in motion.js. Colori sigla = classi sg-* condivise col resto della pagina. */
.griglia-vivo {
  position: relative;   /* offsetParent delle celle: i conti di ancoraAvviso nel palco partono da qui */
  display: grid;
  grid-template-columns: minmax(58px, auto) repeat(14, minmax(0, 1fr));
  gap: 3px;
  padding: 10px 12px 9px;
  background: var(--card);
}
.gv-angolo { min-width: 0; }
.gv-g {
  min-width: 0;
  display: grid;
  place-items: center;
  line-height: 1.05;
  padding-block: .18rem;
  border-radius: 6px;
  color: var(--muted);
}
.gv-g b { font-weight: 800; font-size: .6rem; font-variant-numeric: tabular-nums; }
.gv-g i { font-style: normal; font-weight: 600; font-size: .5rem; text-transform: uppercase; letter-spacing: .04em; }
.gv-g.gv-we { background: var(--navy-soft); color: var(--navy); }
.gv-nome {
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: .66rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: .3rem;
}
.gv-cella {
  min-width: 0;
  display: grid;
  place-items: center;
  height: clamp(23px, 2.6vw, 33px);
  border-radius: 7px;
  font-size: .62rem;
  font-weight: 800;
  color: var(--inchiostro);
  letter-spacing: .01em;
}
.gv-regole {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .55rem .8rem .65rem;
  border-top: 1px solid var(--linea);
  background: var(--fondo);
}
.gv-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  font-weight: 700;
  color: var(--inchiostro);
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .26rem .6rem;
  white-space: nowrap;
}
.gv-chip svg { color: var(--ok); flex: none; }
/* v8: il chip equita' acceso in salvia, lo score si vede dal primo schermo. */
.gv-chip--eq { background: var(--salvia); border-color: #CBE6CB; color: var(--ok); }
.gv-fatto {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: .74rem;
  font-weight: 800;
  color: #fff;
  background: var(--navy);
  border-radius: 999px;
  padding: .3rem .75rem;
  white-space: nowrap;
}
/* ---------- Il metodo, dal vivo (#processo): racconto in 5 atti ----------
   Default (senza .js-player) = layout impilato, statico e COMPLETO: è anche il
   rendering no-JS / ?ridotto / reduced-motion. La classe .js-player, aggiunta
   e tolta SOLO da motion.js nei contesti matchMedia, trasforma la sezione in
   un palco a riproduzione (player a click con story-bar): qui cambia la
   GEOMETRIA, mai la visibilità dei contenuti (gli stati nascosti
   dell'animazione vivono in gsap.set). */
/* Banda cielo (dal 13 ago): la demo ha la sua identità tonale, incastonata
   tra le bande bianche di #prova e #app. Il canvas alba ci appoggia sopra il
   suo glow; prima la sezione stava su --fondo e sotto la story-bar (dove il
   glow radiale svanisce) didascalia e replay sembravano già fuori scena. */
.processo { background: var(--cielo); }
/* Piede della sezione: la riga di richiamo e, sotto, l'approfondimento del
   motore (stesso componente di #risultato e #equita). La riga sta centrata
   sopra il pannello, che occupa tutta la colonna. */
.processo-piede {
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.processo-piede > p {
  color: var(--muted);
  text-align: center;
  /* .testo ha una misura di lettura: senza auto il blocco resterebbe
     incollato a sinistra e il testo "centrato" starebbe fuori asse. */
  margin: 0 auto;
}
.processo-testa { text-align: center; }
.processo-testa .intro-sezione { margin-inline: auto; }

.pf-layout {
  display: grid;
  gap: clamp(2.2rem, 4vw, 3.2rem);
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
}

/* Rail dei 5 passaggi: contenuto VERO (titoli + descrizioni leggibili). */
.pf-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  max-width: 56ch;
  margin-inline: auto;
  width: 100%;
}
.pf-step { position: relative; padding-left: 3.3rem; }
.pf-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  border: 1px solid var(--linea-forte);
  background: var(--card);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .8rem;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pf-titolo {
  font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem);
  font-weight: 700;
  line-height: 1.25;
  padding-top: .28rem;
}
/* In modalità player il corpo migra nello slot didascalia (assoluto, opacity). */
.pf-corpo { display: grid; grid-template-rows: 1fr; }
.pf-desc { overflow: hidden; min-height: 0; color: var(--muted); margin-top: .45rem; }
/* Il segmento di avanzamento è un ornamento della sola modalità player. */
.pf-track { display: none; }

/* Teatro: il quadro del mese con contorni (dati, regole, timbri, consegna). */
.pf-teatro { display: grid; gap: clamp(1.3rem, 2.5vw, 1.8rem); justify-items: center; }
.pf-dati { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; }
.pf-dato {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--inchiostro);
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .32rem .75rem;
  box-shadow: var(--ombra-sm);
  white-space: nowrap;
}
.pf-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E098A8; /* rosa ferie, bordo di sg-F nei fogli/app */
  flex: none;
}

.pf-quadro { position: relative; width: 100%; max-width: 880px; }
.pf-piede {
  border-top: 1px solid var(--linea);
  background: var(--fondo);
  padding: .55rem .8rem .65rem;
  display: grid;
  gap: .5rem;
}
.pf-regole { display: flex; flex-wrap: wrap; gap: .45rem; }
.pf-timbri { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.pf-timbro {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .73rem;
  font-weight: 800;
  color: #205B2B;
  background: #E3F2E3;
  border: 1px solid #BFE3C2;
  border-radius: 999px;
  padding: .27rem .65rem;
  white-space: nowrap;
}
.pf-fatto { margin-left: auto; }
/* La correzione di prova: statica è una nota sotto il quadro; nel player viene
   riposizionata accanto alla cella incriminata (solo geometria, .js-player). */
.pf-avviso {
  display: inline-flex;
  align-items: center;
  margin: .6rem .8rem .7rem;
  font-size: .74rem;
  font-weight: 700;
  color: #8C3A2E;
  background: #FADFDA;
  border: 1px solid #EFB9AF;
  border-radius: 999px;
  padding: .28rem .7rem;
  white-space: nowrap;
}

.pf-contatore { text-align: center; color: var(--muted); }
.pf-contatore b {
  display: block;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem);
  line-height: 1.05;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.pf-contatore sup { font-size: .58em; }
.pf-contatore span { display: block; margin-top: .3rem; font-size: .92rem; }

/* Consegna: le tre superfici di prodotto + il toast push. */
.pf-consegna {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
  width: 100%;
  position: relative;
}
.pf-superficie { display: grid; gap: .65rem; justify-items: center; align-content: start; min-width: 0; }
.pf-superficie .frame { width: 100%; }
.pf-telefono { width: min(230px, 88%); }
.pf-super-eti {
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}
/* Il pilastro 1 (il turno) è il prodotto: si legge navy, non grigio come le
   due superfici su cui viene consegnato. */
.pf-super-eti--forte { color: var(--navy); }
.pf-toast {
  position: absolute;
  top: -1.1rem;
  right: clamp(.2rem, 3vw, 2.2rem);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .84rem;
  border-radius: var(--r-sm);
  padding: .55rem .9rem;
  box-shadow: var(--ombra-lg);
  white-space: nowrap;
}
.pf-toast svg { flex: none; opacity: .9; }

/* Il teatro ha celle più grandi dell'hero: è il protagonista del racconto. */
.griglia-vivo--pf { padding: 12px 14px 11px; }
.griglia-vivo--pf .gv-cella { height: clamp(24px, 4.4svh, 34px); font-size: .64rem; }
.griglia-vivo--pf .gv-nome { font-size: .7rem; }
/* Cella "ancora da decidere" (stato del racconto, applicato solo da motion.js). */
.griglia-vivo--pf .gv-cella.pf-vuota { background: var(--carta); color: transparent; }
/* Cella della violazione di prova mentre lampeggia. */
.griglia-vivo--pf .gv-cella.pf-errore { outline: 2px solid var(--errore); outline-offset: -1px; }

/* Canvas "alba" (creato SOLO da alba.js su richiesta di motion.js): overlay
   trasparente sopra lo sfondo della sezione, sotto i contenuti. L'ordine è
   reso deterministico sollevando il .wrap della sezione ospite a z-index:1
   (il canvas resta a 0): niente z negativi, niente ambiguità di painting. */
.alba-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero > .wrap,
.pf-stage > .wrap { position: relative; z-index: 1; }
/* Il copy dell'hero sta a sinistra: sul desktop la luce del canvas viene
   smorzata dal lato del testo (maschera alpha, piena solo verso il quadro).
   Fermi a .45/.58 dal 14 ago sera, il compromesso tra i .35/.5 accettati in
   48b442b e i .5/.62 del giro lastra: coi guadagni hero smorzati in alba.js
   (forza a fase piena 0.464 → 0.37) il lato copy resta in parita' con
   l'accettato (.45×0.37 ≈ .35×0.464) e il lato quadro scende del 20%.
   Un po' di luce vera dietro la lastra serve al suo blur (e alle bolle).
   Gli stop (.45 a 0, .58 a 40%, piena a 62%) sono SPECCHIATI in motion.js
   (compensaMaschera): alba.js annulla la maschera per le SOLE bolle, che
   altrimenti dietro la lastra perdevano meta' della voce rispetto al
   mobile senza maschera. Se si cambiano qui, cambiarli anche la'.
   Senza canvas (?ridotto, reduced-motion, no-JS) la regola è inerte. */
@media (min-width: 900.02px) {
  .hero > .alba-canvas {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .58) 40%, #000 62%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .58) 40%, #000 62%);
  }
}

/* ---- Modalità player (.js-player, aggiunta SOLO da motion.js) ----
   Il racconto non si scrubba più: si suona. Palco in flusso normale (niente
   scena alta 5 viewport, niente sticky), story-bar dei 5 atti sotto il
   quadro, didascalia dell'atto attivo in uno slot condiviso. Qui cambia la
   GEOMETRIA; gli stati nascosti dell'animazione vivono in gsap.set. Lo stato
   del player (idle/play/pausa/fine) sta in data-player sulla sezione e
   governa SOLO la veste del bottone play, mai i contenuti. */
.js-player .pf-stage { position: relative; } /* aggancio del canvas alba */
.js-player .pf-layout {
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
  gap: 1.15rem;
}
.js-player .pf-palco { position: relative; width: 100%; order: -1; }
.js-player .pf-teatro { position: relative; gap: .9rem; width: 100%; }
.js-player .pf-dati { position: relative; z-index: 2; }
.js-player .pf-quadro { z-index: 1; max-width: none; }
/* La correzione di prova viene ancorata alla cella incriminata via GSAP. */
.js-player .pf-avviso { position: absolute; left: 0; top: 0; margin: 0; z-index: 3; }
/* La consegna è un sovra-quadro a scomparsa (atto 5). */
.js-player .pf-consegna {
  position: absolute;
  inset: 0;
  z-index: 4;
  grid-template-columns: 1.05fr 1.45fr 1.05fr;
  align-items: center;
  align-content: center;
  padding: clamp(.4rem, 2vh, 1.4rem);
}
.js-player .pf-toast { top: 4%; right: 10%; }

/* Story-bar: i 5 capitoli. Il contenuto statico della rail resta nel markup:
   i <li> diventano segmenti, la pill è il bottone iniettato da motion.js
   (.pf-vai, che porta la copia testuale di numero+titolo), numero e titolo
   originali si spengono e la descrizione dell'atto attivo si legge nello
   slot sotto la barra (assoluto nel padding-bottom della rail). */
.js-player .pf-rail {
  position: relative;
  max-width: none;
  margin-inline: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  padding-bottom: 5.9rem; /* slot didascalia: la desc più lunga sta in 3 righe */
}
.js-player .pf-step {
  position: static;
  padding-left: 0;
  min-width: 0;
  display: grid;
  gap: .45rem;
  align-content: start;
}
.js-player .pf-step > .pf-num,
.js-player .pf-step > .pf-titolo { display: none; }
.pf-vai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 0;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  padding: .3rem;
  cursor: pointer;
  transition: color .25s ease;
}
.pf-vai:hover { color: var(--inchiostro); }
.pf-vai-num {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 1px solid var(--linea-forte);
  background: var(--card);
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  transition: background .3s, color .3s, border-color .3s;
}
.pf-vai-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.js-player .pf-step.is-attivo .pf-vai { color: var(--inchiostro); }
.js-player .pf-step.is-attivo .pf-vai-num { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Il segmento di avanzamento sotto ogni pill (riempimento scaleX via GSAP). */
.js-player .pf-track {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--linea-forte); /* sulla banda cielo, --linea sparirebbe */
  overflow: hidden;
}
.js-player .pf-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--navy);
}
/* Slot didascalia condiviso: i corpi sono assoluti sotto la barra e si legge
   quello dell'atto attivo (stesso pattern della vecchia mini-rail mobile). */
.js-player .pf-corpo {
  position: absolute;
  left: 50%;
  top: calc(100% - 5.35rem);
  transform: translateX(-50%);
  width: min(58ch, 100%);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.js-player .pf-step.is-attivo .pf-corpo { opacity: 1; }
.js-player .pf-desc { font-size: .95rem; margin-top: 0; }

/* Il bottone del racconto: cerchio sul quadro in attesa, pillola d'angolo
   discreta mentre suona. È chrome del player: senza JS resta hidden. */
.pf-play {
  border: 0;
  cursor: pointer;
  background: var(--navy);
  color: #fff;
}
.js-player .pf-play {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(45, 80, 117, .35);
  transition: left .35s ease, top .35s ease, width .35s ease, height .35s ease,
              transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.js-player[data-player='idle'] .pf-play {
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
}
.js-player[data-player='idle'] .pf-play:hover { transform: translate(-50%, -50%) scale(1.06); }
/* L'anello che respira: solo in attesa (spento nel blocco reduced-motion). */
.js-player[data-player='idle'] .pf-play::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(45, 80, 117, .4);
  animation: pf-respiro 2.6s ease-out infinite;
}
@keyframes pf-respiro {
  0% { transform: scale(.88); opacity: .9; }
  70%, 100% { transform: scale(1.3); opacity: 0; }
}
.js-player[data-player='play'] .pf-play,
.js-player[data-player='pausa'] .pf-play {
  left: calc(100% - 40px - .6rem);
  top: .6rem;
  width: 40px;
  height: 40px;
  transform: none;
}
.js-player[data-player='play'] .pf-play { opacity: .55; }
.js-player[data-player='play'] .pf-play:hover,
.js-player[data-player='play'] .pf-play:focus-visible { opacity: 1; }
.js-player[data-player='play'] .pf-play svg,
.js-player[data-player='pausa'] .pf-play svg { width: 16px; height: 16px; }
/* Icona: play in attesa e in pausa, pausa mentre suona. */
.pf-play .pf-ico-pausa { display: none; }
.js-player[data-player='play'] .pf-play .pf-ico-play { display: none; }
.js-player[data-player='play'] .pf-play .pf-ico-pausa { display: block; }
/* [hidden] deve vincere anche sulla veste player (il display:grid di
   .js-player .pf-play ha la stessa specificità: decide l'ordine, quindi
   questa regola sta DOPO ogni veste). A racconto finito (data-player='fine')
   il play sparisce davvero e resta solo il replay: senza questa vittoria il
   bottone, privo delle coordinate degli stati idle/play, cadeva in flusso
   sopra il capitolo 01 della story-bar. */
.pf-play[hidden] { display: none; }

/* Replay a fine corsa: pillola fantasma in variante chiara, sotto la barra. */
.pf-replay {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--card);
  border: 1px solid var(--linea-forte);
  border-radius: 999px;
  padding: .34rem .8rem;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--ombra-sm);
  justify-self: center;
  transition: border-color .2s ease, background .2s ease;
}
.pf-replay[hidden] { display: none; }
.pf-replay:hover { border-color: var(--navy); }
.pf-replay svg { flex: none; }

/* Player su mobile (≤900): pill solo-numero (il titolo dell'atto attivo va
   nello slot insieme alla descrizione), pillole-dati in uno slot unico sopra
   il quadro (una alla volta, la sequenza vive in motion.js). */
@media (max-width: 900px) {
  .js-player .pf-rail { gap: .4rem; padding-bottom: 7.9rem; }
  .js-player .pf-vai { padding: .3rem .1rem; }
  .js-player .pf-vai-tit { display: none; }
  .js-player .pf-step > .pf-titolo {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 7.3rem);
    text-align: center;
    font-size: .98rem;
    padding-top: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
  }
  .js-player .pf-step.is-attivo > .pf-titolo { opacity: 1; }
  .js-player .pf-corpo { top: calc(100% - 5.5rem); width: 100%; }
  .js-player .pf-desc { font-size: .8rem; line-height: 1.4; }
  .js-player .pf-teatro { padding-top: 2.9rem; }
  .js-player .pf-dati { position: absolute; inset: 0 0 auto 0; height: 2.6rem; }
  .js-player .pf-dato {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: 96%;
  }
  /* Celle compatte: il quadro resta leggibile senza dominare lo schermo. */
  .griglia-vivo--pf { padding: 8px 10px 7px; }
  .griglia-vivo--pf .gv-cella { height: clamp(19px, 3.6svh, 34px); }
  /* Consegna in colonna: toast in testa, telefono protagonista, turno e
     dashboard come miniature affiancate. */
  .js-player .pf-consegna {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: .7rem .8rem;
  }
  .js-player .pf-toast { position: static; order: -1; margin: 0; }
  .js-player .pf-superficie { gap: .35rem; }
  .js-player .pf-superficie--tel { flex: 0 0 100%; }
  .js-player .pf-superficie--tel .pf-telefono { width: min(176px, 52%); }
  .js-player .pf-superficie--turno,
  .js-player .pf-superficie--dash { flex: 0 1 45%; }
  .js-player .pf-super-eti { font-size: .68rem; }
  /* La pillola play/pausa scende sotto lo slot delle pillole-dati. */
  .js-player[data-player='play'] .pf-play,
  .js-player[data-player='pausa'] .pf-play { top: 3rem; }
}
@media (max-width: 720px) {
  /* Statico (senza player): superfici impilate. */
  .pf-consegna { grid-template-columns: 1fr; }
  .pf-toast { position: static; justify-self: center; margin-bottom: .2rem; }
}

/* In stampa niente chrome del player: torna il racconto impilato e completo
   (per quanto possibile: gli stili inline dell'animazione restano). */
@media print {
  .pf-play, .pf-vai, .pf-replay { display: none; }
  .js-player .pf-step > .pf-num,
  .js-player .pf-step > .pf-titolo { display: block; }
  .js-player .pf-step { position: relative; padding-left: 3.3rem; }
  .js-player .pf-step > .pf-titolo { position: static; opacity: 1; text-align: left; }
  .js-player .pf-rail { grid-template-columns: 1fr; padding-bottom: 0; }
  .js-player .pf-corpo { position: static; transform: none; width: auto; opacity: 1; text-align: left; }
  .js-player .pf-track { display: none; }
  .js-player .pf-consegna { position: static; }
}

/* ---------- Prova (striscia numeri, banda su fondo) ----------
   Su --fondo, non bianca: così stacca da #strutture (bianca) che la segue
   e la lastra bianca continua si spezza. */
/* Banda bianca dal 12 ago: col nuovo ordine sta tra il cielo del confronto
   e il cielo del processo, e l'alternanza tonale resta pulita. */
/* Su fondo, non su carta: dal 14 ago i numeri stanno tra la banda cielo del
   #processo e la carta bianca di #app, e due bande bianche di fila
   leggerebbero come una sezione sola. */
.numeri { background: var(--fondo); }
.numeri-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat { padding-inline: clamp(.5rem, 2vw, 2rem); }
.stat + .stat { border-left: 1px solid var(--linea); }
/* Un tick navy sopra ogni numerale: quattro orizzonti in miniatura. */
.stat::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--navy);
  margin-bottom: 1rem;
}
/* Numerali in Fraunces come gli altri perni visivi della pagina
   (pf-contatore, pilastro-num, muro-sigillo): a 620, il peso dei numerali. */
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
/* Solo l'etichetta (figlia diretta): lo span del contatore dentro <strong>
   deve ereditare corpo e colore del numerale. */
.stat > span { display: block; margin-top: .5rem; color: var(--muted); font-size: .93rem; line-height: 1.45; }
.stat strong span { font: inherit; color: inherit; }
.prova-nota { margin-top: 2.4rem; }

/* ---------- Chip sigla (colori reali del prodotto) ---------- */
.sigla {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: .5rem;
  border-radius: var(--r-xs);
  font-weight: 800;
  font-size: .95rem;
  color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
}
.sg-M { background: #BADEFA; }
.sg-P { background: #FCD9A6; }
.sg-N { background: #9482C9; color: #fff; }
.sg-SN { background: #FFF7B3; }
.sg-R { background: #D9F2D9; }
.sg-F { background: #F2C2CC; } /* ferie: rosa dei fogli/app (SIGLA_STYLE) */

/* ---------- Per chi lavora: feature slide numerate ---------- */
.slides {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.slide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.slide:nth-child(even) .slide-visual { order: -1; }
.slide-indice {
  display: block;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .14em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.slide-testo h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.25;
  margin-top: .6rem;
}
.slide-testo p { color: var(--muted); margin-top: .8rem; max-width: 52ch; }

/* Vetrina: pannello tinta pastello che ospita telefono o motivo decorativo. */
.vetrina {
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  align-items: end;
  justify-items: center;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.2rem) 0;
  min-height: clamp(300px, 32vw, 420px);
}
.vetrina--alba { background: var(--cielo); }
.vetrina--cielo { background: var(--cielo-2); }
.vetrina--salvia { background: var(--salvia); }

/* Cornice telefono CSS: lo screenshot 750x990 esce a vivo dal bordo basso
   (mai fingerlo un 19,5:9 intero). */
.telefono {
  width: min(300px, 82%);
  background: var(--navy-2);
  padding: 26px 10px 0;
  border-radius: 44px 44px 0 0;
  box-shadow: var(--ombra-lg);
  position: relative;
}
.telefono::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 50%;
  translate: -50% 0;
  width: 74px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
}
.telefono img { border-radius: 30px 30px 0 0; }

/* Motivo decorativo (aria-hidden): icona grande + dettagli di prodotto. */
.motivo {
  align-items: center;
  align-content: center;
  gap: 1.4rem;
  padding: clamp(2rem, 4vw, 3rem);
}
.motivo-icona {
  width: 96px;
  height: 96px;
  border-radius: 26px;
  background: var(--card);
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--ombra-sm);
}
.motivo-icona svg { width: 46px; height: 46px; }
.motivo-toast {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  color: var(--inchiostro);
  font-weight: 700;
  font-size: .95rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  box-shadow: var(--ombra);
  rotate: -2deg;
}
.motivo-toast svg { color: var(--navy); }
.scambio {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
}
.scambio .sigla { min-width: 3.6rem; height: 3.6rem; font-size: 1.3rem; border-radius: var(--r-md); box-shadow: var(--ombra-sm); }
.scambio-frecce { display: flex; flex-direction: column; gap: .2rem; color: var(--navy); }
.scambio-frecce svg { width: 30px; height: 30px; display: block; }
.motivo-pesi {
  display: inline-flex;
  align-items: baseline;
  gap: .8rem;
}
.motivo-pesi b, .motivo-pesi i {
  font-style: normal;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--ombra-sm);
  color: var(--inchiostro);
}
.motivo-pesi b { font-weight: 800; font-size: 1.25rem; padding: .55rem 1.2rem; }
.motivo-pesi i { font-weight: 600; font-size: .9rem; padding: .35rem .85rem; color: var(--muted); }

/* Composizioni di prodotto dentro le vetrine (statiche e decorative:
   aria-hidden nel markup, nessun aggancio a motion.js). Prefisso .mv-
   dedicato: mai riusare .gv-/.eq-, che motion.js conta e anima. */
.mv-scheda {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--ombra);
  padding: .85rem 1.15rem;
}
.mv-scheda-testo { display: flex; flex-direction: column; gap: .1rem; }
.mv-scheda-testo b { font-weight: 700; font-size: .98rem; }
.mv-scheda-testo i { font-style: normal; font-size: .82rem; color: var(--muted); }
.mv-scambio { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.mv-riga {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--card);
  border-radius: 999px;
  box-shadow: var(--ombra-sm);
  padding: .4rem .5rem .4rem 1.05rem;
}
.mv-nome { font-weight: 700; font-size: .95rem; }
.mv-giorno { font-size: .85rem; color: var(--muted); }
/* Le frecce dello scambio, qui in verticale tra le due righe: affiancate. */
.mv-frecce { flex-direction: row; gap: .5rem; }
.mv-frecce svg { width: 22px; height: 22px; }
.mv-conti {
  display: block;
  width: min(280px, 92%);
  background: var(--card);
  border-radius: var(--r-md);
  box-shadow: var(--ombra);
  padding: 1.05rem 1.2rem 1.15rem;
}
.mv-conti-testa {
  display: block;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: .85rem;
}
.mv-conto {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem .6rem;
  align-items: baseline;
}
.mv-conto + .mv-conto { margin-top: .7rem; }
.mv-conto > span:first-child { font-size: .85rem; font-weight: 600; color: var(--muted); }
.mv-conto b { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.mv-track {
  grid-column: 1 / -1;
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--navy-soft);
  overflow: hidden;
}
.mv-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--navy);
}

/* "Portalo dove lavori": la card-cielo dell'innesco bottom-up. */
.porta {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--cielo);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}
.porta-testo p { color: var(--inchiostro); margin-top: .6rem; max-width: 52ch; }
.porta-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  justify-self: end;
}

/* ---------- Dentro l'app (#app, banda bianca) ----------
   Dal 12 ago sera il tour dell'app vive in #app, subito dopo #processo;
   #tour resta la banda dei benefici di chi lavora, anche lei card.
   Default (senza .js-tour) = impilato statico COMPLETO, stesso ritmo delle
   .slide. La classe .js-tour (solo da main.js, su #app) attiva selettore
   ruolo + elenco voci + una scena sola. Le tablist nascono hidden nell'HTML. */
.app { background: var(--card); }
/* Banda cielo-2 dal 14 ago: col nuovo ordine #tour segue #strutture, che è
   carta bianca (prima in mezzo c'era #equita, che sta su fondo). */
.tour { background: var(--cielo-2); }
.tour-corpo { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.tour-gruppo { position: relative; }
.tour-gruppo + .tour-gruppo { margin-top: clamp(3.2rem, 6vw, 4.8rem); }
.tour-gruppo-titolo { margin-bottom: 1.6rem; }
.tour-scene { display: grid; gap: clamp(2.6rem, 5vw, 4rem); }
.tour-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.tour-item:nth-child(even) .tour-item-visual { order: -1; }
.tour-item-testo h4 {
  /* Cap sotto l'h3 di sistema (1.45rem): gerarchia h2 > h3 > h4 rispettata. */
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.34rem);
  font-weight: 700;
  line-height: 1.25;
}
.tour-item-testo p { color: var(--muted); margin-top: .7rem; max-width: 52ch; }
/* L'unico link inline del tour (card Calcolo turni, verso #calcolo): target
   touch col pattern di .sez-coda a (padding + margine negativo). */
.tour-item-testo p a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; }
.tour-vetrina { position: relative; width: 100%; }
.tour-schermo img { display: block; width: 100%; height: auto; }
/* Pillola push decorativa sull'item Home (pattern .pf-toast). */
.tour-toast {
  position: absolute;
  top: clamp(.8rem, 2vw, 1.4rem);
  right: clamp(.6rem, 2vw, 1.4rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  border-radius: var(--r-sm);
  padding: .5rem .85rem;
  box-shadow: var(--ombra-lg);
  white-space: nowrap;
}
.tour-nota { margin-top: 2rem; }
/* L'unica pillola in pagina, sulla voce Timbratura QR: dichiara uno STATO
   vero (la funzione esiste, e' collaudata e sta spenta) che il titolo non
   dice. inline-grid: shrink-wrap anche in flusso block, senza stirarsi. */
.tile-tag {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  margin-bottom: .2rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--navy-soft);
  color: var(--navy);
  white-space: nowrap;
}

/* Badge di stato: non referenziati al momento (rimossi dal copy il 25/07),
   tenuti per riuso futuro. */
.tour-badge {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  margin-left: .5rem;
  padding: .22rem .55rem;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tour-badge--sviluppo { background: #FBEFDB; border: 1px solid #EFD9A9; color: #8A5A18; }
.tour-badge--arrivo { background: var(--navy-soft); color: var(--navy); }

/* Modalita' interattiva. */
.js-tour .tour-gruppo-titolo {
  /* Il toggle lo sostituisce a vista; resta nell'outline per le AT. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
}
/* Segmented control: le due viste vivono in un unico binario, la pillola
   attiva e' il cursore. (Contrasto muted su navy-soft: 5,05:1.) */
.js-tour .tour-ruoli {
  display: flex;
  justify-content: center;
  gap: .25rem;
  width: max-content;
  margin-inline: auto;
  background: var(--navy-soft);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .3rem;
}
.tour-ruolo {
  font: inherit;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: .55rem 1.2rem;
  min-height: 44px;
  transition: background .2s ease, color .2s ease;
}
.tour-ruolo:hover { color: var(--navy); }
.tour-ruolo.is-attivo { background: var(--navy); color: #fff; }
.js-tour .tour-gruppo {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  display: grid;
  grid-template-columns: minmax(240px, 330px) 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}
.js-tour .tour-gruppo + .tour-gruppo { margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.js-tour .tour-gruppo:not(.is-attiva) { display: none; }
.js-tour .tour-rail { display: flex; flex-direction: column; gap: .3rem; }
.tour-tab {
  font: inherit;
  font-weight: 700;
  font-size: .98rem;
  text-align: left;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-left: 3px solid var(--linea);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .68rem .9rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tour-tab:hover { color: var(--navy); background: rgba(45, 80, 117, .05); }
.tour-tab.is-attivo { color: var(--navy); background: var(--navy-soft); border-left-color: var(--navy); }
/* Micro-affordance da mouse sulla rail verticale: scivolo di 2px verso la
   scena. Solo desktop con puntatore fine e motion consentito. */
@media (min-width: 900.02px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js-tour .tour-tab { transition: background .2s ease, color .2s ease, border-color .2s ease, translate .18s ease; }
  .js-tour .tour-tab:hover { translate: 2px 0; }
}
.js-tour .tour-scene { gap: 0; }
.js-tour .tour-item { display: none; }
.js-tour .tour-item.is-attiva {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  justify-items: center;
}
.js-tour .tour-item .tour-item-visual { order: -1; width: 100%; max-width: 720px; }
.js-tour .tour-item-testo { text-align: center; max-width: 56ch; }
.js-tour .tour-item-testo p { margin-top: .45rem; font-size: .98rem; }
/* Scena compatta: la vetrina perde l'altezza da slide, il telefono si
   stringe. Stesso rapporto 1200/850 della scena capo: il cambio ruolo non
   fa saltare la pagina (residuo = la sola frame-bar, ~36px). */
.js-tour .tour-vetrina {
  min-height: 0;
  aspect-ratio: 1200 / 850;
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
}
.js-tour .tour-vetrina .telefono { width: min(250px, 64%); }
/* Scena caposala a rapporto FISSO: nessun salto d'altezza cambiando voce.
   Le card desk-* sono catturate a 24:17 = 1200/850 esatto (vedi
   landing-assets.mjs): il cover e' un no-op, niente tagli. */
.js-tour .tour-schermo { aspect-ratio: 1200 / 850; overflow: hidden; background: var(--carta); }
.js-tour .tour-schermo img { height: 100%; object-fit: cover; object-position: top; }
.js-tour .tour-item--kiosk .tour-schermo img { object-position: center; }
.js-tour .tour-nota { text-align: center; margin-top: 1.4rem; }
/* Dissolvenza breve al cambio voce: continuita', non spettacolo. */
@media (prefers-reduced-motion: no-preference) {
  .js-tour .tour-item.is-attiva { animation: tour-dissolvenza .22s ease; }
}
@keyframes tour-dissolvenza { from { opacity: 0; } }

@media (max-width: 900px) {
  .tour-item { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Neutralizza lo zig-zag SOLO nel layout impilato senza JS: a parita' di
     specificita' questa regola vinceva anche sulla scena interattiva, dove le
     voci in posizione pari finivano col testo SOPRA lo schermo (fix 22 ago,
     visibile su La mia scheda e Calcolo turni, le seconde voci). */
  .app:not(.js-tour) .tour-item:nth-child(even) .tour-item-visual { order: 0; }
  .js-tour .tour-gruppo { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
  .js-tour .tour-rail {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2rem));
    padding-inline: clamp(1.1rem, 4vw, 2rem);
    /* Affordance di scorrimento: aggancio morbido + sfumatura ai bordi
       (dove mask-image manca degrada senza fade, nessun danno). */
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.1rem, #000 calc(100% - 1.6rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 1.1rem, #000 calc(100% - 1.6rem), transparent);
  }
  .js-tour .tour-rail::-webkit-scrollbar { display: none; }
  .js-tour .tour-tab {
    flex: none;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid var(--linea);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    scroll-snap-align: start;
    scroll-margin-inline: 1.1rem;
  }
  .js-tour .tour-tab.is-attivo { border-bottom-color: var(--navy); }
}
@media (max-width: 720px) {
  .js-tour .tour-ruoli { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .js-tour .tour-vetrina .telefono { width: min(210px, 62%); }
}
@media print {
  .tour-ruoli, .tour-rail { display: none; }
  .js-tour .tour-gruppo, .js-tour .tour-gruppo:not(.is-attiva) { display: block; }
  .js-tour .tour-item { display: grid; }
  .js-tour .tour-scene { gap: clamp(2.6rem, 5vw, 4rem); }
}
@media (prefers-reduced-motion: reduce) {
  .tour-ruolo, .tour-tab { transition: none; }
}

/* ---------- #calcolo: chi avvia il calcolo e dove gira ---------- */
/* Pattern card di .tutela ma in palette FREDDA: i token --oro-* restano
   esclusivi di #benessere (v. commento la'). Banda cielo-2 di proposito:
   carta bianca di #app sopra, oro del welfare sotto, mai due bande uguali
   adiacenti. Le card hanno la LORO coppia set/batch in motion.js
   (.calcolo-card) e la testata sta in TESTATE; la coda e' STATICA come
   .benessere-coda perche' contiene un link (tab order). */
.calcolo { background: var(--cielo-2); }
.calcolo-grid {
  list-style: none;
  margin: clamp(1.9rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.calcolo-card {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 1.8rem);
}
.calcolo-icona {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--navy-soft);
  color: var(--navy);
}
.calcolo-eti {
  display: block;
  margin-top: 1.05rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.calcolo-card .h3 { margin-top: .4rem; }
.calcolo-card p { margin-top: .6rem; color: var(--muted); }
/* Coda statica; il link ha il target touch col pattern di .sez-coda a. */
.calcolo-coda { margin-top: clamp(2.2rem, 4vw, 3rem); }
.calcolo-coda a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; }

/* La vetrina "dentro la pagina del calcolo" (21 ago sera): tre momenti
   alternati testo|schermo col layout di .eq-blocco, ma qui il visual e' uno
   screenshot REALE della pagina /calcolo dentro la cornice .frame condivisa
   (barra "Elio · ..."). Il quadro pesa di piu' del testo (7fr contro 5):
   e' la prova, non l'illustrazione. Contratto motion: il reveal muove
   .cv-schermo > .frame e il parallax desktop muove .cv-schermo (il wrapper),
   mai le stesse property sullo stesso nodo (schema dell'hero: heroLoad sul
   frame, tilt sul genitore). Statico = stato finale: nessun overscale via
   CSS, l'immagine resta intera anche senza JS. */
.calcolo-vetrina { margin-top: clamp(2.8rem, 5vw, 4rem); }
.cv-kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
/* Il filetto che completa la riga del kicker: cornice editoriale, niente
   colore pieno (la banda e' gia' cielo-2). */
.cv-kicker::after { content: ''; height: 1px; flex: 1; background: var(--linea); }
.cv-lista {
  list-style: none;
  margin: clamp(1.7rem, 3vw, 2.4rem) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2.6rem, 5vw, 4rem);
}
.cv-momento {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
.cv-momento:nth-child(even) .cv-schermo { order: -1; }
.cv-eti {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.cv-testo .h3 { margin-top: .55rem; }
.cv-testo p { margin-top: .7rem; color: var(--muted); max-width: 46ch; }
.cv-schermo { margin: 0; }
.cv-schermo img { display: block; width: 100%; height: auto; }
.cv-nota { margin-top: clamp(1.8rem, 3vw, 2.4rem); }
/* Sotto-sezione riparazione (27 ago): stesso guscio della vetrina, in piu' il
   lead sotto il kicker (la vetrina sopra non ce l'ha). Statico come il resto:
   il lead non entra in nessun set/reveal di motion.js. */
.calcolo-ripara .ripara-lead { margin-top: clamp(1rem, 2vw, 1.4rem); color: var(--muted); }

/* ---------- Per le strutture (banda bianca) ---------- */
.strutture { background: var(--card); }
.dolori {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
  max-width: 660px;
}
.dolori li { display: flex; gap: .9rem; align-items: center; }
.dolore-chip {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  color: var(--navy);
  display: grid;
  place-items: center;
  flex: none;
}
.dolore-chip svg { width: 20px; height: 20px; }
.dc-1 { background: var(--cielo-2); }
.dc-2 { background: var(--cielo); }
.dc-3 { background: #FADFDA; }

/* ===================================================================
   BLOCCHI DI CONFRONTO
   Prima di questo giro esisteva un pattern solo (.duo + .duo-card + pillola
   maiuscola in alto a destra) riusato CINQUE volte per QUATTRO lavori
   semantici diversi: un trittico ordinato, un'opposizione prima/dopo, una
   tassonomia, due scenari paralleli e due argomenti scollegati. Era il
   contenitore di default, non un contenitore progettato, e si vedeva.
   Ora ogni blocco ha la forma del suo argomento. Il vocabolario condiviso è
   fatto di device che il file possedeva già: la tacca 28x3 e il filetto
   divisorio di .stat, i filetti su navy del muro, il ritmo a
   border-top della .faq, la mask .sole. Niente pillole d'angolo: quelle
   restano solo dove dichiarano uno STATO (.tile-tag sulla timbratura spenta).
   =================================================================== */

/* ---------- Tre pilastri: una scala, non tre scatole ---------- */
/* Tre card pari direbbero "equivalenti"; qui il primo pilastro è il prodotto
   e gli altri due sono le superfici su cui viene consegnato. La gerarchia la
   portano il numerale, la tacca navy e la colonna più larga: nessun badge. */
.pilastri {
  background: var(--card);
  padding-block: var(--pad-sezione-corta);
}
.pilastri-grid {
  list-style: none;
  margin: clamp(1.9rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1.22fr 1fr 1fr;
  gap: clamp(1.6rem, 3vw, 2.8rem);
}
.pilastro {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-left: clamp(1.4rem, 2.4vw, 2.2rem);
  border-left: 1px solid var(--linea);
}
.pilastri-grid > .pilastro:first-child { padding-left: 0; border-left: 0; }
/* La tacca di .stat, su tutte e tre per non sfasare l'allineamento: navy sul
   primo, filetto sugli altri. È il rango, non una decorazione. */
.pilastro::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--linea-forte);
  margin-bottom: .95rem;
}
.pilastro--primo::before { background: var(--navy); }
/* Fraunces fuori da .display/.h2: consentito solo sui NUMERALI, sulla scia di
   .pf-contatore b. Vale per questo e per il sigillo del muro, e basta. */
.pilastro-num {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(2rem, 1.4rem + 1.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--linea-forte);
  font-variant-numeric: tabular-nums;
}
.pilastro--primo .pilastro-num { color: var(--navy); }
.pilastro-ruolo {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .6rem;
}
.pilastro .h3 { margin-top: .3rem; }
.pilastro > p { margin-top: .55rem; color: var(--muted); }

/* ---------- #manifesto: la scelta di campo ---------- */
/* Banda corta di posizionamento tra i pilastri e il metodo: solo testo,
   centrato come .domande-testa, nessuna card. Fondo --fondo per staccare
   dalla carta dei pilastri e dal cielo del processo (stesso ruolo che
   .numeri ha tra cielo e carta). Nessuna voce in nav. Il reveal e' quello
   delle TESTATE di motion.js: qui NESSUNO stato nascosto (contratto
   statico-completo). Niente tokens --oro-*: la luce calda resta di
   #benessere (regola 12). */
.manifesto { background: var(--fondo); padding-block: var(--pad-sezione-corta); }
.manifesto-testo { max-width: 46rem; margin-inline: auto; text-align: center; }
.manifesto-testo .lead + .lead { margin-top: .95rem; }

/* ---------- #benessere: il welfare, in tre tutele ---------- */
/* Card bianche SOLLEVATE sulla banda cielo: stessa retorica di elevazione
   del lato "calcolato" in #risultato. Icona Phosphor in tondo + etichetta
   di meccanismo (taxonomy ferree/qualita' di #strutture) con lo stile di
   .conf-eti. Le card sono .tutela, NON .pilastro: hanno il loro set/batch
   in motion.js (coppia da mantenere, v. commento la' dentro).
   V8 "welfare al centro": UNICA sezione a luce calda della pagina (wash
   d'oro + eco del sole in mask, tokens --oro-* nei :root). Il .wrap sta in
   position:relative per dipingere SOPRA il disco assoluto (ordine di
   painting: senza, il sole coprirebbe il testo); overflow hidden perche'
   il disco sanguina oltre il bordo destro e va tagliato. */
.benessere {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(52% 46% at 84% -4%, var(--oro-velo), rgba(242, 185, 92, 0) 72%),
    var(--oro-fondo);
}
.benessere .wrap { position: relative; }
.benessere .eyebrow { color: var(--oro-testo); }
.sole-benessere {
  position: absolute;
  top: clamp(-80px, -6vw, -40px);
  right: clamp(-60px, -4vw, -26px);
  width: clamp(190px, 24vw, 330px);
  height: clamp(190px, 24vw, 330px);
  color: var(--oro-sole);
  opacity: .3;
  pointer-events: none;
}
.benessere-grid {
  list-style: none;
  margin: clamp(1.9rem, 3vw, 2.6rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.1rem, 2vw, 1.6rem);
}
.tutela {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.4rem, 2.4vw, 1.8rem);
}
.tutela-icona {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--oro-soft);
  color: var(--oro-testo);
}
.tutela-eti {
  display: block;
  margin-top: 1.05rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
}
.tutela .h3 { margin-top: .4rem; }
.tutela p { margin-top: .6rem; color: var(--muted); }
/* Coda per la direzione (14 ago): titolo, argomento, i due esiti e la CTA.
   Blocco statico, senza reveal: le classi con animazione (.sez-coda,
   .sotto-testa) hanno gia' i loro trigger altrove e glieli ruberebbe. */
.benessere-coda { margin-top: clamp(2.6rem, 5vw, 3.6rem); max-width: 66ch; }
.benessere-coda p { margin-top: .7rem; color: var(--muted); }
.benessere-coda .lista-punti { margin-top: 1.1rem; }
.benessere-coda .btn { margin-top: 1.7rem; }
/* I punti della sezione prendono la luce calda, come le icone. */
.benessere .lista-punti li::before { background: var(--oro-testo); }

/* Testata di un blocco interno alla sezione (h3 + occhiello lungo). */
.sotto-testa { margin-top: clamp(3rem, 5vw, 4rem); max-width: 640px; }
.sotto-testa p { color: var(--muted); margin-top: .6rem; }
/* Riga di chiusura di sezione, sotto un blocco di confronto. */
.sez-coda { margin-top: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; }
/* Target touch dei link inline: area gonfiata col pattern di .brand
   (padding + margine negativo), il layout percepito non si muove. */
.sez-coda a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; }

/* ---------- #risultato: stessa forma, materia diversa ---------- */
/* Banda cielo propria: è il claim commerciale centrale e prima era l'unica
   sezione chiave senza identità tonale (fondo su fondo col #processo).
   Sul cielo la carta del lato "a mano" si appoggia alla banda e il bianco
   del "calcolato" esce di più: la retorica dell'elevazione si rafforza. */
.risultato { background: var(--cielo-2); }
/* Il "a mano" è carta: nessuna ombra, tipo muted, appoggiato a filo pagina.
   Il "calcolato" è bianco, sollevato, con l'ombra. L'elevazione È
   l'argomento. La silhouette resta identica perché il confronto deve
   restare onesto. */
.confronto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(1.9rem, 3vw, 2.6rem);
  align-items: start;
}
.conf-lato {
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.4rem, 2.4vw, 1.9rem);
}
/* Il dislivello si fa col MARGINE, non con translate né transform: il reveal
   di GSAP anima la y di queste card e nel farlo scrive inline
   "translate:none; rotate:none; scale:none" per normalizzare le trasformate,
   che azzererebbe qualunque translate messo qui. I margini non li tocca.
   Abbasso il lato a mano invece di alzare l'altro, così il blocco resta
   allineato col resto della sezione e non servono margini negativi. */
.conf-lato--mano {
  background: var(--carta);
  color: var(--muted);
  margin-top: 10px;
}
.conf-lato--calcolo {
  background: var(--card);
  box-shadow: var(--ombra-lg);
}
.conf-eti {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.conf-lato--calcolo .conf-eti { color: var(--navy); }
.conf-titolo {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  font-weight: 750;
  line-height: 1.25;
  margin-top: .5rem;
  color: var(--muted);
}
.conf-lato--calcolo .conf-titolo { color: var(--inchiostro); }
.conf-voci { list-style: none; margin: 1.15rem 0 0; padding: 0; }
.conf-voci li {
  position: relative;
  padding-block: .42rem;
  padding-left: 1.5rem;
  line-height: 1.5;
}
/* Marcatori diversi perché i due metodi sono diversi: un segno a matita da una
   parte, una decisione piena dall'altra. */
.conf-lato--mano .conf-voci li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15em;
  width: 11px;
  height: 1px;
  background: var(--linea-forte);
}
.conf-lato--calcolo .conf-voci li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: .95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy);
}
.conf-chiusa {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linea);
  font-size: .95rem;
  line-height: 1.6;
}
.conf-lato--calcolo .conf-chiusa { color: var(--inchiostro); font-weight: 600; }

/* ---------- Il confronto col mercato: claim + approfondimento ---------- */
/* Dal 12 ago il secondo termine di paragone non è più dietro un tab: il
   claim sta nel testo visibile (.conf-claim) e l'argomentazione dentro il
   details .approfondisci. Il selettore .conf-ruoli/.js-conf è uscito con
   lui (main.js non trova la tablist e non fa nulla: contratto invariato). */
.conf-claim { margin-top: clamp(2.2rem, 4vw, 3rem); font-weight: 600; }
.conf-premessa { margin-top: .4rem; }
.conf-premessa + .confronto { margin-top: clamp(1.2rem, 2vw, 1.6rem); }

/* ---------- #strutture: il muro e la spinta ---------- */
/* Le regole ferree sono binarie (o reggono o il mese non esce), quelle di
   qualità sono una spinta continua: due scatole gemelle lo negherebbero.
   Quindi materiali opposti e colonne sfalsate, così non si leggono in
   parallelo come se fossero la stessa cosa. */
.regole {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
}
.muro {
  background: linear-gradient(168deg, var(--navy-2) 0%, var(--navy) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--ombra-lg);
}
.muro-titolo,
.spinta-titolo {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.muro-titolo { color: var(--azzurro); }
.spinta-titolo { color: var(--navy); }
.muro-voci { list-style: none; margin: 1.1rem 0 0; padding: 0; }
/* Corsi di muratura, non pallini: filetti chiari sulla lastra navy. */
.muro-voci li {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  padding-block: .72rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}
.muro-voci li:first-child { border-top: 0; padding-top: .25rem; }
.muro-voci svg { color: var(--azzurro); flex: none; translate: 0 1px; }
.muro-sigillo {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: .9rem;
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.muro-sigillo b {
  font-family: var(--font-display);
  font-weight: 620;
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: .8;
  color: var(--azzurro);
  font-variant-numeric: tabular-nums;
}
.muro-sigillo span { color: var(--chiarore); font-size: .97rem; line-height: 1.55; }
/* La spinta NON è una card: sta sul fondo della sezione, aperta, con un solo
   filetto. La differenza di materiale è metà del messaggio. */
.spinta {
  padding-left: clamp(1.2rem, 2vw, 1.8rem);
  border-left: 2px solid var(--navy-soft);
  margin-top: clamp(1.4rem, 3vw, 2.6rem);
}
.spinta-voci { list-style: none; margin: 1rem 0 0; padding: 0; }
.spinta-voci li {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  padding-block: .5rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.4;
}
.spinta-voci svg { color: var(--navy); flex: none; translate: 0 2px; }
.spinta-chiusa {
  margin-top: 1.05rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 42ch;
}

/* ---------- Le due ipotesi della direzione (dentro #strutture) ---------- */
/* Qui la coppia è corretta (due condizionali paralleli), la scatola no. Un
   filetto divide, e i punti hanno il ritmo di un documento: è esattamente
   quello che la sezione argomenta. gap 0 + padding, così il filetto cade
   esatto in mezzo. */
.ipotesi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
  margin-top: clamp(2rem, 3.5vw, 2.8rem);
}
.ipotesi-col { padding-right: clamp(1.6rem, 3.4vw, 2.8rem); }
.ipotesi-col + .ipotesi-col {
  padding-right: 0;
  padding-left: clamp(1.6rem, 3.4vw, 2.8rem);
  border-left: 1px solid var(--linea);
}
.ipotesi-eti {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ipotesi-titolo,
.fascicolo-titolo {
  font-size: var(--fs-h3);
  font-weight: 750;
  line-height: 1.25;
}
.ipotesi-titolo { margin-top: .55rem; }
.ipotesi-voci { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.ipotesi-voci li {
  border-top: 1px solid var(--linea);
  padding-block: .85rem;
  line-height: 1.5;
}
.ipotesi-chiusa,
.fascicolo-chiusa {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--navy-soft);
  font-weight: 600;
  line-height: 1.6;
}

/* ---------- #fiducia: il fascicolo ---------- */
/* Fino al 24 ago qui c'erano due blocchi: il dossier di conformità e la firma
   dell'autore ("Chi c'è dietro"). La firma è stata rimossa e la persona vive
   ora nella riga .footer-firma del footer, quindi la griglia porta un blocco
   solo: colonna unica con misura leggibile, non stirata a tutta larghezza.
   Se un giorno torna un secondo blocco, la coppia era `1.3fr .9fr`. */
.fiducia { background: var(--card); }
.fiducia-grid {
  display: grid;
  grid-template-columns: minmax(0, 68ch);
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 3.5vw, 2.8rem);
}
.fascicolo-voci { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.fascicolo-voci li {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  border-top: 1px solid var(--linea);
  padding-block: .8rem;
  line-height: 1.5;
}
.fascicolo-voci svg { color: var(--navy); flex: none; translate: 0 2px; }

/* Chiusura sezione strutture: come si parte + CTA di conversione. */
.strutture-fine {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--linea);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
}
.strutture-fine p { color: var(--muted); max-width: 52ch; }

/* ---------- Il motore (approfondimento in fondo a #processo) ---------- */
/* Non è più una banda del filo né una finestra: il testo vive dentro il
   .approfondisci del piede di #processo, su una colonna sola (l'affiancata
   con la "curiosità di oggi" non c'è più). Niente fondo proprio: prende la
   carta del pannello. */
.motore-testo > * + * { margin-top: 1.2rem; }
.motore-wow {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.motore-wow b {
  font-size: clamp(3rem, 2rem + 4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.motore-wow b sup { font-size: .5em; font-weight: 800; }
.motore-wow span { color: var(--muted); font-size: .95rem; max-width: 40ch; }

/* ---------- L'equità, misurata (banda su fondo dal 12 ago: tra le carte
   di #strutture e #tour, che col nuovo ordine sono adiacenti) ---------- */
.equita { background: var(--fondo); }
.equita-testa { max-width: 680px; }
.eq-lista {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  margin-top: clamp(2.6rem, 5vw, 4rem);
}
.eq-blocco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.eq-blocco:nth-child(even) .eq-visual { order: -1; }
.eq-testo h3 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.25;
}
.eq-testo p { color: var(--muted); margin-top: .8rem; max-width: 52ch; }
.eq-testo b { color: var(--inchiostro); font-weight: 700; }
/* Gli elenchi del copy istituzionale parlano col tono dei paragrafi. */
.eq-testo .lista-punti li { color: var(--muted); max-width: 52ch; }

.eq-visual { margin: 0; }
.eq-pannello {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra);
  padding: clamp(1.2rem, 2.5vw, 1.6rem);
}
.eq-pannello-testa {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.1rem;
}
.eq-caption { margin-top: .9rem; font-size: .85rem; color: var(--muted); }

/* Visual 1: barre per persona che convergono (statico = gia' convergenti). */
.eq-riga {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: .7rem;
}
.eq-riga + .eq-riga { margin-top: .65rem; }
.eq-nome {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eq-track {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: var(--carta);
  overflow: hidden;
}
.eq-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--navy);
}
.eq-indice {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
  font-weight: 600;
  font-size: .95rem;
}
.eq-indice svg { color: var(--ok); flex: none; }
.eq-indice b { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }

/* Visual 2: le pagelle (indici con barra, stile app). */
.eq-metrica + .eq-metrica { margin-top: .85rem; }
.eq-metrica-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.eq-metrica-testa b { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.eq-metrica .eq-track { height: 8px; }

/* Visual 3: la curva dell'utilita' marginale (statico = curva completa). */
.eq-curva { width: 100%; height: auto; display: block; }
.eq-curva text { font-family: var(--font); font-size: 10.5px; font-weight: 600; fill: var(--muted); }
.eq-curva .zc { font-size: 10px; font-weight: 700; fill: var(--inchiostro); }
.eq-curva-guida { stroke: var(--linea-forte); stroke-width: 1.5; stroke-dasharray: 3 4; }
.eq-curva-asse { stroke: var(--linea-forte); stroke-width: 1.5; }
.eq-curva-linea { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.eq-curva-coda { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 5; opacity: .75; }
.eq-curva-punto { fill: var(--navy); transform-box: fill-box; transform-origin: center; }
/* Il punto segna la copertura ottimale, cioè il verde del semaforo accanto
   (14 ago: prima stava sul minimo, che ora nell'elenco è giallo). */
.eq-curva-punto--ok { fill: var(--ok); }

/* Visual 4: la scheda personale (mini-card stile app; statico = stato finale:
   barra piena, punto e badge visibili. motion.js li arretra solo nei suoi
   contesti, col pattern data-eq-fine dei visual sorelle). */
.eq-mia-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.eq-mia-eti { font-size: .85rem; font-weight: 600; color: var(--muted); }
.eq-badge {
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ok);
  background: var(--salvia);
}
.eq-mia-valore {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: .4rem;
  margin-bottom: .55rem;
}
.eq-mia-valore b {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 1.9rem);
  font-weight: 800;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.eq-mia-valore span { font-size: .85rem; color: var(--muted); }
/* Guida min-media-max: tacca = media di reparto, punto = la persona.
   Posizioni con la proprieta' translate: non confligge con lo scale GSAP. */
.eq-posiz {
  position: relative;
  height: 12px;
  margin-top: 1rem;
  border-radius: 999px;
  background: var(--carta);
}
.eq-posiz-tacca {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  /* La tacca E' la media di reparto: --linea-forte su --carta sparirebbe
     (contrasto ~1,3:1), --muted la tiene leggibile senza rubare al punto. */
  background: var(--muted);
  translate: -50% 0;
}
.eq-posiz-punto {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 3px var(--card);
  translate: -50% -50%;
}
.eq-posiz-eti {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
  font-size: .75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.eq-mia-nota {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--linea);
  font-size: .85rem;
  color: var(--muted);
}

/* ---------- Domande (banda su fondo dal 12 ago; details nativi a filetti) ---------- */
.domande { background: var(--fondo); }
.domande-testa { max-width: 46rem; margin-inline: auto; text-align: center; }
.faq { max-width: 46rem; margin: 2.2rem auto 0; border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 1rem;
  padding-block: 1.15rem;
  font-weight: 700;
  font-size: 1.06rem;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 14px;
  height: 14px;
  justify-self: center;
  color: var(--navy);
  background:
    linear-gradient(currentColor 0 0) center / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 14px no-repeat;
  transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .risposta { padding: 0 0 1.3rem; max-width: 60ch; color: var(--muted); font-size: .98rem; }
.faq .risposta + .risposta { margin-top: -0.6rem; }
/* Apertura fluida: progressive enhancement (dove non supportato: istantanea). */
.faq details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* ---------- Approfondimenti (details riusabile, 12 ago) ---------- */
/* Il claim sta SEMPRE nel testo visibile della sezione; qui dentro va solo
   la dimostrazione. Nessuna animazione GSAP all'interno: motion.js esclude
   .approfondisci (filtro qv), quindi il contenuto è statico-completo e già
   allo stato finale, come il rendering senza JS. Al toggle motion.js fa un
   ScrollTrigger.refresh() per riallineare i trigger a valle. */
.approfondisci {
  margin-top: clamp(1.8rem, 3vw, 2.4rem);
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--ombra-sm);
}
.approfondisci > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
}
.approfondisci > summary::-webkit-details-marker { display: none; }
/* Stesso più-che-ruota della FAQ: un solo vocabolario di apertura. */
.approfondisci > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  justify-self: center;
  color: var(--navy);
  background:
    linear-gradient(currentColor 0 0) center / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 14px no-repeat;
  transition: transform .25s ease;
}
.approfondisci[open] > summary::after { transform: rotate(45deg); }
.approfondisci-eti { display: block; font-weight: 700; font-size: 1.02rem; }
.approfondisci-hint { display: block; font-weight: 500; font-size: .86rem; color: var(--muted); margin-top: .15rem; }
.approfondisci-corpo {
  padding: .5rem 1.25rem 1.6rem;
  border-top: 1px solid var(--linea);
}
.approfondisci-corpo > * + * { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.approfondisci::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.approfondisci[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
  .approfondisci > summary::after { transition: none; }
  .approfondisci::details-content { transition: none; }
}

/* ---------- La referenza sotto le stat (#prova) ---------- */
/* Il fatto verificabile in vista, non in footnote: nome, dimensioni, mesi
   veri. Mantiene .prova-nota, così motion.js non cambia. */
.referenza {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--navy);
  border-radius: var(--r-sm);
  background: var(--fondo);
  max-width: 62ch;
}
.referenza .sole { width: 30px; height: 30px; color: var(--navy); flex: none; }
.referenza p { color: var(--muted); font-size: .98rem; line-height: 1.6; }
.referenza b { color: var(--inchiostro); }

/* ---------- Contatto (banda navy, doppio pubblico) ---------- */
/* Stesso chiarore pre-alba dell'hero, col fuoco sul sole del ::before. */
.contatto {
  background:
    radial-gradient(100% 75% at 86% 106%, rgba(186, 222, 250, .12) 0%, rgba(186, 222, 250, 0) 60%),
    var(--navy);
  color: #fff;
  position: relative;
  overflow: clip;
}
.contatto::before {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 440px;
  height: 440px;
  background: rgba(255, 255, 255, .06);
  -webkit-mask: url('/assets/brand/sole-elio.png') center / contain no-repeat;
  mask: url('/assets/brand/sole-elio.png') center / contain no-repeat;
  pointer-events: none;
}
.contatto .wrap { position: relative; }
.contatto .eyebrow { color: var(--azzurro); }
.contatto .h2 { color: #fff; }
.contatto .lead { color: var(--chiarore); margin-top: 1.1rem; }
.contatto-testa { max-width: 640px; }
.contatto-mail { margin-top: 1.6rem; }
.email-visibile {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--azzurro);
  text-underline-offset: .14em;
  /* Target touch ~44px senza spostare la riga (pattern .brand). */
  display: inline-block;
  padding-block: .55rem;
  margin-block: -.55rem;
}
/* "Copia": fallback per i PC aziendali dove il mailto non apre nulla.
   Mostrato da main.js solo se la Clipboard API è disponibile. */
.btn-copia {
  position: relative; /* aggancio dell'area di tocco estesa (::after) */
  margin-left: .8rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  padding: .3rem .85rem;
  cursor: pointer;
  transition: background .2s ease;
}
/* La pillola resta piccola a disegno: è l'area di tocco a crescere (~44px). */
.btn-copia::after { content: ""; position: absolute; inset: -7px -4px; }
.btn-copia:hover { background: rgba(255, 255, 255, .24); }
.btn-copia.ok { background: #fff; color: var(--navy); border-color: transparent; }
.contatto-doppio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.6rem;
  align-items: start;
}
.contatto-card {
  background: var(--card);
  color: var(--inchiostro);
  border-radius: var(--r-lg);
  box-shadow: var(--ombra-lg);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.contatto-card .passi { margin-top: 1.2rem; }
.contatto-card .nota { margin-top: 1rem; }
.contatto-card-testo { color: var(--muted); margin-top: .8rem; }
.contatto-alt { margin-top: 1rem; }

.passi { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.passi li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
  align-items: start;
}
.passi li + li { margin-top: 1.3rem; }
.passi .n {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
  display: grid;
  place-items: center;
  font-size: .95rem;
  margin-top: .1rem;
}
.passi b { display: block; font-weight: 700; }
.passi p { color: var(--muted); font-size: .98rem; }

/* ---------- Modulo di contatto ---------- */
/* Vive dentro .contatto-card, che è bianca: stile chiaro normale, non le
   varianti su navy usate altrove nella banda. */
.modulo { margin-top: 1.6rem; }
.campo { display: grid; gap: .35rem; }
.campo + .campo { margin-top: .9rem; }
.campo label { font-weight: 700; font-size: .92rem; }
.campo-opt { font-weight: 400; color: var(--muted); }
.campo input,
.campo textarea {
  font: inherit;
  font-size: .98rem;
  color: var(--inchiostro);
  background: #fff;
  border: 1px solid var(--linea-forte);
  border-radius: var(--r-sm);
  padding: .7rem .85rem;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.campo textarea { resize: vertical; min-height: 5.5rem; }
.campo input::placeholder,
.campo textarea::placeholder { color: #93A0B5; }
.campo input:hover,
.campo textarea:hover { border-color: var(--navy); }
.campo input:focus-visible,
.campo textarea:focus-visible { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-soft); }
/* :user-invalid e non :invalid, perché il rosso deve comparire dopo che il
   campo è stato compilato male, non appena la pagina si apre. */
.campo input:user-invalid { border-color: var(--errore); }
.modulo .btn--grande { margin-top: 1.4rem; }
.modulo-esito { margin-top: .9rem; font-size: .94rem; font-weight: 600; }
.modulo-esito:empty { display: none; }
.modulo-esito.ok { color: #1F6B4A; }
.modulo-esito.ko { color: var(--errore); }
/* Trappola bot: fuori dallo schermo, non display:none (alcuni bot ignorano i
   campi non renderizzati, e questo invece deve sembrare compilabile). */
.esca {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--linea); padding-block: 3rem; text-align: center; }
.footer .sole { width: 30px; height: 30px; color: var(--navy); margin-inline: auto; }
.footer .wordmark { display: block; margin-top: .7rem; }
.footer .tagline { color: var(--muted); font-size: .9rem; margin-top: .3rem; }
.footer .footer-cta { margin-top: 1.2rem; }
.footer .link-fuori { margin-top: 1.2rem; }
.footer .footer-cta .link-fuori { margin-top: 0; }
.footer-legal { margin-top: 1.3rem; font-size: .88rem; color: var(--muted); max-width: 52ch; margin-inline: auto; }
/* Riga di firma dell'autore, arrivata qui dal blocco .firma di #fiducia il
   24 ago. Sopra la riga legale e in corpo leggermente maggiore: è copy, non
   legalese. Nessun .sole: il marchio sta già in testa al footer. */
.footer-firma { margin-top: 1.4rem; font-size: .9rem; color: var(--muted); }
.footer-firma b { color: var(--inchiostro); font-weight: 750; }
/* Unico link esterno rimasto in pagina. Stesso pattern tap-target del resto:
   padding + margine negativo, .65rem per arrivare ai 44px su corpo .9rem. */
.footer-linkedin {
  display: inline-block;
  color: var(--navy);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: .65rem;
  margin-block: -.65rem;
}
.footer-linkedin:hover { color: var(--inchiostro); }
.footer .copy { margin-top: .9rem; font-size: .85rem; color: var(--muted); }
/* Il link Privacy è minuto: target touch gonfiato senza muovere la riga. */
.footer .copy a { display: inline-block; padding-block: .55rem; margin-block: -.55rem; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-copy .lead { max-width: none; }
  /* Lastra piu' asciutta: padding giu', blur a 14 (il backdrop-filter su
     mobile costa; anello e fondo fanno comunque la veste) e NIENTE
     sconfinamento: a colonna unica il -2rem sforerebbe il wrap. */
  .hero-vetro {
    padding: 1.15rem 1.1rem;
    margin-right: 0;
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
  .slide { grid-template-columns: 1fr; gap: 1.6rem; }
  .slide:nth-child(even) .slide-visual { order: 0; }
  .vetrina { min-height: 0; }
  .porta { grid-template-columns: 1fr; }
  .porta-cta { justify-self: start; }
  /* I blocchi di confronto: a una colonna i filetti verticali che dividono
     diventano orizzontali, e le sfalsature verticali si azzerano (in colonna
     non separano più niente, aprirebbero solo un buco). */
  .pilastri-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pilastro { padding-left: 0; border-left: 0; }
  .benessere-grid { grid-template-columns: 1fr; }
  .calcolo-grid { grid-template-columns: 1fr; }
  /* Vetrina del calcolo in colonna: testo sopra, schermo sotto, anche nei
     momenti pari (l'alternanza e' un gesto da due colonne). */
  .cv-momento { grid-template-columns: 1fr; gap: 1.3rem; }
  .cv-momento:nth-child(even) .cv-schermo { order: 0; }
  .confronto { grid-template-columns: 1fr; }
  .conf-lato--mano { margin-top: 0; }
  .regole { grid-template-columns: 1fr; }
  .spinta { margin-top: 0; }
  .ipotesi { grid-template-columns: 1fr; gap: 2.2rem; }
  .ipotesi-col { padding-right: 0; }
  .ipotesi-col + .ipotesi-col {
    padding-left: 0;
    padding-top: 2.2rem;
    border-left: 0;
    border-top: 1px solid var(--linea);
  }
  .fiducia-grid { grid-template-columns: 1fr; }
  .eq-blocco { grid-template-columns: 1fr; gap: 1.6rem; }
  .eq-blocco:nth-child(even) .eq-visual { order: 0; }
  .contatto-doppio { grid-template-columns: 1fr; }
}
/* Nav a OTTO voci (dal 21 ago: +Il calcolo), breakpoint SOLO della nav:
   layout e motion restano sui 900. A taglia piena le otto voci vogliono
   ~1150px (tier compatto qui sotto); compattate ne chiedono ~970, quindi
   da 1000 in giu' le ancore passano nel menu a scomparsa (a 900 il
   compatto mancava di ~58px). mqMenu in main.js segue (1000). */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-menu { display: block; }
  .btn--nav { margin-left: auto; }
}
/* Nav compatta tra 1000 e 1150: le otto voci a taglia piena chiedono
   ~1150px; qui si stringono font e passo per starci fino al collasso
   (coi vecchi .7rem/.88rem delle sette voci l'ottava entrava esatta al
   pixel a 1006: margine zero). */
@media (max-width: 1150px) {
  .nav-links { gap: .6rem; }
  .nav-links a { font-size: .86rem; }
}
@media (max-width: 720px) {
  .numeri-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem 1.5rem; }
  .stat + .stat { border-left: none; }
  .stat { padding-inline: 0; }
  :root { --nav-h: 60px; }
  /* Griglia hero: prima decade del mese, celle leggibili. I figli sono in
     ordine di riga su 15 colonne: 15n+12..15n → giorni 11-14. */
  .griglia-vivo { grid-template-columns: minmax(52px, auto) repeat(10, minmax(0, 1fr)); }
  .griglia-vivo > :nth-child(15n+12),
  .griglia-vivo > :nth-child(15n+13),
  .griglia-vivo > :nth-child(15n+14),
  .griglia-vivo > :nth-child(15n) { display: none; }
  .gv-cella { height: 26px; }
  .gv-fatto { margin-left: 0; }
  /* Sul frame stretto il titolo centrale basta: il totale delle strade e'
     un dettaglio da desktop (e il racconto del calcolo vive in #processo). */
  .fb-conta { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .nav, .brand, .nav-links a, .nav-menu > summary,
  .pf-play, .pf-vai, .pf-vai-num, .pf-replay { transition: none; }
  .pf-play::after { animation: none; }
  .btn:hover { transform: none; }
  .faq details::details-content { transition: none; }
  .faq summary::after { transition: none; }
}