/* ═══════════════════════════════════════════════════════════
   ciàcoea — sito
   I token vengono da brand/BRAND.md §4 e §5. Il sito è scuro
   per scelta: il brand nasce scuro, e chi lo guarda ha lo
   schermo scuro davanti tutto il giorno.
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/font/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/font/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/font/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ── Palette grezza di marca (BRAND.md §4) */
  --inchiostro: #17130f;
  --inchiostro-2: #211b16;
  --inchiostro-3: #2c2520;
  --carta: #fbf7f1;
  --spriss: #ff5a1f;
  --laguna: #0fb39b;
  --fumo: #8c8378;

  /* ── Token semantici — tema SCURO, che è quello di casa.
        Il chiaro li riscrive più sotto. I componenti usano solo questi:
        nessun esadecimale sparso, altrimenti lo switch non può funzionare. */
  --sfondo: #17130f;
  --sfondo-fondo: #100d0b; /* il fondo della finestra dimostrativa */
  --superficie: #211b16;
  --linea: #2c2520;
  --linea-tenue: rgba(44, 37, 32, 0.7);

  --testo: #fbf7f1;
  --testo-2: #b9ada0; /* paragrafi */
  --testo-3: #8a7f74; /* note piccole */
  --testo-4: #5d554d; /* etichette, dettagli spenti */

  --accento: #ff5a1f;
  --accento-caldo: #ff7040;
  /* Sopra l'arancione chiaro ci va l'inchiostro (5,9:1). Nel tema chiaro
     l'arancione si scurisce e allora ci vuole il bianco: vedi sotto. */
  --su-accento: #17130f;
  --verde: #0fb39b;
  --pois: #3a312a;

  --ombra-finestra: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  --ombra-pillola: 0 16px 40px -12px rgba(0, 0, 0, 0.9);
  --pillola-fondo: rgba(33, 27, 22, 0.97);
  --alone-caldo: rgba(255, 90, 31, 0.16);
  --alone-freddo: rgba(15, 179, 155, 0.07);
  --alone-caffe: rgba(255, 90, 31, 0.13);

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --testo-font: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --largo: 1080px;
  --stretto: 720px;

  /* ── LA MISURA DEL TESTO — si decide QUI e in nessun altro posto.
     Ogni elemento di testo lungo usa `max-width: var(--misura)`, mai un
     valore proprio. È la regola che mancava: prima ogni classe aveva il
     suo tetto (620, 640, 660...) e bastava aggiungere un componente per
     ritrovarsi paragrafi stretti dentro contenitori larghi il doppio.
     È legata alla larghezza del contenuto (--largo meno i 24px di padding
     per lato): così un paragrafo non è mai più stretto del riquadro che
     gli sta sopra, che era esattamente lo scarto che si notava. */
  --misura: calc(var(--largo) - 48px);

  color-scheme: dark;
}

/* ── Tema CHIARO.
      Due accortezze che non sono estetiche ma di leggibilità:
      l'arancione si scurisce (su fondo chiaro #ff5a1f è troppo debole) e
      di conseguenza il testo sopra i bottoni diventa bianco, perché
      l'inchiostro su arancione scuro scenderebbe a 2,9:1. */
:root[data-tema="chiaro"] {
  --sfondo: #fbf7f1;
  --sfondo-fondo: #f1eae0;
  --superficie: #ffffff;
  --linea: #e2d8ca;
  --linea-tenue: rgba(226, 216, 202, 0.7);

  --testo: #1c1613;
  --testo-2: #4a423b;
  --testo-3: #6f665d;
  --testo-4: #9a8f83;

  --accento: #db4310;
  --accento-caldo: #c23a0d;
  --su-accento: #ffffff;
  --verde: #0a8a78;
  --pois: #ded3c5;

  --ombra-finestra: 0 30px 70px -30px rgba(60, 40, 20, 0.28);
  --ombra-pillola: 0 14px 34px -12px rgba(60, 40, 20, 0.3);
  --pillola-fondo: rgba(255, 255, 255, 0.97);
  --alone-caldo: rgba(255, 90, 31, 0.1);
  --alone-freddo: rgba(15, 179, 155, 0.06);
  --alone-caffe: rgba(255, 90, 31, 0.08);

  color-scheme: light;
}

/* Chi non ha ancora scelto segue il sistema operativo. Appena tocca
   l'interruttore, `data-tema` prende il sopravvento e la scelta resta. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) {
    --sfondo: #fbf7f1;
    --sfondo-fondo: #f1eae0;
    --superficie: #ffffff;
    --linea: #e2d8ca;
    --linea-tenue: rgba(226, 216, 202, 0.7);
    --testo: #1c1613;
    --testo-2: #4a423b;
    --testo-3: #6f665d;
    --testo-4: #9a8f83;
    --accento: #db4310;
    --accento-caldo: #c23a0d;
    --su-accento: #ffffff;
    --verde: #0a8a78;
    --pois: #ded3c5;
    --ombra-finestra: 0 30px 70px -30px rgba(60, 40, 20, 0.28);
    --ombra-pillola: 0 14px 34px -12px rgba(60, 40, 20, 0.3);
    --pillola-fondo: rgba(255, 255, 255, 0.97);
    --alone-caldo: rgba(255, 90, 31, 0.1);
    --alone-freddo: rgba(15, 179, 155, 0.06);
    --alone-caffe: rgba(255, 90, 31, 0.08);
    color-scheme: light;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
}

::selection {
  background: var(--accento);
  color: var(--sfondo);
}

:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenuto per chi naviga da tastiera */
.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accento);
  color: var(--sfondo);
  padding: 12px 20px;
  font-weight: 600;
  z-index: 100;
}
.salta:focus {
  left: 12px;
  top: 12px;
}

/* ── Elementi ricorrenti ─────────────────────────────────── */

.occhiello {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--testo-3);
  margin: 0;
}
.occhiello.spriss {
  color: var(--accento);
}
.centro {
  text-align: center;
}

.pallino {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--verde);
  margin-inline-end: 6px;
  vertical-align: baseline;
}

em {
  color: var(--accento);
  font-style: normal;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.88em;
}
code {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--testo);
}
kbd {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 8px;
  font-weight: 600;
}

.btn {
  display: inline-block;
  background: var(--accento);
  /* Testo inchiostro sull'arancione: bianco non passerebbe il contrasto */
  color: var(--sfondo);
  font-weight: 700;
  font-family: inherit;
  font-size: inherit;
  text-decoration: none;
  border: none;
  border-radius: 11px;
  padding: 11px 22px;
  cursor: pointer;
  transition:
    transform 120ms ease,
    background-color 160ms ease,
    opacity 160ms ease;
}
.btn:hover {
  background: var(--accento-caldo);
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.btn-grande {
  font-size: 19px;
  padding: 16px 34px;
  border-radius: 14px;
}
.btn-piccolo {
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 9px;
}

/* ── Testata ─────────────────────────────────────────────── */

.testata {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.logo-parola {
  font-family: var(--display);
  font-weight: 800;
  font-size: 27px;
  letter-spacing: -0.045em;
  line-height: 1;
}
.logo-parola.piccolo {
  font-size: 21px;
}
.logo-parola i {
  color: var(--accento);
  font-style: normal;
}

.testata-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}
.testata-nav a {
  text-decoration: none;
  color: var(--testo-2);
  transition: color 140ms ease;
}
.testata-nav a:hover {
  color: var(--testo);
}
.testata-nav .btn {
  color: var(--sfondo);
}

/* ── Il menu da telefono ─────────────────────────────────────
   Prima qui c'era `display: none` su tutti i link: da telefono il sito
   restava senza navigazione, e lo schermo da cui lo apre la maggior parte
   della gente è proprio quello. Ora le voci si raccolgono in un pannello
   che si apre dal burger. */

.nav-voci {
  display: flex;
  align-items: center;
  gap: 26px;
}

.burger {
  display: none; /* solo da telefono, vedi la media query in fondo */
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--linea);
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--testo-2);
}
.burger-parola {
  line-height: 1;
}
.burger-tratti {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.burger span span {
  display: block;
  width: 17px;
  height: 1.5px;
  margin: 0 auto;
  background: var(--testo-2);
  border-radius: 2px;
  transition:
    transform 180ms ease,
    opacity 140ms ease;
}
.burger[aria-expanded="true"] .burger-tratti span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-tratti span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger-tratti span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* Voce che esiste solo nel pannello del telefono. */
.solo-telefono {
  display: none;
}

@media (max-width: 720px) {
  .burger {
    display: flex;
  }

  /* Via il bottone «Scarica» dalla barra: da telefono scaricare non serve a
     niente — il file e per computer — e un invito che non puo essere
     accolto e solo un invito sprecato. La voce resta dentro il pannello,
     dove porta alla pagina che spiega, non a un file. */
  .testata-nav > .btn {
    display: none;
  }
  .solo-telefono {
    display: block;
  }

  /* Il pannello scende da sotto la testata e copre tutta la larghezza:
     le voci sono poche e i bersagli devono restare grandi da dito. */
  .nav-voci {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--superficie);
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
    padding: 6px 0;
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.5);

    /* Chiuso: invisibile E non raggiungibile da tastiera o lettore di
       schermo. Solo opacity lascerebbe i link navigabili a vuoto. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 160ms ease,
      transform 160ms ease,
      visibility 160ms;
  }
  .nav-voci[data-aperto] {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .nav-voci a {
    padding: 13px 24px;
    font-size: 16px;
  }
  .nav-voci a:hover {
    background: var(--sfondo);
  }
  /* Da telefono «Offri un caffè» sta nel pannello come le altre: qui c'è
     spazio, a differenza della barra. */
  .testata-nav .caffe-link {
    display: block !important;
  }
}

/* La testata fa da riferimento al pannello, che si posiziona sotto di lei. */
.testata {
  position: relative;
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 40px 24px 0;
  text-align: center;
  position: relative;
}
.hero::before {
  /* Un velo caldo appena accennato dietro al titolo. Prima era un alone
     radiale grosso, che su fondo scuro leggeva come una macchia sullo
     schermo invece che come luce. Adesso è una sfumatura verticale
     larga quanto la finestra: si sente, non si vede. */
  content: "";
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 760px;
  background: linear-gradient(
    to bottom,
    var(--alone-caldo) 0%,
    transparent 78%
  );
  pointer-events: none;
  z-index: -1;
}

/* ── L'onda di fondo ──────────────────────────────────────
   Le stesse barre del marchio, distese sotto al hero e mosse
   pianissimo: la pagina respira come respira l'app quando ti
   ascolta. Deve restare sotto la soglia dell'attenzione — se
   la noti, è troppo. */
.onda-fondo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  width: 100vw;
  height: 300px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  pointer-events: none;
  z-index: -1;
  /* Sfuma ai lati e verso l'alto: nessun bordo, da nessuna parte. */
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(to bottom, transparent, #000 32%, #000 68%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.onda-fondo i {
  flex: 1;
  min-width: 2px;
  height: 100%;
  border-radius: 3px;
  background: var(--accento);
  opacity: 0.09;
  /* Origine al centro: la barra si allunga in su E in giù, come un
     tracciato d'onda vero. Ancorata in basso sembrava mozzata dal bordo. */
  transform-origin: center;
  transform: scaleY(0.2);
  animation: onda-respiro 3.2s ease-in-out infinite;
}
@keyframes onda-respiro {
  0%,
  100% {
    transform: scaleY(0.16);
  }
  50% {
    transform: scaleY(1);
  }
}
:root[data-tema="chiaro"] .onda-fondo i {
  opacity: 0.13;
}
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) .onda-fondo i {
    opacity: 0.13;
  }
}
/* Chi ha chiesto meno animazioni vede l'onda ferma, non l'assenza
   dell'onda: la texture resta, il movimento no. */
@media (prefers-reduced-motion: reduce) {
  .onda-fondo i {
    animation: none;
  }
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.4vw, 5.1rem);
  line-height: 0.99;
  letter-spacing: -0.04em;
  margin: 20px 0 0;
}

.hero-sub {
  max-width: 660px; /* il hero è centrato: qui la misura corta è voluta */
  margin: 24px auto 0;
  color: var(--testo-2);
  font-size: clamp(1rem, 2vw, 1.16rem);
}
.hero-sub strong {
  color: var(--testo);
}

.hero-azioni {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-nota {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--testo-3);
}
.hero-nota a {
  color: var(--testo-3);
}

/* ── Il palco: la finestra dimostrativa ──────────────────── */

.palco {
  position: relative;
  max-width: 1000px;
  margin: 40px auto 0;
  padding-bottom: 40px;
}

.finestra {
  background: var(--sfondo-fondo);
  border: 1px solid var(--linea);
  border-radius: 15px;
  overflow: hidden;
  text-align: start;
  box-shadow:
    var(--ombra-finestra),
    0 0 0 1px rgba(255, 255, 255, 0.02);
}

.finestra-barra {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 15px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.pois {
  display: inline-flex;
  gap: 7px;
}
.pois i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pois);
}
.finestra-titolo {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--testo-3);
}

.finestra-corpo {
  padding: 15px 18px 17px;
}
.riga-file {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--testo-4);
  margin-bottom: 16px;
}

.chat {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 11px;
  padding: 13px 16px;
  min-height: 92px;
}
.chat-etichetta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--testo-4);
  margin-bottom: 9px;
}
.chat-testo {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--testo);
}

.cursore {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--accento);
  vertical-align: text-bottom;
  margin-inline-start: 2px;
  animation: lampeggia 1.05s step-end infinite;
}
@keyframes lampeggia {
  50% {
    opacity: 0;
  }
}

/* L'overlay, uguale a quello dell'app */
.pillola {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--pillola-fondo);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 9px 16px;
  box-shadow: var(--ombra-pillola);
  backdrop-filter: blur(8px);
}
.pillola-pallino {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accento);
}
.pillola.lavora .pillola-pallino {
  background: var(--verde);
}
.pillola.fatto .pillola-pallino {
  background: var(--verde);
}
.pillola-testo {
  font-size: 13.5px;
  color: var(--testo-2);
  white-space: nowrap;
}
.pillola-tasto {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--testo-4);
  border-inline-start: 1px solid var(--linea);
  padding-inline-start: 11px;
}

.onda {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 17px;
}
.onda i {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--accento);
  transition: height 90ms linear;
}
.pillola.lavora .onda,
.pillola.fatto .onda {
  display: none;
}

@media (max-width: 620px) {
  .pillola-tasto {
    display: none;
  }
  .palco {
    margin-top: 46px;
  }
}

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

.sezione {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 104px 24px 0;
}
.sezione.stretta {
  max-width: var(--stretto);
}

.titolo-sezione {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  margin: 0;
}

.sezione-sub {
  color: var(--testo-2);
  /* Larghi quanto la sezione che li contiene, con un tetto da lettura.
     Prima erano fissi a 620px mentre tabelle e riquadri accanto ne usano
     oltre 1000: il testo andava a capo con mezzo schermo vuoto di fianco
     e leggeva come un errore di impaginazione. Il tetto serve comunque:
     oltre una certa lunghezza di riga l'occhio, tornando a capo, sbaglia
     riga. */
  max-width: var(--misura);
  margin: 16px 0 0;
}
/* Quando è centrato sotto un titolo centrato, la misura stretta è voluta:
   un paragrafo centrato e larghissimo non si legge. */
.sezione-sub.centro {
  /* Voluto, non dimenticato: un paragrafo centrato e larghissimo non si
     legge, perché l'occhio non trova l'inizio della riga dopo. Le uniche
     eccezioni alla misura unica sono i testi centrati e il blocco del
     comando. */
  max-width: 640px;
  margin-inline: auto;
}

.nota-piccola {
  font-size: 13.5px;
  color: var(--testo-4);
  margin-top: 18px;
  max-width: var(--misura);
}

/* ── «Il download è partito» ─────────────────────────────────
   Lo mostra sito.js solo a chi arriva dal bottone della home,
   dove il file sta già scendendo. Barra a sinistra e non un
   riquadro pieno: deve dire «leggi questo», non «errore». */

.avviso-scarico {
  margin-top: 26px;
  padding: 14px 18px;
  border-left: 3px solid var(--accento);
  background: var(--superficie);
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--testo-2);
  max-width: var(--misura);
}

.avviso-scarico b {
  color: var(--testo);
}

/* ── Dolori ──────────────────────────────────────────────── */

.dolori {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.dolori li {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-inline-start: 3px solid var(--accento);
  border-radius: 12px;
  padding: 17px 20px;
  font-size: 17px;
  color: var(--testo);
}
.dolori li span {
  color: var(--accento);
  font-weight: 700;
}
.dolori li b {
  color: var(--testo);
  font-family: var(--mono);
  font-size: 0.92em;
}
.dolori-chiusa {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  text-align: center;
  margin-top: 30px;
}

/* ── Carte ───────────────────────────────────────────────── */

.carte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.carta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 15px;
  padding: 26px 24px 28px;
}
.carta-num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accento);
}
.carta h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.42rem;
  letter-spacing: -0.03em;
  margin: 12px 0 10px;
  line-height: 1.14;
}
.carta p {
  margin: 0;
  color: var(--testo-2);
  font-size: 15.5px;
}
.carta b {
  color: var(--testo);
}

/* ── Passi ───────────────────────────────────────────────── */

.passi {
  list-style: none;
  counter-reset: passo;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}
.passi li {
  position: relative;
  padding-top: 22px;
  border-top: 1px solid var(--linea);
}
.passo-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--accento);
  line-height: 1;
  letter-spacing: -0.04em;
}
.passi h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -0.03em;
  margin: 8px 0 8px;
}
.passi p {
  margin: 0;
  color: var(--testo-2);
  font-size: 15.5px;
}

/* ── Confronto del gergo ─────────────────────────────────── */

.confronto {
  margin-top: 34px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
}
.confronto-intestazione,
.confronto-riga {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
}
.confronto-intestazione {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.confronto-riga + .confronto-riga {
  border-top: 1px solid var(--linea-tenue);
}
.det {
  color: var(--testo-2);
  font-size: 15.5px;
}
.male,
.bene {
  font-family: var(--mono);
  font-size: 14px;
}
.male {
  color: var(--testo-3);
  text-decoration: line-through;
  text-decoration-color: rgba(229, 72, 77, 0.55);
}
.bene {
  color: var(--verde);
  font-weight: 600;
}

@media (max-width: 700px) {
  .confronto-intestazione {
    display: none;
  }
  .confronto-riga {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .male::before {
    content: "di solito: ";
    text-decoration: none;
    color: var(--testo-4);
  }
  .bene::before {
    content: "ciàcoea: ";
    color: var(--testo-4);
    font-weight: 400;
  }
}

/* ── Download ────────────────────────────────────────────── */

.scarica {
  text-align: center;
}
.scarica-box {
  margin-top: 34px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 44px 24px;
}
.scarica-alt {
  margin: 20px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--testo-3);
}
.scarica-alt a {
  color: var(--testo-2);
}
.scarica-alt span {
  margin: 0 8px;
  color: var(--testo-4);
}
.scarica-versione {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--testo-4);
  margin: 14px 0 0;
  min-height: 1em;
}

/* ── Domande ─────────────────────────────────────────────── */

details {
  border-bottom: 1px solid var(--linea);
  padding: 20px 0;
}
details:first-of-type {
  border-top: 1px solid var(--linea);
  margin-top: 34px;
}
summary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.17rem;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
summary::-webkit-details-marker {
  display: none;
}
summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.35rem;
  color: var(--accento);
  flex: none;
  line-height: 1;
}
details[open] summary::after {
  content: "−";
}
details p {
  color: var(--testo-2);
  font-size: 15.5px;
  margin: 14px 0 0;
  /* Segue il contenitore, col solito tetto da lettura. Stava a 640px:
     dentro una sezione da 1080 il testo andava a capo a metà riquadro. */
  max-width: var(--misura);
}
details p a {
  color: var(--accento);
}

/* ── Piede ───────────────────────────────────────────────── */

.piede {
  max-width: var(--largo);
  margin: 110px auto 0;
  padding: 34px 24px 56px;
  border-top: 1px solid var(--linea);
}
.piede-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.piede-claim {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--testo-3);
}
.piede-nota {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: var(--testo-4);
  max-width: var(--misura);
}
.piede-nota a {
  color: var(--testo-3);
}
.piede-nota b {
  font-family: var(--mono);
  color: var(--testo-3);
}

.piede-link {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.piede-link a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--testo-3);
}
.piede-link a:hover {
  color: var(--accento);
}

/* ── Le chiavi sono tue ──────────────────────────────────── */

.chiavi-griglia {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 820px) {
  .chiavi-griglia {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

.provider {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 13px;
  overflow: hidden;
}
.provider li {
  background: var(--superficie);
  padding: 13px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-weight: 600;
  font-size: 15.5px;
}
.provider li span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--testo-3);
  font-weight: 400;
}
.provider li.locale span {
  color: var(--verde);
}

/* ── Il caffè ────────────────────────────────────────────── */

.caffe {
  text-align: center;
}
.caffe-box {
  background:
    radial-gradient(520px 240px at 50% 0%, var(--alone-caffe), transparent 68%),
    var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 20px;
  padding: 48px 28px 44px;
}
.caffe-box h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  letter-spacing: -0.035em;
  margin: 16px 0 0;
}
.caffe-box > p {
  max-width: var(--misura);
  margin: 14px auto 26px;
  color: var(--testo-2);
  font-size: 16px;
}
.caffe-nota {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--testo-4);
  margin: 18px 0 0 !important;
}

/* ── La voce di dizionario nel piede ─────────────────────── */

.voce {
  margin: 30px 0 0;
  padding: 22px 24px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  /* È un riquadro, non testo scorrevole: riempie il piè di pagina come
     tutto il resto. La misura di lettura vale per i paragrafi, non per
     le scatole che li contengono — confonderle è ciò che lasciava questa
     più stretta della riga sopra. */
}
.voce dt {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.voce-lemma {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.voce-lemma i {
  color: var(--accento);
  font-style: normal;
}
.voce-fonetica {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--verde);
}
.voce-grammatica {
  font-size: 13px;
  font-style: italic;
  color: var(--testo-4);
}
.voce dd {
  margin: 0 0 9px;
  font-size: 15px;
  color: var(--testo-2);
  line-height: 1.55;
}
.voce-num {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--accento);
  margin-inline-end: 5px;
}
.voce-etimo {
  margin-top: 14px !important;
  padding-top: 13px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--testo-3);
}
.voce-etimo b {
  color: var(--testo-2);
}
.voce-etimo i {
  color: var(--testo-2);
}

/* L'attribuzione, in veneto */
.piede-nota {
  font-style: italic;
}

/* Righe della pagina /scarica/: due colonne, non tre */
.confronto-riga.file-riga {
  grid-template-columns: 1fr auto;
}
.confronto-riga.file-riga .det b {
  font-weight: 700;
  color: var(--testo);
}
@media (max-width: 700px) {
  .confronto-riga.file-riga {
    grid-template-columns: 1fr auto;
  }
}

/* ── Interruttore chiaro / scuro ──────────────────────────
   Il passaggio è morbido ma solo sui colori: animare tutto
   farebbe ballare anche le ombre e i gradienti degli aloni. */
body,
.carta,
.finestra,
.chat,
.provider li,
.dolori li,
.confronto,
.caffe-box,
.voce,
.scarica-box {
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .carta, .finestra, .chat, .provider li, .dolori li,
  .confronto, .caffe-box, .voce, .scarica-box {
    transition: none;
  }
}

.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--testo-2);
  cursor: pointer;
  flex: none;
  transition:
    color 160ms ease,
    border-color 160ms ease,
    background-color 160ms ease;
}
.tema:hover {
  color: var(--accento);
  border-color: var(--accento);
}
.tema svg {
  width: 17px;
  height: 17px;
  display: block;
}
/* Si mostra solo l'icona di dove si andrà a finire, non di dove si è:
   un sole quando sei al buio, una luna quando sei alla luce. */
.tema .sole { display: block; }
.tema .luna { display: none; }
:root[data-tema="chiaro"] .tema .sole { display: none; }
:root[data-tema="chiaro"] .tema .luna { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-tema="scuro"]) .tema .sole { display: none; }
  :root:not([data-tema="scuro"]) .tema .luna { display: block; }
}

/* ── Modulo (pagina /scarica/ e pagina privacy) ─────────────
   Prima del file vero c'è nome, email e una casella di consenso.
   Niente componenti nuovi di libreria: input e select nudi,
   colorati con gli stessi token di sempre. Il rosso d'errore
   riusa lo stesso rgb già presente in questo file per il
   confronto del gergo (.male), così non introduciamo un colore
   che prima non c'era. */

.modulo {
  margin-top: 30px;
  display: grid;
  gap: 16px;
  max-width: 420px;
}
.campo {
  display: grid;
  gap: 7px;
}
.campo label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-3);
}
.campo input[type="text"],
.campo input[type="email"],
.campo select {
  font-family: var(--testo-font);
  font-size: 15.5px;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 10px;
  padding: 11px 14px;
  width: 100%;
  transition: border-color 160ms ease;
}
.campo input[type="text"]::placeholder,
.campo input[type="email"]::placeholder {
  color: var(--testo-4);
}
.campo input[type="text"]:focus,
.campo input[type="email"]:focus,
.campo select:focus {
  outline: none;
  border-color: var(--accento);
}
.campo input:user-invalid {
  border-color: rgb(229, 72, 77);
}

.campo-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.campo-checkbox input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--accento);
}
.campo-checkbox span {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--testo-3);
}
.campo-checkbox a {
  color: var(--testo-2);
}

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

.modulo-messaggio {
  margin: 0;
  min-height: 1.3em;
  font-size: 14px;
}
.modulo-messaggio.errore {
  color: rgb(229, 72, 77);
}
.modulo-messaggio.fatto {
  color: var(--verde);
  font-weight: 600;
}

/* La sezione dei dolori si allarga fino alla misura della finestra
   dimostrativa qui sopra (860px di contenuto + i 24px di padding per lato).
   Prima stava nella colonna stretta da 720px e lo scalino si vedeva: due
   blocchi incolonnati uno sull'altro con due larghezze diverse leggono come
   un errore, non come una scelta.
   Il selettore evita di dover toccare l'HTML: la sezione non ha una classe
   propria, ma è l'unica che contiene .dolori. */
.sezione.stretta:has(.dolori) {
  max-width: 908px; /* i riquadri si allineano alla finestra dimostrativa */
}

/* Il link al caffè nella testata: si vede, ma non urla come il bottone
   di download. Se gridassero entrambi, non griderebbe nessuno dei due. */
.caffe-link {
  color: var(--accento) !important;
  font-weight: 600;
  white-space: nowrap;
}
.caffe-link:hover {
  text-decoration: underline;
}
@media (max-width: 860px) {
  .testata-nav .caffe-link {
    display: none;
  }
}

/* Piattaforme non ancora compilate: dichiarate, non nascoste. Meglio un
   «presto» onesto che un bottone che scarica un file inesistente. */
/* Etichetta «beta» accanto alle piattaforme non ancora collaudate.
   Si chiamava .in-arrivo quando quei pacchetti non esistevano: adesso
   esistono, e il nome della classe deve dire quello che dice l'etichetta. */
.beta {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-4);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 1px 6px;
  margin-inline-start: 8px;
  vertical-align: middle;
}
.det-attesa {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--testo-4);
  text-align: end;
}

/* Gli a capo scritti a mano nei titoli servono a bilanciare le righe sul
   desktop. Su schermo stretto il testo va già a capo da solo, e forzarne
   un altro spezza la frase in un punto qualsiasi: lì si tolgono. */
@media (max-width: 640px) {
  br.a-capo {
    display: none;
  }
}

/* ── Comando da copiare ───────────────────────────────────
   Tutto il blocco è un bottone: chi vuole il comando lo vuole
   negli appunti, non selezionato a mano carattere per carattere. */
.comando {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 14px 16px;
  background: var(--sfondo-fondo);
  border: 1px solid var(--linea);
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  font: inherit;
  transition:
    border-color 160ms ease,
    background-color 160ms ease;
}
.comando:hover {
  border-color: var(--accento);
}
.comando code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--testo);
  background: none;
  border: 0;
  padding: 0;
  /* Il comando è lungo: su schermo stretto scorre invece di sfondare. */
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.comando code::-webkit-scrollbar {
  display: none;
}
.comando-copia {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-4);
  flex: none;
  transition: color 160ms ease;
}
.comando:hover .comando-copia {
  color: var(--accento);
}
.comando.fatto .comando-copia {
  color: var(--verde);
}
.comando-nota {
  font-size: 13.5px;
  color: var(--testo-3);
  margin: 12px 0 0;
}

/* Separatore fra le due strade */
.oppure {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 640px;
  margin: 30px auto 26px;
  color: var(--testo-4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.oppure::before,
.oppure::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linea);
}

/* ── Prima / dopo della rifinitura ────────────────────────
   Due blocchi affiancati con una freccia in mezzo: è il modo
   più corto per far capire cosa fa, senza spiegarlo. */
.prima-dopo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 34px;
}
.pd-blocco {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 20px 22px;
}
.pd-testo {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
}
/* Il parlato è sbiadito e corsivo: è materia grezza. */
.pd-parlato {
  color: var(--testo-3);
  font-style: italic;
}
/* Il risultato è pieno e netto, come dev'essere un prompt. */
.pd-pulito {
  color: var(--testo);
}
.pd-freccia {
  font-size: 22px;
  color: var(--accento);
  text-align: center;
}

@media (max-width: 800px) {
  .prima-dopo {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* In colonna la freccia deve puntare in giù, non a destra. */
  .pd-freccia {
    transform: rotate(90deg);
  }
}

/* ── Tabella di confronto (pagina /confronto/) ────────────
   Sei app, sei colonne: su schermo stretto non ci sta, quindi
   scorre in orizzontale invece di andare a capo in un pasticcio.
   La riga di ciàcoea si stacca appena, non urla. */
.tabella-scroll {
  margin-top: 30px;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
}
.tabella-confronto {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
}
.tabella-confronto th,
.tabella-confronto td {
  text-align: start;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linea-tenue);
  vertical-align: top;
  line-height: 1.5;
}
.tabella-confronto thead th {
  background: var(--superficie);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-3);
  border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
.tabella-confronto tbody tr:last-child td {
  border-bottom: none;
}
.tabella-confronto td {
  color: var(--testo-2);
}
.tabella-confronto td b {
  color: var(--testo);
}
.tabella-confronto tr.riga-ciacoea td {
  background: var(--alone-caldo);
  color: var(--testo);
  font-weight: 500;
}
.tabella-confronto tr.riga-ciacoea td:first-child {
  border-inline-start: 3px solid var(--accento);
}

/* Elenco fonti in fondo a /confronto/: piccolo e sobrio, non una carta. */
.fonti-lista {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 13.5px;
  color: var(--testo-3);
}
.fonti-lista a {
  color: var(--testo-2);
}
.fonti-lista a:hover {
  color: var(--accento);
}


/* ── Download disattivati da telefono ────────────────────────
   I bottoni restano visibili — servono a far capire cosa esiste
   per quale computer — ma spenti: toccarli scaricherebbe un file
   che il telefono non sa aprire. */

.scarico-bloccato {
  opacity: 0.45;
  cursor: not-allowed;
}

.avviso-scarico.lampeggia {
  animation: lampo-avviso 900ms ease;
}

@keyframes lampo-avviso {
  0%,
  100% {
    border-left-color: var(--accento);
  }
  30% {
    border-left-color: var(--accento);
    background: var(--sfondo);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avviso-scarico.lampeggia {
    animation: none;
  }
}

/* ── «Scaricato ✓» ───────────────────────────────────────────
   Chi arriva dalla home ha già il file che scende. Il bottone di
   quel file resta lì, spento: senza, si risale alla tabella e lo
   si preme di nuovo — è successo davvero, a 46 secondi dal primo
   clic. Un secondo clic lo riaccende, per chi lo rivuole sul
   serio. */

.btn.gia-scaricato {
  background: transparent;
  color: var(--testo-3);
  border: 1px solid var(--linea);
  font-weight: 600;
}
.btn.gia-scaricato:hover {
  background: transparent;
  color: var(--testo-2);
  transform: none;
}