/* ==========================================================================
   QUADERNO v3 — token di identità per emanueleguarino.me
   Come la v2 (scala tipografica modulare, verde petrolio, un solo livello di
   elevazione), più i token di COMPOSIZIONE: le larghezze di banda e di colonna.

   UNA SOLA TAVOLOZZA, SCURA. Fino al 02/09 la base era chiara e lo scuro
   arrivava da `prefers-color-scheme`: due tavolozze, e quella che vedeva
   metà dei visitatori non l'aveva mai guardata nessuno — trentotto testi
   illeggibili in una sezione sola. Adesso il tema è uno, e non c'è una
   seconda verità da tenere allineata.
   ========================================================================== */

:root {
  color-scheme: dark;
  /* ── superficie: quattro livelli, un solo salto di elevazione ─────────── */
  --eg-carta:          oklch(0.160 0.010 255);   /* pagina */
  --eg-carta-alt:      oklch(0.205 0.012 255);             /* scheda, sale di un livello */
  --eg-carta-3:        oklch(0.235 0.013 255);   /* incasso: banda, riga aperta */
  --eg-carta-scura:    oklch(0.115 0.010 255);   /* banda invertita */
  --eg-inchiostro-su-scura: oklch(0.955 0.003 255);

  --eg-inchiostro:     oklch(0.955 0.003 255);
  --eg-inchiostro-2:   oklch(0.750 0.008 255);
  --eg-inchiostro-3:   oklch(0.640 0.010 255);

  --eg-linea:          oklch(0.285 0.012 255);
  --eg-linea-forte:    oklch(0.420 0.014 255);
  --eg-linea-scura:    oklch(0.245 0.012 255);

  /* ── accento: verde petrolio. Un fatto misurato, o l’azione principale ── */
  --eg-accento:        oklch(0.755 0.090 190);
  --eg-accento-forte:  oklch(0.830 0.080 190);
  --eg-accento-tenue:  oklch(0.262 0.038 190);
  --eg-accento-linea:  oklch(0.360 0.050 190);
  --eg-accento-testo:  oklch(0.160 0.020 190);
  --eg-accento-chiaro: oklch(0.780 0.095 190);   /* accento sulla banda scura */

/* ── sulla banda scura: la tavolozza è fissa perché la banda è fissa ──── */
  --eg-su-scura-2:   oklch(0.840 0.008 255);   /* testo secondario */
  --eg-su-scura-3:   oklch(0.800 0.008 255);   /* didascalie, coda dei titoli */
  --eg-linea-su-scura: oklch(0.360 0.014 255);
  --eg-accento-su-chiaro: oklch(0.160 0.020 190);  /* testo sopra --eg-accento-chiaro */

  /* ── curve: una per comportamento, non una per tutto ─────────────────── */
  --eg-curva-arrivo:  cubic-bezier(0.16, 1, 0.30, 1);   /* ciò che arriva rallenta */
  --eg-curva-uscita:  cubic-bezier(0.70, 0, 0.84, 0);   /* ciò che se ne va accelera */
  --eg-curva-luce:    cubic-bezier(0.25, 0.6, 0.35, 1); /* un'accensione non ha inerzia */

  --eg-fuoco:          oklch(0.755 0.090 190);
  --eg-disabilitato:   oklch(0.300 0.010 255);

  /* ── caratteri: solo di sistema ───────────────────────────────────────── */
  /* A1 · Prima la pila cominciava con "Helvetica Neue", che su macOS è
     installata: vinceva sempre, e `system-ui` non veniva mai raggiunto. Su un
     Mac si vedeva Helvetica Neue — un carattere degli anni Ottanta — e mai il
     carattere di sistema. Adesso il sistema viene per primo su ogni
     piattaforma, e Helvetica resta come ripiego dove non c'è altro. */
  --eg-font-titolo: -apple-system, BlinkMacSystemFont, "SF Pro Display",
                    ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI",
                    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --eg-font-testo:  -apple-system, BlinkMacSystemFont, "SF Pro Text",
                    ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI",
                    Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── scala tipografica, ragione 1,25 su base 16 px ────────────────────── */
  --eg-t-00: 11px;  --eg-t-0: 12.5px; --eg-t-1: 14px;  --eg-t-2: 16px;
  --eg-t-3:  18px;  --eg-t-4:  21px;  --eg-t-5:  clamp(18px, 2.2vw, 27px);
  --eg-t-6:  clamp(22px, 2.6vw, 34px);
  --eg-t-7:  clamp(24px, 3.2vw, 42px);
  --eg-t-8:  clamp(26px, 4.4vw, 62px);   /* titoli di banda */
  --eg-t-9:  clamp(30px, 5.4vw, 78px);   /* titoli di sezione */
  --eg-t-10: clamp(34px, 9.2vw, 118px);  /* apertura */

  /* le cifre grandi: tre gradi, scelti in base a quante cifre contengono */
  --eg-t-cifra:   clamp(38px, 5.4vw, 72px);
  --eg-t-cifra-m: clamp(28px, 4.4vw, 54px);
  --eg-t-cifra-s: clamp(26px, 3.2vw, 42px);
  --eg-t-prezzo:  clamp(26px, 3vw, 38px);

  --eg-lh-serrata: 0.92;
  --eg-lh-titolo:  1.1;
  --eg-lh-medio:   1.32;
  --eg-lh-testo:   1.55;

  --eg-tr-titolone: -0.038em;
  --eg-tr-titolo:   -0.022em;
  --eg-tr-testo:    -0.006em;
  --eg-tr-etichetta: 0.085em;

  /* ── spaziatura, base 4 px ────────────────────────────────────────────── */
  --eg-s-1: 2px;  --eg-s-2: 4px;  --eg-s-3: 8px;  --eg-s-4: 12px;
  --eg-s-5: 16px; --eg-s-6: 24px; --eg-s-7: 32px; --eg-s-8: 48px;
  --eg-s-9: 64px; --eg-s-10: 96px; --eg-s-11: 128px;

  /* ── composizione: ogni sezione sceglie la sua larghezza ──────────────── */
  --eg-w-piena:   1240px;   /* apertura, bande di dati */
  --eg-w-larga:   1120px;   /* le prove, il problema, il listino */
  --eg-w-registro: 860px;   /* il registro: testo con la numerazione grande a lato */
  --eg-w-num:     clamp(52px, 11%, 108px);   /* la colonna del numero di voce:
        usata due volte — dalla griglia del titolo e dal rientro del corpo.
        Deve essere un token, o le due si scollano. */
  --eg-w-ritratto: clamp(200px, 22%, 292px); /* il ritratto in «Chi sono» */
  /* La soglia sotto cui la barra si posa in basso è 720px, scritta letterale
     in build/pagina.css: una @media non può leggere var(). Non c'è un token,
     per non tenere due verità sulla stessa misura. */

  /* A4 · Raggi più generosi e un raggio «pieno» per i pulsanti. A 8px e 5px
     gli angoli si leggono come una smussatura tecnica; a 14px come materiale.
     Il pieno è la pastiglia: un pulsante non ha spigoli. */
  --eg-raggio: 14px; --eg-raggio-s: 9px; --eg-raggio-pieno: 999px;

  /* ── movimento: solo cambi di stato e una rivelazione, una volta sola ─── */
  --eg-tempo:   160ms;
  --eg-tempo-s: 120ms;
  --eg-tempo-riv: 200ms;
  --eg-curva:   cubic-bezier(0.2, 0, 0, 1);
}



/* ── I passi grandi si accorciano sul telefono ────────────────────────────
   I tre valori più alti della scala — 64, 96, 128 — nascono da una pagina
   larga 1440. Su 390 restano identici: fra una sezione e l'altra si
   scorrono due schermate di vuoto, e la pagina intera arriva a
   trentaquattro. Qui si accorciano una volta sola, nella scala: ogni regola
   che li usa segue da sé, e non c'è una seconda verità da tenere allineata.
   Sotto i 64px non si tocca niente: le distanze piccole servono a separare
   le cose dentro un blocco, e valgono uguali a ogni larghezza. ──────────── */
@media (max-width: 620px) {
  :root {
    --eg-s-9:  44px;
    --eg-s-10: 60px;
    --eg-s-11: 76px;
  }
}
/* ==========================================================================
   Regole della pagina — parte 2 di stile.css
   stile.css è GENERATO concatenando token/quaderno-v3.css e questo file:
   la fonte dei token resta una sola. Non modificare stile.css a mano.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--eg-carta); color-scheme: light dark; }
body {
  margin: 0; background: var(--eg-carta); color: var(--eg-inchiostro);
  font-family: var(--eg-font-testo); font-size: var(--eg-t-2);
  line-height: var(--eg-lh-testo); letter-spacing: var(--eg-tr-testo);
  -webkit-text-size-adjust: 100%; text-wrap: pretty;
  -webkit-font-smoothing: antialiased; font-kerning: normal;
  font-variant-numeric: tabular-nums;
  /* V10 · `overflow-x: hidden` è stato TOLTO. Oggi non serviva — misurato,
     scrollWidth = innerWidth a 390 e a 1440 — ma restava lì a nascondere il
     prossimo elemento troppo largo, che quindi non si sarebbe notato. Un
     tappeto sotto cui non si vede più niente non è una correzione: è la
     garanzia che il difetto successivo arrivi in produzione. */
}
img { max-width: 100%; }
a { color: var(--eg-accento); text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color var(--eg-tempo-s) var(--eg-curva); }
a:hover { color: var(--eg-inchiostro); }
h1, h2, h3 { font-family: var(--eg-font-titolo); text-wrap: balance; margin: 0; }
p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--eg-fuoco); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── misure e ritmo ─────────────────────────────────────────────────────── */
.piena { max-width: var(--eg-w-piena); margin: 0 auto; padding-inline: var(--eg-s-5); }
.larga { max-width: var(--eg-w-larga); margin: 0 auto; padding-inline: var(--eg-s-5); }
.registro-col { max-width: var(--eg-w-registro); margin: 0 auto; padding-inline: var(--eg-s-5); }
.sez { padding-block: var(--eg-s-11); }
.sez-media { padding-block: var(--eg-s-10); }
.filetto { border-top: 1px solid var(--eg-linea); }
section[id] { scroll-margin-top: 72px; }
.rientro { margin-left: 14%; }

/* ── superfici ──────────────────────────────────────────────────────────── */
.scura { background: var(--eg-carta-scura); color: var(--eg-inchiostro-su-scura); }
.scura a:not(.btn) { color: var(--eg-accento-chiaro); }
/* Superficie chiara annidata in una sezione scura: il modulo, il riquadro di
   conferma, e qualunque scheda futura. Senza questa riga i link ereditano il
   verde chiaro della banda scura e finiscono a 1,9:1 su bianco. */
.scura form a:not(.btn),
.scura .rialzata a:not(.btn),
.scura .ricevuto a:not(.btn) { color: var(--eg-accento); }
.scura .ricevuto a:not(.btn) { color: var(--eg-accento-su-chiaro); }
.accento-banda { background: var(--eg-accento); color: var(--eg-accento-testo); }
.accento-banda a:not(.btn) { color: var(--eg-accento-testo); }
.rialzata { background: var(--eg-carta-alt); }
.incassata { background: var(--eg-carta-3); }

/* ── tipografia ─────────────────────────────────────────────────────────── */
.occhiello { font-size: var(--eg-t-00); font-weight: 700; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-inchiostro-2); }
.occhiello-accento { color: var(--eg-accento); }
.scura .occhiello-accento, .scura .occhiello { color: var(--eg-accento-chiaro); }
.tenue { color: var(--eg-inchiostro-2); }
.scura .tenue { color: var(--eg-su-scura-2); }
.grigio { color: var(--eg-inchiostro-3); }
.guida { font-size: var(--eg-t-3); line-height: var(--eg-lh-medio); }
.piccolo { font-size: var(--eg-t-1); }
.micro { font-size: var(--eg-t-0); }

/* A2 · Sopra i 48px il peso SCENDE invece di salire. La massa del nero, a
   quel corpo, basta già: un 700 a 118px è un blocco, non un titolo. E la
   crenatura si stringe meno, perché il carattere di sistema ha già la sua —
   il -0.045em serviva a compensare Helvetica, che non ce l'ha. */
h1 { font-size: var(--eg-t-10); line-height: 0.92; font-weight: 600; letter-spacing: -0.028em; }
h1 span { display: block; }
h1 .r2 { margin-left: 5%; }
h1 .r3 { margin-left: 11%; color: var(--eg-accento-chiaro); }
.h-sez { font-size: var(--eg-t-9); font-weight: 620;
  letter-spacing: var(--eg-tr-titolone); line-height: 0.94; }
.h-sez-m { font-size: var(--eg-t-8); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: 0.98; }

/* ── pulsanti ───────────────────────────────────────────────────────────── */
/* `justify-self` e `align-self` non sono ridondanti con `inline-flex`:
   dentro una griglia il pulsante diventa un elemento di griglia e la cella
   lo tira per tutta la propria larghezza, qualunque cosa dica il suo
   `display`. Era così che «Parliamone» dentro «La prova» finiva a 308px su
   un telefono e a 150 due schede più in là: stessa parola, due pulsanti
   diversi, e nessuno dei due l'aveva deciso. Una pastiglia si misura sulla
   sua parola, sempre. */
.btn { justify-self: start; align-self: start;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding-inline: var(--eg-s-7); border: 0; border-radius: var(--eg-raggio-pieno);
  font-family: inherit; font-size: var(--eg-t-2); font-weight: 700; letter-spacing: var(--eg-tr-testo);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--eg-tempo) var(--eg-curva), transform var(--eg-tempo-s) var(--eg-curva); }
.btn:active { transform: translateY(1px); }
.btn-accento { background: var(--eg-accento); color: var(--eg-accento-testo); }
.btn-accento:hover { background: var(--eg-accento-forte); color: var(--eg-accento-testo); }
.btn-chiaro { background: var(--eg-accento-chiaro); color: var(--eg-accento-su-chiaro); }
.btn-chiaro:hover { background: oklch(0.86 0.09 190); color: var(--eg-accento-su-chiaro); }
/* ── I pulsanti che portano fuori lo dicono ──────────────────────────────
   Su quattordici pulsanti tre aprono una scheda nuova — le due demo e la
   prenotazione — e finora erano indistinguibili dagli undici che restano
   qui. La freccia obliqua è la convenzione che tutti hanno già letto mille
   volte, e dice una cosa VERA: stai per uscire.

   Si aggancia a `target="_blank"`, non a una classe: un pulsante nuovo che
   porta fuori la prende da sé, e uno che smette di portare fuori la perde.
   Una regola non si dimentica; una classe da ricordare sì.

   È una maschera e non un'immagine, così prende il colore del testo del
   pulsante — che è scuro sul verde chiaro e chiaro sul verde pieno. */
/* La videocamera sul pulsante della prenotazione. Sta PRIMA della parola —
   dice che cosa è — mentre la freccia sta dopo e dice dove porta: due segni
   con due mestieri diversi, non due decorazioni sullo stesso posto. Stessa
   tecnica della freccia: una maschera, così prende il colore del testo e
   non va disegnata due volte per i due fondi. */
.btn-video::before {
  content: ""; width: 1.05em; height: 1.05em; margin-right: 0.5em;
  flex: none; background: currentColor;
  -webkit-mask-image: var(--eg-videocamera); mask-image: var(--eg-videocamera);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }

.btn[target="_blank"]::after {
  content: ""; width: 0.72em; height: 0.72em; margin-left: 0.55em;
  flex: none; background: currentColor;
  -webkit-mask-image: var(--eg-freccia-fuori); mask-image: var(--eg-freccia-fuori);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
:root { --eg-videocamera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6.5h9.2c1.1 0 2 .9 2 2v7c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-7c0-1.1.9-2 2-2zm13.4 4.2 3.3-2.4c.6-.4 1.3 0 1.3.7v6c0 .7-.7 1.1-1.3.7l-3.3-2.4z'/%3E%3C/svg%3E");
        --eg-freccia-fuori: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3h7v7h-2V6.4L4.4 13 3 11.6 9.6 5H6z'/%3E%3C/svg%3E"); }

.btn:disabled { background: var(--eg-disabilitato); color: var(--eg-inchiostro-2);
  cursor: progress; transform: none; }
/* Il pulsante quieto ha la STESSA misura degli altri: la gerarchia la fa
   il colore, non l'altezza. Prima era 44px con il corpo a 12,5 — e in
   pagina esistevano due «Vai al registro» di due misure diverse, che è la
   cosa che si nota per prima e non si sa spiegare. */
.btn-quieto { min-height: 48px; padding-inline: var(--eg-s-7); font-size: var(--eg-t-2);
  font-weight: 600; background: var(--eg-carta); color: var(--eg-inchiostro);
  border: 1px solid var(--eg-linea-forte); }
.btn-quieto:hover { background: var(--eg-carta-3); border-color: var(--eg-inchiostro-3); }
.lnk-quieto { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--eg-t-1);
  font-weight: 500; color: var(--eg-su-scura-2); text-decoration: underline;
  text-decoration-color: var(--eg-linea-forte); text-underline-offset: 4px;
  transition: color var(--eg-tempo-s) var(--eg-curva), text-decoration-color var(--eg-tempo-s) var(--eg-curva); }
.lnk-quieto:hover { color: var(--eg-inchiostro-su-scura); text-decoration-color: var(--eg-accento-chiaro); }

/* ── barra: appare dopo l'apertura. In basso sul telefono. ──────────────── */
.barra { position: fixed; left: 0; right: 0; z-index: 15; height: 56px;
  background: var(--eg-carta-alt); top: 0; border-bottom: 1px solid var(--eg-linea);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--eg-tempo) var(--eg-curva), transform var(--eg-tempo) var(--eg-curva); }
.barra.visibile { opacity: 1; pointer-events: auto; transform: none; }
.barra-int { height: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: var(--eg-s-5); }
.barra nav { display: flex; align-items: center; gap: var(--eg-s-2);
  overflow-x: auto; min-width: 0; scrollbar-width: none; }
.barra nav::-webkit-scrollbar { display: none; }
/* V11 · A 390px entrano due voci su sei: le altre quattro esistono solo
   scorrendo la barra di lato, e nascondere la barra di scorrimento toglie
   l'unico indizio che ci sia altro. Una sfumatura sul bordo destro lo
   rimette — e sparisce da sola quando si è arrivati in fondo, perché la
   maschera segue lo scorrimento. */
@media (max-width: 720px) {
  .barra nav {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  /* Arrivati in fondo non c'è più niente da annunciare: la sfumatura si
     toglie. `scroll-driven` non serve — basta l'ultima voce che spinge. */
  .barra nav { scroll-padding-right: 28px; }
}
.barra nav a { display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--eg-s-4); border-radius: var(--eg-raggio-s); text-decoration: none;
  white-space: nowrap; font-size: var(--eg-t-0); font-weight: 500; color: var(--eg-inchiostro-2);
  transition: color var(--eg-tempo-s) var(--eg-curva), background-color var(--eg-tempo-s) var(--eg-curva); }
.barra nav a:hover { color: var(--eg-inchiostro); background: var(--eg-carta-3); }
.barra nav a[aria-current="true"] { font-weight: 700; color: var(--eg-accento);
  background: var(--eg-accento-tenue); }
/* I fianchi in proporzione al corpo. In pagina sono 32px su un testo di
   16 — il doppio. Qui erano 16 su 12,5, cioè 1,3 volte: la pastiglia
   sembrava schiacciata e il testo appiccicato ai bordi. Ora 24 su 14. */
.barra .btn { min-height: 44px; padding-inline: var(--eg-s-6);
  font-size: var(--eg-t-1); font-weight: 700; flex: none; }
/* 720 è letterale per forza: una @media non può leggere var(). Il token
   --eg-soglia-stretta è stato tolto dai token per non tenere due verità. */
@media (max-width: 720px) {
  .barra { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--eg-linea);
    padding-bottom: env(safe-area-inset-bottom); transform: translateY(8px); }
  /* V2 · La barra passa in basso ed è fissa: senza questo spazio il piè di
     pagina finisce SOTTO di lei e l'ultima riga del sito non si legge.
     56px è l'altezza della barra, la safe area è il bordo del telefono. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* Quei 72px servono a non far finire l'ancora sotto la barra IN ALTO.
     Quaggiù la barra è in basso, quindi diventano solo un buco sopra ogni
     sezione raggiunta da un collegamento interno. */
  section[id] { scroll-margin-top: 0; }
}

.salta { position: absolute; left: -9999px; }
/* V13 · È il primo elemento che riceve il fuoco da tastiera, e misurava
   25px: `min-height` su un `inline-flex` in posizione fissa non si applica
   come ci si aspetta, perché la scatola si dimensiona sul contenuto. `height`
   fissa lo risolve, e `line-height` tiene il testo centrato. */
.salta:focus { position: fixed; left: var(--eg-s-5); top: var(--eg-s-5); z-index: 20;
  display: inline-flex; align-items: center; height: 44px; min-height: 44px;
  line-height: 44px; padding-inline: 20px; font-weight: 600;
  background: var(--eg-accento); color: var(--eg-accento-testo);
  border-radius: var(--eg-raggio-s); text-decoration: none; }

/* ── rivelazione: miglioria, non requisito.
      Senza lo script la classe .js non c'è e tutto resta visibile. ──────── */
html.js .riv { opacity: 0; transform: translateY(8px);
  transition: opacity var(--eg-tempo-riv) var(--eg-curva), transform var(--eg-tempo-riv) var(--eg-curva); }
html.js .riv.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html.js .riv { opacity: 1; transform: none; }
}

/* ── apertura ───────────────────────────────────────────────────────────── */
.testa-apertura { display: flex; align-items: center; justify-content: space-between;
  gap: var(--eg-s-4); padding-block: var(--eg-s-5) var(--eg-s-8); }
.identita { display: flex; align-items: center; gap: var(--eg-s-4); min-width: 0; }
.identita img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none;
  -webkit-mask-image: url(assets/ritratto-tondo-maschera.png);
  mask-image: url(assets/ritratto-tondo-maschera.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.identita span { font-size: var(--eg-t-1); font-weight: 600; white-space: nowrap; }
.apertura-piede { display: flex; flex-wrap: wrap; gap: var(--eg-s-7) var(--eg-s-9);
  align-items: flex-end; justify-content: space-between; margin-top: var(--eg-s-8); }
.apertura-piede > p { flex: 1 1 340px; max-width: 38ch; font-size: var(--eg-t-4);
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo); color: var(--eg-su-scura-2); }
.apertura-piede > p strong { font-weight: 600; color: var(--eg-inchiostro-su-scura); }
.apertura-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-s-5); }
/* Sul telefono l'apertura ha 447 punti di budget e il sottotitolo occupa
   quattro righe: lo spazio si recupera dai margini, non dal carattere. */
@media (max-width: 560px) {
  .testa-apertura { padding-block: var(--eg-s-4) var(--eg-s-6); }
  .apertura-piede { margin-top: var(--eg-s-6); }
}

/* ── pastiglie ──────────────────────────────────────────────────────────── */
.pastiglie { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--eg-s-8) var(--eg-s-6); padding-block: var(--eg-s-8); }
/* Una griglia a due righe con la prima di altezza fissa: le tre cifre hanno
   corpi diversi — «15» è corto e grande, «4 ore al giorno» è lungo e piccolo
   — e allineate in alto facevano partire le tre descrizioni a tre quote
   diverse. La riga della cifra è alta uguale per tutte e la cifra ci si
   appoggia in fondo, così i numeri stanno sulla stessa linea di base e le
   descrizioni cominciano insieme. */
.pastiglie a { display: grid; grid-template-rows: var(--eg-h-cifra, 74px) auto;
  align-content: start; color: var(--eg-accento-testo); text-decoration: none;
  border-top: 1px solid var(--eg-accento-testo); padding-top: var(--eg-s-4);
  transition: opacity var(--eg-tempo) var(--eg-curva); }
.pastiglie .misura { align-self: end; }
.pastiglie a:hover { opacity: 0.72; color: var(--eg-accento-testo); }
/* Il numero e la sua unità sulla stessa riga di base: il numero grande,
   l'unità piccola accanto. Tutte e tre le cifre hanno lo stesso corpo perché
   adesso sono tutte corte — è il testo lungo che prima le faceva rimpicciolire
   una per una. */
.pastiglie .misura { display: flex; align-items: baseline; gap: var(--eg-s-3);
  flex-wrap: wrap; }
/* NIENTE `tabular-nums`: impone a ogni cifra la stessa larghezza, e l'«1»
   resta centrato nel suo spazio lasciando un vuoto a sinistra — «15» partiva
   visibilmente più a destra di «4» e «2». Serve a incolonnare numeri in una
   tabella; qui sono tre numeri isolati, e l'occhio vuole il bordo comune. */
.pastiglie .cifra { font-weight: 700; line-height: var(--eg-lh-serrata);
  letter-spacing: -0.045em; font-size: var(--eg-t-cifra); }
.pastiglie .unita { font-size: var(--eg-t-2); font-weight: 600;
  letter-spacing: var(--eg-tr-titolo); }
.pastiglie .sotto { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--eg-s-4); margin-top: var(--eg-s-4); }
.pastiglie .sotto span:first-child { font-size: var(--eg-t-1); font-weight: 500;
  line-height: 1.3; max-width: 22ch; }

/* ── il problema: nove righe, due colonne dove c'è spazio ───────────────── */
.tempo-occhiello { font-size: var(--eg-t-4); font-weight: 600; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); max-width: 34ch; margin-block: var(--eg-s-5) var(--eg-s-9); }
.problema { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--eg-s-5) var(--eg-s-8); }
.problema li { display: grid; grid-template-columns: 46px 1fr; gap: var(--eg-s-4);
  align-items: baseline; padding-top: var(--eg-s-5); border-top: 1px solid var(--eg-linea); }
.problema .n { font-size: var(--eg-t-5); font-weight: 700; line-height: 0.9;
  letter-spacing: -0.045em; color: var(--eg-accento); font-variant-numeric: tabular-nums; }
.problema p { font-size: var(--eg-t-4); font-weight: 600; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); max-width: 30ch; }

/* ── cosa faccio ────────────────────────────────────────────────────────── */
.offerta-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-6) var(--eg-s-9);
  align-items: flex-end; margin-bottom: var(--eg-s-8); }
.offerta-testa > div { flex: 2 1 340px; }
.offerta-testa > p { flex: 1 1 280px; line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 40ch; }
.su-misura { list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  background: var(--eg-linea); border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio);
  overflow: hidden; margin-bottom: var(--eg-s-9); }
.su-misura > li { display: flex; flex-direction: column; padding: var(--eg-s-7) var(--eg-s-6);
  background: var(--eg-carta-alt); transition: background-color var(--eg-tempo) var(--eg-curva); }
.su-misura > li:hover { background: var(--eg-carta); }
.su-misura h3 { font-size: var(--eg-t-4); font-weight: 700; letter-spacing: var(--eg-tr-titolo);
  line-height: var(--eg-lh-titolo); margin-block: var(--eg-s-4); }
.prezzo { font-size: var(--eg-t-prezzo); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: 1; color: var(--eg-accento);
  font-variant-numeric: tabular-nums; margin-bottom: var(--eg-s-6); }
.prezzo.nota { font-size: var(--eg-t-1); font-weight: 600; line-height: var(--eg-lh-medio);
  color: var(--eg-inchiostro-3); }
.su-misura .corpo { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); }
.su-misura .corpo + .corpo { margin-top: var(--eg-s-4); }

/* Premessa a sinistra, risposta a destra: la stessa forma della testa di
   sezione qui sopra, così i due cappelli si leggono come una cosa sola.

   Il titolo sta un gradino SOTTO il titolo di sezione (t-7 contro t-8) e uno
   SOPRA i titoli delle schede (t-6): introduce quelle, appartiene a questa.
   Prendere `h-sez-m` l'avrebbe messo alla pari della sezione che lo contiene. */
.partire-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-5) var(--eg-s-9);
  align-items: flex-end; margin-bottom: var(--eg-s-7); }
.partire-titolo { flex: 2 1 340px; font-size: var(--eg-t-7); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo);
  max-width: 26ch; }
/* La risposta non è una didascalia: inchiostro pieno, non il grigio dei
   secondari. In grigio piccolo l'argomento che regge il prezzo di tutta
   l'offerta si leggeva come una nota a margine. */
.partire-testa > p { flex: 1 1 300px; font-size: var(--eg-t-3);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro); max-width: 44ch; }
.scura .partire-testa > p { color: var(--eg-inchiostro-su-scura); }
.partire { display: grid; gap: var(--eg-s-3); margin-bottom: var(--eg-s-7); }

/* ── Le due che si prendono così come sono, in coppia ─────────────────────
   Stanno affiancate perché si comprano allo stesso modo; Bussola sta sotto
   da sola perché non si prende, si scrive. La disposizione è l'argomento:
   se stessero tutte e tre in fila, la pagina direbbe che sono la stessa
   cosa — ed era il difetto da cui siamo partiti.

   `minmax(0, 1fr)` e non `1fr`: la misura minima automatica di una griglia
   è il contenuto, e una riga lunga allargherebbe la colonna oltre metà. */
.partire-coppia { margin-bottom: var(--eg-s-5); }
@media (min-width: 62rem) {
  .partire-coppia { grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--eg-s-3); align-items: stretch; }
  /* In colonna stretta il fianco col prezzo non ci sta accanto al testo:
     scende sotto, e il `margin-top: auto` lo tiene appoggiato in fondo così
     i due prezzi restano alla stessa quota anche con testi di lunghezza
     diversa. È lo stesso mestiere del bottone dentro «La prova». */
  .partire-coppia > li { flex-direction: column; flex-wrap: nowrap;
    gap: var(--eg-s-5); }
  .partire-coppia .testo { flex: 0 1 auto; }
  .partire-coppia .lato { flex-direction: row; align-items: center;
    gap: var(--eg-s-5); margin-top: auto; }
}

/* Le due righe che aprono i gruppi: un filetto e una frase, non un titolo.
   Se fossero intestazioni sembrerebbero l'inizio di un'altra sezione.

   Il filetto prende tutta la larghezza — divide il blocco, non la frase —
   mentre la misura corta si dà al testo. Con `max-width` sulla riga intera
   il filetto si fermava a due terzi e sembrava tagliato. */
.partire-gruppo { margin-bottom: var(--eg-s-5); padding-top: var(--eg-s-5);
  border-top: 1px solid var(--eg-linea); color: var(--eg-inchiostro-2);
  line-height: var(--eg-lh-testo); }
.partire-gruppo::after { content: ""; }
.partire + .partire-gruppo { margin-top: var(--eg-s-6); }

/* La frase forte della scheda larga, nella colonna di destra. Sotto i 62rem
   torna in colonna sotto il testo: due colonne su un telefono non esistono. */
@media (min-width: 62rem) {
  .partire .frase-fianco { flex: 1 1 300px; min-width: 280px; align-self: center;
    margin-block: 0; max-width: 24ch; }
}

/* Il collegamento delle schede senza prezzo, in fondo al testo. */
.partire .azione { margin-top: var(--eg-s-6); }
/* Nella scheda larga il bottone è un fratello di testo e frase: prende la
   riga intera sotto le due colonne, e resta sotto il testo a sinistra. */
.partire .azione-piena { flex: 1 0 100%; margin-top: 0; }
.partire > li { display: flex; flex-wrap: wrap; gap: var(--eg-s-5) var(--eg-s-8);
  align-items: flex-start; padding: var(--eg-s-7); border-radius: var(--eg-raggio); }
.partire .testo { flex: 1 1 320px; min-width: 260px; }
.partire h3 { font-size: var(--eg-t-6); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo); max-width: 26ch;
  margin-block: var(--eg-s-4) var(--eg-s-5); }
.partire h3 .coda { font-weight: 500; color: var(--eg-su-scura-2); }
/* L'icona dell'applicazione dentro il titolo. `vertical-align` e non flex:
   il titolo va a capo su più righe e l'icona deve restare attaccata alla
   prima parola, non diventare una colonna a sé. Il ritocco verticale la
   allinea all'occhio, non alla base della riga. */
.ico-app { width: 40px; height: 40px; border-radius: 9px;
  vertical-align: -8px; margin-right: 4px; }
/* In «Le prove» il nome è un titolo di banda: l'icona cresce con lui. */
.prova h3 .ico-app { width: 44px; height: 44px; border-radius: 10px;
  vertical-align: -9px; margin-right: 8px; }
.partire .testo p { line-height: var(--eg-lh-testo); max-width: 58ch; }
.partire .testo p + p { margin-top: var(--eg-s-4); }
.partire .chiusura { color: var(--eg-accento-chiaro); }
/* La frase su cui si decide: staccata, e con più aria intorno delle altre. */
.partire .frase { margin-block: var(--eg-s-7); padding-left: var(--eg-s-5);
  border-left: 3px solid var(--eg-accento-chiaro);
  font-size: var(--eg-t-6); font-weight: 700; line-height: var(--eg-lh-titolo);
  letter-spacing: var(--eg-tr-titolo); color: var(--eg-inchiostro-su-scura); max-width: 30ch; }
.partire .testo p + .frase, .partire .frase + p { margin-top: var(--eg-s-7); }
.partire .lato { display: flex; flex-direction: column; gap: var(--eg-s-5);
  align-items: flex-start; flex: 0 1 auto; }
/* «aggiornamenti compresi» sotto la cifra: dice cosa si compra con quei
   soldi, e su una tantum è l'unica domanda che uno si fa subito dopo. */
.partire .lato .cifra-nota { font-size: var(--eg-t-1); color: var(--eg-su-scura-2);
  margin-top: calc(var(--eg-s-3) * -1); }
.partire .lato .cifra { font-size: var(--eg-t-cifra-s); font-weight: 700; line-height: 0.96;
  letter-spacing: var(--eg-tr-titolone); color: var(--eg-accento-chiaro);
  font-variant-numeric: tabular-nums; }
.rete { padding: var(--eg-s-6); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); background: var(--eg-carta-alt); }
.rete .titolo { font-size: var(--eg-t-3); font-weight: 700; letter-spacing: var(--eg-tr-titolo);
  line-height: var(--eg-lh-titolo); margin-bottom: var(--eg-s-3); }
.rete p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 76ch; }
.rete .invito { margin-top: var(--eg-s-4); color: var(--eg-inchiostro); font-weight: 600; }

/* ── le prove ───────────────────────────────────────────────────────────── */
.prove-testa { margin-bottom: var(--eg-s-9); }
.prove-testa h2 { margin-block: var(--eg-s-6); font-size: var(--eg-t-9);
  letter-spacing: var(--eg-tr-titolone); line-height: 0.94; max-width: 18ch; font-weight: 700; }
.prove-testa .rientro { font-size: var(--eg-t-4); line-height: var(--eg-lh-medio);
  color: var(--eg-inchiostro-2); max-width: 40ch; }
.prova { border-radius: var(--eg-raggio); overflow: hidden; margin-bottom: var(--eg-s-6); }
.prova.chiara { background: var(--eg-carta-alt); border: 1px solid var(--eg-linea); }
.prova-testa { display: flex; flex-wrap: wrap; gap: var(--eg-s-1) var(--eg-s-4);
  align-items: baseline; padding: var(--eg-s-7); }
/* Le tre schede hanno strutture diverse — Odile porta il titolo nella testa,
   Bussola e Atlante dentro il corpo — ma la taglia è una sola. */
.prova-testa h3, .prova-corpo h3 { font-size: var(--eg-t-7); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo); }
.prova-corpo h3 { margin-top: var(--eg-s-4); }
.prova-corpo .sotto-nome { margin-bottom: var(--eg-s-6); }
.prova-corpo .stato { display: inline-block; margin-bottom: var(--eg-s-6); }
.stato { font-size: var(--eg-t-00); font-weight: 600; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-accento); padding: var(--eg-s-2) var(--eg-s-4);
  border: 1px solid var(--eg-accento-linea); border-radius: var(--eg-raggio-s); }
.prova-testa .stato { margin-left: auto; }
.scura .stato { color: var(--eg-accento-chiaro); border-color: oklch(0.42 0.05 190); }
.differenza { padding: var(--eg-s-6) var(--eg-s-7); background: var(--eg-accento-tenue);
  border-block: 1px solid var(--eg-linea); }
.differenza p:last-child { font-size: var(--eg-t-5); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-inchiostro); max-width: 44ch; margin-top: var(--eg-s-3); }
.differenza-riq { padding: var(--eg-s-5) var(--eg-s-6); background: var(--eg-accento-tenue);
  border-left: 3px solid var(--eg-accento); border-radius: 0 var(--eg-raggio-s) var(--eg-raggio-s) 0;
  margin-bottom: var(--eg-s-6); }
.scura .differenza-riq { background: oklch(0.24 0.020 255); border-left-color: var(--eg-accento-chiaro); }
.differenza-riq p:last-child { font-size: var(--eg-t-3); font-weight: 600;
  line-height: var(--eg-lh-medio); color: var(--eg-inchiostro); max-width: 46ch; margin-top: var(--eg-s-2); }
.scura .differenza-riq p:last-child { color: var(--eg-inchiostro-su-scura); }
.prova-corpo { display: flex; flex-wrap: wrap; gap: var(--eg-s-7); padding: var(--eg-s-7); }
.prova-corpo > div { flex: 1 1 320px; min-width: 260px; }
.prova-corpo p { line-height: var(--eg-lh-testo); max-width: 52ch; }
.prova-corpo .did { font-size: var(--eg-t-3); line-height: var(--eg-lh-medio);
  margin-bottom: var(--eg-s-5); }
.prova-corpo .ris { font-size: var(--eg-t-1); color: var(--eg-inchiostro-2);
  margin-bottom: var(--eg-s-5); }
.scura .prova-corpo .ris { color: var(--eg-su-scura-2); }
/* La piega delle funzioni. Non riusa `.voce`: quello è un elenco di voci
   dentro un riquadro, questo è un singolo blocco che si apre in fondo a una
   colonna già letta. In comune tiene solo il «+» che ruota, perché è il
   segno che in questa pagina vuol dire «qui sotto c'è dell'altro» e averne
   due diversi costerebbe più di quanto valga la differenza. */
.piega-funzioni > summary { display: flex; align-items: baseline; gap: var(--eg-s-3);
  padding-block: var(--eg-s-4); border-top: 1px solid var(--eg-linea);
  font-size: var(--eg-t-1); font-weight: 600; list-style: none; cursor: pointer;
  color: var(--eg-inchiostro-2); transition: color var(--eg-tempo-s) var(--eg-curva); }
.piega-funzioni > summary::-webkit-details-marker { display: none; }
.piega-funzioni > summary::marker { content: ""; }
.piega-funzioni > summary:hover { color: var(--eg-inchiostro); }
.piega-funzioni > summary:focus-visible { outline-offset: 2px; }
.piega-funzioni .quante { font-size: var(--eg-t-00); font-weight: 500;
  color: var(--eg-inchiostro-3); font-variant-numeric: tabular-nums; }
/* Il «+» a destra: `margin-left: auto` invece di una colonna di griglia,
   perché l'etichetta cambia lunghezza da scheda a scheda. */
.piega-funzioni .piu { margin-left: auto; font-size: var(--eg-t-3); line-height: 1;
  color: var(--eg-inchiostro-3);
  transition: transform var(--eg-tempo) var(--eg-curva), color var(--eg-tempo-s) var(--eg-curva); }
.piega-funzioni[open] > summary { color: var(--eg-inchiostro); }
.piega-funzioni[open] .piu { transform: rotate(45deg); color: var(--eg-accento); }
.piega-funzioni > .funzioni { padding-block: var(--eg-s-4) var(--eg-s-5); }
.scura .piega-funzioni > summary { color: var(--eg-su-scura-2);
  border-top-color: var(--eg-linea-su-scura); }
.scura .piega-funzioni > summary:hover,
.scura .piega-funzioni[open] > summary { color: var(--eg-inchiostro-su-scura); }
.scura .piega-funzioni[open] .piu { color: var(--eg-accento-chiaro); }
.funzioni { display: grid; gap: var(--eg-s-2); }
.funzioni li { font-size: var(--eg-t-0); line-height: 1.45; color: var(--eg-inchiostro-2);
  padding-left: var(--eg-s-4); border-left: 2px solid var(--eg-linea); }
.scura .funzioni li { color: var(--eg-su-scura-2); border-left-color: var(--eg-linea-su-scura); }
.cornice { flex: 1 1 380px; min-width: 260px; margin: 0; }
.cornice .schermo { background: var(--eg-carta-3); border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); display: flex; flex-direction: column;
  overflow: hidden; aspect-ratio: 16 / 10; }
.cornice .schermo.schema { aspect-ratio: 4 / 3; background: transparent;
  border: 1px dashed oklch(0.44 0.014 255); align-items: center;
  justify-content: center; padding: var(--eg-s-6); }

/* ── l'anteprima nella cornice: immagine sotto, pulsante sopra ──────────────
   L'immagine si carica solo quando la sezione entra nello schermo. Se non
   arriva, restano il fondo, la nota e il pulsante: il blocco tiene comunque,
   perché quello che vende è il pulsante, non la figura. */
.cornice .schermo.viva { position: relative; aspect-ratio: var(--rapporto, 4 / 3);
  background: var(--eg-carta-scura); border: 1px solid var(--eg-linea-su-scura);
  align-items: stretch; justify-content: flex-start; overflow: hidden; }
.cornice .schermo.viva img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 0 0; }
/* La nota: si legge solo se l'immagine non arriva, perché sta sotto. */
.cornice .schermo.viva .nota-sotto { position: absolute; inset: 0; margin: auto;
  display: flex; align-items: center; justify-content: center; padding: var(--eg-s-6);
  font-size: var(--eg-t-0); line-height: 1.45; text-align: center;
  color: var(--eg-su-scura-3); }
/* Niente rapporto diverso sul telefono: allungare la cornice a 5/4 su
   un'immagine 4/3 la taglia a destra, e su una 1,92:1 la taglia molto.
   Il rapporto è quello dell'immagine, a ogni larghezza. */
.cornice .barra-finta { display: flex; align-items: center; gap: var(--eg-s-3);
  padding: var(--eg-s-3) var(--eg-s-4); border-bottom: 1px solid var(--eg-linea); }
.cornice .barra-finta i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--eg-linea-forte); flex: none; }
.cornice .barra-finta span { font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-left: var(--eg-s-2); }
.cornice .attesa { flex: 1; display: flex; align-items: center;
  justify-content: center; padding: var(--eg-s-5); }
.cornice .attesa span, .cornice .schermo.schema span { font-size: var(--eg-t-0);
  color: var(--eg-inchiostro-3); text-align: center; max-width: 32ch; line-height: 1.45; }
.scura .cornice .schermo.schema span { color: var(--eg-su-scura-3); }
.cornice figcaption { margin-top: var(--eg-s-3); font-size: var(--eg-t-00);
  color: var(--eg-inchiostro-2); }
.scura .cornice figcaption { color: var(--eg-su-scura-3); }
.prove-chiusura { font-size: var(--eg-t-8); font-weight: 700; line-height: 1.02;
  letter-spacing: var(--eg-tr-titolone); max-width: 30ch; }

/* ══ Bussola ═══════════════════════════════════════════════════════════════
   Nessun cruscotto, nessuna schermata. Le due interazioni — il settore e il
   regolatore — sono radio più :has(), quindi funzionano senza JavaScript:
   qui non c'è niente da migliorare a esecuzione, e non deve esserci.
   ═════════════════════════════════════════════════════════════════════════ */

.bussola-attacco { padding-block: var(--eg-s-11) var(--eg-s-10); }
.bussola-attacco h2 { font-size: var(--eg-t-10); line-height: var(--eg-lh-serrata); font-weight: 600;
  letter-spacing: -0.045em; font-weight: 700; }
.bussola-attacco .sotto { font-size: var(--eg-t-6); font-weight: 700;
  line-height: var(--eg-lh-titolo); letter-spacing: var(--eg-tr-titolone);
  color: var(--eg-accento-chiaro); max-width: 30ch; margin-top: var(--eg-s-6); }
.bussola-attacco .limite { display: grid; gap: var(--eg-s-4); margin-top: var(--eg-s-8);
  padding-left: var(--eg-s-6); border-left: 3px solid var(--eg-linea-su-scura); max-width: 54ch; }
.bussola-attacco .limite p { font-size: var(--eg-t-3); line-height: var(--eg-lh-medio);
  color: var(--eg-su-scura-2); }
.bussola-attacco .azione { margin-top: var(--eg-s-8); }

/* ── i tre strati: uno schema statico, nessun movimento ─────────────────── */
/* Una pila, non tre fratelli: Sopra in cima, Sotto in fondo, e la base è la
   più larga e la più pesante perché è quella che regge.

   L'ordine sta nel MARKUP e non in un `column-reverse`. Prima il documento
   diceva Sotto → Sopra e il disegno lo rovesciava: chi legge con gli occhi
   riceveva una sequenza, chi legge con un lettore di schermo quella opposta
   (WCAG 1.3.2). Un rovesciamento visivo è una cosa che si vede solo se si
   vede — cioè la definizione di una barriera. */
.strati { display: flex; flex-direction: column; gap: var(--eg-s-2);
  margin-top: var(--eg-s-8); }
.strato { display: flex; flex-wrap: wrap; gap: var(--eg-s-4) var(--eg-s-7);
  padding: var(--eg-s-6); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); background: var(--eg-carta-alt); }
/* Sopra: il più stretto e il più leggero. In mezzo: intermedio.
   Sotto: piena larghezza, superficie diversa, bordo in accento. */
.strato.sopra { margin-inline: 11% 0; }
.strato.mezzo { margin-inline: 5.5% 0; }
.strato.sotto { background: var(--eg-carta-3); border-color: var(--eg-accento-linea);
  border-width: 1px 1px 3px; padding: var(--eg-s-7) var(--eg-s-6); }
.strato.sotto .posto { color: var(--eg-accento); }
.strato.sotto h3 { font-size: var(--eg-t-7); }
.strato.sopra h3 { font-size: var(--eg-t-5); }
@media (max-width: 620px) {
  .strato.sopra { margin-inline: var(--eg-s-6) 0; }
  .strato.mezzo { margin-inline: var(--eg-s-3) 0; }
}
.strato .posto { flex: 0 0 var(--eg-w-num); font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); padding-top: var(--eg-s-2); }
.strato .corpo { flex: 1 1 320px; min-width: 240px; }
.strato h3 { font-size: var(--eg-t-6); font-weight: 700; letter-spacing: var(--eg-tr-titolone);
  line-height: var(--eg-lh-titolo); }
.strato .testo { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 62ch; margin-top: var(--eg-s-3); }
.strato .verdetto { margin-top: var(--eg-s-4); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); max-width: 62ch; }
.strato .verdetto b { color: var(--eg-accento); }
.legame { margin-top: var(--eg-s-7); padding-left: var(--eg-s-6);
  border-left: 3px solid var(--eg-accento); font-size: var(--eg-t-5); font-weight: 700;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo); max-width: 40ch; }

/* ══ il movimento ══════════════════════════════════════════════════════════
   Tutto in @keyframes, zero JavaScript: la sezione non ha copione e non lo
   acquista per un'animazione. Un'animazione CSS parte anche a copione morto —
   ed è la ragione per cui la pagina è piatta. Sotto prefers-reduced-motion
   ognuna mostra il proprio STATO FINALE, non il nulla.
   Il confine: si muove il meccanismo, non il prodotto. Nessun numero fuori
   dai due punti concessi — la conversazione e le due barre di Rese.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── A1 · l'archivio che si riempie ─────────────────────────────────────── */
@keyframes eg-converge {
  0%   { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.94);
         animation-timing-function: var(--eg-curva-arrivo); }
  14%  { opacity: 1; }
  62%  { opacity: 1; transform: translate(0, 0) scale(1);
         animation-timing-function: var(--eg-curva-uscita); }
  76%  { opacity: 0; transform: translate(0, 0) scale(0.82); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.82); }
}
@keyframes eg-raccoglie {
  0%, 52%  { border-color: var(--eg-linea-forte); }
  62%      { border-color: var(--eg-accento); }
  78%, 100% { border-color: var(--eg-linea-forte); }
}
.flusso { position: relative; height: 156px; margin-top: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); overflow: hidden; }
.flusso .og { position: absolute; top: 50%; left: 50%; margin: -14px 0 0 -46px;
  width: 92px; text-align: center; font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-2); padding: var(--eg-s-2) 0;
  border: 1px solid var(--eg-linea-forte); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta-alt); opacity: 0;
  animation: eg-converge 4.6s linear infinite; }
.flusso .og:nth-child(1) { --dx: -150px; --dy: -52px; animation-delay: 0s; }
.flusso .og:nth-child(2) { --dx:  158px; --dy: -40px; animation-delay: .21s; }
.flusso .og:nth-child(3) { --dx: -172px; --dy:  44px; animation-delay: .58s; }
.flusso .og:nth-child(4) { --dx:  146px; --dy:  56px; animation-delay: .74s; }
.flusso .og:nth-child(5) { --dx:  -96px; --dy: -74px; animation-delay: 1.19s; }
/* questo arriva chiaramente ultimo */
.flusso .og:nth-child(6) { --dx:  104px; --dy:  76px; animation-delay: 1.86s; }
.flusso .raccolta { position: absolute; top: 50%; left: 50%;
  width: 104px; height: 40px; margin: -20px 0 0 -52px;
  border: 2px dashed var(--eg-linea-forte); border-radius: var(--eg-raggio-s);
  animation: eg-raccoglie 4.6s var(--eg-curva-luce) infinite; }

/* ── I turni · «In mezzo» ────────────────────────────────────────────────
   Sei ruoli che si accendono a uno a uno. Stesso ciclo di A1 (4,6s) ma
   sfasato: letti in fila, i tre strati raccontano la catena — le cose
   arrivano, gli agenti lavorano, le sezioni compaiono. Chi guarda vede una
   cosa sola che scende, non tre decorazioni scollegate. ─────────────────── */
@keyframes eg-turno {
  0%, 6%    { opacity: .34; border-color: var(--eg-linea);
              background: var(--eg-carta); }
  13%, 27%  { opacity: 1;   border-color: var(--eg-accento-linea);
              background: var(--eg-accento-tenue); }
  36%, 100% { opacity: .34; border-color: var(--eg-linea);
              background: var(--eg-carta); }
}
.turni { display: flex; flex-wrap: wrap; gap: var(--eg-s-3);
  margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); }
.turni .ruolo { padding: var(--eg-s-2) var(--eg-s-4);
  font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-2);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); opacity: .34;
  animation: eg-turno 4.6s var(--eg-curva-luce) infinite; }
/* La luce passa da uno all'altro: i ritardi coprono poco più di un secondo,
   quindi il giro si legge come un passaggio e non come sei lampeggi. */
.turni .ruolo:nth-child(1) { animation-delay: .10s; }
.turni .ruolo:nth-child(2) { animation-delay: .32s; }
.turni .ruolo:nth-child(3) { animation-delay: .54s; }
.turni .ruolo:nth-child(4) { animation-delay: .76s; }
.turni .ruolo:nth-child(5) { animation-delay: .98s; }
.turni .ruolo:nth-child(6) { animation-delay: 1.20s; }

/* ── Le tessere · «Sopra» ────────────────────────────────────────────────
   Ogni sezione compare con il nome dell'agente che la porta. È la tesi della
   pagina resa visibile: non le scegli da un menù, te le portano loro. Parte
   più tardi degli altri due strati — è l'ultimo anello della catena. ────── */
@keyframes eg-tessera {
  0%, 14%   { opacity: 0; transform: translateY(9px) scale(.97); }
  28%, 88%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(5px) scale(.98); }
}
.tessere { display: flex; flex-wrap: wrap; gap: var(--eg-s-3);
  margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); }
.tessere .tessera { display: grid; gap: 1px; padding: var(--eg-s-3) var(--eg-s-4);
  border: 1px solid var(--eg-linea-forte); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta-alt); opacity: 0;
  animation: eg-tessera 4.6s var(--eg-curva-arrivo) infinite; }
.tessere .tessera b { font-size: var(--eg-t-0); font-weight: 700;
  color: var(--eg-inchiostro); }
.tessere .tessera i { font-size: var(--eg-t-00); font-style: normal;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-accento); }
.tessere .tessera:nth-child(1) { animation-delay: 1.30s; }
.tessere .tessera:nth-child(2) { animation-delay: 1.58s; }
.tessere .tessera:nth-child(3) { animation-delay: 1.86s; }
.tessere .tessera:nth-child(4) { animation-delay: 2.14s; }

/* ── A2 · la conversazione. Un ciclo solo da 13s: i figli si azzerano da
      soli a ogni giro, e la velatura copre il momento del ritorno. ─────── */
@keyframes eg-batte  { 0%, 3%  { clip-path: inset(0 100% 0 0); }
                       14%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes eg-batte2 { 0%, 15% { clip-path: inset(0 100% 0 0); }
                       27%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes eg-attesa { 0%, 27% { opacity: 0; } 30%, 38% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes eg-risposta1 { 0%, 40% { opacity: 0; transform: translateY(5px); }
  46%, 100% { opacity: 1; transform: none; } }
@keyframes eg-risposta2 { 0%, 47% { opacity: 0; transform: translateY(5px); }
  53%, 100% { opacity: 1; transform: none; } }
@keyframes eg-ciclo { 0%, 92% { opacity: 1; animation-timing-function: var(--eg-curva-uscita); }
  96% { opacity: 0; animation-timing-function: var(--eg-curva-arrivo); }
  99%, 100% { opacity: 1; } }

.conversa { margin-top: var(--eg-s-7); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); background: var(--eg-carta);
  overflow: hidden; animation: eg-ciclo 13s linear infinite; }

/* L'intestazione: il nome dell'agente, non quello dell'applicazione. È il
   punto della sezione — gli agenti sono ruoli con un nome e un mestiere. */
.conversa .capo { display: flex; align-items: center; gap: var(--eg-s-4);
  padding: var(--eg-s-5) var(--eg-s-6); border-bottom: 1px solid var(--eg-linea); }
.conversa .capo .spia { position: relative; flex: none; width: 26px; height: 26px;
  border-radius: 50%; background: var(--eg-accento-tenue);
  border: 1px solid var(--eg-accento-linea); }
.conversa .capo .spia::after { content: ""; position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%; background: var(--eg-accento); }
.conversa .capo .nome { font-size: var(--eg-t-2); font-weight: 700;
  letter-spacing: var(--eg-tr-titolo); color: var(--eg-inchiostro); }

/* V14 · I puntini e la risposta stanno nella STESSA riga della griglia,
   quindi si sovrappongono invece di sommarsi: prima i puntini, a opacità
   zero per quasi tutto il ciclo, tenevano occupato uno spazio che restava
   vuoto in mezzo allo scambio. In ogni istante se ne vede uno solo. */
.conversa .scambio { display: grid; grid-template-columns: minmax(0, 1fr);
  padding: var(--eg-s-6); }
/* La COLONNA va detta insieme alla riga. Senza `grid-column`, due elementi
   messi sulla stessa riga vengono collocati in due colonne diverse: la
   griglia se ne inventa una seconda, e da lì in poi tutte le larghezze
   dentro la chat sono sbagliate. Sono nella stessa cella apposta — si
   sovrappongono, e in ogni istante se ne vede uno solo. */
.conversa .dom { grid-column: 1; grid-row: 1; }
.conversa .sta-scrivendo { grid-column: 1; grid-row: 2; align-self: start; }
.conversa .risp { grid-column: 1; grid-row: 2; }

/* La domanda è una bolla allineata a destra: chi guarda sa già cosa vuol dire,
   e non serve più l'etichetta «Tu». Il testo dentro resta a sinistra.
   justify-items: start — senza, il grid item si stira sulla colonna e
   clip-path misurerebbe la colonna invece del testo. */
/* Una colonna flessibile, non una griglia: con `display: grid` e
   `width: max-content` la bolla si dimensionava sulla SECONDA riga e la prima
   — che è più lunga — usciva fuori di sessanta pixel. In colonna flessibile
   con `align-items: flex-start` ogni riga resta larga quanto il suo testo,
   che è ciò che serve al taglio della battitura, e il contenitore prende la
   larghezza della riga più lunga, che è ciò che serve alla bolla. */
/* NIENTE `max-width: 100%` qui. Su un elemento di griglia largo quanto il
   suo contenuto quella percentuale è una dipendenza circolare — la larghezza
   dipende dal contenuto, il tetto dipende dalla larghezza — e Chrome la
   scioglie fermandosi a un valore più piccolo della riga più lunga: il testo
   usciva dalla bolla di sessanta pixel. Sul telefono, dove il rischio di
   sbordare è reale, le righe vanno semplicemente a capo (più sotto). */
.conversa .dom { display: grid; grid-template-columns: max-content;
  justify-items: start; gap: 2px; margin-left: auto;
  padding: var(--eg-s-4) var(--eg-s-5);
  border-radius: var(--eg-raggio) var(--eg-raggio) var(--eg-raggio-s) var(--eg-raggio);
  background: var(--eg-carta-alt); }
.conversa .dom .l { display: block; white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  font-size: var(--eg-t-2); font-weight: 600; line-height: var(--eg-lh-medio);
  color: var(--eg-inchiostro); }
.conversa .dom .l1 { animation: eg-batte 13s steps(34) infinite; }
/* La seconda riga porta il nome proprio: la sua finestra è più lunga a pari
   caratteri, quindi si scrive più piano. Nessuno batte a velocità costante. */
.conversa .dom .l2 { animation: eg-batte2 13s steps(26) infinite;
  border-right: 2px solid var(--eg-accento); }

/* I tre puntini: è il segno che tutti riconoscono per «sta scrivendo». */
@keyframes eg-puntino { 0%, 100% { opacity: .28; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); } }
.conversa .sta-scrivendo { display: flex; align-items: center; gap: var(--eg-s-3);
  margin-top: var(--eg-s-5); font-size: var(--eg-t-1); font-style: italic;
  color: var(--eg-inchiostro-3); opacity: 0;
  animation: eg-attesa 13s linear infinite; }
.conversa .sta-scrivendo .punti { display: inline-flex; align-items: center; gap: 3px;
  flex: none; padding: 6px 9px; border-radius: 999px; background: var(--eg-carta-alt); }
.conversa .sta-scrivendo .punti i { display: block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--eg-accento);
  animation: eg-puntino 1.1s ease-in-out infinite; }
.conversa .sta-scrivendo .punti i:nth-child(2) { animation-delay: .16s; }
.conversa .sta-scrivendo .punti i:nth-child(3) { animation-delay: .32s; }

.conversa .risp { margin-top: var(--eg-s-5); width: max-content; max-width: min(88%, 62ch);
  padding: var(--eg-s-4) var(--eg-s-5);
  border-radius: var(--eg-raggio) var(--eg-raggio) var(--eg-raggio) var(--eg-raggio-s);
  background: var(--eg-carta-3); }
.conversa .risp .b1 { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); opacity: 0;
  animation: eg-risposta1 13s var(--eg-curva-arrivo) infinite; }
.conversa .risp .b2 { margin-top: var(--eg-s-4); padding-bottom: var(--eg-s-2);
  border-bottom: 2px solid var(--eg-accento-linea);
  display: inline-block; font-size: var(--eg-t-2); font-weight: 700;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-accento); max-width: 40ch; opacity: 0;
  animation: eg-risposta2 13s var(--eg-curva-arrivo) infinite; }

/* La barra di scrittura: non fa niente ed è muta agli assistivi. Serve solo a
   dire che è una chat e non un riquadro come gli altri. */
.conversa .scrittura { display: flex; align-items: center; gap: var(--eg-s-4);
  padding: var(--eg-s-5) var(--eg-s-6); border-top: 1px solid var(--eg-linea);
  background: var(--eg-carta-alt); }
.conversa .scrittura .campo { flex: 1; height: 36px; border-radius: 999px;
  border: 1px solid var(--eg-linea-forte); background: var(--eg-carta); }
.conversa .scrittura .invia { position: relative; flex: none; width: 32px; height: 32px;
  border-radius: 50%; background: var(--eg-accento-tenue);
  border: 1px solid var(--eg-accento-linea); }
.conversa .scrittura .invia::after { content: ""; position: absolute; top: 50%; left: 11px;
  margin-top: -5px; width: 0; height: 0; border-left: 8px solid var(--eg-accento);
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

.squadra > .nota { margin-top: var(--eg-s-4); font-size: var(--eg-t-0);
  color: var(--eg-inchiostro-3); }
.scura .squadra > .nota { color: var(--eg-su-scura-3); }

/* ── A3 · la notte ──────────────────────────────────────────────────────── */
@keyframes eg-riga { from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; } }
.notte { margin-top: var(--eg-s-7); padding: var(--eg-s-7);
  background: var(--eg-carta-scura); color: var(--eg-inchiostro-su-scura);
  border-radius: var(--eg-raggio); }
.notte .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-accento-chiaro); margin-bottom: var(--eg-s-5); }
/* Nella banda la notte non è più una didascalia in fondo: è il titolo.
   Era l'unica cosa della sezione che dimostra invece di descrivere, e
   stava 7,4 schermate sotto i comandi su telefono. */
.notte h3 { font-size: var(--eg-t-5); font-weight: 700;
  letter-spacing: var(--eg-tr-titolo); line-height: var(--eg-lh-titolo);
  color: var(--eg-inchiostro-su-scura); margin-bottom: var(--eg-s-6);
  max-width: 22ch; }
/* Il pallino di chi è in turno. Dice senza parole la cosa che il testo
   impiega una riga a dire: stanno lavorando mentre tu dormi. */
.notte .punto { flex: none; width: 8px; height: 8px;
  border-radius: var(--eg-raggio-pieno); background: var(--eg-accento-chiaro);
  animation: eg-pulsa 2.4s ease-in-out infinite; }
.notte li:nth-child(2) .punto { animation-delay: .3s; }
.notte li:nth-child(3) .punto { animation-delay: .6s; }
.notte li:nth-child(4) .punto { animation-delay: .9s; }
@keyframes eg-pulsa { 0%, 100% { opacity: 1 } 50% { opacity: .28 } }
/* La stessa sigla della scheda: alle 03:05 non lavora una funzione, lavora
   CAN — che è la scheda appena letta. È il solo aggancio fra i due blocchi. */
/* La notte è un riquadro scuro in ENTRAMBI i temi: qui la sigla torna al
   colore per fondo scuro, mentre sulle schede — che in tema chiaro sono
   chiare — resta quello che segue il tema. Stesso segno, due fondi. */
.notte .sigla { width: 34px; height: 34px; font-size: var(--eg-t-00);
  color: var(--eg-accento-chiaro); border-color: var(--eg-accento-linea); }
.notte ol { display: grid; gap: var(--eg-s-4); }
/* Griglia e non flex-wrap: con `wrap` le righe andavano a capo solo quando
   il testo non ci stava, cioè tre sì e una no — quattro righe che dovevano
   sembrare un turno sembravano un elenco sfilacciato. Le quattro colonne
   sono fisse, e a capo va solo il testo, sotto sé stesso. */
.notte li { display: grid; grid-template-columns: max-content 8px max-content minmax(0, 1fr);
  gap: var(--eg-s-4); align-items: center; opacity: 0;
  animation: eg-riga .5s var(--eg-curva-arrivo) forwards; }
/* Fra 02:00 e 03:05 c'è più di un'ora, fra 03:05 e 03:35 la metà: i ritardi
   rispettano quella sproporzione, così sembra che abbiano impiegato tempi
   diversi — che è la verità, ed è gratis. */
.notte li:nth-child(1) { animation-delay: .20s; }
.notte li:nth-child(2) { animation-delay: 1.67s; }
.notte li:nth-child(3) { animation-delay: 2.35s; }
.notte li:nth-child(4) { animation-delay: 3.59s; }
.notte .ora { font-size: var(--eg-t-3); font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-accento-chiaro); flex: 0 0 auto; }
.notte .cosa { font-size: var(--eg-t-1); line-height: var(--eg-lh-medio);
  color: var(--eg-su-scura-2); }
.notte .cosa b { font-weight: 600; color: var(--eg-inchiostro-su-scura); }
.notte .fine { margin-top: var(--eg-s-6); padding-top: var(--eg-s-5);
  border-top: 1px solid var(--eg-linea-su-scura); font-size: var(--eg-t-5);
  font-weight: 700; line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  max-width: 30ch; opacity: 0;
  animation: eg-riga .6s var(--eg-curva-arrivo) 4.3s forwards; }

/* ── A4 · il numero che si forma. Un dato solo: due grafici sarebbero un
      cruscotto, e la scala del disegno è la stessa che l'ha vietato. ───── */
@keyframes eg-barra {
  0%   { width: 0; animation-timing-function: var(--eg-curva-arrivo); }
  20%  { width: calc(var(--q) + 4px); animation-timing-function: var(--eg-curva-luce); }
  28%, 88% { width: var(--q); animation-timing-function: var(--eg-curva-uscita); }
  100% { width: 0; }
}
/* La versione a scena non si azzera: si assesta e resta. */
@keyframes eg-barra-scena {
  0%   { width: 0; animation-timing-function: var(--eg-curva-arrivo); }
  72%  { width: calc(var(--q) + 4px); animation-timing-function: var(--eg-curva-luce); }
  100% { width: var(--q); }
}
.grafico { margin-top: var(--eg-s-5); padding: var(--eg-s-5);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio-s);
  background: var(--eg-carta); }
.grafico .fila { display: grid; grid-template-columns: 1fr; gap: var(--eg-s-2); }
.grafico .fila + .fila { margin-top: var(--eg-s-4); }
.grafico .testa { display: flex; justify-content: space-between; gap: var(--eg-s-4);
  font-size: var(--eg-t-00); font-weight: 600; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-inchiostro-2); }
.grafico .testa .val { font-variant-numeric: tabular-nums; color: var(--eg-inchiostro);
  letter-spacing: 0; }
.grafico .pista { height: 10px; border-radius: 5px; background: var(--eg-carta-3);
  overflow: hidden; }
.grafico .riempi { display: block; height: 100%; width: 0; border-radius: 5px;
  background: var(--eg-linea-forte); animation: eg-barra 7s linear infinite; }
.grafico .fila.reale .testa .val { color: var(--eg-accento); }
.grafico .fila.reale .riempi { background: var(--eg-accento); animation-delay: .3s; }
.grafico .did { margin-top: var(--eg-s-4); font-size: var(--eg-t-1); font-weight: 600;
  line-height: var(--eg-lh-medio); color: var(--eg-inchiostro); }

/* ── il lampo sulle righe governate. La variante passa da display:none a
      block quando si sposta il comando: l'animazione riparte da sola, senza
      una riga di copione. Risolve il regolatore che governa quattrocento
      punti più in basso. ─────────────────────────────────────────────────── */
@keyframes eg-accende {
  0%   { background: var(--eg-accento); color: var(--eg-accento-testo); }
  100% { background: transparent; color: inherit; }
}
@keyframes eg-schiara { 0% { color: var(--eg-accento-testo); } 100% { color: inherit; } }

/* ── le scene avanzano mentre entrano nello schermo ──────────────────────
   Un ciclo cieco da 13s parte al caricamento: chi arriva scorrendo vede un
   frammento, non una scena. Con animation-timeline la scena comincia sempre
   dall'inizio, e sempre mentre la stai guardando. È CSS puro — nessun
   copione — e dove non è supportata resta il ciclo, che è già quello che
   c'era prima. L'archivio resta in ciclo: è ambiente, non racconto. ────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Un timeline solo per la scena: i figli lo ereditano per nome, così
       restano in sincrono fra loro invece di seguire ognuno la propria
       visibilità. */
    /* La conversazione NON segue lo scorrimento, e la ragione è il selettore
       di settore: cambiando azienda il blocco nuovo è già davanti agli occhi,
       quindi il suo percorso è oltre la fine e si presenterebbe all'ultimo
       fotogramma — testo già scritto, nessuna battitura. Resta a tempo: un
       elemento che passa da display:none a visibile riparte da zero da solo,
       ed è esattamente il momento in cui la si vuole vedere. */

    .notte { view-timeline-name: --scena-notte; }
    .notte li, .notte .fine {
      animation-timeline: --scena-notte; animation-duration: auto;
      animation-delay: 0s; animation-fill-mode: both;
    }
    /* Con un timeline di scorrimento il ritardo non è tempo, è posizione:
       gli scarti fra gli orari diventano scarti di percorso. */
    .notte li:nth-child(1) { animation-range: entry 18% entry 30%; }
    .notte li:nth-child(2) { animation-range: entry 45% entry 57%; }
    .notte li:nth-child(3) { animation-range: entry 58% entry 70%; }
    .notte li:nth-child(4) { animation-range: entry 79% entry 91%; }
    /* Stessa fase delle quattro righe, e crescente: un intervallo che mescola
       le fasi si inverte quando il blocco è alto quanto la finestra, e un
       intervallo invertito ha durata zero — con fill-mode:both congela il
       fotogramma iniziale, cioè opacity 0, per sempre. */
    .notte .fine            { animation-range: entry 92% entry 100%; }

    .grafico { view-timeline-name: --scena-grafico; }
    .grafico .riempi {
      animation-name: eg-barra-scena; animation-timeline: --scena-grafico;
      animation-duration: auto; animation-iteration-count: 1;
      animation-delay: 0s; animation-fill-mode: both;
      animation-range: entry 12% cover 34%;
    }
    .grafico .fila.reale .riempi { animation-range: entry 20% cover 40%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Stato finale di ognuna, non il nulla. */
  .flusso { height: auto; display: flex; flex-wrap: wrap; gap: var(--eg-s-3);
    align-items: center; padding: var(--eg-s-5); }
  .flusso .og { position: static; margin: 0; width: auto; padding: var(--eg-s-2) var(--eg-s-4);
    opacity: 1; animation: none; }
  .flusso .raccolta { position: static; width: auto; height: auto; margin: 0;
    padding: var(--eg-s-2) var(--eg-s-4); animation: none; border-color: var(--eg-accento); }
  .conversa, .conversa .sta-scrivendo, .conversa .risp .b1, .conversa .risp .b2,
  .notte li, .notte .fine { opacity: 1; animation: none; transform: none; }
  .turni .ruolo { opacity: 1; animation: none;
    border-color: var(--eg-accento-linea); background: var(--eg-accento-tenue); }
  .tessere .tessera { opacity: 1; animation: none; transform: none; }
  .conversa .sta-scrivendo .punti i { animation: none; opacity: 1; }
  .conversa .dom .l { clip-path: none; animation: none; white-space: normal; }
  .conversa .dom .l2 { border-right: 0; }
  .grafico .riempi { width: var(--q); animation: none; }
  .agente .governo .var, .agente .governo .var p,
  .agente .governo .var .et { animation: none; }
}


/* ── la barra dei comandi: sta sopra le schede, perché è lì che si vede
      l'effetto. Un comando sotto a ciò che governa non è un comando. ───── */
.comandi { display: grid; gap: var(--eg-s-7); padding: var(--eg-s-7);
  border: 1px solid var(--eg-linea); border-radius: var(--eg-raggio);
  background: var(--eg-carta-alt); margin-top: var(--eg-s-8); }
.comando > .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-4); }
.scelte { display: flex; flex-wrap: wrap; gap: var(--eg-s-3); }
.scelte label { display: inline-flex; align-items: center; min-height: 44px;
  padding-inline: var(--eg-s-5); border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); background: var(--eg-carta);
  font-size: var(--eg-t-0); font-weight: 600; color: var(--eg-inchiostro-2);
  cursor: pointer; user-select: none;
  transition: background-color var(--eg-tempo-s) var(--eg-curva),
    border-color var(--eg-tempo-s) var(--eg-curva), color var(--eg-tempo-s) var(--eg-curva); }
.scelte label:hover { background: var(--eg-carta-3); border-color: var(--eg-inchiostro-3);
  color: var(--eg-inchiostro); }
.scelte label:active { transform: translateY(1px); }
.scelte input { position: absolute; width: 1px; height: 1px; opacity: 0;
  margin: 0; pointer-events: none; }
.scelte label:has(input:checked) { background: var(--eg-accento);
  border-color: var(--eg-accento); color: var(--eg-accento-testo); }
.scelte label:has(input:focus-visible) { outline: 2px solid var(--eg-fuoco); outline-offset: 2px; }
.scelte label.altrove:has(input:checked) { background: var(--eg-inchiostro);
  border-color: var(--eg-inchiostro); color: var(--eg-carta); }
/* la spiegazione della posizione scelta: le altre due restano nel markup */
.spiega > p { display: none; font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 62ch; margin-top: var(--eg-s-4); }
.nota-comando { font-size: var(--eg-t-0); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-3); max-width: 62ch; margin-top: var(--eg-s-4);
  padding-top: var(--eg-s-4); border-top: 1px solid var(--eg-linea); }

/* ── le schede: profili di personale, non voci di un elenco ─────────────── */
.squadra { display: none; }

/* ── B · la banda che apre ────────────────────────────────────────────────
   Comandi, notte e conversazione in un blocco solo subito dopo l'attacco.
   Il punto non è estetico: prima il regolatore riscriveva due righe che
   cominciavano 1.343 px più in basso su desktop e 1.740 su telefono — si
   premeva e non si vedeva niente, che è la definizione di cursore
   decorativo. Qui la chiusa della notte cambia sotto il dito. */
.banda-notte { margin-top: var(--eg-s-8); padding: var(--eg-s-7);
  border: 1px solid var(--eg-accento-linea); border-radius: var(--eg-raggio); }
.banda-notte .comandi { display: flex; flex-wrap: wrap;
  gap: var(--eg-s-5) var(--eg-s-8); padding-bottom: var(--eg-s-6);
  border-bottom: 1px solid var(--eg-linea); margin-bottom: var(--eg-s-6); }
.banda-notte .comandi .comando { flex: 1 1 300px; }
.banda-dentro { display: none; }
.banda-dentro .dentro { display: grid; gap: var(--eg-s-8);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* Dentro la banda i due blocchi non portano più il loro margine: ce l'ha
   la griglia. Senza, la conversazione scendeva di 40px rispetto alla notte
   e le due colonne partivano a quote diverse. */
.banda-dentro .notte, .banda-dentro .conversa { margin-top: 0; }
.banda-dentro .parla > .nota { margin-top: var(--eg-s-5); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-3); max-width: 54ch; }
.banda-dentro .intestazione { display: flex; flex-wrap: wrap;
  gap: var(--eg-s-2) var(--eg-s-5); align-items: baseline;
  margin-bottom: var(--eg-s-6); }
.banda-dentro .intestazione .et { font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-2); }

/* Le tre copie della riga e della chiusa: una sola visibile, scelta dal
   CSS. Stesso meccanismo dei settori — nessuna riga di JavaScript, e la
   pagina regge anche a copione morto. */
.agenti-brevi .riga > span, .notte .fine > span { display: none; }
#bussola:has(#reg-chiede:checked) .riga > .v-chiede,
#bussola:has(#reg-ripete:checked) .riga > .v-ripete,
#bussola:has(#reg-riferisce:checked) .riga > .v-riferisce,
#bussola:has(#reg-chiede:checked) .fine > .v-chiede,
#bussola:has(#reg-ripete:checked) .fine > .v-ripete,
#bussola:has(#reg-riferisce:checked) .fine > .v-riferisce { display: inline; }

.squadra .intestazione { display: flex; flex-wrap: wrap; gap: var(--eg-s-2) var(--eg-s-5);
  align-items: baseline; margin-block: var(--eg-s-8) var(--eg-s-5); }
.squadra .intestazione .et { font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase; color: var(--eg-inchiostro-3); }

/* Dove la sotto-griglia non c'è, si torna al comportamento di prima: le
   schede restano leggibili, solo non allineate fra loro. */
@supports not (grid-template-rows: subgrid) {
  .agente { display: flex; flex-direction: column; }
  .agente .righe { display: grid; }
  .agente .coda { margin-top: auto; }
}
.sempre { font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase; color: var(--eg-accento);
  padding: var(--eg-s-2) var(--eg-s-3); border: 1px solid var(--eg-accento-linea);
  border-radius: var(--eg-raggio-s); white-space: nowrap; }

/* le altre tre squadre: sei nomi e un compito, che è tutto quello che c'è */
/* Tre colonne fisse e non `auto-fit`: le schede sono tre, e con `auto-fit`
   a certe larghezze ne restava una sola in seconda riga, larga il triplo
   delle altre due. */
.agenti-brevi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px; background: var(--eg-linea); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); overflow: hidden; }
.agenti-brevi > li { padding: var(--eg-s-6); background: var(--eg-carta-alt);
  display: flex; flex-direction: column; }

/* Tre in evidenza e tre in una riga bassa: stessa forma, due pesi. Le tre
   in alto sono quella con cui si parla, quella che porta il numero, e
   Guardiano — che risponde a «e se uno si pianta e nessuno se ne accorge?».
   Non è una lista scritta nei dati: si ricava, o fra sei mesi sono quattro
   elenchi da tenere allineati a mano. */
.agenti-brevi.bassa { background: none; border: 0; border-radius: 0;
  gap: var(--eg-s-5) var(--eg-s-7); margin-top: var(--eg-s-5); overflow: visible; }
.agenti-brevi.bassa > li { background: none; padding: var(--eg-s-4) 0 0;
  border-top: 1px solid var(--eg-linea); }
.agenti-brevi.bassa h4 { font-size: var(--eg-t-2); }
.agenti-brevi.bassa .sigla { width: 30px; height: 30px; font-size: 10px; }
.agenti-brevi.bassa .ruolo { display: none; }
.agenti-brevi.bassa .riga { border-top: 0; padding-top: 0; margin-top: var(--eg-s-3); }

/* Il tondo con la sigla, e la parola sopra il nome. Servono a dire che è un
   ruolo e non una funzione — cosa che finora diceva solo il testo. */
.sigla { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; border-radius: var(--eg-raggio-pieno);
  border: 1px solid var(--eg-accento-linea); color: var(--eg-accento);
  font-size: var(--eg-t-0); font-weight: 700; letter-spacing: .04em; }
.agenti-brevi h4 .chi { display: block; }
/* Chi non si sposta lo dice, e non prende il colore dell'accento: quel
   colore in questa sezione vuol dire «questo cambia col comando». */
.agenti-brevi .riga.riga-ferma { color: var(--eg-inchiostro-2); font-weight: 400; }
/* La riga detta una volta per la squadra, dove non è di nessun agente. */
.squadra > .riga-squadra { margin-top: var(--eg-s-6); padding-top: var(--eg-s-5);
  border-top: 1px solid var(--eg-linea); font-size: var(--eg-t-3);
  font-weight: 700; color: var(--eg-accento); }
.squadra > .riga-squadra .et { display: block; font-size: var(--eg-t-00);
  font-weight: 700; letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-3); }
.squadra > .riga-squadra > span:not(.et) { display: none; }
#bussola:has(#reg-chiede:checked) .riga-squadra > .v-chiede,
#bussola:has(#reg-ripete:checked) .riga-squadra > .v-ripete,
#bussola:has(#reg-riferisce:checked) .riga-squadra > .v-riferisce { display: inline; }
.agenti-brevi .riga-ferma .marchio { display: block; font-size: var(--eg-t-00);
  font-weight: 700; letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-3); }

/* Le tre note entrano nella scheda di chi riguardano. Stavano sotto la
   griglia in riquadri tratteggiati e grigi: tre argomenti di vendita
   vestiti da annotazioni di servizio. */
.agenti-brevi .nota { margin-top: var(--eg-s-4); padding-left: var(--eg-s-4);
  border-left: 2px solid var(--eg-accento-linea); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-medio); color: var(--eg-inchiostro-2); }

/* La riga che il regolatore cambia. `margin-top: auto` la tiene in fondo:
   le tre schede hanno testi di lunghezza diversa e senza questo le tre
   righe finivano a tre quote, che è il posto dove si guarda per capire se
   il comando ha fatto qualcosa. */
.agenti-brevi .riga { margin-top: auto; padding-top: var(--eg-s-4);
  border-top: 1px solid var(--eg-linea); font-size: var(--eg-t-1);
  font-weight: 600; color: var(--eg-accento); }
.agenti-brevi h4 { margin: 0 0 var(--eg-s-3); display: flex; flex-wrap: wrap;
  gap: var(--eg-s-3) var(--eg-s-4); align-items: center;
  font-family: var(--eg-font-titolo); font-size: var(--eg-t-3); font-weight: 700;
  letter-spacing: var(--eg-tr-titolo); }
.agenti-brevi p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); }

/* Le adattive DOPO le regole che scavalcano: a parità di specificità in
   CSS vince l'ultima scritta, non quella dentro la media query. Questo
   blocco stava PRIMA della riga a tre colonne, e su un telefono le tre
   schede restavano affiancate: cinquanta pixel di testo ciascuna. */
@media (max-width: 900px) {
  .banda-dentro .dentro { grid-template-columns: minmax(0, 1fr); }
  /* Sul telefono le due file di pastiglie tengono la loro etichetta: senza,
     sono due righe di bottoni e non si sa cosa scelgono. */
  .banda-notte .comandi { display: grid; gap: var(--eg-s-5); }
}
@media (max-width: 620px) {
  .agenti-brevi, .agenti-brevi.bassa { grid-template-columns: minmax(0, 1fr); }
  /* La notte su due righe: ora, pallino e sigla sopra, il fatto sotto a
     tutta larghezza. Con le quattro colonne su 390px al testo restavano
     90px e «14 cose entrate, 14 smistate» diventava una colonnina di tre
     righe — quattro fatti che devono leggersi in sei secondi. */
  /* La quarta colonna è vuota e serve: senza, le tre `max-content` si
     allargavano fino alla riga che le attraversa tutte, spingendo la
     sigla a metà riquadro e facendo debordare il testo dal bordo. */
  .notte li { grid-template-columns: max-content 8px max-content minmax(0, 1fr);
    gap: var(--eg-s-3) var(--eg-s-4); }
  .notte .cosa { grid-column: 1 / -1; }
}

.squadra .dopo { margin-top: var(--eg-s-6); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); max-width: 62ch; }

/* «il mio non è qui»: chi non si è visto rappresentato è chi scrive più volentieri */
.altrove-pannello { display: none; padding: var(--eg-s-8); margin-top: var(--eg-s-8);
  background: var(--eg-carta-scura); color: var(--eg-inchiostro-su-scura);
  border-radius: var(--eg-raggio); }
.altrove-pannello h3 { font-size: var(--eg-t-6); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: var(--eg-lh-titolo); max-width: 26ch; }
.altrove-pannello p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); max-width: 62ch; margin-top: var(--eg-s-4); }
.altrove-pannello .azione { margin-top: var(--eg-s-6); }

/* ── l'ammissione: tre righe, e valgono più di una figura ───────────────── */
.ammissione { margin-top: var(--eg-s-9); padding: var(--eg-s-8) 0;
  border-block: 1px solid var(--eg-linea); }
.ammissione ul { display: grid; gap: var(--eg-s-4); }
.ammissione li { font-size: var(--eg-t-5); font-weight: 700; line-height: var(--eg-lh-medio);
  letter-spacing: var(--eg-tr-titolo); max-width: 40ch; }
.ammissione li + li { font-size: var(--eg-t-3); font-weight: 500; color: var(--eg-inchiostro-2); }
/* L'enfasi la porta il colore: il peso resta quello della riga, per non
   introdurre un quarto grado nella scala. */
.ammissione li b { color: var(--eg-accento); font-weight: inherit; }

/* ── l'aggancio al registro, e la chiusura ──────────────────────────────── */
.bussola-guasti { display: flex; flex-wrap: wrap; gap: var(--eg-s-6) var(--eg-s-9);
  align-items: flex-end; margin-top: var(--eg-s-9); }
.bussola-guasti > div { flex: 1 1 320px; }
.bussola-guasti .forte { font-size: var(--eg-t-4); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo); max-width: 34ch; }
.bussola-guasti .seconda { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); max-width: 54ch; margin-top: var(--eg-s-4); }
.bussola-chiusura { padding-block: var(--eg-s-10); }
.bussola-chiusura h3 { font-size: var(--eg-t-8); font-weight: 700;
  letter-spacing: var(--eg-tr-titolone); line-height: 1.02; max-width: 22ch; }
.bussola-chiusura p { font-size: var(--eg-t-3); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); max-width: 58ch; margin-top: var(--eg-s-5); }
.bussola-chiusura .azione { margin-top: var(--eg-s-7); }

/* ── il cablaggio: quale pannello e quale variante si vedono.
      Nessun JavaScript: lo stato è nei radio, la reazione è in :has(). ──── */
#bussola:has(#sett-impianti:checked) .sq-impianti { display: block; }
#bussola:has(#sett-manifattura:checked) .sq-manifattura { display: block; }
#bussola:has(#sett-sanita:checked) .sq-sanita { display: block; }
#bussola:has(#sett-studi:checked) .sq-studi { display: block; }
#bussola:has(#sett-altrove:checked) .altrove-pannello { display: block; }
/* Un comando che non governa niente non deve stare a schermo: le varianti
   esistono solo nella squadra dettagliata, quindi il regolatore compare
   solo con quella. Nelle altre non c'è nulla da spostare. */
.comando-regolatore { display: none; }
#bussola:has(#sett-impianti:checked) .comando-regolatore { display: block; }
#bussola:has(#reg-chiede:checked) .var-chiede { display: block; }
#bussola:has(#reg-chiede:checked) .spiega .sp-chiede { display: block; }
#bussola:has(#reg-ripete:checked) .var-ripete { display: block; }
#bussola:has(#reg-ripete:checked) .spiega .sp-ripete { display: block; }
#bussola:has(#reg-riferisce:checked) .var-riferisce { display: block; }
#bussola:has(#reg-riferisce:checked) .spiega .sp-riferisce { display: block; }
.rompe-azioni { display: flex; flex-wrap: wrap; gap: var(--eg-s-5);
  align-items: center; margin-top: var(--eg-s-6); }
.voci { background: var(--eg-carta-alt); border: 1px solid var(--eg-linea);
  border-radius: var(--eg-raggio); overflow: hidden; }
.voce { border-top: 1px solid var(--eg-linea); }
.voce:first-child { border-top: 0; }
.voce > summary { display: grid; grid-template-columns: var(--eg-w-num) 1fr 20px;
  gap: 0 var(--eg-s-5); padding: var(--eg-s-6) var(--eg-s-4); align-items: start;
  list-style: none; cursor: pointer; transition: background-color var(--eg-tempo-s) var(--eg-curva); }
.voce > summary::-webkit-details-marker { display: none; }
.voce > summary::marker { content: ""; }
.voce > summary:hover { background: var(--eg-carta-3); }
.voce > summary:focus-visible { outline-offset: -2px; }
.voce .n { font-size: var(--eg-t-cifra-m); font-weight: 700; line-height: 0.8;
  letter-spacing: -0.05em; color: var(--eg-inchiostro-3); font-variant-numeric: tabular-nums;
  transition: color var(--eg-tempo-s) var(--eg-curva); }
.voce .sintomo, .voce .domanda { display: block; font-size: var(--eg-t-3); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-testo); max-width: 54ch; }
.voce .piu { font-size: var(--eg-t-4); color: var(--eg-inchiostro-3); text-align: right;
  line-height: 1; transition: transform var(--eg-tempo) var(--eg-curva), color var(--eg-tempo-s) var(--eg-curva); }
.voce[open] > summary { background: var(--eg-carta-3); box-shadow: inset 3px 0 0 var(--eg-accento); }
.voce[open] > summary .n, .voce[open] > summary .piu { color: var(--eg-accento); }
.voce[open] > summary .piu { transform: rotate(45deg); }
.voce-corpo { padding: 0 var(--eg-s-4) var(--eg-s-7) calc(var(--eg-w-num) + var(--eg-s-5) + var(--eg-s-4));
  display: grid; gap: var(--eg-s-5); }
.voce-corpo .coppia { display: flex; flex-wrap: wrap; gap: var(--eg-s-5) var(--eg-s-7); }
.voce-corpo .coppia p { flex: 1 1 250px; font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
.voce-corpo .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-2); }
.risolto { padding: var(--eg-s-5) var(--eg-s-6); background: var(--eg-accento-tenue);
  border-left: 3px solid var(--eg-accento); border-radius: 0 var(--eg-raggio-s) var(--eg-raggio-s) 0; }
.risolto .et { color: var(--eg-accento); }
.risolto p { font-size: var(--eg-t-2); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro); max-width: 64ch; }

/* ── le domande ─────────────────────────────────────────────────────────
   Riusa `.voci`/`.voce` del registro — stesso riquadro, stessi filetti,
   stesso «+» che ruota all'apertura — e toglie solo la colonna del numero.
   Numerare sei obiezioni direbbe una cosa falsa: non sono una sequenza,
   sono un elenco da cui uno pesca quella che si stava già facendo.

   Senza quella colonna cade anche il rientro del corpo, che era calcolato
   sulla sua larghezza: qui il testo parte dove parte la domanda. */
.voci-domande .voce > summary { grid-template-columns: 1fr 20px; }
.voci-domande .voce-corpo { padding-left: var(--eg-s-4); max-width: 72ch; }
.voci-domande .voce-corpo p { font-size: var(--eg-t-2);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
/* La prima riga è la risposta; le altre la argomentano. Solo la prima in
   inchiostro pieno, così chi apre e scorre veloce prende quella. */
.voci-domande .voce-corpo p:first-child { color: var(--eg-inchiostro); font-weight: 500; }

/* ── chi sono ───────────────────────────────────────────────────────────── */
.chi-apertura { font-size: var(--eg-t-8); font-weight: 700; line-height: 1.02;
  letter-spacing: var(--eg-tr-titolone); max-width: 24ch; margin-block: var(--eg-s-8); }
.chi { display: flex; flex-wrap: wrap; gap: var(--eg-s-7) var(--eg-s-8); align-items: flex-start; }
.chi figure { flex: 0 0 var(--eg-w-ritratto); margin: 0; }
.chi img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 50% 12%; border-radius: var(--eg-raggio-s);
  -webkit-mask-image: url(assets/ritratto-maschera.png);
  mask-image: url(assets/ritratto-maschera.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.chi > div { flex: 1 1 320px; min-width: 260px; max-width: 52ch; }
.chi p { font-size: var(--eg-t-3); line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
.chi p + p { margin-top: var(--eg-s-5); }

/* ── contatto ───────────────────────────────────────────────────────────── */
.contatto { display: flex; flex-wrap: wrap; gap: var(--eg-s-9); }
.contatto > div { flex: 1 1 340px; min-width: 260px; }
.contatto h2 { font-size: var(--eg-t-9); margin-block: var(--eg-s-5) var(--eg-s-6); }
.contatto .invito { font-size: var(--eg-t-4); line-height: var(--eg-lh-medio); max-width: 30ch; }
.contatto .patto { margin-top: var(--eg-s-7); padding-top: var(--eg-s-6);
  border-top: 1px solid var(--eg-linea-su-scura); font-size: var(--eg-t-1);
  line-height: var(--eg-lh-testo); color: var(--eg-su-scura-2); max-width: 38ch; }
form { display: grid; gap: var(--eg-s-5); padding: var(--eg-s-7);
  background: var(--eg-carta-alt); color: var(--eg-inchiostro); border-radius: var(--eg-raggio); }
form label > span { display: block; font-size: var(--eg-t-0); font-weight: 600;
  color: var(--eg-inchiostro-2); margin-bottom: var(--eg-s-3); }
input, textarea { width: 100%; font-family: inherit; font-size: var(--eg-t-2);
  padding: var(--eg-s-4) var(--eg-s-5); border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); background: var(--eg-carta); color: var(--eg-inchiostro);
  transition: border-color var(--eg-tempo-s) var(--eg-curva); }
input { min-height: 48px; }
textarea { line-height: var(--eg-lh-testo); resize: vertical; }
input:hover, textarea:hover { border-color: var(--eg-inchiostro-3); }
input:focus, textarea:focus { border-color: var(--eg-accento); }
.form-piede { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-s-5); }
.form-esito { font-size: var(--eg-t-0); color: var(--eg-inchiostro-2); }
.informativa { padding-top: var(--eg-s-4); border-top: 1px solid var(--eg-linea);
  font-size: var(--eg-t-0); line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); }
.ricevuto { padding: var(--eg-s-7); background: var(--eg-accento-chiaro);
  color: var(--eg-accento-su-chiaro); border-radius: var(--eg-raggio); margin-bottom: var(--eg-s-5); }
.ricevuto .grosso { font-size: var(--eg-t-4); font-weight: 700;
  line-height: var(--eg-lh-medio); margin-block: var(--eg-s-3) var(--eg-s-4); }
.ricevuto p:last-child { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo); }
.ricevuto .occhiello { color: var(--eg-accento-su-chiaro); }

footer { background: var(--eg-carta-scura); color: var(--eg-su-scura-3);
  border-top: 1px solid var(--eg-linea-scura); }
footer a:not(.btn) { color: var(--eg-su-scura-3); }
footer a:hover { color: var(--eg-inchiostro-su-scura); }
.footer-int { padding: var(--eg-s-7) var(--eg-s-5) var(--eg-s-10); display: flex; flex-wrap: wrap;
  gap: var(--eg-s-4) var(--eg-s-8); justify-content: space-between; font-size: var(--eg-t-0); }
.footer-int p { display: flex; flex-wrap: wrap; gap: var(--eg-s-2) var(--eg-s-5); }

/* ── Il campo esca del modulo ────────────────────────────────────────────
   Non `display:none` né `visibility:hidden`: i robot fatti bene saltano i
   campi che il browser non visualizza, e l'esca non pescherebbe niente. Sta
   fuori dallo schermo, resta nell'albero, e una persona non lo incontra —
   non è raggiungibile col tabulatore (`tabindex="-1"` nel markup) e i lettori
   di schermo lo saltano (`aria-hidden` sul contenitore). ────────────────── */
.esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ── V4 · le animazioni fuori schermo ────────────────────────────────────
   La pagina è alta 18.375px e le animazioni in ciclo sono 53: per quasi tutto
   il tempo quasi tutte girano dove nessuno le guarda. `content-visibility`
   sospende insieme il disegno e le animazioni di ciò che è fuori schermo, e
   accorcia anche il primo disegno.

   `contain-intrinsic-size` non è facoltativo: senza, il browser stima
   l'altezza a zero e la barra di scorrimento salta mentre si scorre. Le
   misure stanno qui sotto, e sono misurate — non stimate.

   Non si applica al blocco `#fatti`, che è in cima e va disegnato subito. ── */
/* Le misure sono quelle REALI, prese a `content-visibility` spenta: Bussola
   6.578px, il registro 2.401px. Le prime che avevo scritto — 7.400 e 4.900 —
   erano stime, e la seconda era il doppio del vero: mentre si scorre, la
   barra di scorrimento si accorcia di colpo quando la sezione entra in vista
   e il segnaposto viene sostituito dall'altezza vera. Un numero inventato qui
   non è una svista di stile: è un salto sotto il dito di chi legge.

   Nota per chi misurerà di nuovo: da fuori queste sezioni RESTITUISCONO il
   valore dichiarato finché sono fuori schermo. Per misurarle sul serio va
   spenta la regola, o si legge questo numero e si crede di aver misurato. */
#bussola, #registro { content-visibility: auto; }
#bussola  { contain-intrinsic-size: auto 6580px; }
#registro { contain-intrinsic-size: auto 2400px; }


/* ── V12 · il vuoto fra la banda dei numeri e il primo testo ─────────────
   `.sez` mette 128px sopra e sotto; sommati al margine della banda che
   precede facevano ~350px di nero, più di uno schermo. La sezione che segue
   una banda a colore pieno non ha bisogno di respiro sopra: ce l'ha già,
   ed è la banda stessa. ─────────────────────────────────────────────────── */
.accento-banda + .sez,
.accento-banda + section { padding-top: var(--eg-s-9); }

/* ── V6 · la colonna sinistra di «Parliamone» ────────────────────────────
   Il modulo sta a destra; a sinistra, sotto quattro righe, restavano ~700px
   di nero. Non è respiro: è una colonna che finisce prima dell'altra, nella
   sezione dove si decide se scrivere o no. Allineare in alto e basta lascia
   il buco; allineare al centro lo divide in due e smette di leggersi come
   una mancanza. ─────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .contatto { align-items: center; }
}

/* ── X3 · il messaggio di errore di un campo ───────────────────────────── */
.errore {
  display: block;
  margin-top: var(--eg-s-2);
  font-size: var(--eg-t-0);
  line-height: 1.45;
  color: var(--eg-accento-chiaro);
}
.errore[hidden] { display: none; }

/* ── V5 · l'invito sotto l'anteprima ─────────────────────────────────────
   Stava sopra l'immagine, a tutta larghezza, con una velatura scura sotto
   per staccarlo: sembrava un comando dell'applicazione ritratta. Qui è
   quello che è — un invito della pagina. ─────────────────────────────────── */
.prova-corpo .azione { margin-top: var(--eg-s-6); }


/* ── La chat sul telefono ────────────────────────────────────────────────
   Le righe della domanda non vanno a capo, perché il taglio della battitura
   ha bisogno di una riga sola. A 390px quella riga è più larga della scheda,
   e senza questa regola uscirebbe fuori. La battitura si perde: su un
   telefono valeva pochi pixel, la leggibilità vale tutto. ───────────────── */
@media (max-width: 560px) {
  /* Un blocco e non una griglia: `minmax(0, 1fr)` dentro un elemento che si
     dimensiona sul contenuto è di nuovo la dipendenza circolare di sopra, e
     qui faceva collassare la bolla a trentadue pixel — cioè ai soli margini
     interni. Un blocco con un margine a sinistra riempie quello che resta,
     resta spostato a destra come una bolla deve essere, e non ha niente da
     far collassare. */
  .conversa .dom { display: block; width: auto; margin-left: 14%; }
  .conversa .dom .l { white-space: normal; clip-path: none; animation: none; }
  .conversa .dom .l2 { border-right: 0; }
}

/* ── Le pagine-documento: informativa e «non trovato» ────────────────────
   Vivono fuori dalla pagina principale e non hanno le sue sezioni, quindi
   non ereditano il suo ritmo verticale: senza queste righe i titoli si
   appoggiavano al paragrafo successivo e il testo toccava i bordi. ─────── */
.documento .h-doc { font-size: var(--eg-t-8); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.032em; margin-block: var(--eg-s-4) var(--eg-s-6); }
.documento h2 { font-size: var(--eg-t-4); font-weight: 700;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  margin-block: var(--eg-s-8) var(--eg-s-4); }
.documento p { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); margin-block: var(--eg-s-4) 0; max-width: 68ch; }
.documento .guida { font-size: var(--eg-t-2); color: var(--eg-inchiostro); }
.documento b, .documento strong { color: var(--eg-inchiostro); }
.documento ul { margin-block: var(--eg-s-4) 0; }
.documento .informativa { margin-top: var(--eg-s-7); }
.documento .btn { margin-top: var(--eg-s-6); }


/* ── A4 · la barra traslucida ─────────────────────────────────────────────
   È il dettaglio riconoscibile: il contenuto che scorre sotto si intravede,
   invece di sparire dietro una fascia opaca. Il ripiego opaco è dichiarato
   sotto @supports e non prima, così dove il velo funziona non c'è una
   seconda regola che gli si sovrappone. ──────────────────────────────────── */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .barra {
    background: color-mix(in oklch, var(--eg-carta-alt) 72%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}


/* Sotto i 620px le tre pastiglie si incolonnano: lì l'altezza fissa della
   riga della cifra non serve più — anzi, lascerebbe un buco sopra ognuna. */
@media (max-width: 620px) {
  .pastiglie a { grid-template-rows: auto auto; }
}

/* ── Perché regge ────────────────────────────────────────────────────────
   Quattro ragioni, non quattro slogan: ognuna risponde a una domanda che
   chi legge si fa da solo subito dopo aver capito com'è fatto. ─────────── */
.regge { margin-top: var(--eg-s-9); padding-top: var(--eg-s-7);
  border-top: 1px solid var(--eg-linea); }
.regge > .occhiello { margin-bottom: var(--eg-s-6); }
.regge ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--eg-s-6) var(--eg-s-8); }
.regge li { display: grid; gap: var(--eg-s-2); align-content: start; }
.regge h4 { font-size: var(--eg-t-2); font-weight: 700;
  letter-spacing: var(--eg-tr-titolo); color: var(--eg-inchiostro); }
.regge p { font-size: var(--eg-t-0); line-height: var(--eg-lh-testo);
  color: var(--eg-inchiostro-2); }
.scura .regge { border-top-color: var(--eg-linea-su-scura); }
.scura .regge h4 { color: var(--eg-inchiostro-su-scura); }
.scura .regge p { color: var(--eg-su-scura-2); }

/* ── Il mansionario ──────────────────────────────────────────────────────
   Erano sei paragrafi in una griglia a tre colonne: colonne strette, testo
   piccolo, nessuna gerarchia — «morta e anonima», ed era vero. Il testo
   sopra dice «è una figura che assumi, e come una figura ha sei cose»:
   allora la forma dev'essere quella di un mansionario, che è il documento
   che un imprenditore ha già letto cento volte.

   Sei righe a piena larghezza, numerate, voce a sinistra e contenuto a
   destra: si legge in verticale come un elenco di condizioni, non in
   orizzontale come tre colonnine da confrontare. ── */
/* Ripiegato: il filetto e lo stacco passano alla piega, che è l'elemento
   che adesso sta nel flusso. Lasciarli tutti e due darebbe due righe
   orizzontali a quattro pixel di distanza. */
.piega-mansionario { margin-block: var(--eg-s-9); }

/* Questa piega non è come quelle dentro le schede delle prove: lì si apre
   un elenco di dettagli in fondo a una colonna già letta, qui si apre una
   SEZIONE. Con il vestito leggero — quattordici punti, grigio, un «+» che
   quasi non si vede — non si capiva che ci fosse qualcosa sotto.

   Prende la forma che il sito usa già per aprire le cose: il pulsante
   quieto del registro. Riquadro, bordo pieno, testo in inchiostro, e una
   parola che dice cosa succede se ci clicchi. La parola la scrive il CSS
   dallo stato del `details`, non il markup: così non può dire «apri»
   mentre il blocco è aperto. */
.piega-mansionario > summary { border: 1px solid var(--eg-linea-forte);
  border-radius: var(--eg-raggio-s); background: var(--eg-carta);
  padding: var(--eg-s-5) var(--eg-s-6); gap: var(--eg-s-4);
  font-size: var(--eg-t-3); color: var(--eg-inchiostro);
  transition: background-color var(--eg-tempo-s) var(--eg-curva),
              border-color var(--eg-tempo-s) var(--eg-curva); }
.piega-mansionario > summary:hover { background: var(--eg-carta-3);
  border-color: var(--eg-inchiostro-3); color: var(--eg-inchiostro); }
.piega-mansionario > summary .quante { font-size: var(--eg-t-0); }
/* La pastiglia ripete apposta la forma di `.stato` — è il segno che in
   questa pagina vuol dire «etichetta piccola in accento» — ma con regole
   sue: `.stato` è la pastiglia di «in uso reale» sulle schede delle prove,
   e due cose diverse non devono dipendere dalla stessa riga di CSS. */
.piega-mansionario > summary .apre { margin-left: auto; flex: none;
  font-size: var(--eg-t-00); font-weight: 600; letter-spacing: var(--eg-tr-etichetta);
  text-transform: uppercase; color: var(--eg-accento);
  padding: var(--eg-s-2) var(--eg-s-4); border: 1px solid var(--eg-accento-linea);
  border-radius: var(--eg-raggio-s); }
.piega-mansionario > summary .apre::before { content: "apri"; }
.piega-mansionario[open] > summary .apre::before { content: "chiudi"; }
/* Il «+» perde `margin-left: auto`: adesso quel posto è della parola. */
.piega-mansionario > summary .piu { margin-left: 0; color: var(--eg-accento);
  font-size: var(--eg-t-4); }
/* Aperto cambia solo il colore del bordo. Squadrare gli angoli in basso
   darebbe una linguetta che si apre su niente: sotto non c'è un riquadro
   che la raccolga, e sembrerebbe un lavoro lasciato a metà. */
.piega-mansionario[open] > summary { border-color: var(--eg-accento); }
.piega-mansionario > .mansionario { margin-top: 0; padding-top: var(--eg-s-6);
  border-top: 0; }
/* L'occhiello ripete il testo del riassunto quando è aperto: dentro, la
   riga di testa non serve più. La guida sì — è quella che spiega. */
.piega-mansionario > .mansionario > .occhiello { display: none; }
.mansionario { margin-top: var(--eg-s-9); padding-top: var(--eg-s-7);
  border-top: 1px solid var(--eg-linea); }
.mansionario > .occhiello { margin-bottom: var(--eg-s-5); }
.mansionario-guida { margin-bottom: var(--eg-s-7); font-size: var(--eg-t-3);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro);
  max-width: 52ch; }
.mansionario ol { list-style: none; padding: 0; display: grid; }
.mansionario li { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--eg-s-4) var(--eg-s-8); align-items: baseline;
  padding: var(--eg-s-5) 0; border-top: 1px solid var(--eg-linea); }
.mansionario li:first-child { border-top: 0; }
.mansionario .voce { display: flex; align-items: baseline; gap: var(--eg-s-4);
  font-size: var(--eg-t-4); font-weight: 700; line-height: var(--eg-lh-titolo);
  letter-spacing: var(--eg-tr-titolo); color: var(--eg-inchiostro); }
/* Il numero è un segno di sequenza, non un titolo: sta in una colonna sua,
   allineato in cifre tabulari così i sei stanno in colonna anche a 01/06. */
.mansionario .n { flex: none; font-size: var(--eg-t-1); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); color: var(--eg-accento);
  font-variant-numeric: tabular-nums; }
.mansionario li > p:last-child { font-size: var(--eg-t-2);
  line-height: var(--eg-lh-testo); color: var(--eg-inchiostro-2); max-width: 62ch; }
@media (max-width: 760px) {
  .mansionario li { grid-template-columns: minmax(0, 1fr); gap: var(--eg-s-3); }
  .mansionario .voce { font-size: var(--eg-t-3); }
}

/* ═══ Il movimento che manca ═══════════════════════════════════════════════

   Tre animazioni, tutte in CSS e tutte legate a qualcosa che chi guarda ha
   appena fatto: spostare il comando, cambiare settore, arrivare alla notte.
   Il movimento che nessuno provoca è decorazione; questo è risposta. ══════ */

/* ── 1 · il comando dell'autonomia ────────────────────────────────────────
   Prima si spostava e non succedeva niente di visibile: le righe cambiavano
   testo, ma senza un lampo l'occhio non se ne accorgeva — e il comando
   sembrava inerte proprio nel momento in cui dimostra la cosa più
   importante, cioè che a decidere sei tu. */
@keyframes eg-accende-riga {
  0%   { background: var(--eg-accento-tenue); }
  22%  { background: var(--eg-accento-linea); }
  100% { background: var(--eg-accento-tenue); }
}
@keyframes eg-entra-var {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Anche la spiegazione sotto il comando entra invece di comparire: dice che
   quella riga è cambiata adesso, per una cosa che hai fatto tu. */
.comandi .spiega > * { animation: eg-entra-var .34s var(--eg-curva-arrivo); }

/* ── 2 · il cambio di settore ─────────────────────────────────────────────
   Cambiare vestito senza transizione sembra un cambio di pagina. Con una
   dissolvenza breve si vede che è la stessa macchina a cambiare squadra. */
@keyframes eg-entra-squadra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.squadra { animation: eg-entra-squadra .42s var(--eg-curva-arrivo); }

/* ── 3 · la notte ─────────────────────────────────────────────────────────
   Le quattro righe già arrivano una alla volta. Mancava il tempo che passa:
   una linea che scende lungo gli orari mentre le righe si accendono, e
   l'ultima riga che arriva con un peso diverso dalle altre — è quella per
   cui la sezione esiste. */
.notte ol { position: relative; padding-left: var(--eg-s-6); }
.notte ol::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 2px; height: 100%;
  background: linear-gradient(to bottom,
    var(--eg-accento-chiaro) 0%, var(--eg-accento-chiaro) 50%,
    var(--eg-linea-su-scura) 50%, var(--eg-linea-su-scura) 100%);
  background-size: 100% 200%;
  animation: eg-scende 4.6s var(--eg-curva) infinite;
}
@keyframes eg-scende {
  0%, 6%   { background-position: 0 100%; }
  86%, 100% { background-position: 0 0%; }
}
.notte li { position: relative; }
.notte li::before {
  content: "";
  position: absolute;
  left: calc(var(--eg-s-6) * -1 - 3px);
  top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--eg-accento-chiaro);
}
.notte .fine { font-size: var(--eg-t-2); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .agente .governo, .agente .governo .var, .comandi .spiega > *,
  .squadra, .squadra .agente, .notte ol::before {
    animation: none;
  }
  .notte ol::before { background: var(--eg-linea-su-scura); }
}

/* ── Le tre misure sul telefono ──────────────────────────────────────────
   In colonna la freccia restava sospesa a destra, all'altezza della
   descrizione, senza niente a cui appoggiarsi: sembrava caduta lì. Sulla
   riga del numero ha un ancoraggio, e la pastiglia si legge in due righe
   nette invece che in un blocco largo con un segno in mezzo al vuoto.
   Passi più stretti, perché tre voci corte separate da 56px di aria si
   leggono come tre cose scollegate. ─────────────────────────────────────── */
@media (max-width: 620px) {
  .pastiglie { gap: var(--eg-s-6); padding-block: var(--eg-s-7); }
  .pastiglie a { grid-template-rows: auto auto; row-gap: var(--eg-s-3); }
  /* La riga del numero ospita anche la freccia, spinta a destra. */
  .pastiglie .misura { justify-content: space-between; width: 100%; }
  .pastiglie .misura .unita { margin-right: auto; margin-left: var(--eg-s-3); }
  .pastiglie .sotto { margin-top: 0; }
  /* La freccia esce dalla riga di sotto ed entra in quella del numero. */
  .pastiglie .sotto span:last-child { display: none; }
  .pastiglie .misura::after { content: "\2193"; font-size: var(--eg-t-2);
    opacity: .55; align-self: center; }
  .pastiglie .sotto span:first-child { max-width: none; }
}

/* ═══ Cosa faccio · il tetto, l'asse, le tre fasi ══════════════════════════

   Tre schede affiancate dicevano «scegli quella che ti serve». Sono invece
   una sequenza: si entra dalla prova, il flusso viene dopo, la manutenzione
   dopo ancora e non finisce. Ora la sequenza si vede, e il prezzo smette di
   essere l'unica cosa comparabile. ════════════════════════════════════════ */

/* Il tetto: quattro clausole a corpo da titolo, un filetto sopra ognuna.
   Era una riga grigia sopra le schede — l'argomento che disinnesca la paura
   di chi ha già comprato software e se n'è pentito, scritto come didascalia. */
/* `list-style: none` e nessun rientro: sono elenchi ordinati, e il browser
   ci metteva i suoi «1. 2. 3.» accanto ai nostri «01 02 03» — due
   numerazioni sovrapposte. Lo stesso rientro, su `.su-misura`, lasciava
   vedere lo sfondo del contenitore come una striscia grigia a sinistra. */
.clausole { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--eg-s-6); margin-bottom: var(--eg-s-5);
  list-style: none; padding: 0; }
/* Il filetto era bianco pieno e le quattro clausole gridavano più delle tre
   fasi, che sono la sostanza. Restano leggibili, smettono di dominare. */
.clausole li { border-top: 1px solid var(--eg-linea-forte); padding-top: var(--eg-s-3); }
.clausole .n { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); color: var(--eg-accento);
  margin-bottom: var(--eg-s-2); }
.clausole p { font-size: var(--eg-t-2); font-weight: 600;
  line-height: var(--eg-lh-medio); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-inchiostro-2); }
.clausole-coda { font-size: var(--eg-t-1); color: var(--eg-inchiostro-2);
  margin-bottom: var(--eg-s-8); }

/* L'asse del tempo. Le tre barre sono larghe in proporzione a quanto dura
   ciascuna fase: due settimane sono un blocco corto, il flusso il tratto
   lungo, e la manutenzione non finisce — tratteggiata, senza raggio a
   destra. È l'unica cosa che dice «sequenza» senza scriverlo. */

/* Le tre fasi: colonne UGUALI, non proporzionali. La proposta le metteva
   sulle stesse proporzioni delle barre, e per starci mostrava solo la prima
   riga di ognuna — due terzi del copy restavano nei dati. In una sezione che
   vende, il testo che sparisce è l'argomento che sparisce. Le proporzioni
   restano dove portano informazione, cioè sulle barre. */
.su-misura > li.ingresso { border-top-color: var(--eg-accento); }

@media (max-width: 620px) {
  .clausole { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eg-s-5); }
  .clausole p { font-size: var(--eg-t-2); }
}


/* ── Si entra da qui ──────────────────────────────────────────────────────
   Il richiamo all'azione sta dentro la scheda della prova. Staccato sotto le
   tre non lo vedeva nessuno, e soprattutto non diceva più a cosa si
   riferiva: qui è attaccato al prezzo e alla fase da cui si entra.
   `margin-top: auto` lo spinge in fondo, così sta sul piede della scheda
   qualunque sia la lunghezza del testo sopra. ───────────────────────────── */
.su-misura .azione { margin-top: auto; padding-top: var(--eg-s-6); }
.su-misura > li.ingresso .occhiello-accento { margin-bottom: var(--eg-s-2); }


/* ── Il percorso: l'asse e le fasi sulle STESSE colonne ───────────────────
   Nel primo tentativo erano due file separate, e l'asse galleggiava sopra
   tre schede che non gli corrispondevano: un grafico del tempo messo lì per
   bellezza. Con `subgrid` le barre stanno sopra la loro colonna per
   costruzione, non per coincidenza.

   Le colonne sono proporzionali alla durata — 2, 5, 4 — ma con un minimo:
   senza, la «prova» avrebbe il 18% della larghezza per tre paragrafi. La
   scala si vede lo stesso, e il testo non viene schiacciato. ────────────── */
/* Una sola spaziatura fra le colonne — 1px, la stessa che separa le schede —
   e la ereditano entrambi i figli: con due valori diversi le colonne
   ballavano di tre pixel, e l'occhio lo vede anche se il numero sembra
   niente. Il risultato è anche più giusto: un asse continuo, perché le fasi
   si susseguono senza buchi. */
/* Le proporzioni sono 3 : 4,5 : 3 e non 2 : 5 : 4, che erano le durate esatte.
   Con quelle, «La prova» finiva al suo minimo — 240px per tre paragrafi —
   mentre le altre due respiravano: la colonna con più testo era la più
   stretta. Le etichette dicono la durata vera; la barra dice l'ordine —
   corta, lunga, senza fine — e quello resta leggibile lo stesso. */
.percorso { display: grid; column-gap: 1px; row-gap: var(--eg-s-4);
  grid-template-columns: minmax(280px, 3fr) minmax(280px, 4.5fr) minmax(260px, 3fr); }
.asse { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid;
  list-style: none; padding: 0; margin: 0; }
.su-misura { grid-column: 1 / -1; grid-template-columns: subgrid; }

/* Ogni segmento: l'etichetta sopra, la barra sotto. Tutte e tre costruite
   allo stesso modo — prima l'ultima usava un `::after` invece del bordo, e
   con due modelli di scatola diversi non potevano stare sulla stessa
   linea. */
.asse > span { display: block; }
.asse > span i { display: block; font-style: normal; font-size: var(--eg-t-00);
  font-weight: 700; letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-inchiostro-3); margin-bottom: var(--eg-s-3); }
.asse > span b { display: block; height: 10px;
  background: var(--eg-accento-linea); }
.asse > span:first-child b { border-radius: 3px 0 0 3px; }
.asse > .inizio i { color: var(--eg-accento); }
.asse > .inizio b { background: var(--eg-accento); }
/* La manutenzione non ha una fine: il tratteggio lo dice senza una parola,
   e il raggio a destra sparisce perché la barra non finisce lì. */
.asse > .aperta b { border-radius: 0;
  background: repeating-linear-gradient(90deg,
    var(--eg-accento-linea) 0 9px, transparent 9px 18px); }

@media (max-width: 620px) {
  /* Sul telefono le colonne si incolonnano e le proporzioni non dicono più
     niente: l'asse sparisce, le fasi restano in ordine. */
  .percorso { grid-template-columns: minmax(0, 1fr); }
  .asse { display: none; }
}


/* ══ La chiusura, in tre movimenti ═══════════════════════════════════════
   Erano tre sezioni in fila che non si passavano niente: 2.739 px a 1440
   per 388 parole, e quasi tutto era spazio fra un blocco e l'altro — due
   occhielli, due titoli di sezione, quattro margini verticali e due
   stacchi di fondo. Adesso è una sezione sola.               ══════════ */
.coda-sito .h-sez { font-size: var(--eg-t-8);
  margin-block: var(--eg-s-4) var(--eg-s-5); max-width: 18ch; }
.coda-guida { font-size: var(--eg-t-3); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); max-width: 62ch; }

/* Il numero del movimento sta in una colonna sua, stretta: è un segno di
   sequenza, non un titolo. In colonna stretta passa sopra, in linea. */
.movimento { display: grid; grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--eg-s-6); margin-top: var(--eg-s-7);
  padding-top: var(--eg-s-6); border-top: 1px solid var(--eg-linea-su-scura); }
.movimento .numero { font-size: var(--eg-t-5); font-weight: 700;
  line-height: 1; color: var(--eg-accento-chiaro);
  font-variant-numeric: tabular-nums; }
.mov-guida { font-size: var(--eg-t-2); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); max-width: 62ch; margin-bottom: var(--eg-s-6); }
.mov-guida strong { color: var(--eg-inchiostro-su-scura); font-weight: 600; }

/* I tre guasti: sintomo a sinistra, regola a destra. Niente fisarmonica —
   la sezione che parla dei guasti non può aprirsi con tre cassetti chiusi. */
.guasti { list-style: none; padding: 0; display: grid; }
.guasti > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--eg-s-5) var(--eg-s-8); padding: var(--eg-s-6) 0;
  border-top: 1px solid var(--eg-linea-su-scura); align-items: start; }
.guasti > li:first-child { border-top: 0; padding-top: 0; }
.guasti .sintomo { font-size: var(--eg-t-3); font-weight: 700;
  line-height: var(--eg-lh-titolo); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-inchiostro-su-scura); }
.guasti .regola { font-size: var(--eg-t-1); line-height: var(--eg-lh-testo);
  color: var(--eg-su-scura-2); }
.guasti .regola .et { display: block; font-size: var(--eg-t-00); font-weight: 700;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-accento-chiaro); margin-bottom: var(--eg-s-3); }
/* Il riferimento d'archivio in coda, dove stanno i riferimenti. */
.guasti .rif { grid-column: 1; font-size: var(--eg-t-00); font-weight: 600;
  letter-spacing: var(--eg-tr-etichetta); text-transform: uppercase;
  color: var(--eg-su-scura-3); }
.mov-coda { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--eg-s-4) var(--eg-s-6); margin-top: var(--eg-s-6); }
/* `.grigio` è il grigio per fondo chiaro: sul fondo scuro della chiusura
   scendeva a 3,4 di contrasto contro i 4,5 che servono a 13px. */
.mov-coda .grigio { color: var(--eg-su-scura-2); }
/* Il pulsante di prenotazione e la sua riga: la riga sta SOTTO, non
   accanto, perché accanto allungava il blocco oltre la colonna del testo. */
.azione-prenota { display: grid; justify-items: start; gap: var(--eg-s-4);
  margin-top: var(--eg-s-6); }
.azione-prenota .grigio { color: var(--eg-su-scura-2); }

/* Il ritratto smette di stare in basso a sinistra sotto il titolo — la
   posizione in cui si mette una foto quando non si sa dove metterla. */
/* Il ritratto era 200px — cioè 250 di altezza — accanto a una colonna di
   testo alta 430: galleggiava in alto a sinistra con il vuoto sotto, che è
   la posizione in cui si mette una foto quando non si sa dove metterla.
   A 280 il rapporto fra le due colonne torna: 350 contro 430. */
.coda-sito .chi { display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--eg-s-8); align-items: start; }
.coda-sito .chi figure { margin: 0; }
.coda-sito .chi img { width: 280px; height: auto; border-radius: var(--eg-raggio);
  display: block; }
.coda-sito .chi p { line-height: var(--eg-lh-testo); color: var(--eg-su-scura-2);
  max-width: 58ch; }
.coda-sito .chi p + p { margin-top: var(--eg-s-5); }
/* Le due righe che contano hanno due pesi diversi e sono allo stesso
   livello: la prima dice da dove viene, la seconda cosa ha capito. */
/* `margin-block: var(--eg-s-8)` arriva dalla vecchia regola `.chi-apertura`,
   quando questa riga era il titolo di una sezione a sé. Qui è il primo
   paragrafo di una colonna: su desktop il margine non si vede perché la
   foto sta accanto, su telefono diventa un buco di sessantaquattro pixel
   fra il ritratto e la frase. */
.coda-sito .chi-apertura { margin-block: 0 var(--eg-s-6); font-size: var(--eg-t-5); font-weight: 700;
  line-height: var(--eg-lh-titolo); letter-spacing: var(--eg-tr-titolo);
  color: var(--eg-inchiostro-su-scura); max-width: 28ch; }
.coda-sito .chi-tesi { font-size: var(--eg-t-3); color: var(--eg-inchiostro-su-scura);
  border-left: 3px solid var(--eg-accento-chiaro); padding-left: var(--eg-s-5); }

.coda-sito .contatto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--eg-s-9); align-items: start; }
.coda-sito .contatto .invito { font-size: var(--eg-t-4);
  line-height: var(--eg-lh-medio); max-width: 30ch; }

@media (max-width: 900px) {
  .movimento { grid-template-columns: minmax(0, 1fr); gap: var(--eg-s-4); }
  .guasti > li, .coda-sito .chi, .coda-sito .contatto {
    grid-template-columns: minmax(0, 1fr); }
  /* Il ritratto diventa tondo, come in apertura: una foto rotonda accanto
     a un testo si legge come «ecco chi parla», un rettangolo lasciato lì
     si legge come un'immagine messa a caso. Maschera e file sono quelli
     che il sito usa già in cima alla pagina. */
  .coda-sito .chi { gap: var(--eg-s-5); }
  .coda-sito .chi img { width: 104px; height: 104px; aspect-ratio: 1;
    object-position: center; border-radius: 50%;
    -webkit-mask-image: url(assets/ritratto-tondo-maschera.png);
    mask-image: url(assets/ritratto-tondo-maschera.png); }
}