/* ==========================================================================
   PUMP — il foglio comune del sito.

   🔴 Questo file è l'unico posto dove i colori del sito vengono inventati.
   Le pagine ci aggiungono sopra solo ciò che è loro: la landing il conto alla
   rovescia e gli scatti, i documenti la colonna di lettura. Se un colore nasce
   dentro una pagina, prima o poi le due metà del sito divergono — ed è già
   successo: la landing era monocroma e le pagine di servizio bianche fisse.

   Il colore, le misure, i raggi e le durate vengono dal tema dell'app: schema
   Material 3 monocromo, quindi grigi puri, e un solo accento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKEN — la palette chiara completa vive qui, e solo qui.
   I due blocchi scuri ridefiniscono gli stessi nomi, mai altri: nessun colore
   di questo sito nasce dentro un `@media`.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --carta:      #F9F9F9;  /* surface           · tono 98 */
  --pannello:   #EEEEEE;  /* surfaceContainer  · tono 94 */
  --inchiostro: #1B1B1B;  /* onSurface         · tono 10 */
  --fumo:       #474747;  /* onSurfaceVariant  · tono 30 */
  --riga:       #C6C6C6;  /* outlineVariant    · tono 80 */
  --contorno:   #777777;  /* outline           · tono 50 */
  --pieno:      #000000;  /* primary           · tono  0 */
  --su-pieno:   #E2E2E2;  /* onPrimary         · tono 90 */

  /* La lastra del conto alla rovescia: «a schermo intero» reso in pagina. */
  --lastra:     #1B1B1B;
  --su-lastra:  #F9F9F9;

  /* L'unico accento del sito, e sta su una parola sola. */
  --via:        #4C7A5A;

  /* Le sei spaziature dell'app, e non se ne inventano altre. */
  --xs: 4px; --s: 8px; --m: 12px; --l: 16px; --xl: 24px; --xxl: 32px;

  --raggio: 12px;
  --tondo: 999px;

  --istantaneo: 120ms;
  --breve: 180ms;
  --scena: 800ms;

  /* I bersagli: 50 il minimo, 56 l'azione. */
  --tocco: 50px;
  --azione: 56px;

  /* Le due facce: una grottesca di sistema, una monospaziata. Zero font
     remoti: nessuna pagina di questo sito chiama un CDN. */
  --grottesca: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Roboto Mono", "Cascadia Mono", Consolas, monospace;

  --t-testata:   min(33.5vw, 28rem);
  --t-conto:     clamp(5rem, 25vw, 14rem);
  --t-proclama:  clamp(2.1rem, 8vw, 5rem);
  --t-h1:        clamp(2rem, 6.4vw, 3.9rem);
  --t-h2:        clamp(1.55rem, 4vw, 2.4rem);
  --t-tipo:      clamp(1.9rem, 7.4vw, 4.2rem);
  --t-cifra:     clamp(2.2rem, 5vw, 3.4rem);
  --t-corpo:     1.0625rem;
  --t-mono:      0.75rem;

  --max: 78rem;
  --bordo: clamp(16px, 4vw, 40px);
  --telefono: clamp(220px, 23vw, 330px);
  --lettura: 44rem;
}

/* Sistema in scuro, salvo che l'utente abbia imposto il chiaro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --carta:      #131313;  /* tono  6 */
    --pannello:   #1F1F1F;  /* tono 12 */
    --inchiostro: #E2E2E2;  /* tono 90 */
    --fumo:       #C6C6C6;  /* tono 80 */
    --riga:       #474747;  /* tono 30 */
    --contorno:   #919191;  /* tono 60 */
    --pieno:      #FFFFFF;  /* tono 100 */
    --su-pieno:   #1B1B1B;  /* tono 10 */
    --lastra:     #1F1F1F;
    /* Il verde si schiarisce: #4C7A5A su fondo scuro sta a 4,1:1, e la parola
       VIA deve restare leggibile, non «quasi». */
    --via:        #7BAA8B;
  }
}

/* Scuro imposto a mano: gli stessi token, di nuovo. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --carta:      #131313;
  --pannello:   #1F1F1F;
  --inchiostro: #E2E2E2;
  --fumo:       #C6C6C6;
  --riga:       #474747;
  --contorno:   #919191;
  --pieno:      #FFFFFF;
  --su-pieno:   #1B1B1B;
  --lastra:     #1F1F1F;
  --via:        #7BAA8B;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--t-corpo)/1.55 var(--grottesca);
  font-synthesis-weight: none;
}

h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: inherit; }
a:hover { text-decoration-thickness: 2px; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--inchiostro);
  outline-offset: 3px;
  border-radius: var(--xs);
}

::selection { background: var(--inchiostro); color: var(--carta); }

/* Le utility tipografiche: tre ruoli, non di più. */
.mono {
  font: 500 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fumo);
}
.num { font-variant-numeric: tabular-nums; }
.guida {
  font-size: clamp(1.0625rem, 1.9vw, 1.3rem);
  line-height: 1.5;
  color: var(--fumo);
  max-width: 34em;
}
.forte { font-weight: 700; color: var(--inchiostro); }

/* --------------------------------------------------------------------------
   LA GRIGLIA CHE SI SENTE
   Ogni sezione è una banda separata da una riga di un pixel, e ha una colonna
   di margine con l'etichetta: dice cosa stai leggendo mentre scorri.
   -------------------------------------------------------------------------- */
.banda { border-top: 1px solid var(--riga); }
.dentro-banda { padding-block: clamp(2.75rem, 6.5vw, 5.5rem); }

.pagina {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--bordo);
}

.colonne { display: grid; gap: var(--xl); }
@media (min-width: 62rem) {
  .colonne {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
}

.marcatore {
  font: 500 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fumo);
  padding-top: .35em;
  border-top: 2px solid var(--inchiostro);
  align-self: start;
}
@media (min-width: 62rem) {
  .marcatore { position: sticky; top: var(--xl); }
}

h2 {
  font-size: var(--t-h2);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  max-width: 18em;
  margin-bottom: var(--l);
}

/* --------------------------------------------------------------------------
   TESTATA — marchio a sinistra, le tre voci e il tema a destra
   -------------------------------------------------------------------------- */
.testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--l);
  min-height: var(--tocco);
  padding-block: var(--m);
}
.marchio { display: flex; align-items: center; gap: var(--s); text-decoration: none; }
.marchio svg { width: 26px; height: 26px; }
.marchio b { font-weight: 800; letter-spacing: .1em; font-size: .9375rem; }

.strumenti { display: flex; align-items: center; gap: var(--l); flex-wrap: wrap; justify-content: flex-end; }

.rotte { display: flex; align-items: center; gap: var(--l); }
.rotte a {
  font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  text-decoration: none;
  min-height: var(--tocco);
  display: inline-flex;
  align-items: center;
}
.rotte a:hover { color: var(--inchiostro); }
.rotte a[aria-current="page"] {
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
/* Sotto i 34rem la testata è già piena col marchio e i tre temi: le voci
   stanno in fondo alla pagina, dove ci sono per intero. */
@media (max-width: 34rem) { .rotte { display: none; } }

.temi { display: flex; align-items: center; gap: 2px; }
.temi button {
  appearance: none;
  background: none;
  border: 0;
  min-height: var(--tocco);
  padding: 0 var(--s);
  font: 500 var(--t-mono)/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fumo);
  cursor: pointer;
}
.temi button[aria-pressed="true"] {
  color: var(--inchiostro);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   I NEGOZI — l'app si scarica, quindi l'azione è quella e non un modulo
   -------------------------------------------------------------------------- */
.negozi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m);
  margin-top: var(--xl);
}
.negozio {
  display: inline-flex;
  align-items: center;
  gap: var(--m);
  min-height: var(--azione);
  padding: var(--s) var(--xl);
  border: 1px solid var(--pieno);
  border-radius: var(--tondo);
  background: var(--pieno);
  color: var(--su-pieno);
  text-decoration: none;
  transition: transform var(--istantaneo) ease, background-color var(--istantaneo) linear;
}
.negozio:hover { background: var(--inchiostro); border-color: var(--inchiostro); transform: translateY(-2px); }
.negozio:active { transform: translateY(0); }
.negozio svg { width: 22px; height: 22px; flex: none; fill: currentColor; }
.negozio .glifo-linea { fill: none; stroke: currentColor; stroke-width: 1.7; }
.negozio .sopra {
  display: block;
  font: 500 .6875rem/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .75;
}
.negozio .sotto { display: block; font-weight: 800; font-size: 1.0625rem; letter-spacing: .01em; }
/* Il terzo non è un negozio: è la stessa app, senza installare niente. */
.negozio.aperto {
  background: transparent;
  color: var(--inchiostro);
  border-color: var(--contorno);
}
.negozio.aperto:hover { background: var(--pannello); border-color: var(--inchiostro); }

/* --------------------------------------------------------------------------
   DITTICO E LISTINO — due metà che si contraddicono, e il prezzo che è
   tipografia e non colore
   -------------------------------------------------------------------------- */
.dittico {
  display: grid;
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  overflow: hidden;
}
@media (min-width: 44rem) { .dittico { grid-template-columns: 1fr 1fr; } }
.meta { padding: var(--xl); }
.meta + .meta { border-top: 1px solid var(--riga); }
@media (min-width: 44rem) {
  .meta + .meta { border-top: 0; border-left: 1px solid var(--riga); }
}
.meta h3 {
  font: 500 var(--t-mono)/1.5 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: var(--s);
}
.meta p { color: var(--fumo); }
.postilla { margin-top: var(--l); }

.prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s) var(--m); margin-bottom: var(--l); }
.cifra {
  font-size: var(--t-cifra);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--inchiostro);
}
.voci li {
  border-top: 1px solid var(--riga);
  padding-block: var(--m);
  color: var(--fumo);
}
.voci li:first-child { border-top: 0; padding-top: 0; }
.voci b { color: var(--inchiostro); font-weight: 700; }
.voci .dettaglio { display: block; font-size: .9375rem; }

/* --------------------------------------------------------------------------
   DOCUMENTO — privacy, condizioni, supporto: una colonna di lettura sola
   -------------------------------------------------------------------------- */
.documento { max-width: var(--lettura); margin-inline: auto; padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem); }
.documento .occhiello { display: block; margin-bottom: var(--m); }
.documento h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  margin: 0 0 var(--m);
}
.documento .data { margin-bottom: var(--xl); }
.documento h2 {
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  max-width: none;
  margin: var(--xxl) 0 var(--m);
  padding-top: var(--l);
  border-top: 1px solid var(--riga);
}
.documento h3 {
  font: 700 1.0625rem/1.4 var(--grottesca);
  margin: var(--xl) 0 var(--xs);
}
.documento p { color: var(--fumo); margin-bottom: var(--m); }
.documento ul { margin: 0 0 var(--m); }
.documento li {
  color: var(--fumo);
  padding-left: var(--xl);
  margin-bottom: var(--s);
  position: relative;
}
/* Il segno di elenco è un filetto, come i divisori della griglia: nessun
   pallino, nessuna icona. */
.documento li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: var(--m);
  height: 1px;
  background: var(--contorno);
}
.documento a { text-decoration: underline; text-underline-offset: 3px; }
.documento .risalto {
  border: 1px solid var(--riga);
  border-radius: var(--raggio);
  background: var(--pannello);
  padding: var(--l) var(--xl);
  margin-bottom: var(--xl);
}
.documento .risalto p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   CHIUSURA
   -------------------------------------------------------------------------- */
/* Il sito si chiude su un tono più fermo: è `surfaceContainer`, lo stesso
   grigio delle card dell'app. Nessun colore nuovo. */
.congedo { background: var(--pannello); }
.pie {
  border-top: 1px solid var(--riga);
  padding-block: var(--xl) clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: var(--m) var(--xl);
  align-items: center;
  justify-content: space-between;
}
.pie nav { display: flex; flex-wrap: wrap; gap: var(--m) var(--l); }
.pie a { text-decoration: none; }
.pie nav a:hover, .pie a:hover { text-decoration: underline; }