/* ==========================================================================
   VERSO — Landing page (palette "Fermento")
   Porcellana fredda come terra e blu del logo come campo dei blocchi centrali:
   la pagina alterna i due, e il blu e' insieme il colore dell'azione e quello
   della categoria. Font Urbanist, nero 900 su titoli/bottoni/label.
   Vedi CLAUDE.md per il contesto completo.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     PALETTE — due colori e un nero: la porcellana regge la foto dell'hero
     (che e' fredda e desaturata, tinta 220: il panna caldo di prima le
     litigava contro) e il blu del marchio fa tutto il resto - il campo dei
     blocchi centrali, l'azione, i numerali sui fondi chiari.
     Il blu e' quello del marchio, campionato da Logo.ai: il CSS aveva
     accumulato un #2046e3 leggermente diverso, e in testata si vedevano
     due blu vicini.
     ------------------------------------------------------------------ */
  --color-blue: #0d47ec;
  --color-porcellana: #e9ebe9;

  /* "Nero di bottiglia": un nero con dentro un resto di verde, non un nero
     neutro. E' il colore del vetro scuro in cui questi prodotti arrivano
     davvero, e regge le domande e il footer in fondo alla pagina. */
  --color-ink: #0e1b15;

  /* I campi del corpo pagina sono due, porcellana e blu, e si alternano senza
     che ne restino mai due uguali attaccati: Perche' porcellana, Cosa blu,
     Come porcellana, Quando blu, iscrizione porcellana, domande blu. Il nero
     di bottiglia e' sceso al solo footer. */

  /* Unico tono caldo, campionato dal liquido nella foto dell'hero. Due
     chiarezze perche' su fondo chiaro e su fondo scuro servono diverse.
     Sui fondi scuri e' lui l'accento, mai il blu: il blu su ink sta a
     2,55:1 e sparisce. */
  --color-terracotta: #a1552f;                    /* su porcellana, 4,54:1 */
  --color-terracotta-on-dark: #c4784f;            /* su ink, 5,18:1 */

  --color-blue-hover: #1a3ac0;                                        /* fallback */
  --color-blue-hover: color-mix(in srgb, var(--color-blue) 88%, black);
  --color-blue-press: #17349f;                                        /* fallback */
  --color-blue-press: color-mix(in srgb, var(--color-blue) 78%, black);

  --color-bg: var(--color-porcellana);
  --color-bg-dark: var(--color-ink);
  --color-surface: var(--color-porcellana);

  /* Testo primario nei due contesti (chiaro/scuro) */
  --color-text: var(--color-ink);
  --color-text-on-dark: var(--color-porcellana);
  --color-text-on-blue: var(--color-porcellana);

  /* Testo secondario. AA verificato: ink70%/porcellana = 6,04:1,
     porcellana70%/ink = 7,75:1 */
  --color-text-muted: #505955;                                        /* fallback */
  --color-text-muted: color-mix(in srgb, var(--color-ink) 70%, var(--color-porcellana));
  --color-text-muted-on-dark: #a7ada9;                                /* fallback */
  --color-text-muted-on-dark: color-mix(in srgb, var(--color-porcellana) 70%, var(--color-ink));

  /* Testo secondario sul campo blu: e' la porcellana appena riportata verso
     il fondo, quel tanto che basta a distinguerla dai titoli. AA verificato:
     4,82:1 sul blu. */
  --color-text-muted-on-blue: #d3dbe9;                                /* fallback */
  --color-text-muted-on-blue: color-mix(in srgb, var(--color-porcellana) 90%, var(--color-blue));

  /* Bordi/divider sottili, solo decorativi (non portano testo) */
  --color-border: #bdc1bf;                                            /* fallback */
  --color-border: color-mix(in srgb, var(--color-ink) 20%, var(--color-porcellana));
  --color-border-on-dark: #3e4944;                                    /* fallback */
  --color-border-on-dark: color-mix(in srgb, var(--color-porcellana) 22%, var(--color-ink));

  /* Filetti sul campo blu (i separatori delle quattro occasioni) */
  --color-border-on-blue: rgba(255, 255, 255, 0.28);

  /* Tipografia — Urbanist unico font, nero 900 su titoli/bottoni/label */
  --font-heading: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;

  /* La promessa in hero e' una frase intera e non piu' un claim di quattro
     parole: allo stesso corpo di prima occupava mezza pagina. Scende di un
     gradino e torna a leggersi come una frase. */
  --fs-hero: clamp(1.9375rem, 3.6vw + 0.5rem, 3.875rem);
  --fs-hero-lead: clamp(1.0625rem, 0.9vw + 0.7rem, 1.375rem);
  --fs-section-title: clamp(2rem, 3vw + 0.8rem, 3.75rem);
  --fs-section-lead: clamp(1.0625rem, 0.6vw + 0.85rem, 1.25rem);

  /* Spaziatura / layout */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --max-width: 1120px;
  --section-pad: 96px;
  --radius-pill: 999px;
  --radius-card: 24px;
  --radius-sm: 14px;

  --shadow-btn: 0 4px 14px rgba(14, 27, 21, 0.16);
  --shadow-btn-hover: 0 8px 20px rgba(14, 27, 21, 0.22);

  /* Superficie che emerge dalla porcellana: ormai solo il badge della lista
     d'attesa in hero. Ombra piu' leggera di quella dei bottoni, cosi' non
     sembra cliccabile. (I blocchi di "Quando Verso" emergono dal campo blu
     con la porcellana piena, non con questa: sono riquadri, non un rialzo.) */
  --color-surface-raised: #f2f4f1;
  --shadow-raised: 0 2px 8px rgba(14, 27, 21, 0.12);

  --transition-tap: 0.13s ease;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Le curve del movimento. Una sola per tutto il documento, cosi' entrate,
     hover e aperture "si muovono nello stesso modo": e' la cosa che di piu'
     fa leggere una pagina come finita invece che assemblata.
     --ease-out decelera e si posa (entrate), --ease-in-out parte e finisce
     piano (aperture e chiusure), --ease-spring sfora appena (i tap). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ==========================================================================
   Reset di base
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.1;
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  font-weight: 900;
}

p {
  margin: 0 0 var(--space-sm);
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
}

section {
  position: relative;
  padding: var(--section-pad) 0;
  scroll-margin-top: 88px;
}

@media (max-width: 560px) {
  :root {
    --section-pad: 64px;
  }
}

/* Focus visibile per accessibilità da tastiera */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
}

.section-dark a:focus-visible,
.section-dark button:focus-visible,
.section-dark input:focus-visible {
  outline-color: var(--color-text-on-dark);
}

/* ==========================================================================
   Sezioni chiare/scure — pattern introdotto nel rebrand v2
   ========================================================================== */

.section-light {
  background-color: var(--color-porcellana);
  color: var(--color-text);
  --card-muted: var(--color-text-muted);
  /* Il filetto dei blocchi e delle domande: senza, sul chiaro le domande
     ripiegavano sul filetto dei fondi scuri. Per i blocchi e' lo stesso valore
     che avevano gia' come ripiego. */
  --card-border: var(--color-border);
  /* Sui fondi chiari i numerali sono blu: e' l'unico segno di colore che
     "Come Verso" si porta dietro. */
  --num-color: var(--color-blue);
}

.section-dark {
  background-color: var(--color-ink);
  color: var(--color-text-on-dark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--color-text-on-dark);
}

/* Il campo blu del corpo pagina ("Cosa Verso" e "Quando Verso"). Stesso
   impianto della porcellana, campo opposto: il cambio di fondo e' l'unico
   separatore fra una sezione e l'altra, per questo fra loro non c'e' nessun
   filetto.
   --card-muted e' il testo secondario dei blocchi e --card-border il filetto:
   due ruoli che restano gli stessi in tutta la pagina e cambiano solo
   chiarezza a seconda del campo. Il terzo, --num-color, qui non c'e': i
   numerali del campo blu stanno tutti dentro i riquadri di porcellana di
   "Quando Verso" e il colore lo prendono da li'. */
.section-blu {
  background-color: var(--color-blue);
  color: var(--color-text-on-blue);
  --card-muted: var(--color-text-muted-on-blue);
  --card-border: var(--color-border-on-blue);
}

.section-blu h2,
.section-blu h3,
.section-blu h4 {
  color: var(--color-text-on-blue);
}

/* L'occhiello di sezione sta all'85% di opacita': sul blu quel tanto lo porta
   appena sotto AA, e qui va tenuto piu' pieno. */
.section-blu .section-lead {
  opacity: 0.92;
}

/* Il focus di sistema e' blu: sul campo blu sparirebbe. */
.section-blu a:focus-visible,
.section-blu button:focus-visible,
.section-blu summary:focus-visible,
.section-blu input:focus-visible {
  outline-color: var(--color-text-on-blue);
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(233, 235, 233, 0.88);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition-base);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
  transition: padding-top var(--transition-base), padding-bottom var(--transition-base);
}

/* Oltre i 40px di scorrimento la testata si stringe: il marchio arriva a 96px
   di altezza, giusto in cima e ingombrante subito dopo. Sono pixel verticali
   veri guadagnati su mobile, e la pagina sembra rispondere invece che subire.
   Si riducono padding e altezza del logo, non si usa `transform`: la testata e'
   sticky, e una trasformazione falserebbe lo scroll-margin-top delle ancore.
   La classe la mette script.js. */
.site-header.is-stuck {
  box-shadow: 0 6px 18px rgba(14, 27, 21, 0.07);
}

.site-header.is-stuck .header-inner {
  padding-top: var(--space-xs);
  padding-bottom: var(--space-xs);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: clamp(3.5rem, 3.33vw + 2rem, 6rem);
  width: auto;
  display: block;
  animation: brand-float 5s ease-in-out infinite;
  transition: height var(--transition-base);
}

.site-header.is-stuck .logo-img {
  height: clamp(2.25rem, 1.5vw + 1.6rem, 3rem);
}

@keyframes brand-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.main-nav {
  display: none;
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* --------------------------------------------------------------------------
   I due menu della testata - quello largo in riga e quello stretto a tendina -
   sono lo stesso menu a due larghezze: da qui in giu' e' una regola sola per
   entrambi, cosi' non possono piu' divergere.

   Erano due blocchi separati ed erano divergiti parecchio: nel menu stretto i
   link stavano a peso 500 e corpo 18 senza filetto, e soprattutto
   `.mobile-nav a` (due classi) vinceva su `.btn` e `.btn-primary` (una), quindi
   la pillola "Anche io Verso" li' dentro perdeva peso, corpo, padding e - la
   cosa seria - il colore del testo: ink su blu, 2,2:1, invece della porcellana.
   Era un bottone solo di forma.

   Il `:not(.btn)` e' esattamente quella toppa: nel menu a tendina c'e' anche
   una pillola, e una pillola non e' una voce di menu.
   -------------------------------------------------------------------------- */

.main-nav a,
.mobile-nav a:not(.btn) {
  position: relative;
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: 700;
  padding-bottom: 3px;
  transition: color var(--transition-fast);
}

/* Prende il posto del cambio di colore: il filetto cresce da sinistra, quindi
   il gesto ha una direzione e la testata smette di sembrare testo semplice.
   Vale anche per il fuoco da tastiera, che cosi' non e' solo il contorno, e
   per la pressione: nel menu stretto il passaggio del mouse non esiste, e
   senza `:active` il tocco non avrebbe nessuna risposta. */
.main-nav a::after,
.mobile-nav a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nav-underline-bottom, 0);
  height: 2px;
  background-color: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-out);
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a:active::after,
.mobile-nav a:not(.btn):hover::after,
.mobile-nav a:not(.btn):focus-visible::after,
.mobile-nav a:not(.btn):active::after {
  transform: scaleX(1);
}

.header-inner .header-cta {
  display: none;
  padding: 0.5em 1.3em;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  width: 44px;
  height: 44px;
  padding: 0;
  transition: transform var(--transition-tap), box-shadow var(--transition-tap), border-color var(--transition-tap);
}

.nav-toggle:hover {
  border-color: var(--color-blue);
}

.nav-toggle:active {
  transform: scale(0.94);
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  position: relative;
  border-radius: 2px;
}

.nav-toggle-bar::before {
  position: absolute;
  top: -6px;
}

.nav-toggle-bar::after {
  position: absolute;
  top: 6px;
}

/* A menu aperto il pulsante restava un hamburger: piccolo difetto funzionale,
   non solo estetico. Le barre esterne si raccolgono al centro e poi ruotano in
   croce, quella centrale svanisce mentre si muovono - due tempi, non uno, se no
   sembra un incrocio di stanghette. */
.nav-toggle-bar {
  transition: background-color 0.16s var(--ease-out) 0.08s;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  transition: top 0.16s var(--ease-out) 0.1s, transform 0.24s var(--ease-out);
}

.nav-toggle.is-open .nav-toggle-bar {
  background-color: transparent;
  transition-delay: 0s;
}

.nav-toggle.is-open .nav-toggle-bar::before {
  top: 0;
  transform: rotate(45deg);
  transition-delay: 0s, 0.1s;
}

.nav-toggle.is-open .nav-toggle-bar::after {
  top: 0;
  transform: rotate(-45deg);
  transition-delay: 0s, 0.1s;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  /* Nessun gap: la spaziatura fra le voci e' il loro padding verticale, che e'
     anche il bersaglio del dito. Sommati, distanziavano il doppio del dovuto. */
  gap: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-porcellana);
}

.mobile-nav.is-open {
  display: flex;
}

/* Aspetto e comportamento arrivano dalla regola condivisa piu' sopra: qui
   resta solo cio' che cambia perche' il menu e' una colonna invece che una
   riga.

   `align-self` e' obbligatorio, non estetico: in una colonna flex i link si
   stirerebbero a tutta larghezza e il filetto correrebbe da bordo a bordo
   invece di stare sotto la parola.

   Il padding verticale serve al dito: il testo da solo e' alto ~26px, sotto la
   soglia comoda. Il filetto va rialzato della stessa quantita' (--nav-
   underline-bottom), se no scende in fondo al padding e si stacca dal testo. */
.mobile-nav a:not(.btn) {
  --nav-underline-bottom: 0.55em;
  align-self: flex-start;
  padding-top: 0.55em;
  padding-bottom: calc(0.55em + 3px);
}

/* Stesse misure della pillola in testata larga: e' la stessa azione, non deve
   cambiare taglia con la larghezza dello schermo. */
.mobile-nav .btn {
  margin-top: var(--space-sm);
  align-self: flex-start;
  padding: 0.5em 1.3em;
}

/* Da quattro voci a cinque: a 860px logo, menu e pillola arrivavano a filo del
   contenitore. La soglia sale, il menu a tendina resta per un pezzo in piu'. */
@media (min-width: 980px) {
  .main-nav {
    display: block;
  }

  .header-inner .header-cta {
    display: inline-flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }
}

/* ==========================================================================
   Bottoni
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.8em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 900;
  text-decoration: none;
  border: none;
  box-shadow: none;
  transition: background-color var(--transition-base), color var(--transition-base),
              transform var(--transition-tap), box-shadow var(--transition-tap);
  white-space: nowrap;
}

/* Sollevamento e non ingrandimento: uno `scale` su un bottone pieno di testo lo
   rende leggermente sfocato per tutta la transizione, un pixel di traslazione
   no. Il movimento vero e' quello della freccia, qui sotto. */
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-hover);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary {
  background-color: var(--color-blue);
  color: var(--color-text-on-blue);
}

.btn-primary:hover {
  background-color: var(--color-blue-hover);
}

.btn-primary:active {
  background-color: var(--color-blue-press);
}

/* Azione secondaria: stessa sagoma del primario ma senza campitura, cosi' nella
   coppia l'occhio va prima al blu. Niente ombra al passaggio del mouse: la
   solleverebbe allo stesso livello del bottone pieno. */
.btn-quiet {
  background-color: transparent;
  color: var(--color-text);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.btn-quiet:hover {
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.btn-quiet:active {
  box-shadow: inset 0 0 0 1px var(--color-text);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 1.05em 2.2em;
  font-size: var(--fs-lg);
}

/* La freccina decorativa resta in regular: il peso 900 va solo al testo. */
.btn > span[aria-hidden="true"]:not(.btn-spinner) {
  font-weight: 400;
  display: inline-block;
  transition: transform 0.28s var(--ease-out);
}

/* La freccia si muove nella direzione che indica: il bottone smette di essere
   una pillola e diventa un verso. Quattro pixel, non uno di piu'. */
.btn:hover > span[aria-hidden="true"] {
  transform: translateX(4px);
}

.btn-quiet:hover > span[aria-hidden="true"] {
  transform: translateY(3px);
}

/* Attesa dell'invio: il cerchietto prende il posto della scritta dentro la
   stessa pillola, senza cambiarne la larghezza (vedi .is-loading in script.js). */
.btn-spinner {
  display: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  border: 2px solid rgba(233, 235, 233, 0.35);
  border-top-color: var(--color-porcellana);
  animation: btn-spin 0.7s linear infinite;
}

.btn.is-loading .btn-spinner { display: block; }
.btn.is-loading .btn-label { display: none; }

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  /* Il pannello immagine esce dalla colonna fino al bordo pagina: `clip`
     trattiene l'eventuale eccedenza dovuta alla barra di scorrimento (100vw
     la include) senza creare un contenitore di scorrimento. */
  overflow-x: clip;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.hero-content {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Entrata dell'hero: i pezzi salgono sfalsati di 80ms invece di apparire tutti
   insieme. E' l'unico momento in cui la pagina puo' dire "sono stata
   costruita" invece di "sono stata caricata", e dura meno di un secondo.
   Una volta sola, al caricamento: mai in ciclo.

   Sono animazioni CSS pure, non transizioni innescate da una classe: cosi' se
   il JS non parte l'hero entra lo stesso. E con `both` lo stato di partenza
   vale solo durante l'attesa, quindi con le animazioni spente (vedi in fondo
   al file) il testo e' semplicemente li', gia' visibile.
   -------------------------------------------------------------------------- */
.hero-spec     { animation: hero-rise 0.62s var(--ease-out) both; }
.hero-title    { animation: hero-rise 0.62s var(--ease-out) 0.08s both; }
.hero-subtitle { animation: hero-rise 0.62s var(--ease-out) 0.16s both; }
.hero-actions  { animation: hero-rise 0.62s var(--ease-out) 0.24s both; }

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Fascia immagine dell'hero: a tutta larghezza sotto la CTA e a filo della
   fascia blu del vocabolario, uguale a ogni misura di schermo.
   -------------------------------------------------------------------------- */
.hero-figure {
  position: relative;
  overflow: hidden;

  /* Esce dal contenitore fino al bordo pagina. Non si puo' usare
     `50% - 50vw`: in griglia la percentuale del margine si risolve sulla
     cella e non sul contenitore, e la fascia sfonda. Qui si misura la
     distanza fra bordo del contenitore e bordo della finestra, piu' il
     padding del contenitore. */
  margin-inline: calc((min(100vw, var(--max-width)) - 100vw) / 2 - var(--space-md));
  margin-top: var(--space-md);
  /* annulla il padding di fondo della sezione: la foto arriva a filo della
     fascia blu invece di lasciare una striscia di panna */
  margin-bottom: calc(var(--space-2xl) * -1);

  /* 3:2 pieno: le proporzioni dello scatto, quindi nessun ritaglio, si vede
     tutta l'inquadratura a ogni larghezza. Il tetto in pixel serve solo agli
     schermi molto larghi, dove il 3:2 diventerebbe piu' alto di uno schermo
     intero: da li' in su la fascia torna a ritagliare un po'. */
  height: min(66.667vw, 1000px);
}

.hero-figure picture {
  display: block;
  height: 100%;
}

.hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Da desktop la fascia ritaglia in altezza: centrata tiene dentro sia il
     collo che versa sia il fondo del calice. */
  object-position: 50% 50%;
}

/* La fascia si scopre dal basso e la foto dentro si posa dal 107% al 100%
   schiarendo: l'occhio non registra il movimento, registra che la foto ha
   profondita'. E' il trucco piu' vecchio del mestiere, e funziona ancora.

   Perche' e' agganciata a .is-ready e non parte da sola: l'immagine e'
   fetchpriority="high" ma su rete lenta arriva comunque dopo il CSS, e una
   posa che finisce prima che la foto esista non la vede nessuno. La classe la
   mette script.js quando l'immagine e' davvero decodificata. */
.hero-figure.is-ready {
  animation: hero-strip 0.9s var(--ease-out) both;
}

.hero-figure.is-ready img {
  transform-origin: 50% 55%;
  animation: hero-settle 1.5s var(--ease-out) both;
}

@keyframes hero-strip {
  from { opacity: 0; clip-path: inset(0 0 22% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes hero-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Riga di stato sopra il titolo: badge a pillola chiara */
.hero-spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-md);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 1.1em;
  border-radius: var(--radius-pill);
  /* Crema piu' chiaro del fondo sezione: il badge emerge invece di affondarci.
     Testo ink, contrasto ~14:1. Stessa superficie dei box di "Cosa Verso". */
  background-color: var(--color-surface-raised);
  color: var(--color-text);
  box-shadow: var(--shadow-raised);
  /* Da mobile la riga e' lunga: rimpicciolisce quanto basta a stare su una riga
     sola, senza scendere sotto il minimo leggibile. */
  font-size: clamp(0.7rem, 2.9vw, var(--fs-sm));
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-align: left;
}

.hero-badge-dot {
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  /* Era un verde semaforo fuori palette: il pallino passa alla terracotta,
     che in questa pagina e' l'unico tono caldo e l'unico segno che non sia
     blu o porcellana. */
  background-color: var(--color-terracotta);
  /* Respiro morbido, non on/off: opacita' e alone crescono e calano con ease-in-out. */
  animation: badge-pulse 2.6s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%,
  100% {
    /* Su fondo chiaro il pallino e' gia' tenue: sotto ~0,7 sparisce. */
    opacity: 0.7;
    box-shadow: 0 0 0 0 rgba(161, 85, 47, 0);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 0 0.28em rgba(161, 85, 47, 0.22);
  }
}

@media (min-width: 960px) {
  .hero-spec {
    justify-content: flex-start;
  }
}

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
}

.hero-subtitle {
  font-size: var(--fs-hero-lead);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

/* In colonna sui piccoli schermi: due pillole affiancate non ci starebbero senza
   stringere il testo. Da 640px in su tornano in riga, una accanto all'altra. */
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-md);
}

.hero-actions .btn {
  width: 100%;
}

@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    align-items: center;
  }

  .hero-actions .btn {
    width: auto;
  }
}

@media (min-width: 960px) {
  .hero-content {
    text-align: left;
  }

  .hero-subtitle {
    margin-left: 0;
  }

  .hero-actions {
    justify-content: flex-start;
  }
}

/* ==========================================================================
   Vocabolario — fascia blu scorrevole tra hero e "Come Verso".
   Unico punto della pagina in cui il blu e' fondo e non accento.
   ========================================================================== */

.vocab {
  padding: var(--space-md) 0;
  background-color: var(--color-blue);
  color: var(--color-text-on-blue);
  overflow: hidden;
}

/* L'etichetta "Dentro le bottiglie" sta sul filo del contenitore, fuori dalla
   maschera: dentro, la sfumatura a sinistra le mangiava la prima lettera. */
.vocab-label {
  max-width: var(--max-width);
  margin: 0 auto var(--space-xs);
  padding: 0 var(--space-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.vocab-window {
  overflow: hidden;

  /* Le parole venivano tagliate di netto ai due lati: con la maschera entrano
     ed escono dal nulla, e la fascia sembra continuare oltre lo schermo invece
     di finire contro un bordo. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}

/* 64s e non 55: i nomi sono quattordici e non dodici, e a parita' di durata il
   nastro sarebbe corso piu' veloce di prima. */
.vocab-track {
  display: flex;
  width: max-content;
  animation: vocab-scroll 64s linear infinite;
}

/* Sotto il mouse il nastro si ferma e diventa qualcosa da leggere. E' anche
   l'unico modo che la pagina offre di mettere in pausa un'animazione continua,
   che e' una raccomandazione WCAG (2.2.2) e non solo un vezzo. */
.vocab:hover .vocab-track {
  animation-play-state: paused;
}

.vocab-list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-right: var(--space-lg);
  font-size: var(--fs-2xl);
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.vocab-list li + li::before {
  content: '·';
  margin-right: var(--space-lg);
  opacity: 0.5;
}

/* Su schermo stretto i termini a 1.75rem passano due per volta e la fascia non
   si legge piu' come un vocabolario: scendono di corpo e si stringono. */
@media (max-width: 560px) {
  .vocab-list {
    gap: var(--space-md);
    padding-right: var(--space-md);
    font-size: var(--fs-xl);
  }

  .vocab-list li + li::before {
    margin-right: var(--space-md);
  }
}

@keyframes vocab-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Goccia di scorrimento — indicatore fisso, si riempie scendendo
   ========================================================================== */

/* A sinistra, non a destra: in basso a destra c'e' il badge delle preferenze
   cookie di iubenda (38x38, z-index massimo) che coprirebbe la goccia. */
.scroll-drop {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 90;
  width: 24px;
  pointer-events: none;
}

.scroll-drop svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.scroll-drop-outline {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
  opacity: 0.55;
}

.scroll-drop-fill {
  fill: var(--color-blue);
  transform-box: fill-box;
  transform-origin: bottom;
  transform: scaleY(var(--scroll-progress, 0));
}

/* ==========================================================================
   Sezioni generiche
   ========================================================================== */

.section-header {
  max-width: 56ch;
  margin: 0 0 var(--space-lg);
}

.section-title {
  font-size: var(--fs-section-title);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}

.section-lead {
  color: inherit;
  font-size: var(--fs-section-lead);
  opacity: 0.85;
}

/* ==========================================================================
   Cosa / Come / Quando Verso — un capitolo in tre movimenti

   Le tre sezioni differiscono per contenuto, per campo e per impaginazione, mai
   per impianto: da qui in giu' e' una regola sola per tutte - niente ombre,
   niente simboli fuori dai numerali, stesso sollevamento al passaggio del
   mouse. Le tre impaginazioni sono i modificatori .benefits-pairs, .steps-ruled
   e .steps-boxed, piu' in basso.
   I selettori restano due perche' il markup e' diverso e deve restarlo: "Come"
   e "Quando" sono <ol> (i passi sono sequenze, e allo screen reader serve
   saperlo), "Cosa" e' un elenco di occasioni e resta <article>.
   ========================================================================== */

/* Niente rientro di lista: i tre blocchi partono dallo stesso filo sinistro
   del titolo e dell'occhiello della sezione, non 40px piu' in la'. */
.steps,
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-left: 0;
  list-style: none;
}

.step-card,
.benefit-card {
  transition: transform var(--transition-base);
}

/* --------------------------------------------------------------------------
   I sei blocchi entrano a cascata quando li raggiungi, 100ms l'uno dall'altro:
   stessa grammatica dell'entrata dell'hero, cosi' la pagina si muove sempre
   nello stesso modo. Una volta sola - a ogni passaggio diventerebbero
   fastidiosi (l'osservatore smette di guardarli, vedi script.js).

   Due precauzioni che qui contano piu' dell'effetto:
   - lo stato di partenza vale solo sotto `.js`: se lo script non gira, sei
     blocchi resterebbero invisibili per sempre;
   - si muove `translate`, non `transform`, cosi' il sollevamento al passaggio
     del mouse (piu' sotto) resta libero di usare `transform` senza che i due
     si sovrascrivano a vicenda.
   -------------------------------------------------------------------------- */
.js .step-card,
.js .benefit-card {
  opacity: 0;
  translate: 0 14px;
  transition: opacity 0.6s var(--ease-out), translate 0.6s var(--ease-out),
              transform var(--transition-base);
}

.js .step-card.is-in,
.js .benefit-card.is-in {
  opacity: 1;
  translate: 0 0;
}

.js .step-card:nth-child(2),
.js .benefit-card:nth-child(2) { transition-delay: 0.1s, 0.1s, 0s; }

.js .step-card:nth-child(3),
.js .benefit-card:nth-child(3) { transition-delay: 0.2s, 0.2s, 0s; }

/* "Cosa Verso" ha quattro riquadri e non tre: senza questa riga il quarto
   entrava insieme al primo e la cascata si vedeva rompersi. */
.js .benefit-card:nth-child(4) { transition-delay: 0.3s, 0.3s, 0s; }

/* Erano etichette di una o due parole e stavano in maiuscoletto spaziato. Ora
   sono frasi intere con il punto ("Il criterio e' scritto e vale per tutti."):
   in maiuscolo una frase si legge male e urla, quindi tornano minuscole. */
.step-card h3,
.benefit-card h3,
.benefit-card h4 {
  font-size: var(--fs-xl);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.22;
  margin-bottom: 0.55em;
}

/* Nelle quattro occasioni il titolo e' un'etichetta corta e sta al corpo del
   testo: si distingue per il peso, non per la taglia. Ha bisogno di piu' aria
   sotto, altrimenti a parita' di corpo si legge come la prima riga del
   paragrafo. */
.benefit-card h4 {
  font-size: var(--fs-lg);
  margin-bottom: 0.7em;
}

/* Il tono secondario arriva dal campo (vedi --card-muted su .section-light e
   .section-blu): stesso ruolo nelle due sezioni, chiarezza diversa. */
.step-card p,
.benefit-card p {
  /* Il ripiego serve se un blocco finisse fuori dai due campi del capitolo:
     invece di sparire, il testo prende il colore della sezione che lo ospita. */
  color: var(--card-muted, currentColor);
  margin-bottom: 0;
  font-size: var(--fs-lg);
  max-width: 46ch;
}

/* Hover: il blocco puntato si solleva e basta, il colore non cambia. */
@media (hover: hover) {
  .step-card:hover,
  .benefit-card:hover {
    transform: translateY(-4px);
  }
}

@media (min-width: 760px) {
  .steps,
  .benefits {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Le tre impaginazioni dei blocchi centrali. Stessa griglia di partenza
   (.steps / .benefits), tre modi di posarla:

   .benefits-pairs  quattro riquadri a due a due, un filetto sopra ciascuno
                    ("Cosa Verso": le quattro occasioni)
   .steps-ruled     righe piene una sotto l'altra, separate da un filetto
                    ("Come Verso": i tre criteri)
   .steps-boxed     blocchi pieni su superficie rialzata
                    ("Quando Verso": le tre fasi)

   I numerali 01/02/03 sono l'unico segno decorativo e prendono il caldo del
   campo (--num-color): sono aria-hidden nell'HTML, la sequenza la porta l'<ol>.
   -------------------------------------------------------------------------- */

.step-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--num-color, var(--card-muted, currentColor));
  margin-bottom: 1.1em;
}

/* Apertura di un blocco: la frase che regge la sezione, sotto al titolo del
   capitolo e sopra i riquadri. */
.block-intro {
  margin-top: var(--space-xl);
  max-width: 62ch;
}

.block-intro h3 {
  font-size: clamp(1.5rem, 1.8vw + 0.9rem, 2.25rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

.block-intro p {
  margin-bottom: 0;
  font-size: var(--fs-lg);
  color: var(--card-muted, currentColor);
}

/* Ora il testo delle sezioni e' piu' di un paragrafo: senza questa riga
   restavano attaccati. */
.block-intro p + p {
  margin-top: var(--space-sm);
}

/* Sotto al titolo di sezione non c'e' piu' un occhiello a fare da distanza:
   il margine del titolo basta. */
.section-header + .block-intro {
  margin-top: 0;
}

/* Chiusura di un blocco: la postilla centrata sotto i riquadri. */
.block-note {
  margin: var(--space-xl) auto 0;
  max-width: 58ch;
  text-align: center;
  font-size: var(--fs-lg);
  color: var(--card-muted, currentColor);
}

/* ---- .benefits-pairs -------------------------------------------------- */

.benefits-pairs {
  margin-top: var(--space-lg);
}

.benefits-pairs .benefit-card {
  border-top: 1px solid var(--card-border, var(--color-border));
  padding-top: var(--space-md);
  /* Il filetto e' il separatore fra una riga di occasioni e l'altra: sotto,
     la riga successiva deve staccarsi piu' di quanto stacchino le colonne. */
  padding-bottom: var(--space-sm);
}

.benefits-pairs .benefit-card p {
  max-width: none;
}

@media (min-width: 760px) {
  .benefits-pairs {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg) var(--space-2xl);
  }
}

/* ---- .steps-ruled ----------------------------------------------------- */

.steps-ruled {
  gap: var(--space-lg);
}

.steps-ruled .step-card {
  border-top: 1px solid var(--card-border, var(--color-border));
  padding-top: var(--space-lg);
}

.steps-ruled .step-card p {
  max-width: 68ch;
}

/* Le righe restano incolonnate a ogni larghezza: sono frasi lunghe, in tre
   colonne diventerebbero tre paragrafi stretti. */
@media (min-width: 760px) {
  .steps-ruled {
    grid-template-columns: 1fr;
  }
}

/* ---- .steps-boxed ----------------------------------------------------- */

.steps-boxed {
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Tre riquadri di porcellana ritagliati nel campo blu: e' l'unico posto della
   pagina dove il campo chiaro sta dentro quello scuro e non accanto. Per
   questo il blocco si porta dietro tutti i suoi colori invece di prenderli
   dalla sezione - il testo, il titolo (che senza questa riga resterebbe
   porcellana per via della regola su .section-blu h3), il secondario e i
   numerali, che qui tornano blu come quelli di "Come Verso". */
.steps-boxed .step-card {
  background-color: var(--color-porcellana);
  border-radius: var(--radius-card);
  padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + 0.25rem);
  color: var(--color-text);
  --card-muted: var(--color-text-muted);
  --num-color: var(--color-blue);
}

.steps-boxed .step-card h3 {
  color: var(--color-text);
}

.steps-boxed .step-card p {
  max-width: 68ch;
}

@media (min-width: 760px) {
  .steps-boxed {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Perché Verso — due paragrafi in prima persona
   ========================================================================== */

.about {
  max-width: 900px;
  margin-top: var(--space-xl);
}

/* Scala da manifesto: il primo paragrafo e' la dichiarazione, il secondo la spiega.
   Il colore e' quello del campo e basta: il riempimento progressivo legato allo
   scroll e' stato tolto, e con lui l'unico motivo per cui questi paragrafi
   partivano da un tono spento. */
.about p {
  font-size: clamp(1.375rem, 1.5vw + 0.9rem, 2.125rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: inherit;
}

.about p + p {
  margin-top: var(--space-lg);
  font-size: clamp(1.0625rem, 0.6vw + 0.85rem, 1.375rem);
  line-height: 1.5;
}

/* ==========================================================================
   Anche io Verso — form pillola nera su fondo panna
   ========================================================================== */

.signup-form {
  max-width: 480px;
  margin-top: var(--space-xl);
}

.form-fields .form-field {
  margin-bottom: var(--space-sm);
}

.form-field input[type="text"],
.form-field input[type="email"] {
  width: 100%;
  padding: 1.1em 1.5em;
  border: none;
  border-radius: var(--radius-pill);
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: inherit;
  background-color: var(--color-ink);
  color: var(--color-porcellana);
}

.form-field input::placeholder {
  color: var(--color-text-muted-on-dark);
  font-weight: 700;
}

/* Il campo si solleva di due pixel e prende un'ombra morbida quando ci scrivi:
   si sente sotto le dita, non si vede. Il contorno blu resta ed e' lui a fare
   il lavoro di accessibilita' - l'ombra sparisce in modalita' a contrasto
   forzato, un `outline` no. */
.form-field input[type="text"],
.form-field input[type="email"] {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.form-field input:focus {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(14, 27, 21, 0.14);
}

.form-field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: 0.4em 0.75em;
  margin-bottom: var(--space-sm);
}

.form-field-checkbox input {
  margin-top: 0.3em;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-blue);
}

.form-field-checkbox label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.form-field-checkbox label a {
  color: var(--color-text);
  text-decoration: underline;
}

.form-error {
  color: #b3261e;
  font-size: var(--fs-sm);
  margin-top: 0.4em;
  margin-bottom: var(--space-xs);
  min-height: 1.2em;
}

/* --------------------------------------------------------------------------
   Conferma dell'invio: i campi si dissolvono e la conferma sale con una spunta
   che si disegna. E' il momento in cui chi si iscrive decide se questa cosa e'
   seria, e prima era un salto secco - i campi sparivano e appariva un riquadro.
   La sequenza sta in script.js.
   -------------------------------------------------------------------------- */

.form-status {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background-color: var(--color-ink);
  color: var(--color-porcellana);
  font-size: var(--fs-sm);
  display: none;
  align-items: flex-start;
  gap: 0.8em;
}

.form-status.is-visible {
  display: flex;
  animation: hero-rise 0.5s var(--ease-out) both;
}

.form-check {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
}

.form-check circle {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2;
  /* Senza queste due righe lo `scale` in SVG prende come centro l'origine del
     sistema di coordinate e il cerchio parte da fuori campo. */
  transform-box: fill-box;
  transform-origin: center;
}

/* La spunta si disegna scoprendo il tratteggio: parte a corsa finita del
   cerchio, se no sembrano due cose che succedono per caso insieme. */
.form-check path {
  fill: none;
  stroke: var(--color-porcellana);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}

.form-status.is-visible .form-check circle {
  animation: check-pop 0.42s var(--ease-spring) both;
}

.form-status.is-visible .form-check path {
  animation: check-draw 0.4s var(--ease-out) 0.24s both;
}

@keyframes check-pop {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

/* I campi si dissolvono prima di sparire dal flusso: `display: none` da solo
   li fa scomparire di scatto e la pagina sobbalza. */
.signup-form .form-fields {
  transition: opacity 0.2s var(--ease-out);
}

.signup-form.is-fading .form-fields {
  opacity: 0;
}

.signup-form.is-submitted .form-fields {
  display: none;
}

/* ==========================================================================
   Ultima chiamata sul campo blu

   Il modulo sta ora su blu (con "Dove verso" in mezzo la sequenza dei campi
   e' scalata di uno). I campi restano pillole nere come prima; quello che era
   scritto per il fondo chiaro - bottone blu, testo scuro, errore rosso - sul
   blu sparirebbe, e qui viene ribaltato.
   ========================================================================== */

/* Il ringraziamento sostituisce il modulo con `hidden`: senza questa riga un
   `display` scritto in una classe lo terrebbe visibile. */
[hidden] {
  display: none !important;
}

.form-field label {
  display: block;
  margin: 0 0 0.4em 0.75rem;
  font-size: var(--fs-base);
  font-weight: 700;
}

/* La domanda dell'esperimento: due pulsanti grandi. Le radio restano vere e
   raggiungibili (Tab, frecce, lettore di schermo): sono solo fuori vista, e a
   fare da pulsante e' la loro etichetta. */
.form-choice {
  min-width: 0;
  margin: 0 0 var(--space-md);
  padding: 0;
  border: 0;
}

.form-choice legend {
  padding: 0 0 0 0.75rem;
  font-size: var(--fs-lg);
  font-weight: 900;
  line-height: 1.3;
}

.form-help {
  margin: 0.4em 0 var(--space-sm) 0.75rem;
  font-size: var(--fs-sm);
  color: var(--card-muted, currentColor);
}

.form-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.form-choice-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  opacity: 0;
}

.form-choice-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0.9em 1em;
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  color: var(--color-porcellana);
  font-size: var(--fs-lg);
  font-weight: 900;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
              box-shadow var(--transition-base);
}

.form-choice-options label:hover {
  box-shadow: inset 0 0 0 2px var(--color-porcellana);
}

/* Scelta fatta: il pulsante si inverte e prende la spunta, cosi' la risposta
   non e' affidata al solo colore. */
.form-choice-options input:checked + label {
  background-color: var(--color-porcellana);
  color: var(--color-ink);
}

.form-choice-options input:checked + label::before {
  content: '✓';
  margin-right: 0.5em;
}

.form-choice-options input:focus-visible + label {
  outline: 3px solid var(--color-text-on-blue);
  outline-offset: 3px;
}

.section-blu .form-field input:focus {
  outline-color: var(--color-text-on-blue);
}

.section-blu .form-field-checkbox label {
  color: var(--color-text-muted-on-blue);
}

.section-blu .form-field-checkbox label a {
  color: var(--color-text-on-blue);
}

.section-blu .form-field-checkbox input {
  accent-color: var(--color-ink);
}

/* L'errore rosso sul blu non si legge: sta in una piccola etichetta di
   porcellana, che con lo stesso rosso arriva a 5,4:1. */
.section-blu .form-error:not(:empty) {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: var(--radius-sm);
  background-color: var(--color-porcellana);
  color: #b3261e;
  font-weight: 700;
}

/* Il bottone blu sul campo blu sparirebbe: qui e' porcellana con testo nero. */
.section-blu .btn-primary {
  background-color: var(--color-porcellana);
  color: var(--color-ink);
}

.section-blu .btn-primary:hover,
.section-blu .btn-primary:active {
  background-color: var(--color-text-muted-on-blue);
}

.section-blu .btn-spinner {
  border-color: rgba(14, 27, 21, 0.25);
  border-top-color: var(--color-ink);
}

.form-note {
  margin: var(--space-sm) 0 0 0.75rem;
  font-size: var(--fs-sm);
  color: var(--card-muted, currentColor);
}

/* --------------------------------------------------------------------------
   Il ringraziamento, al posto del modulo. E' un .block-intro: titolo e testo
   prendono le stesse misure di ogni altra apertura di sezione. Con il modulo
   sparito, anche il titolo "Ci vuole un'email…" esce: il titolo ora e' "Ci sei."
   -------------------------------------------------------------------------- */
#anche-io-verso.is-done .section-header {
  display: none;
}

.thanks {
  margin-top: 0;
  scroll-margin-top: 104px;
  animation: hero-rise 0.5s var(--ease-out) both;
}

.thanks h3:focus {
  outline: none;
}

/* "Ci sei." e' il titolo di questo stato della pagina: prende la taglia di un
   titolo di sezione, non quella di un occhiello. */
.thanks h3 {
  max-width: none;
  margin-bottom: var(--space-md);
  font-size: var(--fs-section-title);
  line-height: 1;
}

.thanks-form {
  max-width: 480px;
  margin-top: var(--space-lg);
}

.thanks-form .thanks-ask {
  color: var(--color-text-on-blue);
}

.thanks-form .form-field {
  margin: var(--space-md) 0 var(--space-sm);
}

.thanks-done {
  margin-top: var(--space-lg);
  color: var(--color-text-on-blue);
  font-weight: 700;
}

.thanks-done:focus {
  outline: none;
}

/* ==========================================================================
   Segnaposto del mock-up della mappa ("Come verso")
   Un riquadro tratteggiato, dichiaratamente vuoto: finche' l'immagine non c'e'
   non si finge una schermata. Va sostituito da un <figure> con l'immagine vera
   (vedi il commento in landing.html).
   ========================================================================== */

.mockup-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  margin: var(--space-xl) 0 0;
  padding: var(--space-md);
  border: 2px dashed var(--card-border, var(--color-border));
  border-radius: var(--radius-card);
  color: var(--card-muted, currentColor);
  text-align: center;
}

.mockup-placeholder p {
  margin: 0;
}

.mockup-placeholder-title {
  font-size: var(--fs-xl);
  font-weight: 900;
  color: var(--color-text);
}

.mockup-placeholder-note {
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   FAQ — lista semplice con divisori, nessuna card

   Sta su campo blu, ma i colori li prende dalla sezione (currentColor,
   --card-border, --card-muted) invece di nominare il fondo: e' l'ultima
   sezione della pagina e ha gia' cambiato campo una volta.
   ========================================================================== */

.faq-list {
  max-width: 68ch;
  margin-top: var(--space-xl);
}

.faq-item {
  border-bottom: 1px solid var(--card-border, var(--color-border-on-dark));
}

.faq-question {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) 0;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question h3 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 500;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.faq-icon {
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 300;
  color: inherit;
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}

.faq-answer p {
  color: var(--card-muted, var(--color-text-muted-on-dark));
  padding-bottom: var(--space-md);
  margin-bottom: 0;
  max-width: 60ch;
  font-size: var(--fs-lg);
}

/* --------------------------------------------------------------------------
   Apertura: l'altezza cresce e le domande sotto scendono con lei, invece di
   essere buttate in basso di colpo. Era il punto piu' grezzo della pagina.

   La griglia da 0fr a 1fr e' il modo di animare verso un'altezza che non
   conosciamo senza misurarla in JS; il guscio interno porta l'overflow. Il
   testo entra 80ms dopo, cosi' non scorre insieme al bordo che si apre.

   Serve comunque un po' di JS (script.js): <details> nativo chiude di scatto,
   quindi la chiusura va ritardata a fine corsa.
   -------------------------------------------------------------------------- */
.js .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease-in-out);
}

.js .faq-answer-inner {
  overflow: hidden;
}

.js .faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.js .faq-answer p {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.24s var(--ease-out) 0.08s, transform 0.24s var(--ease-out) 0.08s;
}

.js .faq-item.is-open .faq-answer p {
  opacity: 1;
  transform: translateY(0);
}

.faq-question:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* Ripiego senza JS: l'apertura resta secca come prima, con la dissolvenza
   breve che c'era gia'. Con il JS attivo comanda la griglia qui sopra. */
html:not(.js) .faq-item[open] .faq-answer {
  animation: faq-reveal 0.2s ease;
}

@keyframes faq-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Il footer chiude la pagina invece di finirla: marchio, payoff e i due link
   legali, con un filetto che lo stacca dalle domande frequenti (che stanno
   sullo stesso campo scuro, quindi senza filetto le due zone si fondevano). */
.site-footer {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-top: 1px solid var(--color-border-on-dark);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text-muted-on-dark);
}

.site-footer p {
  margin-bottom: 0;
}

.site-footer a {
  color: var(--color-text-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--transition-base);
}

/* Non il blu: su fondo scuro sta a 2,55:1, cioe' i link diventavano meno
   leggibili proprio mentre li puntavi. Sui fondi scuri l'accento e' il caldo. */
.site-footer a:hover {
  color: var(--color-terracotta-on-dark);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

/* Il marchio qui e' bianco e non blu: il blu del logo su nero di bottiglia sta
   a 2,55:1 e il marchio si perderebbe nel fondo (stesso motivo per cui i link
   del footer non sono blu). E' un file a parte perche' l'SVG del logo ha i
   colori scritti dentro e un <img> non eredita currentColor. */
.footer-logo {
  height: clamp(2.25rem, 3vw + 1rem, 3.25rem);
  width: auto;
}

/* Sta su una riga sola: da 520px in su il corpo e' legato alla larghezza in
   modo che la riga entri sempre nel contenitore. Sotto quella soglia va a capo
   invece di uscire dallo schermo. */
.footer-payoff {
  color: var(--color-text-on-dark);
  font-size: clamp(0.9375rem, 2.8vw, 1.0625rem);
  line-height: 1.4;
  text-wrap: balance;
}

@media (min-width: 520px) {
  .footer-payoff {
    font-size: min(1.0625rem, 2.8vw);
    white-space: nowrap;
  }
}

.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-on-dark);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
}

.footer-sep {
  color: var(--color-text-muted-on-dark);
}

.footer-copy {
  color: var(--color-text-on-dark);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media (min-width: 640px) {
  .footer-legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

/* ==========================================================================
   Utility
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Reduced motion — deve restare in fondo al file per vincere su tutto
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .btn:hover,
  .btn:active,
  .nav-toggle:active,
  .btn:hover > span[aria-hidden="true"],
  .btn-quiet:hover > span[aria-hidden="true"],
  .form-field input:focus,
  .step-card:hover,
  .benefit-card:hover {
    transform: none !important;
  }

  /* Tutto cio' che entra deve restare visibile: le entrate scaglionate sono
     animazioni con `both`, quindi con `animation: none` si fermano gia' allo
     stato finale. I sei blocchi di "Come/Cosa Verso" invece partono da uno
     stato nascosto scritto in CSS, e vanno riportati a mano - se l'osservatore
     non facesse in tempo ad agganciarli resterebbero via per sempre. */
  .js .step-card,
  .js .benefit-card {
    opacity: 1 !important;
    translate: none !important;
  }

  /* La testata puo' comunque stringersi: e' un cambio di misura, non un
     movimento che si insegue con gli occhi. Solo, avviene senza transizione. */

  /* La FAQ si apre e si chiude di scatto, ma il contenuto non deve restare
     schiacciato dalla griglia ferma a 0fr. */
  .js .faq-item.is-open .faq-answer {
    grid-template-rows: 1fr !important;
  }

  .js .faq-answer p {
    opacity: 1 !important;
    transform: none !important;
  }

  /* La conferma dell'invio compare tutta insieme, spunta gia' disegnata. */
  .form-check path {
    stroke-dashoffset: 0 !important;
  }

  /* Il vocabolario non scorre piu' da solo, ma resta una fascia a riga
     singola: lo swipe manuale prende il posto dello scorrimento automatico
     invece di impilare le parole in un blocco. La maschera resta com'e' -
     qui sfuma un bordo scorrevole, non una riga di testo che si legge. */
  .vocab-track {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--space-md);
  }

  .vocab-track::-webkit-scrollbar {
    display: none;
  }

  /* La copia duplicata serve solo a rendere continuo lo scorrimento
     automatico: qui basta la lista singola, piu' lunga dello schermo. */
  .vocab-list-clone {
    display: none;
  }

  /* La goccia resta legata allo scroll: non e' un'animazione autonoma. */
  .scroll-drop-fill {
    transform: scaleY(var(--scroll-progress, 0)) !important;
  }
}