/* Le pagine di testo: home, citta', indici delle linee, 404.
   Direzione "inchiostro": la cromatura non e' mai colorata, e l'unico colore
   della pagina arriva dai dati — i badge delle linee col loro colore vero e la
   scala di freschezza. Chi guarda impara subito una regola: se e' colorato,
   significa qualcosa.
   Ogni misura qui dentro viene da tokens.css. Nessun numero nuovo. */

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--raggio-1); }

/* ---------- INTESTAZIONE ---------- */
.site-header {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  width: min(var(--colonna), calc(100% - var(--sp-7)));
  min-height: var(--sp-8);
  margin: 0 auto;
  align-items: center;
  border-bottom: 1px solid var(--filo);
}
.site-brand { display: inline-flex; width: max-content; gap: var(--sp-3); align-items: center; text-decoration: none; }
/* Il marchio e' un'immagine sola: altezza fissa e larghezza dal rapporto, con
   width/height dichiarati nel tag perche' il posto sia gia' riservato prima
   che il file arrivi e l'intestazione non salti. */
.site-brand img { width: auto; height: 40px; }
.site-brand > span {
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: var(--raggio-2);
  font-size: var(--t-1);
  font-weight: var(--peso-forte);
}
.site-brand strong { font-size: var(--t-4); font-weight: var(--peso-forte); letter-spacing: -.03em; }
.header-status { display: flex; gap: var(--sp-2); align-items: center; color: var(--testo-2); font-size: var(--t-2); font-weight: var(--peso-medio); }
.header-status i, .final-cta > div > p i {
  width: var(--sp-2);
  height: var(--sp-2);
  background: var(--dato-fresco);
  border-radius: var(--raggio-tondo);
}
/* Il selettore di lingua e l'azione stanno nella stessa cella a destra: la
   griglia dell'intestazione resta a tre colonne (marchio · stato · destra). */
.header-end { justify-self: end; display: inline-flex; gap: var(--sp-2); align-items: center; }
/* Il selettore: un globo che apre l'elenco delle lingue. È un <details>, quindi
   si apre e si chiude senza JavaScript; la tendina si stacca dal flusso e cade
   sotto il globo, allineata a destra come l'azione accanto. */
.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--raggio-2);
  color: var(--testo-2);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover,
.lang-switch[open] > summary { color: var(--testo); background: var(--sfondo-2); }
.lang-globe { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.lang-menu {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 9rem;
  padding: var(--sp-1);
  background: var(--sfondo);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-2);
  box-shadow: var(--ombra-2);
}
.lang-menu a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--raggio-1);
  color: var(--testo-2);
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.lang-menu a:hover { background: var(--sfondo-2); color: var(--testo); }
.lang-menu a[aria-current="page"] { color: var(--testo); background: var(--sfondo-2); }
.header-action {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary);
  border-radius: var(--raggio-2);
  color: var(--primary-ink);
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background 150ms ease;
}
.header-action:hover { background: var(--primary-hover); }
.header-action span { transition: transform 160ms ease; }
.header-action:hover span { transform: translateX(2px); }

main { width: min(var(--colonna), calc(100% - var(--sp-7))); margin: 0 auto; }

/* ---------- EROE ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
  gap: var(--sp-8);
  padding: var(--sp-sezione) 0;
  align-items: center;
}
.hero-copy { max-width: 34rem; }
.eyebrow {
  margin-bottom: var(--sp-4);
  color: var(--testo-2);
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.hero .eyebrow { display: flex; gap: var(--sp-2); align-items: center; }
.hero .eyebrow span {
  padding: var(--sp-1) var(--sp-2);
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: var(--raggio-1);
  letter-spacing: .06em;
}
.hero h1 { font-size: var(--t-6); font-weight: var(--peso-forte); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
/* Nella direzione scelta il corsivo serif non c'e' piu': l'enfasi la fa il
   peso, non un secondo carattere. */
.hero h1 em, .index-hero h1 em, .final-cta h2 em { font-style: normal; color: var(--testo-2); }
.hero-lead { max-width: var(--lettura); margin-top: var(--sp-5); color: var(--testo-2); font-size: var(--t-4); line-height: 1.5; }
.beta-intro { max-width: var(--lettura); margin-top: var(--sp-4); color: var(--testo-2); font-size: var(--t-3); line-height: 1.65; }
.beta-intro strong { color: var(--testo); font-weight: var(--peso-medio); }
.hero-actions { display: flex; gap: var(--sp-5); margin-top: var(--sp-6); align-items: center; }
.primary-action {
  display: inline-flex;
  min-height: var(--sp-7);
  padding: 0 var(--sp-5);
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: var(--raggio-2);
  font-size: var(--t-3);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background 150ms ease;
}
.primary-action:hover { background: var(--primary-hover); }
.text-action {
  padding: var(--sp-2) 0;
  color: var(--testo);
  border-bottom: 1px solid var(--filo-forte);
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: border-color 150ms ease;
}
.text-action:hover { border-bottom-color: var(--primary); }

.hero-visual { position: relative; }
.map-demo {
  padding: var(--sp-2);
  background: var(--sfondo);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-3);
  box-shadow: var(--ombra-2);
}
.map-demo img { width: 100%; aspect-ratio: 16 / 10.4; object-fit: cover; border-radius: var(--raggio-2); }
/* Le due etichette restano perche' spiegano l'immagine, ma smettono di essere
   adesivi storti: diventano didascalie. */
.visual-note {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--testo-2);
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.note-top { margin-bottom: var(--sp-3); }
.note-top b { color: var(--testo-3); font-family: var(--font-numeri); font-weight: var(--peso-medio); }
.note-bottom { margin-top: var(--sp-3); }
.note-bottom i { width: var(--sp-2); height: var(--sp-2); background: var(--dato-fresco); border-radius: var(--raggio-tondo); }

/* ---------- FASCIA DELLE CARATTERISTICHE ---------- */
.service-strip {
  display: flex;
  min-height: var(--sp-8);
  margin: 0 calc(50% - 50vw);
  padding: 0 max(var(--sp-5), calc((100vw - var(--colonna)) / 2));
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-5);
  border-block: 1px solid var(--filo);
  background: var(--sfondo-2);
  color: var(--testo-2);
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.service-strip i { flex: 0 0 auto; width: 3px; height: 3px; background: var(--filo-forte); border-radius: var(--raggio-tondo); }

/* ---------- SEZIONI ---------- */
.story-section {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-7);
  padding: var(--sp-sezione) 0;
  border-bottom: 1px solid var(--filo);
}
.section-index {
  align-self: start;
  display: flex;
  gap: var(--sp-2);
  color: var(--testo-3);
  font-family: var(--font-numeri);
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.section-index span { color: var(--testo-3); }
.section-body { min-width: 0; }
.section-heading { max-width: 44rem; margin-bottom: var(--sp-7); }
.section-heading.narrow { max-width: 36rem; }
.section-heading h2, .process-section h2, .trust-section h2, .final-cta h2 {
  font-size: var(--t-5);
  font-weight: var(--peso-forte);
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.section-heading > p:last-child { max-width: var(--lettura); margin-top: var(--sp-4); color: var(--testo-2); font-size: var(--t-3); line-height: 1.65; }

/* ---------- COPERTURA ---------- */
.coverage-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: var(--sp-8); align-items: start; }
.coverage-copy { display: grid; gap: var(--sp-4); max-width: var(--lettura); }
.coverage-copy p { color: var(--testo-2); font-size: var(--t-3); line-height: 1.68; }
.coverage-copy strong { color: var(--testo); font-weight: var(--peso-medio); }
.coverage-ticket { padding: var(--sp-6); background: var(--sfondo-2); border: 1px solid var(--filo); border-radius: var(--raggio-3); }
.coverage-ticket > p { color: var(--testo-3); font-size: var(--t-1); font-weight: var(--peso-medio); letter-spacing: .1em; text-transform: uppercase; }
.coverage-ticket > strong { display: block; margin-top: var(--sp-3); font-size: var(--t-5); font-weight: var(--peso-forte); line-height: 1; letter-spacing: -.04em; }
.coverage-ticket > span { display: block; margin-top: var(--sp-2); color: var(--testo-2); font-size: var(--t-2); }
.coverage-route {
  display: grid;
  grid-template-columns: auto auto minmax(var(--sp-5), 1fr) auto auto;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  align-items: center;
  color: var(--testo-2);
  font-size: var(--t-1);
}
.coverage-route .track { height: 1px; background: var(--filo-forte); }
.coverage-route i { flex: 0 0 auto; width: var(--sp-2); height: var(--sp-2); border: 1px solid var(--filo-forte); border-radius: var(--raggio-tondo); }
.coverage-route i.active { background: var(--dato-fresco); border-color: var(--dato-fresco); }
.coverage-route b { color: var(--testo); font-weight: var(--peso-medio); }

/* ---------- MOMENTI ---------- */
.moment-list { border-top: 1px solid var(--filo-forte); }
.moment-list article {
  display: grid;
  grid-template-columns: 180px minmax(220px, .8fr) minmax(280px, 1.2fr);
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  align-items: baseline;
  border-bottom: 1px solid var(--filo);
}
.moment-list article > span { color: var(--testo-3); font-size: var(--t-1); font-weight: var(--peso-medio); letter-spacing: .1em; text-transform: uppercase; }
.moment-list h3 { max-width: 22rem; font-size: var(--t-4); font-weight: var(--peso-medio); line-height: 1.25; letter-spacing: -.02em; }
.moment-list p { color: var(--testo-2); font-size: var(--t-3); line-height: 1.6; }

/* ---------- PROCESSO ---------- */
.process-section {
  margin: var(--sp-7) calc(50% - 50vw);
  padding: var(--sp-sezione) max(var(--sp-5), calc((100vw - var(--colonna)) / 2));
  background: var(--sfondo-2);
  border-block: 1px solid var(--filo);
}
.process-section header { max-width: 44rem; }
.process-section .eyebrow { color: var(--testo-3); }
.process-route {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin: var(--sp-7) 0;
  padding: 0;
  list-style: none;
}
.process-route li { display: grid; align-content: start; padding-right: var(--sp-6); border-top: 1px solid var(--filo-forte); padding-top: var(--sp-4); }
.process-route i { display: none; }
.process-route span { color: var(--testo-3); font-family: var(--font-numeri); font-size: var(--t-1); font-weight: var(--peso-medio); letter-spacing: .1em; }
.process-route b { margin-top: var(--sp-2); font-size: var(--t-4); font-weight: var(--peso-medio); letter-spacing: -.02em; }
.process-route p { max-width: 18rem; margin-top: var(--sp-2); color: var(--testo-2); font-size: var(--t-2); line-height: 1.6; }
.light-action {
  display: inline-flex;
  min-height: var(--sp-7);
  padding: 0 var(--sp-5);
  align-items: center;
  gap: var(--sp-3);
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: var(--raggio-2);
  font-size: var(--t-3);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: background 150ms ease;
}
.light-action:hover { background: var(--primary-hover); }

/* ---------- TABELLONE DELLE LINEE ---------- */
.board-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(440px, 1.3fr); gap: var(--sp-8); align-items: start; }
.line-board { border-top: 1px solid var(--filo-forte); }
.line-board a {
  display: grid;
  /* Colonna del badge di larghezza fissa e non automatica: cosi' il testo
     comincia allo stesso punto in tutte le righe, anche fra un "2" e un "53E".
     Il gap e' indispensabile — senza, il badge tocca la scritta. */
  grid-template-columns: var(--sp-7) 1fr auto;
  gap: var(--sp-4);
  min-height: var(--sp-8);
  align-items: center;
  border-bottom: 1px solid var(--filo);
  text-decoration: none;
  transition: background 150ms ease;
}
.line-board a:hover { background: var(--sfondo-2); }
/* Il badge porta il colore vero della linea, passato dal server: e' il posto
   dove la regola "il colore e' un dato" si vede meglio. Senza colore
   dichiarato resta inchiostro. */
.line-board b {
  display: grid;
  place-items: center;
  min-width: var(--sp-7);
  height: var(--sp-6);
  padding: 0 var(--sp-2);
  /* Senza questo il badge si allarga fino a riempire la colonna e va a
     toccare il testo: e' un minimo, non una larghezza. */
  justify-self: start;
  color: var(--colore-testo-linea, var(--primary-ink));
  background: var(--colore-linea, var(--primary));
  border-radius: var(--raggio-1);
  /* Un filo interno e non un bordo: cinque linee di navigazione su venticinque
     hanno un colore piu' chiaro del fondo — la 1 e' letteralmente bianca, 1,00:1
     di contrasto — e senza questo il badge sparirebbe. Interno perche' non
     cambia le misure e quindi non esce dalla scala. */
  box-shadow: inset 0 0 0 1px var(--filo-badge);
  font-family: var(--font-numeri);
  font-size: var(--t-2);
  font-weight: var(--peso-forte);
}
.line-board span { color: var(--testo); font-size: var(--t-2); font-weight: var(--peso-normale); }
.line-board i { color: var(--testo-3); font-size: var(--t-3); font-style: normal; }

/* ---------- ONESTA' ----------
   L'unico blocco scuro della pagina. La regola e' spendere l'audacia in un
   posto solo: qui, dove si parla di quanto ci si puo' fidare dei dati. */
.trust-section {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: var(--sp-8);
  margin: var(--sp-7) 0;
  padding: var(--sp-sezione) var(--sp-8);
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: var(--raggio-3);
}
.trust-section .eyebrow { color: var(--su-primary-3); }
.trust-copy { display: grid; gap: var(--sp-4); align-content: center; }
.trust-copy > p { color: var(--su-primary-2); font-size: var(--t-3); line-height: 1.68; }
.freshness-scale { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.freshness-scale span {
  display: grid;
  grid-template-columns: var(--sp-2) 6rem 1fr;
  gap: var(--sp-3);
  align-items: center;
  color: var(--su-primary-2);
  font-size: var(--t-2);
}
.freshness-scale i { width: var(--sp-2); height: var(--sp-2); border-radius: var(--raggio-tondo); }
.freshness-scale i.current { background: var(--dato-fresco); }
.freshness-scale i.recent { background: var(--dato-recente); }
.freshness-scale i.old { background: var(--dato-vecchio); }
.freshness-scale b { color: var(--primary-ink); font-family: var(--font-numeri); font-size: var(--t-2); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }

/* ---------- DOMANDE ---------- */
.faq-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(440px, 1.3fr); gap: var(--sp-8); align-items: start; }
.faq-list { border-top: 1px solid var(--filo-forte); }
.faq details { border-bottom: 1px solid var(--filo); }
.faq summary {
  display: flex;
  min-height: var(--sp-8);
  padding: var(--sp-4) 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  color: var(--testo);
  cursor: pointer;
  list-style: none;
  font-size: var(--t-3);
  font-weight: var(--peso-medio);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--sp-5);
  height: var(--sp-5);
  color: var(--testo-2);
  border: 1px solid var(--filo-forte);
  border-radius: var(--raggio-tondo);
  font-size: var(--t-2);
  font-weight: var(--peso-normale);
}
.faq details[open] summary::after { content: "−"; color: var(--primary-ink); background: var(--primary); border-color: var(--primary); }
.faq details p { max-width: var(--lettura); padding: 0 var(--sp-7) var(--sp-5) 0; color: var(--testo-2); font-size: var(--t-3); line-height: 1.65; }

/* ---------- CHIUSURA ---------- */
.final-cta {
  display: flex;
  margin: var(--sp-8) 0;
  padding: var(--sp-8);
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-7);
  background: var(--sfondo-2);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-3);
}
.final-cta > div > p {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  align-items: center;
  color: var(--testo-2);
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.final-cta h2 { max-width: 32rem; }
.final-cta .primary-action { flex: 0 0 auto; }

/* ---------- PIEDE ---------- */
.site-footer {
  display: flex;
  width: min(var(--colonna), calc(100% - var(--sp-7)));
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-7);
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  border-top: 1px solid var(--filo);
}
.site-footer strong { font-size: var(--t-2); font-weight: var(--peso-medio); }
.site-footer p { max-width: var(--lettura); margin-top: var(--sp-2); color: var(--testo-3); font-size: var(--t-1); line-height: 1.6; }
/* La firma: una riga sola, un filo piu' viva del disclaimer perche' e' una
   voce, non una nota legale. */
.footer-sign { color: var(--testo-2); }
.site-footer a { color: var(--testo-3); font-size: var(--t-1); text-decoration: none; }
.site-footer a:hover { color: var(--testo); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: center; }

/* ---------- BRICIOLE E INDICI ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-5) 0 0;
  color: var(--testo-3);
  font-size: var(--t-1);
  font-weight: var(--peso-medio);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--testo); }
.crumbs span { color: var(--filo-forte); }
.crumbs b { color: var(--testo); font-weight: var(--peso-medio); }

.index-hero { max-width: 44rem; padding: var(--sp-sezione) 0; }
.index-hero h1 { font-size: var(--t-6); font-weight: var(--peso-forte); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.index-lead { max-width: var(--lettura); margin-top: var(--sp-5); color: var(--testo-2); font-size: var(--t-4); line-height: 1.55; }
.index-section { border-top: 1px solid var(--filo); }
.board-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); }
.board-label { margin-bottom: var(--sp-3); color: var(--testo-3); font-size: var(--t-1); font-weight: var(--peso-medio); letter-spacing: .1em; text-transform: uppercase; }
.mode-switch { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-5); }
.mode-switch a {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--filo-forte);
  font-size: var(--t-2);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: border-color 150ms ease;
}
.mode-switch a:hover { border-bottom-color: var(--primary); }
.section-heading > p:last-child a { color: var(--testo); font-weight: var(--peso-medio); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* L'elenco completo e' un elenco lungo: con le righe piene della home ottanta
   linee diventano sette schermate. Qui l'unita' e' la colonna, non la riga. */
.line-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); column-gap: var(--sp-6); }
.line-index a { grid-template-columns: var(--sp-6) minmax(0, 1fr) auto; gap: var(--sp-3); min-height: var(--sp-7); }
.line-index b { min-width: var(--sp-6); height: var(--sp-5); font-size: var(--t-1); }
.line-index span { overflow: hidden; font-size: var(--t-2); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.line-index i { opacity: 0; transition: opacity 140ms ease; }
.line-index a:hover i { opacity: 1; }

/* Le citta': oggi una, e va detto che e' una. Una griglia con dentro una scheda
   sola sembra un errore, quindi la seconda scheda dichiara l'attesa invece di
   fingere che non ci sia. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-5); }
.tile {
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--sfondo);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-3);
  box-shadow: var(--ombra-1);
  text-decoration: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
a.tile:hover { border-color: var(--filo-forte); box-shadow: var(--ombra-2); }
.tile > p:first-child { color: var(--dato-fresco); font-size: var(--t-1); font-weight: var(--peso-medio); letter-spacing: .1em; text-transform: uppercase; }
.tile strong { font-size: var(--t-5); font-weight: var(--peso-forte); line-height: 1; letter-spacing: -.04em; }
.tile > span { color: var(--testo-2); font-size: var(--t-2); line-height: 1.6; }
.tile ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
.tile li { padding: var(--sp-1) var(--sp-3); background: var(--sfondo-3); border-radius: var(--raggio-1); font-size: var(--t-1); font-weight: var(--peso-medio); }
.tile li.soon { color: var(--testo-3); background: transparent; border: 1px dashed var(--filo-forte); }
.tile em { color: var(--testo); font-size: var(--t-2); font-style: normal; font-weight: var(--peso-medio); }
.tile.waiting { background: transparent; border-style: dashed; box-shadow: none; }
.tile.waiting strong { color: var(--testo-3); }
.tile.waiting > p:first-child { color: var(--testo-3); }

/* ---------- SCHERMI STRETTI ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero-copy, .hero-visual { max-width: 42rem; }
  .story-section { grid-template-columns: 104px minmax(0, 1fr); gap: var(--sp-5); }
  .coverage-layout, .board-layout, .faq-layout { grid-template-columns: 1fr; gap: var(--sp-7); }
  .coverage-ticket { max-width: 34rem; }
  .moment-list article { grid-template-columns: 150px 1fr; }
  .moment-list article p { grid-column: 2; }
  .process-route { grid-template-columns: 1fr; gap: var(--sp-5); }
  .process-route li { padding-right: 0; }
  .trust-section { grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-sezione) var(--sp-6); }
  .final-cta { align-items: stretch; flex-direction: column; }
  .final-cta .primary-action { align-self: flex-start; }
}

@media (max-width: 660px) {
  .site-header, main, .site-footer { width: min(100% - var(--sp-5), var(--colonna)); }
  .site-header { grid-template-columns: 1fr auto; min-height: var(--sp-7); padding-top: max(var(--sp-1), env(safe-area-inset-top)); }
  .site-brand > span { width: var(--sp-5); height: var(--sp-5); }
  .site-brand img { height: var(--sp-6); }
  .header-status { display: none; }
  .hero { gap: var(--sp-6); }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .text-action { align-self: flex-start; }
  /* Quattro voci in due colonne, senza pallini: in riga i separatori
     dividevano, incolonnati facevano solo confusione. */
  .service-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3) var(--sp-4);
    min-height: 0;
    padding-block: var(--sp-5);
    text-align: left;
  }
  .service-strip i { display: none; }
  .story-section { grid-template-columns: 1fr; gap: var(--sp-4); }
  .section-heading { margin-bottom: var(--sp-6); }
  .moment-list article { grid-template-columns: 1fr; gap: var(--sp-3); padding: var(--sp-5) 0; }
  .moment-list article p { grid-column: 1; }
  .board-layout, .faq-layout { gap: var(--sp-5); }
  .line-index { grid-template-columns: 1fr; column-gap: 0; }
  .line-index i { opacity: 1; }
  .trust-section { padding: var(--sp-7) var(--sp-5); }
  .final-cta { padding: var(--sp-6) var(--sp-5); }
  .final-cta .primary-action { align-self: stretch; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}