/* GZ PREMIUM PLUS · 20/09/2026
   Il trattamento arriva dove l'app vive davvero.

   PERCHE' ESISTE. gz-premium.css e' caricato da 23 pagine e stila
   .gz-card / .gzc-card / .gzs-card / .card. Misurato il 20/09: nelle pagine
   vere quelle classi sono poche e in sei pagine non ci sono proprio. Le
   superfici che una persona guarda tutto il giorno si chiamano .gz-sez (14
   per pagina), le voci del menu .gzs-voce (21), le mattonelle .gzs-tool, i
   numeri .gz-num. Un foglio caricato ovunque non e' un design applicato
   ovunque: lo diventa dove trova i ganci che stila.

   COSA TOCCA. Solo la pelle: colore, ombra, spaziatura, tipografia, moto.
   Niente funzioni, niente onclick, niente id, niente struttura.

   IL MOTO SI SPEGNE DAVVERO. Tutto il movimento sta sotto
   html[data-gz-premium="on"]:not([data-gz-motion="off"]) e sotto
   prefers-reduced-motion. Chi tocca «Movimento ridotto» resta con la grafica
   e senza animazioni.

   NIENTE SPARISCE SE IL JS NON PARTE. Le animazioni d'ingresso partono da
   opacita' .4, mai da 0, e solo sugli elementi timbrati da gz-premium-plus.js:
   se quel file non gira, la pagina resta esattamente com'era.
*/

html[data-gz-premium="on"] {
  --gzpp-verde: #0f7a4c;
  --gzpp-verde-chiaro: #17a56a;
  --gzpp-blu: #1c6fa8;
  --gzpp-oro: #c8a44a;
  --gzpp-bordo: #d9e5de;
  --gzpp-inchiostro: #16302a;
  --gzpp-tenue: #5b7268;
  --gzpp-velo: #ffffffcc;
  --gzpp-alzata: 0 14px 38px rgba(18, 52, 40, .10);
}

/* ── LE SEZIONI · la superficie piu' vista dell'app ───────────────────── */
html[data-gz-premium="on"] [data-gzp-sez] {
  position: relative;
  border-radius: 18px;
  transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
html[data-gz-premium="on"] [data-gzp-sez] > :is(h2, h3, .gz-h2) {
  text-wrap: balance;
}
@media (hover: hover) and (pointer: fine) {
  html[data-gz-premium="on"] [data-gzp-sez]:hover {
    border-color: #b3d5c3;
    box-shadow: var(--gzpp-alzata);
  }
}

/* ── IL MENU DI SINISTRA · si guarda tutto il giorno ──────────────────── */
html[data-gz-premium="on"] .gzs-voce {
  position: relative;
  border-radius: 10px;
  transition: background-color .16s ease, color .16s ease;
}
html[data-gz-premium="on"] .gzs-voce::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gzpp-verde-chiaro), var(--gzpp-blu));
  transform: translateY(-50%);
  transition: height .18s ease;
}
html[data-gz-premium="on"] .gzs-voce.is-active::before { height: 62%; }
html[data-gz-premium="on"] .gzs-voce.is-active {
  box-shadow: inset 0 0 0 1px #ffffff14, 0 2px 14px #0a3a2733;
}
@media (hover: hover) and (pointer: fine) {
  html[data-gz-premium="on"] .gzs-voce:hover::before { height: 40%; }
}

/* ── LE MATTONELLE DEGLI STRUMENTI ────────────────────────────────────── */
html[data-gz-premium="on"] [data-gzp-tool] {
  border-radius: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html[data-gz-premium="on"] [data-gzp-tool] .gzs-tool-go {
  transition: transform .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  html[data-gz-premium="on"]:not([data-gz-motion="off"]) [data-gzp-tool]:hover {
    transform: translateY(-2px);
    box-shadow: var(--gzpp-alzata);
  }
  html[data-gz-premium="on"] [data-gzp-tool]:hover .gzs-tool-go { transform: translateX(3px); }
}

/* ══ SI LEGGE. ORDINE DELLA DIREZIONE DEL 20/09, ore 12 ═══════════════════
   «Numeri KPI troppo piccoli e intestazioni tagliate. C'e' spazio: non serve
   miniaturizzare niente. Deve adattarsi il layout al testo leggibile, non la
   vista a un testo minuscolo.»

   MISURATO PRIMA DI SCRIVERE, sulla dashboard a 1440 px:
     kicker «IL FLUSSO DI OGGI» ....... 10 px
     numero del passo ................ 12 px
     titolo della voce ............... 12,5 px
     descrizione sotto ............... 11 px
     titolo di pagina ................ 35,8 px
   Il corpo del documento e' a 16 px: quei testi stanno a meno di due terzi.

   QUESTE MISURE VANNO SUI COMPONENTI NOMINATI, non su tutta la pagina: una
   regola universale sul testo romperebbe tavole, stampe e moduli. E niente
   zoom, niente transform: scale. Se non ci stanno, vanno a capo le card, non
   si rimpiccioliscono i numeri.                                            */

/* i contenitori dei quadrotti, chiamati per nome */
html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) {
  --gzpp-numero: clamp(32px, 2.6vw, 40px);
}

/* IL NUMERO GRANDE: 36-40 px su schermo largo, 28-32 sul telefono */
html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) :is(b, .gz-num, .cifra, .num, strong.gz-kpi-valore) {
  font-size: var(--gzpp-numero);
  line-height: 1.08;
  font-variant-numeric: tabular-nums;
}

/* L'ETICHETTA: mai sotto i 14, e leggibile per intero */
html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) :is(span, .gzs-kicker, .gz-kicker, .gzd-label) {
  font-size: 14px;
  line-height: 1.35;
}
html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) strong {
  font-size: 16px;
  line-height: 1.3;
}
/* la riga di spiegazione sotto il numero: testo operativo, 16 px */
html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) :is(small, .gz-sotto, .gzd-help) {
  font-size: 15px;
  line-height: 1.4;
}

/* IL TITOLO DELLA PAGINA RESTA SOPRA A TUTTO. Se i numeri salgono a 40 e il
   titolo resta a 35,8, il titolo non comanda piu' la pagina. */
html[data-gz-premium="on"] :is(.gzs-h1, [data-screen-label] h1, [data-gzp-heading]) {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.12;
}

/* I TESTI OPERATIVI, I CAMPI E I PULSANTI: 16 px, che e' la misura del corpo */
html[data-gz-premium="on"] [data-screen-label] :is(input, select, textarea, button, .btn, .gz-cmd) {
  font-size: 16px;
}
html[data-gz-premium="on"] :is(.gzs-saluto-sotto, .gz-prosa, .gz-sez > p) {
  font-size: 16px;
  line-height: 1.5;
}

/* LE LETTERE TAGLIATE. Non si mette overflow:visible su tutta l'app: si
   toglie il ritaglio SOLO dove il testo e' una riga sola dentro una scatola
   stretta, cioe' i quadrotti e le loro intestazioni. Il taglio nasce di li':
   una riga alta 10 px in una scatola calcolata su un carattere piu' piccolo. */
html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) :is(b, strong, span, small) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  min-width: 0;
}

/* SUL TELEFONO IL NUMERO RESTA GRANDE: 28-32 px. Se non ci stanno quattro
   colonne, vanno a capo le card. */
@media (max-width: 640px) {
  html[data-gz-premium="on"] :is(.gzs-day-strip, .gz-kpi, .gz-kpi3, .gz-kpi4, .gzd-metrics, [data-gz-kpi]) {
    --gzpp-numero: clamp(28px, 8vw, 32px);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* ── I NUMERI · si leggono in colonna, quindi cifre a passo fisso ─────── */
html[data-gz-premium="on"] [data-gzp-num],
html[data-gz-premium="on"] :is(.gz-num, .cifra, .num) {
  font-variant-numeric: tabular-nums;   /* incolonna le cifre, non le rimpicciolisce */
}

/* ── GLI STATI VUOTI · invitano invece di scusarsi ────────────────────── */
html[data-gz-premium="on"] [data-gzp-empty] {
  border: 1px dashed #bdd6c7;
  border-radius: 15px;
  background:
    linear-gradient(#ffffff88, #ffffff88),
    radial-gradient(ellipse at 50% 0%, #17a56a12, transparent 62%);
  color: var(--gzpp-tenue);
}

/* ══ IL BLOCCO DEGLI ASSISTENTI CHE L'APP HA GIA' ═════════════════════════
   `.gzs-people` con la testata «Il supporto giusto.» e' il riferimento che la
   Direzione ha mandato il 20/09 dicendo «cosi' si». Non andava una cosa sola,
   ed era una misura: la griglia aveva DUE colonne (222 px + 222 px) e le
   persone sono TRE, quindi la terza restava sola su una riga e si vedeva
   piccola e diversa dalle altre. Qui si mettono tutte sulla stessa riga, in
   media dimensione, col volto in cima come nelle prime due della fotografia. */
/* 20/09/2026 · RIPORTATE A MISURA, su segnalazione della Direzione: «sono
   giganti, non erano cosi'» e «non sfigurare l'applicazione per misure
   esagerate». Le card le avevo allargate io a 190px minimi col volto che
   riempiva tutta la cima: su uno schermo grande diventavano ritratti enormi
   in fila, e il resto della pagina spariva sotto. L'ordine era «media
   dimensione», e 190 non e' media.
   Da 190px a 150px di larghezza minima, e il volto smette di allargarsi
   all'infinito: si ferma a 96px, che e' la misura di un ritratto in una
   scheda, non di una fotografia. Il testo non si tocca: non era lui il
   problema, e rimpicciolirlo e' l'errore che ho gia' fatto una volta. */
/* IL TETTO STA SULLA COLONNA, NON SULL'IMMAGINE.
   Avevo provato a fermare il volto con un `max-width` sull'immagine e non
   vinceva. La ragione e' piu' semplice di come la stavo cercando: con
   `1fr` la colonna si prende tutta la riga disponibile, e il volto, che e'
   largo quanto la sua card, la segue. Su uno schermo largo tre card
   diventano tre ritratti da quasi cinquecento pixel: «sono enormi», ed e'
   vero. Si mette un tetto alla COLONNA e il resto viene da se'.
   Via di mezzo chiesta dalla Direzione: non 1fr (enormi) e non 96px
   (francobolli). Colonna fra 150 e 240 pixel, volto poco piu' di 200:
   si riconosce la persona senza che la pagina diventi un album. */
.gzs-people {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 240px)) !important;
  justify-content: start !important;   /* non si allargano per riempire la riga */
  gap: 12px !important;
  align-items: stretch !important;
}
.gzs-person {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  min-width: 0;
  height: 100%;
  padding: 12px 12px 0 !important;
  border: 1px solid #e2eae5;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  position: relative;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
/* il volto riempie la cima della card: e' la differenza fra le prime due card
   della fotografia e la terza, dove il ritratto stava piccolo di fianco */
.gzs-person > img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  /* NESSUN TETTO QUI: lo mette la colonna, sopra. Un tetto anche qui non
     servirebbe a niente oggi e domani farebbe danno: se un giorno le due
     misure divergessero, il volto diventerebbe un francobollo dentro una
     card larga, e nessuno capirebbe perche'. Una misura, un posto. */
  max-width: 100% !important;
  margin: 0 auto;
  border-radius: 9px !important;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  flex: 0 0 auto;
}
/* LA TIPOGRAFIA DI QUESTO BLOCCO NON SI TOCCA, ed e' una correzione del
   20/09: qui avevo imposto 14px al nome e 12,5px al ruolo, e nessuno me lo
   aveva chiesto. L'ordine era «card uguali, volto in cima, media dimensione»,
   non «testo piu' piccolo». I caratteri li decide il tema dell'app, che li
   ha gia' scelti. Qui resta solo cio' che serve a incolonnare la card.      */
.gzs-person-t {
  display: block;
  margin: 12px 0 12px;
  min-width: 0;
}
.gzs-person-t strong { display: block; }
/* la riga verde in fondo, come nel riferimento */
.gzs-person::after {
  content: "";
  display: block;
  height: 4px;
  margin: auto -12px 0;
  background: linear-gradient(90deg, #0f7a4c, #17a56a 55%, #0f7a4c);
  border-radius: 4px 4px 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .gzs-person:hover { border-color: #b5d8c5; box-shadow: 0 12px 30px #16392c14; }
  html[data-gz-premium="on"]:not([data-gz-motion="off"]) .gzs-person:hover { transform: translateY(-2px); }
}
.gzs-person:focus-visible { outline: 3px solid #087c5c; outline-offset: 3px; }
@media (max-width: 640px) {
  .gzs-people { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 12px !important; }
}

/* ── IL BLOCCO DEGLI ASSISTENTI · uno solo, dopo i quadrotti ──────────── */
/* Ordine della Direzione del 20/09/2026: titolo, dati, quadrotti numerici,
   BLOCCO AI, poi tutto il resto. Una card per assistente, niente tavole di
   volti, niente segnaposto se la pagina non ha assistenti (il blocco non
   viene proprio creato: lo decide gz-avatar-in-cima.js).                   */
#gz-blocco-ai {
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid var(--gzpp-bordo, #d9e5de);
  border-radius: 18px;
  background: var(--gzpp-velo, #fffffccc);
}
.gz-blocco-ai-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}
#gz-blocco-ai .gz-h2 {
  margin: 0;
  font-weight: 700;
  color: var(--gzpp-inchiostro, #16302a);
}
.gz-blocco-ai-vai {
  flex: 0 0 auto;
  font-weight: 650;
  text-decoration: none;
  color: var(--gzpp-verde, #0f7a4c);
  white-space: nowrap;
}
.gz-blocco-ai-vai:hover { text-decoration: underline; }

/* MEDIA DIMENSIONE, come il riferimento della Direzione: la card sta intorno
   ai 250 px e il volto la riempie in cima. Non si allarga a piacere: oltre i
   300 px il ritratto diventa un poster e il blocco si mangia la pagina.     */
.gz-blocco-ai-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 265px));
  gap: 14px;
  align-items: stretch;
  justify-content: start;
}
.gz-aic {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 12px 12px 0;
  border: 1px solid #e2eae5;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.gz-aic-volto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: #eef3f0;
}
.gz-aic-volto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* i ritratti sono a mezzo busto: il viso sta in alto */
  display: block;
}
.gz-aic-nome {
  display: block;
  margin: 12px 0 2px;
  font-weight: 700;
  color: #14312a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gz-aic-ruolo {
  display: block;
  margin: 0 0 12px;
  line-height: 1.35;
  color: #6a7f76;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.gz-aic-riga {
  display: block;
  height: 4px;
  margin: auto -12px 0;
  background: linear-gradient(90deg, #0f7a4c, #17a56a 55%, #0f7a4c);
  border-radius: 4px 4px 0 0;
}
@media (hover: hover) and (pointer: fine) {
  .gz-aic:hover { border-color: #b5d8c5; box-shadow: 0 12px 30px #16392c14; }
  html[data-gz-premium="on"]:not([data-gz-motion="off"]) .gz-aic:hover { transform: translateY(-2px); }
}
.gz-aic:focus-visible { outline: 3px solid #087c5c; outline-offset: 3px; }
/* SE CLICCHI, VAI ALLA SUA PAGINA (ordine 20/09). La card e' un collegamento
   solo quando quella pagina esiste davvero: senza sigla non e' un <a>, e
   allora non si comporta da tasto. Un riquadro che sembra cliccabile e non
   porta da nessuna parte e' un tasto morto, e i tasti morti qui non escono. */
div.gz-aic { cursor: default; }
a.gz-aic { cursor: pointer; }

@media (max-width: 640px) {
  .gz-blocco-ai-griglia { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  #gz-blocco-ai { margin: 14px 0 18px; padding: 14px; }
}

/* ── I COMANDI ────────────────────────────────────────────────────────── */
html[data-gz-premium="on"] :is(.gz-cmd, .btn) {
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
html[data-gz-premium="on"] :is(.gz-cmd, .btn):active { transform: translateY(1px); }
html[data-gz-premium="on"] :is(.btn-primary, .gz-cmd--primario) {
  box-shadow: 0 6px 18px #0b6b4522;
}

/* ── LE ETICHETTE ─────────────────────────────────────────────────────── */
html[data-gz-premium="on"] .tag {
  border-radius: 999px;
}

/* ── IL COMANDO DEL MOVIMENTO · in un angolo, mai addosso al titolo ───── */
html[data-gz-premium="on"] #gz-premium-control[data-gzp-angolo] {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  margin: 0;
  padding: 8px 12px;
  min-height: 36px;
  opacity: .58;
  backdrop-filter: blur(6px);
}
html[data-gz-premium="on"] #gz-premium-control[data-gzp-angolo]:hover,
html[data-gz-premium="on"] #gz-premium-control[data-gzp-angolo]:focus-visible { opacity: 1; }
/* sul telefono sale sopra la barra in basso, senza coprirla */
@media (max-width: 720px) {
  html[data-gz-premium="on"] #gz-premium-control[data-gzp-angolo] {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 58px);
    padding: 6px 10px;
    min-height: 32px;
  }
}

/* ══ IL MOVIMENTO · da qui in giu' si spegne tutto insieme ═════════════ */
html[data-gz-premium="on"]:not([data-gz-motion="off"]) [data-gzp-entra] {
  animation: gzpp-sali .42s cubic-bezier(.22, .68, .32, 1) both;
  animation-delay: calc(var(--gzpp-i, 0) * 45ms);
}
@keyframes gzpp-sali {
  from { opacity: .4; transform: translateY(9px); }
  to   { opacity: 1;  transform: none; }
}

html[data-gz-premium="on"]:not([data-gz-motion="off"]) [data-gzp-num][data-gzp-entra] {
  animation: gzpp-cifra .5s ease both;
  animation-delay: calc(var(--gzpp-i, 0) * 45ms + 80ms);
}
@keyframes gzpp-cifra {
  from { opacity: .45; filter: blur(3px); }
  to   { opacity: 1;   filter: none; }
}

/* la riga di luce sotto il titolo di pagina, una volta sola all'ingresso */
html[data-gz-premium="on"]:not([data-gz-motion="off"]) [data-gzp-heading]::after {
  animation: gzpp-riga .55s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes gzpp-riga { from { width: 0; opacity: 0; } to { width: 56px; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html[data-gz-premium="on"] [data-gzp-entra],
  html[data-gz-premium="on"] [data-gzp-num][data-gzp-entra],
  html[data-gz-premium="on"] [data-gzp-heading]::after { animation: none !important; }
  html[data-gz-premium="on"] [data-gzp-tool]:hover { transform: none; }
}

/* ── LA STAMPA · niente ombre e niente moto sulla carta ───────────────── */
@media print {
  html[data-gz-premium="on"] [data-gzp-sez],
  html[data-gz-premium="on"] [data-gzp-tool],
  html[data-gz-premium="on"] [data-gzp-surface] { box-shadow: none !important; }
  html[data-gz-premium="on"] [data-gzp-entra] { animation: none !important; }
  #gz-premium-control { display: none !important; }
}

/* ── IL TELEFONO · meno ombre, stessa leggibilita' ────────────────────── */
@media (max-width: 640px) {
  html[data-gz-premium="on"] [data-gzp-sez] { border-radius: 14px; }
  html[data-gz-premium="on"] [data-gzp-entra] { animation-delay: 0ms; }
}

/* ══ LA DISTRIBUZIONE SI LEGGE ═════════════════════════════════════════════
   Ordine della Direzione del 20/09: «numeri KPI troppo piccoli, etichette
   almeno 14, testi operativi 16. La provenienza ChatGPT non rende corretta
   una regola troppo minuta».

   MISURATO in gz-premium.css: 25 dichiarazioni di carattere sotto i 14 px,
   tutte nel blocco `.gzd-` della Distribuzione (kicker 11, etichette 11,
   aiuti 12, campi 12, codici 12, barre 13, riconciliazione 12-13).
   Questo foglio si carica DOPO quello, quindi qui basta rialzare: non si
   tocca il file di ChatGPT e la sua patch resta reintegrabile.

   Si alzano i testi, NON si tocca la griglia: le card vanno a capo da sole
   perche' le colonne sono gia' a minmax.                                   */

/* le etichette: mai sotto 14 */
html[data-gz-premium="on"] :is(.gzd-kicker, .gzd-label) { font-size: 14px; }

/* i testi operativi, le descrizioni, i campi: 16 */
html[data-gz-premium="on"] :is(.gzd-help, .gzd-coverage, .gzd-field,
  .gzd-detail p, .gzd-path, .gzd-codes, .gzd-statuses, .gzd-chart-total,
  .gzd-reconcile-row, .gzd-reconcile-row p, .gzd-client-text,
  .gzd-client-text span, .gzd-client-text small, .gzd-bar-title) {
  font-size: 16px;
  line-height: 1.5;
}
html[data-gz-premium="on"] .gzd-client-text strong { font-size: 17px; }
html[data-gz-premium="on"] .gzd-statuses button { font-size: 16px; }
html[data-gz-premium="on"] :is(.gzd-field input, .gzd-field select) { font-size: 16px; }

/* il numero grande della metrica: 36-40, come i quadrotti */
html[data-gz-premium="on"] .gzd-metric strong { font-size: clamp(32px, 2.6vw, 40px); }
html[data-gz-premium="on"] .gzd-reconcile-row b { font-size: 20px; }

/* sul telefono il numero resta grande e le card vanno a capo */
@media (max-width: 640px) {
  html[data-gz-premium="on"] .gzd-metric strong { font-size: clamp(28px, 8vw, 32px); }
  html[data-gz-premium="on"] .gzd-metrics { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}