/* Landing Elio v3 (fork della v2 del 13 set 2026): beta noindex su /v3
   fino al 21 set 2026, poi promossa a home del sito, in radice.
   Questo file e' v2.css MENO i due blocchi che la v3 non usa piu': la hero
   «Alba» (lastra di vetro + quadro del mese, con le sue righe nelle media
   query) e il player del processo a GSAP (.pf-*, .gv-*, .js-player), con
   le loro righe in reduced-motion e print. Al loro posto: hero9.css (home)
   e player3.css (Elio AI), caricati DOPO questo file dalle sole pagine che
   li usano. Le regole scopate .p-home .nav2 (pillola scura in cima alla
   home) sono cadute il 16 set 2026: la hero parte sul NERO e la pillola
   chiara di default ci sta bene (erano nate per il contrasto sul navy).
   Dal 15 set 2026 manca anche il blocco «Elio in tre punti»: le tre schede
   stanno dentro la hero.
   Il resto e' la v2. */

/* Landing Elio v2 (beta noindex su /v2): design system PROPRIO, non importa
   styles.css. Direzione "luce, evoluta": fondi PIATTI dalla palette v1 (mai
   gradienti di sfondo; l'unico gradiente ammesso e' sul TESTO dell'H1 hero),
   Fraunces per i display, Inter per il resto, oro a micro-accenti (la parola
   «luce» dell'H1 e la pagina equita, erede della licenza di #benessere).

   CONTRATTO STATICO-COMPLETO (identico alla v1): in questo file NON esiste
   nessuna regola che nasconda contenuto (niente .x{opacity:0}). Ogni stato
   iniziale delle animazioni vive SOLO in v2.js, dentro i contesti
   gsap.matchMedia(), e senza JS / con ?ridotto / con prefers-reduced-motion
   la pagina e' completa e ferma.

   Scale chiuse (regola del file): font-size SOLO dagli step 12/14/16/18/20/
   24/30/36/48/60/72 (line-height accoppiate 16/20/24/28/28/32/36/40/1.1/
   1.05/1.05); spazi SOLO da 0/2/4/8/12/16/24/32/40/48/64/80/96 (i token
   --sp-*); raggi SOLO 8/12/16/24/full, con la regola annidata
   inner = outer - gap (se gap < 32 e risultato > 2). Il responsive scala per
   RIASSEGNAZIONE nelle media query in coda, mai con clamp() sul testo.
   Breakpoint allineati ai contesti motion: mobile max-width 900 inclusivo,
   desktop min-width 900.02; strette a 720. */

/* ---------- Font (copia letterale della v1: stessi file self-hosted) ---------- */
@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;
}
@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;
  /* Colori: sottoinsieme della palette v1 (stessi hex). */
  --navy: #2D5075;
  --navy-2: #1F3A57;
  --navy-soft: #E7EDF4;
  --fondo: #F6F9FC;
  --card: #FFFFFF;
  --cielo: #DFEBF7;
  --cielo-2: #EAF2F9;
  --inchiostro: #222B44;
  --muted: #5A6478;
  --linea: #DCE2EF;
  --linea-forte: #C3CFE2;
  --notte: #14243A;
  --chiarore: #DEE7F1;
  --azzurro: #BADEFA;
  --ok: #2E7D32;
  --errore: #C4443A;
  --oro-sole: #F2B95C;
  --oro-testo: #8A5F17;
  --oro-fondo: #FCF7EC;
  --oro-soft: #FBEED3;
  --carta: #EDF0F7;      /* cella «da decidere» del player (.pl3-vuota), hex v1 */
  --salvia: #E9F5E9;     /* vetrina verde tenue (mockup tour), hex v1 */
  --ombra-sm: 0 1px 2px rgba(31, 42, 82, .05), 0 8px 20px -6px rgba(31, 42, 82, .08);
  --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);
  /* Spazi: SOLO questi valori, ovunque. */
  --sp-2: 2px; --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-24: 24px; --sp-32: 32px; --sp-40: 40px; --sp-48: 48px;
  --sp-64: 64px; --sp-80: 80px; --sp-96: 96px;
  /* Raggi (annidati: inner = outer - gap, se gap < 32 e risultato > 2). */
  --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px; --r-full: 999px;
  --w-wide: 1120px;
  --w-testo: 62ch;
  /* Nav isola: altezza pillola + distacco dall'alto. Le leggono il primo
     blocco di ogni pagina e lo scroll-margin delle ancore. */
  --nav2-h: 64px;
  --nav2-off: 24px;
  --pad-sez: var(--sp-96);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --anello: var(--navy);
}

/* ---------- 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: 16px;
  line-height: 24px;
  color: var(--inchiostro);
  background: var(--fondo);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
a { color: var(--navy); }
:focus-visible { outline: 3px solid var(--anello); outline-offset: 2px; border-radius: var(--r-8); }
.contatto2 { --anello: var(--azzurro); }
.contatto2-card { --anello: var(--navy); }
::selection { background: var(--navy); color: #fff; }

.salta {
  position: fixed;
  top: var(--sp-12);
  left: var(--sp-12);
  z-index: 60;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-8);
  text-decoration: none;
  translate: 0 -300%;
}
.salta:focus-visible { translate: 0 0; }

.wrap { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--sp-24); }
.wrap--stretto { max-width: 736px; } /* 46rem: colonna di lettura */
[id] { scroll-margin-top: calc(var(--nav2-off) + var(--nav2-h) + var(--sp-16)); }

.sez2 { padding-block: var(--pad-sez); }
.sez2--corta { padding-block: var(--sp-64); }
.sez2--card { background: var(--card); }
.sez2--cielo { background: var(--cielo-2); }
/* Utility di margine: solo valori della scala spazi. */
.mt-12 { margin-top: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }
.mt-24 { margin-top: var(--sp-24); }
.mt-32 { margin-top: var(--sp-32); }
.mt-40 { margin-top: var(--sp-40); }
.mt-64 { margin-top: var(--sp-64); }

/* Tipografia condivisa */
.eyebrow2 {
  display: block;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--sp-12);
}
.h-display {                 /* H2 di sezione e H1 delle sottopagine */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h-pagina { font-size: 48px; line-height: 1.1; }   /* H1 delle sottopagine */
.h3-2 { font-size: 20px; line-height: 28px; font-weight: 700; }
.lead2 { font-size: 18px; line-height: 28px; color: var(--muted); text-wrap: pretty; }
.testo2 { max-width: var(--w-testo); text-wrap: pretty; }
.nota2 { font-size: 14px; line-height: 20px; color: var(--muted); }
.centro { text-align: center; }
.centro .testo2, .centro .lead2 { margin-inline: auto; }

/* H1 hero: gradiente SOLO sul testo (unica licenza-gradiente della v2),
   da inchiostro a muted, sinistra verso destra. La parola «luce» resta oro
   (micro-accento dichiarato, erede della licenza hero v1): lo span esce dal
   clip e si colora da solo. */
.h1-hero {
  font-family: var(--font-display);
  font-weight: 640;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
  background: linear-gradient(90deg, var(--inchiostro), var(--muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h1-hero .oro { background: none; color: var(--oro-testo); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-hero { background: none; color: var(--inchiostro); }
}

/* ---------- Bottoni e link ---------- */
.btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 44px;                       /* tap target: prevale sul padding */
  padding: var(--sp-8) var(--sp-24);
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background .3s cubic-bezier(0.32, 0.72, 0, 1),
              transform .3s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.btn2:hover { background: var(--navy-2); transform: translateY(-1px); box-shadow: var(--ombra-sm); }
.btn2:active { transform: scale(.98); }
.btn2--fantasma {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--linea-forte);
  padding: calc(var(--sp-8) - 1px) calc(var(--sp-24) - 1px);
}
.btn2--fantasma:hover { background: var(--navy-soft); box-shadow: none; }
.btn2-durata { font-weight: 500; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.btn2--nav { min-height: 40px; font-size: 14px; line-height: 20px; padding: var(--sp-8) var(--sp-16); }
.btn2--grande { width: 100%; }
.btn2--chiaro { background: #fff; color: var(--navy); }
.btn2--chiaro:hover { background: var(--chiarore); }
.link2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: var(--sp-8);
}
.link2 svg { flex: none; }
.link2:hover { color: var(--inchiostro); }

/* ---------- Marchio (stessa ricetta v1: mask + currentColor) ---------- */
.sole2 {
  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;
}
.wordmark2 { font-weight: 800; letter-spacing: .18em; font-size: 14px; line-height: 20px; color: var(--navy); }

/* ---------- Nav isola ----------
   Pillola flottante centrata. TRE scelte obbligate, non stilistiche:
   1) centratura con flex sul contenitore full-width, MAI translateX(-50%):
      un transform sull'antenato farebbe da containing block per il pannello
      fixed del menu, e transform+backdrop-filter dentro fixed e' la
      combinazione che su iOS rompe il vetro;
   2) il backdrop-filter sta sul ::before, MAI su .isola: per spec filtra
      e ISTITUISCE un containing block per i discendenti fixed, e il pannello
      del menu resterebbe intrappolato dentro la pillola. Per lo stesso
      motivo niente overflow/will-change/transform su .isola;
   3) z-index: pannello (1) sotto la pillola (2), entrambi nel contesto della
      .nav2 (z 40): a menu aperto la pillola resta visibile e cliccabile
      sopra il velo, col summary che mostra la X per chiudere. */
.nav2 {
  position: fixed;
  inset-inline: 0;
  top: var(--nav2-off);
  z-index: 40;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding-inline: var(--sp-16);
}
.isola {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  min-height: var(--nav2-h);
  max-width: 100%;
  padding-inline: var(--sp-24) var(--sp-12);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .55);
  transition: background .3s cubic-bezier(0.32, 0.72, 0, 1),
              border-color .3s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.isola::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
.nav2.scrolled .isola {
  background: rgba(255, 255, 255, .82);
  border-color: var(--linea);
  box-shadow: var(--ombra-sm);
}
.brand2 {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  text-decoration: none;
  color: var(--navy);
  padding-block: var(--sp-8);
  margin-block: calc(-1 * var(--sp-8));
}
.brand2 .sole2 { width: 22px; height: 22px; }
.nav2-links { display: flex; align-items: center; gap: var(--sp-4); }
.nav2-links a {
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-full);
  transition: background .3s cubic-bezier(0.32, 0.72, 0, 1), color .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.nav2-links a:hover { background: var(--navy-soft); }
.nav2-links a[aria-current="page"] { background: var(--navy-soft); color: var(--navy); }

/* Menu mobile: details nativo dentro la pillola (senza JS apre e chiude da
   solo). Hamburger che si TRASFORMA in X: due barrette, solo transform. */
.menu-v2 { display: none; }
.menu-v2 > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  cursor: pointer;
  /* Sopra il velo del pannello (z 1), che e' un discendente posizionato:
     senza questo, a menu aperto la X non sarebbe tappabile. */
  position: relative;
  z-index: 2;
}
.menu-v2 > summary::-webkit-details-marker { display: none; }
.hamb { position: relative; width: 20px; height: 14px; display: block; }
.hamb i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: var(--r-full);
  background: var(--inchiostro);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.hamb i:first-child { top: 2px; }
.hamb i:last-child { bottom: 2px; }
.menu-v2[open] .hamb i:first-child { transform: translateY(4px) rotate(45deg); }
.menu-v2[open] .hamb i:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Pannello: velo a tutto schermo sotto la pillola. Il blur qui puo' stare
   sull'elemento stesso: non ha discendenti posizionati fixed. */
.menu-v2-pannello {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: calc(var(--nav2-off) + var(--nav2-h) + var(--sp-24)) var(--sp-24) var(--sp-40);
  background: rgba(246, 249, 252, .82);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}
.menu-v2-pannello a {
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  padding: var(--sp-12) var(--sp-8);
  border-radius: var(--r-12);
}
.menu-v2-pannello a[aria-current="page"] { color: var(--navy); background: var(--navy-soft); }
/* Il bottone «Parliamone» nel pannello: rivince sulla regola delle voci
   (.menu-v2-pannello a, piu' specifica di .btn2) per colore, padding, raggio
   e interlinea; senza, la scritta restava inchiostro su navy (visto su
   Pixel il 4 set). */
.menu-v2-pannello .btn2 {
  margin-top: var(--sp-16);
  justify-self: start;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  padding: var(--sp-8) var(--sp-24);
  border-radius: var(--r-full);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .isola { background: rgba(255, 255, 255, .94); }
  .menu-v2-pannello { background: rgba(246, 249, 252, .98); }
}

/* ---------- Cornici prodotto ---------- */
.frame2 {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-16);
  box-shadow: var(--ombra-lg);
  overflow: hidden;
}
.frame2-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 32px;
  padding-inline: var(--sp-12);
  border-bottom: 1px solid var(--linea);
  background: var(--fondo);
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
}
.frame2-dots { display: inline-flex; gap: var(--sp-4); }
.frame2-dots i { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--linea-forte); }
.telefono2 {
  border: 1px solid var(--linea);
  border-radius: var(--r-24);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--ombra-sm);
}

/* ---------- Chip sigla (colori reali del prodotto, porto v1) ---------- */
.sigla {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: .5rem;
  border-radius: var(--r-8);
  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) */

/* ---------- Striscia numeri ---------- */
.striscia { background: var(--card); border-block: 1px solid var(--linea); }
.striscia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-32);
}
.stat2 { border-left: 2px solid var(--linea-forte); padding-left: var(--sp-16); }
.stat2 strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  color: var(--navy);
}
.stat2 span:not([data-count-to]) { display: block; margin-top: var(--sp-8); font-size: 14px; line-height: 20px; color: var(--muted); text-wrap: pretty; }
.stat2 strong [data-count-to] { font-size: inherit; line-height: inherit; color: inherit; }
.referenza2 {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  margin-top: var(--sp-48);
  max-width: 62ch;
}
.referenza2 .sole2 { width: 24px; height: 24px; color: var(--navy); margin-top: var(--sp-2); }
.referenza2 p { font-size: 14px; line-height: 20px; color: var(--muted); }
.referenza2 b { color: var(--inchiostro); }

/* ---------- Pilastri (griglia a 3 card: metodo ed equita; .card2 anche altrove) ---------- */
.pilastri2-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-24);
  margin-top: var(--sp-48);
}
.card2 {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-16);
  padding: var(--sp-32) var(--sp-24);
}
.card2 .ico2 { margin-bottom: var(--sp-16); }
.card2 .h3-2 { margin-bottom: var(--sp-8); }
.card2 p { color: var(--muted); font-size: 16px; line-height: 24px; text-wrap: pretty; }
.card2-eti {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--sp-8);
}
.ico2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--navy-soft);
  color: var(--navy);
}

/* ---------- Tagline reveal (la scelta di campo) ----------
   Il testo e' a COLORE PIENO qui: l'attenuazione iniziale delle parole la
   imposta solo v2.js (SplitText + scrub). */
.tagline2 { background: var(--cielo-2); }
.tagline2-frase {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 60px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--inchiostro);
  text-wrap: balance;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}
.tagline2 .nota2 { text-align: center; margin-top: var(--sp-24); }

/* ---------- La reazione a catena (home, iterazione 7) ----------
   Equita' ⇒ operativita' resa visibile: a sinistra quattro passi su una
   linea che si riempie allo scroll (scrub su --catena-fill, seconda e ultima
   scrub della pagina dopo la tagline), a destra la card «il conto» (sticky
   CSS, mai pin) le cui voci passano da pesanti a leggere quando il passo che
   le alleggerisce si accende. STATICO = STATO FINALE: linea piena
   (--catena-fill: 1), numeri accesi, voci calme. Gli stati «prima» esistono
   SOLO sotto .js-catena, che v2.js aggiunge al mount e toglie al cleanup
   (idioma .js-player3/.js-tour). Niente --oro-*: navy e fondo, piu' la coppia
   dell'avviso del vecchio player v2 per la voce pesante. Nessun cambio di peso del
   font fra pesante e leggero: dentro la card sticky farebbe reflow. */
.catena2 { background: var(--fondo); }
.catena2-testa { max-width: 736px; margin-inline: auto; }
.catena2-testa .lead2 { margin-top: var(--sp-16); }
.catena2-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sp-48);
  align-items: start;
  margin-top: var(--sp-48);
}
/* Nel DOM il conto precede la catena; su desktop l'ordine visivo e' invertito. */
.catena2-conto { order: 2; }
.catena2-passi {
  --catena-fill: 1;
  order: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: grid;
  gap: var(--sp-40);
}
.catena2-passi::before,
.catena2-passi::after {
  content: '';
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 2px;
}
.catena2-passi::before { background: var(--linea-forte); }
.catena2-passi::after {
  background: var(--navy);
  transform-origin: top;
  transform: scaleY(var(--catena-fill));
}
.catena2-passo {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--sp-16);
  align-items: start;
}
.catena2-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  transition: background .7s cubic-bezier(0.32, 0.72, 0, 1), color .7s cubic-bezier(0.32, 0.72, 0, 1), border-color .7s cubic-bezier(0.32, 0.72, 0, 1);
}
.catena2-passo .h3-2 { transition: color .7s cubic-bezier(0.32, 0.72, 0, 1); }
.catena2-passo p { color: var(--muted); margin-top: var(--sp-4); text-wrap: pretty; }
.catena2-conto {
  position: sticky;
  top: calc(var(--nav2-h) + var(--nav2-off) + var(--sp-16));
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-16);
  padding: var(--sp-32) var(--sp-24);
}
.catena2-voci {
  list-style: none;
  padding: 0;
  margin: var(--sp-16) 0 0;
  display: grid;
  gap: var(--sp-12);
}
.catena2-voce {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-12);
  align-items: center;
  padding: var(--sp-8) var(--sp-12);
  border-left: 2px solid var(--linea);
  border-radius: var(--r-8);
  color: var(--muted);
  font-size: 16px;
  line-height: 24px;
  text-wrap: pretty;
  transition: color .7s cubic-bezier(0.32, 0.72, 0, 1), border-color .7s cubic-bezier(0.32, 0.72, 0, 1), background .7s cubic-bezier(0.32, 0.72, 0, 1);
}
.catena2-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--navy-soft);
  color: var(--navy);
  transition: background .7s cubic-bezier(0.32, 0.72, 0, 1), color .7s cubic-bezier(0.32, 0.72, 0, 1);
}
.catena2-piede { margin-top: var(--sp-16); }
/* Stati «prima», solo con JS: numeri spenti e voci pesanti. */
.js-catena .catena2-passo:not(.is-acceso) .catena2-num { background: var(--card); color: var(--muted); border-color: var(--linea-forte); }
.js-catena .catena2-passo:not(.is-acceso) .h3-2 { color: var(--muted); }
.js-catena .catena2-voce:not(.is-leggera) { color: var(--inchiostro); border-left-color: var(--errore); background: #FDF3F2; }
.js-catena .catena2-voce:not(.is-leggera) .catena2-ico { background: #FADFDA; color: #8C3A2E; }

/* ---------- Hub «Da vicino»: card-vetrina grandi con immagini ----------
   5 card dall'8 set: 4 in griglia 2x2 + la quinta («Per chi lavora») larga
   quanto la riga, 1 colonna ≤900. Fondi pieni (3 scure + 1 calda: la card oro
   che punta a /v2/equita e' un'ESTENSIONE DICHIARATA della licenza oro,
   annotata nel README; la quinta e' chiara, --cielo, per la voce «tu»),
   eyebrow, titolo Fraunces, CTA a pillola (uno SPAN:
   dentro un link-card non si annidano altri interattivi), zona visual con
   screenshot che sbordano dal bordo (overflow hidden della card). Testo
   secondario su scuro = --chiarore, MAI --muted (contrasto). */
.hub2 { background: var(--fondo); }
.vetrine2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-24);
  margin-top: var(--sp-48);
}
.vetrina2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-12);
  min-height: 440px;
  border-radius: var(--r-24);
  overflow: hidden;
  padding: var(--sp-32);
  text-decoration: none;
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow .3s cubic-bezier(0.32, 0.72, 0, 1);
}
.vetrina2:hover { transform: translateY(-2px); box-shadow: var(--ombra-lg); }
.vetrina2:active { transform: scale(.99); }
.vetrina2--navy { background: var(--navy); }
.vetrina2--navy2 { background: var(--navy-2); }
.vetrina2--notte { background: var(--notte); }
.vetrina2--oro { background: var(--oro-fondo); border: 1px solid var(--oro-soft); }
/* Quinta card (8 set): chiara come la oro, con le stesse deroghe di colore, e
   larga quanto la riga: testo a sinistra (il padding-right lascia il posto
   alla zona visual, che qui e' la meta' destra a tutta altezza); sotto i 900
   torna standard (blocco ≤900 in coda al file). */
.vetrina2--cielo { background: var(--cielo); border: 1px solid var(--linea-forte); }
.vetrina2--larga { grid-column: 1 / -1; min-height: 360px; padding-right: 46%; }
/* Il testo sopra la zona visual (che e' assoluta): tutto cio' che non e'
   .vetrina2-visual sale a z 1. */
.vetrina2 > :not(.vetrina2-visual) { position: relative; z-index: 1; }
.vetrina2-eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--azzurro);
}
.vetrina2--oro .vetrina2-eyebrow { color: var(--oro-testo); }
.vetrina2--cielo .vetrina2-eyebrow { color: var(--navy); }
.vetrina2-titolo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.01em;
  color: #fff;
  text-wrap: balance;
}
.vetrina2--oro .vetrina2-titolo, .vetrina2--cielo .vetrina2-titolo { color: var(--inchiostro); }
.vetrina2-desc { color: var(--chiarore); font-size: 16px; line-height: 24px; max-width: 44ch; text-wrap: pretty; }
.vetrina2--oro .vetrina2-desc, .vetrina2--cielo .vetrina2-desc { color: var(--muted); }
.vetrina2--larga .vetrina2-desc { max-width: 52ch; }
.vetrina2-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 40px;
  padding: var(--sp-4) var(--sp-16);
  background: #fff;
  color: var(--navy);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  border-radius: var(--r-full);
  margin-top: var(--sp-8);
}
.vetrina2--oro .vetrina2-cta, .vetrina2--cielo .vetrina2-cta { background: var(--navy); color: #fff; }
.vetrina2-cta svg { flex: none; transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1); }
.vetrina2:hover .vetrina2-cta svg { transform: translateX(4px); }
/* Badge della card Elio AI: dall'8 set uno solo, «Guarda nascere un turno»
   col glifo play (richiamo voluto dell'H2 di /v2/metodo, annotato nel
   README); testo, nessun file logo. */
.vetrina2-badges { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.vetrina2-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-12);
}
.vetrina2-badge svg { flex: none; color: var(--azzurro); }
/* Zona visual: assoluta in basso, gli screenshot sbordano e la card taglia. */
.vetrina2-visual {
  position: absolute;
  inset: auto 0 0 0;
  height: 230px;
  pointer-events: none;
  z-index: 0;
}
.vetrina2-shot {
  position: absolute;
  border-radius: var(--r-12);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--ombra-lg);
}
.vetrina2-shot--calc { right: -8%; bottom: -34%; width: 72%; transform: rotate(-3deg); }
.vetrina2-shot--dash { left: 6%; bottom: -30%; width: 66%; }
.vetrina2-tel {
  position: absolute;
  right: 5%;
  bottom: -52%;
  width: 32%;
  transform: rotate(4deg);
  box-shadow: var(--ombra-lg);
}
.vetrina2-visual .eq2-pannello {
  position: absolute;
  left: var(--sp-32);
  right: var(--sp-32);
  bottom: -46%;
  box-shadow: var(--ombra-lg);
}
/* Nel link-card il pannello e' fatto di span (niente div dentro <a> per
   prudenza col nesting): i wrapper anonimi tornano block. */
.vetrina2-visual .eq2-pannello > span { display: block; min-width: 0; }
/* Card larga: la zona visual e' la meta' destra a tutta altezza; il pannello
   dei conti sta a sinistra, il telefono con la scheda sborda in basso a
   destra. Percentuali relative alla zona (44% della card). */
.vetrina2--larga .vetrina2-visual { inset: 0 0 0 auto; width: 44%; height: auto; }
.vetrina2--larga .vetrina2-tel { right: 8%; bottom: -26%; width: 44%; transform: rotate(3deg); }
.vetrina2--larga .vetrina2-conti { position: absolute; left: 2%; bottom: 14%; width: 48%; transform: rotate(-3deg); box-shadow: var(--ombra-lg); }
/* Motivo CSS della card strutture: il sigillo «0» + i chip delle regole. */
.vetrina2-zero { display: flex; align-items: baseline; gap: var(--sp-16); margin-top: auto; }
.vetrina2-zero b { font-family: var(--font-display); font-weight: 600; font-size: 72px; line-height: 1.05; color: #fff; }
.vetrina2-zero span { color: var(--chiarore); font-size: 14px; line-height: 20px; max-width: 26ch; }
.vetrina2-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.vetrina2-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--chiarore);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-12);
  white-space: nowrap;
}
.vetrina2-chip svg { color: var(--azzurro); flex: none; }

/* ---------- Pannelli equita (card-vetrina dell'hub e pagina) ---------- */
.eq2-pannello {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-16);
  box-shadow: var(--ombra-lg);
  padding: var(--sp-24);
  display: grid;
  gap: var(--sp-12);
}
.eq2-testa { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.eq2-metrica-testa { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; line-height: 20px; color: var(--muted); }
.eq2-metrica-testa b { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--inchiostro); }
.eq2-track { display: block; height: 8px; border-radius: var(--r-full); background: var(--navy-soft); overflow: hidden; margin-top: var(--sp-4); }
.eq2-fill { display: block; height: 100%; border-radius: inherit; background: var(--navy); }
.eq2-badge {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  color: var(--ok);
  background: #E9F5E9;
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-8);
}
.eq2-mia-riga { display: flex; justify-content: space-between; align-items: center; }
.eq2-mia-valore { display: flex; align-items: baseline; gap: var(--sp-8); }
.eq2-mia-valore b { font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 40px; }
.eq2-mia-valore span { font-size: 14px; line-height: 20px; color: var(--muted); }
.eq2-posiz { position: relative; height: 12px; }
.eq2-posiz-tacca { position: absolute; top: 0; width: 2px; height: 12px; background: var(--linea-forte); }
.eq2-posiz-punto { position: absolute; top: 2px; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--navy); }
.eq2-posiz-eti { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--muted); }
.eq2-nota { font-size: 14px; line-height: 20px; color: var(--muted); }
.eq2-caption { margin-top: var(--sp-12); font-size: 12px; line-height: 16px; color: var(--muted); }
/* Curva del punteggio di copertura (porto v1: SVG autoriale, testi in px
   perche' vivono nel viewBox 340x212, fuori dalla ladder per costruzione). */
.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; }
.eq-curva-punto--ok { fill: var(--ok); }
/* ---------- FAQ ---------- */
.faq2 { background: var(--fondo); }
.faq2-lista { max-width: 736px; margin: var(--sp-48) auto 0; display: grid; gap: var(--sp-12); }
.faq2-lista details {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-12);
}
.faq2-lista summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-24);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--r-12);
}
.faq2-lista summary::-webkit-details-marker { display: none; }
.faq2-lista summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
  margin-top: -4px;
}
.faq2-lista details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq2-lista .risposta { padding: 0 var(--sp-24) var(--sp-24); color: var(--muted); text-wrap: pretty; }

/* ---------- Contatto (banda navy piatta) ---------- */
.contatto2 { background: var(--navy); color: #fff; }
.contatto2 .eyebrow2 { color: var(--azzurro); }
.contatto2 .h-display { color: #fff; }
.contatto2 .lead2 { color: var(--chiarore); }
.contatto2-mail { margin-top: var(--sp-24); display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.email-visibile2 { color: #fff; font-size: 20px; line-height: 28px; font-weight: 700; text-underline-offset: 4px; }
.btn-copia2 {
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-12);
  cursor: pointer;
}
.btn-copia2.ok { background: rgba(255, 255, 255, .3); }
.contatto2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-48);
  margin-top: var(--sp-48);
  align-items: start;
}
.contatto2-card {
  background: var(--card);
  color: var(--inchiostro);
  border-radius: var(--r-16);
  padding: var(--sp-32);
}
.passi-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-16); }
.passi-mini li { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-12); }
.passi-mini .n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--navy-soft);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
}
.passi-mini b { display: block; }
.passi-mini p { color: var(--muted); font-size: 14px; line-height: 20px; }
.contatto2 .nota2 { color: var(--chiarore); }
.contatto2-card .nota2 { color: var(--muted); }
/* I tre passi vivono direttamente sulla banda navy: colori invertiti. */
.contatto2 .passi-mini .n { background: rgba(255, 255, 255, .14); color: #fff; }
.contatto2 .passi-mini b { color: #fff; }
.contatto2 .passi-mini p { color: var(--chiarore); }
.contatto2-card .passi-mini .n { background: var(--navy-soft); color: var(--navy); }

/* Modulo (stessi nomi classe della v1: .campo/.esca/.modulo-esito, cosi' il
   JS ricopiato resta quasi identico). */
.modulo { display: grid; gap: var(--sp-16); margin-top: var(--sp-24); }
.campo { display: grid; gap: var(--sp-4); margin: 0; }
.campo label { font-size: 14px; line-height: 20px; font-weight: 600; }
.campo-opt { color: var(--muted); font-weight: 400; }
.campo input, .campo textarea {
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--inchiostro);
  background: var(--card);
  border: 1px solid var(--linea-forte);
  border-radius: var(--r-8);
  padding: var(--sp-8) var(--sp-12);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--muted); opacity: .8; }
.campo textarea { resize: vertical; min-height: 80px; }
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; }
.modulo-esito { min-height: 24px; font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.modulo-esito.ok { color: var(--ok); }
.modulo-esito.ko { color: var(--errore); }

/* ---------- Footer ---------- */
.footer2 { background: var(--card); border-top: 1px solid var(--linea); padding-block: var(--sp-64); text-align: center; }
.footer2 .sole2 { width: 32px; height: 32px; color: var(--navy); margin-inline: auto; }
.footer2 .wordmark2 { display: block; margin-top: var(--sp-8); }
.footer2 .tagline { color: var(--muted); font-size: 14px; line-height: 20px; margin-top: var(--sp-4); }
.footer2-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-24); }
.footer2-nav a {
  color: var(--inchiostro);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-full);
}
.footer2-nav a:hover { background: var(--navy-soft); }
.footer2-legal { margin-top: var(--sp-24); font-size: 14px; line-height: 20px; color: var(--muted); max-width: 52ch; margin-inline: auto; }
.footer2-firma { margin-top: var(--sp-16); font-size: 14px; line-height: 20px; color: var(--muted); }
.footer2-firma b { color: var(--inchiostro); }
.footer2-firma a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; padding-block: var(--sp-8); }
.footer2 .copy { margin-top: var(--sp-8); font-size: 12px; line-height: 16px; color: var(--muted); }

/* ---------- Sottopagine: testata + blocchi ---------- */
.testata2 {
  background: var(--fondo);
  padding-top: calc(var(--nav2-off) + var(--nav2-h) + var(--sp-48));
  padding-bottom: var(--sp-64);
}
.testata2 .lead2 { max-width: 680px; margin-top: var(--sp-16); }

/* Blocco alternato testo + schermata (pagine metodo/app) */
.blocco2 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-64); align-items: center; }
.blocco2 + .blocco2 { margin-top: var(--sp-80); }
.blocco2--inverso { grid-template-columns: 7fr 5fr; }
.blocco2--inverso .blocco2-testo { order: 2; }
.blocco2-eti { display: block; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--sp-8); }
.blocco2-testo .h3-2 { font-size: 24px; line-height: 32px; margin-bottom: var(--sp-12); }
.blocco2-testo p { color: var(--muted); text-wrap: pretty; }
.blocco2-testo p + p { margin-top: var(--sp-12); }

/* Lista passaggi numerati (pagina metodo) */
.passaggi2 { list-style: none; padding: 0; margin-top: var(--sp-48); display: grid; gap: var(--sp-24); max-width: 736px; }
.passaggi2 li { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-16); align-items: start; }
.passaggi2 .n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 30px;
  line-height: 36px;
  color: var(--navy);
  border-top: 2px solid var(--linea-forte);
  padding-top: var(--sp-8);
}
.passaggi2 h3 { font-size: 18px; line-height: 28px; font-weight: 700; margin-bottom: var(--sp-4); }
.passaggi2 p { color: var(--muted); text-wrap: pretty; }

/* Wow del motore */
.wow2 { display: flex; align-items: baseline; gap: var(--sp-16); margin-top: var(--sp-24); }
.wow2 b { font-family: var(--font-display); font-weight: 600; font-size: 60px; line-height: 1.05; color: var(--navy); white-space: nowrap; }
.wow2 sup { font-size: 24px; }
.wow2 span { color: var(--muted); font-size: 14px; line-height: 20px; max-width: 44ch; }

/* Tour delle schermate del telefono (pagina app; porto del tour v1 di #app,
   terzo giro del 4 set: la griglia a 7 telefoni impilava sette schermate
   sul telefono). Statico COMPLETO senza JS: sette voci impilate, ognuna
   titolo + testo + telefono in vetrina, a colonne alternate. La classe
   .js-tour (aggiunta SOLO da v2.js, per ultima) attiva la tablist: elenco
   voci a sinistra, una scena sola a destra; sotto i 900 la rail diventa una
   striscia orizzontale scorrevole sopra la scena. La tablist nasce hidden
   nel markup: senza JS non esiste. Nessuno stato nascosto: la dissolvenza al
   cambio voce e' un'animazione di 0,22 s da opacity 0, solo in modalita'
   interattiva. */
.tour2-corpo { margin-top: var(--sp-48); }
.tour2-rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.tour2-tab {
  font: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-left: 3px solid var(--linea);
  border-radius: 0 var(--r-8) var(--r-8) 0;
  padding: var(--sp-12) var(--sp-16);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tour2-tab:hover { color: var(--navy); background: var(--fondo); }
.tour2-tab.is-attivo { color: var(--navy); background: var(--navy-soft); border-left-color: var(--navy); }
.tour2-scene { display: grid; gap: var(--sp-64); }
.tour2-item { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); align-items: center; }
.tour2-item:nth-child(even) .tour2-visual { order: -1; }
.tour2-testo p { color: var(--muted); margin-top: var(--sp-8); max-width: 52ch; text-wrap: pretty; }
.tour2-vetrina { position: relative; }
.tour2-vetrina .telefono2 { width: min(280px, 64%); }
/* Modalita' interattiva. */
.js-tour .tour2-corpo { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--sp-48); align-items: center; }
.js-tour .tour2-scene { gap: 0; }
.js-tour .tour2-item { display: none; }
.js-tour .tour2-item.is-attiva { display: grid; grid-template-columns: 1fr; gap: var(--sp-16); justify-items: center; }
.js-tour .tour2-item .tour2-visual { order: -1; width: 100%; max-width: 720px; }
.js-tour .tour2-testo { text-align: center; max-width: 56ch; }
.js-tour .tour2-testo p { margin-inline: auto; }
.js-tour .tour2-vetrina { min-height: 0; padding: var(--sp-24); }
@media (prefers-reduced-motion: no-preference) {
  .js-tour .tour2-item.is-attiva { animation: tour2-dissolvenza .22s ease; }
}
@keyframes tour2-dissolvenza { from { opacity: 0; } }
/* 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 .tour2-tab { transition: background .2s ease, color .2s ease, border-color .2s ease, translate .18s ease; }
  .js-tour .tour2-tab:hover { translate: 2px 0; }
}

/* Muro e spinta (pagina strutture): il muro e' navy PIATTO (niente gradiente). */
.regole2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); margin-top: var(--sp-48); align-items: start; }
.muro2 { background: var(--navy-2); color: #fff; border-radius: var(--r-16); padding: var(--sp-32); }
.muro2 h3 { font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--sp-16); }
.muro2 ul { list-style: none; padding: 0; display: grid; gap: var(--sp-12); }
.muro2 li { display: flex; gap: var(--sp-8); align-items: baseline; color: var(--chiarore); }
.muro2 li svg { flex: none; color: var(--azzurro); translate: 0 2px; }
.muro2-sigillo { display: flex; gap: var(--sp-16); align-items: flex-start; margin-top: var(--sp-24); border-top: 1px solid rgba(255, 255, 255, .25); padding-top: var(--sp-16); }
.muro2-sigillo b { font-family: var(--font-display); font-weight: 600; font-size: 60px; line-height: 1.05; }
.muro2-sigillo span { color: var(--chiarore); font-size: 14px; line-height: 20px; }
.spinta2 { border: 1px solid var(--linea); border-radius: var(--r-16); background: var(--card); padding: var(--sp-32); }
.spinta2 h3 { font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); margin-bottom: var(--sp-16); }
.spinta2 ul { list-style: none; padding: 0; display: grid; gap: var(--sp-12); }
.spinta2 li { display: flex; gap: var(--sp-8); align-items: baseline; color: var(--muted); }
.spinta2 li svg { flex: none; color: var(--navy); translate: 0 2px; }
.spinta2 p { margin-top: var(--sp-16); color: var(--muted); font-size: 14px; line-height: 20px; }

/* Dolori (pagina strutture) */
.dolori2 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); margin-top: var(--sp-40); }
.dolori2 li { display: grid; gap: var(--sp-12); }
.dolori2 span:last-child { color: var(--muted); font-size: 14px; line-height: 20px; text-wrap: pretty; }
.dolori2 b { color: var(--inchiostro); }

/* Colonne pari (continuita'/controllo, pagina strutture) */
.colonne2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-48); margin-top: var(--sp-40); }
.colonne2 article { border-left: 2px solid var(--linea-forte); padding-left: var(--sp-24); }
.colonne2 .card2-eti { margin-bottom: var(--sp-8); }
.colonne2 h3 { font-size: 20px; line-height: 28px; font-weight: 700; margin-bottom: var(--sp-12); }
.colonne2 ul { list-style: none; padding: 0; display: grid; gap: var(--sp-8); color: var(--muted); }
.colonne2 li { padding-left: var(--sp-16); position: relative; }
.colonne2 li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--navy); }
.colonne2 .chiusa { margin-top: var(--sp-12); color: var(--muted); font-size: 14px; line-height: 20px; }

/* Fascicolo dati (pagina strutture) */
.fascicolo2 { max-width: 736px; margin-top: var(--sp-40); display: grid; gap: var(--sp-12); }
.fascicolo2 li { display: flex; gap: var(--sp-12); align-items: baseline; color: var(--muted); }
.fascicolo2 li svg { flex: none; color: var(--ok); translate: 0 2px; }
.fascicolo2 b { color: var(--inchiostro); }
.fascicolo2-chiusa { margin-top: var(--sp-24); max-width: 736px; color: var(--muted); font-size: 14px; line-height: 20px; }
ul.fascicolo2 { list-style: none; padding: 0; }

/* ---------- Approfondimenti (details con eti + hint, pattern v1) ----------
   Statico-completo come le FAQ: il contenuto dentro il pannello non si anima
   MAI (qv() lo esclude; niente data-rivela* sui nodi interni). Il details in
   se' puo' portare data-rivela-op. */
.approfondisci2 {
  background: var(--card);
  border: 1px solid var(--linea);
  border-radius: var(--r-12);
  max-width: 736px;
  margin: var(--sp-32) auto 0;
}
.approfondisci2 > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-24);
  cursor: pointer;
  border-radius: var(--r-12);
}
.approfondisci2 > summary::-webkit-details-marker { display: none; }
.approfondisci2 > summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .3s cubic-bezier(0.32, 0.72, 0, 1);
  margin-top: -4px;
}
.approfondisci2[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.approfondisci2-eti { display: block; font-size: 16px; line-height: 24px; font-weight: 700; }
.approfondisci2-hint { display: block; font-size: 14px; line-height: 20px; color: var(--muted); font-weight: 400; margin-top: var(--sp-2); }
.approfondisci2--largo { max-width: none; }
.approfondisci2-corpo { padding: 0 var(--sp-24) var(--sp-24); }
.approfondisci2-corpo > * + * { margin-top: var(--sp-16); }
.approfondisci2-corpo p { color: var(--muted); text-wrap: pretty; }
.approfondisci2-corpo h3 { font-size: 18px; line-height: 28px; font-weight: 700; color: var(--inchiostro); }

/* ---------- Lista a punti (porto v1) ---------- */
.lista-punti2 { list-style: none; padding: 0; display: grid; gap: var(--sp-8); }
.lista-punti2 li { position: relative; padding-left: var(--sp-16); color: var(--muted); text-wrap: pretty; }
.lista-punti2 li::before { content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--navy); }
.lista-punti2 b { color: var(--inchiostro); }
/* Variante semaforo (blocco copertura di /v2/equita): le emoji v1 fanno da
   bullet, il puntino navy si spegne. */
.lista-punti2--semaforo li { padding-left: 0; }
.lista-punti2--semaforo li::before { content: none; }

/* ---------- Vetrine dei benefici (porto v1: mockup CSS, aria-hidden) ---------- */
.vetrina {
  border-radius: var(--r-24);
  overflow: hidden;
  display: grid;
  align-items: center;
  align-content: center;
  justify-items: center;
  gap: var(--sp-24);
  padding: var(--sp-32) var(--sp-24);
  min-height: 340px;
}
.vetrina--alba { background: var(--cielo); }
.vetrina--cielo { background: var(--cielo-2); }
.vetrina--salvia { background: var(--salvia); }
.motivo-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  background: var(--card);
  color: var(--inchiostro);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--r-full);
  box-shadow: var(--ombra);
  rotate: -2deg;
}
.motivo-toast svg { color: var(--navy); flex: none; }
.motivo-pesi { display: inline-flex; align-items: baseline; gap: var(--sp-12); }
.motivo-pesi b, .motivo-pesi i {
  font-style: normal;
  background: var(--card);
  border-radius: var(--r-full);
  box-shadow: var(--ombra-sm);
  color: var(--inchiostro);
}
.motivo-pesi b { font-weight: 800; font-size: 20px; line-height: 28px; padding: var(--sp-8) var(--sp-24); }
.motivo-pesi i { font-weight: 600; font-size: 14px; line-height: 20px; padding: var(--sp-4) var(--sp-16); color: var(--muted); }
.mv-scheda {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  background: var(--card);
  border-radius: var(--r-16);
  box-shadow: var(--ombra);
  padding: var(--sp-16) var(--sp-24);
}
.mv-scheda .sigla { min-width: 3rem; height: 3rem; font-size: 16px; border-radius: var(--r-12); box-shadow: var(--ombra-sm); }
.mv-scheda-testo { display: flex; flex-direction: column; gap: var(--sp-2); }
.mv-scheda-testo b { font-weight: 700; font-size: 16px; line-height: 24px; }
.mv-scheda-testo i { font-style: normal; font-size: 14px; line-height: 20px; color: var(--muted); }
.mv-scambio { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.mv-riga {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  background: var(--card);
  border-radius: var(--r-full);
  box-shadow: var(--ombra-sm);
  padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);
}
.mv-nome { font-weight: 700; font-size: 16px; line-height: 24px; }
.mv-giorno { font-size: 14px; line-height: 20px; color: var(--muted); }
.mv-frecce { display: flex; flex-direction: row; gap: var(--sp-8); color: var(--navy); }
.mv-frecce svg { width: 22px; height: 22px; display: block; }
.mv-conti {
  display: block;
  width: min(280px, 92%);
  background: var(--card);
  border-radius: var(--r-16);
  box-shadow: var(--ombra);
  padding: var(--sp-16) var(--sp-24) var(--sp-24);
}
.mv-conti-testa {
  display: block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--sp-12);
}
.mv-conto { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2) var(--sp-12); align-items: baseline; }
.mv-conto + .mv-conto { margin-top: var(--sp-12); }
.mv-conto > span:first-child { font-size: 14px; line-height: 20px; 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: var(--r-full); background: var(--navy-soft); overflow: hidden; }
.mv-track i { display: block; height: 100%; border-radius: var(--r-full); background: var(--navy); }

/* Icona dentro un bottone (WhatsApp nella coda di /v2/reparto e nella card
   contatto della home). L'ex aside «Porta Elio nel tuo reparto» di /v2/app
   e' diventato la coda di /v2/reparto (8 set): il suo CSS e' stato tolto. */
.btn2 svg { flex: none; }

/* ---------- Chip di stato (es. «pronta, si attiva su richiesta») ---------- */
.tag2 {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--navy-soft);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-12);
  margin-bottom: var(--sp-8);
}

/* Badge push sul primo telefono del tour («I turni del mese sono pronti»),
   assoluto nella .tour2-vetrina. */
.tel-badge {
  position: absolute;
  top: var(--sp-12);
  right: var(--sp-8);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  border-radius: var(--r-full);
  padding: var(--sp-4) var(--sp-12);
  box-shadow: var(--ombra-sm);
  rotate: 2deg;
}
.tel-badge svg { flex: none; }

/* Card «Per chi lavora» nel contatto (sotto i passi, colonna sinistra). */
.contatto2-card--dip { margin-top: var(--sp-24); }
.contatto2-card--dip .btn2 { margin-top: var(--sp-16); }
.contatto2-card--dip .link2 { margin-left: var(--sp-8); }
.contatto2-card--dip p { color: var(--muted); text-wrap: pretty; }

/* Licenza oro: SOLO pagina equita (erede di #benessere). */
.p-equita .oroband { background: var(--oro-fondo); }
.oroband .eyebrow2 { color: var(--oro-testo); }
.oroband .ico2 { background: var(--oro-soft); color: var(--oro-testo); }

/* CTA di chiusura delle sottopagine */
.coda2 { background: var(--cielo-2); text-align: center; }
.coda2 .h-display { max-width: 680px; margin-inline: auto; }
.coda2 p { max-width: 62ch; margin: var(--sp-16) auto 0; color: var(--muted); }
.coda2 .btn2 { margin-top: var(--sp-32); }
/* Coda con due azioni affiancate (pagina «Per chi lavora»: WhatsApp + email) */
.coda2-azioni { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-16); margin-top: var(--sp-32); }
.coda2-azioni .btn2 { margin-top: 0; }

/* ---------- Media query (in coda, per riassegnazione) ---------- */
@media (max-width: 1150px) {
  .striscia-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --pad-sez: var(--sp-64); --nav2-h: 56px; }
  .h1-hero { font-size: 48px; }
  .h-display { font-size: 30px; line-height: 36px; }
  .h-pagina { font-size: 36px; line-height: 40px; }
  .tagline2-frase { font-size: 36px; line-height: 40px; }
  .stat2 strong { font-size: 36px; line-height: 40px; }
  .nav2-links { display: none; }
  .isola { gap: var(--sp-8); padding-inline: var(--sp-16) var(--sp-8); width: 100%; justify-content: space-between; }
  .menu-v2 { display: block; }
  /* «Parliamone» nella pillola: accanto all'hamburger sui tablet (con lo
     space-between restava in mezzo), via sui telefoni (≤720: sta nel
     pannello del menu e nella hero). */
  .btn2--nav { margin-left: auto; }
  .pilastri2-grid, .dolori2 { grid-template-columns: 1fr; }
  /* Reazione a catena: colonna unica, il conto sopra la catena (ordine del
     DOM), la card non e' piu' sticky. */
  .catena2-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .catena2-conto { position: static; order: 1; }
  .catena2-passi { order: 2; }
  /* Tour delle schermate: una colonna, telefono sopra il testo; in modalita'
     interattiva la rail e' una striscia orizzontale scorrevole sopra la
     scena (aggancio morbido + sfumatura ai bordi; dove mask-image manca
     degrada senza fade). */
  .tour2-item { grid-template-columns: 1fr; gap: var(--sp-24); }
  .tour2-item .tour2-visual { order: -1; }
  .js-tour .tour2-corpo { grid-template-columns: 1fr; gap: var(--sp-16); align-items: start; }
  .js-tour .tour2-rail {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--sp-24));
    padding-inline: var(--sp-24);
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--sp-16), #000 calc(100% - var(--sp-24)), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--sp-16), #000 calc(100% - var(--sp-24)), transparent);
  }
  .js-tour .tour2-rail::-webkit-scrollbar { display: none; }
  .js-tour .tour2-tab {
    flex: none;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid var(--linea);
    border-radius: var(--r-8) var(--r-8) 0 0;
    padding: var(--sp-8) var(--sp-12);
    scroll-snap-align: start;
    scroll-margin-inline: var(--sp-16);
  }
  .js-tour .tour2-tab.is-attivo { border-bottom-color: var(--navy); }
  .vetrine2-grid, .regole2, .colonne2, .contatto2-grid { grid-template-columns: 1fr; }
  .vetrina2 { min-height: 400px; }
  /* La card larga torna come le altre (padding pieno, visual in basso) ma
     piu' alta: a 390 il testo arriva a ~340 px e il pannello dei conti deve
     stare SOTTO la CTA, non dietro (il bordo di uno screenshot coperto dalla
     CTA passa, un'intestazione coperta no). */
  .vetrina2--larga { min-height: 560px; padding-right: var(--sp-32); }
  .vetrina2--larga .vetrina2-visual { inset: auto 0 0 0; width: auto; height: 230px; }
  .vetrina2--larga .vetrina2-tel { right: 4%; bottom: -34%; width: 34%; transform: rotate(4deg); }
  .vetrina2--larga .vetrina2-conti { left: 6%; bottom: -8%; width: 56%; }
  .blocco2, .blocco2--inverso { grid-template-columns: 1fr; gap: var(--sp-32); }
  .blocco2--inverso .blocco2-testo { order: 0; }
  .blocco2 + .blocco2 { margin-top: var(--sp-64); }
  .wow2 b { font-size: 48px; }
  .muro2-sigillo b { font-size: 48px; }
}
@media (max-width: 720px) {
  :root { --nav2-off: 12px; }
  .wrap { padding-inline: var(--sp-16); }
  .h1-hero { font-size: 36px; }
  .h-pagina { font-size: 30px; line-height: 36px; }
  .tagline2-frase { font-size: 30px; line-height: 36px; }
  .striscia-grid { grid-template-columns: 1fr; gap: var(--sp-24); }
  .btn2--nav { display: none; }
  .js-tour .tour2-rail { margin-inline: calc(-1 * var(--sp-16)); padding-inline: var(--sp-16); }
  /* Sul telefono lo screenshot e' il contenuto: vetrina piu' stretta di
     cornice e telefono piu' largo (a 390px: ~254px invece di ~198). */
  .js-tour .tour2-vetrina { padding: var(--sp-16); }
  .tour2-vetrina .telefono2 { width: min(280px, 78%); }
  .stat2 strong { font-size: 36px; }
  .contatto2-card { padding: var(--sp-24); }
  .vetrina2 { padding: var(--sp-24); }
  .catena2-conto { padding: var(--sp-24); }
}
@media (prefers-reduced-motion: reduce) {
  /* SOLO transizioni e animazioni CSS: mai stati di visibilita' (quelli non
     esistono nel CSS per contratto). */
  .btn2, .isola, .nav2-links a, .hamb i, .vetrina2, .vetrina2-cta svg,
  .faq2-lista summary::after, .approfondisci2 > summary::after,
  .catena2-num, .catena2-passo .h3-2, .catena2-voce, .catena2-ico { transition: none; }
  .btn2:hover, .vetrina2:hover { transform: none; }
}
@media print {
  .nav2, .salta { display: none; }
  /* Tour delle schermate: impilato e completo. */
  .tour2-rail { display: none; }
  .js-tour .tour2-corpo { display: block; }
  .js-tour .tour2-item { display: grid; }
  .js-tour .tour2-scene { gap: var(--sp-64); }
}