/* Quisquilia · home (mondo B). Si carica dopo base.css. */
/* Tre livelli condivisi per i testi; i titoli conservano le proprie misure adattive. */
.hb {
  --testo-intro: clamp(1.125rem, 1rem + .3vw, 1.25rem);
  --testo-corpo: clamp(1rem, .95rem + .2vw, 1.125rem);
  --testo-nota: .9375rem;
}
.hb .testa .marchio { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; flex-shrink: 0; text-decoration: none; }
.hb .testa-payoff { font-size: 14px; line-height: 1.2; letter-spacing: .01em; }
@media (max-width: 900px) {
  .hb .testa-payoff { font-size: 12px; }
}
/* apertura */
.apertura { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testa-h) + clamp(24px, 4svh, 48px)) 0 clamp(56px, 8svh, 96px); }
.apertura-riga { --apertura-spazio: clamp(24px, 3.5svh, 40px); display: grid; gap: var(--apertura-spazio); }
/* 22/10: la "D" (bold, Geist) ha un bordo sinistro che non tocca il bordo della sua riga — misurato
   con canvas, ~6.7% del corpo del font a ogni dimensione. -.067em riporta il titolo a toccare lo stesso
   bordo della scritta sopra e del paragrafo sotto, in automatico a ogni larghezza. */
.apertura-titolo { font: 500 clamp(3rem, .7rem + 6vw, 7rem)/.92 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; text-shadow: 0 2px 40px rgba(0, 0, 0, .35); margin-left: -.067em; }
.apertura-piede { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4svh, 40px); width: 100%; justify-items: start; }
.apertura-piede .lead { max-width: 62rem; text-wrap: pretty; }
.apertura-piede .azioni { justify-self: end; }
@media (max-width: 700px) { .apertura-piede .azioni { justify-self: start; } }
.lead { font-size: var(--testo-intro); line-height: 1.5; color: var(--sky-chiaro); }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.azioni-nota { font-size: .9375rem; line-height: 1.45; color: var(--nebbia); }
.promessa-testo > p { font-size: var(--testo-intro); }
.promessa .azioni { margin-top: 12px; row-gap: 16px; column-gap: 20px; }
.scendi { position: absolute; right: var(--margine); bottom: 32px; display: flex; align-items: center; gap: 12px; font: 400 .8125rem/1 var(--mono); color: var(--nebbia); }
.scendi i { width: 1px; height: 40px; background: linear-gradient(var(--sky), transparent); animation: scendi 2s var(--esce) infinite; transform-origin: top; }
@keyframes scendi { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 80% */
/* 22/10: come .apertura/.rumore-pin/.intervista-pin/.confronto, la sezione si centra sullo schermo intero
   invece di scorrere come contenuto normale. Il padding-top tiene conto della testata fissa (var(--testa-h)),
   come in .confronto.
   26/10: via il riquadro vetro sulla pensione (si è spostato altrove): restava una seconda colonna vuota
   accanto al titolo. Tolta la colonna, numero e frase occupano tutta la riga: il numero cresce ancora
   (fino a 27rem) per restare il fulcro della sezione, la frase va a capo da sola con "text-wrap: balance",
   come ".chiusa" più sotto nel sito. */
.ottanta { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testa-h) + clamp(12px, 1.6vh, 28px)) 0 clamp(24px, 4vh, 56px); }
.ottanta-griglia { display: grid; gap: clamp(20px, 3vh, 32px); }
.ottanta-titolo { display: grid; gap: 18px; }
.ottanta-numero { font: 400 clamp(8rem, 2rem + 24vw, 27rem)/.8 var(--voce); letter-spacing: -.02em; color: var(--sky); font-variant-numeric: tabular-nums; font-variation-settings: "SOFT" 100, "WONK" 0; }
/* 27/10: il simbolo sta sulla riga del numero, non appeso in alto */
.ottanta-numero small { font-size: .5em; font-weight: 300; margin-left: .06em; vertical-align: baseline; color: var(--sky-chiaro); }
.ottanta-frase { font: 500 clamp(1.7rem, 1rem + 2.4vw, 3.4rem)/1.08 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; }
@media (max-width: 360px) {
  .ottanta-griglia { gap: 16px; }
  .ottanta-titolo { gap: 12px; }
  .ottanta-numero { font-size: 7rem; }
  .ottanta-frase { font-size: 1.5rem; }
}

/* rumore e struttura */
.rumore-pin { min-height: 100svh; display: flex; align-items: center; }
/* L'aggancio nativo conserva larghezza e margini del testo durante tutto lo scroll. */
.moto .rumore { min-height: 320svh; }
.moto .rumore-pin { position: sticky; top: 0; }
/* 23/10 quater: testo e nuvola erano troppo vicini (la colonna del testo arrivava quasi al centro
   schermo, dove sta la formazione). Colonna del testo più stretta (6fr -> 5fr) e gap molto più largo:
   il bordo destro del testo si allontana, la seconda colonna resta vuota com'era (la nuvola non è
   un figlio di questo grid, vedi sopra). */
.rumore-riga { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(40px, 7vw, 140px); align-items: center; }
.rumore-riga > * { grid-column: 1; }
.rumore-frasi { display: grid; position: relative; }
.rf { font: 500 clamp(2.2rem, 1rem + 3.4vw, 4.4rem)/.98 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; }
.moto .rf { position: absolute; inset: 0 0 auto; }
.rumore-dettagli { display: grid; gap: 16px; }
.rf-3 { color: var(--fucsia); text-shadow: 0 2px 30px rgba(244, 54, 76, .28), 0 2px 36px rgba(0, 0, 0, .3); }
/* 23/10 quater: via il pannello blu (sembrava un riquadro da template) E via il filetto orizzontale
   con l'accento verticale che cresceva all'hover (era lo stesso linguaggio di ".righe" nelle pagine
   interne, applicato qui: bocciato anche questo). Le minuzie sono voci raccolte in intervista, non
   righe di tabella: ognuna porta la propria virgoletta, in Fraunces, grande e spenta finché non la si
   legge da vicino — la stessa che useremmo per citare chi l'ha detta. Niente fili: lo spazio verticale
   basta a separarle. Ogni virgoletta ha una leggera inclinazione diversa, e ogni riga un piccolo
   sfalsamento verticale diverso: un'irregolarità minima e voluta, tre appunti presi al volo, non tre
   righe stampate con lo stesso righello. */
.minuzie { display: grid; gap: clamp(2px, 1vh, 10px); padding-top: 0; }
.minuzie li {
  position: relative; display: grid; grid-template-columns: clamp(30px, 3.4vw, 42px) minmax(0, 1fr);
  column-gap: clamp(10px, 1.6vw, 20px); align-items: start;
  padding-block: clamp(12px, 2vh, 18px);
  font-size: var(--testo-corpo); line-height: 1.5; color: var(--sky-chiaro);
  transition: color .35s var(--esce);
}
.minuzie li::before {
  content: "\201C"; display: block; height: 0; overflow: visible;
  font: italic 500 clamp(2.4rem, 1.8rem + 1.8vw, 3.6rem)/1 var(--voce);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  color: var(--pesca); opacity: .9; transform-origin: 30% 70%;
  transform: rotate(var(--inclina, 0deg));
  transition: opacity .4s var(--esce), color .4s var(--esce), transform .4s var(--esce);
}
.minuzie li:nth-child(1) { --inclina: -5deg; }
.minuzie li:nth-child(2) { --inclina: 3deg; margin-top: 2px; }
.minuzie li:nth-child(3) { --inclina: -2deg; margin-top: -2px; }
.minuzie li:hover, .minuzie li:focus-within { color: var(--mint); }
.minuzie li:hover::before, .minuzie li:focus-within::before { opacity: .95; color: var(--sky); transform: rotate(0deg) scale(1.1); }
@media (prefers-reduced-motion: reduce) { .minuzie li::before { transition: none; } }
.rumore-nota { font: 400 .8125rem/1.5 var(--mono); color: var(--nebbia); }

.chiusa-sez { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testa-h) + 48px) 0 48px; }
/* 26/10: la frase torna a occupare tutta ".riga" e a sovrapporsi otticamente agli anelli di sfondo
   (ancorati a destra in questo tratto, vedi "anelliX" in _sorgenti/home.js): quella sovrapposizione
   piaceva. I due problemi veri erano la frase pesca che continuava a metà riga subito dopo "da solo."
   (nessuna cesura tra l'affermazione e la domanda) e un tetto del clamp che a piena larghezza arrivava
   quasi sempre al massimo. Qui si dà alla frase pesca una riga propria (vedi ".chiusa span" sotto) e si
   modera il tetto (4.8rem -> 4.3rem), ritarato a piena larghezza invece che nella colonna stretta. */
.chiusa { font: 500 clamp(1.9rem, 1rem + 3vw, 4.3rem)/1.1 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; text-wrap: balance; }
.chiusa span { display: block; margin-top: .3em; }
/* Il colore di ".chiusa span" è deciso più sotto, nel "giro 6" (pesca): qui restava un residuo
   duplicato con lo sky di una versione precedente, mai attivo perché il giro 6 viene dopo in cascata. */

/* intervista */
.intervista-pin { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testa-h) + clamp(24px, 4svh, 40px)) 0 clamp(24px, 4svh, 40px); }
.intervista-riga { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 80px); align-items: center; }
@media (min-width: 1081px) {
  .intervista-riga { grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); }
}
.intervista-testo-attiva > p { margin-top: 24px; font-size: var(--testo-intro); line-height: 1.5; color: var(--sky-chiaro); }
.intervista-testo-attiva > .intervista-nota { margin-top: clamp(20px, 3vh, 32px); padding-top: 16px; border-top: 1px solid var(--linea); font: 400 .9375rem/1.5 var(--display); letter-spacing: 0; color: var(--nebbia); }
.intervista-nota strong { color: var(--mint); font-weight: 600; }
/* 23/10: schizzo "dissolvenza" — il blocco del report (titolo, testo, rimando) vive nello stesso punto
   dell'intervista invece che più sotto: le due versioni occupano la stessa cella di una griglia e si
   alternano a vicenda (home.js anima l'opacità, niente "position: fixed" né pin più lungo). */
.intervista-testo { position: relative; display: grid; container-type: inline-size; }
.intervista-testo .titolo-sezione { font-size: min(clamp(2.3rem, 1.1rem + 4vw, 5.4rem), 13.4cqw); }
.intervista-testo > * { grid-area: 1 / 1; align-self: start; }
.intervista-testo-successiva { opacity: 0; }
/* Esempio con fondo appena velato e contorno leggero.
   Le righe crescono con la conversazione fino al max-height impostato sotto. */
.console.vetro {
  border-radius: clamp(24px, 2.2vw, 32px);
  background: rgba(142, 183, 206, .055);
  border: 1px solid rgba(214, 229, 238, .24);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.console { padding: clamp(16px, 1.5vw, 22px) clamp(18px, 2vw, 28px); }
.console-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--linea); color: var(--sky-chiaro); }
.console-rec { width: 8px; height: 8px; border-radius: 50%; background: var(--fucsia); }
.console-chi { font-size: .9375rem; color: var(--nebbia); }
.console-testa .etichetta-finta { margin-left: auto; }
.console-onda { width: 100%; height: 96px; margin: 18px 0 8px; }
.console-righe { display: grid; gap: 4px; }
@media (min-width: 901px) { .moto .console-righe { max-height: 21rem; overflow: hidden; align-content: end; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); } }
.console-righe li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-top: 1px solid var(--linea); }
.console-righe .mono { color: var(--nebbia); padding-top: .35em; }
.console-righe p { font-size: var(--testo-corpo); line-height: 1.5; }
.cr-ai p { color: var(--sky-chiaro); }
.cr-p p { color: var(--mint); font-weight: 500; }
.console-righe em { display: inline-block; margin-right: 10px; font: 400 .75rem/1 var(--mono); font-style: normal; color: var(--sky); border: 1px solid rgba(142, 183, 206, .45); padding: 4px 8px; border-radius: 999px; vertical-align: .15em; }
.console-righe .parola { opacity: var(--o, 1); transition: opacity .2s; }

/* Dalle risposte alla lettura: un solo caso, dalla fonte al segnale. */
.report { padding: clamp(80px, 12vh, 140px) 0 clamp(64px, 8vh, 100px); }
.report-capo { display: grid; gap: clamp(16px, 2vw, 24px); }
.report-capo > p { max-width: 960px; font-size: var(--testo-intro); line-height: 1.5; color: var(--sky-chiaro); text-wrap: pretty; }
/* 23/10: stesso materiale di .vetro, non più legata alla classe in HTML (il blocco non è usato
   oggi in questa pagina, ma resta pronto con lo stesso linguaggio visivo se torna a esserlo). */
.lettura {
  position: relative; margin: clamp(28px, 4vh, 48px) 0 0; padding: clamp(22px, 3vw, 44px); border-radius: 26px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(closest-side at 88% 8%, rgba(142, 183, 206, .26), transparent 72%),
    linear-gradient(165deg, rgba(20, 38, 54, .94), rgba(7, 23, 33, .97));
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 130% 130%, 100% 100%;
  background-blend-mode: overlay, screen, normal;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 36px 76px -40px rgba(0, 0, 0, .75);
}
.lettura-testa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-bottom: 22px; border-bottom: 1px solid var(--linea); font-size: .9375rem; font-weight: 600; }
.lettura-testa > span:first-child > span { font-weight: 400; color: var(--nebbia); }
.lettura-passaggi { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); padding-block: clamp(24px, 3vw, 40px); }
.lettura h3 { font-size: .875rem; font-weight: 500; color: var(--nebbia); margin-bottom: 16px; }
.lettura-voce { border-right: 1px solid var(--linea); padding-right: clamp(24px, 4vw, 64px); }
.lettura blockquote { font: 500 clamp(1.35rem, 1rem + 1vw, 2rem)/1.3 var(--display); letter-spacing: -.025em; }
.lettura mark { color: var(--pesca); background: transparent; }
.lettura .fonte { margin-top: 18px; }
.lettura-dato { color: var(--sky-chiaro); font-size: 1rem; line-height: 1.5; }
.lettura-dato strong { display: block; color: var(--mint); font: 500 clamp(2.5rem, 2rem + 1.5vw, 4rem)/1 var(--display); letter-spacing: -.04em; margin-bottom: 14px; }
.lettura-dato strong span { font-size: .4em; color: var(--nebbia); letter-spacing: -.02em; }
.lettura-persone { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; max-width: 340px; margin-top: 20px; }
.lettura-persone span { aspect-ratio: 1; border-radius: 50%; background: rgba(214, 229, 238, .14); }
.lettura-persone .presente { background: var(--sky); }
.lettura-nota { font-size: .75rem; color: var(--nebbia); margin-top: 10px; }
.lettura-esito { display: grid; grid-template-columns: minmax(100px, 1fr) 4fr; align-items: baseline; gap: 12px 32px; padding-top: 22px; border-top: 1px solid var(--linea); }
.lettura-esito h3 { color: var(--pesca); margin: 0; }
.lettura-esito p { color: var(--sky-chiaro); font-size: clamp(1rem, .95rem + .25vw, 1.2rem); line-height: 1.5; }
.lettura-esito strong { font-weight: 500; color: var(--mint); }
@media (max-width: 700px) {
  .lettura-passaggi { grid-template-columns: 1fr; gap: 24px; }
  .lettura-voce { border-right: 0; padding: 0 0 24px; border-bottom: 1px solid var(--linea); }
  .lettura-esito { grid-template-columns: 1fr; gap: 8px; }
  .lettura-testa > span:first-child > span { display: block; margin-top: 4px; }
}
/* cos'è */
.cose { padding: clamp(100px, 16vh, 200px) 0; }
/* 26/10: titolo "Dove ti serve." e paragrafo erano due colonne (max-content / 1fr): il paragrafo, una
   riga sola, finiva appeso al bordo destro della riga, lontano dal titolo. Stesso correttivo di
   ".confronto .capo": niente colonne, titolo e paragrafo impilati in una colonna sola, vicini. */
.cose-capo { display: grid; gap: clamp(12px, 2vh, 20px); }
.cose-capo .titolo-sezione { font-size: clamp(2.3rem, 4vw, 4.8rem); }
.cose-testo { font-size: var(--testo-intro); line-height: 1.5; color: var(--sky-chiaro); text-wrap: pretty; }
.cose-testo b { color: var(--mint); font-weight: 600; }
@media (min-width: 1081px) {
  .cose { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testa-h) + 48px) 0 24px; }
  .cose .usi { margin-top: clamp(24px, 4svh, 40px); }
  .cose .usi li { padding-block: clamp(18px, 3svh, 32px); }
}
.usi { margin-top: clamp(40px, 7vh, 80px); border-bottom: 1px solid var(--linea); transition: border-color .3s; }
/* 22/10: la parola gigante (8.5rem, poi 5rem) viveva separata dalla domanda, su due colonne centrate:
   uno squilibrio di scala forte e una domanda "persa" a distanza. La riga ora è una sola frase,
   parola e domanda nello stesso filo di testo, colorate in modo diverso: niente più due blocchi
   scollegati, la risposta segue a ridosso. */
.usi li { position: relative; padding: clamp(28px, 4vh, 48px) 0; border-top: 1px solid var(--linea); transition: border-color .3s; }
/* 22/10: le righe divisorie restano larghe quanto la colonna di testo (non devono sfondare come il
   bagliore): quando il bagliore corallo sfonda a piena larghezza, dove la riga finisce si vedeva un
   piccolo gradino. Invece di allungare le righe, le dissolvo proprio sulla coppia di righe coinvolte
   (quella sopra e quella sotto il blocco in hover, più il bordo finale della lista se è l'ultimo). */
.usi li:is(:hover, :focus-within),
.usi li:is(:hover, :focus-within) + li { border-top-color: transparent; }
.usi:has(> li:last-child:is(:hover, :focus-within)) { border-bottom-color: transparent; }
/* 22/10: il bordo vero dello schermo, non quello della colonna di testo: sugli schermi larghi .riga
   è centrata con un vuoto ai lati (oltre 1680px di contenuto), quindi il bagliore deve sfondare oltre
   .riga stessa. .riga ha "overflow-x: clip" (serve altrove, per le maschere dei titoli): qui lo
   disattivo solo per questa sezione, che non ne ha bisogno, e lascio che il bagliore esca a piena
   larghezza con il trucco classico "rompi il contenitore" (50% + margine -50vw). */
.cose .riga { overflow-x: visible; }
.usi li::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; right: 50%; margin: 0 -50vw;
  background: linear-gradient(90deg, rgba(142, 183, 206, .1), transparent 70%); opacity: 0; transition: opacity .5s; pointer-events: none;
}
.usi li:is(:hover, :focus-within)::before { opacity: 1; }
.uso-riga { font: 600 clamp(1.9rem, 1.1rem + 2.6vw, 3.4rem)/1.18 var(--display); letter-spacing: -.03em; text-wrap: balance; transition: transform .5s var(--esce), letter-spacing .5s var(--esce); }
.uso-parola { color: var(--sky); transition: color .4s, text-shadow .4s; }
.uso-domanda { color: var(--mint); font-size: .54em; font-weight: 500; letter-spacing: -.01em; transition: color .4s; }
/* 23/10: effetto un filo più marcato (più corsa, un'ombra morbida sulla parola, lettering che si
   stringe appena): stessa frase unica di prima, nessun blocco nuovo. */
.usi li:is(:hover, :focus-within) .uso-riga { transform: translateX(16px); letter-spacing: -.034em; }
.usi li:is(:hover, :focus-within) .uso-parola { text-shadow: 0 0 28px rgba(142, 183, 206, .45); }
.usi li:is(:hover, :focus-within) .uso-domanda { color: var(--pesca); }
.usi .uso-spiegazione { margin-top: 14px; font-size: var(--testo-corpo); line-height: 1.5; color: var(--sky-chiaro); }
@media (prefers-reduced-motion: reduce) {
  .uso-riga, .uso-parola { transition: none; }
  .usi li:is(:hover, :focus-within) .uso-riga { transform: none; letter-spacing: -.03em; }
  .usi li:is(:hover, :focus-within) .uso-parola { text-shadow: none; }
}

/* confronto */
/* 26/10: la sezione resta un'unica schermata come ".ottanta"/".cose" (non deve sporgere sopra né sotto
   il viewport, anche su un laptop basso come 1440×764): a cambiare non è la disciplina del capitolo,
   ma cosa ci sta dentro. Via il pannello di vetro intorno a tabella/legenda/rimando (sembrava un
   riquadro generico da dashboard su un campo già scuro e vivo) e via le interruzioni scritte a mano
   nel titolo e nel paragrafo (due <span> forzati a riga propria, un <br> nel testo): bastava una
   larghezza di colonna diversa perché il punto di rottura finisse in un posto brutto. Il titolo si
   limita in altezza con "7svh" (come già faceva), il paragrafo e la tabella si stringono un filo sugli
   schermi bassi (vedi i media query più sotto): tutto il resto va a capo da solo. */
.confronto { min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testa-h) + clamp(10px, 1.4vh, 24px)) 0 clamp(16px, 2.6vh, 40px); }
/* titolo e paragrafo affiancati: stesso pattern di metodo.html (.capo), non caricato qui perché home usa home.css e non interne.css */
.capo { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px clamp(24px, 4vw, 80px); align-items: end; }
.capo > p { font-size: var(--testo-intro); line-height: 1.5; color: var(--sky-chiaro); }
.confronto .titolo-sezione { font-size: min(clamp(2.3rem, 1.1rem + 4vw, 5.4rem), 7svh); }
/* 26/10 bis: qui il paragrafo è una sola riga corta: in due colonne affiancate (come ".rumore-riga",
   pensate per testi più lunghi) restava comunque "appeso" a destra, lontano dal
   titolo, qualunque fosse il gap. Niente colonne: titolo e paragrafo stanno in un'unica colonna,
   impilati e allineati a sinistra come due righe della stessa frase, non due blocchi separati. */
.confronto .capo { grid-template-columns: 1fr; align-items: start; gap: clamp(14px, 2.2vh, 24px); }
/* 26/10 quater: le prime due frasi stanno sulla stessa riga quando la colonna è larga abbastanza, e vanno
   a capo tra loro solo se davvero non ci stanno: nessun "max-width" sul paragrafo che le spezzi prima del
   dovuto, nessun "balance" che le dividerebbe in due righe pari anche quando una sola basta. Il paragrafo
   riempie la sua colonna, come il titolo sopra: va a capo in modo naturale, come il resto dei testi del sito. */
/* 26/10 ter: la frase su Quisquilia chiude il ragionamento (form / intervista / Quisquilia) e vuole
   una riga propria, come ".chiusa span" più sopra nel sito: le prime due frasi restano libere di andare
   a capo naturalmente tra loro, solo questa è forzata a riga nuova con "display: block". */
.confronto .capo > p span { display: block; }
/* 21/10: il grafico a dispersione è sparito, poi tornato con le card. 23/10: le card sono sparite per davvero,
   al loro posto un grafico (scala/profondità) con marcatori puliti invece del vecchio pasticcio di puntini e pillole.
   26/10: tabella più larga del grafico (8fr/4fr, come prima): una colonna più stretta per il grafico lo
   tiene piccolo anche sugli schermi bassi, dove l'altezza disponibile è la stessa della tabella. Sotto i
   1081px tabella e grafico restano impilati (vedi il media query più in basso). */
.confronto-corpo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(16px, 2.4vh, 32px) clamp(28px, 3vw, 48px); align-items: start; margin-top: clamp(28px, 6vh, 64px); }
.confronto-tabella { min-width: 0; }
.confronto-metodi { display: none; }
/* 26/10: la tabella sta sulla scena come le liste a fili altrove (".usi", le minuzie del rumore): stessi
   fili orizzontali, stesso fondo scenico già attenuato ("dim" in home.js vale .35 qui, uguale a ".cose"
   dove ".usi" funziona senza alcun pannello). */
.confronto-tavola { min-width: 0; }
.confronto-mini { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .9375rem; line-height: 1.55; }
.confronto-mini th, .confronto-mini td { text-align: left; vertical-align: top; padding: 9px 16px; border-top: 1px solid rgba(214, 229, 238, .18); }
.confronto-mini thead th, .confronto-mini thead td { border-top: 0; font-weight: 600; padding-top: 10px; padding-bottom: 10px; }
.confronto-mini thead th { color: var(--mint); }
.confronto-mini thead td:first-child { width: 23%; }
.confronto-mini thead .noi { width: 31%; }
.confronto-mini tbody th { font-weight: 600; color: var(--mint); width: 25%; }
.confronto-mini td { color: var(--sky-chiaro); }
/* Stessa linea su tutta la riga, anche nella colonna evidenziata: una colonna segnata da un fondo
   leggero, non una scheda a parte dentro la tabella. */
.confronto-mini .noi { color: var(--mint); background: rgba(142, 183, 206, .1); }
.confronto-mini thead .noi { color: #fff; font-weight: 700; background: rgba(142, 183, 206, .16); border-radius: 16px 16px 0 0; }
.confronto-mini tbody tr:last-child .noi { border-radius: 0 0 16px 16px; }
.confronto-mini tbody tr:last-child > * { padding-bottom: 12px; }
.confronto-valore { display: flex; align-items: flex-start; gap: 10px; }
.confronto-valore > :last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.confronto-mini th { overflow-wrap: anywhere; hyphens: auto; }
.confronto-indicatore { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; box-sizing: border-box; margin-top: .4em; border: 1px solid currentColor; border-radius: 50%; background: currentColor; color: var(--sky-chiaro); }
.confronto-indicatore--parziale { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.confronto-indicatore--limitato { background: transparent; opacity: .55; }
.confronto-mini .noi .confronto-indicatore { color: var(--sky); }
/* 26/10: legenda e rimando escono dal pannello e diventano un unico piede sotto la tabella, separato
   da un filo solo (come ".usi"), non più un bordo proprio della legenda incollato dentro il vetro. */
.confronto-piede { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 32px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--linea); }
.confronto-legenda { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--sky-chiaro); font-size: .75rem; }
.confronto-legenda > span { display: inline-flex; align-items: center; gap: 7px; }
.confronto-legenda .confronto-indicatore { margin-top: 0; }
.confronto-piede .rimando { margin-top: 0; }
@media (max-width: 600px) {
  .confronto-mini th, .confronto-mini td { padding: 12px; }
}
@media (max-width: 700px) {
  .confronto-interattivo .confronto-metodi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .confronto-metodi button { min-height: 48px; border: 1px solid var(--linea); border-radius: 12px; padding: 9px 6px; background: rgba(7, 28, 39, .5); color: var(--sky-chiaro); font: 500 .8125rem/1.3 var(--display); cursor: pointer; }
  .confronto-metodi button[aria-pressed="true"] { color: var(--pesca); border-color: var(--sky); background: rgba(142, 183, 206, .13); }
  .confronto-interattivo .confronto-mini { min-width: 0; table-layout: fixed; }
  .confronto-interattivo .confronto-mini th:first-child, .confronto-interattivo .confronto-mini thead td:first-child { width: 44%; }
  .confronto-interattivo .confronto-mini [data-confronto-colonna] { display: none; width: 56%; }
  .confronto-interattivo[data-confronto-selezionato="form"] .confronto-mini [data-confronto-colonna="form"],
  .confronto-interattivo[data-confronto-selezionato="umana"] .confronto-mini [data-confronto-colonna="umana"],
  .confronto-interattivo[data-confronto-selezionato="noi"] .confronto-mini [data-confronto-colonna="noi"] { display: table-cell; }
  .confronto-interattivo .confronto-mini thead th { white-space: normal; }
  .confronto-interattivo .confronto-mini tbody th, .confronto-interattivo .confronto-mini thead td { position: static; background: transparent; }
  .confronto-interattivo .confronto-piede { width: 100%; }
  .confronto-interattivo .confronto-legenda { width: auto; gap: 10px 14px; }
}
/* grafico scala/profondità: tre marcatori, niente puntini né pillole */
/* 26/10: il grafico ha un tetto in larghezza proprio (non più legato all'altezza dello schermo, vedi
   più sotto): affiancato alla tabella parte dall'alto della sua colonna (".confronto-corpo" ora è
   align-items:start, non più center, perché le due colonne non devono più avere la stessa altezza
   per forza). */
.assi-grafico { margin: 0; }
.assi-tela { position: relative; --assi-spazio: 12px; --assi-nome-spazio: 8px; }
.assi-svg { display: block; width: 100%; height: auto; overflow: visible; }
.assi-linea, .assi-punta { fill: none; stroke: rgba(214, 229, 238, .55); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.assi-punto { stroke-width: 1.5; }
.assi-punto--form, .assi-punto--umana, .assi-punto--noi { fill: rgba(214, 229, 238, .07); stroke: rgba(214, 229, 238, .55); }
.assi-asse { position: absolute; font: 500 .8125rem/1 var(--display); color: var(--nebbia); }
.assi-asse--y { left: 12.5%; bottom: calc(92.6470588% + var(--assi-spazio)); transform: translateX(-50%); }
.assi-asse--x { left: 95%; top: calc(88.2352941% + var(--assi-spazio)); transform: translateX(-50%); }
.assi-etichetta { position: absolute; display: grid; gap: 3px; width: 34%; margin: 0; text-align: center; transform: translateX(-50%); font-size: clamp(.75rem, .7rem + .15vw, .8125rem); line-height: 1.4; color: var(--nebbia); }
.assi-etichetta b { font: 600 clamp(.9375rem, .85rem + .2vw, 1.0625rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--mint); }
.assi-etichetta--umana { left: 30%; top: calc(23.2352941% + var(--assi-nome-spazio)); }
.assi-etichetta--noi { left: 75%; top: calc(26.1764706% + var(--assi-nome-spazio)); }
.assi-etichetta--form { left: 75%; top: calc(62.9411765% + var(--assi-nome-spazio)); }

/* Un'unica selezione per grafico e tabella, anche da tastiera. */
.confronto-scelta, .assi-nome { appearance: none; border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.confronto-scelta { min-height: 44px; margin-block: -8px; }
.assi-nome { min-height: 24px; text-decoration: none; }
.confronto-scelta:hover, .confronto-scelta[aria-pressed="true"] { color: var(--pesca); }
.assi-nome:hover, .assi-nome[aria-pressed="true"] { color: var(--pesca); }
.assi-selettore { position: absolute; left: 75%; width: 12%; min-width: 44px; min-height: 44px; aspect-ratio: 1; transform: translate(-50%, -50%); appearance: none; border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.assi-selettore--umana { left: 30%; top: 19.1176471%; width: 7%; }
.assi-selettore--noi { top: 19.1176471%; }
.assi-selettore--form { top: 55.8823529%; }
.assi-aura { fill: var(--pesca); opacity: 0; transition: opacity .25s; pointer-events: none; }
.confronto[data-confronto-selezionato="form"] .assi-aura--form,
.confronto[data-confronto-selezionato="umana"] .assi-aura--umana,
.confronto[data-confronto-selezionato="noi"] .assi-aura--noi { opacity: .35; }
.confronto-interattivo .confronto-mini .confronto-indicatore { transition: color .2s; }
.confronto-interattivo .confronto-mini .noi .confronto-indicatore { color: var(--sky-chiaro); }
.confronto-interattivo .confronto-mini td.vantaggio-attivo .confronto-indicatore { color: var(--pesca); }
@media (pointer: coarse) { .assi-nome { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .assi-aura, .confronto-interattivo .confronto-mini .confronto-indicatore { transition: none; } }

/* responsive della home */
@media (max-width: 1080px) {
  .apertura-piede, .intervista-riga, .rumore-riga, .capo, .confronto .capo, .confronto-corpo { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .scendi { display: none; } }
@media (max-width: 600px) {
  .apertura { padding-bottom: 56px; }
  .console-righe li { grid-template-columns: 1fr; gap: 2px; }
  .console-testa .etichetta-finta { margin-left: 0; }
  /* sotto i 600px la domanda va a capo dentro ".uso-riga": restando inline eredita l'altezza di riga
     della parola grande (quasi il doppio della propria), e lo spazio tra le righe si allarga apparendo
     rotto. In blocco la domanda calcola l'altezza di riga sulla propria dimensione. */
  .uso-domanda { display: block; margin-top: 2px; }
}

/* giro di correzioni */
.scendi, .rumore-nota, .console-righe em { font-family: var(--display); letter-spacing: 0; }
.rumore-nota { font-size: var(--testo-nota); }
.console-righe em { font-size: .8125rem; }
.t-citazione-testa { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; }
.t-citazione-testa .mono { color: var(--pesca); }
.console-onda { height: 48px; margin: 12px 0 4px; }
@media (min-width: 901px) { .moto .console-righe { max-height: 15.5rem; -webkit-mask-image: linear-gradient(transparent, #000 9%); mask-image: linear-gradient(transparent, #000 9%); } }
/* giro 6 (12/10): più caldo. Corallo per ciò che è vivo, pesca per la persona che parla e per i dati. */
.ottanta-numero small { color: var(--pesca); }
.chiusa span { color: var(--pesca); }
.console-righe em { color: var(--pesca); border-color: rgba(247, 205, 182, .45); }
.cr-p p { color: #fdeee5; }
.usi li::before { background: linear-gradient(90deg, rgba(142, 183, 206, .14), rgba(247, 205, 182, .1) 55%, transparent 78%); }

/* Dopo la lettura, il catalogo degli output. */
.report-rimandi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 36px; margin-top: 24px; }
.report-rimandi .rimando { margin-top: 0; }
.rimando--forte { height: 52px; padding: 0 22px 0 24px; border-radius: 999px; color: var(--mint); box-shadow: 0 0 0 1.5px rgba(214, 229, 238, .4) inset; transition: background-color .3s, box-shadow .3s; }
.rimando--forte:hover { text-decoration: none; background: rgba(214, 229, 238, .08); box-shadow: 0 0 0 1.5px var(--sky-chiaro) inset; }

/* 15/10: schede grafiche a bassa precisione. Il fondo calcolato si spezzava in poligoni: qui è una sfumatura fissa, stessi colori */
.fondo-semplice .scena {
  background:
    radial-gradient(60% 55% at 12% 88%, rgba(247, 205, 182, .30), rgba(244, 54, 76, .10) 45%, transparent 70%),
    radial-gradient(55% 60% at 70% 30%, rgba(29, 47, 122, .55), transparent 70%),
    radial-gradient(40% 40% at 85% 70%, rgba(142, 183, 206, .12), transparent 70%),
    radial-gradient(120% 90% at 50% 45%, #0e2e3e, #071c27 75%);
}

/* ===================================================================== adattivo (21/10) */
/* titolo d'apertura: sui telefoni stretti occupava sei righe e spingeva il comando sotto la piega */
.apertura-titolo { font-size: clamp(2.5rem, 1rem + 5.4vw, 7rem); }

/* rumore: il blocco fissato resta sotto la testata e si stringe sugli schermi bassi */
.rumore-pin { padding: calc(var(--testa-h) + 8px) 0 16px; }
.rumore-riga { row-gap: clamp(12px, 2svh, 20px); }
.minuzie li { padding-block: clamp(10px, 2.2svh, 18px); }
@media (max-width: 600px) {
  .minuzie li { font-size: 1rem; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; }
  .minuzie li::before { font-size: 2rem; }
}

/* intervista: tra 901 e 1080 il blocco è fissato, quindi resta su due colonne. In colonna unica era più alto dello schermo. */
@media (min-width: 901px) and (max-width: 1080px) {
  .intervista-riga { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* 80%: il numero (clamp fino a 27rem) è la parte più pesante della sezione. Sotto i 920px di altezza
   lo limito anche in vh, non solo in vw, così sui laptop comuni (800-900px di schermo) la sezione
   resta dentro la schermata invece di sporgere in basso. */
@media (min-width: 901px) and (max-height: 920px) {
  .ottanta-numero { font-size: min(clamp(8rem, 2rem + 24vw, 27rem), 28svh); }
}

/* schermi molto bassi (portatili piccoli, telefono in orizzontale): titoli e righe seguono l'altezza */
/* Lettura e confronto seguono anche l'altezza, senza ritagliare i contenuti. */
@media (min-width: 1081px) {
  .report { padding-top: calc(var(--testa-h) + clamp(48px, 8vh, 100px)); }
  .report-capo { gap: clamp(12px, 2svh, 24px); }
  .lettura { margin-top: clamp(18px, 3svh, 32px); padding: clamp(20px, 3svh, 36px); }
  .lettura-testa { padding-bottom: clamp(12px, 2svh, 22px); }
  .lettura-passaggi { padding-block: clamp(18px, 3svh, 32px); }
  .lettura h3 { margin-bottom: 12px; }
  .lettura blockquote { font-size: clamp(1.35rem, 3.2svh, 2rem); }
  .lettura-dato strong { font-size: clamp(2.5rem, 6svh, 4rem); margin-bottom: 10px; }
  .lettura-persone { margin-top: 14px; }
  .lettura-esito { padding-top: clamp(12px, 2svh, 22px); }
  .report-rimandi { margin-top: 16px; }
  .confronto-mini th, .confronto-mini td { padding-inline: clamp(8px, 1vw, 16px); }
  /* affiancato alla tabella (colonna 4fr di ".confronto-corpo"), il grafico segue anche l'altezza dello
     schermo: su un laptop basso la colonna è già stretta, ma lo spazio verticale lo è altrettanto. */
  .assi-tela { width: min(100%, 54svh); margin-inline: auto; }
}
@media (min-width: 1081px) and (max-height: 820px) {
  .confronto-mini { font-size: .875rem; line-height: 1.4; }
  .confronto-mini th, .confronto-mini td { padding-block: 6px; }
  .confronto-mini thead th, .confronto-mini thead td { padding-block: 7px; }
  .confronto .capo { align-items: center; }
}
@media (max-width: 1080px) {
  .assi-tela { max-width: 520px; margin-inline: auto; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .intervista-pin { padding-top: calc(var(--testa-h) + 4px); padding-bottom: 8px; }
  .intervista .titolo-sezione { font-size: min(clamp(2.3rem, 1.1rem + 4vw, 5.4rem), 13.4cqw, 9vh); }
  .console-onda { height: min(48px, 7vh); margin: 10px 0 4px; }
  .moto .console-righe { max-height: min(15.5rem, calc(100svh - 21rem)); }
}
@media (max-height: 480px) {
  .rumore-pin { padding: calc(var(--testa-h) + 4px) 0 8px; }
  .rf { font-size: min(clamp(2.2rem, 1rem + 3.4vw, 4.4rem), 10svh); }
  .minuzie li { padding-block: 4px; font-size: .9375rem; line-height: 1.3; }
  .minuzie li::before { font-size: 1.6rem; }
  .rumore-nota { font-size: .8125rem; }
}

/* telefono in orizzontale (26/10): ".apertura", ".ottanta", ".chiusa-sez" e ".confronto" sono pensate
   per stare in un'unica schermata (min-height:100svh, centrate con flex) a ogni larghezza, non solo sui
   laptop (le altre sezioni "a schermo intero" sopra sono già coperte: ".rumore-pin" si stringe con
   max-height:480px qui sopra, ".intervista-pin" e ".cose" non forzano lo schermo intero sotto i 1081px).
   Su un telefono girato (es. 844×390) il loro contenuto è più alto dei 390px disponibili: centrato con
   "align-items: center" in una scatola che non può crescere oltre il contenuto reale, il testo finiva
   per sporgere sopra e sotto il bordo dello schermo, invisibile per tutta la sezione (non è un blocco
   fissato, quindi non c'è nemmeno altro scroll che lo riveli). Sotto i 500px di altezza, invece di
   stringere ancora testo e numeri già ridotti al minimo, tolgo il vincolo di schermo intero: le sezioni
   tornano a essere contenuto normale, alte quanto serve, e si scorrono come il resto della pagina. */
@media (max-height: 500px) and (max-width: 950px) {
  .apertura, .ottanta, .chiusa-sez, .confronto {
    min-height: 0;
    display: block;
  }
  .apertura { padding: calc(var(--testa-h) + 16px) 0 28px; }
  .apertura-riga { --apertura-spazio: 14px; }
  .scendi { display: none; }
  .ottanta { padding: calc(var(--testa-h) + 10px) 0 20px; }
  .ottanta-griglia { gap: 12px; }
  .ottanta-titolo { gap: 8px; }
  .ottanta-numero { font-size: min(clamp(8rem, 2rem + 24vw, 27rem), 30svh); }
  .chiusa-sez { padding: calc(var(--testa-h) + 16px) 0 20px; }
  .confronto { padding: calc(var(--testa-h) + 10px) 0 20px; }
  .confronto .capo { gap: 10px; }
  .confronto-corpo { margin-top: 14px; }
}

/* 27/10: la frase dell'80% sta su tre righe nella sua colonna, a destra resta lo spazio per la testa di punti */
@media (min-width: 901px) { .ottanta-frase { max-width: 66%; } }
@media (min-width: 901px) and (max-width: 1200px) { .ottanta-frase { max-width: 76%; } }


/* ===================================================================== velocità o profondità (27/10)
   Due leve legate: se ne accendi una l'altra si spegne. Finché nessuno le tocca si alternano da sole.
   Sotto la leva di Quisquilia le accende tutte e due, con i coriandoli; se nessuno la tocca si accende scorrendo.
   Viene dalla prova in _lavoro/confronto-ui (direzione 1). Sostituisce tabella e matrice. */
.confronto { --corallo: #ff7c8b; }
.confronto-corpo, .confronto-mini, .assi-grafico { display: none; }
.d1-corpo { display: grid; gap: clamp(18px, 3.6vh, 44px); margin-top: clamp(20px, 4vh, 48px); }
.confronto .ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.d1-righe li, .d2-righe li, .d3-cella { display: grid; grid-template-columns: 20px auto minmax(0, 1fr); align-items: center; gap: 14px; }
.r-nome { font-weight: 600; color: var(--mint); white-space: nowrap; }
.r-valore { text-align: right; color: var(--sky-chiaro); }
.r-valore > span { display: inline-block; }
.d1-griglia { display: grid; gap: clamp(22px, 4.6vh, 56px); }
/* le due leve si guardano: Velocità ha la leva sul lato del legame */
.d1-lato[data-lato="vel"] .d1-leva { flex-direction: row-reverse; margin-left: auto; text-align: right; }
.d1-lato[data-lato="vel"] .d1-leva { display: flex; width: 100%; justify-content: flex-start; }

.d1-strumento { display: grid; grid-template-columns: minmax(0, 1fr) clamp(64px, 8vw, 132px) minmax(0, 1fr); align-items: start; }
.d1-leva { display: flex; align-items: center; gap: clamp(14px, 1.4vw, 22px); padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; border-radius: 14px; }
.d1-leva:focus-visible { outline-offset: 8px; }
.leva-binario { position: relative; flex: none; width: 80px; height: 44px; border-radius: 999px; background: rgba(214, 229, 238, .08); box-shadow: 0 0 0 1.5px rgba(214, 229, 238, .32) inset; transition: background-color .45s var(--esce), box-shadow .45s; }
.leva-pomo { position: absolute; top: 6px; left: 6px; width: 32px; height: 32px; border-radius: 50%; background: var(--nebbia); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); transition: transform .55s var(--esce), background-color .35s; }
.d1-leva[aria-checked="true"] .leva-binario { background: var(--sky); box-shadow: none; }
.d1-leva[aria-checked="true"] .leva-pomo { transform: translateX(36px); background: var(--notte); }
.d1-leva:hover .leva-binario { box-shadow: 0 0 0 1.5px var(--sky-chiaro) inset; }
.leva-nome { display: block; font: 500 clamp(1.7rem, 1rem + 2vw, 3rem)/1 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--mint); transition: color .45s, -webkit-text-stroke-color .45s; }
.leva-nota { display: block; margin-top: 6px; font-size: .9375rem; color: var(--sky-chiaro); transition: color .45s; }
.d1-leva[aria-checked="false"] .leva-nome { color: transparent; -webkit-text-stroke: 1.2px rgba(169, 191, 204, .75); }
.d1-leva[aria-checked="false"] .leva-nota { color: var(--nebbia); }

.d1-righe { margin-top: clamp(14px, 2.6vh, 28px); border-top: 1px solid var(--linea); }
.d1-righe li { padding: clamp(10px, 1.7vh, 16px) 0; border-bottom: 1px solid var(--linea); font-size: var(--t-testo); }
.d1-righe .ic { color: var(--sky); transition: color .45s, opacity .45s; }
.d1-righe .r-nome, .d1-righe .r-valore { transition: color .45s; }
.d1-righe .r-valore { color: var(--mint); font-weight: 500; }
.d1-lato.spento .ic { color: var(--nebbia); opacity: .55; }
.d1-lato.spento .r-nome { color: var(--nebbia); }
.d1-lato.spento .r-valore { color: var(--nebbia); font-weight: 400; }
.d1-strumento[data-stato="noi"] .r-valore { color: var(--pesca); }

/* il legame fra le due leve */
.d1-legame { display: flex; align-items: center; height: 44px; margin-top: calc((clamp(1.7rem, 1rem + 2vw, 3rem) + 1.25rem - 44px) / 2); padding: 0 6px; color: var(--sky); }
.legame-filo { flex: 1; height: 2px; border-radius: 2px; background: rgba(142, 183, 206, .55); transition: transform .6s var(--esce), opacity .6s; }
.legame-filo--a { transform-origin: left; }
.legame-filo--b { transform-origin: right; }
.legame-nodo { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(142, 183, 206, .55) inset; }
.legame-nodo .ic { grid-area: 1 / 1; transition: opacity .35s, transform .5s var(--esce); }
.legame-nodo .ic-slegato { opacity: 0; transform: scale(.6); }
.d1-strumento[data-stato="noi"] .legame-filo { transform: scaleX(.18); opacity: .35; }
.d1-strumento[data-stato="noi"] .legame-nodo { color: var(--pesca); box-shadow: 0 0 0 1.5px rgba(247, 205, 182, .6) inset; }
.d1-strumento[data-stato="noi"] .ic-legato { opacity: 0; transform: scale(.6); }
.d1-strumento[data-stato="noi"] .ic-slegato { opacity: 1; transform: none; }

.d1-esito { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px clamp(20px, 3vw, 48px); padding-top: clamp(16px, 2.6vh, 28px); border-top: 1px solid var(--linea); }
.esito-frase { font: 500 clamp(1.5rem, 1rem + 1.4vw, 2.4rem)/1.1 var(--voce); letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 0; color: var(--sky-chiaro); }
.esito-nome { display: inline-block; color: var(--mint); }
.d1-esito.noi .esito-nome { color: var(--corallo); }
.esito-aiuto { grid-column: 1; font-size: .9375rem; color: var(--nebbia); }
.esito-azioni { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 12px; }
.d1-legame { height: 64px; margin-top: calc((clamp(1.7rem, 1rem + 2vw, 3rem) + 1.25rem - 64px) / 2); }
.festa { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 50; pointer-events: none; }


/* 27/10 · sopra le leve il «prima», sotto la leva di Quisquilia, uguale alle altre con il marchio nel pomo */
.d1-prima { font: 500 var(--t-piccolo)/1 var(--mono); letter-spacing: .02em; color: var(--nebbia); text-align: center; margin-bottom: calc(-1 * clamp(10px, 2vh, 30px)); }
.d1-esito { grid-template-columns: auto minmax(0, 1fr); }
.d1-esito .esito-frase { justify-self: end; text-align: right; }
.d1-leva--q .leva-binario { width: 92px; height: 52px; }
.d1-leva--q .leva-pomo { width: 40px; height: 40px; display: grid; place-items: center; background: var(--notte); box-shadow: 0 0 0 1.5px rgba(142, 183, 206, .55) inset; }
.d1-leva--q .leva-pomo img { width: 28px; height: 28px; display: block; }
.d1-leva--q[aria-checked="true"] .leva-binario { background: var(--pesca); }
.d1-leva--q[aria-checked="true"] .leva-pomo { transform: translateX(40px); background: var(--notte); box-shadow: none; }
.d1-leva--q[aria-checked="false"] .leva-nome { color: var(--mint); -webkit-text-stroke: 0; }
.d1-leva--q[aria-checked="true"] .leva-nome { color: var(--pesca); }
.d1-leva--q .leva-nome { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); }
@media (max-width: 760px) {
  .d1-prima { text-align: left; margin-bottom: -8px; }
  .d1-esito { grid-template-columns: 1fr; }
  .d1-esito .esito-frase { justify-self: start; text-align: left; }
}

@media (max-width: 700px) {
  .ic { width: 18px; height: 18px; }
  .d1-griglia { gap: 18px; }
  .d1-strumento { grid-template-columns: 1fr; }
  .d1-lato[data-lato="vel"] .d1-leva { flex-direction: row; text-align: left; }
  .d1-legame { flex-direction: column; width: 64px; height: 30px; margin: 4px 0; padding: 0; }
  .legame-filo { width: 2px; height: auto; flex: 1; }
  .legame-filo--a { transform-origin: top; } .legame-filo--b { transform-origin: bottom; }
  .d1-strumento[data-stato="noi"] .legame-filo { transform: scaleY(.1); }
  .legame-nodo { width: 28px; height: 28px; }
  .legame-nodo .ic { width: 15px; height: 15px; }
  .leva-binario { width: 64px; height: 36px; }
  .leva-pomo { width: 26px; height: 26px; top: 5px; left: 5px; }
  .d1-leva[aria-checked="true"] .leva-pomo { transform: translateX(28px); }
  .leva-nome { font-size: 1.6rem; }
  .leva-nota { margin-top: 3px; font-size: .875rem; }
  .d1-righe { margin-top: 8px; }
  .d1-righe li { padding: 9px 0; }
  .d1-esito { grid-template-columns: 1fr; padding-top: 14px; gap: 6px; }
  .esito-frase { font-size: 1.5rem; }
  .esito-aiuto { font-size: .875rem; }
  .esito-azioni { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .esito-azioni .pillola { width: 100%; justify-content: center; height: 50px; }
}
/* sul telefono la sezione deve stare in una schermata: titolo e righe più compatti, sotto-note delle leve via */
@media (max-width: 700px) {
  .confronto .titolo-sezione { font-size: 1.75rem; }
  .confronto .capo > p { font-size: .9375rem; line-height: 1.45; }
  .confronto .capo > p span { display: inline; }
  .d1-corpo { gap: 12px; margin-top: 12px; }
  .d1-lato .leva-nota { display: none; }
  .d1-righe li { padding: 7px 0; }
  .d1-legame { height: 26px; margin: 2px 0; }
  .d1-esito { padding-top: 10px; gap: 4px; }
  .esito-frase { font-size: 1.3rem; }
}