/* Gravity — home 2.
   Carica dopo tokens.css, base.css e site.css e tocca solo questa pagina: la prima
   home resta com'è. Due temi. Lo scuro è la Terra di notte e ha i valori di sempre;
   il chiaro è la stessa scena con il sole sorto, e inverte la pagina.

   Il passaggio sta tutto in un numero, --gv-tema: 0 scuro, 1 chiaro. Ogni colore è
   la miscela dei suoi due valori a quella percentuale, e il numero scorre per 1,6
   secondi. La scena dell'hero legge lo stesso numero e muove il sole con lui. */

@property --gv-tema {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

:root {
  --gv-tema: 0;
  --gv-tema-durata: 1600ms;
  --gv-tema-curva: cubic-bezier(0.45, 0, 0.15, 1);
  transition: --gv-tema var(--gv-tema-durata) var(--gv-tema-curva);

  /* ---------------------------------------------------- i due valori per colore */
  --scuro-black: #000000;
  --chiaro-black: #f7f7f8;
  --scuro-bg: #000000;
  --chiaro-bg: #efeff1;
  --scuro-surface: #0a0a0a;
  --chiaro-surface: #f7f7f8;
  --scuro-surface-raised: #101010;
  --chiaro-surface-raised: #fbfbfc;

  --scuro-text: #ededed;
  --chiaro-text: #151517;
  --scuro-text-muted: #a1a1a1;
  --chiaro-text-muted: #56565c;
  --scuro-text-dim: #878787;
  --chiaro-text-dim: #68686f;
  --scuro-text-faint: #575757;
  --chiaro-text-faint: #8c8c93;
  --scuro-text-ghost: #3d3d3d;
  --chiaro-text-ghost: #b0b0b6;
  /* Il testo da leggere: un passo sotto i titoli, più chiaro di note ed etichette. */
  --scuro-text-body: #cfcfcf;
  --chiaro-text-body: #323236;

  --scuro-line: #1f1f1f;
  --chiaro-line: #e0e0e4;
  --scuro-line-mid: #292929;
  --chiaro-line-mid: #d6d6db;
  --scuro-line-strong: #2e2e2e;
  --chiaro-line-strong: #cacad0;

  --scuro-accent: #8b5cf6;
  --chiaro-accent: #7c3aed;

  /* Veli: chiari sul nero, scuri sul chiaro. */
  --scuro-frost-bg: rgba(255, 255, 255, 0.035);
  --chiaro-frost-bg: rgba(255, 255, 255, 0.55);
  --scuro-veil: rgba(255, 255, 255, 0.035);
  --chiaro-veil: rgba(0, 0, 0, 0.035);
  --scuro-veil-soft: rgba(255, 255, 255, 0.02);
  --chiaro-veil-soft: rgba(0, 0, 0, 0.025);
  --scuro-stripe: rgba(255, 255, 255, 0.025);
  --chiaro-stripe: rgba(0, 0, 0, 0.045);
  --scuro-solid-hover: #ffffff;
  --chiaro-solid-hover: #000000;

  /* -------------------------------------------- i token del sito, miscelati */
  --gv-tema-pct: calc(var(--gv-tema) * 100%);
  --gv-black: color-mix(in srgb, var(--scuro-black), var(--chiaro-black) var(--gv-tema-pct));
  --gv-bg: color-mix(in srgb, var(--scuro-bg), var(--chiaro-bg) var(--gv-tema-pct));
  --gv-surface: color-mix(in srgb, var(--scuro-surface), var(--chiaro-surface) var(--gv-tema-pct));
  --gv-surface-raised: color-mix(in srgb, var(--scuro-surface-raised), var(--chiaro-surface-raised) var(--gv-tema-pct));
  --gv-text: color-mix(in srgb, var(--scuro-text), var(--chiaro-text) var(--gv-tema-pct));
  --gv-text-muted: color-mix(in srgb, var(--scuro-text-muted), var(--chiaro-text-muted) var(--gv-tema-pct));
  --gv-text-dim: color-mix(in srgb, var(--scuro-text-dim), var(--chiaro-text-dim) var(--gv-tema-pct));
  --gv-text-faint: color-mix(in srgb, var(--scuro-text-faint), var(--chiaro-text-faint) var(--gv-tema-pct));
  --gv-text-ghost: color-mix(in srgb, var(--scuro-text-ghost), var(--chiaro-text-ghost) var(--gv-tema-pct));
  --gv-text-body: color-mix(in srgb, var(--scuro-text-body), var(--chiaro-text-body) var(--gv-tema-pct));
  --gv-line: color-mix(in srgb, var(--scuro-line), var(--chiaro-line) var(--gv-tema-pct));
  --gv-line-mid: color-mix(in srgb, var(--scuro-line-mid), var(--chiaro-line-mid) var(--gv-tema-pct));
  --gv-line-strong: color-mix(in srgb, var(--scuro-line-strong), var(--chiaro-line-strong) var(--gv-tema-pct));
  --gv-accent: color-mix(in srgb, var(--scuro-accent), var(--chiaro-accent) var(--gv-tema-pct));
  --gv-focus: var(--gv-accent);
  --gv-frost-bg: color-mix(in srgb, var(--scuro-frost-bg), var(--chiaro-frost-bg) var(--gv-tema-pct));
  --gv-veil: color-mix(in srgb, var(--scuro-veil), var(--chiaro-veil) var(--gv-tema-pct));
  --gv-veil-soft: color-mix(in srgb, var(--scuro-veil-soft), var(--chiaro-veil-soft) var(--gv-tema-pct));
  --gv-stripe: color-mix(in srgb, var(--scuro-stripe), var(--chiaro-stripe) var(--gv-tema-pct));
  --gv-solid-hover: color-mix(in srgb, var(--scuro-solid-hover), var(--chiaro-solid-hover) var(--gv-tema-pct));
}

:root[data-tema="chiaro"] {
  --gv-tema: 1;
  color-scheme: light;
}

/* ---------------------------------------- colori scritti per esteso in site.css */

.gv-btn-solid:hover {
  background: var(--gv-solid-hover);
}

.gv-projects__item:hover {
  background: var(--gv-veil);
}

.gv-card__media,
.gv-compare__option-value {
  background: var(--gv-veil-soft);
}

.gv-placeholder {
  background: repeating-linear-gradient(-45deg, transparent 0 12px, var(--gv-stripe) 12px 13px);
}

/* Il filo del footer prende il colore del testo, quindi cambia col tema da solo:
   prima il disegno arrivava da un SVG col bianco scritto dentro e sul chiaro andava
   invertito a mano. */
.gv-footer__loader {
  color: var(--gv-text);
}

/* ================================================================ testi */

/* La scala dei testi di questa pagina. La prima home resta com'è.

   Due caratteri che si distinguono. Instrument Sans a 500 per i titoli, dall'H1 ai titoli
   delle voci, e per i numeri grandi. Geist per tutto il resto: frasi, etichette, bottoni,
   navbar e footer, con il suo corsivo per le parole in evidenza.

   Due pesi: 400 per le frasi da leggere, 500 per titoli, etichette, numeri e bottoni.
   Un solo colore per tutte le frasi, --gv-text-body, un passo sotto i titoli: niente frasi
   metà grigie e metà bianche.

   Due corpi per le frasi. Il lead è per il testo che sta da solo sotto un titolo:
   sottotitoli, testo del metodo e della chiusura, cosa misurano i risultati, voci del
   footer. Fa 18px sui telefoni, 20 dal tablet, 24 da 1000px e 26 da 2120px, sempre sotto
   il titolo di una voce (24 e 32): a 30px si confondeva con i titoli. Il corpo è per il
   testo dentro schede, righe, tabella e risposte: 16px, e 20 da 2120px, dove a 16 le righe
   arrivavano a 140 caratteri.

   Sopra ci sono solo i titoli: voce 24 e 32, sezione 32, 48 e 72, hero fino a 96.
   Le frasi vanno a capo piene fino alla misura, invece di bilanciarsi più corte.

   L'enfasi è rara e ha un solo modo: poche parole in corsivo con la luce dei numeri
   grandi, dal colore del testo in alto all'ultravioletto in basso. */
:root {
  --gv-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gv-font-display: "Instrument Sans", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gv-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  /* La scala aveva sette corpi fra 11 e 18 px — sette decisioni dove l'occhio ne vede
     due — e poi un salto dal 18 al 32 con in mezzo il solo 24. Nel codice il rumore in
     basso e il buco in mezzo sono lo stesso problema: nessuno aveva deciso i gradini.
     Adesso sono dichiarati. Micro prende quello che stava a 11 e a 13; lettura prende
     quello che si legge per intero e stava a 17, dove non si distingueva dal corpo. */
  --gv-type-micro: 12px;
  --gv-type-body: 16px;
  --gv-type-lettura: 20px;
  --gv-type-lead: 18px;
  --gv-leading-lead: 1.45;
  /* La luce dei numeri grandi: il testo fino a un quinto dell'altezza, poi l'ultravioletto. */
  --gv-sfumato: linear-gradient(180deg, var(--gv-text) 20%, var(--gv-accent) 100%);
  /* La stessa luce sulle parole: la riga di testo è più alta delle lettere minuscole, e i
     due colori si spostano dove stanno le lettere, perché l'effetto sia quello dei numeri. */
  --gv-sfumato-testo: linear-gradient(180deg, var(--gv-text) 34%, var(--gv-accent) 86%);
}

.gv-heading,
.gv-card__title,
.gv-compare__criterion-name,
.gv-projects__number-value,
.gv-results__value,
.gv-hero .gv-pixel--hero {
  font-family: var(--gv-font-display);
}

@media (min-width: 640px) {
  :root {
    --gv-type-lead: 20px;
  }
}

@media (min-width: 1000px) {
  :root {
    --gv-type-lead: 24px;
  }
}

@media (min-width: 2120px) {
  :root {
    --gv-type-body: 20px;
    --gv-type-lead: 26px;
  }
}

/* Il lead. La misura è in em, quindi cresce con il corpo: circa 80 caratteri per riga. */
.gv-head__intro,
.gv-method__text,
.gv-cta__text {
  max-width: 38em;
  font-size: var(--gv-type-lead);
  line-height: var(--gv-leading-lead);
  letter-spacing: -0.01em;
  color: var(--gv-text-body);
  text-wrap: pretty;
}

/* Il corpo, con lo stesso colore: schede, righe dei progetti, tabella, risposte. Anche la
   colonna Gravity: la distinguono il velo e il divisorio, non un bianco più acceso. */
.gv-card__desc,
.gv-card__quote,
.gv-compare__table td,
.gv-compare__option-value,
.gv-projects__card .gv-projects__body,
.gv-projects__item[data-active="true"] .gv-projects__body {
  color: var(--gv-text-body);
}

.gv-compare__table td.gv-compare__col--gravity,
.gv-compare__option--gravity .gv-compare__option-value {
  color: var(--gv-text-body) !important;
}

.gv-faq__a,
.gv-projects__item .gv-projects__body {
  text-wrap: pretty;
}

/* Le parole in evidenza: corsivo di Geist e la luce dei numeri. Su due righe la sfumatura
   si ripete per ogni riga. I numeri dei progetti hanno la luce dei numeri grandi; quella
   dei risultati sta con la loro scheda, nel metodo. Dove il testo non accetta uno sfondo, o
   con i colori forzati del sistema, restano pieni. */
.gv-enfasi {
  font-style: italic;
  color: var(--gv-text);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gv-enfasi {
    background: var(--gv-sfumato-testo);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    color: transparent;
  }

  .gv-projects__number .gv-projects__number-value,
  .gv-projects__item[data-active="true"] .gv-projects__number-value {
    background: var(--gv-sfumato);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gv-enfasi,
  .gv-projects__number .gv-projects__number-value,
  .gv-projects__item[data-active="true"] .gv-projects__number-value {
    background: none;
    color: CanvasText;
  }
}

/* Nella lista dei progetti il numero delle righe spente si abbassa insieme a loro. */
.gv-projects__item .gv-projects__number-value {
  opacity: 0.4;
  transition: opacity var(--gv-dur-hover) var(--gv-ease);
}

.gv-projects__item[data-active="true"] .gv-projects__number-value {
  opacity: 1;
}

/* Il terzo carattere: Geist Mono, disegnato insieme a Geist, per il livello tecnico della
   pagina. Prende le etichette e solo quelle — occhielli, tag, fonti dei risultati, unità di
   misura, contatori, intestazioni delle colonne, dati e note — cioè quello che si legge
   come una didascalia di strumento, non come una frase. Restano in Geist tutte le frasi e
   tutto quello che si clicca: bottoni, collegamenti delle schede, voci del footer. Il mono
   ha le lettere più larghe, quindi la spaziatura scende da 0,06 a 0,04em e la larghezza
   stretta non si applica: quella la aveva solo Instrument Sans. */
.gv-eyebrow,
.gv-hero__meta,
.gv-tema__etichetta,
.gv-projects__item-tag,
.gv-carousel__count,
.gv-proof__count,
.gv-results__source,
.gv-compare__table thead th,
.gv-compare__option-label,
.gv-compare__nota,
.gv-method__geo,
.gv-cta__note,
.gv-footer__col h2,
.gv-footer__crediti,
.gv-placeholder {
  font-family: var(--gv-font-mono);
  font-stretch: normal;
  letter-spacing: 0.04em;
}

/* Le note scritte in minuscolo non hanno bisogno di aria fra le lettere. */
.gv-compare__nota,
.gv-footer__crediti,
.gv-cta__note {
  letter-spacing: 0.01em;
}

/* ============================================================== testate */

/* Le testate delle sezioni al centro: titolo e sottotitolo. Restano a sinistra l'hero e il
   metodo, dove testo e scheda stanno affiancati, e la chiusura era già centrata. Al centro
   il sottotitolo va a capo bilanciato, con righe di lunghezza simile. Schede, righe dei
   progetti, tabella e risposte sotto restano allineate a sinistra, per leggerle. */
.gv-head {
  align-items: center;
  text-align: center;
}

.gv-head__intro {
  margin-inline: auto;
  text-wrap: balance;
}

/* ============================================================= progetti */

/* Le righe dei progetti restano accese più a lungo: dieci secondi di base, e chi ha un
   video resta acceso finché il video finisce. Il tempo lo scandisce la linea di
   avanzamento: site.js scrive sulla sezione i sei secondi della prima home, e qui ogni
   riga ne dichiara uno suo. Le righe non portano più a una pagina: il progetto lo dice il
   nome in data-project-item. */
.gv-projects__item {
  --gv-project-hold: 10000ms;
}

/* Ballerini ha il video più lungo, quarantacinque secondi: il gestionale va visto intero. */
.gv-projects__item[data-project-item="ballerini-auto"] {
  --gv-project-hold: 45500ms;
}

/* Style Up ha un video di ventotto secondi: la riga resta accesa finché finisce. */
.gv-projects__item[data-project-item="style-up"] {
  --gv-project-hold: 28000ms;
}

/* Poggetto ha un video di quattordici secondi: la riga resta accesa finché finisce. */
.gv-projects__item[data-project-item="carrozzeria-poggetto"] {
  --gv-project-hold: 14000ms;
}

/* Maria Sole ha un video di ventiquattro secondi: la riga resta accesa finché finisce. */
.gv-projects__item[data-project-item="maria-sole"] {
  --gv-project-hold: 24500ms;
}

/* La riga del progetto, impaginata su una griglia invece che a bandiera: a sinistra il
   nome, il tag e il testo; a destra, in una colonna sua larga uguale per tutte le righe,
   la targa del risultato. Prima nome, tag e numero erano appesi alla stessa riga e ogni
   progetto li portava a un'altezza diversa: le scritte sembravano storte perché non lo
   erano rispetto a niente. */
@media (min-width: 1000px) {
  .gv-projects__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(200px, 17vw, 300px);
    grid-template-areas:
      "id risultato"
      "testo risultato";
    column-gap: var(--gv-space-6);
    row-gap: var(--gv-space-4);
    align-items: start;
  }

  .gv-projects__item-id {
    grid-area: id;
  }

  .gv-projects__item .gv-projects__body {
    grid-area: testo;
  }

  .gv-projects__item .gv-projects__number {
    grid-area: risultato;
  }
}

/* Fino ai 1600px la colonna della targa si mangiava metà della lista: al testo restavano
   meno di 300px, la riga di Ballerini Auto arrivava a ventun righe e il riquadro dei
   progetti passava i duemila pixel di altezza. Lì la targa sale accanto al nome, e il
   testo si prende tutta la larghezza della lista; anche l'anteprima lascia un po' di
   posto. Da 1600px in su la lista è larga abbastanza e la targa torna nella sua colonna. */
@media (min-width: 1000px) and (max-width: 1599px) {
  .gv-projects__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "id risultato"
      "testo testo";
    row-gap: var(--gv-space-3);
  }

  .gv-projects__item .gv-projects__number {
    align-self: start;
    min-width: 200px;
  }

  .gv-projects__preview {
    width: clamp(300px, 30vw, 460px);
  }
}

/* Il nome del cliente è il titolo della riga: prende il corpo dei titoli delle voci, nel
   carattere dei titoli. È la prima cosa che si legge. */
.gv-projects__item-name {
  font-family: var(--gv-font-display);
  font-size: var(--gv-type-title);
  font-weight: 500;
  font-stretch: normal;
  line-height: var(--gv-leading-title);
  letter-spacing: var(--gv-type-title-tracking);
  text-transform: none;
}

/* I tag sono due etichette: dove sta il cliente e cosa abbiamo fatto. Due riquadri corti
   invece di una riga sola lunga, che a schermo stretto andava a capo male. */
.gv-projects__tags {
  display: flex;
  flex-wrap: wrap;
  /* Senza il riquadro sono lo spazio e basta a dire che i campi sono due: stretti si
     leggevano come una frase unica. Verticale piccolo, orizzontale largo. */
  gap: 6px var(--gv-space-5);
}

/* Le etichette non hanno più il riquadro. Erano due scatole impilate sotto ogni nome,
   e con quattro progetti facevano trentadue filetti: il gruppo più grosso della pagina,
   e da solo quasi un quinto di tutte le linee. Un riquadro intorno a un dato che non si
   clicca non dice niente in più di quanto dicano il mono e il grigio. Adesso sono due
   campi separati da uno spazio largo: dove sta il cliente, e cosa gli abbiamo fatto. */
.gv-projects__item-tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  font-size: var(--gv-type-micro);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gv-text-dim);
}

/* La targa del risultato: una zona sua, con il velo e la linea delle schede, il numero
   grande con la luce dal basso e l'unità sotto. Non è staccata dalla riga, ma si vede dove
   comincia e dove finisce. */
.gv-projects__number {
  gap: var(--gv-space-2);
  max-width: none;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding: var(--gv-space-4) var(--gv-space-4) var(--gv-space-3);
  border: var(--gv-border) solid var(--gv-line-mid);
  background: var(--gv-veil-soft);
}

.gv-projects__number-value {
  font-size: clamp(36px, 3vw, 72px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

/* L'unità sta accanto al numero e prende la stessa luce: "33 ore", "1,7 mln". Quello che
   resta sotto è la spiegazione, e ci sta su una riga o due bilanciate. */
.gv-projects__number-misura {
  font-size: 0.42em;
  letter-spacing: -0.02em;
}

/* Quello che il numero misura — "risparmiate al mese", "visualizzazioni in 3 mesi" —
   non è più un'etichetta piccola in mono maiuscolo: è la metà della frase che il numero
   comincia, e va letta. Corpo del testo, minuscolo, e la stessa luce viola delle parole
   in evidenza, così la targa si legge come una cosa sola invece che come un numero con
   una didascalia sotto. */
.gv-projects__number-unit {
  max-width: 15em;
  font-family: var(--gv-font-sans);
  font-size: var(--gv-type-body);
  font-weight: 500;
  font-stretch: normal;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
  color: var(--gv-accent);
}

/* La sfumatura dopo il colore pieno, mai prima: se il blocco @supports sta sopra, la
   regola del colore che segue lo cancella e resta il viola piatto. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gv-projects__number-unit {
    background: var(--gv-sfumato-testo);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Il progetto che il risultato ancora non ce l'ha: la targa resta, con dentro l'attesa. */
.gv-projects__number--vuoto {
  border-style: dashed;
  background: none;
}

.gv-projects__number--vuoto .gv-projects__number-unit {
  color: var(--gv-text-ghost);
}

/* Nelle schede la targa è la stessa zona centrata delle righe desktop. site.css la
   lasciava a bandiera — display: flex, text-align: left — da quando era una riga di
   testo e non una zona, e con due classi vinceva su questa. Qui torna una griglia
   centrata, e il contenuto smette di stare appeso a sinistra dentro una scatola larga. */
.gv-projects__card .gv-projects__number {
  display: grid;
  /* La targa è una zona, non una parola: resta larga quanto la scheda anche ora che
     la colonna centra i suoi elementi. */
  justify-self: stretch;
  justify-items: center;
  align-content: center;
  gap: var(--gv-space-2);
  margin-top: var(--gv-space-3);
  padding: var(--gv-space-4) var(--gv-space-4) var(--gv-space-3);
  text-align: center;
}

.gv-projects__card .gv-projects__number-value {
  font-size: clamp(40px, 11vw, 64px);
}

/* Nome, etichette e targa al centro della scheda; il testo lungo resta a bandiera,
   perché un paragrafo di dieci righe centrato non si legge. */
.gv-projects__card-meta {
  justify-items: center;
  text-align: center;
}

.gv-projects__card .gv-projects__tags {
  justify-content: center;
}

.gv-projects__card .gv-projects__body {
  justify-self: stretch;
  text-align: left;
}

/* Nelle schede non c'è una riga accesa e una spenta: il nome è sempre acceso. */
.gv-projects__card .gv-projects__item-name {
  color: var(--gv-text);
}

/* La pagina non scorre mai di lato: se una misura sborda, si taglia invece di aprire
   una seconda schermata vuota a destra. Sul telefono era l'effetto "pagina tagliata".
   È una rete di sicurezza: quello che sborda resta comunque un errore da correggere.
   Con clip, e non hidden, la barra resta appiccicata in alto e il cielo fisso dietro. */
html {
  overflow-x: clip;
}

/* ================================================================ hero */

/* La scena sta in cima a main, sotto a tutte le sezioni: comincia con l'hero e scende
   fin dove si chiude il globo, dietro ai progetti. L'altezza la scrive lo script. */
.gv-terra {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100svh;
  pointer-events: none;
  visibility: hidden;
}

/* Una tela WebGL opaca prima del primo disegno è nera: si mostra quando c'è la scena. */
.gv-terra[data-terra="on"] {
  visibility: visible;
}

.gv-hero {
  isolation: isolate;
}

.gv-hero__stage,
.gv-hero__foot {
  position: relative;
  z-index: 1;
}

/* Senza JavaScript, o senza WebGL, resta un globo disegnato dal CSS con la luce sul
   bordo alto. Con la scena accesa sparisce. */
.gv-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 30%;
  left: 50%;
  width: max(66vw, 100svh);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: color-mix(in srgb, var(--gv-bg), var(--gv-text) calc(4% + var(--gv-tema) * 6%));
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.9),
    0 -6px 20px rgba(255, 255, 255, 0.28),
    0 -40px 120px rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

html[data-tema] .gv-hero:not([data-terra="off"])::before {
  display: none;
}

/* Sul chiaro il voto sotto il titolo passa sul globo: un tono più scuro, per leggerlo. */
:root[data-tema="chiaro"] .gv-hero__meta {
  color: var(--gv-text-muted);
}

/* Il titolo dell'hero in Instrument Sans a 500, come gli altri titoli: i pallini del
   Pixel Circle si confondevano con le luci delle città. Passa sopra la Terra con un alone
   del colore del fondo, appena percettibile; lo stesso, più corto, per il voto sotto. */
.gv-hero .gv-pixel--hero {
  letter-spacing: -0.04em;
  text-shadow:
    0 0 0.16em color-mix(in srgb, var(--gv-bg) 80%, transparent),
    0 0 0.55em color-mix(in srgb, var(--gv-bg) 45%, transparent);
}

/* Da 1200px su una riga: la frase più larga, "Costruiamo gestionali su misura per la tua
   azienda.", in Instrument Sans è 21,32 volte il corpo, 21,53 con il margine che aggiunge
   anche lo script. */
@media (min-width: 1200px) {
  .gv-hero__claim h1 {
    --gv-hero-fit: 21.53;
  }
}

.gv-hero__meta {
  text-shadow:
    0 0 4px color-mix(in srgb, var(--gv-bg) 90%, transparent),
    0 0 14px color-mix(in srgb, var(--gv-bg) 60%, transparent);
}

/* Il bottone dell'hero, un passo più piccolo di quello della chiusura: il testo al corpo
   del lead invece che a quello dei titoli delle voci, e il riquadro più basso e più
   stretto. Sotto i 1200px resta largo quanto la pagina. */
.gv-hero__action .gv-btn-solid--lg {
  font-size: var(--gv-type-lead);
  min-height: clamp(52px, 4.4vw, 72px);
  padding-inline: clamp(24px, 3vw, 48px);
}

/* Sotto i 360px "Prenota consulenza di 30 minuti" non entra nella riga: il riquadro
   stringe i suoi margini interni e il testo scende al corpo del testo corrente. */
@media (max-width: 359px) {
  .gv-hero__action .gv-btn-solid--lg {
    font-size: var(--gv-type-body);
    padding-inline: var(--gv-space-3);
  }
}

/* Sotto i 1200px il titolo sta su tre righe e la seconda ruota, in un riquadro alto
   quanto il termine più lungo. A 48px sui telefoni "gestionali su misura" andava a capo:
   il riquadro teneva due righe e sotto i termini corti restava una riga vuota. Qui il
   corpo è quello a cui la riga più larga entra intera, senza mai superare il display.
   La più larga è "gestionali su misura": in Instrument Sans è 8,39 volte il corpo, 8,56
   con un filo di margine. Se cambiano i termini o il carattere, il valore va rimisurato. */
@media (max-width: 1199px) {
  .gv-hero__foot {
    container-type: inline-size;
  }

  .gv-hero__claim h1 {
    --gv-hero-fit-righe: 8.56;
    font-size: min(var(--gv-type-display), 100cqi / var(--gv-hero-fit-righe));
  }
}

/* L'invito a scorrere: una linea sottile che sfuma e una punta, in fondo alla scena e al
   centro della pagina, appena sopra il titolo. Scende e risale ogni due secondi e mezzo,
   e si accende al passaggio. È un collegamento ai progetti: chi non vuole scorrere a mano
   ci arriva con un clic. Con il movimento ridotto resta ferma. */
.gv-hero__scorri {
  position: absolute;
  z-index: 2;
  bottom: var(--gv-space-2);
  left: 50%;
  display: grid;
  place-items: end center;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
  color: var(--gv-text-dim);
  transition: color var(--gv-dur-hover) var(--gv-ease);
}

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

.gv-hero__scorri-segno {
  position: relative;
  display: block;
  width: 1px;
  height: 28px;
  background: linear-gradient(180deg, transparent, currentColor);
  animation: gv-scorri 2500ms var(--gv-ease) infinite;
}

/* La punta: un quadrato con due lati soli, girato di un quarto. Angoli vivi come il
   resto della pagina. */
.gv-hero__scorri-segno::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translate(-50%, -1px) rotate(45deg);
}

@keyframes gv-scorri {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gv-hero__scorri-segno {
    animation: none;
    opacity: 0.8;
  }
}

/* Dal tablet la linea è più lunga: la scena è più alta e l'invito si vede da più lontano. */
@media (min-width: 768px) {
  .gv-hero__scorri {
    width: 56px;
    height: 56px;
  }

  .gv-hero__scorri-segno {
    height: 40px;
  }
}

/* Il voto sotto al titolo: cinque stelle e la frase, in un collegamento solo.

   Le stelle sono due file sovrapposte, una spenta e una piena; quella piena è tagliata
   alla percentuale del voto, --gv-voto, quindi 4,9 su 5 si legge davvero come quasi
   cinque. La fila non va mai a capo: a schermo stretto va a capo la frase, e le stelle
   restano insieme sulla loro riga. Prima c'era una stella sola e, stringendo, finiva su
   una riga tutta sua sopra al testo. */
.gv-hero__voto {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--gv-space-3);
  color: inherit;
  transition: color var(--gv-dur-hover) var(--gv-ease);
}

.gv-hero__voto[href]:hover {
  color: var(--gv-text);
}

.gv-hero__voto[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

.gv-hero__voto[aria-disabled="true"] .gv-hero__voto-freccia {
  display: none;
}

.gv-hero__voto-testo {
  white-space: nowrap;
}

.gv-hero__voto-freccia {
  width: 12px;
  height: 12px;
  margin-left: calc(var(--gv-space-3) * -1 + 4px);
  color: var(--gv-text-dim);
}

.gv-stelle {
  position: relative;
  display: block;
  flex: none;
}

.gv-stelle__fila {
  display: flex;
  gap: 2px;
  white-space: nowrap;
}

.gv-stelle__fila svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: currentColor;
}

.gv-stelle__fila--vuote {
  color: var(--gv-text-ghost);
}

/* La parte presa del voto: sta sopra all'altra, tagliata alla sua percentuale. */
.gv-stelle__fila--piene {
  position: absolute;
  inset: 0;
  width: var(--gv-voto, 100%);
  overflow: hidden;
  color: var(--gv-text);
}

/* Sugli schermi larghi le stelle crescono con il testo delle etichette. */
@media (min-width: 1200px) {
  .gv-stelle__fila svg {
    width: 16px;
    height: 16px;
  }
}

/* =============================================================== navbar */

/* La barra non si stacca più dalla pagina: via la linea sotto, e al posto del fondo pieno
   una sfumatura del colore della pagina che si dissolve a metà altezza. In cima resta
   coperto quello che le scorre sotto; verso il basso la barra sparisce nell'hero, senza
   nessun taglio netto sopra la Terra. */
.gv-nav {
  border-bottom: 0;
  background: linear-gradient(to bottom, var(--gv-bg) 45%, transparent 100%);
}

/* A destra due tasti soli, più l'interruttore: l'area riservata con il bordo del testo,
   la chiamata all'azione piena. Stessa altezza, 44px, e lo stesso passo fra loro. */
.gv-nav__right {
  gap: var(--gv-space-3);
}

.gv-nav .gv-nav__client {
  display: inline-flex;
  height: 44px;
  padding-inline: 22px;
  font-size: var(--gv-type-small);
  white-space: nowrap;
  border-color: var(--gv-text);
  color: var(--gv-text);
}

.gv-nav .gv-nav__client:hover {
  border-color: var(--gv-text);
  background: var(--gv-veil);
}

/* Senza l'indirizzo dell'area riservata il tasto resta disegnato ma fermo. */
.gv-nav .gv-nav__client[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

/* Sotto i 640px i due tasti non entrano accanto al marchio: resta l'area riservata, che
   sulla pagina non sta da nessun'altra parte, e la chiamata all'azione la fa il bottone
   grande dell'hero, subito sotto. Il bottone piccolo lo nasconde già site.css. La barra
   stringe il suo passo per far entrare quello che resta. */
@media (max-width: 639px) {
  .gv-nav__row {
    gap: var(--gv-space-3);
  }

  .gv-nav__right {
    gap: var(--gv-space-2);
  }
}

/* Sugli schermi più stretti, 320px, il tasto stringe ancora: con i margini interni pieni
   usciva dalla pagina di sei pixel. */
@media (max-width: 359px) {
  .gv-nav .gv-nav__client {
    padding-inline: 10px;
    font-size: 12px;
  }
}

/* Il marchio più grande: 40 px d'altezza sui telefoni, 48 dal tablet, 54 da 1200px. */
.gv-nav .gv-logo-lockup {
  height: 40px;
  width: calc(40px * 676 / 218);
}

@media (min-width: 768px) {
  .gv-nav .gv-logo-lockup {
    height: 48px;
    width: calc(48px * 676 / 218);
  }
}

@media (min-width: 1200px) {
  .gv-nav .gv-logo-lockup {
    height: 54px;
    width: calc(54px * 676 / 218);
  }
}

/* =============================================================== servizi */

/* I collegamenti in fondo alle schede tengono sempre l'altezza di due righe. I quattro
   testi sono di lunghezza diversa e a certe larghezze alcuni andavano a capo e altri no:
   le schede finivano con i collegamenti a quote diverse, e la fila sembrava sbilenca. Con
   l'altezza fissa e il testo appoggiato in alto, le prime righe sono sempre allineate. */
.gv-card__action {
  align-items: flex-start;
  min-height: calc(var(--gv-space-4) + 2em * var(--gv-leading-label) + 10px);
}

.gv-card__action .gv-icon {
  margin-top: 3px;
}

/* ============================================================== grafiche */

/* Le grafiche dei servizi sono disegnate qui, non caricate: linee sottili come il resto
   della pagina, un solo pezzo acceso di ultravioletto per scheda, e i colori presi dai
   token, così seguono i due temi.

   Il movimento non è un vezzo: racconta il servizio. Ogni grafica ha un suo giro, e dentro
   al giro ogni pezzo si muove nel momento in cui deve — le percentuali dei fotogrammi sono
   la sequenza, non ci sono ritardi da rincorrere. Si muovono solo opacità, trasformazioni e
   tratteggio, le tre cose che la scheda grafica fa da sola. Con il movimento ridotto tutto
   resta fermo e leggibile. */
.gv-grafica {
  display: block;
  width: 100%;
  height: 100%;
}

.gv-grafica__cornice {
  fill: none;
  stroke: var(--gv-line-strong);
  stroke-width: 1;
}

.gv-grafica__filo {
  fill: none;
  stroke: var(--gv-line-strong);
  stroke-width: 1;
}

.gv-grafica__segni {
  fill: var(--gv-text-ghost);
}

.gv-grafica__blocchi {
  fill: color-mix(in srgb, var(--gv-text) 10%, transparent);
}

.gv-grafica__acceso {
  fill: var(--gv-accent);
}

/* ------------------------------------------------------------- siti web
   Tre pagine che si danno il cambio ogni tre secondi: quella che arriva sale di poco,
   quella che esce si alza e sfuma. L'indirizzo in alto cambia con la pagina. */
.gv-grafica__pagina {
  animation: gv-pagina 9000ms ease-in-out infinite;
}

.gv-grafica__pagina--2 {
  animation-name: gv-pagina-2;
}

.gv-grafica__pagina--3 {
  animation-name: gv-pagina-3;
}

.gv-grafica__indirizzo {
  animation: gv-pagina 9000ms ease-in-out infinite;
}

.gv-grafica__indirizzo--2 {
  animation-name: gv-pagina-2;
}

.gv-grafica__indirizzo--3 {
  animation-name: gv-pagina-3;
}

@keyframes gv-pagina {
  0%,
  1% {
    opacity: 0;
    transform: translateY(14px);
  }
  4%,
  30% {
    opacity: 1;
    transform: translateY(0);
  }
  33%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes gv-pagina-2 {
  0%,
  34% {
    opacity: 0;
    transform: translateY(14px);
  }
  37%,
  63% {
    opacity: 1;
    transform: translateY(0);
  }
  66%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes gv-pagina-3 {
  0%,
  67% {
    opacity: 0;
    transform: translateY(14px);
  }
  70%,
  96% {
    opacity: 1;
    transform: translateY(0);
  }
  99%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* --------------------------------------------------------------- social
   I contenuti si fanno uno per volta: la tessera si riempie dal basso, poi compare la sua
   riga. Quando ci sono tutti, la curva sale — molto più ripida di prima — e resta su
   finché il giro non ricomincia. */
.gv-grafica__tessera-bordo {
  fill: none;
  stroke: var(--gv-line-strong);
  stroke-width: 1;
}

.gv-grafica__tessera-piena {
  fill: color-mix(in srgb, var(--gv-text) 12%, transparent);
  transform-box: fill-box;
  transform-origin: bottom;
  animation: gv-riempie 9000ms ease-out infinite;
}

.gv-grafica__tessera-riga {
  fill: color-mix(in srgb, var(--gv-text) 10%, transparent);
  animation: gv-riga-appare 9000ms ease-out infinite;
}

.gv-grafica__tessera--2 .gv-grafica__tessera-piena,
.gv-grafica__tessera--2 .gv-grafica__tessera-riga {
  animation-delay: 700ms;
}

.gv-grafica__tessera--3 .gv-grafica__tessera-piena,
.gv-grafica__tessera--3 .gv-grafica__tessera-riga {
  animation-delay: 1400ms;
}

.gv-grafica__tessera--4 .gv-grafica__tessera-piena,
.gv-grafica__tessera--4 .gv-grafica__tessera-riga {
  animation-delay: 2100ms;
}

@keyframes gv-riempie {
  0% {
    transform: scaleY(0);
  }
  8%,
  88% {
    transform: scaleY(1);
  }
  96%,
  100% {
    transform: scaleY(0);
  }
}

@keyframes gv-riga-appare {
  0%,
  8% {
    opacity: 0;
  }
  12%,
  88% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}

.gv-grafica__curva {
  fill: none;
  stroke: var(--gv-accent);
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-dasharray: 100;
  animation: gv-curva 9000ms ease-in-out infinite;
}

.gv-grafica__punta {
  fill: var(--gv-accent);
  animation: gv-punta 9000ms ease-in-out infinite;
}

@keyframes gv-curva {
  0%,
  34% {
    stroke-dashoffset: 100;
  }
  62%,
  90% {
    stroke-dashoffset: 0;
  }
  96%,
  100% {
    stroke-dashoffset: 100;
  }
}

@keyframes gv-punta {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.4);
  }
  66%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

/* ----------------------------------------------------------- gestionali
   I numeri delle tre schede si rifanno da soli, uno alla volta e in momenti diversi: la
   colonna delle cifre scorre dentro una finestra alta una riga. L'ultimo valore di ogni
   colonna è uguale al primo, così il giro si chiude senza salti. Intanto una riga accesa
   scende nella tabella e quattro valori cambiano lunghezza. */
.gv-grafica__cifre {
  font-family: var(--gv-font-display);
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  fill: var(--gv-text);
  animation: gv-cifre 8000ms cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

.gv-grafica__cifre--2 {
  animation-name: gv-cifre-2;
}

.gv-grafica__cifre--3 {
  animation-name: gv-cifre-3;
}

@keyframes gv-cifre {
  0%,
  22% {
    transform: translateY(0);
  }
  27%,
  55% {
    transform: translateY(-20px);
  }
  60%,
  90% {
    transform: translateY(-40px);
  }
  95%,
  100% {
    transform: translateY(-60px);
  }
}

@keyframes gv-cifre-2 {
  0%,
  10% {
    transform: translateY(0);
  }
  15%,
  44% {
    transform: translateY(-20px);
  }
  49%,
  78% {
    transform: translateY(-40px);
  }
  83%,
  100% {
    transform: translateY(-60px);
  }
}

@keyframes gv-cifre-3 {
  0%,
  34% {
    transform: translateY(0);
  }
  39%,
  66% {
    transform: translateY(-20px);
  }
  71%,
  92% {
    transform: translateY(-40px);
  }
  97%,
  100% {
    transform: translateY(-60px);
  }
}

.gv-grafica__riga {
  fill: color-mix(in srgb, var(--gv-accent) 30%, transparent);
  animation: gv-scende 8000ms cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

@keyframes gv-scende {
  0%,
  18% {
    transform: translateY(0);
  }
  24%,
  43% {
    transform: translateY(30px);
  }
  49%,
  68% {
    transform: translateY(60px);
  }
  74%,
  93% {
    transform: translateY(90px);
  }
  99%,
  100% {
    transform: translateY(0);
  }
}

/* I valori a destra si rifanno mentre la riga passa: cambiano lunghezza, non posizione. */
.gv-grafica__valore {
  transform-box: fill-box;
  transform-origin: left;
  animation: gv-valore 8000ms cubic-bezier(0.6, 0, 0.2, 1) infinite;
}

.gv-grafica__valore--2 {
  animation-name: gv-valore-2;
}

.gv-grafica__valore--3 {
  animation-name: gv-valore-3;
}

.gv-grafica__valore--4 {
  animation-name: gv-valore-4;
}

@keyframes gv-valore {
  0%,
  20% {
    transform: scaleX(1);
  }
  26%,
  100% {
    transform: scaleX(1.35);
  }
}

@keyframes gv-valore-2 {
  0%,
  45% {
    transform: scaleX(1);
  }
  51%,
  100% {
    transform: scaleX(0.7);
  }
}

@keyframes gv-valore-3 {
  0%,
  70% {
    transform: scaleX(1);
  }
  76%,
  100% {
    transform: scaleX(1.18);
  }
}

@keyframes gv-valore-4 {
  0%,
  95% {
    transform: scaleX(1);
  }
  99%,
  100% {
    transform: scaleX(1.5);
  }
}

/* --------------------------------------------------------- automazioni
   L'impulso percorre i fili veri, uno per uno: entra, si divide sui due rami, dentro ogni
   passaggio una barra si riempie mentre lavora, poi i due rami si ricongiungono e l'ultimo
   passaggio si accende. Ogni tratto è lungo 100 unità per dichiarazione, quindi il tratto
   acceso corre alla stessa velocità su tutti, corti o lunghi che siano. */
/* Come corre il tratto acceso, perché non resti appeso al filo quando ha finito.

   Il tratto è lungo 14 su 100 e lo stacco che lo segue 240: il disegno si ripete ogni 254
   unità, molto più del filo, quindi sul filo non può mai comparire un secondo tratto.
   Prima lo stacco era 100 e il disegno si ripeteva ogni 114: in attesa un pezzo acceso
   restava appoggiato all'inizio.

   Lo scorrimento va letto al contrario di come sembra: con scostamento s il tratto si vede
   da -s a -s+14. Quindi si parte da +20, con il tratto fermo appena prima del filo, e si
   arriva a -120, con il tratto appena oltre la fine. Prima andavo da 120 a -20, cioè nel
   verso sbagliato: a fine corsa il tratto ricadeva a un quinto del filo e restava lì
   acceso fino al giro dopo. I capi sono tagliati netti, non tondi: un capo tondo sporge di
   mezzo spessore e lascia un puntino anche a tratto uscito. */
.gv-grafica__impulso {
  fill: none;
  stroke: var(--gv-accent);
  stroke-width: 2.5;
  stroke-linecap: butt;
  stroke-dasharray: 14 240;
  stroke-dashoffset: 20;
  animation: gv-impulso-1 7000ms linear infinite;
}

.gv-grafica__impulso--2 {
  animation-name: gv-impulso-2;
}

.gv-grafica__impulso--3 {
  animation-name: gv-impulso-3;
}

.gv-grafica__impulso--4 {
  animation-name: gv-impulso-4;
}

.gv-grafica__impulso--5 {
  animation-name: gv-impulso-5;
}

@keyframes gv-impulso-1 {
  0% {
    stroke-dashoffset: 20;
  }
  12%,
  100% {
    stroke-dashoffset: -120;
  }
}

@keyframes gv-impulso-2 {
  0%,
  12% {
    stroke-dashoffset: 20;
  }
  28%,
  100% {
    stroke-dashoffset: -120;
  }
}

@keyframes gv-impulso-3 {
  0%,
  14% {
    stroke-dashoffset: 20;
  }
  30%,
  100% {
    stroke-dashoffset: -120;
  }
}

@keyframes gv-impulso-4 {
  0%,
  52% {
    stroke-dashoffset: 20;
  }
  70%,
  100% {
    stroke-dashoffset: -120;
  }
}

@keyframes gv-impulso-5 {
  0%,
  54% {
    stroke-dashoffset: 20;
  }
  72%,
  100% {
    stroke-dashoffset: -120;
  }
}

/* La barra del lavoro: si riempie quando l'impulso è arrivato, e si svuota alla fine. */
.gv-grafica__barra {
  fill: color-mix(in srgb, var(--gv-accent) 55%, transparent);
  transform-box: fill-box;
  transform-origin: left;
  animation: gv-barra 7000ms ease-in-out infinite;
}

.gv-grafica__barra--2 {
  animation-name: gv-barra-2;
}

@keyframes gv-barra {
  0%,
  28% {
    transform: scaleX(0);
  }
  48%,
  88% {
    transform: scaleX(1);
  }
  94%,
  100% {
    transform: scaleX(0);
  }
}

@keyframes gv-barra-2 {
  0%,
  30% {
    transform: scaleX(0);
  }
  50%,
  88% {
    transform: scaleX(1);
  }
  94%,
  100% {
    transform: scaleX(0);
  }
}

/* L'ultimo passaggio si accende quando i due rami sono arrivati. */
.gv-grafica__acceso--fine {
  animation: gv-arriva 7000ms ease-in-out infinite;
}

@keyframes gv-arriva {
  0%,
  70% {
    opacity: 0.25;
  }
  76%,
  92% {
    opacity: 1;
  }
  98%,
  100% {
    opacity: 0.25;
  }
}

/* Il bottone della prima pagina respira, quando la sua pagina è a schermo. */
.gv-grafica__pagina--1 .gv-grafica__acceso {
  animation: gv-respiro 3000ms ease-in-out infinite;
}

@keyframes gv-respiro {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* Con il movimento ridotto le grafiche restano, ferme e leggibili: ogni pezzo si ferma
   nello stato in cui si capisce. */
@media (prefers-reduced-motion: reduce) {
  .gv-grafica *,
  .gv-grafica *::before,
  .gv-grafica *::after {
    animation: none !important;
  }

  .gv-grafica__pagina--2,
  .gv-grafica__pagina--3,
  .gv-grafica__indirizzo--2,
  .gv-grafica__indirizzo--3 {
    opacity: 0;
  }

  .gv-grafica__curva {
    stroke-dashoffset: 0;
  }

  .gv-grafica__impulso {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.45;
  }

  .gv-grafica__barra {
    transform: scaleX(1);
  }
}

/* ============================================================ recensioni */

/* La firma ha due livelli invece di due righe uguali: chi ha scritto, con il corpo e il
   carattere del testo, e sotto — piccolo, in mono e più spento — ruolo, azienda e città.
   Prima erano due righe dello stesso maiuscolo, lunghe in modo diverso, e non si capiva
   quale fosse la più importante. */
.gv-card__meta {
  display: flex;
  align-items: center;
  gap: var(--gv-space-3);
  /* In fondo alla scheda, sempre: le citazioni sono lunghe in modo diverso e con un
     margine fisso le tre firme finivano a tre altezze diverse. */
  margin-top: auto;
  padding-top: var(--gv-space-5);
}

.gv-card__firma {
  display: grid;
  gap: 1px;
  min-width: 0;
}

/* La casella del marchio. Il logo del cliente ci sta dentro come maschera, non come
   immagine: tre marchi disegnati da tre mani diverse — uno in vettoriale, uno in PNG
   bianco, uno che non c'è — così stanno tutti nello stesso colore e nello stesso peso,
   e cambiano col tema della pagina invece di restare due macchie chiare sul chiaro.
   Dove il marchio manca restano le iniziali, che è quello che c'era prima. */
.gv-card__faccia {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: var(--gv-border) solid var(--gv-line-mid);
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  letter-spacing: 0.04em;
  color: var(--gv-text-dim);
}

/* I due marchi che abbiamo sono scritte lunghe, non simboli quadrati: dentro un
   quadrato da 52 si riducono a otto pixel di altezza e non si leggono più. Quindi
   per loro la casella diventa un rettangolo, e il marchio ci sta dentro in altezza
   con l'aria che gli serve. */
.gv-card__faccia--marlazzi,
.gv-card__faccia--ballerini {
  width: 104px;
}

/* La maschera sta su uno pseudo-elemento, non sulla casella: messa sulla casella
   ritagliava anche il suo bordo, e il marchio restava in aria mentre accanto le
   iniziali avevano ancora il loro riquadro. Iron Physique è un marchio tondo, e per
   lui la casella resta il quadrato da 52: il rettangolo serve solo alle scritte. */
.gv-card__faccia--marlazzi::before,
.gv-card__faccia--ballerini::before,
.gv-card__faccia--ironphysique::before {
  content: "";
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background-color: var(--gv-text-muted);
  -webkit-mask: var(--gv-marchio) no-repeat center / contain;
  mask: var(--gv-marchio) no-repeat center / contain;
}

.gv-card__faccia--marlazzi {
  --gv-marchio: url("../assets/clienti/ottica-marlazzi.svg");
}

.gv-card__faccia--ballerini {
  --gv-marchio: url("../assets/clienti/ballerini-auto.png");
}

/* Il file arriva come disco bianco col disegno nero: convertito in maschera, con
   l'alfa presa dalla luminanza, il nero resta e il bianco sparisce. */
.gv-card__faccia--ironphysique {
  --gv-marchio: url("../assets/clienti/iron-physique.png");
}

/* Nel quadrato piccolo il tondo ha bisogno di meno margine delle scritte: con venti
   pixel di aria diventava una moneta. */
.gv-card__faccia--ironphysique::before {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

.gv-card__chi {
  font-family: var(--gv-font-sans);
  font-size: var(--gv-type-body);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--gv-text);
}

/* Il ruolo su una riga sua, nel viola dell'accento. Prima stava in coda alla riga
   grigia dell'azienda — "Titolare, Ottica Marlazzi · Prato" — e nel mono maiuscolo
   piccolo di quella riga la parola più importante della firma era anche la meno
   visibile: chi legge una recensione vuole sapere prima di tutto chi parla. */
.gv-card__ruolo {
  font-family: var(--gv-font-sans);
  font-size: 14px; /* fra corpo e micro: il ruolo sta sotto al nome, sopra all'azienda */
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gv-accent);
}

.gv-card__dove {
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-micro);
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gv-text-dim);
}

/* Il collegamento alle recensioni, uno solo, sotto alla fila e al centro. */
.gv-recensioni__azione {
  display: flex;
  justify-content: center;
  margin-top: var(--gv-space-7);
}

.gv-recensioni__azione .gv-btn-line[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
  border-color: var(--gv-line-mid);
  color: var(--gv-text-dim);
}

/* ================================================================ colore */

/* Tre sezioni non avevano un filo di colore: passaggi, recensioni e domande erano tutte
   bianco su nero, e in mezzo a servizi, confronto e metodo sembravano spente. Il viola
   entra con la stessa regola di tutto il resto: un pezzo solo per sezione, e sempre su
   qualcosa che conta.

   Nei passaggi è il numero: prende il corpo e la luce dei numeri grandi, perché la
   sequenza è il contenuto della sezione. Nelle recensioni è la linea in cima alla scheda,
   che parte viola e si spegne verso destra, sopra alle cinque stelle. Nelle domande è il
   segno + della domanda aperta, che diventando = resta acceso. */

.gv-steps__item .gv-carousel__count {
  font-family: var(--gv-font-display);
  font-size: clamp(32px, 2.4vw, 52px);
  font-weight: 500;
  font-stretch: normal;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gv-text);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gv-steps__item .gv-carousel__count {
    background: var(--gv-sfumato);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

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

/* La linea in cima alla recensione: viola a sinistra, spenta a destra. Una riga di
   sfondo al posto del bordo, perché un bordo non sfuma. */
.gv-card--quote {
  border-top: 0;
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--gv-accent) 75%, transparent) 0%,
    var(--gv-line-mid) 42%,
    var(--gv-line-mid) 100%
  );
  background-size: 100% var(--gv-border);
  background-repeat: no-repeat;
  background-position: top left;
}

/* Le stelle della recensione, sopra alla citazione. */
.gv-card__voto {
  margin-bottom: var(--gv-space-1);
}

.gv-card__voto .gv-stelle__fila svg {
  width: 13px;
  height: 13px;
}

/* La domanda aperta tiene il segno acceso. */
.gv-faq__item[open]:not([data-expanded]) .gv-faq__toggle,
.gv-faq__item[data-expanded="true"] .gv-faq__toggle {
  color: var(--gv-accent);
}

/* ============================================================ file di schede */

/* Le recensioni avevano un'altezza minima di 440px, pensata per quattro schede strette in
   carosello: con tre schede larghe e citazioni corte restava un buco fra la citazione e la
   firma. L'altezza ora la fa il contenuto, e nella griglia le tre schede si pareggiano da
   sole sulla più alta. */
.gv-card--quote {
  min-height: 0;
}


/* La griglia delle schede ha quattro colonne, quante sono i servizi. Le recensioni sono
   tre e lasciavano un quarto di pagina vuoto, sotto una testata centrata: qui le colonne
   se le conta la griglia da sola, tante quante ne entrano da 260px in su, e le colonne
   vuote spariscono. Così tre schede riempiono la riga, e se un giorno diventano quattro
   la riga si riordina senza toccare niente. */
@media (min-width: 640px) {
  .gv-cards--tre {
    /* Fra 640 e 1024 le tre schede in riga diventavano due più una sola, spaiata a
       sinistra. Meglio una colonna sola, larga, al centro: la recensione si legge
       invece di essere stretta in un terzo di riga. */
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .gv-cards--tre {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

/* Le schede delle recensioni hanno più aria dentro delle schede servizio: sono l'unico
   punto in cui qualcun altro parla al posto nostro. */
.gv-card--quote {
  padding: var(--gv-space-5);
}

/* La citazione è quello che si legge per intero: sale al gradino della lettura, e la
   firma sotto torna al corpo. Prima erano tutte e due a 17 e non si capiva quale delle
   due fosse il contenuto. */
.gv-card--quote .gv-card__quote {
  font-size: var(--gv-type-lettura);
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ============================================================= confronto */

/* La colonna Gravity non è più un velo viola piatto. Dietro alle sue celle sta una luce
   sola per tutta la colonna — l'ultima delle quattro, larghe uguali, quindi l'ultimo
   quarto del pannello — che sale dal basso e si spegne verso l'alto, come la luce dei
   numeri. Sopra di lei qualche punto si accende e si spegne a tempi diversi, come le luci
   delle città sulla Terra dell'hero. Sta sotto al testo, che non cambia colore, e non si
   tocca. Con il movimento ridotto i punti restano accesi, fermi. */
.gv-compare__panel {
  position: relative;
  isolation: isolate;
}

.gv-compare__luce {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 25%;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--gv-accent) 6%, transparent) 0%,
      color-mix(in srgb, var(--gv-accent) 12%, transparent) 45%,
      color-mix(in srgb, var(--gv-accent) 26%, transparent) 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      var(--gv-compare-divider) 12%,
      var(--gv-compare-divider) 88%,
      transparent 100%
    );
  background-size: 100% 100%, var(--gv-border) 100%;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, no-repeat;
}

/* Due sorgenti sole, larghe e sfumate, che scorrono lungo la colonna.

   Prima erano sei punti divisi in due gruppi, e ogni gruppo si accendeva e si spegneva
   tutto insieme passando dal 20% al 100%: sei lampadine che lampeggiano a coppie. Due
   cose lo tradivano. La prima è che l'opacità stava sullo strato, non sul singolo punto,
   quindi i tre punti di un gruppo battevano all'unisono — e tre luci che pulsano nello
   stesso istante non sono una luce, sono un interruttore. La seconda è che ogni punto
   andava dal colore pieno al trasparente in un solo passaggio: con l'alfa interpolata in
   linea si vede il bordo, e il punto si stacca dal fondo invece di sciogliercisi.

   Adesso: due sorgenti invece di sei, con la sfumatura in quattro fermate perché il
   bordo non si veda, larghe più della colonna e sbordanti sopra e sotto, e il movimento
   è una deriva lenta lungo la colonna. L'opacità respira fra 0,72 e 1 invece che fra 0,2
   e 1. Una luce che si sposta è una luce; una che lampeggia è una lampadina. */
.gv-compare__luce::before,
.gv-compare__luce::after {
  content: "";
  position: absolute;
  /* Sbordano da tutti i lati: il bordo della sorgente non deve mai entrare in scena. */
  inset: -34% -24%;
}

.gv-compare__luce::before {
  background: radial-gradient(
    58% 20% at 42% 32%,
    color-mix(in srgb, var(--gv-accent) 30%, transparent) 0%,
    color-mix(in srgb, var(--gv-accent) 15%, transparent) 36%,
    color-mix(in srgb, var(--gv-accent) 5%, transparent) 64%,
    transparent 100%
  );
  animation: gv-compare-deriva 19s ease-in-out infinite;
}

.gv-compare__luce::after {
  background: radial-gradient(
    44% 15% at 60% 70%,
    color-mix(in srgb, var(--gv-accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--gv-accent) 10%, transparent) 40%,
    color-mix(in srgb, var(--gv-accent) 3%, transparent) 68%,
    transparent 100%
  );
  animation: gv-compare-deriva 27s ease-in-out -11s infinite reverse;
}

/* Trasla e respira insieme: il massimo di luce capita a metà corsa, non a scatti. */
@keyframes gv-compare-deriva {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, -5%, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(0, 7%, 0);
  }
}

/* Il velo piatto e il divisorio pieno delle celle lasciano il posto alla luce. */
.gv-compare__table .gv-compare__col--gravity {
  background: none;
  border-left-color: transparent;
}

/* Sotto i 1000px la tabella diventa schede: lì la luce sta dietro alla riga Gravity di
   ogni criterio, più piccola, e ogni riga la accende in un momento suo. */
@media (max-width: 999px) {
  .gv-compare__luce {
    display: none;
  }

  .gv-compare__option--gravity .gv-compare__option-value {
    position: relative;
    isolation: isolate;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--gv-accent) 4%, transparent) 0%,
      color-mix(in srgb, var(--gv-accent) 18%, transparent) 100%
    );
  }

  /* Una sorgente sola per riga, con la stessa sfumatura lunga della colonna. */
  .gv-compare__option--gravity .gv-compare__option-value::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -40% -20%;
    background: radial-gradient(
      46% 42% at 38% 46%,
      color-mix(in srgb, var(--gv-accent) 24%, transparent) 0%,
      color-mix(in srgb, var(--gv-accent) 11%, transparent) 38%,
      color-mix(in srgb, var(--gv-accent) 3%, transparent) 66%,
      transparent 100%
    );
    animation: gv-compare-deriva 21s ease-in-out infinite;
  }

  /* Righe vicine sfasate, così la colonna non pulsa tutta allo stesso tempo. */
  .gv-compare__criterion:nth-child(2n) .gv-compare__option-value::before {
    animation-duration: 27s;
    animation-delay: -9s;
  }

  .gv-compare__criterion:nth-child(3n) .gv-compare__option-value::before {
    animation-duration: 24s;
    animation-delay: -16s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gv-compare__luce::before,
  .gv-compare__luce::after,
  .gv-compare__option--gravity .gv-compare__option-value::before {
    animation: none;
    opacity: 0.55;
  }
}

/* Il peso sul bilancio, in fondo alle colonne: cinque simboli, accesi quanti ne pesa.
   Niente cifre: il confronto è sull'ordine di grandezza, e una cifra inventata varrebbe
   meno di niente. Chi legge con un lettore di schermo sente "cinque su cinque". */
.gv-costo {
  display: inline-flex;
  gap: 0.14em;
  font-size: var(--gv-type-title);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gv-text-ghost);
}

.gv-costo__segno[data-acceso] {
  color: var(--gv-text);
}

/* La riga dei simboli chiude la tabella: il numero sta più in basso del testo delle altre
   righe, quindi le celle si allineano in fondo. */
.gv-compare__costi > * {
  vertical-align: bottom;
}

/* La nota sotto al pannello: come si leggono i simboli. */
.gv-compare__nota {
  margin-top: var(--gv-space-4);
  color: var(--gv-text-faint);
  text-transform: none;
  letter-spacing: 0;
  max-width: 60em;
}

/* =============================================================== metodo */

/* Una griglia sola invece di tre fasce. A sinistra il titolo, il testo e la riga di dove
   lavoriamo, divisi da linee sottili e distanziati fino in fondo alla colonna; a destra la
   scheda quadrata dei risultati, alta quanto la colonna. La sezione non è più alta uno
   schermo intero per forza: prima il contenuto ci galleggiava dentro e restavano vuoti
   grandi come il contenuto stesso. Sotto i 900px la scheda torna sotto al testo. */
.gv-method {
  min-height: 0;
  justify-content: flex-start;
  gap: 0;
}

.gv-method__griglia {
  display: grid;
  gap: var(--gv-space-7);
}

.gv-method__colonna {
  display: grid;
  align-content: space-between;
  gap: var(--gv-space-6);
}

/* Il testo del metodo è la frase che regge la sezione: sta un gradino sopra il lead e
   prende tutta la colonna, senza misura corta che lasci mezza riga vuota a destra. */
.gv-method__text {
  max-width: none;
  font-size: clamp(var(--gv-type-lead), 1.5vw, 34px);
}

/* Le due colonne partono da 1200px, non da 900. Fra i 900 e i 1100 la colonna della
   scheda scendeva sotto i 400px: il quadrato diventava troppo piccolo per il suo contenuto
   e la fonte del risultato finiva sopra alla linea del piede. Sotto i 1200 la scheda sta
   da sola, sotto al testo, dove ha 520px e ci sta comoda. */
@media (min-width: 1200px) {
  .gv-method__griglia {
    grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 720px);
    gap: clamp(40px, 4.5vw, 104px);
  }
}

/* La scheda dei risultati: quadrata, larga quanto la pagina sui telefoni, fino a 520px sul
   tablet e fino a 640px sugli schermi larghi. È un contenitore: il numero si misura sulla
   sua larghezza. In alto l'occhiello e i due controlli, al centro un risultato alla volta,
   in fondo la linea di avanzamento, grigia, e il contatore. */
.gv-risultati {
  container-type: inline-size;
  width: 100%;
  max-width: none;
}

/* Sui telefoni la scheda non è più quadrata: con la fonte del risultato su due righe il
   quadrato non basta, e il piede finiva sopra al testo. Qui l'altezza la fa il contenuto. */
@media (max-width: 639px) {
  .gv-risultati {
    aspect-ratio: auto;
  }
}

/* Fra i 640 e i 1200px la scheda sta da sola nella colonna e si ferma a 520px: senza
   margine automatico restava appiccicata a sinistra con un terzo di riga vuoto a destra,
   che su un tablet è la prima cosa che si nota. */
@media (min-width: 640px) {
  .gv-risultati {
    width: min(100%, 520px);
    margin-inline: auto;
  }
}

/* Accanto al testo la scheda riempie la sua colonna; sotto i 1200px sta da sola e torna
   larga al massimo 520px. */
@media (min-width: 1200px) {
  .gv-risultati {
    width: 100%;
    max-width: none;
  }
}

.gv-risultati__voci {
  display: grid;
  align-items: center;
  min-height: 0;
}

.gv-risultati__voce {
  grid-area: 1 / 1;
}

/* Il risultato che arriva sale di poco e si accende. */
.gv-risultati__voce[data-entra] {
  animation: gv-risultato-entra 520ms var(--gv-ease) both;
}

@keyframes gv-risultato-entra {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.gv-results__value,
.gv-results__text,
.gv-results__source {
  display: block;
}

/* Il numero è grande quanto la scheda lo lascia entrare, fino a 280px. Le cifre sono
   tabulari sempre, non solo mentre conta: con le cifre tabulari "1,7 mln" è largo 3,1 volte
   il corpo invece di 2,7, quindi con il vecchio 2,8esimo il numero sforava la scheda
   proprio durante il conteggio, e alla fine si spostava passando da tabulari a
   proporzionali. Ora il corpo non supera un 3,15esimo della larghezza e le cifre non
   cambiano mai passo. Il margine negativo compensa lo spazio a sinistra delle cifre, che a
   questo corpo sembrerebbero rientrate rispetto alle righe sotto. */
.gv-results__value {
  margin: 0 0 var(--gv-space-4) -0.015em;
  font-variant-numeric: tabular-nums;
  font-size: min(280px, 100cqi / 3.15);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--gv-text);
}

/* La luce dei numeri: il colore del testo in cima, l'ultravioletto alla base. Dove il
   testo non accetta uno sfondo, o con i colori forzati del sistema, il numero resta pieno. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gv-results__value {
    background: var(--gv-sfumato);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

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

.gv-results__text {
  font-size: var(--gv-type-lead);
  line-height: var(--gv-leading-lead);
  letter-spacing: -0.01em;
  color: var(--gv-text-body);
}

.gv-results__source {
  margin-top: var(--gv-space-2);
  font-weight: 500;
  font-stretch: var(--gv-type-label-stretch);
  font-size: var(--gv-type-small);
  line-height: var(--gv-leading-label);
  text-transform: uppercase;
  letter-spacing: var(--gv-type-label-tracking);
  color: var(--gv-text-dim);
}

.gv-risultati__voce--vuota .gv-results__source {
  margin-top: 0;
  color: var(--gv-text-ghost);
}

.gv-risultati__piede {
  display: grid;
  gap: var(--gv-space-3);
}

/* La linea di avanzamento scandisce il tempo di ogni risultato; con il puntatore o il
   focus sulla scheda si ferma dove si trova. */
.gv-risultati__avanzamento {
  position: relative;
  display: block;
  height: 1px;
  overflow: hidden;
  background: var(--gv-line-mid);
}

.gv-risultati__avanzamento::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gv-text-dim);
  transform: scaleX(0);
  transform-origin: left center;
}

[data-risultati-gira="on"] .gv-risultati__avanzamento::after {
  animation: gv-risultati-avanzamento var(--gv-risultati-tempo, 5000ms) linear forwards;
}

[data-risultati-gira="on"][data-risultati-ferma="true"] .gv-risultati__avanzamento::after {
  animation-play-state: paused;
}

@keyframes gv-risultati-avanzamento {
  to {
    transform: scaleX(1);
  }
}

/* ============================================================== chiusura */

/* Sotto al bottone c'erano due righe uguali: la nota e i contatti, stesso corpo e stesso
   grigio. I contatti sono la cosa da leggere e da toccare, quindi salgono al corpo dei
   titoli delle voci, mentre "oppure scrivi a" e "chiama" restano parole di servizio,
   piccole e in mono. */
.gv-cta__note {
  display: grid;
  justify-items: center;
  gap: var(--gv-space-3);
}

.gv-cta__nota {
  color: var(--gv-text-dim);
}

/* I due modi diretti sono due tasti, non una riga di testo: si toccano col dito e si
   vedono da lontano. Sotto i 480px vanno uno sopra l'altro, larghi uguali. */
.gv-cta__diretti {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gv-space-3);
}

.gv-cta__diretto {
  height: auto;
  min-height: var(--gv-touch);
  padding-inline: var(--gv-space-4);
  font-family: var(--gv-font-mono);
  font-size: var(--gv-type-small);
  letter-spacing: 0.04em;
  text-transform: none;
  border-color: var(--gv-line-strong);
}

.gv-cta__diretto:hover {
  border-color: var(--gv-text);
  background: var(--gv-veil);
}

.gv-cta__diretto .gv-icon {
  color: var(--gv-text-dim);
}

/* Dentro a un tasto la sottolineatura dei contatti non serve: il riquadro dice già che si
   tocca. */
.gv-cta__note .gv-cta__diretto,
.gv-cta__note .gv-cta__diretto span {
  text-decoration: none;
}

@media (max-width: 479px) {
  .gv-cta__diretti {
    display: grid;
    width: 100%;
  }

  .gv-cta__diretto {
    justify-content: center;
  }
}

/* ============================================================== domande */

/* Le domande stavano larghe quanto la pagina, ma la risposta si fermava a metà: su uno
   schermo largo restava vuota tutta la destra. Ora la colonna delle domande è larga quanto
   serve a leggerla e sta al centro, come la testata sopra, e la risposta la riempie. */
@media (min-width: 1200px) {
  .gv-faq {
    max-width: 1120px;
    margin-inline: auto;
  }
}

.gv-faq__a {
  max-width: none;
}

/* ================================================================ cielo */

/* Sul fondo di tutta la pagina, sotto a main: le stelle della chiusura e le stelle
   cadenti. Col chiaro si spegne insieme ai colori. */
.gv-cielo {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: calc(1 - var(--gv-tema));
}

/* ================================================================= luna */

/* Sopra al titolo della chiusura si apre lo spazio dove la Luna si ferma. La tela sta
   dietro ai contenuti della sezione; la sua posizione e la sua scala le scrive lo script
   a ogni scorrimento. */
.gv-cta {
  /* Il diametro della Luna cresce con lo schermo: 170 px sui telefoni, 245 a 1440, fino a
     320 sugli schermi larghi. Resta sempre molto più piccola della Terra dell'hero. */
  --gv-luna: clamp(170px, 17vw, 320px);
  position: relative;
  padding-top: calc(var(--gv-section-top) + var(--gv-luna) + var(--gv-space-8));
}

.gv-cta > :not(.gv-luna) {
  position: relative;
  z-index: 1;
}

.gv-luna {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: calc(var(--gv-luna) * 2);
  height: calc(var(--gv-luna) * 2);
  margin-left: calc(var(--gv-luna) * -1);
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}

.gv-luna[data-luna="on"] {
  visibility: visible;
}

/* =============================================================== footer */

/* Due piani nel cielo della chiusura, senza la linea a tutta pagina in cima: le stelle
   continuano dalla chiusura. In alto tre colonne a sinistra — contatti, link del sito,
   dati dell'azienda — tutte che partono dalla stessa riga, con la linea sopra come i
   risultati del metodo e tutte le voci allo stesso corpo. Sotto, il marchio a destra,
   all'altezza delle ultime voci delle colonne, e i crediti delle mappe a sinistra.
   Una colonna per riga sui telefoni, tre in fila dal tablet; da 1000px le colonne
   restano strette a sinistra e il marchio prende il posto che avanza. */
.gv-footer {
  border-top: 0;
  padding-block: var(--gv-space-8) max(var(--gv-space-6), env(safe-area-inset-bottom));
}

.gv-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gv-space-6) var(--gv-gutter);
}

.gv-footer__col {
  display: grid;
  align-content: start;
  gap: var(--gv-space-3);
  padding-top: var(--gv-space-3);
  border-top: var(--gv-border) solid var(--gv-line-mid);
}

.gv-footer__col h2 {
  margin-bottom: 0;
}

/* Le voci, tutte uguali: al corpo del testo, scritte come nel testo, chiare al passaggio.
   Contatti compresi: erano al corpo di un titolo e sbilanciavano la fascia. */
.gv-footer__col li {
  padding-block: 3px;
  font-weight: 400;
  font-stretch: 100%;
  font-size: var(--gv-type-body);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--gv-text-body);
}

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

/* I dati dell'azienda si leggono, non si cliccano: un tono più basso delle altre voci. */
.gv-footer__col--info li {
  color: var(--gv-text-dim);
}

/* L'icona del profilo chiude la colonna dei contatti, grande quanto un titolo di voce:
   è l'unico segno del footer, e se è piccolo non lo vede nessuno. Sta sul bordo della
   colonna, senza il quadrato intorno. Senza indirizzo resta ferma. */
.gv-footer__social {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--gv-text-body);
}

.gv-footer__social .gv-icon {
  width: 34px;
  height: 34px;
}

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

/* Fra il telefono e l'icona resta l'aria di una riga. */
.gv-footer__col li:has(.gv-footer__social) {
  padding-top: var(--gv-space-3);
}

.gv-footer__social[aria-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

/* Il piano di sotto: crediti a sinistra, marchio a destra. Sui telefoni il marchio va a
   capo e resta a destra. */
.gv-footer__coda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gv-space-6);
  margin-top: var(--gv-space-8);
}

.gv-footer__crediti {
  max-width: 44em;
  font-size: var(--gv-type-small);
  line-height: var(--gv-leading-label);
  color: var(--gv-text-faint);
  text-wrap: pretty;
}

/* Il marchio, molto più piccolo di prima: una firma in fondo alla pagina, non un'insegna.
   È acceso dall'alto, come la Luna sopra: il colore del testo scende verso la base. Il
   loader, al passaggio sul simbolo, sfuma allo stesso modo. */
.gv-footer__logo {
  width: clamp(150px, 15vw, 260px);
  max-width: 100%;
  margin-left: auto;
}

.gv-footer__word,
.gv-footer__symbol {
  background: linear-gradient(
    180deg,
    var(--gv-text) 12%,
    color-mix(in srgb, var(--gv-text) 34%, transparent) 100%
  );
}

.gv-footer__loader {
  -webkit-mask: linear-gradient(180deg, #000 12%, rgba(0, 0, 0, 0.34) 100%);
  mask: linear-gradient(180deg, #000 12%, rgba(0, 0, 0, 0.34) 100%);
}

@media (min-width: 640px) {
  .gv-footer {
    padding-top: var(--gv-space-10);
  }

  .gv-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Da 1000px le tre colonne coprono la pagina intera, con più aria fra l'una e l'altra:
   il marchio resta in fondo a destra, sotto di loro. */
@media (min-width: 1000px) {
  .gv-footer__grid {
    gap: var(--gv-space-7) var(--gv-space-8);
  }

  .gv-footer__coda {
    margin-top: var(--gv-space-7);
    align-items: center;
  }
}

/* ============================================================ interruttore */

/* L'icona ripete la scena: l'orizzonte e il sole. Di notte il sole spunta appena
   sopra la linea, come nell'hero; col chiaro sale con i raggi, nello stesso tempo
   dei colori. */
.gv-tema {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--gv-text-dim);
  transition: color var(--gv-dur-hover) var(--gv-ease);
}

.gv-tema:hover,
.gv-tema[aria-pressed="true"] {
  color: var(--gv-text);
}

.gv-tema__icon {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.gv-tema__sole {
  fill: currentColor;
  transform: translateY(2.4px);
  transition: transform var(--gv-tema-durata) var(--gv-tema-curva);
}

/* I raggi escono dal sole quando è sopra la linea: senza, il mezzo disco sull'arco
   si leggerebbe come l'icona di un profilo. */
.gv-tema__raggi {
  opacity: 0;
  transform: translateY(2px) scale(0.6);
  transform-origin: 12px 12.6px;
  transition:
    opacity var(--gv-tema-durata) var(--gv-tema-curva),
    transform var(--gv-tema-durata) var(--gv-tema-curva);
}

[data-tema="chiaro"] .gv-tema__sole {
  transform: none;
}

[data-tema="chiaro"] .gv-tema__raggi {
  opacity: 1;
  transform: none;
}

.gv-tema__terra,
.gv-tema__raggi {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Nell'hero sta sotto al marchio, allineato al suo stesso margine: l'icona è dentro un
   quadrato di 44px e il margine negativo la porta sul bordo della pagina. Sta in disparte,
   del colore delle note, e si accende solo al passaggio. */
.gv-tema {
  position: absolute;
  z-index: 2;
  top: var(--gv-space-3);
  left: calc(var(--gv-pad) - 10px);
  width: auto;
  padding-right: var(--gv-space-2);
  gap: 2px;
  grid-auto-flow: column;
  color: var(--gv-text-dim);
}

/* La parola accanto all'icona dice cosa succede a premerla: di notte porta l'alba, col
   sole alto riporta la notte. È decorazione per chi legge con gli occhi — il nome del
   tasto per i lettori di schermo resta "Modalità chiara", con il suo stato. */
.gv-tema__etichetta {
  font-weight: 500;
  font-stretch: var(--gv-type-label-stretch);
  font-size: var(--gv-type-small);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--gv-type-label-tracking);
}

:root:not([data-tema="chiaro"]) [data-tema-notte],
:root[data-tema="chiaro"] [data-tema-alba] {
  display: none;
}

/* =============================================================== schede */

/* Un solo sistema per le schede, dopo il confronto fra tre prove. La scheda piena — velo,
   sfocatura e cornice — resta dove c'è qualcosa da inquadrare: le immagini dei servizi, le
   righe dei progetti con la loro anteprima, la tabella del confronto e il dato dei
   risultati. Dove invece c'è solo testo — i passaggi di Come funziona, le recensioni e le
   domande — la scheda diventa una colonna con una linea sottile in cima, e le domande
   righe fra due linee: il riquadro ripetuto in ogni sezione dava alla pagina un ritmo
   piatto, e non distingueva più niente.

   Le tre voci qui sotto non hanno più .gv-frost nel markup: la linea e il margine interno
   sono i loro, e il materiale resta scritto in un posto solo, base.css. */

.gv-card--quote,
.gv-steps__item {
  padding: var(--gv-space-4) 0 0;
  border-top: var(--gv-border) solid var(--gv-line-mid);
}

/* Le domande sono una fila continua: ogni riga porta la sua linea in cima, l'ultima
   chiude anche sotto. Il testo parte dal bordo della colonna e il + resta a destra. */
.gv-faq__list {
  gap: 0;
}

.gv-faq__item {
  border-top: var(--gv-border) solid var(--gv-line-mid);
}

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

.gv-faq__q {
  padding-left: 0;
  padding-right: calc(var(--gv-space-4) + var(--gv-type-title));
}

.gv-faq__toggle {
  right: 0;
}

.gv-faq__a {
  padding-inline: 0;
}