/* Gravity — le pagine di servizio: privacy, cookie, area riservata, 404.

   Sono pagine di testo, non la home: niente Terra, niente stelle, niente WebGL. Però
   sono lo stesso sito, quindi prendono i token e il tema di styles/home2.css — lo
   stesso interruttore alba/notte, gli stessi tre caratteri, le stesse misure — e qui
   sopra ci mettono soltanto l'impaginazione di una colonna di testo.

   Una regola sola per tutte: la misura della riga. Sessantacinque caratteri, che è
   dove un testo lungo si legge senza perdere il segno; la larghezza è in em, quindi
   cresce col corpo. Le pagine legali sono lunghe e nessuno le legge per piacere: il
   minimo che possiamo fare è non farle faticare. */

.gv-pagina {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: var(--gv-bg);
}

/* ------------------------------------------------------------------- testa */

/* Il marchio a sinistra, il ritorno al sito a destra, una riga sotto. Non è la
   navbar della home: lì è trasparente perché sotto c'è la scena, qui non c'è niente
   da lasciar vedere e la riga serve a separare il testo dall'intestazione. */
.gv-pagina__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gv-space-4);
  padding-block: var(--gv-space-4);
  border-bottom: 1px solid var(--gv-line);
}

.gv-pagina__marchio {
  display: block;
  flex: none;
}

.gv-pagina__marchio:hover .gv-logo-lockup {
  background-color: var(--gv-text);
  opacity: 0.72;
}

.gv-pagina__marchio .gv-logo-lockup {
  height: 26px;
  width: calc(26px * 676 / 218);
  transition: opacity 180ms ease;
}

/* ------------------------------------------------------------------- corpo */

.gv-pagina__corpo {
  flex: 1;
  padding-block: var(--gv-space-9) var(--gv-space-10);
}

.gv-pagina__colonna {
  max-width: 41em;
  margin-inline: auto;
}

/* Il titolo con l'occhiello sopra, come le sezioni della home. */
.gv-pagina__occhiello {
  margin: 0 0 var(--gv-space-3);
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
}

.gv-pagina__titolo {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: clamp(36px, 5.2vw, 56px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--gv-text);
  text-wrap: balance;
}

/* Il sommario: un gradino sopra al corpo, come il lead delle sezioni. */
.gv-pagina__sommario {
  margin: var(--gv-space-5) 0 0;
  font-size: var(--gv-type-lead);
  line-height: var(--gv-leading-lead);
  letter-spacing: -0.01em;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

.gv-pagina__data {
  margin: var(--gv-space-6) 0 0;
  padding-top: var(--gv-space-4);
  border-top: 1px solid var(--gv-line);
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
}

/* ------------------------------------------------------------------- prosa */

/* Il testo lungo. I titoli numerati stanno nel documento, non nel CSS: un contatore
   che si scolla dal testo quando qualcuno copia e incolla è peggio di niente. */
.gv-prosa {
  margin-top: var(--gv-space-9);
  font-size: var(--gv-type-body);
  line-height: 1.65;
  color: var(--gv-text-body);
}

/* Lo spazio fra i blocchi lo dà una regola sola, dall'alto. I margini propri dei
   tag si azzerano prima, tutti insieme: se si azzerano dopo — p { margin: 0 } messo
   più in basso — vincono per specificità e il testo si incolla. */
.gv-prosa > * {
  margin-block: 0;
}

.gv-prosa > * + * {
  margin-top: var(--gv-space-4);
}

.gv-prosa > h2 {
  margin-top: var(--gv-space-9);
  font-family: var(--gv-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--gv-text);
  text-wrap: balance;
}

.gv-prosa > h3 {
  margin-top: var(--gv-space-6);
  font-family: var(--gv-font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

.gv-prosa p {
  text-wrap: pretty;
}

.gv-prosa ul,
.gv-prosa ol {
  padding-left: 1.25em;
}

.gv-prosa li + li {
  margin-top: var(--gv-space-2);
}

.gv-prosa li::marker {
  color: var(--gv-text-faint);
}

.gv-prosa strong {
  font-weight: 500;
  color: var(--gv-text);
}

.gv-prosa a {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
  transition: text-decoration-color 180ms ease;
}

.gv-prosa a:hover {
  text-decoration-color: var(--gv-accent);
}

/* La tabella dei trattamenti e quella dei cookie: righe separate da una linea, senza
   fondo e senza bordi verticali. Sotto i 640 px va a scorrimento invece di stringersi
   fino a spezzare ogni parola. */
.gv-prosa__tabella {
  overflow-x: auto;
  margin-top: var(--gv-space-5);
  border-top: 1px solid var(--gv-line);
}

.gv-prosa table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 15px;
}

.gv-prosa th,
.gv-prosa td {
  padding: var(--gv-space-3) var(--gv-space-3) var(--gv-space-3) 0;
  border-bottom: 1px solid var(--gv-line);
  text-align: left;
  vertical-align: top;
}

.gv-prosa th {
  font-family: var(--gv-font-mono);
  font-size: 12px;
  font-weight: 400;
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
  text-transform: lowercase;
}

/* I nomi tecnici — gv-tema e simili — non si spezzano a metà parola dentro una cella
   stretta: il nome di una chiave letto su due righe non è più il nome di quella chiave. */
.gv-prosa code {
  font-family: var(--gv-font-mono);
  font-size: 0.92em;
  font-stretch: normal;
  white-space: nowrap;
  color: var(--gv-text);
}

/* La nota in fondo a una sezione: più piccola e più spenta, mai in corsivo. */
.gv-prosa__nota {
  font-size: 14px;
  line-height: 1.55;
  color: var(--gv-text-dim);
}

/* ------------------------------------------------- pagine corte: 404, area */

/* Le due pagine senza prosa: il blocco sta al centro dello spazio che avanza, così
   una pagina di quattro righe non resta appesa in alto a uno schermo vuoto. */
.gv-pagina__corpo--centro {
  display: flex;
  align-items: center;
  padding-block: var(--gv-space-9);
}

.gv-pagina__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gv-space-3);
  margin-top: var(--gv-space-7);
}

/* L'indirizzo scritto per esteso sotto ai tasti, per chi vuole copiarlo. */
.gv-pagina__contatti {
  margin: var(--gv-space-4) 0 0;
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
}

/* Il lembo del pianeta, come nell'hero e nell'anteprima social: un cerchio grande
   che sale da sotto con una riga di luce sul bordo. Qui è disegnato dal CSS, non
   dalla Terra vera: una pagina di errore non deve accendere una scheda grafica. */
.gv-pagina__lembo {
  position: fixed;
  z-index: 0;
  bottom: -132vmax;
  left: 50%;
  width: 150vmax;
  height: 150vmax;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 8%,
    color-mix(in srgb, var(--gv-accent) 9%, var(--gv-bg)) 0%,
    var(--gv-bg) 62%
  );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gv-accent) 26%, transparent),
    0 -2px 80px color-mix(in srgb, var(--gv-accent) 16%, transparent);
  pointer-events: none;
}

/* Le tre fasce stanno sopra al lembo. Nominate una per una e non come .gv-pagina > *:
   quel selettore prendeva anche il lembo, gli rimetteva position: relative e un cerchio
   da duemila pixel entrava nel flusso, allungando una pagina di quattro righe fino a
   tre schermate di vuoto. */
.gv-pagina__testa,
.gv-pagina__corpo,
.gv-pagina__piede {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .gv-pagina__lembo {
    animation: gv-lembo 24s ease-in-out infinite;
  }
}

@keyframes gv-lembo {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

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

.gv-pagina__piede {
  padding-block: var(--gv-space-5);
  border-top: 1px solid var(--gv-line);
}

.gv-pagina__piede-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gv-space-2) var(--gv-space-4);
  margin: 0;
  font-family: var(--gv-font-mono);
  font-size: 12px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-faint);
  list-style: none;
  padding: 0;
}

.gv-pagina__piede-riga a {
  color: var(--gv-text-dim);
  text-decoration: none;
}

.gv-pagina__piede-riga a:hover {
  color: var(--gv-text);
}

@media (max-width: 599px) {
  .gv-pagina__corpo {
    padding-block: var(--gv-space-7) var(--gv-space-8);
  }

  .gv-prosa {
    margin-top: var(--gv-space-7);
  }

  .gv-prosa h2 {
    margin-top: var(--gv-space-7);
    font-size: 22px;
  }
}

/* ------------------------------------------------- condizioni generali */

/* Le condizioni generali sono il documento più lungo del sito: quattordicimila parole,
   quarantacinque articoli in due parti. Nessuno le legge da cima a fondo, quindi
   la pagina è fatta per essere consultata: un indice in testa che porta a ogni
   articolo, il numero di ogni clausola in mono e spento sul bordo del capoverso, e
   gli articoli divisi da spazio, non da linee.

   Le versioni pubblicate sono due, quella in vigore e quella prima, ognuna al suo
   indirizzo: si scelgono con i due tasti in testa alla pagina. */

.gv-cg__pdf {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
}

.gv-cg__pdf:hover {
  text-decoration-color: var(--gv-accent);
}

/* I due tasti della versione: stanno sopra la riga della data perché la prima cosa da
   sapere, su un contratto, è quale testo si sta leggendo. Quello aperto ha il bordo
   d'accento e lo dice anche agli screen reader con aria-current; l'altro è un
   collegamento come gli altri. Sono tasti e non un menù a tendina perché sono due. */
.gv-cg__versioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gv-space-2);
  margin-top: var(--gv-space-6);
}

.gv-cg__versioni a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  border: var(--gv-border) solid var(--gv-line);
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
  transition: var(--gv-transition-hover);
}

.gv-cg__versioni a:hover {
  border-color: var(--gv-line-strong);
  color: var(--gv-text);
}

.gv-cg__versioni a[aria-current="page"] {
  border-color: var(--gv-accent);
  color: var(--gv-text);
}

.gv-cg__versioni-stato {
  color: var(--gv-text-faint);
}

/* Le novità della versione e, sulla versione vecchia, la riga che dice che è stata
   sostituita: stesso riquadro dell'avvertenza, ma senza l'accento, che resta alla
   sola frase che conta di più. */
.gv-cg__novita {
  margin: var(--gv-space-5) 0 0;
  padding: var(--gv-space-4) var(--gv-space-5);
  border-left: 2px solid var(--gv-line-strong);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

.gv-cg__novita strong {
  font-weight: 500;
  color: var(--gv-text);
}

.gv-cg__novita a {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
}

.gv-cg__novita a:hover {
  text-decoration-color: var(--gv-accent);
}

/* L'avvertenza per i consumatori: l'unica frase del documento che cambia il senso di
   tutto il resto, quindi sta in un riquadro suo, con la riga d'accento a sinistra. */
.gv-cg__avvertenza {
  margin: var(--gv-space-6) 0 0;
  padding: var(--gv-space-4) var(--gv-space-5);
  border-left: 2px solid var(--gv-accent);
  background: var(--gv-veil-soft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

.gv-cg__avvertenza strong {
  font-weight: 500;
  color: var(--gv-text);
}

/* L'indice: due colonne sugli schermi larghi, il numero dell'articolo in mono. */
.gv-cg__indice {
  margin-top: var(--gv-space-8);
}

.gv-cg__indice ol {
  margin: var(--gv-space-3) 0 0;
  padding: 0;
  list-style: none;
  columns: 2 16em;
  column-gap: var(--gv-space-6);
  font-size: 14px;
  line-height: 1.45;
}

.gv-cg__indice li {
  break-inside: avoid;
  padding-block: 3px;
}

.gv-cg__indice a {
  color: var(--gv-text-body);
  text-decoration: none;
}

.gv-cg__indice a:hover {
  color: var(--gv-text);
}

.gv-cg__indice-parte {
  padding-top: var(--gv-space-3) !important;
  font-weight: 500;
}

.gv-cg__indice-parte:first-child {
  padding-top: 0 !important;
}

.gv-cg__indice-parte a {
  color: var(--gv-text);
}

.gv-cg__art {
  display: inline-block;
  min-width: 3.4em;
  font-family: var(--gv-font-mono);
  font-size: 0.86em;
  font-stretch: normal;
  letter-spacing: 0.02em;
  color: var(--gv-text-dim);
}

/* Le parti: un'apertura vera, col numero sopra, perché il documento cambia natura —
   dalle condizioni alla nomina a responsabile del trattamento. */
.gv-cg__parte {
  scroll-margin-top: var(--gv-space-6);
}

.gv-cg__parte + .gv-cg__parte {
  margin-top: var(--gv-space-10);
  padding-top: var(--gv-space-8);
  border-top: 1px solid var(--gv-line);
}

.gv-cg__parte-n {
  margin: 0;
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
}

.gv-cg .gv-cg__parte-titolo {
  margin: var(--gv-space-2) 0 0;
  font-family: var(--gv-font-display);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--gv-text);
}

.gv-cg__parte-sotto {
  margin: var(--gv-space-3) 0 0;
  color: var(--gv-text-dim);
}

.gv-cg__parte > p:not([class]) {
  margin-top: var(--gv-space-5);
}

/* Gli articoli: spazio sopra, nessuna linea. */
.gv-cg__articolo {
  margin-top: var(--gv-space-8);
  scroll-margin-top: var(--gv-space-6);
}

.gv-cg__articolo h3 {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gv-text);
  text-wrap: balance;
}

.gv-cg__articolo h3 .gv-cg__art {
  min-width: 0;
  margin-right: 0.4em;
  font-size: 0.62em;
  vertical-align: 0.18em;
}

.gv-cg__articolo > * + * {
  margin-top: var(--gv-space-3);
}

.gv-cg__articolo > h3 + * {
  margin-top: var(--gv-space-4);
}

/* Il numero della clausola in una colonna sua, il testo nell'altra: così tutte le
   righe partono dallo stesso bordo. Prima era un rientro sporgente, padding e
   text-indent a 4,2em, ma la larghezza del numero era in em sul numero, che ha un
   corpo più piccolo del testo: le righe a capo partivano nove pixel più a destra
   della prima. Con la griglia le due misure non devono più coincidere. */
.gv-cg__clausola {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: baseline;
}

.gv-cg__n {
  font-family: var(--gv-font-mono);
  font-size: 0.8em;
  font-stretch: normal;
  letter-spacing: 0.02em;
  color: var(--gv-text-dim);
}

/* Nella tabella dell'art. 33 la prima colonna elenca i commi approvati. L'elenco va a
   capo, ma i singoli numeri no: "9-bis.2" diviso in due righe non è più il nome di
   niente. Per questo il divieto sta sul comma, non sulla cella. */
.gv-cg td:first-child {
  font-family: var(--gv-font-mono);
  font-size: 0.86em;
}

.gv-cg__comma {
  white-space: nowrap;
}

.gv-cg__articolo ul {
  padding-left: 4.6rem;
}

.gv-cg__articolo li::marker {
  content: "— ";
  color: var(--gv-text-faint);
}

@media (max-width: 599px) {
  .gv-cg__clausola {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  /* Sul telefono la tabella dell'art. 33 si mette in colonna: i commi sopra, la
     clausola sotto. Restando tabella occupava quattrocento pixel e la descrizione
     finiva fuori dallo schermo, da tirare di lato riga per riga. L'intestazione
     sparisce perché la frase che precede la tabella dice già cosa sono le due cose. */
  .gv-cg table,
  .gv-cg tbody,
  .gv-cg tr,
  .gv-cg td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .gv-cg thead {
    display: none;
  }

  .gv-cg tr {
    padding-block: var(--gv-space-3);
    border-bottom: 1px solid var(--gv-line);
  }

  .gv-cg td {
    padding: 0;
    border: 0;
  }

  .gv-cg td:first-child {
    margin-bottom: 6px;
  }

  .gv-cg__articolo ul {
    padding-left: 1.25em;
  }

  .gv-cg__indice ol {
    columns: 1;
  }
}

/* ------------------------------------ la landing: adesivi e campagne */

/* Si apre dal codice sugli adesivi attaccati dai clienti e sarà la destinazione delle
   campagne. Chi arriva è in piedi, col telefono in mano, e ha una domanda sola: questi
   sono bravi? Quindi la pagina è fatta di prove, in quest'ordine: i numeri, gli schermi
   dei profili, i video dei lavori, le recensioni. Niente navigazione e nessun
   collegamento che porti via prima della fine: l'unica cosa da fare è scrivere, e il
   modo per farlo resta in basso mentre si scorre.

   Qui, a differenza del resto del sito, il testo è centrato: è una pagina sola, corta di
   righe e lunga di blocchi, e il centro le tiene insieme meglio del bordo sinistro.

   Le schede di solo testo seguono il design system della home: niente riquadro, una
   linea sottile in cima alla colonna. Le domande sono righe fra due linee. */

.gv-landing__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gv-space-4);
  padding-block: var(--gv-space-5);
  border-bottom: 1px solid var(--gv-line);
}

.gv-landing__dove {
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--gv-text-dim);
}

.gv-landing__corpo,
.gv-landing__piede {
  position: relative;
  z-index: 1;
}

.gv-landing__corpo {
  padding-block: var(--gv-space-7) var(--gv-space-9);
  text-align: center;
}

.gv-landing__hero,
.gv-landing__sezione,
.gv-landing__chiusura {
  max-width: 1040px;
  margin-inline: auto;
}

.gv-landing__sezione {
  margin-top: var(--gv-space-9);
}

.gv-landing__titolo {
  max-width: 16em;
  margin: var(--gv-space-4) auto 0;
  font-family: var(--gv-font-display);
  font-size: clamp(34px, 8vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--gv-text);
  text-wrap: balance;
}

.gv-landing__lead,
.gv-landing__sotto-azioni,
.gv-landing__nota {
  max-width: 34em;
  margin-inline: auto;
}

.gv-landing__lead {
  margin-top: var(--gv-space-5);
  font-size: var(--gv-type-lead);
  line-height: var(--gv-leading-lead);
  letter-spacing: -0.01em;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

.gv-landing__h2 {
  margin: 0 auto;
  max-width: 18em;
  font-family: var(--gv-font-display);
  font-size: clamp(24px, 5.5vw, 34px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--gv-text);
  text-wrap: balance;
}

/* I tasti: quello pieno è grande quanto basta a prenderlo col pollice senza guardare. */
.gv-landing__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gv-space-3);
  max-width: 34em;
  margin: var(--gv-space-6) auto 0;
}

.gv-landing__azioni .gv-btn-solid,
.gv-landing__azioni .gv-btn-line {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 52px;
}

.gv-landing__sotto-azioni,
.gv-landing__nota {
  margin-top: var(--gv-space-3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--gv-text-dim);
}

.gv-landing__nota a,
.gv-landing__chiusura a:not([class]) {
  color: var(--gv-text);
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
}

.gv-landing__nota a:hover {
  text-decoration-color: var(--gv-accent);
}

.gv-landing__contatti {
  margin: var(--gv-space-4) 0 0;
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  color: var(--gv-text-dim);
}

.gv-landing__contatti a {
  color: inherit;
}

/* ------------------------------------------------------------- i numeri */

.gv-landing__numeri {
  margin: var(--gv-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gv-space-6) var(--gv-space-5);
  list-style: none;
}

@media (min-width: 560px) {
  .gv-landing__numeri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .gv-landing__numeri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.gv-landing__valore,
.gv-landing__cosa,
.gv-landing__fonte {
  display: block;
}

.gv-landing__valore {
  font-family: var(--gv-font-display);
  font-size: clamp(46px, 12vw, 64px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 0.92;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--gv-text);
}

.gv-landing__misura {
  font-size: 0.42em;
  letter-spacing: -0.01em;
}

/* La luce dei numeri della home: il testo in cima, l'ultravioletto alla base. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gv-landing__valore {
    background: var(--gv-sfumato);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gv-landing__valore {
    background: none;
    color: CanvasText;
  }
}

.gv-landing__cosa {
  margin-top: var(--gv-space-3);
  font-size: var(--gv-type-body);
  line-height: 1.4;
  color: var(--gv-text);
}

.gv-landing__fonte {
  margin-top: 4px;
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
}

/* ------------------------------------------------- gli schermi dei profili */

.gv-landing__prove {
  margin: var(--gv-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gv-space-5);
  list-style: none;
}

@media (min-width: 720px) {
  .gv-landing__prove {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gv-landing__prove img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--gv-line);
  border-radius: 12px;
}

.gv-landing__prova-nota {
  margin: var(--gv-space-3) 0 0;
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.01em;
  color: var(--gv-text-dim);
}

/* -------------------------------------------------------------- i lavori */

/* Sul telefono i video scorrono di lato, uno e mezzo alla volta: si capisce che ce
   n'è un altro senza allungare la pagina di quattro schermate. */
.gv-landing__lavori {
  margin: var(--gv-space-6) 0 0;
  padding: 0 0 var(--gv-space-3);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(74%, 1fr);
  gap: var(--gv-space-4);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.gv-landing__lavori::-webkit-scrollbar {
  display: none;
}

@media (min-width: 720px) {
  .gv-landing__lavori {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
  }
}

.gv-landing__lavoro {
  scroll-snap-align: start;
}

.gv-landing__schermo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--gv-line);
  border-radius: 14px;
  background: var(--gv-veil-soft);
  overflow: hidden;
  cursor: pointer;
}

.gv-landing__schermo img,
.gv-landing__schermo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 1560;
  object-fit: cover;
}

/* Il triangolo del play, disegnato: un'icona in più da scaricare per un triangolo no. */
.gv-landing__play {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: color-mix(in srgb, var(--gv-bg) 62%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gv-text) 22%, transparent);
  backdrop-filter: blur(6px);
}

.gv-landing__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent var(--gv-text);
}

/* Cliente e didascalie: tre righe fisse per ogni scheda, così le schede restano
   allineate fra loro invece di finire a altezze diverse per una riga di testo in più. */
.gv-landing__cliente {
  margin: var(--gv-space-3) 0 0;
  font-family: var(--gv-font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

.gv-landing__lavoro-nota {
  margin: 2px 0 0;
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  line-height: 1.5;
  color: var(--gv-text-dim);
}

/* --------------------------------------------------------- le recensioni */

/* Sulla home le tre recensioni stanno dentro una giostra che le fa scorrere di lato.
   Qui no: una recensione che scorre via è una recensione che non viene letta, e questa
   pagina vive di prove. Una sotto l'altra, e in fila solo quando lo schermo è largo. */
.gv-landing__recensioni {
  margin: var(--gv-space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gv-space-5);
  list-style: none;
}

.gv-landing__recensioni .gv-card {
  flex: 1 1 auto;
  align-items: center;
}

.gv-landing__recensioni .gv-card__voto,
.gv-landing__recensioni .gv-card__meta {
  justify-content: center;
}

@media (min-width: 900px) {
  .gv-landing__recensioni {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------ servizi e passi: le colonne con la linea */

/* Il sistema di schede della home: dove c'è solo testo niente riquadro, una linea
   sottile in cima alla colonna. Le linee stanno sopra ogni voce e fra una voce e
   l'altra c'è lo spazio, non un bordo. */
.gv-landing__tab {
  margin: var(--gv-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gv-space-5);
  list-style: none;
}

@media (min-width: 560px) {
  .gv-landing__tab {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .gv-landing__tab {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gv-space-4);
  }
}

.gv-landing__tab > li {
  padding: var(--gv-space-4) 0 0;
  border-top: var(--gv-border) solid var(--gv-line-mid);
}

.gv-landing__tab-n {
  margin: 0 0 var(--gv-space-2);
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.04em;
  color: var(--gv-accent);
}

.gv-landing__tab-titolo {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: var(--gv-type-lettura);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

.gv-landing__tab-testo {
  margin: var(--gv-space-2) 0 0;
  font-size: var(--gv-type-body);
  line-height: 1.5;
  color: var(--gv-text-body);
}

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

/* Righe fra due linee, come le domande della home: l'ultima chiude anche sotto, e
   insieme fanno il riquadro senza disegnarne uno. */
.gv-landing__dubbi {
  max-width: 44em;
  margin: var(--gv-space-6) auto 0;
  display: grid;
  gap: 0;
}

.gv-landing__dubbi > div {
  padding-block: var(--gv-space-4);
  border-top: var(--gv-border) solid var(--gv-line-mid);
}

.gv-landing__dubbi > div:last-child {
  border-bottom: var(--gv-border) solid var(--gv-line-mid);
}

.gv-landing__dubbi dt {
  font-family: var(--gv-font-display);
  font-size: var(--gv-type-lettura);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

.gv-landing__dubbi dd {
  max-width: 36em;
  margin: var(--gv-space-2) auto 0;
  font-size: var(--gv-type-body);
  line-height: 1.5;
  color: var(--gv-text-body);
}

/* ------------------------------------------------------------- la chiusura */

/* L'ultima chiamata ha bisogno di stare da sola: aria attorno e niente altro dentro
   lo schermo mentre si decide. Nessuna linea in cima, perche' le domande chiudono gia'
   con la loro e due filetti a distanza di un dito sono un filetto di troppo. */
.gv-landing__chiusura {
  margin-top: var(--gv-space-9);
  padding-block: var(--gv-space-9) var(--gv-space-8);
}

.gv-landing__chiusura .gv-landing__h2 {
  font-size: clamp(28px, 7vw, 44px);
}

.gv-landing__chiusura .gv-landing__lead {
  margin-top: var(--gv-space-4);
}

.gv-landing__chiusura .gv-landing__azioni {
  margin-top: var(--gv-space-7);
}

/* ------------------------------------------------- piede e barra in basso */

.gv-landing__piede {
  padding-block: var(--gv-space-6) calc(var(--gv-space-7) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--gv-line);
}

/* La barra resta in basso mentre si scorre: su una pagina di prove lunga, il modo per
   scrivere non deve essere una cosa da ritrovare. Sparisce quando i tasti in cima sono
   sullo schermo, per non coprire quello che già c'è. */
.gv-landing__barra {
  position: fixed;
  z-index: 40;
  inset: auto 0 0 0;
  display: flex;
  gap: var(--gv-space-2);
  padding: var(--gv-space-3) var(--gv-space-4) calc(var(--gv-space-3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--gv-bg) 88%, transparent);
  border-top: 1px solid var(--gv-line);
  backdrop-filter: blur(10px);
}

.gv-landing__barra[hidden] {
  display: none;
}

.gv-landing__barra .gv-btn-solid {
  flex: 1 1 auto;
  justify-content: center;
}

.gv-landing__barra-tel {
  flex: 0 0 auto;
}

@media (min-width: 900px) {
  .gv-landing__barra {
    display: none;
  }
}

/* ------------------------------------ le pagine persona: /marco e /tommaso */

/* Le aprono i codici stampati sul retro dei biglietti da visita. Chi inquadra ha
   appena stretto la mano a qualcuno e ha in mano un cartoncino nero: la pagina deve
   dargli subito le due cose che il cartoncino non sa fare, salvarsi in rubrica e
   aprire una conversazione. Le prove vengono dopo, perché servono a chi, tornato a
   casa, si chiede se questi sono bravi davvero.

   Tutto il resto della pagina è la landing dell'adesivo: stesse classi, stesse
   sezioni, stesso centro. Qui sotto c'è solo il biglietto in cima. */

.gv-persona__identita {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gv-space-4);
}

/* Il ritratto. È un ritaglio senza sfondo: dentro il cerchio resta il colore della
   pagina, e le magliette nere di tutti e due si fondono col fondo, così galleggia il
   viso e basta. Nel cerchio e non libero perché il ritaglio finisce con un taglio netto
   all'altezza delle spalle, che sul nero quasi non si vede ma in tema chiaro sarebbe un
   blocco squadrato; il bordo tondo lo fa sfumare. La cornice è la stessa linea delle
   schede.

   Le iniziali (.gv-persona__sigla) restano qui sotto: servono a chi non ha ancora una
   fotografia, e la pagina funziona con l'una o con l'altra. */
.gv-persona__ritratto,
.gv-persona__sigla {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 1px solid var(--gv-line-strong);
  border-radius: 50%;
}

.gv-persona__ritratto {
  overflow: hidden;
}

.gv-persona__ritratto img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.gv-persona__sigla {
  font-family: var(--gv-font-mono);
  font-size: 34px;
  font-stretch: normal;
  letter-spacing: 0.02em;
  color: var(--gv-accent);
}

.gv-persona__nome {
  margin: 0;
  font-family: var(--gv-font-display);
  font-size: clamp(34px, 8vw, 54px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--gv-text);
  text-wrap: balance;
}

/* Il ruolo com'è scritto sul biglietto: minuscolo, monospaziato, viola. */
.gv-persona__ruolo {
  margin: var(--gv-space-2) 0 0;
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  font-stretch: normal;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--gv-accent);
}

/* Numero e indirizzo in chiaro, come sul cartoncino: chi preferisce copiarseli a mano
   deve poterli leggere, non solo toccare un tasto. */
.gv-persona__riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gv-space-2) var(--gv-space-4);
  margin: var(--gv-space-5) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--gv-font-mono);
  font-size: 13px;
  font-stretch: normal;
  color: var(--gv-text-dim);
}

.gv-persona__riga a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gv-line-strong);
  text-underline-offset: 3px;
}

.gv-persona__riga a:hover {
  color: var(--gv-text);
  text-decoration-color: var(--gv-accent);
}