/*
  Un foglio di stile solo, per sei pagine.

  IL SITO È UNA DISCESA. Non è un vezzo: la pagina scende come scende
  un'immersione, e il fondo passa dal blu illuminato della superficie al buio.
  Sul bordo sinistro corre una scala di metri, e ogni sezione dichiara la propria
  quota. Chi arriva qui è un subacqueo e riconosce quel movimento prima di aver
  letto una parola — che è esattamente il momento in cui si decide se un sito
  parla la tua lingua o no.

  PERCHÉ È SCURO E BASTA, anche per chi tiene il sistema in chiaro. Un fondo
  chiaro spezzerebbe la metafora a metà, e le schermate dell'applicazione sono
  anch'esse scure: su bianco galleggerebbero come francobolli. È una scelta, non
  una dimenticanza, e vale la pena scriverlo qui perché fra un anno sembrerà una
  svista.

  NESSUN CARATTERE SCARICATO. Non è pigrizia: un font ospitato altrove è una
  richiesta a un terzo per ogni visita, cioè un dato che esce senza che nessuno
  l'abbia chiesto — su un sito che nella pagina della privacy promette il
  contrario. I caratteri di sistema, usati bene, non hanno niente da invidiare.

  NIENTE JAVASCRIPT. Le animazioni sono CSS: il profilo che si traccia usa
  `stroke-dashoffset`, le sezioni che compaiono usano `animation-timeline: view()`
  dentro un `@supports`, così dove non c'è resta tutto visibile invece di restare
  invisibile — che è l'errore che rende un sito vuoto sui browser vecchi. E
  `prefers-reduced-motion` spegne ogni movimento, perché a qualcuno fa star male.
*/

:root {
  /* La colonna d'acqua, dalla superficie al fondo. */
  --superficie: #0d3f6e;
  --dieci: #0a3057;
  --venti: #072341;
  --trenta: #05192f;
  --fondo-abisso: #04131f;

  --ciano: #43d6ff;
  --ciano-cupo: #1a8fb8;
  --riflesso: #9ddcff;
  --ambra: #ffb454;

  --testo: #eaf3fb;
  --testo-tenue: #9fb6cc;
  --bordo: rgba(157, 220, 255, 0.16);
  --vetro: rgba(255, 255, 255, 0.045);

  --misura: 34rem;
  --largo: 68rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  color: var(--testo);
  font:
    17px/1.65 -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  /*
    Il gradiente sta su `body` e non su un elemento fisso: così la profondità
    dipende da QUANTO È LUNGA la pagina, non dall'altezza della finestra. Una
    pagina corta è un'immersione bassa, una lunga scende davvero.
  */
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(157, 220, 255, 0.28), transparent 60%),
    linear-gradient(
      180deg,
      var(--superficie) 0%,
      var(--dieci) 18%,
      var(--venti) 40%,
      var(--trenta) 65%,
      var(--fondo-abisso) 100%
    );
  background-attachment: scroll;
  /*
    ► SENZA QUESTE DUE RIGHE IL GRADIENTE RICOMINCIA. ◄ Uno sfondo si ripete di
    sua natura: quando l'area da dipingere è più alta del riquadro del corpo —
    e in fondo alla pagina lo è — sotto l'abisso ricompariva una striscia di
    superficie, azzurra, come se il sito fosse finito e ne cominciasse un altro.
    `no-repeat` toglie la ripetizione e il colore di fondo riempie quel che
    resta col buio, che è la risposta giusta alla domanda «cosa c'è sotto».
  */
  background-repeat: no-repeat;
  background-color: var(--fondo-abisso);
  min-height: 100%;
}

html {
  background: var(--fondo-abisso);
}

/*
  I raggi di sole, solo in cima. Due strisce chiare inclinate, sfocate e quasi
  invisibili: si notano se le cerchi, e se non le cerchi fanno il loro lavoro
  lo stesso. `pointer-events: none` perché non devono intercettare niente.
*/
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 90vh;
  pointer-events: none;
  background:
    linear-gradient(96deg, transparent 34%, rgba(157, 220, 255, 0.1) 38%, transparent 42%),
    linear-gradient(84deg, transparent 58%, rgba(157, 220, 255, 0.07) 62%, transparent 67%);
  filter: blur(6px);
  z-index: 0;
}

.contenitore {
  position: relative;
  z-index: 1;
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------------------------------------------------------- testata */

.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  flex-wrap: wrap;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--testo);
  text-decoration: none;
}

.marchio img {
  width: 32px;
  height: 32px;
  display: block;
}

.navigazione {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  font-size: 15px;
}

.navigazione a {
  color: var(--testo-tenue);
  text-decoration: none;
  transition: color 0.2s;
}

.navigazione a:hover {
  color: var(--riflesso);
}

.lingua {
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/*
  ► DOVE SONO. ◄

  Il menu è identico su tutte e otto le pagine, e finché nessuna voce si
  distingue chi atterra su «Privacy» da una ricerca non ha modo di sapere su
  quale delle pagine di documento sia finito: si somigliano tutte — stessa
  testata, stesso corpo di testo, cambia soltanto il titolo.

  DUE SEGNI, E UNO SOLO SI VEDE. `aria-current="page"` sta nell'HTML e fa il
  lavoro per chi legge con la voce: il lettore di schermo annuncia «pagina
  corrente» e la questione è chiusa. Questa regola è la metà che si vede, e parte
  proprio da quell'attributo invece che da una classe a parte: due marcatori
  separati si scollano al primo spostamento di una voce — qualcuno aggiorna la
  classe e dimentica l'attributo — e il segno visivo finirebbe su una voce mentre
  il lettore di schermo ne annuncia un'altra. Attaccati all'attributo non possono
  divergere.

  PERCHÉ NON UNA TERZA PILLOLA. «Segnala» è già una pillola chiara e «Offrimi un
  caffè» una pillola ambra: sono due inviti a fare qualcosa. Se anche la voce
  attiva diventasse una pillola, il menu si leggerebbe come tre pulsanti in fila e
  non si capirebbe più quale sia un'azione e quale una posizione. Qui serve il
  contrario di un invito: dire dove si è senza chiedere niente. Quindi il testo
  passa dal grigio al riflesso — la stessa accensione che le altre voci hanno solo
  sotto il puntatore, resa permanente — e sotto corre un filo di ciano.

  IL FILO È UN `::after` IN POSIZIONE ASSOLUTA e non un `border-bottom`: il bordo
  aggiungerebbe due pixel all'altezza della voce, e su una barra con
  `align-items: center` due pixel su una voce sola spostano di uno tutte le altre.
  Un segno che sposta il menu non è un segno, è un difetto.

  DUE VOCI NON SI MARCANO MAI, e non è una dimenticanza: «Codice» porta su GitHub,
  cioè fuori di qui, e il cambio lingua è un'azione — porta all'altra versione
  della stessa pagina, non è un posto in cui si possa «essere». Nessuna delle due
  riceve l'attributo nell'HTML, quindi questo selettore non le tocca; e resta
  fuori dalla `.navigazione` anche il marchio, che sulle due home l'attributo ce
  l'ha ma non deve accendersi (il perché è scritto lì, accanto al marchio).
*/
.navigazione a[aria-current='page'] {
  position: relative;
  color: var(--riflesso);
}

.navigazione a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--ciano);
}

/* ---------------------------------------------------------------- apertura */

.apertura {
  padding: 4vh 0 2vh;
  max-width: 44rem;
}

.apertura h1 {
  font-size: clamp(2.4rem, 6.4vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: -0.033em;
  margin: 0 0 20px;
  font-weight: 680;
  text-wrap: balance;
}

.apertura h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ciano), var(--riflesso));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.occhiello {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.5;
  color: var(--testo-tenue);
  margin: 0 0 30px;
  max-width: 36rem;
  text-wrap: pretty;
}

.occhiello strong {
  color: var(--testo);
  font-weight: 620;
}

.pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.pulsante {
  display: inline-block;
  padding: 13px 22px;
  border-radius: 12px;
  border: 1px solid var(--bordo);
  color: var(--testo);
  text-decoration: none;
  font-size: 15px;
  font-weight: 560;
  background: var(--vetro);
  backdrop-filter: blur(8px);
  transition:
    transform 0.18s,
    border-color 0.18s,
    background 0.18s;
}

.pulsante:hover {
  transform: translateY(-2px);
  border-color: rgba(157, 220, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

.pulsante-primario {
  background: linear-gradient(100deg, var(--ciano), var(--ciano-cupo));
  border-color: transparent;
  color: #04121d;
  font-weight: 660;
  box-shadow: 0 8px 30px rgba(67, 214, 255, 0.28);
}

.pulsante-primario:hover {
  background: linear-gradient(100deg, #63e0ff, #229ec9);
}

/* ------------------------------------------------------- il profilo in cima */

/*
  Il grafico che si traccia da solo. È la cosa più bella che l'applicazione
  produce, ed è l'unica immagine al mondo che un subacqueo riconosce a colpo
  d'occhio senza didascalia.

  La linea è una sola `path`: si disegna allungando il tratteggio, che è il
  trucco più vecchio e più solido che ci sia — nessuna libreria, nessuno script,
  e su un browser che non animasse resterebbe comunque disegnata.
*/
.profilo {
  position: relative;
  margin: 26px 0 10px;
}

.profilo svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/*
  ► LO STATO DI RIPOSO È QUELLO FINALE, E L'ANIMAZIONE LO RIAVVOLGE. ◄

  Questa animazione partiva a 0,35 s dal caricamento, e il profilo sta sotto la
  piega: chi ci arrivava scorrendo, tre secondi dopo, trovava un disegno fermo.
  *Un'animazione che nessuno vede non è un'animazione: è banda e batteria spese
  per niente.*

  Ora parte quando l'elemento entra nello schermo, e la partenza la dà
  `in-vista`, una classe che mette lo script in fondo alla pagina. Da cui la
  forma di queste regole, che è l'opposto di quella ovvia: **qui il riposo è il
  disegno FINITO** — linea tracciata, sfumatura visibile, segno al suo posto — e
  sono le regole con `in-vista` a riportare tutto al primo fotogramma e a farlo
  correre.

  Scritta al contrario — riposo = tela bianca, animazione che disegna — bastava
  che lo script non partisse, o che il browser non avesse
  `IntersectionObserver`, e il profilo restava vuoto per sempre. *Uno stato
  iniziale che serve solo all'animazione non deve mai essere quello che vede chi
  l'animazione non la riceve.*
*/
.profilo .linea {
  fill: none;
  stroke: var(--ciano);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(67, 214, 255, 0.55));
  stroke-dasharray: 1500;
  stroke-dashoffset: 0;
}

.profilo.in-vista .linea {
  stroke-dashoffset: 1500;
  animation: traccia 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

.profilo .area {
  fill: url(#sfumaturaProfilo);
  opacity: 1;
}

.profilo.in-vista .area {
  opacity: 0;
  animation: comparire 1.6s ease 2s forwards;
}

.profilo .griglia-linea {
  stroke: rgba(157, 220, 255, 0.13);
  stroke-width: 1;
}

.profilo text {
  fill: var(--testo-tenue);
  /*
    Quindici unità del viewBox, non undici: il grafico si restringe con la
    finestra, e su un telefono da 390 px undici diventavano quattro pixel veri,
    cioè una riga di puntini. Le dimensioni dentro un SVG che scala vanno
    scelte guardando lo schermo piccolo, non quello grande.
  */
  font-size: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
}

.profilo .segno {
  opacity: 1;
}

.profilo.in-vista .segno {
  opacity: 0;
  animation: comparire 0.9s ease 2.4s forwards;
}

.profilo .segno circle {
  fill: var(--ambra);
}

.profilo .segno text {
  fill: var(--ambra);
}

@keyframes traccia {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes comparire {
  to {
    opacity: 1;
  }
}

/* --------------------------------------------------------------- sezioni */

section {
  position: relative;
  padding: 6vh 0;
  border-top: 1px solid rgba(157, 220, 255, 0.08);
}

section:first-of-type {
  border-top: 0;
}

/*
  QUI C'ERA UNA SECONDA SCALA DEI METRI, e se n'è andata.

  Ogni sezione dichiarava la propria quota — `data-quota="−10 m"` — e diventava
  una tacca sul bordo sinistro. L'idea era carina e il difetto era fatale: a
  destra scorre il profondimetro vero, che segue lo scorrimento, e a sinistra
  c'erano numeri fermi che non avevano nessun rapporto con quelli. Due scale di
  profondità sullo stesso schermo che dicono cose diverse non sono una
  decorazione doppia: sono una che smentisce l'altra, e chi legge si ferma a
  chiedersi quale delle due sbagli.

  Il nastro a destra resta perché è vero: si muove con la pagina. Questa no.
*/

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  font-weight: 660;
  text-wrap: balance;
}

h3 {
  font-size: 1.06rem;
  margin: 0 0 7px;
  font-weight: 620;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 16px;
  max-width: var(--misura);
  color: var(--testo-tenue);
  text-wrap: pretty;
}

p strong {
  color: var(--testo);
  font-weight: 620;
}

section > p:first-of-type {
  font-size: 1.08rem;
}

a {
  color: var(--riflesso);
}

/* ----------------------------------------------------------------- schede */

.griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 16px;
  margin: 26px 0 0;
}

.riquadro {
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 22px;
  background: var(--vetro);
  backdrop-filter: blur(10px);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.riquadro:hover {
  transform: translateY(-3px);
  border-color: rgba(157, 220, 255, 0.34);
  background: rgba(255, 255, 255, 0.075);
}

.riquadro p {
  margin: 0;
  font-size: 15px;
  color: var(--testo-tenue);
}

.riquadro .etichetta {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ciano);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------- fusione */

.fusione {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 30px 0 12px;
}

.fusione-fonti {
  display: grid;
  gap: 12px;
}

.fonte,
.fusione-esito {
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--vetro);
  font-size: 14px;
  color: var(--testo-tenue);
}

.fonte strong,
.fusione-esito strong {
  display: block;
  color: var(--testo);
  font-size: 15px;
  margin-bottom: 4px;
}

.fusione-esito {
  border-color: rgba(67, 214, 255, 0.45);
  background: linear-gradient(160deg, rgba(67, 214, 255, 0.14), rgba(67, 214, 255, 0.03));
  box-shadow: 0 10px 40px rgba(67, 214, 255, 0.14);
}

.fusione-freccia {
  font-size: 26px;
  color: var(--ciano);
  text-align: center;
}

.fonti-di,
.schema-didascalia {
  font-size: 13px;
  color: var(--testo-tenue);
  max-width: none;
}

@media (max-width: 720px) {
  .fusione {
    grid-template-columns: 1fr;
  }
  .fusione-freccia {
    transform: rotate(90deg);
  }
}

/* ------------------------------------------------------------- schermate */

.schermate {
  display: grid;
  /*
    Ventiquattro rem e non tredici: con tredici ci stavano quattro colonne, e una
    schermata da 1600 px larga 245 non è una schermata, è un francobollo. Meglio
    due colonne grandi che quattro illeggibili — chi guarda deve poterci leggere
    dentro, altrimenti tanto vale non metterle.
  */
  /*
    `min(24rem, 100%)` e non `24rem` secco: un minimo più largo della colonna
    disponibile non si comprime — SFONDA. Su un telefono da 390 px una traccia
    da 384 px più i margini faceva traboccare la pagina di lato, che è
    esattamente il difetto che questo sito ha già pagato una volta.
  */
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 20px;
  margin-top: 28px;
}

.schermata {
  margin: 0;
}

.schermata img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--bordo);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5);
}

.schermata figcaption {
  font-size: 13px;
  color: var(--testo-tenue);
  margin-top: 10px;
}

/*
  La prima schermata occupa tutta la riga, e NIENTE PIÙ.
  Il `max-width: 22rem` che stava qui veniva dal tempo in cui questa figura
  stava da sola sotto il titolo, fuori dalla griglia. Rientrata nella griglia,
  quel tetto la rimpiccioliva rispetto alle altre — e su un telefono, dove la
  griglia è una colonna sola, il risultato era un elenco di immagini di misure
  diverse, che è la prima cosa che si nota e l'ultima che si spiega.
*/
.vetrina {
  grid-column: 1 / -1;
  max-width: none;
}

/* ------------------------------------------------------------- evidenze */

.evidenza {
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--ciano);
  border-radius: 12px;
  padding: 18px 20px;
  background: var(--vetro);
  margin: 22px 0;
}

.evidenza p {
  margin: 0;
  max-width: none;
}

.avvertenza {
  border-left-color: var(--ambra);
  background: rgba(255, 180, 84, 0.07);
}

/*
  La nota sulle impronte: sta sotto due pulsanti che scaricano roba non
  firmata, e deve essere leggibile senza gridare. Più piccola del testo, non
  più chiara — un avviso sbiadito è un avviso che non si legge.
*/
.nota-impronte {
  font-size: 0.88rem;
  margin-top: 18px;
}

/* ---------------------------------------------------------------- piede */

.piede {
  border-top: 1px solid rgba(157, 220, 255, 0.1);
  padding: 30px 0 50px;
  font-size: 14px;
  color: var(--testo-tenue);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ------------------------------------------------- pagine di documento */

.documento {
  max-width: 46rem;
  padding-bottom: 40px;
}

.documento h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.028em;
  margin: 20px 0 8px;
}

.documento h2 {
  margin-top: 34px;
}

.documento .data {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--testo-tenue);
}

.documento p,
.documento li {
  max-width: none;
  color: var(--testo-tenue);
}

.indice {
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 18px 22px;
  background: var(--vetro);
  margin: 24px 0 10px;
}

.indice ul {
  margin: 0;
  padding-left: 20px;
}

/* -------------------------------------------- comparse legate allo scorrimento */

/*
  Dentro `@supports`, e mai fuori: il valore di partenza è «visibile», e solo
  dove il browser sa animare sullo scorrimento la sezione parte abbassata e
  risale. Il contrario — nascondere sempre e mostrare con l'animazione — è come
  si ottiene un sito completamente bianco su un browser di due anni fa.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section > h2,
    .griglia,
    .fusione,
    .schermate,
    .evidenza {
      animation: risale linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@keyframes risale {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/*
  Chi ha chiesto meno movimento vede il disegno finito. Lo script non aggiunge
  nemmeno `in-vista` in quel caso, ma queste righe ci sono lo stesso: una difesa
  che esiste solo nel JavaScript smette di esistere quando il JavaScript non
  parte, ed è il caso in cui serve di più.
*/
@media (prefers-reduced-motion: reduce) {
  .profilo .linea,
  .profilo.in-vista .linea {
    animation: none;
    stroke-dashoffset: 0;
  }

  .profilo .area,
  .profilo .segno,
  .profilo.in-vista .area,
  .profilo.in-vista .segno {
    animation: none;
    opacity: 1;
  }
}

/* I due riquadri della fusione elencano righe, non frasi: ogni voce a capo. */
.fonte span,
.fusione-esito span {
  display: block;
}

.fonte strong,
.fonte b,
.fusione-esito strong,
.fusione-esito b {
  display: block;
  color: var(--testo);
  font-size: 15px;
  margin-bottom: 6px;
  font-weight: 620;
}

/*
  Il richiamo finale: un blocco che chiude, non una sezione come le altre. È il
  punto più profondo della pagina, quindi è anche quello in cui la luce torna —
  un riquadro illuminato sul fondo scuro, perché è lì che si chiede qualcosa.
*/
.richiamo {
  border: 1px solid rgba(67, 214, 255, 0.3);
  border-radius: 20px;
  padding: 44px 32px;
  margin: 4vh 0 6vh;
  background: linear-gradient(160deg, rgba(67, 214, 255, 0.13), rgba(67, 214, 255, 0.02));
  box-shadow: 0 20px 70px rgba(67, 214, 255, 0.12);
  text-align: center;
}

.richiamo h2,
.richiamo p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.richiamo .pulsanti {
  justify-content: center;
}

/*
  ► IL BLOCCO DI SCARICO. ◄

  Due livelli, e la distanza fra i due è il messaggio: sopra le piattaforme per
  cui l'applicazione è pensata, sotto quelle per cui esiste. Se le quattro
  stessero sulla stessa riga con lo stesso peso, chi arriva da un Mac dovrebbe
  scegliere fra quattro pulsanti — e una scelta in più su una pagina di
  presentazione è gente che non scarica.
*/
.scarico {
  margin-top: 30px;
}

.scarico-nota,


/*
  La riga delle altre piattaforme: più piccola, e staccata da una linea sottile.
  La linea fa il lavoro che farebbe un'intestazione «Altre piattaforme» senza
  occupare una riga intera per dire una cosa che si capisce guardando.
*/
.scarico-altre {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--bordo);
  font-size: 0.86rem;
  opacity: 0.92;
}

/*
  ► QUI C'ERANO LE REGOLE DEL PULSANTE CHE NON SI PREME, E SE NE SONO ANDATE. ◄

  Servivano all'iPhone finché era «in arrivo»: bordo tratteggiato, cursore che
  non cambia, per leggersi come «questo posto è prenotato» e non come «questo
  pulsante è rotto». Il 26 agosto 2026 l'app è stata approvata, il pulsante è
  diventato un collegamento vero, e queste regole non le usava più nessuno.

  Si tolgono invece di lasciarle lì per la prossima volta. Un foglio di stile che
  descrive uno stato che l'interfaccia non ha più è la stessa bugia di un
  commento che rimanda a codice inesistente: chi legge crede che quello stato
  esista, e va a cercarlo. Il giorno che servisse di nuovo, `git log` ce l'ha.
*/

/*
  ► IL MODULO DELLE SEGNALAZIONI. ◄

  Due colonne dove c'è spazio, una sola sul telefono. I campi lunghi — il
  racconto e l'email — attraversano tutta la larghezza anche a due colonne:
  un'area di testo alta e stretta invita a scrivere una riga, e una riga sola
  non basta mai a capire un difetto.
*/
.modulo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0 0;
}

.campo-largo {
  grid-column: 1 / -1;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.modulo label {
  font-size: 0.86rem;
  font-weight: 560;
  color: var(--riflesso);
  letter-spacing: 0.01em;
}

.facoltativo {
  color: var(--testo-tenue);
  font-weight: 400;
}

.modulo input,
.modulo select,
.modulo textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--testo);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bordo);
  border-radius: 11px;
  padding: 12px 14px;
  width: 100%;
  transition:
    border-color 0.18s,
    background 0.18s;
}

.modulo textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.55;
}

.modulo input::placeholder,
.modulo textarea::placeholder {
  color: rgba(159, 182, 204, 0.7);
}

.modulo input:focus,
.modulo select:focus,
.modulo textarea:focus {
  outline: none;
  border-color: rgba(67, 214, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
}

/*
  La freccia del menu a tendina disegnata a mano, perché quella di sistema
  arriva col suo sfondo chiaro e su questa pagina scura sembra un buco. È
  l'unico posto del foglio in cui si sostituisce un controllo nativo, e si fa
  solo perché `appearance: none` lascia intatto tutto il resto — tastiera
  compresa.
*/
.modulo select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--riflesso) 50%),
    linear-gradient(135deg, var(--riflesso) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.modulo select option {
  background: var(--venti);
  color: var(--testo);
}

.modulo-fondo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.modulo-fondo button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.modulo-fondo button:disabled {
  opacity: 0.55;
  cursor: progress;
}

/*
  L'esito sta ACCANTO al pulsante e non sotto: comparendo di fianco non sposta
  niente, e una pagina che si riassesta sotto le dita mentre leggi la conferma
  è il modo più semplice per far dubitare che sia andata bene.
*/
.modulo-esito {
  margin: 0;
  max-width: none;
  font-size: 0.9rem;
  color: var(--riflesso);
}

.nota-modulo {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

@media (max-width: 760px) {
  .modulo {
    grid-template-columns: 1fr;
  }
}

/*
  Il titolino sopra i due pulsanti principali. Dice per cosa il programma è
  nato, e serve a rendere credibili gli altri due: un'applicazione che dichiara
  per cosa è stata pensata dice implicitamente che LÌ è provata, e lascia a
  Windows e Android il posto che hanno davvero — senza spacciarli per il piatto
  forte e senza nasconderli.
*/

/*
  I pulsanti piccoli: stessa forma, due terzi del peso. La differenza di
  dimensione fa da sola il lavoro che farebbe una frase — «queste sono
  secondarie» — senza doverla scrivere.
*/

/*
  In fondo alla pagina invece i quattro pulsanti sono alla pari, e non è
  un'incoerenza: là si arriva senza sapere cosa sia questo programma, e la
  gerarchia serve a non far scegliere fra quattro cose a chi non ha ancora
  deciso niente. Qui si arriva dopo aver letto tutto: la decisione è presa, e
  l'unica domanda rimasta è «da dove lo prendo io».
*/
.pulsanti-pari {
  justify-content: center;
}

/* ------------------------------------------------- il popup delle segnalazioni */

/*
  Il velo. `hidden` fa il lavoro di nascondere — niente `display:none` scritto a
  mano — e questa riga esiste solo perché `display:flex` più sotto lo
  sovrascriverebbe: senza, il modulo resterebbe visibile a pagina aperta.
*/
.strato[hidden] {
  display: none;
}

.strato {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 20px;
  overflow-y: auto;
  background: rgba(4, 15, 26, 0.78);
  backdrop-filter: blur(6px);
}

.strato-riquadro {
  position: relative;
  width: 100%;
  max-width: 46rem;
  border: 1px solid rgba(67, 214, 255, 0.26);
  border-radius: 20px;
  padding: 34px 34px 30px;
  background: linear-gradient(165deg, var(--dieci), var(--trenta));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.strato-riquadro h2 {
  margin-top: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.strato-riquadro p {
  max-width: none;
}

/*
  La X. Quarantaquattro pixel perché è la misura sotto la quale un bersaglio
  diventa difficile da colpire col pollice — e chi apre questo modulo dal
  telefono, dopo aver trovato un difetto, è già abbastanza infastidito così.
*/
.strato-chiudi {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--testo-tenue);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.18s,
    background 0.18s;
}

.strato-chiudi:hover {
  color: var(--testo);
  background: rgba(255, 255, 255, 0.07);
}

/*
  La voce nella barra. Si veste da voce di menu ma con un contorno che la stacca
  dalle altre, che invece sono pagine: questa apre qualcosa.

  ► È UN `<button>` SULLE DUE HOME E UN `<a>` SULLE ALTRE SEI, e questa regola
  deve vestire tutt'e due allo stesso modo. Sulle home il popup è lì e la voce lo
  alza senza andare da nessuna parte; sulle altre sei il popup non esiste — sta
  solo nella home, perché sei copie dello stesso modulo divergerebbero al primo
  ritocco — e la voce diventa un collegamento a `/#segnala` che se lo fa aprire
  all'arrivo. Chi guarda non deve accorgersi della differenza.

  IL SELETTORE PARTE DA `.navigazione` PER UNA RAGIONE PRECISA, non per abitudine:
  `.navigazione a` più sopra vale (0,1,1) e la sola classe `.voce-segnala` vale
  (0,1,0), quindi sul collegamento avrebbe vinto il grigio delle voci normali e
  la pillola sarebbe uscita spenta. Con la classe del contenitore davanti si
  arriva a (0,2,0) e le due forme si vedono identiche.
*/
.navigazione .voce-segnala {
  font: inherit;
  font-size: inherit;
  cursor: pointer;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--vetro);
  color: var(--testo);
  text-decoration: none;
  transition:
    border-color 0.18s,
    background 0.18s;
}

/*
  Il colore è ripetuto qui apposta: `.navigazione a:hover` vale (0,2,1) e
  riporterebbe il collegamento al riflesso delle voci normali, mentre il pulsante
  delle home resterebbe bianco. Due comportamenti diversi per la stessa voce.
*/
.navigazione .voce-segnala:hover {
  border-color: rgba(157, 220, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--testo);
}

@media (max-width: 640px) {
  .strato {
    padding: 0;
    align-items: stretch;
  }

  .strato-riquadro {
    border-radius: 0;
    border: 0;
    min-height: 100%;
    padding: 64px 20px 32px;
  }
}

/*
  Un pulsante che si veste da collegamento. Serve dove nel testo si rimanda al
  modulo: un <a href="#..."> porterebbe a un'ancora che non esiste più, e un
  pulsante nudo in mezzo a una frase sembra un errore di stile.
*/
.come-link {
  font: inherit;
  color: var(--ciano);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ══════════════════════════════════════ la fascia delle marche ════════════ */

/*
  Ventuno nomi che scorrono lenti. Dice in un colpo d'occhio quello che il
  numero qui sopra dice in cifre — «tanti» — ma con i nomi che chi legge
  riconosce: il proprio è lì dentro, e trovarcelo vale più di qualunque
  aggettivo.

  Le due sfumature ai lati sono la cosa che fa la differenza fra «scorre» e
  «passa dietro una finestra»: senza, i nomi appaiono e spariscono di colpo sul
  bordo, e si vede il trucco.
*/
/*
  L'etichetta sopra il nastro. Sta FUORI dal nastro che scorre — dentro se ne
  andrebbe via con lui — e allineata al contenitore, non ai nomi: quelli entrano
  ed escono dal bordo, e un titolo allineato a qualcosa che si muove non è
  allineato a niente.
*/
.marche-titolo {
  /*
    Niente larghezza e niente riempimento: sta già dentro `.contenitore`, che i
    conti li ha fatti. La versione precedente li rifaceva da capo e sommava i
    suoi 24 px a quelli del contenitore, mandando l'etichetta 48 px a destra di
    tutto il resto — compreso il nastro che dice di intestare.
  */
  max-width: none;
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(157, 220, 255, 0.5);
}

.marche {
  position: relative;
  overflow: hidden;
  margin: 0 0 5vh;
  padding: 18px 0;
  border-top: 1px solid var(--bordo);
  border-bottom: 1px solid var(--bordo);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.marche-nastro {
  display: flex;
  width: max-content;
  animation: scorri-marche 46s linear infinite;
}

.marche ul {
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0 22px 0 0;
  list-style: none;
}

.marche li {
  font-size: 1rem;
  font-weight: 560;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: rgba(157, 220, 255, 0.5);
  transition: color 0.25s;
}

.marche:hover li {
  color: rgba(157, 220, 255, 0.78);
}

/*
  Metà esatta, perché l'elenco è scritto due volte: quando il nastro è arrivato
  a −50% la seconda copia si trova esattamente dov'era la prima all'inizio, e
  il salto a zero non si vede. Con qualunque altro valore si vedrebbe.
*/
@keyframes scorri-marche {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marche-nastro {
    animation: none;
  }
}

/* ═══════════════════════════════════════════ il blocco di codice ══════════ */

/*
  L'unico blocco monospaziato della pagina, e quel contrasto lo rende la cosa
  che si guarda per prima nella sezione. Dentro c'è codice VERO, copiato da
  `buhlmann.ts`: «il codice è pubblico» smette di essere un'affermazione da
  verificare altrove — eccolo.
*/
.codice {
  margin: 26px 0 0;
  border: 1px solid rgba(157, 220, 255, 0.18);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(4, 19, 31, 0.72);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.codice-testa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(157, 220, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
}

.codice-punti {
  display: flex;
  gap: 6px;
}

.codice-punti i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(157, 220, 255, 0.22);
}

.codice-nome {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--testo-tenue);
}

.codice pre {
  margin: 0;
  padding: 16px 18px 18px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--riflesso);
}

.c-com {
  color: rgba(157, 220, 255, 0.42);
}

.c-key {
  color: var(--ambra);
}

.c-fun {
  color: var(--ciano);
}

.c-num {
  color: #9ae6b4;
}

/* ═════════════════════════════════════════ il richiamo, con l'aurora ══════ */

/*
  È l'ultima cosa che si vede prima di decidere, e prima era un riquadro
  illuminato e basta. Adesso dietro c'è una luce che respira: due macchie di
  colore che si muovono piano dentro il riquadro, tagliate dai suoi bordi.

  `overflow: hidden` sul riquadro e non sulle macchie: sono più grandi di lui
  apposta, così i loro bordi non entrano mai in scena e quello che si vede è
  solo il centro, che è la parte senza contorni.
*/
.richiamo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.richiamo::before,
.richiamo::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 60%;
  padding-bottom: 60%;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

.richiamo::before {
  top: -30%;
  left: -12%;
  background: radial-gradient(circle, rgba(67, 214, 255, 0.75), transparent 68%);
  animation: aurora-a 15s ease-in-out infinite alternate;
}

.richiamo::after {
  bottom: -34%;
  right: -14%;
  background: radial-gradient(circle, rgba(157, 220, 255, 0.5), transparent 68%);
  animation: aurora-b 19s ease-in-out infinite alternate;
}

@keyframes aurora-a {
  to {
    transform: translate(26%, 18%) scale(1.18);
  }
}

@keyframes aurora-b {
  to {
    transform: translate(-22%, -16%) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .richiamo::before,
  .richiamo::after {
    animation: none;
  }
}

/*
  Il titolo del richiamo prende la sfumatura, come i numeri della fascia: sono
  i due punti in cui la pagina alza la voce, ed è giusto che lo facciano nello
  stesso modo.
*/
.richiamo h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  background: linear-gradient(150deg, #ffffff, var(--riflesso) 55%, var(--ciano));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ═════════════════════════════════════════════════ il piede, a colonne ════ */

/*
  Erano due righe di testo centrate sotto tutto. Un piede a colonne non è
  ordine per l'ordine: è il posto dove chi è arrivato in fondo cerca le cose
  che non stavano da nessun'altra parte — il codice, le licenze, la lingua — e
  trovarle allineate invece che in fila indiana significa trovarle.
*/
.piede-griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 26px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(157, 220, 255, 0.1);
  text-align: left;
}

.piede-marchio {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--testo);
  text-decoration: none;
  margin-bottom: 12px;
}

.piede-marchio img {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

.piede-griglia p {
  margin: 0;
  max-width: 22rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--testo-tenue);
}

.piede-colonna h3 {
  margin: 0 0 12px;
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(157, 220, 255, 0.55);
}

.piede-colonna ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.piede-colonna a,
.piede-colonna button {
  font: inherit;
  font-size: 0.88rem;
  color: var(--testo-tenue);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.18s;
}

.piede-colonna a:hover,
.piede-colonna button:hover {
  color: var(--riflesso);
}

@media (max-width: 760px) {
  .piede-griglia {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* ══════════════════════════════════════════ la fascia dei numeri ══════════ */

/*
  Quattro numeri subito dopo l'apertura, ed è la risposta alla domanda che uno
  si fa dopo aver letto una promessa: «sì, ma quanto è vero?». Quattro numeri
  rispondono meglio di quattro aggettivi.

  Il numero è grande, tabellare e ciano; l'etichetta è piccola e tenue. La
  differenza di scala fa tutto il lavoro: si legge la fila dei numeri in un
  colpo d'occhio, e ci si ferma sull'etichetta solo di quello che ha incuriosito.
*/
.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 2px;
  margin: 2vh 0 4vh;
  border: 1px solid var(--bordo);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bordo);
}

/*
  IL TRUCCO DELLA GRIGLIA: il fondo del contenitore è del colore del bordo e le
  celle hanno due pixel di distanza. Le linee fra una cella e l'altra sono
  quello sfondo che si vede in mezzo — così sono perfette a qualunque numero di
  colonne, anche quando la griglia va a capo, e non c'è nessun bordo da spegnere
  sull'ultima di ogni riga.
*/
.numero {
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(13, 63, 110, 0.55), rgba(7, 35, 65, 0.55));
  backdrop-filter: blur(8px);
}

.numero b {
  display: block;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--ciano), var(--riflesso));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.numero b em {
  font-style: normal;
  font-size: 0.55em;
  vertical-align: super;
  letter-spacing: 0;
}

.numero span {
  display: block;
  margin-top: 10px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}

/* ═════════════════════════════════════ gli occhielli delle sezioni ════════ */

/*
  Un numero e una parola sopra ogni titolo. Costano una riga e cambiano il
  carattere della pagina: senza, le sezioni sono un elenco di cose che
  capitano una dopo l'altra; con, sono i capitoli di qualcosa che qualcuno ha
  pensato in che ordine raccontare.

  Il numero si scrive nell'HTML e non con un contatore CSS: un contatore
  automatico si sposta da solo il giorno che una sezione viene riordinata, e la
  numerazione finirebbe a raccontare una storia diversa da quella che il testo
  racconta.
*/
.occhiello-sezione {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  max-width: none;
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(157, 220, 255, 0.62);
}

.occhiello-sezione::before {
  content: attr(data-numero);
  font-variant-numeric: tabular-nums;
  color: var(--ciano);
  letter-spacing: 0.06em;
}

/*
  ► QUI C'ERA UNA SECONDA RIGA, e faceva un danno visibile. ◄

  L'occhiello si portava dietro un filo che correva fino al bordo destro, e
  poco sopra c'era già la riga che separa una sezione dall'altra. Due righe
  orizzontali quasi parallele a quella distanza non si leggono come una
  decorazione ricca: si leggono come un errore di stampa, e l'occhio si ferma a
  chiedersi quale delle due sia quella giusta.

  Ne resta una sola, ed è quella che ha un mestiere: separare le sezioni.
  L'occhiello è già in maiuscoletto spaziato col numero in ciano davanti — che è
  un'etichetta si vede benissimo, senza un filo che glielo dica.
*/

/* ══════════════════════════════════ la comparsa mentre si scorre ══════════ */

/*
  ► COSA FA, E PERCHÉ NON È UN VEZZO. ◄ Ogni blocco entra salendo di dodici
  pixel mentre arriva sullo schermo. Non è per far muovere le cose: è perché
  una pagina lunga di sezioni tutte uguali si legge come un muro, e un elemento
  che compare quando ci arrivi ti dice che sei arrivato. È la stessa cosa che
  fa una pagina impaginata bene con lo spazio bianco, con mezzo secondo di
  aiuto.

  ► LA REGOLA CHE RENDE SICURO FARLO. ◄ Lo stato di partenza — invisibile e
  spostato — lo mette lo SCRIPT, non il foglio di stile. Se lo mettesse il
  foglio, un browser senza JavaScript, o con lo script che non parte per un
  errore qualunque, mostrerebbe una pagina PERMANENTEMENTE VUOTA: tutto il
  contenuto invisibile, in attesa di qualcuno che non arriverà mai. Scritto
  così, il caso peggiore è una pagina che non si anima.
*/
.appare {
  opacity: 0;
  transform: translateY(12px);
}

.appare.visibile {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s ease-out,
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .appare,
  .appare.visibile {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════ l'apertura a due colonne ════════════ */

/*
  ► PERCHÉ DUE COLONNE. ◄ Con una sola, su uno schermo largo, il testo e le
  schede occupavano la metà sinistra e la metà destra restava acqua vuota. Non
  «minimalista»: vuota. La differenza è che il minimalismo toglie, e lì non
  c'era stato niente da togliere — una pagina di presentazione che lascia metà
  schermo senza niente sta dicendo che non ha altro da mostrare.

  `1.05fr 1fr` e non `1fr 1fr`: la colonna del testo ha bisogno di un filo in
  più perché il titolo non si spezzi male, e la vetrina un filo in meno perché
  è un'immagine e si adatta a qualunque larghezza le si dia.
*/
.apertura-griglia {
  display: grid;
  /*
    ► LA COLONNA DESTRA HA PIÙ SPAZIO DELLA SINISTRA, ORA. ◄

    Era `1fr 1.12fr` quando a sinistra c'erano tre gruppi di schede. Ne sono
    rimasti due — Windows, Android e Linux stanno su una riga sola — e quella
    colonna si è accorciata di parecchio: lasciarle la stessa larghezza vorrebbe
    dire un testo che finisce a metà altezza e una schermata piccola accanto.
    Data alla vetrina, la stessa larghezza diventa pixel dell'applicazione.
  */
  grid-template-columns: 1fr 1.25fr;
  /*
    `center` e non `stretch`: qui dentro c'è una cosa sola, e una cosa sola in
    una colonna alta si mette in mezzo. (`stretch` era servito a un esperimento
    con due schermate impilate e appiccicate allo scorrimento: due rettangoli
    uno sopra l'altro non si leggevano come una pila, si leggevano come due
    rettangoli, ed è stato tolto.)
  */
  align-items: center;
  gap: 44px;
}

/*
  Senza questo, la colonna del testo si rifiuta di restringersi sotto la
  larghezza della sua parola più lunga e spinge la vetrina fuori dalla griglia:
  è il comportamento predefinito di una colonna `grid`, e il sintomo è
  un'immagine che a certe larghezze esce dallo schermo di venti pixel.
*/
.apertura-griglia > * {
  min-width: 0;
}

/*
  La vetrina: inclinata di pochi gradi e sollevata, come una finestra vera
  poggiata sul fondo. L'inclinazione si raddrizza al passaggio del mouse —
  mezzo secondo, con una curva che rallenta alla fine — e quel movimento dice
  «è una cosa vera, guardala» senza doverlo scrivere.

  Il riflesso ciano sotto non è un'ombra: un'ombra nera su fondo blu scuro non
  si vede. È luce della stessa tinta dell'acqua, e stacca l'immagine dal fondo
  facendola sembrare più vicina.
*/
/*
  ► QUI NON C'È PIÙ NESSUNA PROSPETTIVA, ED È UNA RINUNCIA DELIBERATA. ◄
  Il perché sta nel commento dentro `.scena`, qui sotto: la scena non ha nessuna
  trasformazione, né a riposo né in animazione. Non rimettere `perspective`
  senza aver letto quel commento e senza aver riprovato la riga blu su una
  macchina con la scheda video vera.
*/
.vetrina-apertura {
  position: relative;
}

/*
  ► L'INCLINAZIONE STA SULLA SCENA, NON SULLE IMMAGINI. ◄

  Dentro ci sono due fotografie sovrapposte che si dissolvono una nell'altra.
  Se l'inclinazione la portasse ognuna per conto suo, al passaggio del mouse si
  raddrizzerebbe solo quella sotto il puntatore e le due si sfaserebbero a metà
  dissolvenza. Inclinata la scena, restano incollate per costruzione.

  Stessa ragione per il bordo e per l'ombra: uno solo, sul contenitore. Due
  ombre sovrapposte non fanno un'ombra più bella, fanno un alone doppio.

  Il riflesso ciano sotto non è un'ombra: un'ombra nera su fondo blu scuro non
  si vede. È luce della stessa tinta dell'acqua, e stacca la scena dal fondo
  facendola sembrare più vicina.
*/
.scena {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(157, 220, 255, 0.24);
  overflow: hidden;
  /*
    ► L'INCLINAZIONE È IN 2D, E NON PER GUSTO: IN 3D SI SPEZZAVA. ◄

    Qui c'era `perspective(1400px) rotateY(-6deg) rotateX(2deg) scale(1.02)` —
    per giunta con la prospettiva applicata due volte, perché anche
    `.vetrina-apertura` aveva la sua. Il risultato, su Chrome/Linux con la
    scheda video vera, era **una riga blu ferma che tagliava l'immagine in
    mezzo**, e spariva passandoci sopra col mouse.

    Il perché: un livello ruotato in 3D e più alto di una certa misura, Chrome
    lo spezza in piastrelle, le disegna e le ricuce ruotate. La giuntura si
    vede, ed è in mezzo perché è lì che cade. Il mouse la faceva sparire perché
    raddrizzava la scena, cioè costringeva a ridisegnare tutto da capo.

    Isolato dal proprietario, una prova alla volta dalla console: togliendo
    solo la prospettiva migliorava «in parte»; passando al 2D è **sparita del
    tutto**, e il solo 2D è bastato — gli angoli arrotondati e `overflow` sono
    rimasti dov'erano.

    ► COSA SI PERDE. ◄ `rotateY` con la prospettiva rimpicciolisce il lato
    destro di circa il 2% e ingrandisce il sinistro altrettanto: è una scatola
    girata di sbieco. `rotate` la inclina e basta. A questi angoli la differenza
    è un paio di punti percentuali su un bordo — si vede mettendole una accanto
    all'altra, non si vede da sola. **È una rinuncia, non un miglioramento**, e
    sta scritta così perché chi rimettesse il 3D per farla più bella si
    ricomprerebbe la riga.

    ► E NESSUNA PROVA DI QUESTO REPOSITORY PUÒ VEDERLA. ◄ L'artefatto è della
    scheda video; headless rasterizza via software e l'immagine resta pulita —
    verificato. La guardia in `sitoSpecificita.test.ts` difende la CAUSA (niente
    trasformazioni 3D sulla scena), non il sintomo.
  */
  /*
    ► LA SCENA NON SI INCLINA MAI, E NON HA NESSUNA TRASFORMAZIONE. ◄

    Decisione del proprietario, 3 settembre 2026, in due passi. Prima
    l'inclinazione a riposo è stata tolta — *«leggermente storto dà fastidio»* —
    e spostata dentro l'animazione d'ingresso, che la posava in piano. Poi anche
    quella: *«fa un salto alla fine dell'animazione, tipo cambio di
    schermata»*, ed era vero e inevitabile. Finché un elemento ha una
    trasformazione, il browser lo disegna su un livello suo e ne ricampiona i
    pixel; quando la trasformazione finisce, quel livello sparisce e l'immagine
    viene ridisegnata alla risoluzione vera. **Il salto è quel cambio di
    nitidezza**, non un errore di tempi: non si aggiusta con una curva diversa,
    si evita non trasformando niente.

    Resta l'unica animazione che serve: la tendina che scopre il logbook.

    E c'è un guadagno che non è di gusto. Senza trasformazioni la scena non ha
    mai un livello separato — e i livelli separati sono la famiglia di guasti da
    cui veniva la riga blu raccontata qui sopra. *Tre segnalazioni diverse dello
    stesso pomeriggio si sono chiuse tutte togliendo roba.*
  */
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.55),
    0 0 70px rgba(67, 214, 255, 0.16),
    0 0 0 7px rgba(255, 255, 255, 0.02);
}

/*
  ► NIENTE PIÙ EFFETTO AL PASSAGGIO DEL MOUSE. ◄ Qui c'era una regola che
  raddrizzava la scena e la ingrandiva di un filo. Tolta su richiesta del
  proprietario insieme all'inclinazione a riposo: raddrizzare una cosa che è
  già dritta non è un effetto, è un ingrandimento improvviso — e il gesto che
  quella regola raccontava («è una cosa vera, guardala») adesso lo fa
  l'ingresso, una volta sola e senza chiedere niente a chi legge.
*/

.scena-quadro,
.scena-quadro img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  La seconda sta esattamente sopra la prima. `inset: 0` e non `top/left`: le due
  fotografie sono della stessa identica misura — si scattano nello stesso giro,
  con la stessa finestra — e stirarla sui quattro lati garantisce che restino
  sovrapposte anche se un giorno cambiassero forma tutte e due insieme.
*/
.scena-poi {
  position: absolute;
  inset: 0;
  /*
    ► UNA TENDINA, NON UNA DISSOLVENZA. ◄

    In dissolvenza queste due schermate si sovrappongono per mezzo secondo, e
    sono tutte e due tabelle fitte: a metà strada si leggono due griglie di
    numeri diverse una sopra l'altra: non «una che diventa l'altra», un
    fantasma. Provato e guardato: illeggibile.

    La tendina invece scende dall'alto e SCOPRE il logbook, che è esattamente il
    gesto di un elenco che si riempie riga dopo riga. `clip-path` costa quanto
    l'opacità — il browser non ridisegna niente, ritaglia — e per giunta a metà
    corsa quello che si vede è sempre una sola schermata, nitida.

    ► E A RIPOSO IL RITAGLIO NON C'È AFFATTO. ◄ Qui prima c'era
    `clip-path: inset(0 0 100% 0)` — la schermata nascosta — e l'animazione la
    scopriva tenendo l'ultimo fotogramma con `forwards`. Funzionava, e lasciava
    **il ritaglio applicato per sempre**: un `clip-path` vivo su un elemento
    dentro un antenato con una trasformazione 3D obbliga il browser a tenere
    quel pezzo su un livello di composizione suo, e su alcune schede video il
    livello si vede — una riga chiara in mezzo all'immagine, ferma, che sparisce
    appena qualcosa costringe a ridisegnare. Passare il mouse cambia la
    trasformazione, quindi ridisegna, quindi la riga sparisce: **è la firma di
    un artefatto di composizione, non di un errore nel foglio di stile.**

    Segnalato dal proprietario il 3 settembre 2026 su Chrome/Linux. *Headless
    non lo riproduce* — lì la rasterizzazione è software — e questo va scritto,
    perché significa che nessuna prova di questo repository può accorgersene.

    Ora il ritaglio vive **solo durante l'animazione**: si parte dal fotogramma
    nascosto con `backwards` e si finisce senza `clip-path` del tutto, così il
    livello si può riunire al resto. È anche la regola che questo sito segue
    già altrove: *lo stato a riposo è lo stato finale*, quello che vede chi non
    ha le animazioni.
  */
}

/*
  Il filo di luce sul bordo della tendina. Senza, la tendina è un taglio netto
  che scende; con, è qualcosa che sta scrivendo. Sta sulla scena e non sulla
  fotografia perché deve poter uscire dai bordi dell'immagine e finire contro la
  cornice.
*/
.scena::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  top: 0;
  background: linear-gradient(90deg, transparent, var(--ciano), transparent);
  box-shadow: 0 0 18px 3px rgba(67, 214, 255, 0.55);
  opacity: 0;
  pointer-events: none;
}

/*
  ► LE ETICHETTE DEI FORMATI. ◄ Entrano da sinistra, una dopo l'altra, e
  spariscono dentro la finestra: sono i file che uno trascina dentro. Stanno
  FUORI dalla scena, che ha `overflow: hidden` — dentro verrebbero tagliate
  proprio nel tratto in cui arrivano da fuori, che è tutto quello che devono
  raccontare.
*/
.scena-file {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /*
    Ritagliate alla colonna. Senza, l'etichetta che arriva da fuori scivolava
    per una trentina di pixel SOPRA il testo della colonna accanto — non «entra
    da fuori campo», si sovrappone alla frase che qualcuno sta leggendo.
  */
  overflow: hidden;
}

.scena-file span {
  position: absolute;
  left: 6%;
  /*
    Tutte della stessa larghezza, e non è una scelta estetica: la corsa è una
    `translate` in percentuale, e la percentuale di una `translate` si misura
    sull'elemento. Con etichette di larghezza diversa, «UDDF» avrebbe fatto un
    terzo della strada di «Shearwater XML» — cinque traiettorie diverse per
    cinque cose che fanno la stessa identica cosa.
  */
  min-width: 150px;
  display: flex;
  justify-content: center;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(157, 220, 255, 0.34);
  background: rgba(9, 32, 54, 0.86);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--riflesso);
  white-space: nowrap;
  opacity: 0;
}

.scena-file span:nth-child(1) {
  top: 16%;
}
.scena-file span:nth-child(2) {
  top: 27%;
}
.scena-file span:nth-child(3) {
  top: 38%;
}
.scena-file span:nth-child(4) {
  top: 49%;
}
.scena-file span:nth-child(5) {
  top: 60%;
}

/*
  ► L'ANIMAZIONE GIRA SOLO SOPRA I 1000 px, ED È LA STESSA SOGLIA DELLE
  `source`. ◄ Sotto, la vetrina è nascosta e le fotografie non si scaricano
  nemmeno: far correre lì dei fotogrammi vorrebbe dire animare due GIF
  trasparenti di quarantatré byte, cioè consumare batteria per niente.

  I tempi, e perché sono questi: le cinque etichette entrano a 0,26 s l'una
  dall'altra e ci mettono 1,5 s ciascuna, quindi l'ultima finisce di entrare
  poco prima che la dissolvenza cominci. La dissolvenza dura 0,9 s e parte a
  2,2 s: se partisse prima si vedrebbe il logbook comparire mentre i file stanno
  ancora entrando, e il racconto andrebbe letto al contrario.

  `forwards` su tutte: la scena RESTA sul logbook. Un'animazione che torna al
  primo fotogramma lascerebbe sul sito, per sempre, la schermata di
  importazione — cioè la meno interessante delle due.
*/
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  /*
    `backwards` e non `forwards`: il primo fotogramma vale durante i 2,2 s di
    attesa (la schermata resta nascosta), e alla fine l'elemento torna alla sua
    regola — che adesso non ha nessun `clip-path`. Con `forwards` il ritaglio
    restava applicato per sempre, e con lui il livello di composizione che su
    alcune schede video lascia una riga in mezzo all'immagine.
  */
  .scena-poi {
    animation: scena-entra 1.1s cubic-bezier(0.4, 0, 0.2, 1) 2.2s backwards;
  }

  /* Stessa ragione: a riposo il filo ha già `opacity: 0`, non serve tenerlo. */
  .scena::after {
    animation: scena-filo 1.1s cubic-bezier(0.4, 0, 0.2, 1) 2.2s;
  }

  .scena-file span {
    animation: file-entra 1.5s cubic-bezier(0.22, 0.7, 0.3, 1) forwards;
  }

  .scena-file span:nth-child(1) {
    animation-delay: 0.5s;
  }
  .scena-file span:nth-child(2) {
    animation-delay: 0.76s;
  }
  .scena-file span:nth-child(3) {
    animation-delay: 1.02s;
  }
  .scena-file span:nth-child(4) {
    animation-delay: 1.28s;
  }
  .scena-file span:nth-child(5) {
    animation-delay: 1.54s;
  }
}

@keyframes scena-entra {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
/*
  L'ultimo fotogramma `inset(0 0 0 0)` non ritaglia niente, ed è lo stesso
  disegno dello stato a riposo (nessun `clip-path`): il passaggio dall'uno
  all'altro, alla fine dell'animazione, non si vede.
*/

/* Il filo scende insieme alla tendina e si spegne quando arriva in fondo. */
@keyframes scena-filo {
  0% {
    top: 0;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/*
  Entra da fuori, arriva sulla finestra e ci sparisce dentro rimpicciolendo: non
  «scompare», viene assorbita. `translate` e `scale` soltanto — sono le due cose
  che il browser sposta senza rifare il disegno, e questa animazione gira mentre
  la pagina sta ancora caricando il resto.
*/
@keyframes file-entra {
  0% {
    opacity: 0;
    transform: translate(-45%, 16px) scale(0.85);
  }
  20% {
    opacity: 1;
    transform: translate(0, 6px) scale(1);
  }
  65% {
    opacity: 1;
    transform: translate(120%, 0) scale(0.98);
  }
  100% {
    opacity: 0;
    transform: translate(190%, -14px) scale(0.55);
  }
}

/*
  Chi ha chiesto meno movimento vede il risultato e basta: il logbook pieno,
  senza dissolvenza e senza etichette che volano. Non una versione più povera —
  la stessa cosa che vedono tutti gli altri dopo quattro secondi.
*/
@media (prefers-reduced-motion: reduce) {
  .scena {
    transform: none;
    transition: none;
  }

  .scena-poi {
    clip-path: none;
  }

  .scena::after {
    display: none;
  }

  .scena-file {
    display: none;
  }
}

@media (max-width: 1000px) {
  .apertura-griglia {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /*
    ► SU UNA COLONNA SOLA LA VETRINA NON C'È. ◄

    Quando la griglia si chiude a una colonna, la schermata non sta più ACCANTO
    al testo: gli finisce sotto, fra i pulsanti e il resto della pagina. Lì non
    è più una vetrina — è un rettangolo alto mille pixel che qualcuno deve
    scorrere per arrivare a quello che viene dopo, e su un telefono la prima
    cosa che deve entrare nello schermo è il pulsante.

    `.vetrina-apertura` e non l'immagine dentro: nascondere il contenitore
    toglie anche il `perspective` e il vuoto della cella, mentre nascondere solo
    l'`img` lascerebbe un div alto zero che continua a occupare una riga della
    griglia e il suo `gap`.
  */
  .vetrina-apertura {
    display: none;
  }
}

/* ═══════════════════════════════════════ le schede delle piattaforme ═══════ */

/*
  L'occhiello sopra le schede. Maiuscoletto spaziato e piccolo: deve dire
  «guarda sotto» e poi sparire dalla vista, non competere col titolo che gli sta
  sopra né con le schede che gli stanno sotto.
*/
.occhietto {
  margin: 0 0 16px;
  max-width: none;
  font-size: 0.76rem;
  font-weight: 620;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(157, 220, 255, 0.72);
}

/*
  `stretch` e non più `flex-end`.

  Quando le quattro schede stavano in una fila sola, allinearle in basso era la
  scelta giusta: la principale era più alta delle altre tre, e appoggiarle tutte
  sulla stessa base le teneva insieme. Da quando sono due gruppi da due, quella
  regola faceva l'opposto — nel primo gruppo il badge di Apple rende la scheda
  iOS più alta della sua vicina, e allineate in basso la principale risultava
  MOZZA in cima. Due schede appaiate si leggono come una coppia solo se sono
  alte uguale.
*/
.schede-piattaforma {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}

/*
  ► LA MELA NELL'OCCHIELLO. ◄

  Sta dopo il «per» di «Questo progetto è nato per», e dice in un simbolo quello
  che le due schede sotto dicono a parole: qui c'è la famiglia per cui questa
  applicazione è stata scritta.

  È un tracciato in linea e non il carattere  (U+F8FF): quel carattere vive
  nell'area privata di Unicode e lo disegna solo un dispositivo Apple. Su
  Windows e Android — che sono metà del pubblico di questa pagina, e hanno una
  scheda a due centimetri da qui — verrebbe fuori un rettangolo vuoto, cioè il
  modo più goffo possibile di parlare di Apple.

  ► IL COLORE. ◄ `currentColor`: prende quello dell'occhiello che la ospita.
  Nera com'è di solito qui non si vedrebbe — il fondo è blu scuro — e una mela
  che si intuisce solo girando lo schermo verso la finestra non è un simbolo, è
  una macchia. Così invece sta sulla stessa riga e sullo stesso tono del testo
  che accompagna, che è quello che deve fare un segno in un occhiello.

  La misura è in `em` e non in pixel: cresce con il testo invece di restare
  indietro il giorno che l'occhiello cambia corpo.
*/
.mela {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  /* Mezzo passo sotto la linea di base: le maiuscole dell'occhiello sono corte
     e senza questa correzione la mela galleggia sopra la parola. */
  vertical-align: -0.12em;
  margin-left: 0.5em;
  fill: currentColor;
}

/*
  Il secondo occhiello — «ma è stato poi rilasciato anche per» — ha bisogno di
  aria SOPRA e non sotto: deve staccarsi dalle schede che chiude, non da quelle
  che apre. Con lo stesso margine da tutte e due le parti galleggerebbe in mezzo
  senza appartenere a nessuno dei due gruppi, che è il modo in cui un titolo
  smette di essere un titolo.

  Il margine è in `em` e non in pixel: se un giorno quel testo cambia corpo, lo
  stacco lo segue invece di restare indietro.
*/
.occhietto-poi {
  margin-top: 2.4em;
}

/*
  Una scheda per sistema. Il disegno sopra, il nome, e una riga che dice cosa
  ottieni premendo — «Scarica ora», «APK», «In arrivo». Quella terza riga è la
  differenza fra una vetrina e uno sportello: un pulsante che dice solo
  «Windows» chiede di indovinare cosa succede dopo.
*/
.scheda-piattaforma {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 158px;
  padding: 20px 22px 18px;
  border: 1px solid var(--bordo);
  border-radius: 18px;
  background: var(--vetro);
  backdrop-filter: blur(10px);
  color: var(--testo);
  text-decoration: none;
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s,
    box-shadow 0.2s;
}

.scheda-piattaforma .disegno {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
  fill: none;
  stroke: var(--riflesso);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s;
}

.scheda-piattaforma .nome {
  font-size: 1.06rem;
  font-weight: 640;
  letter-spacing: -0.01em;
}

.scheda-piattaforma .riga {
  /*
    `margin-top: auto` come il badge qui sotto: la riga che dice cosa ottieni si
    appoggia in fondo alla scheda. Serve da quando le schede sono alte uguale
    (`align-items: stretch`) — prima ogni scheda era alta quanto il suo
    contenuto e il fondo coincideva da sé.
  */
  margin-top: auto;
  font-size: 0.8rem;
  color: var(--testo-tenue);
}

a.scheda-piattaforma:hover {
  transform: translateY(-3px);
  border-color: rgba(157, 220, 255, 0.45);
  background: rgba(255, 255, 255, 0.075);
}

/*
  LA SCHEDA PRINCIPALE. È l'unica cosa colorata di tutta l'apertura, ed è
  esattamente per questo che funziona: in una pagina blu scuro, un solo blocco
  di ciano acceso non si sceglie, si vede — e il ciano è lo stesso della linea
  del profilo, quindi non arriva da fuori la tavolozza.
*/
/*
  ► LE DUE SCHEDE DEL PRIMO GRUPPO SONO GRANDI UGUALI. ◄

  La principale aveva `min-width: 200px` contro i 158 delle altre, e insieme al
  colore pieno faceva capire in un colpo d'occhio quale fosse il download
  principale quando le schede erano quattro in fila.

  Adesso macOS e iOS sono una coppia — due sistemi della stessa famiglia, non un
  primo e un secondo — e due schede appaiate di larghezza diversa si leggono come
  una gerarchia che qui non c'è. `flex: 1 1 158px` le fa dividere la riga in
  parti uguali qualunque sia la larghezza della finestra, e sotto i 158 px
  ciascuna vanno a capo da sole. La differenza di colore resta: dice qual è il
  download diretto, senza dire che l'altro conta meno.
*/
.appaiate > .scheda-piattaforma {
  flex: 1 1 158px;
  min-width: 0;
}

.scheda-piattaforma.principale {
  border-color: transparent;
  background: linear-gradient(150deg, var(--ciano), var(--ciano-cupo));
  color: #04121d;
  box-shadow: 0 14px 44px rgba(67, 214, 255, 0.32);
}

.scheda-piattaforma.principale .disegno {
  stroke: #04121d;
  stroke-width: 1.8;
}

.scheda-piattaforma.principale .riga {
  color: rgba(4, 18, 29, 0.72);
  font-weight: 560;
}

a.scheda-piattaforma.principale:hover {
  background: linear-gradient(150deg, #63e0ff, #229ec9);
  border-color: transparent;
  box-shadow: 0 18px 54px rgba(67, 214, 255, 0.42);
}

/*
  Il riflesso che attraversa la scheda principale. Dura un secondo e torna ogni
  sei: abbastanza da farsi notare con la coda dell'occhio, troppo raro per
  diventare quella cosa che lampeggia mentre uno prova a leggere il resto della
  pagina. Chi ha chiesto meno movimento non lo vede affatto — e non perde
  niente, perché la scheda resta comunque l'unica colorata.
*/
@media (prefers-reduced-motion: no-preference) {
  .scheda-piattaforma.principale::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    animation: riflesso 6s ease-in-out infinite;
  }
}

@keyframes riflesso {
  0% {
    left: -45%;
  }
  22%,
  100% {
    left: 125%;
  }
}

/*
  Le due minori: stessa forma, meno peso. La gerarchia la fanno la dimensione e
  l'opacità, non un'etichetta che dica «secondarie» — perché quella etichetta
  suonerebbe come una scusa, e queste due versioni non sono una scusa.
*/
/*
  ► LE SCHEDE RIEMPIONO LA RIGA, E NON È SOLO ESTETICA. ◄

  Le due principali (macOS, iOS) hanno sempre riempito la loro riga. Le minori
  no: restavano larghe quanto il loro contenuto e lasciavano un buco a destra —
  e con l'arrivo del terzo gruppo, dove Linux sta da solo, quel buco è diventato
  metà riga. Un buco a destra di una fila di schede si legge come «manca
  qualcosa», che è precisamente il contrario di quello che quelle righe dicono.

  `flex: 1 1 128px` le fa crescere in parti uguali a qualunque larghezza,
  esattamente come le principali: stessa base e stesso accrescimento vuol dire
  tre schede della stessa identica misura, che è quello che devono essere —
  sono tre risposte alla stessa domanda, e una più larga delle altre direbbe
  che una conta di più.

  ► PERCHÉ 128 E NON 140. ◄ La colonna del testo è larga 425 px. Tre schede da
  140 con due vuoti da 14 ne vogliono 448: ventitré di troppo, e la terza andava
  a capo da sola sotto le altre due. Non si vedeva leggendo il foglio — `flex`
  non dà errore quando manda a capo, è il suo mestiere — e il sintomo era una
  fila di due più una che sembrava una scelta. Con 128 il conto fa 412 e ci
  stanno; sotto quella larghezza — cioè su un telefono — vanno a capo davvero, e
  lì è giusto.
*/
.scheda-piattaforma.minore {
  flex: 1 1 128px;
  min-width: 128px;
  padding: 16px 18px 14px;
  opacity: 0.88;
}

.scheda-piattaforma.minore .disegno {
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
}

.scheda-piattaforma.minore .nome {
  font-size: 0.95rem;
}

a.scheda-piattaforma.minore:hover {
  opacity: 1;
}

/*
  La nota sotto le due schede principali: i limiti del pacchetto macOS e la
  seconda strada del Mac App Store.

  Sta QUI e non piu' in basso per la stessa ragione per cui i limiti di Windows
  e Android stanno prima dei loro pulsanti: un vincolo scoperto dopo l'installazione
  somiglia a un difetto di chi ha scaricato. Costa qualche scaricamento in meno,
  e li fa risparmiare a chi tanto non avrebbe potuto aprirla.

  Piu' piccola del testo ma NON piu' chiara del testo tenue: un avviso sbiadito
  e' un avviso che non si legge. Stessa scelta gia' fatta per `.nota-impronte`.
*/
.nota-schede {
  margin: 16px 0 0;
  max-width: 34rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}

.nota-schede b {
  color: var(--testo);
  font-weight: 600;
}

/*
  ► LE TRE PIATTAFORME A COLPO D'OCCHIO. ◄

  Al posto di tre riquadri di prosa, tre colonne con le stesse tre righe:
  formato, aggiornamenti, cosa fa il sistema. Il vantaggio non è che sia più
  corto — è che si legge in orizzontale. Chi arriva da Windows scorre la prima
  colonna e ha finito; chi vuole confrontare guarda la riga «Aggiornamenti» e
  vede in un colpo che uno dei tre è automatico e due no.

  `minmax(14rem, 1fr)` invece del `15.5rem` della griglia generale: queste
  colonne sono più strette di un riquadro di testo — sono etichette e mezze
  frasi — e a 15.5rem su uno schermo medio andavano a capo in due più una, che è
  il modo peggiore di disporre tre cose uguali.
*/
.griglia-piattaforme {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/*
  ► IL TITOLO DI UN RIQUADRO, COL SUO SEGNO. ◄

  Lo usano le otto schede delle funzioni e le tre delle piattaforme, ed è
  volutamente lo stesso: sono la stessa cosa — un riquadro con un titolo — e due
  disegni diversi per la stessa cosa fanno sembrare due sezioni della stessa
  pagina due pagine diverse.

  Resta un `h3` e non diventa un `p`: il segno è decorazione (`aria-hidden`), il
  titolo è struttura. Chi naviga per intestazioni deve continuare a trovarle,
  e un riquadro che perde il titolo per guadagnare un'icona ha fatto un cattivo
  affare.

  ► PERCHÉ IL SEGNO NON SI ALLINEA IN MEZZO. ◄ `align-items: center` va bene
  finché il titolo sta su una riga; su due — e su otto titoli succede sempre a
  qualcuno — il segno finisce a mezz'aria in mezzo alle due righe. `start` più
  una spinta di un pixel lo mette in riga con la PRIMA riga del titolo, che è
  dove l'occhio lo cerca.
*/
.capo-scheda {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: 0 0 10px;
}

.capo-scheda .disegno {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  flex: none;
  fill: none;
  stroke: var(--riflesso);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
  ► PERCHÉ 16.5rem. ◄ Sono SEI, e sei vuole tre per riga: due file piene. La
  soglia decide quante colonne entrano, e a `15rem` ne entravano quattro — cioè
  4 + 2, una fila finale mezza vuota che sembra un errore di composizione. A
  `16.5rem` ne entrano tre, e il conto torna. (Erano otto e volevano quattro:
  quando il numero delle schede cambia, questa soglia va rifatta. È il prezzo di
  una griglia che si dispone da sola.)
*/
.griglia-funzioni {
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}

.dati-piattaforma {
  margin: 0;
}

/*
  L'etichetta in maiuscoletto spaziato e la risposta sotto: due livelli, non due
  colonne. Affiancate, la risposta più lunga — quella di Linux — avrebbe deciso
  la larghezza dell'etichetta per tutte e tre, e sarebbe andata a capo tre volte
  in una striscia larga sei centimetri.
*/
.dati-piattaforma dt {
  margin: 14px 0 0;
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--riflesso);
  opacity: 0.72;
}

.dati-piattaforma dt:first-child {
  margin-top: 0;
}

.dati-piattaforma dd {
  margin: 4px 0 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}

.dati-piattaforma dd b {
  color: var(--testo);
  font-weight: 600;
}

/* Le due note sotto la griglia: stessa voce della nota sotto le schede. */
.nota-piattaforme {
  margin-top: 18px;
  max-width: var(--misura);
}

/*
  La riga di fiducia. Tre parole che rispondono alle tre domande che uno si fa
  prima di scaricare qualcosa da un sito che non conosce — quanto costa, cosa
  devo dare in cambio, di chi mi sto fidando — e un collegamento per la quarta,
  che riguarda solo chi ha un PC o un telefono Android.
*/
.fiducia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 22px 0 0;
  max-width: none;
  font-size: 0.82rem;
  color: var(--testo-tenue);
}

.fiducia span {
  position: relative;
  padding-left: 18px;
}

/* La spunta, disegnata con due tratti: un carattere ✓ cambia forma da un font
   all'altro, e su Windows arriva quello sbagliato. */
.fiducia span::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--ciano);
  border-bottom: 1.6px solid var(--ciano);
  transform: rotate(-45deg);
}

/*
  Il collegamento è l'ULTIMO ELEMENTO DELLA FILA, non un satellite.

  Prima aveva `margin-left: auto` e finiva spinto contro il bordo destro: su
  uno schermo largo galleggiava lontano da tutto, allineato a niente, e su uno
  stretto andava a capo e restava sospeso sotto il vuoto. La freccia in fondo al
  testo fa il lavoro che faceva la distanza — dire che porta da qualche parte —
  senza staccarlo dalla riga a cui appartiene.
*/
.fiducia-oltre {
  color: var(--riflesso);
  text-decoration: none;
  border-bottom: 1px solid rgba(157, 220, 255, 0.34);
  padding-bottom: 1px;
  transition:
    color 0.18s,
    border-color 0.18s;
}

.fiducia-oltre:hover {
  color: var(--ciano);
  border-color: var(--ciano);
}

@media (max-width: 560px) {
  .schede-piattaforma {
    gap: 10px;
  }

  /*
    ► LE MINORI VANNO NOMINATE, NON EREDITANO. ◄

    `.scheda-piattaforma` da sola qui NON tocca le tre schede piccole: più sopra
    c'è `.scheda-piattaforma.minore { flex: 1 1 128px }`, due classi contro una,
    e vince quella a qualunque larghezza. Il sintomo, misurato a 390 px: due
    schede da 166 px e la terza da 342, cioè larga il doppio delle sue sorelle —
    che sono la stessa cosa e devono avere la stessa faccia.

    `0 1 calc(50% - 5px)`: `0` di accrescimento perché l'ultima, rimasta sola
    sulla sua riga, NON deve allargarsi a riempirla. Metà riga meno mezzo vuoto è
    esattamente la misura delle due di sopra.
  */
  .scheda-piattaforma,
  .scheda-piattaforma.principale,
  /*
    `.appaiate > .scheda-piattaforma` va nominato anche qui, e l'ha trovato la
    prova, non un occhio: quel selettore vale 0-2-0 e la riga sopra 0-1-0,
    quindi sulle due schede dentro `.appaiate` — macOS e iOS, cioè le prime che
    si vedono su un telefono — questa media query non cambiava niente. Nona
    volta della stessa aritmetica su questo foglio.
  */
  .appaiate > .scheda-piattaforma {
    flex: 1 1 44%;
    min-width: 0;
  }

  .scheda-piattaforma.minore {
    flex: 0 1 calc(50% - 5px);
    min-width: 0;
  }

  /*
    ► IL PROFILO NON SI VEDE SU UN TELEFONO. ◄

    È un disegno largo mille unità e alto trecentoventi: schiacciato in 350 px
    diventa una striscia in cui le quote — «10 m», «20 m», «sosta 5 m · 3 min» —
    sono più piccole di quanto si legga, e una didascalia illeggibile non è una
    didascalia discreta, è rumore. Sotto sta la stessa cosa detta a parole, e su
    uno schermo stretto quelle parole valgono più del disegno.

    Qui basta nascondere: è un `svg` in linea, non si scarica niente in più.
  */
  .profilo {
    display: none;
  }

  .fiducia {
    gap: 8px 14px;
  }
}

/*
  La voce del caffè nella barra. Ambra come il pulsante in fondo alla pagina:
  è la stessa cosa detta due volte, e due colori diversi per la stessa cosa
  farebbero pensare a due cose diverse.
*/
.navigazione .voce-caffe {
  border: 1px solid rgba(255, 180, 84, 0.42);
  border-radius: 999px;
  padding: 6px 14px;
  background: rgba(255, 180, 84, 0.1);
  color: var(--ambra);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color 0.18s,
    background 0.18s;
}

.navigazione .voce-caffe:hover {
  border-color: rgba(255, 180, 84, 0.75);
  background: rgba(255, 180, 84, 0.17);
  color: var(--ambra);
}

/*
  LA DONAZIONE. Sta dopo il richiamo e prima del piede, ed è deliberatamente
  più quieta di entrambi: chiedere soldi subito dopo aver chiesto di scaricare
  suona come un pedaggio, e questo non lo è. Niente riquadro illuminato, niente
  gradiente: una riga di testo e un pulsante caldo.

  Il colore è l'ambra, l'unico della tavolozza che non sia acqua — le due
  varianti del ciano sono già prese dai pulsanti «Scarica» e «Guarda il codice»,
  e un terzo pulsante ciano avrebbe fatto pensare a un'altra copia dell'app.
  L'ambra qui dentro è già il colore della segnalazione, quindi non è un colore
  nuovo: è quello che sulla pagina significa «guarda qui».
*/
.dono {
  text-align: center;
  margin: 0 0 6vh;
  padding: 28px 24px 8px;
  border-top: 1px solid var(--bordo);
}

.dono p {
  max-width: 42rem;
  margin: 0 auto 18px;
  color: var(--testo-tenue);
}

.pulsante-dono {
  border-color: rgba(255, 180, 84, 0.42);
  background: rgba(255, 180, 84, 0.1);
  color: var(--ambra);
}

.pulsante-dono:hover {
  border-color: rgba(255, 180, 84, 0.75);
  background: rgba(255, 180, 84, 0.17);
}

/*
  Il cuore batte una volta ogni due secondi e mezzo — il ritmo di un cuore a
  riposo, non quello di una notifica. Chi ha chiesto meno movimento non lo vede
  muovere affatto, e il cuore resta.
*/
.dono .cuore {
  color: var(--ambra);
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .pulsante-dono .cuore {
    animation: battito 2.5s ease-in-out infinite;
  }
}

@keyframes battito {
  0%,
  82%,
  100% {
    transform: scale(1);
  }
  88% {
    transform: scale(1.22);
  }
  94% {
    transform: scale(1.08);
  }
}

.dono-nota {
  margin: 16px auto 0;
  font-size: 0.86rem;
  color: var(--testo-tenue);
  opacity: 0.8;
}

/*
  Le bolle. Tre, lente, quasi trasparenti, e solo in apertura: chi le nota
  sorride, chi non le nota non è disturbato. È il limite oltre il quale una
  metafora diventa un fastidio, e sta un passo prima.
*/
.bolle {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bolle span {
  position: absolute;
  bottom: -40px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(157, 220, 255, 0.5);
  background: rgba(157, 220, 255, 0.12);
  animation: sale linear infinite;
}

.bolle span:nth-child(1) {
  left: 12%;
  animation-duration: 17s;
}
.bolle span:nth-child(2) {
  left: 63%;
  width: 6px;
  height: 6px;
  animation-duration: 22s;
  animation-delay: 4s;
}
.bolle span:nth-child(3) {
  left: 84%;
  width: 12px;
  height: 12px;
  animation-duration: 26s;
  animation-delay: 9s;
}

@keyframes sale {
  from {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  to {
    transform: translateY(-120vh) translateX(18px);
    opacity: 0;
  }
}

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

/* ============================================================ IL BATIMETRO */

/*
  Il profondimetro che segue lo scorrimento.

  È un nastro di numeri dentro una finestrella alta una riga: mentre la pagina
  scende, il nastro sale, e nella finestrella si legge la quota. Non è una barra
  di avanzamento travestita — è la stessa informazione, detta nella lingua di
  chi guarda.

  DENTRO `@supports`, E NASCOSTO ALTRIMENTI. Un profondimetro fermo su «0 m»
  mentre la pagina scorre è peggio di nessun profondimetro: dichiara una cosa
  falsa. Dove il browser non sa animare sullo scorrimento, sparisce.
*/
.batimetro {
  display: none;
}

@supports (animation-timeline: scroll()) {
  @media (min-width: 1180px) and (prefers-reduced-motion: no-preference) {
    .batimetro {
      display: flex;
      position: fixed;
      right: 26px;
      top: 50%;
      transform: translateY(-50%);
      align-items: center;
      gap: 8px;
      z-index: 3;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 13px;
      color: rgba(157, 220, 255, 0.75);
      pointer-events: none;
    }

    .batimetro-quadro {
      height: 26px;
      overflow: hidden;
      position: relative;
      width: 34px;
      text-align: right;
      /* Sfuma sopra e sotto: il numero entra ed esce invece di apparire di colpo. */
      mask-image: linear-gradient(180deg, transparent, #000 32%, #000 68%, transparent);
    }

    .batimetro-nastro {
      display: flex;
      flex-direction: column;
      animation: scende linear both;
      animation-timeline: scroll(root);
    }

    .batimetro-nastro span {
      height: 26px;
      line-height: 26px;
    }

    .batimetro::before {
      content: '';
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--ciano);
      box-shadow: 0 0 12px var(--ciano);
      order: -1;
    }
  }
}

@keyframes scende {
  from {
    transform: translateY(0);
  }
  to {
    /* Dieci passi da 26 px: la finestrella parte da 0 e finisce su 50 m. */
    transform: translateY(-260px);
  }
}

/* =============================================================== LE PAGINE */

/*
  L'indice dell'applicazione, subito sotto il profilo.

  Prima qui c'era una fascia di numeri — sette formati, sedici compartimenti,
  zero pubblicità — ed era vera ma raccontava il COME. Chi arriva su un sito di
  logbook si chiede prima un'altra cosa: «che cosa ci trovo dentro?». Sei nomi
  con una riga ciascuno rispondono a quella, e nell'ordine in cui si usano
  davvero: prima si guarda l'elenco, alla fine si prepara l'immersione dopo.
*/
.pagine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 14px;
  margin: 34px 0 10px;
  padding: 0;
  list-style: none;
}

.pagine li {
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 20px;
  background: var(--vetro);
  backdrop-filter: blur(10px);
  transition:
    transform 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.pagine li:hover {
  transform: translateY(-3px);
  border-color: rgba(157, 220, 255, 0.34);
  background: rgba(255, 255, 255, 0.075);
}

.pagine b {
  display: block;
  font-size: 1.12rem;
  font-weight: 640;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  background: linear-gradient(120deg, var(--riflesso), var(--ciano));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pagine span {
  display: block;
  font-size: 14px;
  color: var(--testo-tenue);
  line-height: 1.45;
}

/* ====================================================== il termoclino */

/*
  Il bordo fra una sezione e l'altra non è una riga grigia: è una lama di luce
  che sfuma ai due lati, come il termoclino visto da sotto. Costa un
  pseudo-elemento e cambia il carattere di tutta la pagina.
*/
section {
  border-top: 0;
}

section::after {
  content: none;
}

/*
  ► PERCHÉ NON `:first-of-type`, che è quello che c'era. ◄
  Quel selettore dice «la prima sezione DEL SUO GENITORE», e le sezioni di
  questa pagina stanno dentro contenitori diversi: la prima di ogni contenitore
  restava senza riga, e il risultato era un ritmo che si interrompeva tre volte
  senza una ragione visibile. Sembrava un difetto di stampa, ed era un selettore
  che descriveva una struttura che la pagina non ha più.

  Adesso la riga ce l'hanno tutte, tranne due che non la vogliono per ragioni
  loro: il richiamo finale, che è un riquadro illuminato e una riga sopra gli
  toglierebbe il fatto di essere staccato, e la donazione, che una riga sua ce
  l'ha già scritta a mano.
*/
section:not(.richiamo):not(.dono)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(157, 220, 255, 0.34) 22%,
    rgba(157, 220, 255, 0.34) 78%,
    transparent
  );
}

/* ================================================= le schermate, incorniciate */

/*
  Le schermate stavano nude su fondo scuro e sembravano ritagli. Adesso hanno
  una cornice di vetro che le stacca dal fondo.

  ► QUI C'ERA LA STESSA INCLINAZIONE 3D DELL'APERTURA, ED È STATA TOLTA PER LE
  STESSE TRE RAGIONI. ◄ 3 settembre 2026.

  `perspective: 1000px` sul contenitore e `rotateY(3.5deg) rotateX(1.5deg)`
  sull'immagine, che si raddrizzava al passaggio del mouse: la costruzione
  identica da cui, in cima alla pagina, veniva **la riga blu ferma che tagliava
  l'immagine in mezzo**. Queste quattro sono 511×332 css, cioè **1022×664 pixel
  veri** su uno schermo a densità doppia — la stessa taglia per cui il difetto
  si manifestava là sopra.

  Il proprietario la riga qui non l'ha segnalata, e non l'ha nemmeno cercata:
  *l'assenza di una segnalazione non è una misura*. Ma le tre ragioni che hanno
  chiuso il caso in cima valgono qui parola per parola — l'artefatto di
  composizione, l'inclinazione leggera che dà fastidio, e il salto di nitidezza
  quando la trasformazione finisce — e tenere due costruzioni diverse per la
  stessa cosa nello stesso foglio di stile vuol dire che fra sei mesi qualcuno
  copierà quella sbagliata.

  Resta lo stacco al passaggio del mouse, che adesso è solo luce: l'ombra
  cresce e prende il ciano dell'acqua. Nessuna trasformazione, quindi nessun
  livello separato da ricucire.
*/
.schermata img {
  transition: box-shadow 0.45s;
  border-radius: 16px;
  border: 1px solid rgba(157, 220, 255, 0.22);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.55),
    0 0 0 6px rgba(255, 255, 255, 0.02);
}

.schermata img:hover {
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.6),
    0 0 0 6px rgba(67, 214, 255, 0.12);
}

/*
  Non c'è più niente da spegnere per chi ha chiesto meno movimento — non ci sono
  trasformazioni — ma la transizione dell'ombra sì: è comunque movimento, ed è
  comunque una cosa che qualcuno ha chiesto di non avere.
*/
@media (prefers-reduced-motion: reduce) {
  .schermata img {
    transition: none;
  }
}

/*
  L'inclinazione è un vezzo da schermo largo: là c'è aria intorno e si legge
  come profondità. Su un telefono, dove l'immagine tocca i due bordi, la stessa
  rotazione non dice «profondità» — dice «storto», e sembra un difetto.
*/
@media (max-width: 900px) {
  .schermata img,
  .schermate .schermata:nth-child(even) img {
    transform: none;
  }
}

.vetrina img {
  transform: none !important;
}

/* ================================================== le sezioni di sola prosa */

/*
  ► QUI C'ERA UNA COLONNA LATERALE COL TITOLO, E SE N'È ANDATA. ◄

  Le ultime sezioni sono testo e basta, e su uno schermo largo diventavano una
  colonna stretta a sinistra con mezza pagina di buio a destra. Il rimedio era
  spostare il titolo in una colonna sua, appiccicato in alto mentre il testo
  scorreva accanto. Sulla carta funzionava. A schermo faceva tre danni, e il
  terzo da solo basta a chiudere il discorso.

  IL PRIMO. Il titolo stava nella riga 2 della griglia e il primo pezzo di testo
  nella riga 1 della colonna accanto. L'altezza della riga 1 la decideva il
  testo, non l'occhiello: il titolo scivolava giù di quanto era alto il primo
  paragrafo e restava appeso a mezz'aria, lontano sia dall'occhiello che lo
  annuncia sia dal testo che introduce. Non era una svista di misura, era il
  funzionamento della griglia.

  IL SECONDO. Quelle sezioni avevano il titolo più piccolo di tutte le altre —
  30 px contro 38 — e la pagina finiva con due gerarchie che non si spiegano.

  IL TERZO. Nella sezione dell'avvertimento il primo elemento è il riquadro
  giallo. Con quella griglia il riquadro finiva SOPRA il suo titolo: si leggeva
  l'avvertimento, e solo dopo si scopriva che era un avvertimento. Su una pagina
  che parla di rischi mortali l'ordine di lettura non è una questione di gusto.

  Adesso sono fatte come tutte le altre — occhiello, titolo, testo, uno sotto
  l'altro — e il vuoto a destra che si voleva evitare non si vede comunque:
  ciascuna ha un elemento a tutta larghezza (il riquadro, il blocco di codice),
  e una colonna di testo larga quaranta rem con aria intorno è come sono fatte
  le pagine che si leggono davvero.
*/
section.prosa p {
  max-width: 40rem;
}

/*
  Il fondale. Un alone appena percettibile in fondo alla pagina: senza, l'ultimo
  schermo è nero e sembra che il sito sia finito prima del previsto.

  L'alone sta DENTRO il piede, ancorato al suo bordo inferiore (bottom: 0), e
  cresce verso l'alto. Questo non è un dettaglio estetico: era «bottom: -30%», e
  un elemento assoluto che sporge SOTTO allunga l'area scorribile della pagina
  anche se non disegna niente di visibile. Il piede della home è alto, e il 30%
  di «alto» faceva 110 px di nero in più a 1280 e 191 px a 390 — il fondo vuoto
  che si vedeva scorrendo fino in fondo. Sporgere verso l'alto invece non
  allunga niente: l'overflow sopra il bordo non è scorribile, quello sotto sì.
  Da qui la regola: in fondo alla pagina nessun offset negativo verso il basso.
  Se un giorno l'alone va abbassato, si abbassa il centro del gradiente, non la
  scatola che lo contiene.
*/
.piede {
  position: relative;
}

.piede::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(90vw, 60rem);
  height: 16rem;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(67, 214, 255, 0.09), transparent 70%);
  pointer-events: none;
}

/* ========================================================= le tredici lettere */

/*
  Il libretto di legge.

  Tredici voci con la loro lettera davanti: è la forma in cui la legge le
  elenca, ed è la forma in cui chi le conosce le riconosce. Messe in griglia
  compatta valgono più di un paragrafo che dica «copriamo tutti i campi
  previsti» — si contano a occhio.
*/
.sezione-legge {
  border: 1px solid rgba(67, 214, 255, 0.3);
  border-radius: 20px;
  padding: 34px 30px;
  margin: 4vh 0;
  background: linear-gradient(160deg, rgba(67, 214, 255, 0.1), rgba(67, 214, 255, 0.015));
}

.sezione-legge h2 {
  margin-top: 0;
}

.lettere-legge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 8px 18px;
  margin: 24px 0 18px;
  padding: 0;
  list-style: none;
}

.lettere-legge li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 14px;
  color: var(--testo);
  padding: 6px 0;
  border-bottom: 1px solid rgba(157, 220, 255, 0.1);
}

.lettere-legge .sigla {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--ciano);
  min-width: 1.2rem;
}

/* La nota legale: piccola, ma non nascosta. Chi la cerca la trova. */
.nota-legge {
  font-size: 13px;
  color: var(--testo-tenue);
  border-left: 2px solid rgba(157, 220, 255, 0.3);
  padding-left: 14px;
  margin: 18px 0 0;
  max-width: 44rem;
}

/*
  Il rimando alla pagina lunga sul libretto. Un link di testo dentro un
  riquadro già pieno di riquadri si perde: qui ha una riga sua, la freccia
  che si sposta al passaggio e nessuna cornice, perché una cornice in più
  dentro la sezione della legge la trasformerebbe in un modulo.
*/
.altro-legge {
  margin: 20px 0 0;
  font-size: 14px;
}

.altro-legge a {
  color: var(--ciano);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(67, 214, 255, 0.35);
  padding-bottom: 2px;
}

.altro-legge a::after {
  content: ' →';
  display: inline-block;
  transition: transform 0.2s ease;
}

.altro-legge a:hover::after {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   TABELLE

   Servono a due pagine sole — privacy e termini — e per un pezzo non sono
   esistite affatto: riscrivendo il foglio di stile per il tema «la discesa»
   le regole delle tabelle sono rimaste indietro, e le tre colonne
   dell'informativa uscivano come testo giustapposto sul fondo scuro. Un
   elenco di chi tratta i tuoi dati che non si legge come tabella non è un
   dettaglio estetico: è la parte del documento fatta apposta per essere
   scorsa con l'occhio invece che letta.

   La prima colonna è la condizione («se fai l'accesso»), e va in grassetto
   perché è quella che si cerca. Le righe si separano con una linea sola: su
   fondo scuro un reticolo completo pesa più del contenuto.
   --------------------------------------------------------------------------- */

.documento table,
.prosa table,
table.dati {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.documento table th,
.prosa table th,
table.dati th {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  /* Stessa tinta di `--bordo`, più marcata: separa l'intestazione senza
     accendere una riga di ciano larga tutta la pagina. */
  border-bottom: 1px solid rgba(157, 220, 255, 0.4);
  color: var(--testo);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.documento table td,
.prosa table td,
table.dati td {
  padding: 0.75rem 0.9rem 0.75rem 0;
  border-bottom: 1px solid var(--bordo);
  color: var(--testo-tenue);
  vertical-align: top;
}

/*
  LE LARGHEZZE SONO DICHIARATE, non lasciate al browser.

  In automatico il browser distribuisce lo spazio in proporzione al testo, e la
  prima colonna — quella con cui si cerca la propria riga — finiva a due parole
  per riga mentre la colonna di mezzo si prendeva metà pagina. Qui la chiave sta
  larga abbastanza da leggersi in una riga o due, e il resto va alla spiegazione.
*/
.documento table th:first-child,
.prosa table th:first-child,
table.dati th:first-child {
  width: 22%;
}

.documento table th:last-child,
.prosa table th:last-child,
table.dati th:last-child {
  width: 26%;
}

/* La condizione: è la colonna con cui si cerca la propria riga. */
.documento table td:first-child,
.prosa table td:first-child,
table.dati td:first-child {
  color: var(--testo);
  font-weight: 600;
  padding-right: 1.2rem;
}

.documento table tr:last-child td,
.prosa table tr:last-child td,
table.dati tr:last-child td {
  border-bottom: none;
}

/*
  SOTTO I 640 px LA TABELLA SMETTE DI ESSERE UNA TABELLA.

  Tre colonne di prosa su uno schermo da telefono diventano tre colonne da
  otto caratteri, e si legge una parola per riga. Qui ogni riga diventa un
  blocco, con l'intestazione ripetuta davanti al valore tramite `data-col` —
  è il motivo per cui gli attributi sono scritti nell'HTML e non sono
  ornamento.
*/
@media (max-width: 640px) {
  .documento table,
  .prosa table,
  table.dati {
    display: block;
  }

  .documento table thead,
  .prosa table thead,
  table.dati thead {
    display: none;
  }

  .documento table tr,
  .prosa table tr,
  table.dati tr {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--bordo);
  }

  .documento table td,
  .prosa table td,
  table.dati td {
    display: block;
    padding: 0.15rem 0;
    border: none;
  }

  .documento table td[data-col]::before,
  .prosa table td[data-col]::before,
  table.dati td[data-col]::before {
    content: attr(data-col);
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--testo-tenue);
    margin-bottom: 0.15rem;
  }

  .documento table td:first-child,
  .prosa table td:first-child,
  table.dati td:first-child {
    font-size: 1.02rem;
    padding-bottom: 0.35rem;
  }
}

/* ============================================ i computer supportati, l'elenco */

/*
  ► LA PAGINA È GENERATA, LO STILE NO. ◄ `scripts/genera-pagina-computer.ts`
  scrive il markup dal catalogo vero; queste regole lo vestono. Se un giorno
  cambiano le classi lì, cambiano qui — e le prove del sito se ne accorgono,
  perché contano gli esiti e le marche.
*/
.cerca-computer {
  margin: 28px 0 34px;
}

.cerca-computer label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 8px;
}

.cerca-computer input {
  width: 100%;
  max-width: 420px;
  padding: 12px 14px;
  font: inherit;
  color: var(--testo);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(157, 220, 255, 0.24);
  border-radius: 10px;
}

.cerca-computer input:focus {
  outline: 2px solid var(--ciano);
  outline-offset: 2px;
}

.niente-trovato {
  margin-top: 14px;
  color: var(--testo-tenue);
}

.marca {
  margin: 26px 0;
}

.marca h3 {
  font-size: 20px;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

/* Quanti modelli ha quella marca. Numero piccolo e spento: è un'etichetta, non
   un dato che qualcuno debba confrontare con un altro. */
.quanti {
  font-size: 13px;
  font-weight: 400;
  color: var(--testo-tenue);
}

.computer-elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: rgba(157, 220, 255, 0.12);
  border: 1px solid rgba(157, 220, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

/*
  Tre colonne su schermo largo — nome, esito, spiegazione — e una sola sul
  telefono, dove tre colonne su un nome di computer diventano tre parole per
  riga. È lo stesso rimedio delle tabelle dell'applicazione: la riga diventa
  una scheda.
*/
.computer {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(0, 1.6fr);
  gap: 6px 16px;
  align-items: baseline;
  padding: 11px 14px;
  background: var(--venti);
}

.computer-nome {
  font-weight: 600;
}

.computer-nota {
  color: var(--testo-tenue);
  font-size: 14px;
}

/*
  ► L'ESITO SI LEGGE PRIMA DELLA SPIEGAZIONE, E SI DISTINGUE DA LONTANO. ◄
  «Si scarica» e «dovrebbe scaricarsi» sono la sola distinzione che questa
  pagina esiste per fare — in un logbook una lettura sbagliata non dà errore,
  dà un profilo plausibile e falso — quindi non possono essere due righe di
  testo dello stesso colore.

  Il colore però non è l'unico segno: le etichette sono parole diverse, non un
  pallino verde e uno giallo. Chi non distingue i colori legge lo stesso.
*/
.esito {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.esito-bluetooth {
  color: #7ff0c4;
  background: rgba(60, 220, 160, 0.12);
  border-color: rgba(60, 220, 160, 0.35);
}

.esito-dal-file {
  color: var(--testo-tenue);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(157, 220, 255, 0.2);
}

@media (max-width: 640px) {
  .computer {
    grid-template-columns: 1fr auto;
  }

  .computer-nota {
    grid-column: 1 / -1;
  }
}

/* ================================================ il menu a scomparsa, mobile */

/*
  ► NOVE VOCI SU UN TELEFONO SONO TRE RIGHE DI MENU. ◄

  Il menu è cresciuto da sette voci a nove, e a 390 px andava a capo tre volte
  prima che cominciasse la pagina: chi arriva scorre un elenco di collegamenti
  per trovare il titolo. Da qui il pulsante.

  ► COSA SUCCEDE SENZA JAVASCRIPT, CHE È LA PARTE CHE CONTA. ◄ Il pulsante
  nasce `hidden` nell'HTML e lo accende uno script; queste regole valgono solo
  quando la testata porta `data-menu="chiuso"` o `"aperto"`, che scrive lo stesso
  script. Se non gira niente, la testata non ha quell'attributo e il menu resta
  l'elenco disteso di sempre — che va a capo, ma si vede e si usa.

  *Un pulsante che apre un pannello è inutile se nessuno può chiuderlo*: il
  contrario — nascondere il menu col CSS e sperare che lo script arrivi — è il
  modo in cui un sito diventa inutilizzabile per un errore di rete.
*/
.apri-menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  color: var(--testo);
  cursor: pointer;
}

/*
  I tre tratti sono UNO SOLO più due ombre: meno elementi da tenere allineati, e
  la trasformazione in croce si scrive su un pezzo solo.
*/
.tratti,
.tratti::before,
.tratti::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.22s ease;
}

.tratti::before,
.tratti::after {
  content: '';
  position: relative;
}

.tratti::before {
  top: -6px;
}

.tratti::after {
  top: 4px;
}

/* Aperto, i tre tratti diventano una croce: il pulsante dice anche che chiude. */
[data-menu='aperto'] .tratti {
  transform: rotate(45deg);
}

[data-menu='aperto'] .tratti::before {
  transform: translateY(6px) rotate(-90deg);
}

[data-menu='aperto'] .tratti::after {
  opacity: 0;
}

/*
  Il testo che c'è per chi ascolta e non per chi guarda. `clip-path` e non
  `display: none`: nascosto con `display` il lettore di schermo non lo legge
  affatto, e il pulsante resterebbe senza nome.
*/
.nascosto-a-vista {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 860px) {
  /*
    ► `:not([hidden])` NON È PLEONASTICO, ED È UN DIFETTO GIÀ PAGATO. ◄
    `display: flex` in una regola d'autore SCAVALCA il `display: none` che il
    browser dà da sé agli elementi con `hidden`. Scritto senza questa clausola,
    il pulsante si vedeva anche a JavaScript spento — misurato — cioè proprio
    nel caso in cui non può funzionare: un pulsante che non fa niente, offerto a
    chi ha meno strumenti di tutti.
  */
  .apri-menu:not([hidden]) {
    display: flex;
  }

  /*
    Il pannello: sotto la testata, a tutta larghezza, una voce per riga. Le
    regole valgono solo con `data-menu`, cioè solo se lo script ha girato.
  */
  [data-menu] .navigazione {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 8px 0 4px;
    border-top: 1px solid var(--bordo);
  }

  [data-menu='aperto'] .navigazione {
    display: flex;
  }

  /* Righe alte 46 px: un dito su un telefono è largo circa così. */
  [data-menu] .navigazione > * {
    padding: 12px 2px;
    border-bottom: 1px solid var(--bordo);
    text-align: left;
  }

  /*
    Il pulsante «Segnala» e quello del caffè sulla home sono pastiglie: dentro
    un elenco verticale tornano righe come le altre, o sarebbero due bottoni in
    mezzo a dei collegamenti.
  */
  [data-menu] .navigazione .voce-segnala,
  [data-menu] .navigazione .voce-caffe,
  [data-menu] .navigazione .lingua {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    padding: 12px 2px;
    background: transparent;
    width: 100%;
  }
}