/* ═══════════════════════════════════════════════════════════════════════════
   IL SITO DI LEXNODE — la pagina che si manda a chi deve capire in un minuto.

   Registro, dal 10 settembre 2026: **fondo bianco**. Era nero, ed era un
   registro da prodotto per sviluppatori; chi legge questa pagina è un'azienda
   e un professionista della compliance. Il bianco è la richiesta del
   documento di revisione, e porta con sé una conseguenza: il viola del
   marchio torna a essere quello vero (#4F13C6), che sul nero non si leggeva
   e viveva in una variante schiarita.

   La pagina si chiude con un passaggio: il fondo diventa blu, il carattere
   diventa un serif e il marchio si scambia. È il punto in cui si smette di
   parlare di software e si comincia a parlare di chi firma — e da lì si va a
   Lexnode Law, che è un'altra pagina e un altro mondo.

   Nessuna libreria, nessuna risorsa esterna: la politica dei contenuti
   dell'app vieta tutto ciò che non arriva da qui (`script-src 'self'`).
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('caratteri/caratteri.css');

:root {
  /* I fondi. Bianco pieno per il corpo, carta per le fasce alternate. */
  --bianco: #FFFFFF;
  --carta: #F6F7FB;
  --carta-2: #EEF0F7;
  --riga: rgba(13,18,38,.10);
  --riga-2: rgba(13,18,38,.18);
  --velo: rgba(13,18,38,.04);

  /* L'inchiostro. Non nero pieno: un blu-nero, che sul bianco stanca meno. */
  --inchiostro: #0D1226;
  --inchiostro-2: #4B5470;
  --inchiostro-3: #7A8299;

  /* Il marchio, nella sua tinta vera: sul bianco si legge e non ha bisogno
     della variante schiarita che serviva sul fondo scuro. */
  --marchio: #4F13C6;
  --marchio-vivo: #6D28D9;
  --marchio-chiaro: #A78BFA;
  --marchio-velo: rgba(79,19,198,.08);
  --marchio-alone: rgba(79,19,198,.30);

  /* Il verde e il giallo, ritarati per il fondo chiaro: quelli di prima
     erano pensati per brillare sul nero e qui sparivano. */
  --verde: #0E7C52;
  --giallo: #8A5B06;

  /* Il blu dello studio legale. Vive nel passaggio in fondo a questa pagina
     e in tutta la pagina di Lexnode Law. */
  --blu: #0B1F45;
  --blu-2: #12315F;
  --blu-chiaro: #C7D6F0;

  --titoli: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --corpo: "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  /* Palatino Linotype dove c'è (Windows, Office, macOS); altrove Newsreader,
     ospitato qui: stessa altezza delle minuscole, stesso taglio umanista. */
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "Newsreader", Georgia, serif;

  --uscita: cubic-bezier(.16,.84,.3,1);
  --largo: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bianco); color: var(--inchiostro);
  font-family: var(--corpo); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .num { font-family: var(--titoli); font-weight: var(--forte); letter-spacing: -.035em; line-height: 1; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.dentro { width: 100%; max-width: var(--largo); margin: 0 auto; padding: 0 26px; }
section { position: relative; }
/* La testata è fissa: senza questo, un'ancora atterra sotto di lei. */
section[id] { scroll-margin-top: 92px; }

.acceso-verde { color: var(--verde); font-weight: var(--medio); }

/* ── La testata ──────────────────────────────────────────────────────── */

.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 26px; transition: background .4s var(--uscita), border-color .4s, backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.testata.posata {
  background: rgba(255,255,255,.80); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--riga);
}
.marchio { display: inline-flex; align-items: center; color: var(--inchiostro); }
.marchio .parola { width: 148px; height: auto; display: block; }
/* Nel piede i due soggetti: la piattaforma e lo studio legale. */
.due-soggetti { display: grid; gap: 6px; }
.due-soggetti .parola-law { width: 168px; height: auto; display: block; color: var(--inchiostro-2); transition: color .25s; }
.due-soggetti:hover .parola-law { color: var(--blu); }
.due-soggetti i { font-style: normal; font-size: 12px; color: var(--inchiostro-3); }

.menu { display: flex; align-items: center; gap: 26px; }
.menu a { font-size: 14px; color: var(--inchiostro-2); transition: color .2s; }
.menu a:hover { color: var(--marchio); }

.bottone {
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px;
  border-radius: 999px; border: 1px solid var(--riga-2); background: var(--bianco);
  font-family: var(--titoli); font-weight: var(--medio); font-size: 14.5px; letter-spacing: -.01em;
  color: var(--inchiostro); cursor: pointer;
  transition: transform .35s var(--uscita), background .3s, border-color .3s, box-shadow .35s;
}
.bottone:hover { transform: translateY(-2px); background: var(--carta); border-color: var(--inchiostro-3); }
.bottone.pieno {
  background: linear-gradient(180deg, var(--marchio-vivo), var(--marchio)); border-color: transparent; color: #fff;
  box-shadow: 0 8px 26px -10px var(--marchio-alone);
}
.bottone.pieno:hover { box-shadow: 0 14px 40px -12px var(--marchio-alone); background: linear-gradient(180deg, #7C3AED, #5B21B6); }
/* Sul fondo blu del passaggio: bianco pieno, inchiostro blu. */
.bottone.chiaro { background: #fff; border-color: transparent; color: var(--blu); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.bottone.chiaro:hover { background: #fff; border-color: transparent; }
/* La freccia è un disegno, non un carattere: i caratteri qui sono
   sottoinsiemi latini e la freccia non ci sta dentro. */
.bottone .freccia { transition: transform .35s var(--uscita); flex: none; }
.bottone:hover .freccia { transform: translateX(4px); }

/* ── L'apertura ──────────────────────────────────────────────────────── */

.apertura { min-height: 100svh; display: grid; align-items: center; padding: 120px 0 60px; overflow: hidden; }
#grafo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/* L'alone che segue il puntatore: due variabili aggiornate dal copione. */
.apertura::before {
  content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(560px circle at var(--px, 50%) var(--py, 38%), rgba(79,19,198,.10), transparent 62%);
  transition: opacity .6s;
}
.apertura::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bianco));
}
.apertura .dentro { position: relative; z-index: 2; }

.apertura h1 { font-size: clamp(2.5rem, 7.4vw, 5.4rem); max-width: 17ch; }
.apertura h1 .acceso {
  background: linear-gradient(100deg, var(--marchio) 6%, #7C3AED 52%, #A855F7 96%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.apertura .guida {
  margin-top: 30px; max-width: 58ch; font-size: clamp(16px, 2.1vw, 19px);
  color: var(--inchiostro-2); line-height: 1.62;
}
.apertura .guida b { color: var(--inchiostro); font-weight: var(--forte); }
/* Il colpo va su una riga sua. In mezzo al paragrafo si spezzava a metà —
   «Ti» in fondo a una riga e «mandano un'ispezione» sulla successiva — e
   una frase che deve arrivare come uno schiaffo non può andare a capo. */
.apertura .guida .colpo {
  display: block; margin: 6px 0; font-size: 1.08em; letter-spacing: -.015em;
}
.gruppo-bottoni { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 38px; }

.scorri {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2;
  display: grid; justify-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--inchiostro-3);
}
.scorri i { display: block; width: 1px; height: 36px; background: linear-gradient(180deg, var(--riga-2), transparent); }

/* ── La striscia delle norme ─────────────────────────────────────────── */

.striscia { padding: 34px 0; border-block: 1px solid var(--riga); background: var(--carta); overflow: hidden; }
/* Ai bordi il nastro sfuma: tagliato di netto sembrerebbe un errore. */
.striscia .nastro-cornice {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.striscia .titolino {
  text-align: center; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: 24px;
}
.nastro { display: flex; gap: 14px; width: max-content; animation: scorre 46s linear infinite; }
.striscia:hover .nastro { animation-play-state: paused; }
@keyframes scorre { to { transform: translateX(-50%); } }
.legge {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 11px 18px; border-radius: 999px; border: 1px solid var(--riga);
  background: var(--bianco);
  font-family: var(--titoli); font-weight: var(--medio); font-size: 14.5px; color: var(--inchiostro-2);
}
.legge .stato { width: 6px; height: 6px; border-radius: 50%; background: var(--inchiostro-3); flex: none; }
.legge.viva { color: var(--inchiostro); border-color: rgba(79,19,198,.28); background: var(--marchio-velo); }
.legge.viva .stato { background: var(--verde); }

/* ── Sezioni ─────────────────────────────────────────────────────────── */

.sezione { padding: clamp(80px, 12vw, 150px) 0; }
/* Una fascia di carta: separa senza una riga. */
.sezione.carta { background: var(--carta); }
.sezione.carta + .sezione.carta { border-top: 0; }
.capo { max-width: 700px; margin-bottom: 54px; }
.capo .etichetta {
  display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--marchio); margin-bottom: 18px;
}
.capo h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.capo p { margin-top: 18px; color: var(--inchiostro-2); max-width: 56ch; font-size: 17px; }

/* ── I tre pilastri ──────────────────────────────────────────────────── */

.pilastri { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.scheda {
  position: relative; padding: 30px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--riga); background: var(--bianco);
  box-shadow: 0 1px 2px rgba(13,18,38,.04);
  transition: transform .5s var(--uscita), border-color .4s, box-shadow .4s;
}
.scheda:hover { transform: translateY(-4px); border-color: rgba(79,19,198,.32); box-shadow: 0 18px 46px -22px var(--marchio-alone); }
/* Il bagliore segue il puntatore dentro la scheda. */
.scheda::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--sx, 50%) var(--sy, 50%), rgba(79,19,198,.07), transparent 70%);
}
.scheda:hover::before { opacity: 1; }
.scheda .segno {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; margin-bottom: 20px;
  background: var(--marchio-velo); border: 1px solid rgba(79,19,198,.20); color: var(--marchio);
}
.scheda .segno svg { width: 21px; height: 21px; }
.scheda h3 { font-size: 20px; margin-bottom: 12px; }
.scheda p { color: var(--inchiostro-2); font-size: 15px; }
.scheda p + p { margin-top: 12px; }

/* ── I numeri ────────────────────────────────────────────────────────── */

.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
  background: var(--riga); border: 1px solid var(--riga); border-radius: 20px; overflow: hidden; }
.numero { background: var(--bianco); padding: 30px 24px; }
.numero .num { font-size: clamp(2.2rem, 4.6vw, 3.1rem); color: var(--marchio); font-variant-numeric: tabular-nums; }
.numero .che { margin-top: 10px; font-size: 13.5px; color: var(--inchiostro-3); line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════════════
   IL PASSAGGIO — da lexnode.ai a lexnode law

   Il fondo diventa blu, il carattere diventa serif, il marchio si scambia:
   tre segnali insieme, perché il cambio di soggetto si senta prima di
   leggerlo. Sopra, una tela con il grafo che si dirada — quello che finisce.
   ═══════════════════════════════════════════════════════════════════════ */

.passaggio {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(110px, 18vw, 200px) 0 clamp(90px, 14vw, 160px);
  background: linear-gradient(180deg, var(--bianco) 0%, #1B2A4E 26%, var(--blu) 62%, #060F26 100%);
  color: #EAF0FF; text-align: center;
}
#tessuto { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.passaggio .dentro { position: relative; z-index: 2; }

/* Due classi, non una: `.passaggio p` più sotto ha specificità maggiore e
   riportava questa frase a diciassette pixel. È il genere di scivolone che
   si vede solo guardando la pagina, mai leggendo il foglio. */
.passaggio .frase-ponte {
  font-family: var(--titoli); font-weight: var(--forte); letter-spacing: -.035em;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.12; color: #fff;
  margin: 0 auto clamp(44px, 7vw, 76px); max-width: none;
}
.passaggio .frase-ponte span { color: var(--marchio-chiaro); }

/* Lo scambio dei marchi: due facce nello stesso posto, una gira via e
   l'altra arriva. Il copione scambia la classe quando la sezione entra. */
.scambio-marchi {
  position: relative; height: clamp(46px, 7vw, 74px); margin-bottom: clamp(36px, 6vw, 58px);
  perspective: 900px;
}
.scambio-marchi .faccia {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; backface-visibility: hidden;
  transition: opacity .9s var(--uscita), transform .9s var(--uscita), filter .9s var(--uscita);
}
.scambio-marchi .parola, .scambio-marchi .parola-law { width: clamp(200px, 32vw, 340px); height: auto; display: block; }
.scambio-marchi .ai { color: #fff; --marchio-nodo: #A78BFA; }
.scambio-marchi .law { color: #fff; --marchio-nodo: #8FB7FF; }
.scambio-marchi .law { opacity: 0; transform: translate(-50%, -50%) rotateX(70deg) scale(.94); }
.scambio-marchi.girato .ai { opacity: 0; transform: translate(-50%, -50%) rotateX(-70deg) scale(.94); filter: blur(3px); }
.scambio-marchi.girato .law { opacity: 1; transform: translate(-50%, -50%); }

.passaggio h2 {
  font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.14;
  font-size: clamp(1.9rem, 4.6vw, 3.3rem); max-width: 20ch; margin: 0 auto; color: #fff;
}
.passaggio p {
  margin: 24px auto 0; max-width: 56ch; font-size: 17px; color: var(--blu-chiaro); line-height: 1.62;
}
.passaggio .gruppo-bottoni { justify-content: center; margin-top: 40px; }

/* ── L'invito finale ─────────────────────────────────────────────────── */

.invito { position: relative; overflow: hidden; text-align: center;
  padding: clamp(80px, 12vw, 140px) 0; background: var(--bianco); }
.invito::before {
  content: ''; position: absolute; left: 50%; top: -60px; width: 900px; height: 460px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(79,19,198,.10), transparent); pointer-events: none;
}
.invito .dentro { position: relative; }
.invito h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 20ch; margin: 0 auto; }
.invito p { margin: 22px auto 0; max-width: 52ch; color: var(--inchiostro-2); font-size: 17px; }
.invito .gruppo-bottoni { justify-content: center; }

/* ── Il piede ────────────────────────────────────────────────────────── */

.piede { border-top: 1px solid var(--riga); background: var(--carta); padding: 44px 0 30px; }
.piede .righe { display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.piede .legenda { max-width: 40ch; margin-top: 14px; color: var(--inchiostro-3); font-size: 13.5px; }
.piede .colonne { display: flex; gap: 54px; flex-wrap: wrap; }
.piede .colonna b { display: block; font-family: var(--titoli); font-size: 13px; margin-bottom: 12px; }
.piede .colonna a { display: block; font-size: 13.5px; color: var(--inchiostro-2); margin-bottom: 9px; transition: color .2s; }
.piede .colonna a:hover { color: var(--marchio); }
.piede .sotto {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--riga);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--inchiostro-3);
}

/* ── La comparsa allo scorrimento ────────────────────────────────────── */

/* Nascosto solo se il copione è vivo: `.anima` la mette lui. Senza (errore
   di rete, script bloccato) la pagina resta tutta leggibile invece di essere
   una distesa di bianco. */
.rivela { transition: opacity .8s var(--uscita), transform .8s var(--uscita); }
.anima .rivela { opacity: 0; transform: translateY(26px); }
.anima .rivela.vista { opacity: 1; transform: none; }
.rivela.r1 { transition-delay: .07s; } .rivela.r2 { transition-delay: .14s; }
.rivela.r3 { transition-delay: .21s; } .rivela.r4 { transition-delay: .28s; }

/* ── Schermi stretti ─────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .menu { display: none; }
  .testata { padding: 12px 16px; }
  .dentro { padding: 0 18px; }
  .apertura { min-height: auto; padding: 118px 0 70px; }
  /* Senza altezza piena l'indicatore finirebbe sopra i bottoni. E su un
     telefono nessuno ha bisogno che gli si dica di scorrere. */
  .scorri { display: none; }
}

@media (max-width: 560px) {
  .bottone { padding: 11px 16px; font-size: 14px; }
  .apertura h1 { font-size: clamp(2.05rem, 9.4vw, 2.9rem); }
  .apertura .guida { font-size: 15.5px; }
  .gruppo-bottoni { flex-direction: column; align-items: stretch; }
  .gruppo-bottoni .bottone { justify-content: center; }
  .numeri { grid-template-columns: repeat(2, 1fr); }
  .piede .colonne { gap: 32px; }
  .invito p, .capo p, .passaggio p { font-size: 15.5px; }
}


/* Chi ha chiesto meno movimento lo ottiene: resta la sostanza. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition-duration: .01ms !important; }
  .rivela { opacity: 1; transform: none; }
  #grafo, #tessuto { display: none; }
  /* Senza movimento lo scambio non avviene: si mostra il marchio d'arrivo,
     che è quello che la sezione sta annunciando. */
  .scambio-marchi .ai { opacity: 0; }
  .scambio-marchi .law { opacity: 1; transform: translate(-50%, -50%); }
}


/* ═══════════════════════════════════════════════════════════════════════
   IL PERIMETRO IN DIRETTA
   ═══════════════════════════════════════════════════════════════════════ */

.perimetro-vivo {
  display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: start;
  padding: 24px; border-radius: 22px; border: 1px solid var(--riga);
  background: var(--bianco); box-shadow: 0 2px 4px rgba(13,18,38,.03);
}

.colonna-fatti { position: sticky; top: 96px; display: grid; gap: 18px; }
.fatti { display: grid; gap: 16px; }
.fatto { display: grid; gap: 7px; }
.fatto .nome-fatto {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--inchiostro-3);
}
.fatto small { color: var(--inchiostro-3); font-size: 12px; line-height: 1.4; }

.pillole { display: flex; flex-wrap: wrap; gap: 6px; }
.pillole button {
  font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--riga-2); background: var(--bianco); color: var(--inchiostro-2);
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--uscita);
}
.pillole button:hover { color: var(--inchiostro); transform: translateY(-1px); border-color: var(--inchiostro-3); }
.pillole button.attiva {
  background: linear-gradient(180deg, var(--marchio-vivo), var(--marchio)); border-color: transparent;
  color: #fff; font-weight: var(--medio); box-shadow: 0 6px 16px -8px var(--marchio-alone);
}

.cursore { display: flex; align-items: center; gap: 12px; }
.cursore input[type=range] { flex: 1; accent-color: var(--marchio); background: transparent; }
.cursore b { font-family: var(--mono); font-size: 14px; min-width: 34px; text-align: right; color: var(--inchiostro); }

.leve { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 8px; }
.levetta {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--inchiostro-2); cursor: pointer;
  padding: 8px 11px; border: 1px solid var(--riga); border-radius: 10px; background: var(--bianco);
  transition: border-color .25s, color .25s;
}
.levetta:hover { color: var(--inchiostro); border-color: var(--inchiostro-3); }
.levetta input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--marchio); }
.levetta:has(input:disabled) { opacity: .42; cursor: not-allowed; }

.nota-perimetro { color: var(--inchiostro-3); font-size: 12px; line-height: 1.5; }

/* Le norme, chiuse. Una griglia di blocchi indipendenti e non due colonne di
   testo: aprendo una norma si allunga soltanto la sua, non l'impaginato. */
.elenco-obblighi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 10px; align-content: start;
}

.gruppo-legge {
  border: 1px solid var(--riga); border-radius: 14px; background: var(--bianco);
  align-self: start; overflow: hidden; transition: border-color .3s, box-shadow .4s, opacity .3s;
}
.gruppo-legge:hover { border-color: var(--riga-2); }
.gruppo-legge.spenta { opacity: .45; }

.testa-legge {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 14px; border: 0; background: transparent; text-align: left;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--inchiostro-2); transition: color .3s, background .25s;
}
.testa-legge:hover { background: var(--velo); color: var(--inchiostro); }
.testa-legge .nome-legge { flex: 1; min-width: 0; line-height: 1.35; }
.testa-legge .conteggio-legge {
  font-size: 12px; letter-spacing: 0; color: var(--marchio);
  font-variant-numeric: tabular-nums; flex: none;
}
.gruppo-legge.spenta .conteggio-legge { color: var(--inchiostro-3); }
/* La punta: un quadratino girato di 45°, come nel resto della pagina non
   c'è un carattere di icone da caricare. */
.testa-legge .punta {
  flex: none; width: 7px; height: 7px; border-right: 1.6px solid var(--inchiostro-3);
  border-bottom: 1.6px solid var(--inchiostro-3); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--uscita), border-color .3s;
}
.gruppo-legge.aperto .punta { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--marchio); }

.corpo-legge { display: none; padding: 2px 14px 14px; border-top: 1px solid var(--riga); }
.gruppo-legge.aperto .corpo-legge { display: block; }

/* Quando un fatto cambia qualcosa dentro una norma chiusa, è la norma a
   segnalarlo: sulla riga il lampo non si vedrebbe. */
@keyframes lampo-norma {
  0% { border-color: var(--marchio); box-shadow: 0 0 0 3px var(--marchio-velo); }
  100% { border-color: var(--riga); box-shadow: 0 0 0 3px transparent; }
}
.gruppo-legge.mossa { animation: lampo-norma 1.4s var(--uscita); }

.obbligo {
  break-inside: avoid; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 9px;
  padding: 5px 0; align-items: start; transition: opacity .35s var(--uscita);
  opacity: .40;
}
.obbligo .bollo {
  width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--inchiostro-3); background: transparent;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
.obbligo .titolo-obbligo {
  font-size: 13.5px; line-height: 1.4; color: var(--inchiostro-2);
  text-decoration: line-through; text-decoration-color: rgba(122,130,153,.5);
  transition: color .3s;
}
.obbligo .perche { display: block; font-size: 11.5px; color: var(--inchiostro-3); margin-top: 2px; }

.obbligo.dentro { opacity: 1; }
.obbligo.dentro .bollo { background: var(--verde); border-color: var(--verde); box-shadow: 0 0 0 3px rgba(14,124,82,.14); }
.obbligo.dentro .titolo-obbligo { color: var(--inchiostro); text-decoration: none; }

@keyframes lampo {
  0% { background: rgba(79,19,198,.14); }
  100% { background: transparent; }
}
.obbligo.cambiata { animation: lampo .9s var(--uscita); border-radius: 8px; }

/* ── Il titolo che si scopre, parola per parola ───────────────────────── */

/* La finestrella che nasconde la parola finché non sale taglia a filo della
   linea di base: le discendenti (la g di «giorno», la p di «compliance»)
   finivano mozzate. Il fondo scende di un sesto di em e il margine lo
   riprende, così la finestra è più alta ma la riga resta dov'era. */
.scoprire .parola-su {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .17em; margin-bottom: -.17em;
}
.scoprire .parola-su > span {
  display: inline-block; transform: translateY(105%);
  transition: transform .9s var(--uscita);
}
.scoprire.vista .parola-su > span { transform: none; }

@media (max-width: 900px) {
  .perimetro-vivo { grid-template-columns: 1fr; padding: 18px; }
  .colonna-fatti { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .scoprire .parola-su > span { transform: none; }
}





/* ═══════════════════════════════════════════════════════════════════════
   LA SEQUENZA — il grafo che si costruisce, e il segnale che si propaga

   La sezione è alta più schermate; dentro, una lastra incollata in cima
   resta ferma mentre la pagina scorre. Quello che scorre non è l'immagine:
   è il tempo della scena. Il disegno dipende solo dalla posizione, quindi
   andando su e giù si riavvolge esattamente come un nastro.

   L'ultimo atto è nuovo: un Nod vede cambiare un fatto e manda un segnale,
   che risale al centro e ridiscende su ogni obbligo che quel fatto tocca.
   È la cosa che il documento del 10 settembre 2026 chiedeva di estremizzare.
   ═══════════════════════════════════════════════════════════════════════ */

.film { height: 500vh; background: var(--bianco); }

.pellicola {
  position: sticky; top: 0; overflow: hidden;
  height: 100vh; height: 100svh;   /* la seconda vince dove esiste */
  display: grid; place-items: center;
}
#scena { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Una velatura in basso: le didascalie restano leggibili anche quando il
   grafo, sotto, si infittisce. */
.pellicola::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.90) 58%, var(--bianco));
  pointer-events: none; z-index: 1;
}

.didascalie {
  position: relative; z-index: 2; width: min(780px, calc(100% - 52px));
  margin-top: auto; margin-bottom: clamp(48px, 12vh, 130px); pointer-events: none;
}
.didascalia {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: clamp(16px, 2.2vw, 21px); line-height: 1.5; color: var(--inchiostro-2);
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s var(--uscita), transform .5s var(--uscita);
}
.didascalia b {
  display: block; color: var(--inchiostro); font-family: var(--titoli);
  font-weight: var(--forte); letter-spacing: -.035em; font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.08; margin-bottom: 10px;
}
.didascalia.viva { opacity: 1; transform: none; }

.conta-scena {
  position: absolute; top: clamp(84px, 12vh, 120px); right: clamp(20px, 5vw, 60px); z-index: 2;
  display: grid; justify-items: end; gap: 2px; opacity: 0; transform: translateY(-8px);
  transition: opacity .5s var(--uscita), transform .5s var(--uscita); pointer-events: none;
}
.conta-scena.viva { opacity: 1; transform: none; }
.conta-scena b {
  font-family: var(--titoli); font-weight: var(--forte); font-size: clamp(38px, 6vw, 62px);
  letter-spacing: -.045em; line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums;
}
.conta-scena span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--inchiostro-3); }

.avanzamento-film {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  width: min(320px, 46vw); height: 2px; border-radius: 2px; background: var(--riga); overflow: hidden;
}
.avanzamento-film i {
  display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--marchio), #A855F7);
}

/* L'apertura si allontana mentre entri nella sequenza. */
.apertura .dentro { will-change: transform, opacity; }

@media (max-width: 900px) {
  .film { height: 420vh; }
  .didascalie { margin-bottom: 92px; }
  .conta-scena { top: 92px; }
  .conta-scena b { font-size: 34px; }
}

/* Con il movimento ridotto niente nastro: la scena finita in cima, e sotto le
   cinque didascalie una dopo l'altra. Nessuna sovrapposizione, stessa storia. */
@media (prefers-reduced-motion: reduce) {
  .film { height: auto; padding: 40px 0 20px; }
  .pellicola { position: static; height: auto; display: block; overflow: visible; }
  .pellicola::after { display: none; }
  #scena { position: static; display: block; width: 100%; height: 58vh; min-height: 340px; }
  .didascalie {
    position: static; margin: 34px auto 0; width: min(1180px, calc(100% - 52px));
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px;
  }
  .didascalia { position: static; opacity: 1; transform: none; font-size: 15px; }
  .didascalia b { font-size: 19px; }
  .conta-scena { position: static; opacity: 1; transform: none; justify-items: start; margin: 0 auto; width: min(1180px, calc(100% - 52px)); }
  .avanzamento-film { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LA VERSIONE PER IL CLIENTE — settembre 2026

   La pagina parlava ai professionisti della compliance («siamo lo strumento
   a disposizione dei professionisti»). Da qui in poi parla soltanto alle
   aziende: ai professionisti parla lo studio, su lexnodelaw.it.

   Il claim è in due registri, e non è un vezzo: la prima frase è la
   macchina (sans, viola), la seconda è lo studio (serif, blu). Sono i due
   soggetti della promessa, e si sentono diversi prima di essere letti.
   ═══════════════════════════════════════════════════════════════════════ */

.apertura .contro-claim {
  margin-top: 22px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.25rem, 3vw, 2.05rem); line-height: 1.2; letter-spacing: -.01em;
  color: var(--blu); max-width: none;
}
/* Il filetto blu: piccolo, ma è il segno che dice «qui parla un altro». */
.apertura .contro-claim::before {
  content: ''; display: block; width: 34px; height: 2px; margin-bottom: 16px;
  background: linear-gradient(90deg, var(--blu), var(--marchio-chiaro));
}

/* ── I tre passi ─────────────────────────────────────────────────────── */

.passi .scheda { padding-top: 30px; }
.passi .passo-n {
  position: absolute; top: 24px; right: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--inchiostro-3); opacity: .7;
}
.passi .scheda p b { color: var(--inchiostro); font-weight: var(--forte); }

/* ── Le garanzie ─────────────────────────────────────────────────────────
   Al posto dei numeri del motore (45 obblighi, 41 nodi, 9 Nod): erano
   metriche di chi costruisce, e «45 obblighi» letto da un'azienda suonava
   come una copertura piccola. Qui ci sono quattro cose verificabili.     */

.garanzie {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  background: var(--riga); border: 1px solid var(--riga); border-radius: 20px; overflow: hidden;
}
.garanzia { background: var(--bianco); padding: 28px 24px; }
.garanzia .targa {
  display: inline-block; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px;
  background: var(--marchio-velo); border: 1px solid rgba(79,19,198,.20);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--marchio);
}
.garanzia p { font-size: 14px; line-height: 1.55; color: var(--inchiostro-2); }
.garanzia p b { color: var(--inchiostro); font-weight: var(--forte); }

/* ── I casi in cui entra lo studio ───────────────────────────────────────
   «Quando conta» da solo è una promessa che ognuno interpreta come vuole.
   Elencare i casi la rende verificabile — e protegge chi la fa.          */

.casi {
  list-style: none; margin: 36px auto 0; padding: 0; max-width: 780px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px;
  text-align: left;
}
.casi li {
  padding: 13px 16px 13px 38px; border-radius: 12px; position: relative;
  border: 1px solid rgba(199,214,240,.22); background: rgba(255,255,255,.05);
  font-size: 14.5px; line-height: 1.4; color: #EAF0FF;
}
.casi li::before {
  content: ''; position: absolute; left: 16px; top: 50%; width: 7px; height: 7px;
  margin-top: -3.5px; border-radius: 50%; background: var(--marchio-chiaro);
  box-shadow: 0 0 0 3px rgba(167,139,250,.18);
}

/* ── L'invito dentro il perimetro ───────────────────────────────────────
   Il perimetro lo si scopre da soli; quali obblighi siano già coperti no.
   È lì che la prova diventa una conversazione.                           */

.invito-perimetro {
  display: grid; gap: 12px; padding: 16px; border-radius: 14px;
  border: 1px solid rgba(79,19,198,.22); background: var(--marchio-velo);
}
.domanda-perimetro { font-size: 14px; line-height: 1.45; color: var(--inchiostro); }
.domanda-perimetro b {
  font-family: var(--titoli); font-weight: var(--forte); color: var(--marchio);
  font-variant-numeric: tabular-nums;
}
.invito-perimetro .bottone { justify-content: center; font-size: 14px; padding: 11px 16px; }

@media (max-width: 560px) {
  .garanzie { grid-template-columns: 1fr; }
  .casi { grid-template-columns: 1fr; }
  .apertura .contro-claim { font-size: 1.2rem; }
}

/* ── Il riquadro dell'ultimo atto ────────────────────────────────────────
   L'atto finale erano tre pallini verdi in più su un grafo: il meccanismo
   si vedeva, la conseguenza no. Qui ci sono i nomi dei tre obblighi che il
   fatto accende — è la cosa che un imprenditore può riconoscere.        */

.esito-scena {
  position: absolute; z-index: 2; left: clamp(20px, 5vw, 60px); top: 50%;
  width: min(300px, 32vw); display: grid; gap: 10px; padding: 18px;
  border-radius: 16px; border: 1px solid rgba(14,124,82,.28);
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px -28px rgba(13,18,38,.5);
  opacity: 0; transform: translate(-10px, -50%);
  transition: opacity .55s var(--uscita), transform .55s var(--uscita);
  pointer-events: none;
}
.esito-scena.viva { opacity: 1; transform: translate(0, -50%); }
.esito-scena .targhetta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--verde);
}
.esito-scena ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.esito-scena li {
  position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.38;
  color: var(--inchiostro);
}
.esito-scena li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(14,124,82,.14);
}
.esito-scena small {
  font-size: 11.5px; line-height: 1.4; color: var(--inchiostro-3);
  padding-top: 9px; border-top: 1px solid var(--riga);
}

/* Su schermo stretto il riquadro coprirebbe la scena: lì il racconto lo
   porta la didascalia, che dice la stessa cosa a parole. */
@media (max-width: 900px) { .esito-scena { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   IL PANNELLO DEL PRESIDIO — settembre 2026

   Qui c'erano quarantacinque righe, tutte aperte. Erano la prova che il
   corpus è vero, e nessuno le leggeva: un imprenditore non vuole l'elenco
   di ciò che deve, vuole sapere che cosa gli manca, a chi tocca e per
   quando. Adesso a destra c'è la schermata che vedrebbe davvero, e le
   quarantacinque stanno dietro una riga sola, per chi le cerca.
   ═══════════════════════════════════════════════════════════════════════ */

.etichetta-colonna {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--marchio);
}

.presidio { display: grid; gap: 14px; align-content: start; }

.testa-presidio { display: flex; align-items: center; gap: 10px; }
.nome-presidio { font-family: var(--titoli); font-weight: var(--forte); font-size: 17px; letter-spacing: -.03em; }
/* Dire che l'azienda è finta, dove si vede: è una dimostrazione, non un
   caso reale, e tenerlo implicito sarebbe scorretto. */
.finta {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--inchiostro-3); border: 1px solid var(--riga-2); border-radius: 999px; padding: 3px 9px;
}

.riquadri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.riquadro {
  padding: 16px; border-radius: 14px; border: 1px solid var(--riga);
  background: var(--bianco); display: grid; gap: 4px; align-content: start;
}
.riquadro .cifra {
  font-family: var(--titoli); font-weight: var(--forte); font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -.045em; line-height: 1; color: var(--marchio); font-variant-numeric: tabular-nums;
}
.riquadro .dicitura-riq { font-size: 12.5px; line-height: 1.35; color: var(--inchiostro-2); margin-top: 4px; }
.riquadro small { font-size: 11px; color: var(--inchiostro-3); }

.movimento { padding: 16px; border-radius: 16px; border: 1px solid var(--riga); background: var(--carta); }
.testa-mov {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--riga);
}
.titolo-mov {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--inchiostro-2); line-height: 1.4;
}
.segno-mov {
  font-family: var(--titoli); font-weight: var(--forte); font-size: 15px; letter-spacing: -.02em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap; flex: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity .3s var(--uscita), transform .3s var(--uscita);
}
.segno-mov.vivo { opacity: 1; transform: none; }
.segno-mov.entrati { color: var(--verde); background: rgba(14,124,82,.12); }
.segno-mov.usciti { color: var(--giallo); background: rgba(138,91,6,.12); }
.segno-mov.fermo { color: var(--inchiostro-3); background: var(--velo); }

.righe-mov { display: grid; gap: 12px; }
.riga-presidio { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.riga-presidio .bollo-p {
  width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;
  background: var(--inchiostro-3); box-shadow: 0 0 0 3px rgba(122,130,153,.14);
}
.riga-presidio.entrato .bollo-p { background: var(--verde); box-shadow: 0 0 0 3px rgba(14,124,82,.16); }
.riga-presidio.uscito .bollo-p { background: var(--giallo); box-shadow: 0 0 0 3px rgba(138,91,6,.14); }
.riga-presidio .titolo-p { display: block; font-size: 14px; line-height: 1.35; color: var(--inchiostro); }
.riga-presidio.uscito .titolo-p { color: var(--inchiostro-2); text-decoration: line-through; text-decoration-color: rgba(122,130,153,.45); }
.riga-presidio small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.4; color: var(--inchiostro-3); }
/* Le righe che arrivano dopo un cambiamento entrano, invece di comparire:
   è il movimento che racconta che il perimetro si è ricalcolato. */
@keyframes entra-riga { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.riga-presidio { animation: entra-riga .45s var(--uscita) both; }
.riga-presidio:nth-child(2) { animation-delay: .06s; }
.riga-presidio:nth-child(3) { animation-delay: .12s; }
.riga-presidio:nth-child(4) { animation-delay: .18s; }
.avanzo { font-size: 12.5px; line-height: 1.45; color: var(--inchiostro-3); }

/* Le quarantacinque, per chi le cerca. */
.tutti-obblighi { display: grid; gap: 12px; }
.leva-tutti {
  justify-self: start; font: inherit; font-size: 12.5px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--riga-2);
  background: var(--bianco); color: var(--inchiostro-2);
  transition: color .25s, border-color .25s, background .25s;
}
.leva-tutti:hover { color: var(--inchiostro); border-color: var(--inchiostro-3); background: var(--carta); }
.tutti-obblighi .elenco-obblighi { display: none; }
.tutti-obblighi.aperto .elenco-obblighi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (max-width: 760px) {
  .riquadri { grid-template-columns: 1fr 1fr; }
  .riquadri .riquadro:last-child { grid-column: 1 / -1; }
}

/* ── La striscia delle norme, dentro il pannello ─────────────────────────
   Sette pastiglie in una riga: accese quelle che ti riguardano, spente le
   altre. È il colpo d'occhio che l'elenco non dava, e si muove insieme ai
   fatti — un modello 231 adottato ne accende due in una volta. */

.norme-striscia { display: flex; flex-wrap: wrap; gap: 7px; }
.norma-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(79,19,198,.24); background: var(--marchio-velo);
  font-size: 12.5px; color: var(--inchiostro);
  transition: opacity .35s var(--uscita), border-color .35s, background .35s;
}
.norma-chip b {
  font-family: var(--mono); font-size: 11px; color: var(--marchio);
  font-variant-numeric: tabular-nums;
}
.norma-chip.spenta {
  opacity: .45; border-color: var(--riga); background: transparent; color: var(--inchiostro-3);
}
.norma-chip.spenta b { color: var(--inchiostro-3); }


/* ═══════════════════════════════════════════════════════════════════════
   IL REGISTRO EDITORIALE — 24 settembre 2026

   Un solo carattere per titoli e testo, Hanken Grotesk, usato leggero e
   più piccolo: la professionalità sta nel peso che si toglie, non in
   quello che si aggiunge. Le etichette in IBM Plex Mono, che ha le
   grazie a lastra e fa da «timbro». Il serif resta allo studio.

   Il carattere di riferimento era GT Planar (Grilli Type, a licenza):
   se lo si acquista, basta cambiare --titoli e --corpo qui sotto.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --titoli: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --corpo: "Geist", "Helvetica Neue", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --forte: 600;
  --medio: 500;
  --leggero: 350;
  --lilla: #EFE9FF;
  --griglia: rgba(79,19,198,.055);
}

body { font-size: 15.5px; line-height: 1.6; font-feature-settings: normal; }
b, strong { font-weight: var(--forte); }

h1, h2, h3, .num { font-weight: var(--leggero); letter-spacing: -.025em; line-height: 1.06; }
h3 { font-weight: var(--medio); letter-spacing: -.015em; }

.bottone { font-weight: var(--medio); font-size: 14px; letter-spacing: 0; padding: 11px 19px; }
.menu a { font-size: 13.5px; }
.capo .etichetta, .striscia .titolino { font-size: 11px; letter-spacing: .14em; }
.capo h2 { font-size: clamp(1.75rem, 3.3vw, 2.55rem); }
.capo p { font-size: 16px; }
.scheda h3 { font-size: 18px; }
.scheda p { font-size: 14.5px; }
.legge { font-weight: var(--medio); font-size: 13.5px; }
.didascalia { font-size: clamp(15px, 1.8vw, 18px); }
.didascalia b { font-weight: var(--leggero); letter-spacing: -.025em; font-size: clamp(22px, 3vw, 34px); }
.conta-scena b, .riquadro .cifra, .numero .num { font-weight: 300; }
.passaggio .frase-ponte { font-weight: var(--leggero); letter-spacing: -.025em; }
.invito h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.invito p, .passaggio p { font-size: 16px; }

/* ── L'apertura, nuova ───────────────────────────────────────────────── */

/* La carta millimetrata sotto il grafo: il foglio su cui si lavora. */
.apertura {
  background-color: var(--bianco);
  background-image: radial-gradient(var(--griglia) 1.1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 11px 11px;
}
/* Le quattro tacche d'angolo: il margine di un foglio da tipografia. */
.apertura .tacca { position: absolute; z-index: 2; width: 7px; height: 20px; border-radius: 1px;
  background: var(--marchio); opacity: .22; pointer-events: none; }
.tacca.t1 { top: 86px; left: 22px; } .tacca.t2 { top: 86px; right: 22px; }
.tacca.t3 { bottom: 22px; left: 22px; } .tacca.t4 { bottom: 22px; right: 22px; }

.apertura-griglia {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.sopratitolo {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--marchio);
}
.sopratitolo::before { content: ''; width: 7px; height: 7px; background: var(--marchio); border-radius: 1px; }

.apertura h1 {
  font-size: clamp(2.25rem, 4.6vw, 3.7rem); font-weight: 300; letter-spacing: -.03em;
  line-height: 1.04; max-width: 15ch;
}
.apertura h1 .acceso { font-weight: 400; }
.apertura .sottotitolo {
  margin-top: 26px; font-size: clamp(1.1rem, 1.8vw, 1.38rem); line-height: 1.3;
  font-weight: var(--medio); letter-spacing: -.015em; color: var(--inchiostro); max-width: 30ch;
}
.apertura .contro-claim { margin-top: 10px; font-size: clamp(1.02rem, 1.7vw, 1.3rem); }
.apertura .contro-claim::before { display: none; }
.apertura .guida { margin-top: 22px; font-size: 15.5px; max-width: 52ch; }
.apertura .guida b { font-weight: var(--forte); }
.apertura .guida .colpo { font-size: 1em; margin-top: 10px; }
.apertura .gruppo-bottoni { margin-top: 34px; }

/* I biglietti che galleggiano accanto: gli agenti al lavoro. */
.biglietto, .biglietto-schema {
  display: grid; grid-template-columns: auto auto 1fr; gap: 6px 6px; align-items: center;
  padding: 13px 15px; border-radius: 13px; background: #fff;
  border: 1px solid var(--riga); box-shadow: 0 24px 48px -26px rgba(13,18,38,.45);
}
.biglietto b, .biglietto-schema b { grid-column: 1 / -1; font-weight: var(--forte); font-size: 14px; letter-spacing: -.01em; margin-top: 4px; }
.biglietto small, .biglietto-schema small { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; color: var(--inchiostro-3); }
.tag-agente, .tag-ritmo {
  font-size: 10.5px; font-weight: var(--medio); padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.tag-agente { background: var(--carta-2); color: var(--inchiostro-2); }
.tag-agente.viola { background: var(--marchio-velo); color: var(--marchio); }
.tag-ritmo { background: #DCFCE7; color: #166534; justify-self: start; }
.biglietto { position: absolute; z-index: 5; width: 232px; }
.biglietto.b1 { left: -48px; bottom: -118px; animation: galleggia 6s ease-in-out infinite .8s; }
.bollino { grid-row: span 2; width: 9px; height: 9px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 4px rgba(14,124,82,.15); animation: respiro 2.4s ease-in-out infinite; }
@keyframes respiro { 50% { box-shadow: 0 0 0 7px rgba(14,124,82,.05); } }

/* ── I connettori ────────────────────────────────────────────────────── */

.connettori {
  background-color: var(--bianco);
  background-image:
    linear-gradient(var(--griglia) 1px, transparent 1px),
    linear-gradient(90deg, var(--griglia) 1px, transparent 1px);
  background-size: 28px 28px;
}
.schema {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr) minmax(0, 1fr);
  grid-template-areas: "fonti cuore esiti" "studio studio studio";
  gap: 46px clamp(40px, 6vw, 84px); padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--riga); border-radius: 22px;
  background: rgba(255,255,255,.82); backdrop-filter: blur(2px);
  box-shadow: 0 30px 70px -50px rgba(13,18,38,.35);
}
.schema > .col-fonti { grid-area: fonti; }
.schema > .cuore-schema { grid-area: cuore; }
.schema > .col-esiti { grid-area: esiti; }
.schema > .studio-schema { grid-area: studio; }
.schema > *:not(.fili) { position: relative; z-index: 1; }

.fili { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.fili .filo { fill: none; stroke: rgba(79,19,198,.20); stroke-width: 1.2; }
.fili .corrente {
  fill: none; stroke: var(--marchio); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 10 400; stroke-dashoffset: 410; opacity: .0;
}
.fili .corrente.va { animation: corre 1.5s var(--uscita) forwards; }
@keyframes corre { 0% { stroke-dashoffset: 410; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fili .filo-studio { fill: none; stroke: rgba(11,31,69,.35); stroke-width: 1.2; stroke-dasharray: 4 5; }

.testa-schema {
  display: block; margin-bottom: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--inchiostro-3);
}
.nodi-schema { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.nodi-schema li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--riga); border-radius: 12px; background: #fff;
  transition: border-color .4s, box-shadow .4s, transform .4s var(--uscita);
}
.nodi-schema li.acceso { border-color: rgba(79,19,198,.45); box-shadow: 0 0 0 3px var(--marchio-velo); transform: translateX(2px); }
.nodi-schema .ico {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px;
  background: var(--marchio-velo); color: var(--marchio);
}
.nodi-schema .ico svg { width: 17px; height: 17px; }
.nodi-schema li[data-lato="esito"] .ico { background: rgba(14,124,82,.09); color: var(--verde); }
.nodi-schema b { display: block; font-size: 13.5px; font-weight: var(--forte); line-height: 1.3; }
.nodi-schema small { display: block; font-size: 11.5px; line-height: 1.35; color: var(--inchiostro-3); margin-top: 1px; }

.cuore-schema { display: grid; gap: 16px; align-content: center; }
.cuore {
  position: relative; padding: 26px 24px; border-radius: 18px; color: #fff; overflow: hidden;
  background:
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.3px) 0 0 / 12px 12px,
    linear-gradient(155deg, #5B1FD6, var(--marchio) 50%, #350C8C);
  box-shadow: 0 30px 60px -30px rgba(47,10,130,.6);
}
.cuore .testa-schema { color: #CFC0FF; }
.titolo-cuore { display: block; font-weight: 400; font-size: clamp(21px, 2.1vw, 26px); letter-spacing: -.02em; line-height: 1.1; }
.cuore p { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.78); }
.nod-cuore { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nod-cuore li {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  transition: background .4s, border-color .4s;
}
.nod-cuore li i { width: 6px; height: 6px; border-radius: 50%; background: #6EE7B7; box-shadow: 0 0 0 3px rgba(110,231,183,.18); }
.nod-cuore li.acceso { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }
.biglietto-schema.bs1 { margin-left: 16%; transform: rotate(.6deg); }
.biglietto-schema.bs2 { margin-right: 16%; transform: rotate(-.6deg); }

.studio-schema {
  justify-self: center; width: min(560px, 100%); text-align: center;
  padding: 16px 22px; border-radius: 14px; color: #EAF0FF;
  background: linear-gradient(180deg, var(--blu-2), var(--blu));
  box-shadow: 0 24px 50px -30px rgba(11,31,69,.7);
}
.studio-schema .testa-schema { color: var(--blu-chiaro); margin-bottom: 6px; }
.studio-schema p { font-family: var(--serif); font-size: 17px; line-height: 1.4; }
.studio-schema b { font-weight: 600; color: #fff; }

/* ── Schermi medi e stretti ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .apertura { padding: 104px 0 56px; }
  .apertura-griglia { grid-template-columns: 1fr; gap: 20px; }
  .apertura h1 { max-width: 13ch; font-size: clamp(2.3rem, 6.4vw, 3.2rem); }
  .biglietto.b1 { left: 0; bottom: -6%; }
  .tacca.t1, .tacca.t2 { top: 74px; }
  .tacca { display: none; }

  .schema { grid-template-columns: 1fr; grid-template-areas: "fonti" "cuore" "esiti" "studio"; gap: 58px; }
  .fili { display: none; }
  .biglietto-schema.bs1 { margin-left: 10%; } .biglietto-schema.bs2 { margin-right: 10%; }
  /* Senza i fili, il flusso lo dice una linea verticale fra i blocchi. */
  .schema > .cuore-schema::before, .schema > .col-esiti::before, .schema > .studio-schema::before {
    content: ''; position: absolute; left: 50%; top: -48px; width: 2px; height: 38px; margin-left: -1px;
    background: repeating-linear-gradient(180deg, var(--marchio) 0 4px, transparent 4px 8px);
    opacity: .45; animation: scende 1.2s linear infinite;
  }
  .schema > .studio-schema::before { background: repeating-linear-gradient(180deg, var(--blu) 0 4px, transparent 4px 8px); }
  @keyframes scende { to { background-position: 0 8px; } }
}

@media (max-width: 560px) {
  .dentro { padding: 0 16px; }
  .sopratitolo { font-size: 10px; margin-bottom: 18px; }
  .apertura h1 { font-size: clamp(2.15rem, 10.2vw, 2.7rem); max-width: none; }
  .apertura .sottotitolo { margin-top: 18px; font-size: 1.08rem; }
  .apertura .guida { font-size: 15px; }
  .biglietto { width: 190px; padding: 10px 12px; }
  .biglietto small { font-size: 11px; }
  .biglietto.b1 { left: 0; bottom: -5%; }
  .testata .bottone { padding: 9px 14px; font-size: 13px; }
  .marchio .parola { width: 128px; }
  .scheda { padding: 24px 20px; }
  .passi .passo-n { top: 22px; right: 20px; }

  .schema { padding: 16px; border-radius: 18px; }
  .col-fonti .nodi-schema { grid-template-columns: 1fr 1fr; gap: 7px; }
  .col-fonti .nodi-schema li { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
  .col-fonti .nodi-schema small { display: none; }
  .cuore { padding: 22px 18px; }
  .studio-schema p { font-size: 15.5px; }
  .capo { margin-bottom: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .fili .corrente { display: none; }
}


/* ── La conversazione nell'apertura ──────────────────────────────────────
   Al posto del quaderno: non una metafora, la cosa che il cliente vede.
   I messaggi entrano uno alla volta; il copione li rimette in fila e
   ricomincia. Senza copione, o con il movimento ridotto, sono tutti lì. */

@keyframes galleggia { 50% { translate: 0 -8px; } }

.conversazione-scena { position: relative; display: grid; place-items: center; padding: 10px 0 40px; }
.conversazione {
  position: relative; width: min(420px, 100%);
  border-radius: 18px; background: #fff; border: 1px solid var(--riga);
  box-shadow: 0 50px 90px -46px rgba(47,10,130,.45), 0 14px 30px -18px rgba(13,18,38,.25);
  overflow: hidden;
}
.testa-conv {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--riga); background: var(--carta);
}
.canale { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--inchiostro); }
.messaggi { display: grid; gap: 14px; padding: 18px 18px 20px; min-height: 318px; align-content: start; }

.msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 11px; align-items: start; }
.msg .avatar {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: var(--forte); letter-spacing: .02em;
}
.msg.nod .avatar { background: linear-gradient(155deg, #5B1FD6, var(--marchio)); }
.msg.nod .avatar i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid #E6DDFF; }
.msg.umano .avatar { background: #FDE7D9; color: #9A3B12; }
.msg b { display: block; font-size: 12.5px; font-weight: var(--forte); line-height: 1.2; }
.msg.nod b { color: var(--marchio); }
.msg p { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--inchiostro); }
.allegati { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.allegati em {
  font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--inchiostro-2);
  padding: 5px 8px 5px 22px; border-radius: 7px; border: 1px solid var(--riga); background: var(--carta);
  position: relative;
}
.allegati em::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 8px; height: 10px; margin-top: -5px;
  border-radius: 1.5px; background: #E5484D; opacity: .85;
}
.esito-conv {
  display: flex; align-items: center; gap: 9px; margin-top: 2px; padding: 10px 12px; border-radius: 10px;
  background: rgba(14,124,82,.08); border: 1px solid rgba(14,124,82,.22);
  font-size: 12.5px; font-weight: var(--medio); color: var(--verde);
}
.esito-conv i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 4px rgba(14,124,82,.15); animation: respiro 2.4s ease-in-out infinite; }

.sta-scrivendo { display: none; gap: 4px; padding: 10px 0 0 41px; }
.sta-scrivendo span { width: 6px; height: 6px; border-radius: 50%; background: var(--marchio-chiaro); animation: puntino 1s ease-in-out infinite; }
.sta-scrivendo span:nth-child(2) { animation-delay: .15s; } .sta-scrivendo span:nth-child(3) { animation-delay: .3s; }
@keyframes puntino { 50% { transform: translateY(-3px); opacity: .5; } }

/* Il copione nasconde i passi non ancora arrivati. */
.conversazione.in-scena [data-passo] { display: none; }
.conversazione.in-scena [data-passo].arrivato { display: grid; animation: arriva .5s var(--uscita) both; }
.conversazione.in-scena .esito-conv.arrivato { display: flex; }
.conversazione.in-scena .sta-scrivendo.attivo { display: flex; }
@keyframes arriva { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .conversazione-scena { margin-top: 26px; width: 100%; max-width: 480px; justify-self: center; }
  .biglietto.b1 { display: none; }
}
@media (max-width: 560px) {
  .messaggi { min-height: 0; padding: 16px 14px 18px; }
  .msg p { font-size: 13.5px; }
  .biglietto.b1 { display: none; }
}

/* L'apertura asciugata: titolo, una riga di prodotto, una di studio. */
.apertura .sottotitolo { max-width: 34ch; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.apertura .contro-claim { margin-top: 8px; }
.apertura .gruppo-bottoni { margin-top: 34px; }

/* ═══════════════════════════════════════════════════════════════════════
   25 settembre 2026 — i numeri, il menu su telefono, le rifiniture
   ═══════════════════════════════════════════════════════════════════════ */

/* I numeri in fondo all'apertura: tre cifre, una riga di filetti. */
.numeri-apertura {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--riga); background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
}
.numeri-apertura > div {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  padding: 20px 16px; border-left: 1px solid var(--riga);
}
.numeri-apertura > div:first-child { border-left: 0; }
.numeri-apertura b {
  font-family: var(--titoli); font-weight: 300; font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -.03em; line-height: 1; color: var(--marchio); font-variant-numeric: tabular-nums;
}
.numeri-apertura span { font-size: 13.5px; color: var(--inchiostro-2); }
.apertura { padding-bottom: 130px; }
.apertura .tacca.t3, .apertura .tacca.t4 { bottom: 96px; }

/* La striscia delle norme, senza più la legenda del verde. */
.striscia .titolino { letter-spacing: .14em; }

/* Le garanzie non stanno più sotto il pannello: riprendono il respiro. */
.garanzie-sez { padding-top: clamp(64px, 9vw, 110px); }

/* Il riquadro dell'ultimo atto è un flusso: i passi hanno un numero. */
.esito-scena ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: passo; }
.esito-scena ol li { counter-increment: passo; position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.38; color: var(--inchiostro); }
.esito-scena ol li::before {
  content: counter(passo); position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  background: var(--verde); color: #fff; box-shadow: none;
}
.esito-scena { width: min(320px, 34vw); }

/* Il menu su telefono: due righe che diventano una croce. */
.apri-menu {
  display: none; width: 40px; height: 40px; border-radius: 12px; cursor: pointer; flex: none;
  border: 1px solid var(--riga-2); background: var(--bianco); padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.apri-menu i { display: block; width: 16px; height: 1.6px; background: var(--inchiostro); border-radius: 2px; transition: transform .3s var(--uscita); }
.menu-aperto .apri-menu i:first-child { transform: translateY(3.8px) rotate(45deg); }
.menu-aperto .apri-menu i:last-child { transform: translateY(-3.8px) rotate(-45deg); }

@media (max-width: 900px) {
  .apri-menu { display: inline-flex; }
  .testata > .bottone { margin-left: auto; }
  .testata { gap: 10px; }
  .menu-aperto .testata { background: rgba(255,255,255,.97); border-bottom-color: var(--riga); }
  .menu-aperto .menu {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(255,255,255,.98); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--riga); padding: 6px 16px 14px;
    box-shadow: 0 30px 40px -30px rgba(13,18,38,.35);
  }
  .menu-aperto .menu a { padding: 14px 4px; font-size: 16px; color: var(--inchiostro); border-bottom: 1px solid var(--riga); }
  .menu-aperto .menu a:last-child { border-bottom: 0; }

  .apertura { padding-bottom: 150px; }
  .numeri-apertura > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 14px; }
}
@media (max-width: 560px) {
  .numeri-apertura b { font-size: 24px; }
  .numeri-apertura span { font-size: 11.5px; line-height: 1.3; }
  .numeri-apertura > div { padding: 14px 12px; }
}

/* Il sottotitolo su due righe, senza parole orfane. */
.apertura .sottotitolo { max-width: 40ch; }
.apertura h1 { max-width: 17ch; }