/* ============================================================
   AcquaMia — landing /contratto
   Traffico: i 5 video sulla "manutenzione inclusa".
   Conversione: click WhatsApp con parola chiave CONTRATTO.

   Tema scuro obbligato: il wordmark del logo è bianco.
   Palette dal logo e dal bigliettino. La pagina è impaginata
   come un contratto — clausole numerate, libro mastro — perché
   di contratti parla: la struttura porta il concetto, non il
   carattere tipografico.

   Meccaniche prese dalle landing che convertono (GreenTheory):
   CTA ripetuta e identica, in prima persona · struttura
   numerata "di solito / da me" · costo ridotto a unità
   giornaliera · ponte per chi è già legato a un concorrente ·
   barra d'azione sempre presente su mobile · pagina lunga,
   fatta per essere saltata a blocchi.
   Non copiato di proposito: il conto alla rovescia finto.
   ============================================================ */

:root{
  --ink:      #06121B;
  --deep:     #0C2437;
  --denim:    #143D5A;
  --blue:     #1E63B8;
  --blue-dk:  #164A8C;
  --sky:      #8FC2EE;
  --paper:    #EEF3F7;
  --silver:   #A9B6C2;
  --mute:     #8497A8;   /* schiarito: su fondo scuro il testo piccolo va tenuto alto */
  --amber:    #E09A3F;   /* schiarito per lo stesso motivo */
  --line:     rgba(238,243,247,.13);
  --line-sf:  rgba(238,243,247,.07);

  /* Titoli e testo: stesse scelte di chi converte (Inter Tight + Inter).
     Niente serif nel testo: su fondo scuro, al telefono, si impasta.
     Il serif del brand resta dov'è giusto che stia — dentro il logo. */
  --display: "Inter Tight", "Segoe UI", system-ui, -apple-system, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --col: 41rem;
  --wide: 62rem;
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --bar: 4.6rem;          /* altezza barra d'azione su mobile */
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-weight:400;
  font-size:clamp(1rem,.96rem + .22vw,1.115rem); line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding-bottom:var(--bar);
}
@media (min-width:52rem){ body{ padding-bottom:0; } }

body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 45% at 78% -6%, rgba(30,99,184,.20), transparent 62%),
    radial-gradient(60% 40% at 4% 102%, rgba(20,61,90,.34), transparent 66%);
}
.page{ position:relative; z-index:1; }

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

.kicker{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--sky); margin:0;
}
.lede{ font-size:1.1em; color:var(--silver); }

a{ color:var(--sky); text-underline-offset:3px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--sky); outline-offset:3px; border-radius:2px; }

.wrap{ width:min(100% - var(--gut)*2, var(--col)); margin-inline:auto; }
.wide{ width:min(100% - var(--gut)*2, var(--wide)); margin-inline:auto; }

section{ padding-block:clamp(3rem,7.5vw,5rem); }

/* titolo di sezione, una regola sola per tutte */
.h-sec{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.85rem,5.2vw,2.7rem); line-height:1.15;
  letter-spacing:-.025em; margin-top:.7rem;
}
.h-sec em{ font-style:italic; font-weight:700; color:var(--sky); }

/* ============================================================
   TESTATA
   ============================================================ */
.top{
  display:flex; align-items:center; gap:.7rem;
  padding:1.3rem var(--gut) 0; max-width:var(--wide); margin-inline:auto;
}
.top img{ width:26px; height:auto; display:block; }
.top .nome{ font-family:var(--display); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; }
.top .zona{
  margin-left:auto; font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--mute);
}

/* ============================================================
   APERTURA
   ============================================================ */
.hero{ padding-block:clamp(2.5rem,6.5vw,4rem) clamp(2.25rem,5.5vw,3.25rem); }

.clause{
  border-left:2px solid var(--denim);
  padding-left:clamp(1rem,3vw,1.75rem); margin:1.4rem 0 0;
}
.clause .ref{
  font-family:var(--display); font-size:.78rem; font-style:italic;
  color:var(--mute); display:block; margin-bottom:.5rem;
}
.clause q{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.65rem,5.4vw,2.6rem); line-height:1.2; letter-spacing:-.02em;
  display:block; quotes:"«" "»"; color:var(--paper);
}
.rebut{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.7rem,5.4vw,2.6rem); line-height:1.15;
  letter-spacing:-.025em; margin:1.7rem 0 0;
}
.rebut em{ font-style:italic; font-weight:700; color:var(--sky); }
.hero p.lede{ margin:1.25rem 0 0; }

/* fascia di rassicurazione sotto la prima azione */
.trust{
  display:flex; flex-wrap:wrap; gap:.4rem 1.4rem;
  margin:1.4rem 0 0; padding:0; list-style:none;
  font-size:.83rem; color:var(--mute);
}
.trust li{ display:flex; align-items:center; gap:.45rem; }
.trust li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--sky); flex:none;
}

/* ============================================================
   L'AZIONE — stesso bottone, stesso testo, sei volte
   ============================================================ */
.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.05rem 1.8rem; background:var(--blue); color:#fff;
  font-weight:700; font-size:1.05rem; line-height:1.25;
  text-decoration:none; border:1px solid rgba(255,255,255,.16);
  text-align:center;
  transition:background .18s ease, transform .18s ease;
}
.cta:hover{ background:var(--blue-dk); transform:translateY(-1px); }
.cta svg{ width:1.2em; height:1.2em; flex:none; fill:currentColor; }
.cta--block{ display:flex; width:100%; }

/* blocco d'azione che si ripete tra una sezione e l'altra */
.push{
  padding-block:clamp(2rem,5vw,2.75rem);
  border-block:1px solid var(--line-sf); background:rgba(20,61,90,.22);
}
.push .inner{ display:grid; gap:1rem; justify-items:start; }
.push p{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:clamp(1.2rem,3.4vw,1.55rem); line-height:1.3;
}
.push small{ display:block; font-family:var(--body); font-weight:400; font-size:.85rem; color:var(--mute); margin-top:.5rem; }

/* ============================================================
   IL CONTO A SORPRESA
   ============================================================ */
.surprise{ background:var(--deep); border-block:1px solid var(--line-sf); }
.receipt{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem 1.1rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.receipt .amount{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3rem,11vw,4.8rem); line-height:.9; letter-spacing:-.03em;
  color:var(--amber); font-variant-numeric:tabular-nums;
}
.receipt .what{ font-size:.95rem; color:var(--silver); flex:1 1 12rem; min-width:0; }
.surprise p{ margin:1.4rem 0 0; }
.surprise p.last{ color:var(--silver); }

/* ============================================================
   LE TRE DOMANDE
   ============================================================ */
.questions{ margin:2.25rem 0 0; }
.q{
  display:grid; grid-template-columns:2.6rem 1fr;
  gap:0 clamp(.9rem,2.5vw,1.4rem);
  padding-block:1.5rem; border-top:1px solid var(--line);
}
.q:last-of-type{ border-bottom:1px solid var(--line); }
.q .n{
  font-family:var(--display); font-weight:700; font-size:1.55rem;
  line-height:1.1; color:var(--sky);
}
.q h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,3.4vw,1.5rem); line-height:1.24; }
.q p{ margin:.5rem 0 0; color:var(--silver); font-size:.96rem; }

.seal{
  margin:1.9rem 0 0; padding:1.1rem 1.3rem;
  background:linear-gradient(180deg, rgba(20,61,90,.55), rgba(20,61,90,.28));
  border:1px solid var(--line);
  font-family:var(--display); font-size:clamp(1.08rem,3vw,1.3rem);
  font-weight:600; line-height:1.35;
}
.seal span{ color:var(--sky); }

/* ============================================================
   IL LIBRO MASTRO
   ============================================================ */
.scroller{ overflow-x:auto; }
table.ledger{ width:100%; min-width:32rem; border-collapse:collapse; font-variant-numeric:tabular-nums; }
table.ledger th, table.ledger td{ text-align:left; padding:.8rem .8rem; }
table.ledger thead th{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  font-weight:700; color:var(--mute); padding-bottom:.55rem; border-bottom:1px solid var(--line);
}
table.ledger thead th.mine{ color:var(--sky); }
table.ledger tbody td{ border-bottom:1px solid var(--line-sf); }
table.ledger td.item{ color:var(--silver); font-size:.94rem; }
table.ledger td.num{ font-family:var(--display); font-weight:600; font-size:1.16rem; white-space:nowrap; }
table.ledger td.theirs{ color:var(--amber); }
table.ledger td.mine{ color:var(--paper); }
table.ledger tfoot td{ padding-top:1rem; border-top:1px solid var(--line); font-family:var(--display); font-weight:800; }
table.ledger tfoot td.item{
  font-family:var(--body); font-weight:700; font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--mute);
}
table.ledger tfoot td.num{ font-size:clamp(1.45rem,4vw,1.95rem); white-space:nowrap; }

.delta{
  margin:1.6rem 0 0; padding:1.15rem 1.35rem;
  border:1px solid var(--line); background:var(--deep);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.1rem;
}
.delta b{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.85rem,5.8vw,2.5rem); line-height:1;
  color:var(--sky); font-variant-numeric:tabular-nums;
}
.delta span{ color:var(--silver); font-size:.94rem; flex:1 1 14rem; }

.note{
  margin:1.4rem 0 0; font-size:.83rem; line-height:1.6; color:var(--mute);
  padding-left:1rem; border-left:1px solid var(--line);
}

/* il costo al giorno */
.daily{
  margin:1.9rem 0 0; padding:1.3rem 1.4rem;
  border:1px solid rgba(143,194,238,.22);
  background:linear-gradient(170deg, rgba(20,61,90,.5), rgba(12,36,55,.3));
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.2rem;
}
.daily b{
  font-family:var(--display); font-weight:800; line-height:1;
  font-size:clamp(2.4rem,8vw,3.6rem); color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.daily span{ color:var(--silver); font-size:.95rem; flex:1 1 15rem; }
.daily span b{ font-family:var(--body); font-size:1em; color:var(--paper); font-weight:700; }

/* ============================================================
   OTTO DIFFERENZE — di solito / da me
   ============================================================ */
.diffs{ margin:2.25rem 0 0; }
.diff{ padding-block:1.6rem; border-top:1px solid var(--line); }
.diff:last-child{ border-bottom:1px solid var(--line); }
.diff .head{ display:flex; align-items:baseline; gap:.8rem; }
.diff .n{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--sky); flex:none; font-variant-numeric:lining-nums;
}
.diff h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,3.4vw,1.5rem); line-height:1.24; }
.rows{ margin:.9rem 0 0 0; display:grid; gap:.5rem; }
.row{ display:grid; grid-template-columns:5.6rem 1fr; gap:.85rem; align-items:baseline; }
.row .tag{
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  padding:.28rem 0 0; color:var(--mute);
}
.row.them .tag{ color:var(--amber); }
.row.me .tag{ color:var(--sky); }
.row p{ margin:0; font-size:.97rem; }
.row.them p{ color:var(--silver); }
.row.me p{ color:var(--paper); }

/* ============================================================
   LA GARANZIA — la promessa che si paga da sé
   ============================================================ */
.warranty{
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(30,99,184,.22), transparent 70%),
    var(--deep);
  border-block:1px solid rgba(143,194,238,.2);
}
.warranty .bollo{
  display:inline-block; margin-bottom:1.1rem;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--ink); background:var(--sky); padding:.4rem .8rem;
}
.warranty .promise{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.75rem,5.6vw,2.85rem); line-height:1.14; letter-spacing:-.025em;
  margin:0;
}
.warranty .promise em{ font-style:italic; font-weight:700; color:var(--sky); }
.warranty p{ margin:1.3rem 0 0; color:var(--silver); }
.warranty p strong{ color:var(--paper); font-weight:700; }
.warranty .second{
  margin:2rem 0 0; padding:1.15rem 1.35rem;
  border:1px solid var(--line); background:rgba(6,18,27,.45);
}
.warranty .second b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.1rem,3.1vw,1.35rem); line-height:1.3; color:var(--paper);
}
.warranty .second span{ display:block; margin-top:.5rem; font-size:.94rem; color:var(--silver); }

/* ============================================================
   IL PONTE — chi ha già un contratto
   ============================================================ */
.bridge{ background:var(--deep); border-block:1px solid var(--line-sf); }
.bridge .big{
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,3.8vw,1.75rem); line-height:1.32;
  margin:1.6rem 0 0; color:var(--paper);
}

/* ============================================================
   CHI TE LO DICE
   ============================================================ */
.who{ display:grid; gap:clamp(1.6rem,4.5vw,2.5rem); align-items:start; }
@media (min-width:44rem){ .who{ grid-template-columns:14rem 1fr; } }
.who figure{ margin:0; }
.who img{ width:100%; height:auto; display:block; border:1px solid var(--line); filter:saturate(.9) contrast(1.03); }
.who figcaption{ margin-top:.65rem; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.who blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.22rem,3.5vw,1.65rem); line-height:1.32;
}
.who .sig{ margin:1.35rem 0 0; color:var(--silver); font-size:.96rem; }
.who .sig strong{ color:var(--paper); font-weight:600; }

/* ============================================================
   DOMANDE CHE MI FANNO
   ============================================================ */
.faq{ margin:2.1rem 0 0; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.2rem 1.15rem 0; position:relative;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.06rem,3vw,1.28rem); line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:.25rem; top:1rem;
  font-family:var(--display); font-weight:400; font-size:1.4rem; color:var(--sky);
  transition:transform .2s ease;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0 0 1.25rem; color:var(--silver); font-size:.97rem; max-width:34rem; }

/* ============================================================
   CHIUSURA
   ============================================================ */
.act{ background:linear-gradient(170deg, var(--denim), #0E2C41 72%); border-top:1px solid rgba(143,194,238,.18); }
.act p{ margin:1rem 0 0; color:#C9D8E5; }
.act .after{ margin:1rem 0 0; font-size:.86rem; color:#9FB4C6; }
.act .after code{ font-family:var(--body); font-weight:800; color:var(--paper); letter-spacing:.04em; }

/* ============================================================
   BARRA D'AZIONE FISSA — mobile
   ============================================================ */
.dock{
  position:fixed; inset:auto 0 0 0; z-index:50;
  padding:.65rem var(--gut) calc(.65rem + env(safe-area-inset-bottom));
  background:rgba(6,18,27,.93);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.dock .cta{ padding:.9rem 1.2rem; font-size:1rem; }
@media (min-width:52rem){ .dock{ display:none; } }

/* ============================================================
   PIEDE
   ============================================================ */
footer{ padding:clamp(2.25rem,5.5vw,3.25rem) 0 3rem; border-top:1px solid var(--line); font-size:.85rem; color:var(--mute); line-height:1.65; }
footer img{ width:120px; height:auto; display:block; margin-bottom:1.3rem; }
footer p{ margin:0 0 .8rem; max-width:38rem; }
footer .legal{ font-size:.78rem; color:#59697A; }
footer a{ color:var(--silver); }

@media (prefers-reduced-motion:no-preference){
  .hero > *{ animation:rise .55s cubic-bezier(.2,.7,.3,1) backwards; }
  .hero > *:nth-child(2){ animation-delay:.06s; }
  .hero > *:nth-child(3){ animation-delay:.12s; }
  @keyframes rise{ from{ opacity:0; transform:translateY(.6rem); } }
}

/* ============================================================
   LISTINO IN CHIARO — i prezzi dichiarati prima, non dopo
   ============================================================ */
.pricelist{ margin:2rem 0 0; }
.pl{
  display:grid; grid-template-columns:1fr auto; gap:.3rem 1.2rem;
  align-items:baseline; padding-block:1.05rem; border-top:1px solid var(--line);
}
.pl:last-of-type{ border-bottom:1px solid var(--line); }
.pl b{ font-weight:600; font-size:1.02rem; }
.pl i{ font-style:normal; display:block; color:var(--silver); font-size:.9rem; margin-top:.25rem; grid-column:1; }
.pl .eur{
  font-family:var(--display); font-weight:800; font-size:clamp(1.3rem,4vw,1.7rem);
  white-space:nowrap; font-variant-numeric:tabular-nums; grid-row:1; grid-column:2;
}

/* ============================================================
   IL BLOCCO ONESTO — quando la risposta è contro il mio interesse
   ============================================================ */
.honest{
  margin:2rem 0 0; padding:1.4rem 1.5rem;
  border:1px solid var(--line); border-left:3px solid var(--amber);
  background:rgba(224,154,63,.05);
}
.honest h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,3.2vw,1.4rem); line-height:1.3; margin-bottom:.9rem;
}
.honest ul{ margin:0; padding-left:1.15rem; color:var(--silver); }
.honest li{ margin-bottom:.5rem; }
.honest p{ margin:1.1rem 0 0; }

/* ============================================================
   LO SMASCHERAMENTO — il trucco spiegato
   ============================================================ */
.debunk{ background:var(--deep); border-block:1px solid var(--line-sf); }
.debunk .trick{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.5rem,4.6vw,2.15rem); line-height:1.2; letter-spacing:-.02em;
  margin:1.3rem 0 0;
}
.debunk .steps{ margin:1.8rem 0 0; display:grid; gap:0; }
.debunk .step{
  display:grid; grid-template-columns:1.9rem 1fr; gap:0 1rem;
  padding-block:1.1rem; border-top:1px solid var(--line);
}
.debunk .step:last-child{ border-bottom:1px solid var(--line); }
.debunk .step .n{ font-family:var(--display); font-weight:700; color:var(--sky); }
.debunk .step p{ margin:0; color:var(--silver); font-size:.97rem; }
.debunk .step p b{ color:var(--paper); font-weight:600; }

/* ============================================================
   CONFRONTO TRATTAMENTI
   ============================================================ */
table.treat{ width:100%; min-width:38rem; border-collapse:collapse; }
table.treat th, table.treat td{ text-align:left; padding:.85rem .8rem; vertical-align:top; }
table.treat thead th{
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--mute); border-bottom:1px solid var(--line);
}
table.treat tbody td{ border-bottom:1px solid var(--line-sf); font-size:.94rem; color:var(--silver); }
table.treat td.name{ color:var(--paper); font-weight:600; font-size:1rem; white-space:nowrap; }
table.treat td.no{ color:var(--amber); }

/* ============================================================
   LE PORTE — i quattro ingressi, in home
   ============================================================ */
.gates{ margin:2.25rem 0 0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:44rem){ .gates{ grid-template-columns:1fr 1fr; } }
.gate{
  background:var(--ink); padding:1.5rem 1.4rem; text-decoration:none; color:inherit;
  display:block; transition:background .18s ease;
}
.gate:hover{ background:var(--deep); }
.gate .q{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.1rem,3vw,1.3rem); line-height:1.3; color:var(--paper);
}
.gate .a{ display:block; margin-top:.55rem; font-size:.93rem; color:var(--silver); }
.gate .go{
  display:block; margin-top:.9rem; font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:700; color:var(--sky);
}

/* etichetta "consigliata" sulla voce di listino migliore */
.pl .best{
  display:inline-block; margin-left:.55rem; vertical-align:middle;
  font-family:var(--body); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700;
  color:var(--ink); background:var(--sky); padding:.22rem .5rem;
}
.pl .eur.free{ color:var(--sky); }

/* ============================================================
   LE VOCI DI UN CONTRATTO ALTRUI — trascritte, mai fotografate.
   Ogni voce è etichettata per quello che è: un controllo o una
   sostituzione vera. È il conteggio a fare l'argomento.
   ============================================================ */
.voci{ margin:1.9rem 0 0; border-top:1px solid var(--line); }
.voce{
  display:grid; grid-template-columns:1fr auto; gap:.2rem .9rem;
  align-items:baseline; padding:.72rem 0; border-bottom:1px solid var(--line-sf);
}
.voce span{ font-size:.97rem; color:var(--silver); }
.voce em{
  font-style:normal; font-size:.63rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:700; color:var(--mute); white-space:nowrap;
}
.voce.real span{ color:var(--paper); font-weight:600; }
.voce.real em{ color:var(--amber); }
.voce.real{ border-bottom-color:var(--line); }

.tally{
  margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:.4rem 2.2rem;
  padding:1.2rem 1.35rem; border:1px solid var(--line); background:rgba(6,18,27,.5);
}
.tally div{ display:flex; align-items:baseline; gap:.6rem; }
.tally b{
  font-family:var(--display); font-weight:800; font-size:clamp(2rem,6vw,2.7rem);
  line-height:1; font-variant-numeric:tabular-nums;
}
.tally .n-grey b{ color:var(--silver); }
.tally .n-real b{ color:var(--amber); }
.tally span{ font-size:.9rem; color:var(--silver); max-width:11rem; line-height:1.35; }

.fineprint{
  margin:1.8rem 0 0; padding:1.25rem 1.4rem;
  border:1px dashed rgba(224,154,63,.45); background:rgba(224,154,63,.05);
}
.fineprint q{
  display:block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,3.4vw,1.5rem); line-height:1.3; quotes:"\00ab" "\00bb";
  color:var(--paper);
}
.fineprint small{
  display:block; margin-top:.7rem; font-size:.82rem; color:var(--mute);
  letter-spacing:.02em;
}

/* ============================================================
   LE PROVE — foto dei documenti, con i dati oscurati da noi.
   Fondo bianco su pagina scura: si stacca, ed è voluto.
   Deve sembrare quello che è: un foglio, non un'illustrazione.
   ============================================================ */
.shots{ display:grid; gap:1.5rem; margin:2rem 0 0; }
@media (min-width:46rem){ .shots.due{ grid-template-columns:1fr 1fr; } }

.shot{ margin:0; }
.shot img{
  width:100%; height:auto; display:block;
  border:1px solid rgba(238,243,247,.22);
}
.shot figcaption{
  margin-top:.8rem; font-size:.86rem; line-height:1.5; color:var(--silver);
}
.shot figcaption b{ color:var(--paper); font-weight:600; }
.shot .redatto{
  display:inline-block; margin-top:.6rem;
  font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:var(--mute); border:1px solid var(--line); padding:.3rem .6rem;
}

/* ===== Banner dei cookie (compare solo se il pixel di Meta è configurato) =====
   In alto, perché in basso c'è la barra fissa di WhatsApp e non va coperta. */
.cookie{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:calc(.9rem + env(safe-area-inset-top,0px)) 2.6rem .9rem 1rem;
  background:var(--deep); border-bottom:1px solid var(--line);
  font-size:.85rem; line-height:1.5; color:var(--paper);
}
.cookie p{ margin:0 0 .7rem; max-width:44rem; }
.cookie a{ color:var(--sky); }
.cookie__b{ display:flex; gap:.6rem; }
/* I due bottoni hanno lo stesso peso visivo: lo chiede il Garante. */
.cookie__b button{
  flex:1; max-width:11rem; padding:.6rem 1rem; border-radius:8px; cursor:pointer;
  font:600 .9rem/1 inherit; color:var(--paper); background:transparent; border:1px solid var(--silver);
}
.cookie__x{
  position:absolute; top:calc(.4rem + env(safe-area-inset-top,0px)); right:.5rem;
  width:2rem; height:2rem; background:none; border:0; color:var(--silver); font-size:1.4rem; cursor:pointer;
}