/* NomaDev — foglio di stile del sito commerciale.
 *
 * Due segnali di colore presi dal prodotto: verde quando la macchina ha
 * fatto qualcosa, ambra quando tocca all'utente decidere. È il ciclo di
 * approvazione dell'app, usato come struttura visiva del sito.
 *
 * Tre caratteri, tutti serviti da qui (niente richieste a Google, il sito
 * promette di non tracciare): Bricolage Grotesque per i titoli, Geist per il
 * testo, Geist Mono per codice, etichette e numeri. Il monospazio non è
 * decorazione: è la lingua del soggetto.
 *
 * Il ritmo viene dalle fasce: sezioni sul fondo, sezioni su una fascia appena
 * più scura, e la sicurezza a colori invertiti, così la pagina non è un
 * unico muro dello stesso nero. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  --paper: #f2f4f2;
  --fascia: #e8ede9;
  --superficie: #ffffff;
  --linea: #d8ded9;
  --linea-forte: #c3ccc6;
  --testo: #0e1512;
  --testo-quieto: #566159;
  --verde: #15803d;
  --verde-tenue: rgba(21, 128, 61, 0.1);
  --ambra: #96631f;
  --ambra-tenue: rgba(150, 99, 31, 0.1);
  --su-verde: #ffffff;
  --tenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpolyline points='10,74 50,12 90,74' fill='none' stroke='%2315803d' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M50 44L61 76H39Z' fill='%2396631f'/%3E%3C/svg%3E");
  --bagliore: rgba(150, 99, 31, 0.1);
  --stelle: 0.45;
  --ombra: 0 1px 2px rgba(14, 21, 18, 0.06), 0 8px 24px rgba(14, 21, 18, 0.06);
  --ombra-forte: 0 30px 80px rgba(14, 21, 18, 0.22);

  --display: "Bricolage Grotesque", "Segoe UI Variable Display", "Segoe UI", -apple-system, sans-serif;
  --sans: "Geist", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
    Consolas, "Liberation Mono", monospace;

  --misura: 36rem;
  --raggio: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0a0f0d;
    --fascia: #0d1411;
    --superficie: #101815;
    --linea: #1e2a25;
    --linea-forte: #2a3a33;
    --testo: #e6efe9;
    --testo-quieto: #9bafa5;
    --verde: #22c55e;
    --verde-tenue: rgba(34, 197, 94, 0.14);
    --ambra: #e8b45a;
    --ambra-tenue: rgba(232, 180, 90, 0.12);
    --su-verde: #06110c;
    --tenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpolyline points='10,74 50,12 90,74' fill='none' stroke='%2322c55e' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M50 44L61 76H39Z' fill='%23e8b45a'/%3E%3C/svg%3E");
    --bagliore: rgba(232, 180, 90, 0.16);
    --stelle: 1;
    --ombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.35);
    --ombra-forte: 0 40px 100px rgba(0, 0, 0, 0.6);
  }
}

/* La fascia a colori invertiti: chiara sul sito scuro, scura sul sito
 * chiaro. Ridefinisce solo i colori, così dentro valgono le stesse regole. */
.inversa {
  color-scheme: dark;
  --paper: #0a0f0d;
  --fascia: #0d1411;
  --superficie: #101815;
  --linea: #1e2a25;
  --linea-forte: #2a3a33;
  --testo: #e6efe9;
  --testo-quieto: #9bafa5;
  --verde: #22c55e;
  --verde-tenue: rgba(34, 197, 94, 0.14);
  --ambra: #e8b45a;
  --ambra-tenue: rgba(232, 180, 90, 0.12);
  --su-verde: #06110c;
  --tenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpolyline points='10,74 50,12 90,74' fill='none' stroke='%2322c55e' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M50 44L61 76H39Z' fill='%23e8b45a'/%3E%3C/svg%3E");
  --bagliore: rgba(232, 180, 90, 0.16);
  --stelle: 1;
}

@media (prefers-color-scheme: dark) {
  .inversa {
    color-scheme: light;
    --paper: #f2f4f2;
    --fascia: #e8ede9;
    --superficie: #ffffff;
    --linea: #d8ded9;
    --linea-forte: #c3ccc6;
    --testo: #0e1512;
    --testo-quieto: #566159;
    --verde: #15803d;
    --verde-tenue: rgba(21, 128, 61, 0.1);
    --ambra: #96631f;
    --ambra-tenue: rgba(150, 99, 31, 0.1);
    --su-verde: #ffffff;
    --tenda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 84'%3E%3Cpolyline points='10,74 50,12 90,74' fill='none' stroke='%2315803d' stroke-width='12' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M50 44L61 76H39Z' fill='%2396631f'/%3E%3C/svg%3E");
    --bagliore: rgba(150, 99, 31, 0.1);
    --stelle: 0.45;
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: inherit; }

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- impaginazione ---------- */

.guscio {
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
}

.sezione {
  padding-block: clamp(4rem, 10vw, 7rem);
  background: var(--paper);
  color: var(--testo);
}

.sezione.fascia { background: var(--fascia); border-block: 1px solid var(--linea); }

.occhiello {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verde);
  margin: 0 0 1rem;
}

/* Le tappe: l'etichetta di ogni sezione della home è una tenda del logo,
 * e un sentiero a puntini arriva dall'alto. Scorrere la pagina è un
 * cammino da un campo all'altro. */
.occhiello.tappa {
  position: relative;
  padding-left: 1.75rem;
}

.occhiello.tappa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.2rem;
  height: 1rem;
  transform: translateY(-58%);
  background: var(--tenda) center / contain no-repeat;
}

.occhiello.tappa::after {
  content: "";
  position: absolute;
  left: calc(0.6rem - 1.5px);
  bottom: calc(100% + 0.2rem);
  width: 3px;
  height: 2.75rem;
  background: radial-gradient(circle, var(--verde) 1.1px, transparent 1.6px) center bottom / 3px 9px repeat-y;
  opacity: 0.55;
  pointer-events: none;
}


h1, h2, h3 { text-wrap: balance; margin: 0; }

h1, h2 { font-family: var(--display); }

h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 700;
  max-width: 22ch;
}

h2.grande { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }

h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0; max-width: var(--misura); }

.quieto { color: var(--testo-quieto); }

.intro { margin-top: 1.1rem; font-size: 1.08rem; }

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

.testata {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border-bottom: 1px solid var(--linea);
}

.testata > .guscio {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4rem;
}

.marchio {
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.marchio .logo {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 1px var(--linea);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  font-size: 0.92rem;
}

.nav > a:not(.bottone) { color: var(--testo-quieto); text-decoration: none; }
.nav > a:not(.bottone):hover { color: var(--testo); }

/* Sul telefono i link vanno in un menu: un <details>, che si apre anche
 * senza JavaScript, come la scelta della lingua. */
.menu-mobile { display: none; position: relative; }

.menu-mobile summary {
  list-style: none;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 10px;
  color: var(--testo);
}

.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary svg { width: 1.3rem; height: 1.3rem; }
.menu-mobile[open] summary { background: var(--superficie); }

.menu-mobile ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 20;
  min-width: 17rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.menu-mobile a { display: block; padding: 0.75rem 0.9rem; border-radius: 8px; color: var(--testo); text-decoration: none; font-size: 1rem; }
.menu-mobile a:hover { background: var(--verde-tenue); }

.menu-mobile .lingue-menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem;
  margin-top: 0.3rem;
  padding: 0.5rem 0 0.2rem;
  border-top: 1px solid var(--linea);
}

.menu-mobile .lingue-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  color: var(--testo-quieto);
}

.menu-mobile .lingue-menu a[aria-current="true"] { color: var(--verde); background: var(--verde-tenue); }

/* Niente va mai a capo nella barra: nome e pulsante su una riga sola. */
.marchio, .testata .bottone, .nav > a { white-space: nowrap; }

@media (max-width: 60rem) {
  .testata > .guscio { gap: 0.75rem; }
  .nav { gap: 0.5rem; }
  .nav .solo-largo { display: none; }
  .menu-mobile { display: block; }
}

/* Sotto i 340px il nome non ci sta accanto a pulsante e menu: resta il logo. */
@media (max-width: 21rem) {
  .marchio { font-size: 0; gap: 0; }
}

/* ---------- bottoni ---------- */

.azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.85rem 1.35rem;
  border-radius: var(--raggio);
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.bottone:active { transform: translateY(1px); }
.bottone.pieno { background: var(--verde); color: var(--su-verde); }
.bottone.pieno:hover { background: color-mix(in srgb, var(--verde) 88%, var(--testo)); }
.bottone.vuoto { border-color: var(--linea-forte); color: var(--testo); font-weight: 500; }
.bottone.vuoto:hover { background: var(--superficie); }
.bottone.piccolo { font-size: 0.88rem; padding: 0.55rem 0.95rem; border-radius: 10px; }

.nota-cta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--testo-quieto);
  margin-top: 1.1rem;
}

/* ---------- prova gratuita ----------
 *
 * È la promessa che toglie il rischio: sta nell'eroe, sopra i prezzi e
 * accanto a Google Play, sempre nella stessa forma. */

.prova {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1.4rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1px solid color-mix(in srgb, var(--verde) 45%, transparent);
  border-radius: 14px;
  background: var(--verde-tenue);
  font-size: 0.95rem;
  color: var(--testo);
  max-width: 100%;
}

.prova strong {
  background: var(--verde);
  color: var(--su-verde);
  border-radius: 10px;
  padding: 0.2rem 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.prova.grande {
  display: flex;
  margin: 2rem 0 0;
  padding: 1rem 1.4rem 1rem 1rem;
  border-radius: 18px;
  font-size: 1.05rem;
}

.prova.grande strong { font-family: var(--display); font-size: 1.5rem; padding: 0.35rem 1rem; border-radius: 12px; }

.app-play .prova { margin: 1.1rem 0 0; padding-right: 0.4rem; }

/* Nell'eroe la prova è un biglietto ambra (ambra: tocca a te), con la linea
 * tratteggiata da strappare.
 * Così il verde resta solo al bottone principale. */
.biglietto {
  --taglio: 5.6rem;
  display: flex;
  align-items: stretch;
  max-width: 34rem;
  margin: 0 0 1.6rem;
  border: 1px solid color-mix(in srgb, var(--ambra) 40%, transparent);
  border-radius: 14px;
  background: var(--ambra-tenue);
}

.biglietto .giorni {
  flex: none;
  width: var(--taglio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.5rem;
  color: var(--ambra);
  text-align: center;
}

.biglietto .giorni b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 0.9;
}

.biglietto .giorni span {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-top: 0.3rem;
}

.biglietto .taglio {
  flex: none;
  width: 0;
  margin-block: 0.8rem;
  border-left: 2px dashed color-mix(in srgb, var(--ambra) 45%, transparent);
}

.biglietto .patto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.8rem 1.1rem;
  font-size: 0.92rem;
  color: var(--testo-quieto);
}

.biglietto .patto strong {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--testo);
}

/* Il secondo invito è un link leggero: un solo bottone pieno per schermata. */
.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 0.25rem;
  color: var(--testo);
  font-weight: 500;
  text-decoration: none;
}

.link-freccia span { color: var(--verde); transition: transform 0.2s ease; }
.link-freccia:hover span { transform: translateY(2px); }

/* ---------- roadmap: le prossime tappe ----------
 *
 * Lo stesso sentiero delle sezioni, in avanti. La tappa di oggi ha la tenda
 * accesa; quelle future sono tende ancora spente, e la prossima ha
 * l'etichetta ambra. Sul largo il cammino va da sinistra a destra, sul
 * telefono scende. */

.cammino {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 2.25rem;
}

.cammino li {
  position: relative;
  padding-left: 2.6rem;
}

.cammino li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.45rem;
  background: var(--tenda) center / contain no-repeat;
}

.cammino li:not(.fatto)::before { filter: grayscale(1); opacity: 0.45; }

.cammino li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(0.85rem - 1.5px);
  top: 2.1rem;
  bottom: -1.85rem;
  width: 3px;
  background: radial-gradient(circle, var(--verde) 1.1px, transparent 1.6px) center top / 3px 9px repeat-y;
  opacity: 0.5;
}

.cammino .quando {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-quieto);
  line-height: 1.45rem;
}

.cammino .fatto .quando { color: var(--verde); }
.cammino .fatto + li .quando { color: var(--ambra); }

.cammino h3 { margin: 0.35rem 0 0.4rem; font-size: 1.12rem; }
.cammino p { color: var(--testo-quieto); font-size: 0.95rem; }

@media (min-width: 56rem) {
  .cammino { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .cammino li { padding-left: 0; padding-top: 2.4rem; }
  .cammino li::before { top: 0; }
  .cammino li:not(:last-child)::after {
    left: 2.4rem;
    right: -1.4rem;
    top: 0.6rem;
    bottom: auto;
    width: auto;
    height: 3px;
    background: radial-gradient(circle, var(--verde) 1.1px, transparent 1.6px) left center / 9px 3px repeat-x;
  }
  .cammino .quando { margin-top: 0.2rem; }
}

.nota-cammino { margin-top: clamp(2.5rem, 5vw, 3rem); max-width: 46rem; }

@media (max-width: 40rem) {
  .eroe .azioni { flex-direction: column; align-items: stretch; }
  .eroe .azioni .bottone { justify-content: center; }
  .eroe .azioni .link-freccia { justify-content: center; }
}

/* ---------- eroe: il banco di lavoro ----------
 *
 * Il computer dietro, il telefono davanti, e il filo fra i due: è
 * l'architettura del prodotto detta con un'immagine. */

.eroe {
  display: grid;
  gap: clamp(3rem, 6vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 64rem) {
  .eroe { grid-template-columns: minmax(0, 1fr) 38rem; }
}

.eroe h1 { margin-bottom: 1.4rem; }

.eroe .sommario {
  font-size: 1.18rem;
  color: var(--testo-quieto);
  margin-bottom: 2rem;
}

/* Il campo di notte dietro alla prima schermata: stelle (poche ambra che
 * brillano piano), due creste di montagne appena accennate e la luce calda
 * della porta della tenda dietro al telefono. Sul tema chiaro tutto resta
 * più tenue: è lo stesso paesaggio di giorno. */
.campo {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse 60% 45% at 50% 82%, var(--bagliore), transparent 72%);
}

@media (min-width: 64rem) {
  .campo { background: radial-gradient(ellipse 34% 55% at 74% 55%, var(--bagliore), transparent 72%); }
}

.cielo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cielo .stelle { fill: var(--verde); opacity: var(--stelle); }
.cielo .cadenti line { stroke: var(--testo); stroke-width: 1.6; stroke-linecap: round; opacity: 0; }

/* Il cielo gira piano attorno a un polo sotto l'orizzonte, avanti e
 * indietro: come la notte vista in time-lapse, ma lentissimo. */
@media (prefers-reduced-motion: no-preference) {
  .cielo .stelle {
    transform-box: view-box;
    transform-origin: 800px 1500px;
    animation: ruota 90s ease-in-out infinite alternate;
  }
}

@keyframes ruota {
  from { transform: rotate(-1.6deg); }
  to { transform: rotate(1.6deg); }
}
.cielo .sa { fill: var(--ambra); animation: brilla 4.5s ease-in-out infinite; }
.cielo .cresta { fill: var(--verde); }
.cielo .lontana { opacity: 0.03; }
.cielo .vicina { opacity: 0.045; }

/* Sul telefono il cielo finisce dietro al testo: niente stelle ambra, che
 * accanto a un bottone sembrerebbero un avviso, e le altre più tenui. */
@media (max-width: 63.99rem) {
  .cielo .sa { display: none; }
  .cielo .stelle { opacity: calc(var(--stelle) * 0.6); }
}

@keyframes brilla {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.95; }
}

@media (prefers-reduced-motion: reduce) {
  .cielo .sa { animation: none; opacity: 0.7; }
}


/* ---------- sottomenu delle sezioni (solo telefono) ----------
 * Sotto la testata, una fila di etichette mono come gli occhielli, che
 * scorre di lato. La voce della sezione in cui sei prende la tenda e la
 * riga verde. Con JavaScript si nasconde mentre scorri e torna quando ti
 * fermi; senza, resta ferma ed è comunque una fila di link. */
.sottomenu { display: none; }

@media (max-width: 63.99rem) {
  html { scroll-padding-top: 7rem; }

  .sottomenu {
    --sotto-fondo: color-mix(in srgb, var(--paper) 92%, transparent);
    display: block;
    position: sticky;
    top: calc(4rem + 1px);
    z-index: 15;
    background: var(--sotto-fondo);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
    transition: transform 0.28s ease, opacity 0.28s ease;
  }

  .sottomenu.via { transform: translateY(-110%); opacity: 0; pointer-events: none; }

  /* Le sfumature ai bordi dicono che la fila continua. */
  .sottomenu::before,
  .sottomenu::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.25rem;
    z-index: 1;
    pointer-events: none;
  }
  .sottomenu::before { left: 0; background: linear-gradient(90deg, var(--sotto-fondo), transparent); }
  .sottomenu::after { right: 0; background: linear-gradient(-90deg, var(--sotto-fondo), transparent); }

  .sottomenu .pista {
    display: flex;
    gap: 1.3rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
    padding-inline: 1.25rem;
  }
  .sottomenu .pista::-webkit-scrollbar { display: none; }

  .sottomenu a {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 0 0.75rem;
    border-bottom: 2px solid transparent;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    color: var(--testo-quieto);
  }

  .sottomenu a::before {
    content: "";
    width: 0;
    height: 0.7rem;
    opacity: 0;
    background: var(--tenda) center / contain no-repeat;
    transition: width 0.2s ease, opacity 0.2s ease;
  }

  .sottomenu a.qui { color: var(--verde); border-bottom-color: var(--verde); }
  .sottomenu a.qui::before { width: 0.85rem; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sottomenu, .sottomenu a::before { transition: none; }
}

/* ---------- sfondi delle sezioni ----------
 * Una sezione disegnata e una piatta, a turno: le curve di livello della
 * mappa, il puntinato del terminale, il cielo con la tenda nella sezione
 * invertita, l'alba sulle creste dell'eroe e il sentiero delle tappe.
 * Tutto tenue e dietro al contenuto, con i due colori del sito. */
.con-sfondo { position: relative; isolation: isolate; overflow: hidden; }

.sfondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.topo { mask-image: linear-gradient(90deg, transparent 0 22%, #000 60%); }
.topo path { fill: none; stroke: var(--verde); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.13; }
.topo path.maestra { stroke-width: 1.6; opacity: 0.2; }
.topo .quota { fill: var(--ambra); }

.puntini {
  background: radial-gradient(circle, var(--verde) 1.3px, transparent 1.8px) 0 0 / 28px 28px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse 45% 55% at 78% 35%, #000, transparent 75%);
}

.costellazione .stelle { fill: var(--verde); opacity: var(--stelle); }
.costellazione .figura line { stroke: var(--verde); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; opacity: 0.4; }
.costellazione .nodo { fill: var(--verde); opacity: 0.8; }
.costellazione .sa { fill: var(--ambra); animation: brilla 4.5s ease-in-out infinite; }

.alba { background: radial-gradient(ellipse 60% 60% at 50% 100%, color-mix(in srgb, var(--ambra) 16%, transparent), transparent); }
.alba .cresta { fill: var(--verde); }
.alba .lontana { opacity: 0.035; }
.alba .vicina { opacity: 0.055; }

.sentiero .traccia { fill: none; stroke: var(--verde); stroke-width: 2; stroke-dasharray: 1 9; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.55; }
.sentiero .fatta { fill: var(--verde); opacity: 0.6; }
.sentiero .ora { fill: var(--ambra); }
.sentiero .alone { fill: none; stroke: var(--ambra); stroke-width: 1.5; opacity: 0.4; }
.sentiero .poi { fill: var(--paper); stroke: var(--verde); stroke-width: 1.5; opacity: 0.55; }
.sentiero .tendina { fill: none; stroke: var(--verde); stroke-width: 4.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.45; }

@media (prefers-reduced-motion: no-preference) {
  .sentiero .alone { transform-box: fill-box; transform-origin: center; animation: polso 2.6s ease-out infinite; }
}

/* Sul telefono la sezione è stretta e altissima: steso su tutta l'altezza
 * il disegno verrebbe ingrandito quattro volte e se ne vedrebbe un pezzo
 * irriconoscibile. Lì occupa una fascia: in alto, o in fondo per alba e
 * sentiero, che poggiano sull'orizzonte. */
@media (max-width: 63.99rem) {
  .sfondo { bottom: auto; height: min(30rem, 100%); }
  .alba, .sentiero { top: auto; bottom: 0; }
  /* qui la tenda passa dietro al titolo: più leggera */
  .costellazione .figura line { opacity: 0.22; }
  .puntini { height: 100%; mask-image: radial-gradient(ellipse 75% 22rem at 85% 10rem, #000, transparent 75%); }
}

@keyframes polso {
  from { transform: scale(0.6); opacity: 0.6; }
  to { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .costellazione .sa { animation: none; opacity: 0.7; }
}

.banco { position: relative; display: grid; justify-items: center; }

.terminale, .caricamento {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 14px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.9;
}

.terminale { display: none; }

.terminale-capo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--linea);
  color: var(--testo-quieto);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.lucina { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--verde); flex-shrink: 0; }

.terminale-righe { padding: 1rem 1.2rem; color: var(--testo-quieto); }
.ok { color: var(--verde); }
.tolto { color: #f07178; }
.attesa { color: var(--ambra); }
.rientro { padding-left: 1.1rem; }

.collegamento { display: none; }

@media (min-width: 64rem) {
  .banco { display: block; min-height: 48rem; }

  .terminale {
    display: block;
    position: absolute;
    top: 3rem;
    left: 0;
    width: 26rem;
    padding-bottom: 6rem;
    box-shadow: var(--ombra-forte);
  }

  .telefono-guscio { position: relative; z-index: 1; width: max-content; margin-left: auto; }

  .collegamento {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: absolute;
    left: 1rem;
    top: 27rem;
    flex-direction: row-reverse;
    z-index: 2;
    max-width: 14rem;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--testo-quieto);
  }

  .collegamento .filo { width: 3rem; flex-shrink: 0; border-top: 2px dashed var(--verde); }
}

/* ---------- telefono ----------
 *
 * Qui non si inventa niente: sono i valori veri dell'app, presi da
 * tailwind.config.ts e da assets/css/main.css. Fondo #050507, card di vetro
 * (bianco al 5,5% con bordo bianco al 10%), accento #22c55e, testo senza
 * grazie — il monospazio nell'app è riservato al codice. Il diff usa il tema
 * Material Oceanic del visualizzatore vero.
 *
 * Il telefono resta scuro anche quando il sito è in tema chiaro: l'app è
 * scura e basta, e mostrarla bianca sarebbe una bugia.
 *
 * Ogni misura è un multiplo di --u, così lo stesso telefono serve grande
 * nell'eroe e piccolo nel giro completo: cambia --u, il resto segue. */

.telefono {
  --u: min(18px, (100vw - 3.5rem) / 20.5);
  --app-fondo: #050507;
  --app-testo: #f4f4f5;
  --app-quieto: #a1a1aa;
  --app-quieto-2: #71717a;
  --app-vetro: rgba(255, 255, 255, 0.055);
  --app-vetro-tenue: rgba(255, 255, 255, 0.03);
  --app-bordo: rgba(255, 255, 255, 0.1);
  --app-bordo-tenue: rgba(255, 255, 255, 0.06);
  --app-accento: #22c55e;
  --app-accento-chiaro: #4ade80;
  --app-accento-scuro: #16a34a;
  --app-ambra: #fbbf24;
  --app-rosso: #f87171;

  position: relative;
  width: calc(20 * var(--u));
  aspect-ratio: 9 / 17.5;
  background: var(--app-fondo);
  color: var(--app-testo);
  font-family: var(--sans);
  font-size: calc(0.8 * var(--u));
  line-height: 1.45;
  border: calc(0.6 * var(--u)) solid #050807;
  border-radius: calc(2.6 * var(--u));
  box-shadow: 0 0 0 1px #2a3a33, var(--ombra-forte);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* Le due macchie sfocate che l'app ha dietro a ogni schermata. */
.telefono::before,
.telefono::after {
  content: "";
  position: absolute;
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
  filter: blur(calc(2.5 * var(--u)));
  pointer-events: none;
}
.telefono::before { top: calc(-3 * var(--u)); right: calc(-2.5 * var(--u)); background: rgba(34, 197, 94, 0.2); }
.telefono::after { bottom: calc(-3 * var(--u)); left: calc(-3 * var(--u)); background: rgba(34, 197, 94, 0.1); }

/* L'intestazione dell'app: freccia indietro, titolo grosso, azione a destra. */
.telefono .capo {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--u));
  padding: calc(1.3 * var(--u)) calc(1 * var(--u)) calc(0.6 * var(--u));
}

.capo .indietro { color: var(--app-quieto); font-size: calc(1 * var(--u)); line-height: 1; }
.capo .titolo {
  font-size: calc(1.15 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.capo .menu { color: var(--app-quieto); letter-spacing: 0.08em; font-size: calc(0.75 * var(--u)); }

/* Pillole: rami, stati, esiti. Nell'app sono tutte rounded-full. */
.pillola {
  display: inline-flex;
  align-items: center;
  gap: calc(0.25 * var(--u));
  font-size: calc(0.62 * var(--u));
  padding: calc(0.15 * var(--u)) calc(0.55 * var(--u));
  border-radius: 999px;
  border: 1px solid var(--app-bordo-tenue);
  background: var(--app-vetro-tenue);
  color: var(--app-quieto);
  white-space: nowrap;
}

.pillola.verde {
  color: var(--app-accento-chiaro);
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.scene { position: relative; z-index: 1; flex: 1; min-height: 0; }

.scena {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: calc(0.8 * var(--u)) calc(1 * var(--u)) calc(1.1 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(0.55 * var(--u));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  overflow: hidden;
}

.scena.attiva { opacity: 1; transform: none; }
.scena .in-fondo { margin-top: auto; }

/* Messaggio dell'utente: card verde con iniziale, nome e ora. */
.msg-tu {
  align-self: flex-end;
  max-width: 88%;
  border-radius: calc(1 * var(--u));
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.24);
  padding: calc(0.6 * var(--u)) calc(0.7 * var(--u));
}

.msg-capo { display: flex; align-items: center; gap: calc(0.35 * var(--u)); margin-bottom: calc(0.35 * var(--u)); }

.msg-capo .sigla {
  width: calc(1.05 * var(--u));
  height: calc(1.05 * var(--u));
  border-radius: calc(0.3 * var(--u));
  background: rgba(34, 197, 94, 0.2);
  color: var(--app-accento-chiaro);
  font-size: calc(0.55 * var(--u));
  font-weight: 800;
  display: grid;
  place-items: center;
}

.msg-capo .chi { font-size: calc(0.62 * var(--u)); font-weight: 700; color: var(--app-accento-chiaro); }
.msg-capo .ora { margin-left: auto; font-size: calc(0.58 * var(--u)); color: var(--app-quieto-2); font-variant-numeric: tabular-nums; }

/* Risposta di Claude: testo nudo, senza contenitore, come nell'app. */
.msg-claude { color: var(--app-testo); }

/* Chiamata a uno strumento: pillola grigia. */
.strumento {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: calc(0.35 * var(--u));
  max-width: 100%;
  font-size: calc(0.66 * var(--u));
  color: var(--app-quieto);
  background: var(--app-vetro-tenue);
  border: 1px solid var(--app-bordo-tenue);
  border-radius: 999px;
  padding: calc(0.22 * var(--u)) calc(0.6 * var(--u));
}

.strumento .testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strumento.finito { color: var(--app-accento-chiaro); background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); }

/* Fine turno: pillola verde centrata. */
.fine-turno {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: calc(0.35 * var(--u));
  font-size: calc(0.68 * var(--u));
  color: var(--app-accento-chiaro);
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 999px;
  padding: calc(0.25 * var(--u)) calc(0.8 * var(--u));
}

/* Card di vetro: la superficie base di tutta l'app. */
.card {
  border-radius: calc(1 * var(--u));
  background: var(--app-vetro);
  border: 1px solid var(--app-bordo);
  padding: calc(0.75 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(0.45 * var(--u));
}

.card p { margin: 0; }
.card.permesso { border-color: rgba(245, 158, 11, 0.45); background: rgba(245, 158, 11, 0.06); }
.card .capoletto { font-size: calc(0.58 * var(--u)); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.card.permesso .capoletto { color: var(--app-ambra); }
.card .nome-strumento { font-size: calc(0.78 * var(--u)); font-weight: 600; }

/* Blocco di comando: fondo nero, monospazio. Nell'app è un <pre>. */
.comando-box {
  background: rgba(0, 0, 0, 0.35);
  border-radius: calc(0.6 * var(--u));
  padding: calc(0.5 * var(--u)) calc(0.6 * var(--u));
  font-family: var(--mono);
  font-size: calc(0.72 * var(--u));
  color: var(--app-testo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bottoni: pieno col gradiente verde e alone, oppure bordati. */
.tasti { display: flex; gap: calc(0.45 * var(--u)); }

.tasto {
  flex: 1;
  text-align: center;
  padding: calc(0.45 * var(--u)) calc(0.4 * var(--u));
  border-radius: calc(0.65 * var(--u));
  font-size: calc(0.7 * var(--u));
  font-weight: 600;
  border: 1px solid var(--app-bordo);
  color: var(--app-testo);
}

.tasto.pieno {
  background: linear-gradient(135deg, var(--app-accento), var(--app-accento-scuro));
  color: #000;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.tasto.pericolo { border-color: rgba(248, 113, 113, 0.4); color: var(--app-rosso); }

/* Elenco file: card di vetro con righe divise, come la pagina Modifiche. */
.elenco {
  border-radius: calc(1 * var(--u));
  background: var(--app-vetro);
  border: 1px solid var(--app-bordo);
  overflow: hidden;
}

.elenco .voce {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--u));
  padding: calc(0.45 * var(--u)) calc(0.6 * var(--u));
  font-size: calc(0.7 * var(--u));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.elenco .voce:first-child { border-top: 0; }
.elenco .voce .percorso { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elenco .voce .coda { margin-left: auto; font-size: calc(0.6 * var(--u)); color: var(--app-quieto-2); font-variant-numeric: tabular-nums; }

.lettera {
  width: calc(1 * var(--u));
  height: calc(1 * var(--u));
  border-radius: calc(0.25 * var(--u));
  display: grid;
  place-items: center;
  font-size: calc(0.55 * var(--u));
  font-weight: 700;
  flex-shrink: 0;
}
.lettera.m { background: rgba(251, 191, 36, 0.15); color: var(--app-ambra); }
.lettera.a { background: rgba(34, 197, 94, 0.15); color: var(--app-accento-chiaro); }
.lettera.no { background: rgba(255, 255, 255, 0.06); color: var(--app-quieto-2); }

/* Avanzamento dell'upload: barra bianca al 10% con riempimento verde. */
.avanzamento { display: grid; gap: calc(0.3 * var(--u)); }
.avanzamento .righe { display: flex; justify-content: space-between; font-size: calc(0.6 * var(--u)); color: var(--app-quieto); font-variant-numeric: tabular-nums; }
.barra-avanzamento { height: calc(0.45 * var(--u)); background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; }
.barra-avanzamento i { display: block; height: 100%; background: linear-gradient(90deg, var(--app-accento-scuro), var(--app-accento)); border-radius: 999px; }

/* Il visualizzatore di differenze, col tema Material Oceanic dell'app. */
.oceanic {
  border-radius: calc(0.7 * var(--u));
  overflow: hidden;
  background: #263238;
  font-family: var(--mono);
  font-size: calc(0.62 * var(--u));
  line-height: 1.65;
}

.oceanic .testa {
  display: flex;
  align-items: center;
  gap: calc(0.4 * var(--u));
  background: #2e3c43;
  border-bottom: 1px solid #1c262b;
  padding: calc(0.35 * var(--u)) calc(0.55 * var(--u));
}

.oceanic .testa .freccia { color: #89ddff; }
.oceanic .testa .cartella { color: #546e7a; }
.oceanic .testa .nome { color: #eeffff; font-weight: 600; }

.oceanic .riga-diff { display: flex; white-space: pre; }
.oceanic .marca { width: calc(1.1 * var(--u)); flex-shrink: 0; text-align: center; color: #546e7a; }
.oceanic .codice { color: #b0bec5; padding-right: calc(0.5 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.oceanic .agg { background: rgba(195, 232, 141, 0.1); }
.oceanic .agg .marca { color: #c3e88d; }
.oceanic .tolta { background: rgba(240, 113, 113, 0.1); }
.oceanic .tolta .marca { color: #f07178; }
.oceanic .meta .codice { color: #546e7a; }

/* Campo di scrittura della chat. */
.compositore {
  display: flex;
  align-items: center;
  gap: calc(0.4 * var(--u));
  border-radius: calc(1 * var(--u));
  background: var(--app-vetro);
  border: 1px solid var(--app-bordo);
  padding: calc(0.45 * var(--u)) calc(0.45 * var(--u)) calc(0.45 * var(--u)) calc(0.75 * var(--u));
  font-size: calc(0.7 * var(--u));
  color: var(--app-quieto-2);
}

.compositore .invia {
  margin-left: auto;
  width: calc(1.6 * var(--u));
  height: calc(1.6 * var(--u));
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--app-accento), var(--app-accento-scuro));
  color: #000;
  font-size: calc(0.7 * var(--u));
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

.etichetta {
  margin: 0;
  font-size: calc(0.58 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-quieto-2);
}

/* comandi della dimostrazione */

.comandi {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--testo-quieto);
  justify-content: center;
}

.passi { display: flex; gap: 0.3rem; }

.passi button {
  width: 1.6rem;
  height: 0.3rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--linea-forte);
  cursor: pointer;
}

.passi button[aria-current="true"] { background: var(--verde); }

.comandi .pausa {
  background: none;
  border: 1px solid var(--linea-forte);
  color: inherit;
  font: inherit;
  padding: 0.15rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- il giro completo: quattro schermate ferme ---------- */

.testa-sezione {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: flex-end;
  justify-content: space-between;
}

.legenda {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.92rem;
  color: var(--testo-quieto);
}

.segno { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: inline-block; }
.segno.fatto { background: var(--verde); }
.segno.tocca { background: var(--ambra); margin-left: 0.9rem; }

/* Sul telefono le quattro schermate scorrono di lato: una sotto l'altra
 * sarebbero quattro schermate intere da scorrere prima del resto. */
.giro {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0 0 0.5rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 15.5rem;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

@media (min-width: 64rem) {
  .giro { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 1.75rem; }
}

.tappa { scroll-snap-align: start; container-type: inline-size; display: flex; flex-direction: column; gap: 0.4rem; }
.tappa > p { font-size: 0.95rem; color: var(--testo-quieto); }

.telefono.mini {
  --u: calc(100cqw / 17);
  width: 100%;
  aspect-ratio: 9 / 15;
  box-shadow: 0 0 0 1px #2a3a33, var(--ombra);
  margin-bottom: 0.9rem;
}

.telefono.mini .scena { position: relative; flex: 1; min-height: 0; }

.nome-tappa { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; }
.nome-tappa.fatto { color: var(--verde); }
.nome-tappa.tocca { color: var(--ambra); }

/* ---------- elenchi di funzioni: niente scatole, solo una riga sopra ---------- */

.elenco-funzioni {
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

@media (min-width: 40rem) { .elenco-funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .elenco-funzioni:not(.due) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.funzione { border-top: 1px solid var(--linea-forte); padding-top: 1.1rem; display: grid; gap: 0.45rem; align-content: start; }
.funzione p { font-size: 0.95rem; color: var(--testo-quieto); }

/* ---------- pubblicare ---------- */

.due-colonne { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 64rem) { .due-colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 4rem; } }

.caricamento { box-shadow: var(--ombra); }
.caricamento-righe { display: grid; }
.caricamento-righe > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.1rem;
  border-top: 1px solid var(--linea);
}
.caricamento-righe > div:first-child { border-top: 0; }
.caricamento-righe .esito { background: var(--verde-tenue); font-weight: 500; }

/* ---------- sicurezza: cosa sta dove ----------
 *
 * Una tabella invece di uno schema: per ogni dato si legge in un colpo
 * d'occhio dove sta, e soprattutto dove non sta. */

@media (min-width: 64rem) {
  .inversa .due-colonne { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); }
}

.direttamente {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: var(--testo-quieto);
}

.direttamente .filo { width: 2.2rem; flex-shrink: 0; border-top: 2px dashed var(--verde); transform: translateY(-0.3em); }

.tabella-scorre.dove {
  margin-top: 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: 0.4rem 1.25rem;
  box-shadow: var(--ombra);
}

.dove-stanno { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.dove-stanno th, .dove-stanno td { padding: 0.85rem 0.5rem; border-top: 1px solid var(--linea); text-align: center; }
.dove-stanno thead th { border-top: 0; }
.dove-stanno th:first-child { text-align: left; padding-left: 0; }
.dove-stanno thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-quieto);
  vertical-align: bottom;
}
.dove-stanno tbody th { font-weight: 500; }
.dove-stanno .si { color: var(--verde); font-size: 1.15rem; font-weight: 700; }
.dove-stanno .no { color: var(--linea-forte); }

.inversa .elenco-funzioni { margin-top: clamp(3rem, 6vw, 4rem); }
.inversa .nota-cta { margin-top: 2.5rem; max-width: 46rem; }

/* ---------- si parte in tre passi ---------- */

.passi-avvio {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem 2.5rem;
  counter-reset: passo;
}

@media (min-width: 52rem) { .passi-avvio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.passo {
  counter-increment: passo;
  border-top: 2px solid var(--verde);
  padding-top: 1.3rem;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.passo:last-child { border-top-color: var(--ambra); }

.passo .numero::before {
  content: counter(passo);
  font-family: var(--display);
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--verde);
}

.passo:last-child .numero::before { color: var(--ambra); }
.passo h3 { font-size: 1.2rem; }
.passo p { font-size: 0.96rem; color: var(--testo-quieto); }

/* ---------- download ---------- */

.download { display: grid; gap: 2rem; margin-top: 2.5rem; align-items: start; }
@media (min-width: 64rem) { .download { grid-template-columns: 20rem minmax(0, 1fr); gap: 3rem; } }

.app-play p { margin-top: 0.4rem; }

/* I comandi d'installazione si copiano interi: una riga sola che scorre,
   mai spezzata a metà, e la pagina non si allarga sul telefono. */
.installa {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--ombra);
  min-width: 0;
}
.installa h3 { margin-bottom: 0.6rem; }
.installa p { font-size: 0.95rem; margin-top: 0.9rem; }
.installa p.quieto { font-size: 0.88rem; }
.installa pre {
  margin: 0.4rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--paper);
  overflow-x: auto;
  max-width: 100%;
}
.installa pre code { background: none; padding: 0; font-size: 0.88rem; white-space: pre; }

code, .comando {
  font-family: var(--mono);
  font-size: 0.86em;
  background: color-mix(in srgb, var(--testo) 7%, transparent);
  padding: 0.12em 0.4em;
  border-radius: 4px;
}

.bottone.play { display: inline-flex; align-items: center; gap: 0.55rem; }
.icona-play { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; }
/* Senza link a Play il pulsante resta visibile ma dichiaratamente spento. */
.bottone.play.inattivo { border-style: dashed; color: var(--testo-quieto); cursor: default; }
.bottone.play.inattivo:hover { background: none; }

/* ---------- installer ---------- */

.linguette { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.linguette[hidden] { display: none; }
.linguette button {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--testo-quieto);
  cursor: pointer;
}
.linguette button[aria-selected="true"] {
  color: var(--testo);
  border-color: color-mix(in srgb, var(--verde) 55%, transparent);
  background: var(--verde-tenue);
}
.pannello { margin-top: 1.4rem; }
.pannello[hidden] { display: none; }
.titolo-pannello { font-size: 0.95rem; margin: 0 0 0.3rem; }
.installer.attivo .titolo-pannello {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.riga-comando { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.4rem; }
.riga-comando pre { flex: 1; min-width: 0; margin: 0; }
.copia {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--raggio);
  background: var(--verde);
  color: var(--su-verde);
  cursor: pointer;
}
.copia[hidden] { display: none; }
.scarica { font-family: var(--mono); font-size: 0.85rem; color: var(--verde); }

/* ---------- prezzi ---------- */

.prezzi { display: grid; gap: 1.1rem; margin-top: 2rem; }
@media (min-width: 44rem) { .prezzi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 44rem) { .prezzi.tre { grid-template-columns: repeat(3, 1fr); } }

.piano {
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--superficie);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
}

.piano .occhiello { color: var(--testo-quieto); }

.piano.spicca {
  border: 2px solid var(--verde);
  padding: calc(1.8rem - 1px);
  background: color-mix(in srgb, var(--verde) 6%, var(--superficie));
}

.piano.spicca .occhiello { color: var(--verde); }

.cifra {
  font-family: var(--display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.cifra small { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--testo-quieto); letter-spacing: 0; }

.risparmio {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--verde);
  background: var(--verde-tenue);
  align-self: flex-start;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
/* Il Free non ha un risparmio annuale: il paragrafo resta vuoto e, con sfondo
   e padding, mostrerebbe un rettangolo verde senza testo. */
.risparmio:empty { display: none; }

.periodo {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 1.5rem;
  padding: 0.25rem;
  border: 1px solid var(--linea-forte);
  border-radius: 999px;
}
.periodo[hidden] { display: none; }
.periodo button {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--testo-quieto);
  cursor: pointer;
}
.periodo button[aria-pressed="true"] { background: var(--verde-tenue); color: var(--testo); }

.cifra [data-periodo] { display: block; }
[data-periodo-attivo="mensile"] [data-periodo="annuale"],
[data-periodo-attivo="annuale"] [data-periodo="mensile"] { display: none; }

/* In alto a destra e fuori dal flusso: con l'etichetta solo su Studio, le
 * tre schede devono restare allineate riga per riga. */
.etichetta-piano {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--verde);
  background: var(--verde-tenue);
  border: 1px solid color-mix(in srgb, var(--verde) 40%, transparent);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.etichetta-piano:empty { display: none; }

.tabella-scorre { overflow-x: auto; margin-top: 1rem; }
.funzioni { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.funzioni th, .funzioni td { padding: 0.7rem 0.5rem; border-top: 1px solid var(--linea); text-align: center; }
.funzioni th:first-child { text-align: left; }
.funzioni thead th { font-family: var(--mono); font-size: 0.76rem; font-weight: 500; color: var(--testo-quieto); border-top: 0; }
.funzioni tbody th { font-weight: 400; }
.funzioni .si { color: var(--verde); }
.funzioni .no { color: var(--testo-quieto); }

/* ---------- domande ---------- */

.domande { margin-top: 2rem; max-width: 50rem; }

.domanda { border-top: 1px solid var(--linea); padding-block: 0.35rem; }
.domanda:last-child { border-bottom: 1px solid var(--linea); }

.domanda summary {
  cursor: pointer;
  padding-block: 1rem;
  font-weight: 500;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: "+"; font-family: var(--mono); color: var(--verde); }
.domanda[open] summary::after { content: "−"; }
.domanda p { padding-bottom: 1.1rem; color: var(--testo-quieto); font-size: 0.97rem; max-width: 44rem; }

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

.piede {
  border-top: 1px solid var(--linea);
  padding-block: 3rem 3.5rem;
  font-size: 0.88rem;
  color: var(--testo-quieto);
}

.piede .guscio { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; }
.piede-capo { display: grid; gap: 0.35rem; margin-right: auto; }
.piede-capo .marchio { color: var(--testo); }
.piede a { color: var(--testo-quieto); }
.piede a:hover { color: var(--testo); }
.creato a { color: var(--testo); font-weight: 500; }
.piede .link { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.legale {
  flex-basis: 100%;
  max-width: none;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  font-family: var(--mono);
  font-size: 0.74rem;
}

.link-pulsante {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--testo-quieto);
  text-decoration: underline;
  cursor: pointer;
}
.link-pulsante:hover { color: var(--testo); }

/* ---------- consenso ai cookie ----------
 *
 * In basso, senza coprire la pagina: si legge e si sceglie quando si vuole.
 * Rifiuta e Accetta hanno lo stesso peso, come chiede il Garante. */

.consenso {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  max-width: 34rem;
  margin-inline: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  background: var(--superficie);
  color: var(--testo);
  border: 1px solid var(--linea-forte);
  border-radius: 16px;
  box-shadow: var(--ombra-forte);
  font-size: 0.92rem;
}
.consenso[hidden] { display: none; }
.consenso p { max-width: none; }
.consenso a { color: var(--verde); }
.consenso .azioni { justify-content: flex-end; }
.consenso .bottone { flex: 1 1 8rem; justify-content: center; }

/* ---------- accessibilità ---------- */

.salta {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 30;
  padding: 0.5rem 0.8rem;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
}
.salta:focus { left: 1rem; }

.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- lingua ---------- */

.bandiera {
  width: 1.3em;
  height: auto;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.lingua { position: relative; font-size: 0.9rem; }
.lingua summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  color: var(--testo);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.lingua summary:hover { background: var(--superficie); }
.lingua summary::-webkit-details-marker { display: none; }
.lingua ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 20;
  min-width: 9rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}
.lingua a { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 6px; color: var(--testo); text-decoration: none; }
.lingua a:hover { background: var(--verde-tenue); }
.lingua a[aria-current="true"] { color: var(--verde); }

/* ---------- pagine di testo: sicurezza, privacy, supporto ---------- */

.pagina { padding-block: 3rem 5rem; }
.pagina h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.briciole { font-family: var(--mono); font-size: 0.75rem; color: var(--testo-quieto); }
.briciole ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; }
.briciole li + li::before { content: "/"; margin-right: 0.5rem; }
.briciole a { color: var(--testo-quieto); }
.prosa { max-width: 44rem; }
.prosa .sommario { margin-top: 1.1rem; font-size: 1.12rem; color: var(--testo-quieto); }
.prosa h2 { margin-top: 2.8rem; font-size: clamp(1.45rem, 3vw, 1.85rem); max-width: none; }
.prosa h3 { margin-top: 1.6rem; }
.prosa p, .prosa li { color: var(--testo-quieto); margin-top: 0.8rem; }
.prosa ul { padding-left: 1.2rem; margin: 0; }
.prosa ul:empty { display: none; }
.prosa pre {
  margin: 0.6rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  background: var(--superficie);
  overflow-x: auto;
}
.prosa pre code { background: none; padding: 0; white-space: pre; }
.scheda-dati { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 1rem 0 0; }
.scheda-dati dt { font-family: var(--mono); font-size: 0.78rem; color: var(--testo-quieto); }
.scheda-dati dd { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}